作者 | 弗拉德
起源 | 弗拉德（公众号：fulade_me)

GridView

GridView 是一个好用的网格布局控件，它的很多属性跟后面提到的ListView是一样的，反复的属性这里就不赘述了。咱们重点理解初始化办法GridView.count的应用，还有两个代理SliverGridDelegateWithFixedCrossAxisCount、SliverGridDelegateWithMaxCrossAxisExtent的参数以及应用。

GridView.count

咱们先来看GridView.count的构造函数

GridView.count({    /// key     Key key,    /// 布局方向    Axis scrollDirection = Axis.vertical,    /// 是否 倒序显示    bool reverse = false,    /// ScrollController用于管制滚动地位和监听滚动事件    ScrollController controller,    /// 是否应用默认的controller    bool primary,    /// 滚动成果  能够通过此参数 设置 GridView 不可滚动    ScrollPhysics physics,    /// 是否依据子控件的总长度来设置 GridView 的长度，默认值为false    bool shrinkWrap = false,    ///  padding    EdgeInsetsGeometry padding,    /// 穿插轴 子控件的个数    @required int crossAxisCount,    /// 主轴方向的间距    double mainAxisSpacing = 0.0,    /// 穿插轴方向子元素的间距    double crossAxisSpacing = 0.0,    /// 子控件的宽高比例    double childAspectRatio = 1.0,    // 在 敞开屏幕时 是否开释子控件    bool addAutomaticKeepAlives = true,    /// 是否 防止列表项重绘    bool addRepaintBoundaries = true,    /// 该属性示意是否把子控件包装在IndexedSemantics里，用来提供无障碍语义    bool addSemanticIndexes = true,    // 预加载子控件的个数    double cacheExtent,    /// 子控件的数组    List<Widget> children = const <Widget>[],    /// 子控件的数量    int semanticChildCount,    DragStartBehavior dragStartBehavior = DragStartBehavior.start,    ScrollViewKeyboardDismissBehavior keyboardDismissBehavior = ScrollViewKeyboardDismissBehavior.manual,})

这里要说的是有两个比拟重要的参数crossAxisSpacing和childAspectRatio，这个两个参数是用来定义子控件大小的。

如果咱们设置 crossAxisSpacing = 2,那么每一行就会显示2个控件，而且控件的高度由childAspectRatio来确定。
childAspectRatio示意子控件的宽高比，如果咱们设置为2 / 3，那么高就是宽的1.5倍，这样就能够计算子控件的大小了，并且依照 GridView设置好的方向来排列和布局子控件。

GridView.count(    crossAxisCount: 3,    childAspectRatio: 2 / 3,    children: List.generate(        50,        (index) {        return Card(            child: Container(            color: Colors.green,                child: Center(                    child: Text("$index"),                ),            ),        );        },    ),)

效果图如下：

SliverGridDelegateWithFixedCrossAxisCount

除了GridView.count()这种构造方法，咱们很多时候罕用一个构造方法是GridView.builder(gridDelegate: itemBuilder:)，它接管一个delegate对象，并且跟ListView一样接管一个itemBuilder办法。
SliverGridDelegateWithFixedCrossAxisCount的构造方法如下：

SliverGridDelegateWithFixedCrossAxisCount({  @required this.crossAxisCount,  this.mainAxisSpacing = 0.0,  this.crossAxisSpacing = 0.0,  this.childAspectRatio = 1.0,})

能够看得出来它是把GridView.count()的几个参数封装了一下，具体的用法和成果跟GridView.count()一样，这里就不赘述了。

SliverGridDelegateWithFixedCrossAxisCount在很多状况下都能满足咱们的布局需要，然而有一个有余，因为它设置的每一行数是一个定值。
当咱们把屏幕旋转，此时原来的高度会变为当初的宽度，成果就会如下：

所以咱们能够应用上面delegate来解决这个问题。

SliverGridDelegateWithMaxCrossAxisExtent

咱们能够在GridView.builder(gridDelegate: itemBuilder:)办法内传入另外一个参数SliverGridDelegateWithMaxCrossAxisExtent

构造方法如下：

const SliverGridDelegateWithMaxCrossAxisExtent({    @required this.maxCrossAxisExtent,    this.mainAxisSpacing = 0.0,    this.crossAxisSpacing = 0.0,    this.childAspectRatio = 1.0,})

这里有一个比拟重要的参数就是maxCrossAxisExtent，这个值示意的是子控件最大的宽度是多少。
举个例子：
手机的屏幕宽度为375，子控件之间的间距为0，maxCrossAxisExtent的值设置为100，那么咱们晓得子控件的宽度取值区间在0~100之间。

  • 假如咱们布局3个子控件，3 乘以最大值100等于300，很显著是不能满足布局在375的宽度上的。
  • 假如咱们布局4个子控件，4乘以100等于400，400 大于 375。咱们晓得宽度的取值区间在0~100，375 / 4 = 93.75既满足了宽度小于100，又满足了能够充斥375的宽度，那么子控件的个数为 4宽度为93.75

这就是maxCrossAxisExtent的用法。

其实GridView还能够做瀑布流成果，感兴趣的同学能够去查一下。

想体验以上的示例的运行成果，能够到我的Github仓库我的项目flutter_app->lib->routes->gridview_page.dart查看，并且能够下载下来运行并体验。