1. GridView的介紹

學(xué)習(xí)過ListView的使用,我們接下來學(xué)習(xí)GridView(網(wǎng)格布局)的使用,GridView有5種構(gòu)造函數(shù):GridView，GridView.builder，GridView.count，GridView.extent和GridView.custom。
來看下GridView構(gòu)造函數(shù)（已省略不常用屬性）：

GridView({
  Key key,
  Axis scrollDirection = Axis.vertical,
  bool reverse = false,
  ScrollController controller,
  ScrollPhysics physics,
  bool shrinkWrap = false,
  EdgeInsetsGeometry padding,
  @required this.gridDelegate,
  double cacheExtent,
  List<Widget> children = const <Widget>[],
})

這里很多的屬性都是和ListView相似的,除了一個在GridView.builder必要的參數(shù)gridDelegate,就讓我們來重點關(guān)注下gridDelegate這個參數(shù)，它其實是GridView組件如何控制排列子元素的一個委托。跟蹤源碼我們可以在scroll_view.dart中看到，gridDelegate的類型是SliverGridDelegate，進一步跟蹤進sliver_grid.dart可以看到SliverGridDelegate其實是一個抽象類，而且一共有兩個實現(xiàn)類：
SliverGridDelegateWithFixedCrossAxisCount：用于固定列數(shù)的場景；
SliverGridDelegateWithMaxCrossAxisExtent：用于子元素有最大寬度限制的場景；

2. GridView的使用

想要使用GridView我們就要首先構(gòu)造數(shù)據(jù):

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

2.1 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(),
    );

對于這種寫法，此時單個Widget的寬高已經(jīng)不起作用了。
在我上面構(gòu)造數(shù)據(jù)的那一步中，我并沒有指定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,
    );
  }

可以看出沒有效果。因為，我們在這里已經(jīng)指定了每一行分成幾列以及寬高比，還有邊距等等。所以，我們后面再指定單個item的寬高，已經(jīng)無效。

2.2 GridView.builder(SliverGridDelegateWithFixedCrossAxisCount)

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

2.3 GridView.builder(SliverGridDelegateWithMaxCrossAxisExtent)

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

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

2.4 GridView.custom

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

                            想了解更多Flutter學(xué)習(xí)知識請聯(lián)系:QQ(814299221)