前文我们聊了Flutter的ListView组件，其类似于OC中的UITableView；今天我们来聊聊GridView组件，其实现的效果类似于OC中的UICollectionView。
GridView的构造方法有很多，我们今天主要介绍以下两种：
GridView.count和GridView.builder。
GridView.count
GridView.count是静态网格布局，也就是说，事先需要将各个子Widget都创建好。代码如下：
代码语言：javascript复制class HomeContent extends StatelessWidget {
//创建各个子元素的自定义方法
List<Widget> _getChildren() {
var children = listData.map((value) {
return Container(
child: Column(
children: <Widget>[
Image.network(value["imgUrl"]),
SizedBox(height: 10),//设置Image和text的上下间距
Text(
value["title"],
style: TextStyle(
fontSize: 14,
),
)
],
),
decoration: BoxDecoration(
border: Border.all(
color: Colors.blue,
width: 2,
), //设置Container的边框
),
);
});
return children.toList();
}
@override
Widget build(BuildContext context) {
return GridView.count(
children: this._getChildren(),
crossAxisCount: 3, //交叉轴（默认情况下为横轴）上的子widget个数，即列数（默认情况下）
crossAxisSpacing: 10, //交叉轴（默认情况下为横轴）上的子widget之间的距离，即列与列之间的距离（默认）
mainAxisSpacing: 10, //主轴（默认情况下为纵轴）上的子widget之间的距离，即行与行之间的距离（默认）
padding: EdgeInsets.all(10), //设置GridView的内边距
// childAspectRatio: 0.5, //子Widget元素的宽/高比
);
}
}GridView.builder
代码语言：javascript复制class HomeContent extends StatelessWidget {
Widget _getItemBuilder(context, index) {
return Column(
children: <Widget>[
Image.network(listData[index]["imgUrl"]),
Text(listData[index]["title"])
],
);
}
@override
Widget build(BuildContext context) {
return GridView.builder(
itemCount: listData.length,
itemBuilder: this._getItemBuilder,
gridDelegate: SliverGridDelegateWithFixedCrossAxisCount(
crossAxisCount: 3,//交叉轴（默认情况下为横轴）上的子widget个数，即列数（默认情况下）
crossAxisSpacing: 10,//交叉轴（默认情况下为横轴）上的子widget之间的距离，即列与列之间的距离（默认）
mainAxisSpacing: 10,//主轴（默认情况下为纵轴）上的子widget之间的距离，即行与行之间的距离（默认）
childAspectRatio: 1.0),//子Widget元素的宽/高比
);
}
}以上。
