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,
    );
}