Flutter GridView
scrollDirection 为 Axis.vertical 时:
mainAxisSpacing 为 垂直方向,Item之间的间隔;
crossAxisSpacing 为 水平方向,Item之间的间隔。
而 scrollDirection 为 Axis.horizontal 时,则相反。
GridView.count
GridView.count(
scrollDirection: Axis.vertical,
primary: false,
padding: EdgeInsets.all(10),
crossAxisSpacing: 10,
mainAxisSpacing: 10,
crossAxisCount: 2,//水平方向,Item的个数
children: <Widget>[
Container(
color: Colors.red,
),
Container(
color: Colors.green,
),
Container(
color: Colors.blue,
),
],
)
GridView.builder
GridView.builder(
scrollDirection: Axis.vertical,
primary: false,
padding: EdgeInsets.all(10),
gridDelegate: SliverGridDelegateWithMaxCrossAxisExtent(
crossAxisSpacing: 10,
mainAxisSpacing: 10,
maxCrossAxisExtent: 250//次轴的宽度
),
itemBuilder: (BuildContext context, int index) {
return Container(
color: Colors.cyan,
);
},
itemCount: 5,
)
GridView.extent
GridView.extent(
scrollDirection: Axis.vertical,
maxCrossAxisExtent: 150,//次轴的宽度
padding: EdgeInsets.all(10),
mainAxisSpacing: 10,
crossAxisSpacing: 10,
children: <Widget>[
Container(
color: Colors.red,
),
Container(
color: Colors.green,
),
Container(
color: Colors.blue,
),
],
)
GridView.custom
GridView.custom(
padding: EdgeInsets.all(10),
gridDelegate: SliverGridDelegateWithFixedCrossAxisCount(
crossAxisCount: 2,
mainAxisSpacing: 10,
crossAxisSpacing: 10,
),
childrenDelegate: SliverChildBuilderDelegate(
(context, index) {
return Container(
color: MZC.randomColor(),
);
},
childCount: 30,
),
)
CustomScrollView + SliverGrid.count
CustomScrollView(
scrollDirection: Axis.vertical,
primary: false,
slivers: <Widget>[
SliverPadding(
padding: EdgeInsets.all(10),
sliver: SliverGrid.count(
crossAxisSpacing: 10,
crossAxisCount: 2,
mainAxisSpacing: 10,
children: buildGridList(30),
),
),
],
)
List<Widget> buildGridList(int number) {
List<Widget> list = List();
for (int i = 0; i < number; i++) {
list.add(getItemWidget());
}
return list;
}
Widget getItemWidget() {
return Container(
color: MZC.randomColor(),
// color: Colors.green,
);
}