GrildView的使用情况
GridView是宫格式布局,通常用于商城商品列表的展示。
GridView的子组件
1.crossAxisCount
该组件用于设置每一行中的格子个数。
2.crossAxisSpacing
该组件用于设置GridView水平线上每个格子之间的距离
3.mainAxisSpacing
该组件用于设置GridView每一行格子之间的距离
4.childAspectRatio
格子的宽高比例(需要注意的是,在GridView中直接设置children的高度是不生效的)
示例代码:
class GridViewDemo extends StatelessWidget{
var random = new Random();
List<Widget> _getListData(){
List<Widget> list = new List();
for(int i = 0; i<20;i++){
list.add(
Container(
color: Color.fromRGBO( random.nextInt(255), random.nextInt(255), random.nextInt(255),1),
child: Text(
"这是第$i件商品",
style: TextStyle(
color: Colors.white,
fontSize: 16
),
),
)
);
}
return list;
}
@override
Widget build(BuildContext context) {
// TODO: implement build
return GridView.count(
crossAxisCount: 2,
children: this._getListData(),
crossAxisSpacing: 6,
mainAxisSpacing: 6,
childAspectRatio: 0.8,
padding: EdgeInsets.all(4),
);
}
}
效果图: