Flutter GridView显示随机单词效果
更新时间:2022年03月23日 11:17:58 作者:伟雪无痕
这篇文章主要为大家详细介绍了Flutter GridView显示随机单词效果,文中示例代码介绍的非常详细,具有一定的参考价值,感兴趣的小伙伴们可以参考一下
本文实例为大家分享了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<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, ); } }
三.实际效果
以上就是本文的全部内容,希望对大家的学习有所帮助,也希望大家多多支持脚本之家。
相关文章
浅谈Android Activity与Service的交互方式
下面小编就为大家带来一篇浅谈Android Activity与Service的交互方式。小编觉得挺不错的,现在就分享给大家,也给大家做个参考。一起跟随小编过来看看吧2016-09-09Android中用onSaveInstanceState保存Fragment状态的方法
这篇文章主要介绍了Android中用onSaveInstanceState保存Fragment状态的方法,onSaveInstanceState可以将数据保存在Fragment或Activity中,需要的朋友可以参考下2016-04-04Kotlin协程开发之Flow的融合与Channel容量及溢出策略介绍
这篇文章主要介绍了Kotlin协程:Flow的融合、Channel容量、溢出策略,文中通过示例代码介绍的非常详细,对大家的学习或者工作具有一定的参考学习价值,需要的朋友们下面随着小编来一起学习学习吧2022-09-09
最新评论