先來看一下GridView 的構(gòu)造參數(shù)

  GridView.builder({
    Key key,
    Axis scrollDirection = Axis.vertical,
    bool reverse = false,
    ScrollController controller,
    bool primary,
    ScrollPhysics physics,
    bool shrinkWrap = false,
    EdgeInsetsGeometry padding,
    @required this.gridDelegate,
    @required IndexedWidgetBuilder itemBuilder,
    int itemCount,
    bool addAutomaticKeepAlives = true,
    bool addRepaintBoundaries = true,
    bool addSemanticIndexes = true,
    double cacheExtent,
    int semanticChildCount,
  }) 

這里面大多數(shù)的參數(shù)在前面都有講過,這里說一下gridDelegate這個重要參數(shù)

gridDelegate

SliverGridDelegateWithFixedCrossAxisCount 橫軸為固定數(shù)量子元素

1. crossAxisCount 交叉軸個數(shù)為3個
2. childAspectRatio 交叉軸與主軸比,由于交叉軸個數(shù)設(shè)定后,主軸的高度就能計算了
3. crossAxisSpacing 交叉軸之間的距離
4. mainAxisSpacing 主軸元素之間的距離

SliverGridDelegateWithMaxCrossAxisExtent 軸子元素為固定最大長度

1. maxCrossAxisExtent 交叉軸最大長度
   舉個例子, 如果viewport 即 窗口寬度為100
   如果設(shè)置他的 33< maxCrossAxisExtent <50 則橫有2個 條目
   如果小于 25<maxCrossAxisExtent <33 則有3個 條目

先來個例子

class TsmGridViewPage extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    var imageUrl =
        "https://timgsa.baidu.com/timg?image&quality=80&size=b9999_10000&sec=1597401825695&di=61550fe4527da207c8d3f549216c530c&imgtype=0&src=http%3A%2F%2Fa0.att.hudong.com%2F56%2F12%2F01300000164151121576126282411.jpg";

    var imageUrl2 =
        "https://timgsa.baidu.com/timg?image&quality=80&size=b9999_10000&sec=1597401825695&di=35a7be9c265d3a00edc13ed2e0119b5d&imgtype=0&src=http%3A%2F%2Fa1.att.hudong.com%2F05%2F00%2F01300000194285122188000535877.jpg";

    return Scaffold(
      appBar: AppBar(
        title: Text('GridView 學(xué)習(xí)'),
        centerTitle: true,
      ),
      body: Scrollbar(
        ///  GridView
        ///  快速構(gòu)造方法有3個,
        ///  1. GridView.count();
        ///  方法使用的是 SliverGridDelegateWithFixedCrossAxisCount 橫軸為固定數(shù)量子元素
        ///  子條目為多個  children : =>  <Widget>[]  ,
        ///  不是動態(tài)加載,一次性全部充起
        ///  2. GridView.extent()
        ///  方法使用的是SliverGridDelegateWithMaxCrossAxisExtent  軸子元素為固定最大長度
        ///  子條目為多個  children : =>  <Widget>[] ,
        ///  不是動態(tài)加載,一次性全部充起
        ///
        ///  3. GridView.build()
        ///  兩個必要參數(shù)   gridDelegate  itemBuilder
        ///  如果不指定itemCount  則無限多
        ///  基于Sliver 動態(tài)加載布局,
        ///
        child: GridView.builder(
          /// SliverGridDelegateWithFixedCrossAxisCount 橫軸為固定數(shù)量子元素
          ///   1. crossAxisCount 交叉軸個數(shù)為3個
          ///   2. childAspectRatio 交叉軸與主軸比,由于交叉軸個數(shù)設(shè)定后,主軸的高度就能計算了
          ///   3. crossAxisSpacing  交叉軸之間的距離
          ///   4. mainAxisSpacing  主軸元素之間的距離
          ///
          ///
          /// SliverGridDelegateWithMaxCrossAxisExtent  軸子元素為固定最大長度
          ///   1. maxCrossAxisExtent 交叉軸最大長度
          ///
          ///    舉個例子,  如果viewport 即 窗口寬度為100
          ///
          ///     如果設(shè)置他的   33< maxCrossAxisExtent <50  則橫有2個 條目
          ///     如果小于 25<maxCrossAxisExtent <33  則有3個 條目
          ///
          ///
          ///
          ///
//            gridDelegate: SliverGridDelegateWithFixedCrossAxisCount(
//                crossAxisCount: 3, childAspectRatio: 1.413),
          gridDelegate: SliverGridDelegateWithMaxCrossAxisExtent(
            maxCrossAxisExtent: 200,
            crossAxisSpacing: 2,
            mainAxisSpacing: 2,
            childAspectRatio: 1.41,
          ),

          itemCount: 51,
          itemBuilder: (context, index) => Image(
            image: NetworkImage(index % 2 == 0 ? imageUrl : imageUrl2),
            fit: BoxFit.contain,
          ),
        ),
      ),
    );

GIF 2020-8-20 14-54-25.gif

GridView 快速構(gòu)造方法有3個,

1. GridView.count();

方法使用的是 SliverGridDelegateWithFixedCrossAxisCount 橫軸為固定數(shù)量子元素
子條目為多個 children : => <Widget>[] ,
不是動態(tài)加載,一次性全部充起

2. GridView.extent()

方法使用的是SliverGridDelegateWithMaxCrossAxisExtent 軸子元素為固定最大長度
子條目為多個 children : => <Widget>[] ,
不是動態(tài)加載,一次性全部充起

3. GridView.build()

兩個必要參數(shù) gridDelegate itemBuilder
如果不指定itemCount 則無限多
基于Sliver 動態(tài)加載布局,

相信大家經(jīng)常會遇到這種情況的時候

微信圖片_20200820164154.png

大家可以去學(xué)習(xí)一下
https://pub.flutter-io.cn/packages/flutter_staggered_grid_view

我學(xué)習(xí)flutter的整個過程都記錄在里面了
http://www.itdecent.cn/c/36554cb4c804

最后附上demo 地址

https://github.com/tsm19911014/tsm_flutter