flutter GridView 九宫格

作者: 0d1ea6d041fa | 来源:发表于2020-07-14 20:39 被阅读0次

    我收集了一些学习用的资料,其中包含了很多学习,面试,中高进阶fluuter资料,还有很多视频详解,如果有同学想进一步了解,详情请看文末。也欢迎各路大神门前来装X。

    1 引言

    GridView是常用可滚动组件之一,在Flutter中通常使用GridView构建二维网格列表,GridView创建方法有五种,描述如下

    GridView的构造函数方法,一次性构建所有的子条目,适用于少量数据

    GridView.builder方式来构建,懒加载模式,适用于大量数据的情况

    GridView.count方式来构建,适用于固定列的情况,适用于少量数

    GridView.extent方式来构建,适用于条目有最大宽度的限制的情况,适用于少量数据的情况下

    GridView.custom 方式来构建,可配置子条目的排列规则也可配置子条目的渲染加载模式

    2 滑动组件的公有属性

    GridView也是滑动组件系列中的一个,它也有滑动组件一些公用的属性,简单描述如下:

    ///滑动方向 Axis scrollDirection = Axis.vertical, ///是否滑动到底部 bool reverse = false, ///滑动控制器 ScrollController controller, ///是否使用默认的控制器 bool primary, ///滑动到边界时的回弹效果 ScrollPhysics physics, ///内边距 EdgeInsetsGeometry padding,

    3 通过GridView的构造函数来创建

    通过GridView的构造函数来构建,通过参数children来构建GridView中使用到的所有的子条目,通过参数gridDelegate配置SliverGridDelegate来配置子条目的排列规则。

    SliverGridDelegate声明为abstract抽象的,所以需要使用它的子类来构建。

    SliverGridDelegate有两个直接的子类SliverGridDelegateWithFixedCrossAxisCount和SliverGridDelegateWithMaxCrossAxisExtent。

    通过SliverGridDelegateWithFixedCrossAxisCount来构建一个横轴为固定数量的子条目的GridView,如下图所示。

    对应代码如下:

    ///GridView的基本使用class GridViewBaseUsePage extends StatefulWidget { @override State createState() { return ScrollHomePageState(); }}

    class ScrollHomePageState extends State { @override Widget build(BuildContext context) { return Scaffold( appBar: new AppBar( title: Text("GridView基本使用"), ), ///构建九宫格数据数据 body: buildGridView1(),// body: buildGridView2(), ); } ///GridView 的基本使用 ///通过构造函数来创建 Widget buildGridView1() { return GridView( ///子Item排列规则 gridDelegate: SliverGridDelegateWithFixedCrossAxisCount( //横轴元素个数 crossAxisCount: 3, //纵轴间距 mainAxisSpacing: 10.0, //横轴间距 crossAxisSpacing: 10.0, //子组件宽高长度比例 childAspectRatio: 1.4), ///GridView中使用的子Widegt children: buildListViewItemList(), ); } ///GridView 的基本使用 ///通过custom方式来创建 Widget buildGridView() { return GridView.custom( cacheExtent: 200, ///子Item排列规则 gridDelegate: SliverGridDelegateWithMaxCrossAxisExtent( ///子Item的最大宽度 maxCrossAxisExtent: 100, //纵轴间距 mainAxisSpacing: 10.0, //横轴间距 crossAxisSpacing: 10.0, //子组件宽高长度比例 childAspectRatio: 1.4, ), ///子条目的构建模式 childrenDelegate: ///懒加载的模式 SliverChildBuilderDelegate((BuildContext context, int index) { return buildListViewItemWidget(index); })); }

    List buildListViewItemList(){ List list = []; ///模拟的8条数据 for (int i = 0; i

    ///创建GridView使用的子布局 Widget buildListViewItemWidget(int index) { return new Container( ///内容剧中 alignment: Alignment.center,

    ///根据角标来动态计算生成不同的背景颜色 color: Colors.cyan[100 * (index % 9)], child: new Text('grid item $index'), ); }}

    属性配置说明如下图所示:

    通过SliverGridDelegateWithMaxCrossAxisExtent来构建横轴Item数量不固定的GridView,其水平方向Item个数由maxCrossAxisExtent和屏幕的宽度以及padding和mainAxisSpacing来共同决定。

    如下图所示,屏幕分辨率为750*1334的4.7英寸的手机,屏幕宽度逻辑橡素为375.0,屏幕比例devicePixelRatio为2.0。

    通过SliverGridDelegateWithMaxCrossAxisExtent配置的子条目设置maxCrossAxisExtent最大宽度为120,时,如下图所示,GridView每一行显示3列。

    当本配置maxCrossAxisExtent最大宽度为80,如下图所示,GridView第一行显示4列。

    当然当指定一个maxCrossAxisExten值后,在不同手机屏幕分辨率上,每一行展示的列数也有所不同。

    4 GridView.count与GridView.extent方式来创建

    GridView的count用来构建每行有固定列数的宫格布局,参数crossAxisCount为必选参数,用来配置列数,与使用GridView通过SliverGridDelegateWithFixedCrossAxisCount方式来构建效果一至,基本使用代码如下:

    ///GridView 的基本使用///通过count方式来创建Widget buildGridView3() { return GridView.count( ///每行的列数 crossAxisCount: 4, //纵轴间距 mainAxisSpacing: 10.0, //横轴间距 crossAxisSpacing: 10.0, ///所有的子条目 children: buildListViewItemList(), );}

    GridView的extent用来构建列数不固定,限制每列的最大宽度或者高度的的宫格布局,参数maxCrossAxisExtent为必选参数,用来配置每列允许的最大宽度或者是高度,与使用GridView通过SliverGridDelegateWithMaxCrossAxisExtent方式来构建效果一至,基本使用代码如下:

    ///GridView 的基本使用///通过count方式来创建Widget buildGridView4() { return GridView.extent( ///每列Item的最大宽度 maxCrossAxisExtent: 120, //纵轴间距 mainAxisSpacing: 10.0, //横轴间距 crossAxisSpacing: 10.0, ///所有的子条目 children: buildListViewItemList(), );}

    5 GridView.builder方式来创建

    在上面描述到的GridView构造函数、count方法与extent方式来构建,都是一次性将所有的子Item构建出来,所以只适用于少量的数据

    GridView的builder方式来构建,是通过懒加载模式来的,参数gridDelegate用来配置子Item的排列规则,与GridView的构造函数中gridDelegate使用一致,可分别使用SliverGridDelegateWithFixedCrossAxisCount构建固定列数的宫格和SliverGridDelegateWithMaxCrossAxisExtent构建不固定列数,固定条目最大宽度或者高度的宫格,基本使用代码如下:

    ///通过builder方式来创建Widget buildGridView5() { return GridView.builder( ///缓存区域 cacheExtent: 120, ///内边距 padding: EdgeInsets.all(8), ///条目个数 itemCount: 100, ///子Item排列规则 gridDelegate: SliverGridDelegateWithMaxCrossAxisExtent( ///子Item的最大宽度 maxCrossAxisExtent: 100, //纵轴间距 mainAxisSpacing: 10.0, //横轴间距 crossAxisSpacing: 10.0, //子组件宽高长度比例 childAspectRatio: 1.4, ), ///懒加载构建子条目 itemBuilder: (BuildContext context,int index){ return buildListViewItemWidget(index); }, );}

    https://shimo.im/docs/dYkqrQcyr98jPKYX/ 《android学习面试fulutter进阶资料免费获取》,可复制链接后用石墨文档 App 或小程序打开。

    相关文章

      网友评论

        本文标题:flutter GridView 九宫格

        本文链接:https://www.haomeiwen.com/subject/foxqhktx.html