日本免费高清视频-国产福利视频导航-黄色在线播放国产-天天操天天操天天操天天操|www.shdianci.com

學無先后,達者為師

網站首頁 編程語言 正文

Flutter?GridView顯示隨機單詞效果_Android

作者:偉雪無痕 ? 更新時間: 2022-05-26 編程語言

本文實例為大家分享了Flutter GridView顯示隨機單詞的具體代碼,供大家參考,具體內容如下

一.Flutter GridView屬性及構建方法介紹

1.SliverGridDelegateWithFixedCrossAxisCount構建固定數量的Widget

gridDelegate = SliverGridDelegateWithFixedCrossAxisCount(
? ? ? ? ?crossAxisCount: crossAxisCount, //設置每行個數
? ? ? ? ?mainAxisSpacing: mainAxisSpacing, //設置上下間隙
? ? ? ? ?crossAxisSpacing: crossAxisSpacing, //設置水平間隙
? ? ? ? ?childAspectRatio: childAspectRatio, //來設置寬高比例
? ? ? ?),

1).GridView.custom構建

GridView.custom(
? ? ? ? ? gridDelegate: const SliverGridDelegateWithFixedCrossAxisCount(
? ? ? ? ? ? crossAxisCount: 2, mainAxisSpacing: 10.0, crossAxisSpacing: 20.0, ),
? ? ? ? ? childrenDelegate: SliverChildBuilderDelegate((context, position) {
? ? ? ? ? ? return getItemContainer(datas[position].asPascalCase);
? ? ? ? ? }, childCount: datas.length))

2).GridView.builder構建

GridView.builder(
? ? ? ? ? itemCount: datas.length,
? ? ? ? ? gridDelegate: const SliverGridDelegateWithFixedCrossAxisCount(
? ? ? ? ? ? ? crossAxisCount: 2,
? ? ? ? ? ? ? mainAxisSpacing: 20.0,
? ? ? ? ? ? ? crossAxisSpacing: 10.0,
? ? ? ? ? ? ? childAspectRatio: 1.0),
? ? ? ? ? ? ? itemBuilder: (BuildContext context, int index) {
? ? ? ? ? ? ? ? return getItemContainer(datas[index]);
? ? ? ? ? }),

2. ?GridView.count屬性及構建

GridView.count({
? ? Key? key,
? ? Axis scrollDirection = Axis.vertical, //設置滾動方向
? ? bool reverse = false,
? ? ScrollController? controller,
? ? bool? primary,
? ? ScrollPhysics? physics,
? ? bool shrinkWrap = false,
? ? EdgeInsetsGeometry? padding,
? ? required int crossAxisCount, //設置每行個數
? ? double mainAxisSpacing = 0.0,//設置上下間隙
? ? double crossAxisSpacing = 0.0, //設置水平間隙
? ? double childAspectRatio = 1.0, //來設置寬高比例
? ? bool addAutomaticKeepAlives = true,
? ? bool addRepaintBoundaries = true,
? ? bool addSemanticIndexes = true,
? ? double? cacheExtent,
? ? List children = const [],
? ? int? semanticChildCount,
? ? DragStartBehavior dragStartBehavior = DragStartBehavior.start,
? ? ScrollViewKeyboardDismissBehavior keyboardDismissBehavior = ScrollViewKeyboardDismissBehavior.manual,
? ? String? restorationId,
? ? Clip clipBehavior = Clip.hardEdge,
? })
GridView.count(
? ? ? ? crossAxisSpacing: 10.0,//水平子Widget之間間距
? ? ? ? mainAxisSpacing: 20.0,//垂直子Widget之間間距
? ? ? ? padding: const EdgeInsets.all(10.0),//GridView內邊距
? ? ? ? crossAxisCount: 2,//行的Widget數量
? ? ? ? childAspectRatio: 2.0,//子Widget寬高比例
? ? ? ? children: getWidgetList()//子Widget列表
? ? ? ),

二.demo展示

import 'package:english_words/english_words.dart';
import 'package:flutter/material.dart';
?
class GridViewPage extends StatefulWidget{
? const GridViewPage({Key? key}) : super(key: key);
?
? @override
? State createState()=>GridViewPageStae();
?
}
?
class GridViewPageStae extends State{
? @override
? Widget build(BuildContext context) {
? ? //final _suggestions=[];
? ? List datas =generateWordPairs().take(100).toList();
? ? return Scaffold(
? ? ? appBar: AppBar(
? ? ? ? title: Text('Gridview test'),
? ? ? ),
? ? ? body:/*GridView.custom(
? ? ? ? ? gridDelegate: const SliverGridDelegateWithFixedCrossAxisCount(
? ? ? ? ? ? crossAxisCount: 2, mainAxisSpacing: 10.0, crossAxisSpacing: 20.0, ),
? ? ? ? ? childrenDelegate: SliverChildBuilderDelegate((context, position) {
? ? ? ? ? ? return getItemContainer(datas[position].asPascalCase);
? ? ? ? ? }, childCount: datas.length))*/
? ? ?/* GridView.count(
? ? ? ? crossAxisSpacing: 10.0,//水平子Widget之間間距
? ? ? ? mainAxisSpacing: 20.0,//垂直子Widget之間間距
? ? ? ? padding: const EdgeInsets.all(10.0),//GridView內邊距
? ? ? ? crossAxisCount: 2,//行的Widget數量
? ? ? ? childAspectRatio: 2.0,//子Widget寬高比例
? ? ? ? children: getWidgetList()//子Widget列表
? ? ? ),*/
? ? ? GridView.builder(
? ? ? ? ? itemCount: datas.length,
? ? ? ? ? gridDelegate: const SliverGridDelegateWithFixedCrossAxisCount(
? ? ? ? ? ? ? crossAxisCount: 2,
? ? ? ? ? ? ? mainAxisSpacing: 20.0,
? ? ? ? ? ? ? crossAxisSpacing: 10.0,
? ? ? ? ? ? ? childAspectRatio: 1.0),
? ? ? ? ? ? ? itemBuilder: (BuildContext context, int index) {
? ? ? ? ? ? ? ? return getItemContainer(datas[index]);
? ? ? ? ? }),
? ? );
?
? }
?
? List getDataList() {
? ? List datas =generateWordPairs().take(100).toList();
? ? return datas;
? }
?
? List getWidgetList() {
? ? return getDataList().map((item) => getItemContainer(item)).toList();
? }
?
? Widget getItemContainer(WordPair item) {
? ? return Container(
? ? ? alignment: Alignment.center,
? ? ? //width: 50.0,
? ? ? //height: 50.0,
? ? ? child: Text(
? ? ? ? item.asPascalCase,
? ? ? ? style: const TextStyle(color: Colors.white, fontSize: 18),
? ? ? ),
? ? ? color: Colors.lightGreen,
? ? );
? }
?
}

三.實際效果

原文鏈接:https://blog.csdn.net/j086924/article/details/122597896

欄目分類
最近更新