今天，我們來(lái)聊聊網(wǎng)格布局GridView。

GridView

構(gòu)造數(shù)據(jù)（生成Widgets）

List<String> getDataList() {
    List<String> list = [];
    for (int i = 0; i < 100; i++) {
      list.add(i.toString());
    }
    return list;
  }

  List<Widget> getWidgetList() {
    return getDataList().map((item) => getItemContainer(item)).toList();
  }

  Widget getItemContainer(String item) {
    return Container(
      alignment: Alignment.center,
      child: Text(
        item,
        style: TextStyle(color: Colors.white, fontSize: 20),
      ),
      color: Colors.blue,
    );
  }

GridView有好幾種寫法，萬(wàn)變不離其宗。我們一個(gè)個(gè)來(lái)看看。

寫法一：GridView.count

GridView.count(
      //水平子Widget之間間距
      crossAxisSpacing: 10.0,
      //垂直子Widget之間間距
      mainAxisSpacing: 30.0,
      //GridView內(nèi)邊距
      padding: EdgeInsets.all(10.0),
      //一行的Widget數(shù)量
      crossAxisCount: 2,
      //子Widget寬高比例
      childAspectRatio: 2.0,
      //子Widget列表
      children: getWidgetList(),
    );

效果：

GridView.count.gif

對(duì)于這種寫法，此時(shí)單個(gè)Widget的寬高已經(jīng)不起作用了。
在我上面構(gòu)造數(shù)據(jù)的那一步中，我并沒(méi)有指定Container的的寬高，這里我們就將其寬高設(shè)置為5，看下效果。

Widget getItemContainer(String item) {
    return Container(
      width: 5.0,
      height: 5.0,
      alignment: Alignment.center,
      child: Text(
        item,
        style: TextStyle(color: Colors.white, fontSize: 20),
      ),
      color: Colors.blue,
    );
  }

指定Container 寬高

可以看出沒(méi)有效果。因?yàn)?，我們?cè)谶@里已經(jīng)指定了每一行分成幾列以及寬高比，還有邊距等等。所以，我們后面再指定單個(gè)item的寬高，已經(jīng)無(wú)效。

其實(shí)GridView跟我之前講過(guò)的ListView，基本類似，都是BoxScrollView的子類。

GridView與ListView比較

GridView與ListView比較

寫法二：GridView.builder

 @override
  Widget build(BuildContext context) {
    List<String> datas = getDataList();
    return GridView.builder(
        itemCount: datas.length,
        //SliverGridDelegateWithFixedCrossAxisCount 構(gòu)建一個(gè)橫軸固定數(shù)量Widget
        gridDelegate: SliverGridDelegateWithFixedCrossAxisCount(
          //橫軸元素個(gè)數(shù)
            crossAxisCount: 3,
            //縱軸間距
            mainAxisSpacing: 20.0,
            //橫軸間距
            crossAxisSpacing: 10.0,
            //子組件寬高長(zhǎng)度比例
            childAspectRatio: 1.0),
        itemBuilder: (BuildContext context, int index) {
          //Widget Function(BuildContext context, int index)
          return getItemContainer(datas[index]);
        });
  }

abstract class SliverGridDelegate gridDelegate用來(lái)指定GridView的構(gòu)建方式，具體實(shí)現(xiàn)有兩個(gè)。

SliverGridDelegate

寫法三：GridView.builder（SliverGridDelegateWithMaxCrossAxisExtent）

GridView.builder(
      itemCount: datas.length,
      itemBuilder: (BuildContext context, int index) {
        return getItemContainer(datas[index]);
      },
      gridDelegate: SliverGridDelegateWithMaxCrossAxisExtent(
        //單個(gè)子Widget的水平最大寬度
        maxCrossAxisExtent: 200,
        //水平單個(gè)子Widget之間間距
        mainAxisSpacing: 20.0,
        //垂直單個(gè)子Widget之間間距
        crossAxisSpacing: 10.0
      ),
    );

對(duì)于SliverGridDelegateWithMaxCrossAxisExtent而言，水平方向元素個(gè)數(shù)不再固定，其水平個(gè)數(shù)也就是有幾列，由maxCrossAxisExtent和屏幕的寬度以及padding和mainAxisSpacing等決定。

例如：我這里的虛擬機(jī)寬度為400，當(dāng)maxCrossAxisExtent:50時(shí)，有8列；當(dāng)maxCrossAxisExtent:100時(shí)，有4列。如下：

maxCrossAxisExtent	效果
內(nèi)容	內(nèi)容
maxCrossAxisExtent:50	image.png
maxCrossAxisExtent:100	image.png

寫法四：

@override
  Widget build(BuildContext context) {
    List<String> datas = getDataList();
    return GridView.custom(
        gridDelegate: SliverGridDelegateWithFixedCrossAxisCount(
            crossAxisCount: 3, mainAxisSpacing: 10.0, crossAxisSpacing: 20.0, ),
        childrenDelegate: SliverChildBuilderDelegate((context, position) {
          return getItemContainer(datas[position]);
        }, childCount: datas.length));
  }

GridView.custom.gif

這幾個(gè)參數(shù)，上面都講過(guò)了，不再贅述了。

本文代碼地址

Flutter 豆瓣客戶端，誠(chéng)心開(kāi)源
Flutter Container
Flutter SafeArea
Flutter Row Column MainAxisAlignment Expanded
Flutter Image全解析
Flutter 常用按鈕總結(jié)
Flutter ListView豆瓣電影排行榜
Flutter Card
Flutter Navigator&Router(導(dǎo)航與路由)
OverscrollNotification不起效果引起的Flutter感悟分享
Flutter 上拉抽屜實(shí)現(xiàn)
Flutter 豆瓣客戶端，誠(chéng)心開(kāi)源
Flutter 更改狀態(tài)欄顏色