GridView 你怎么那么皮——从需求出发，如何让 GridView 的尺寸不再难以控制

本文链接：https://blog.csdn.net/u010929231/article/details/109149469

本文探讨了在Android和Flutter中GridView的使用，特别是Flutter中的GridView如何处理尺寸控制问题。通过分析GridView的源码，揭示了childrenDelegate和gridDelegate在布局中的作用，以及如何自定义布局实现固定宽高且剩余空间均匀分布的效果。

摘要由CSDN通过智能技术生成

ListView 和 GridView 是我们在开发过程中经常使用的控件。前者用来绘制一个具有动态 item 的固定方向的列表，后者用来显示一个宫格的瀑布流。它们的 item 是一个个独立的布局，我们可以对其自定义。

在 Android 中，我们既可以根据其父控件的尺寸约束对 item 进行尺寸规范，也可以根据各个 item 间的相互关系动态规划 item 尺寸。

flutter 中也有 ListView 和 GridView ，而今天，我想重点说说这个 GridView 。

邂逅

我初接触 flutter 的 GridView 是在做一个平板项目的时候，用它来展示一个账单列表，每个账单因为场景需要，需指定其宽高。因为在 GridView 中没有找到设置宽高的属性，我尝试固定其item 的宽高，但显示出来完全不是预料中的效果。在查阅资料后，发现了childAspectRatio 属性，设置之后也总是和我的预期不符——要么宽度过了，要么高度不够。后来接连的几个使用到 GridView 的场景也完全不能得心应手，就像抓一条泥鳅，别提多难受了。

打开 GridView 的源码，我们看看它到底是怎么处理这个逻辑的。

窥见

GridView 继承于BoxScrollView，有5个构造方法，其中4个是代理构造方法，它们分别如下：

GridView({
    Key key,
    Axis scrollDirection = Axis.vertical,
    bool reverse = false,
    ScrollController controller,
    bool primary,
    ScrollPhysics physics,
    bool shrinkWrap = false,
    EdgeInsetsGeometry padding,
    @required this.gridDelegate,
    bool addAutomaticKeepAlives = true,
    bool addRepaintBoundaries = true,
    bool addSemanticIndexes = true,
    double cacheExtent,
    List<Widget> children = const <Widget>[],
    int semanticChildCount,
  }) : assert(gridDelegate != null),
       childrenDelegate = SliverChildListDelegate(
         children,
         addAutomaticKeepAlives: addAutomaticKeepAlives,
         addRepaintBoundaries: addRepaintBoundaries,
         addSemanticIndexes: addSemanticIndexes,
       ),
       super(
         key: key,
         scrollDirection: scrollDirection,
         reverse: reverse,
         controller: controller,
         primary: primary,
         physics: physics,
         shrinkWrap: shrinkWrap,
         padding: padding,
         cacheExtent: cacheExtent,
         semanticChildCount: semanticChildCount ?? children.length,
       );

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,
  }) : assert(gridDelegate != null),
       childrenDelegate = SliverChildBuilderDelegate(
         itemBuilder,
         childCount: itemCount,
         addAutomaticKeepAlives: addAutomaticKeepAlives,
         addRepaintBoundaries: addRepaintBoundaries,
         addSemanticIndexes: addSemanticIndexes,
       ),
       super(
         key: key,
         scrollDirection: scrollDirection,
         reverse: reverse,
         controller: controller,
         primary: primary,
         physics: physics,
         shrinkWrap: shrinkWrap,
         padding: padding,
         cacheExtent: cacheExtent,
         semanticChildCount: semanticChildCount ?? itemCount,
       );

const GridView.custom({
    Key key,
    Axis scrollDirection = Axis.vertical,
    bool reverse = false,
    ScrollController controller,
    bool primary,
    ScrollPhysics physics,
    bool shrinkWrap = false,
    EdgeInsetsGeometry padding,
    @required this.gridDelegate,
    @required this.childrenDelegate,
    double cacheExtent,
    int semanticChildCount,
    DragStartBehavior dragStartBehavior = DragStartBehavior.start,
  }) : assert(gridDelegate != null),
       assert(childrenDelegate != null),
       super(
         key: key,
         scrollDirection: scrollDirection,
         reverse: reverse,
         controller: controller,
         primary: primary,
         physics: physics,
         shrinkWrap: shrinkWrap,
         padding: padding,
         cacheExtent: cacheExtent,
         semanticChildCount: semanticChildCount,
         dragStartBehavior: dragStartBehavior,
       );

GridView.count({
    Key key,
    Axis scrollDirection = Axis.vertical,
    bool reverse = false,
    ScrollController controller,
    bool primary,
    ScrollPhysics physics,
    bool shrinkWrap = false,
    EdgeInsetsGeometry padding,
    @required int crossAxisCount,
    double mainAxisSpacing = 0.0,
    double crossAxisSpacing = 0.0,
    double childAspectRatio = 1.0,
    bool addAutomaticKeepAlives = true,
    bool addRepaintBound