Flutter GridView显示随机单词
伟雪无痕 人气:0一.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<Widget> children = const <Widget>[], 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<StatefulWidget> createState()=>GridViewPageStae(); } class GridViewPageStae extends State<GridViewPage>{ @override Widget build(BuildContext context) { //final _suggestions=<WordPair>[]; List<WordPair> 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<WordPair> getDataList() { List<WordPair> datas =generateWordPairs().take(100).toList(); return datas; } List<Widget> 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, ); } }
三.实际效果
加载全部内容