Flutter折腾学习成长记(22)-优快云博客

这篇博客介绍了Flutter中两种常用的GridView布局方式，用于商品布局。首先讲解了GridView.count，通过指定一行的Widget数量实现网格布局，并展示了基本用法。接着详细阐述了GridView.builder，利用itemBuilder动态生成Widget，配合SliverGridDelegateWithFixedCrossAxisCount进行更灵活的布局控制。博客还涵盖了GridView的重要属性，如scrollDirection、padding、childAspectRatio等，并提供了示例代码进行演示。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

今日目标

今天来学习前两天剩下的最后一种布局，网格布局，主要用于商品布局中。今天主要学习两种常用的，GridView.count实现网格布局，GridView.builder实现网格布局。

GridView常用属性

名称	类型	说明
scrollDirection	Axis	滚动方法
padding	EdgeInsets	内边距
resolve	bol	组件反向排序
crossAxisSpacing	double	水平子Widget之间间距
mainAxisSpacing	double	垂直子Widget之间间距
crossAxisCount	int	一行Widget数量
childAspectRation	double	子Widget宽高比例
children	*	[]
gridDelegate	SliverGridelgateWithFixedCrossAxisCountSliverGridDelegateWithMaxCrossAxisExtent	控制布局主要用在GridView.builder里面

GridView.count

class HomeContent extends StatelessWidget {@overrideWidget build(BuildContext context) {return GridView.count(children: <Widget>[Text('this is line 1'),Text('this is line 1'),Text('this is line 1'),Text('this is line 1'),Text('this is line 1'),],crossAxisCount: 3,);}
}

class HomeContent extends StatelessWidget {List<Widget> _getListData() {List<Widget> list = [];for (var i = 0; i < 20; i++) {list.add(Container(alignment: Alignment.center,child: Text('这是第$i条数据',style: TextStyle(color: Colors.red[500], fontSize: 12 + i*1.0),),color: Colors.blue[i * 100],// height: 20.0, // 这里设置高度是没有效果的));}return list;}@overrideWidget build(BuildContext context) {return GridView.count(children: this._getListData(),crossAxisCount: 3, // 控制一行有多少个WidgetcrossAxisSpacing: 20.0,mainAxisSpacing: 10.0,padding: EdgeInsets.all(10.0),childAspectRatio: 0.7,);}
}

GridView.builder

class HomeContent extends StatelessWidget {Widget _getListData(context, i) {return Container(alignment: Alignment.center,child: Text('这是第$i条数据',style: TextStyle(color: Colors.red[500], fontSize: (12 + i * 1.0).toDouble()),),color: Colors.blue[i * 100],// height: 20.0, // 这里设置高度是没有效果的);}@overrideWidget build(BuildContext context) {// TODO: implement buildreturn GridView.builder(itemCount: 20,itemBuilder: _getListData,padding: EdgeInsets.all(10.0),gridDelegate: SliverGridDelegateWithFixedCrossAxisCount(crossAxisCount: 3, mainAxisSpacing: 10.0, crossAxisSpacing: 10.0),);}
}