Flutter中使用griderview实现网格布局

在iOS中我们经常用到UICollectionView来实现网格布局,其实在Flutter中也有对应的组件,而且用起来要比UICollectionView容易,那就是GridView

如下代码,实现网格布局的基本格式:

class _OtherPageState extends State {

@override

Widget build(BuildContext context) {

return Container(

child: GridView.builder(

scrollDirection:Axis.vertical,//滑动方向

itemCount: 10,//item数量

gridDelegate: SliverGridDelegateWithFixedCrossAxisCount(//样式代理,

crossAxisCount: 3,//一行显示几个item

crossAxisSpacing: 10,//水平方向item间距

mainAxisSpacing:10,//垂直方向item间距

childAspectRatio:1/2;//item显示宽高比

),

itemBuilder: (var context, int index) {

return Container(

decoration: BoxDecoration(

color: Colors.red,

),

);

}));

}

}