本文主要是介绍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]),)
这个效果，宽度与高度的比例是1/0.7。
项目地址
https://github.com/z244370114/flutter_demo
这篇关于Flutter——最详细(GridView)使用教程的文章就介绍到这儿，希望我们推荐的文章对编程师们有所帮助！
