Flutter——最详细(GridView)使用教程

本文主要是介绍Flutter——最详细(GridView)使用教程，希望对大家解决编程问题提供一定的参考价值，需要的开发者们随着小编来一起学习吧！

GridView简介：

- 项目地址

可以创建网格列表视图；主要通过Count、extent、custom、builder构造列表。有内边距、是否反向、滑动控制器等属性。
四个属性使用场景，Count、extent、custom适用于子布局较少时使用。可能会用到上拉刷新，数据较多时，则使用builder属性。

使用场景：

列如：支付宝首页的网格布局，等一系列网格样式的UI都可以使用该组件

属性	作用
scrollDirection	滚动方向
crossAxisCount	主轴一行的数量
mainAxisSpacing	主轴每行间距
crossAxisSpacing	交叉轴每行间距
childAspectRatio	item的宽高比1 / 2

class CustomGridView extends StatelessWidget {final data = List.generate(128, (i) => Color(0xFFFF00FF - 2 * i));@overrideWidget build(BuildContext context) {return Container(child: GridView.count(crossAxisCount: 3,mainAxisSpacing: 12,crossAxisSpacing: 20,childAspectRatio: 1 / 0.5,children: data.map((color) => _buildItem(color)).toList(),),);}Container _buildItem(Color color) => Container(alignment: Alignment.center,width: 100,height: 30,color: color,child: Text(colorString(color),style: TextStyle(color: Colors.white, shadows: [Shadow(color: Colors.black, offset: Offset(.5, .5), blurRadius: 2)]),),);String colorString(Color color) =>"#${color.value.toRadixString(16).padLeft(8, '0').toUpperCase()}";
}

在这里插入图片描述

可以看到，每行展示3个item，主轴间距20，横轴间距12。item的宽度是高度的2倍

属性scrollDirection：Axis.horizontal

- 项目地址

在这里插入图片描述

布局横轴滑动

属性：GridView.builder

- 项目地址

 GridView.builder(itemCount: data.length,gridDelegate: const SliverGridDelegateWithFixedCrossAxisCount(crossAxisCount: 3,mainAxisSpacing: 12,crossAxisSpacing: 20,childAspectRatio: 1 / 0.7,),itemBuilder: (_, position) => _buildItem(data[position]),)