Flutter GridView详解
GridView
- GridView常用构造
- GridView
- 构造函数
- GridView.count
- 构造函数
- 分析和使用
- GridView.extent
- 构造函数
- 分析和使用
- GridView.builder
- 构造函数
- 分析和使用
- GridView.custom
- 构造函数
- 分析和使用
GridView常用构造
GridView
构造函数
GridView({Key key, Axis scrollDirection: Axis.vertical, bool reverse: false,ScrollController controller, bool primary, ScrollPhysics physics, bool shrinkWrap: false,EdgeInsetsGeometry padding, @required SliverGridDelegate gridDelegate, bool addAutomaticKeepAlives: true,bool addRepaintBoundaries: true, bool addSemanticIndexes: true,double cacheExtent, List<Widget> children: const [], int semanticChildCount })Creates a scrollable, 2D array of widgets with a custom SliverGridDelegate. [...]
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 [], int semanticChildCount })Creates a scrollable, 2D array of widgets with a fixed number of
tiles in the cross axis. [...]
分析和使用
Widget gridViewDefaultCount(List<BaseBean> list) {return GridView.count(
// padding: EdgeInsets.all(5.0),//一行多少个crossAxisCount: 5,//滚动方向scrollDirection: Axis.vertical,// 左右间隔crossAxisSpacing: 10.0,// 上下间隔mainAxisSpacing: 10.0,//宽高比childAspectRatio: 2 / 5,children: initListWidget(list),);}List<Widget> initListWidget(List<BaseBean> list) {List<Widget> lists = [];for (var item in list) {lists.add(new Container(height: 50.0,width: 50.0,color: Colors.yellow,child: new Center(child: new Text(item.age.toString(),)),));}return lists;}
GridView.extent
构造函数
GridView.extent({Key key, Axis scrollDirection: Axis.vertical,bool reverse: false, ScrollController controller,bool primary, ScrollPhysics physics, bool shrinkWrap: false, EdgeInsetsGeometry padding,@required double maxCrossAxisExtent,double mainAxisSpacing: 0.0, double crossAxisSpacing: 0.0,double childAspectRatio: 1.0, bool addAutomaticKeepAlives: true,bool addRepaintBoundaries: true, bool addSemanticIndexes: true,List<Widget> children: const [], int semanticChildCount })Creates a scrollable, 2D array of widgets with tiles that
each have a maximum cross-axis extent. [...]
分析和使用
///GridView.extent 允许您指定项的最大像素宽度Widget gridViewDefaultExtent(List<BaseBean> list) {return GridView.extent(///设置item的最大像素宽度 比如 130maxCrossAxisExtent: 130.0,///其他属性和count一样children: initListWidget(list),);}
GridView.builder
构造函数
GridView.builder({Key key, Axis scrollDirection: Axis.vertical,bool reverse: false, ScrollController controller, bool primary, ScrollPhysics physics,bool shrinkWrap: false, EdgeInsetsGeometry padding, @required SliverGridDelegate gridDelegate, @required IndexedWidgetBuilder itemBuilder,int itemCount, bool addAutomaticKeepAlives: true,bool addRepaintBoundaries: true, bool addSemanticIndexes: true, double cacheExtent, int semanticChildCount })Creates a scrollable, 2D array of widgets that are created on demand. [...]
分析和使用
///GridView.builder 可以定义gridDelegate的模式Widget gridViewDefaultBuilder(List<BaseBean> list) {return GridView.builder(gridDelegate: MyGridViewDefaultCustom(crossAxisCount: 2,mainAxisSpacing: 10.0,crossAxisSpacing: 10.0,childAspectRatio: 1.0,),itemBuilder: (context, i) => new Container(child: new Row(mainAxisAlignment: MainAxisAlignment.spaceEvenly,children: <Widget>[new Text("${list[i].name}",style: new TextStyle(fontSize: 18.0, color: Colors.red),),new Text("${list[i].age}",style: new TextStyle(fontSize: 18.0, color: Colors.green),),new Text("${list[i].content}",style: new TextStyle(fontSize: 18.0, color: Colors.blue),),],),));}
///自定义SliverGridDelegate
class MyGridViewDefaultCustom extends SliverGridDelegate {///横轴上的子节点数。 一行多少个childfinal int crossAxisCount;///沿主轴的每个子节点之间的逻辑像素数。 默认垂直方向的子child间距 这里的是主轴方向 当你改变 scrollDirection: Axis.vertical,就是改变了主轴发方向final double mainAxisSpacing;///沿横轴的每个子节点之间的逻辑像素数。默认水平方向的子child间距final double crossAxisSpacing;///每个孩子的横轴与主轴范围的比率。 child的宽高比 常用来处理child的适配final double childAspectRatio;bool _debugAssertIsValid() {assert(mainAxisSpacing >= 0.0);assert(crossAxisSpacing >= 0.0);assert(childAspectRatio > 0.0);return true;}const MyGridViewDefaultCustom({@required this.crossAxisCount,this.mainAxisSpacing = 0.0,this.crossAxisSpacing = 0.0,this.childAspectRatio = 1.0,}) : assert(crossAxisCount != null && crossAxisCount > 0),assert(mainAxisSpacing != null && mainAxisSpacing >= 0),assert(crossAxisSpacing != null && crossAxisSpacing >= 0),assert(childAspectRatio != null && childAspectRatio > 0);/// 返回值有关网格中图块大小和位置的信息。这里就是处理怎么摆放 我们可以自己定义/// SliverGridLayout是抽象类 SliverGridRegularTileLayout继承于SliverGridLayout是抽象类@overrideSliverGridLayout getLayout(SliverConstraints constraints) {// TODO: implement getLayoutassert(_debugAssertIsValid());///对参数的修饰 自定义final double usableCrossAxisExtent =constraints.crossAxisExtent - crossAxisSpacing * (crossAxisCount - 1);final double childCrossAxisExtent = usableCrossAxisExtent / crossAxisCount;final double childMainAxisExtent = childCrossAxisExtent / childAspectRatio;return MySliverGridLayout(crossAxisCount: crossAxisCount,mainAxisStride: childMainAxisExtent + mainAxisSpacing,crossAxisStride: childCrossAxisExtent + crossAxisSpacing,childMainAxisExtent: childMainAxisExtent,childCrossAxisExtent: childCrossAxisExtent,reverseCrossAxis: axisDirectionIsReversed(constraints.crossAxisDirection),);}/// 和ListView的 shouldRebuild 作用一样 之前的实例和新进来的实例是相同的就返回true@overridebool shouldRelayout(SliverGridDelegate oldDelegate) {// TODO: implement shouldRelayoutreturn true;}
}
GridView.custom
构造函数
GridView.custom({Key key, Axis scrollDirection: Axis.vertical,bool reverse: false, ScrollController controller, bool primary, ScrollPhysics physics, bool shrinkWrap: false, EdgeInsetsGeometry padding,@required SliverGridDelegate gridDelegate,@required SliverChildDelegate childrenDelegate, double cacheExtent,int semanticChildCount })Creates a scrollable, 2D array of widgets with both a customSliverGridDelegate and a custom SliverChildDelegate. [...]
分析和使用
///GridView.custom 就是自己定制规则/// 这里说一下 GridView.count gridDelegate 其实就是内部实现 SliverGridDelegateWithFixedCrossAxisCount/// GridView.extent gridDelegate 其实就是内部实现 SliverGridDelegateWithMaxCrossAxisExtentWidget gridViewDefaultCustom(List<BaseBean> list) {return GridView.custom(gridDelegate: MyGridViewDefaultCustom(crossAxisCount: 2,mainAxisSpacing: 10.0,crossAxisSpacing: 10.0,childAspectRatio: 1.0,),childrenDelegate: MyGridChildrenDelegate((BuildContext context, int i) {return new Container(child: new Row(mainAxisAlignment: MainAxisAlignment.spaceEvenly,children: <Widget>[new Text("${list[i].name}",style: new TextStyle(fontSize: 18.0, color: Colors.red),),new Text("${list[i].age}",style: new TextStyle(fontSize: 18.0, color: Colors.green),),new Text("${list[i].content}",style: new TextStyle(fontSize: 18.0, color: Colors.blue),),],));},childCount: list.length,),);}
/*** 继承SliverChildBuilderDelegate 可以对列表的监听*/
class MyGridChildrenDelegate extends SliverChildBuilderDelegate {MyGridChildrenDelegate(Widget Function(BuildContext, int) builder, {int childCount,bool addAutomaticKeepAlive = true,bool addRepaintBoundaries = true,}) : super(builder,childCount: childCount,addAutomaticKeepAlives: addAutomaticKeepAlive,addRepaintBoundaries: addRepaintBoundaries);///监听 在可见的列表中 显示的第一个位置和最后一个位置@overridevoid didFinishLayout(int firstIndex, int lastIndex) {print('firstIndex: $firstIndex, lastIndex: $lastIndex');}///可不重写 重写不能为null 默认是true 添加进来的实例与之前的实例是否相同 相同返回true 反之false///listView 暂时没有看到应用场景 源码中使用在 SliverFillViewport 中@overridebool shouldRebuild(SliverChildBuilderDelegate oldDelegate) {// TODO: implement shouldRebuildprint("oldDelegate$oldDelegate");return super.shouldRebuild(oldDelegate);}
}
Flutter GridView详解相关推荐
- Flutter Widget详解
Flutter Widget详解 Widget是Flutter应用程序用户界面的基本构建块.每个Widget都是用户界面一部分的不可变声明. 与其他将视图.控制器.布局和其他属性分离的框架不同,Flu ...
- 学习笔记-Flutter 动画详解(一)
Flutter 动画详解(一) 本文主要介绍了动画的原理相关概念,对其他平台的动画做了一个简要的梳理,并简要的介绍了Flutter动画的一些知识. 1. 动画介绍 动画对于App来说,非常的重要.很多 ...
- Flutter Text详解
示例 API Text,很常用的一个Widget:用于显示简单样式文本,它包含一些控制文本显示样式的一些属性 text构造方法源码: /// If the [style] argument is nu ...
- Flutter ListView详解
ListView详解 ListView常用构造 ListView ListView 默认构建 效果 ListView ListTile ListTile 属性 ListTile 使用 效果 ListV ...
- [flutter专题]详解AppBar小部件
大家好,我是坚果,公众号"坚果前端" AppBar 应用栏是各种应用程序中最常用的组件之一.它可用于容纳搜索字段.以及在页面之间导航的按钮,或者只是页面标题.由于它是一个如此常用的 ...
- GridView详解
快速预览: GridView无代码分页排序 GridView选中,编辑,取消,删除 GridView正反双向排序 GridView和下拉菜单DropDownList结合 GridView和CheckB ...
- 风影ASP.NET基础教学 12 GridView详解
如果你用过GridView控件后,我相信你会很快喜欢使用它.GridView控件是老版本DataGrid的新一代改良者.是基于DataGrid改良而来的,它不但具备了更强大的数据网格显示与统计等功能, ...
- android gridview 详解,Android GridView九宫图
属性名称 描述 android:columnWidth 设置列的宽度. android:gravity 设置此组件中的内容在组件中的位置.可选的值有:top.bottom.left.right.cen ...
- Flutter安装详解 as版本
1 第一步下载flutter sdk 选择我们需要下载flutter sdk 的目录鼠标右键打开 Git Bash Here 输入以下文字 点击回车 等待下载完成即可. git clone -b al ...
最新文章
- 【MySQL】ubuntu16.04安装mysql,然后源码编译Qt5.12.4版本的libqsqlmysql.so
- window7/10 安装Tomcat
- NSIndexPath类
- centos mysql 安装 yum源_Linux - CentOS 7 通过Yum源安装 MySql 5.7
- mac下使用n管理node版本
- oracle怎样查询某用户下的所有表的表名
- 【Python CheckiO 题解】Non-unique Elements
- mysql 导入.sql文件_MySQL导入.sql文件及常用命令
- windows server 2012/2016 开启桌面图标
- 家里的宽带是300兆,路由器也是换的千兆的,为何网络还是不好?
- JQ实现单击按钮 倒计时获取验证码
- [每天一个知识点]20-Java语言-菱形运算符
- Android SDK的安装教程
- android Activity设置透明主题样式方法
- arcgis小班编号问题 工具箱来喽
- Arthas Spring Boot Starter工程启动报错
- 每天一个linux命令(4):mkdir命令
- 《超大流量分布式系统架构解决方案》
- Uber AVS 自动驾驶可视化工具(一)
- Dreamweaver8安装后无法启动
热门文章
- 沸腾20年的互联网,趋于平静,新型开发生态,如日中天
- 【报告分享】2021新国货CoolTop100品牌榜(附下载)
- POJ 3271 BFS (大坑)
- lasagne模型参数的查看、保存和读取
- 天猫双十一自动领取优惠券代码
- ICMPv6协议中各种Type的详细取值范围及其含义
- JisonLexerError: Lexical error on line 1: Unrecognized text Erroneous area:\n1: 100VH - 44px
- 从《Doom》到《Dunia》 回顾3D游戏引擎发展历程二
- 跨国并购捷径,中国企业欲在车联网领域弯道超车
- 都2022年了,你还在看PS脸色小心翼翼作图?