您好,登录后才能下订单哦!
密码登录
登录注册
点击 登录注册 即表示同意《亿速云用户服务条款》
本篇内容介绍了“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列表 ),
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, ); } }
“Flutter GridView怎么显示随机单词效果”的内容就介绍到这里了,感谢大家的阅读。如果想了解更多行业相关的知识可以关注亿速云网站,小编将为大家输出更多高质量的实用文章!
免责声明:本站发布的内容(图片、视频和文字)以原创、转载和分享为主,文章观点不代表本网站立场,如果涉及侵权请联系站长邮箱:is@yisu.com进行举报,并提供相关证据,一经查实,将立刻删除涉嫌侵权内容。