Flutter GridView 控件

一个可滚动的2D排列的小部件。

控件网格的主轴方向是它滚动的方向（ scrollDirection）。

最常用的网格布局是 GridView.count，它创建了一个在横轴上具有固定数量 网格块 的平铺的布局，和 GridView.extent ，它使用具有最大横轴范围的 网格块 创建布局。自定义 SliverGridDelegate 可以生成任意2D排列的子代，包括未对齐或重叠的排列。

要创建具有大量（或无限）个子节点的网格，请将 GridView.builder 构造函数与gridDelegate 的 SliverGridDelegateWithFixedCrossAxisCount 或 SliverGridDelegateWithMaxCrossAxisExtent 一起使用。

要使用自定义SliverChildDelegate ，请使用 GridView.custom。

要创建线性数组的子代，请使用 ListView。

若要控制滚动视图的初始滚动偏移，请为控制器 controller 提供其ScrollController.initialScrollOffset 属性集。

转换到CustomScrollView

GridView基本上是一个 CustomScrollView ，其 CustomScrollView.slivers 中包含一个SliverGrid。

如果GridView不再足够，例如因为滚动视图既有网格又有列表，或者因为网格要与 SliverAppBar 等组合在一起，直接将代码从使用 GridView 移植到 CustomScrollView 直接使用。

CustomScrollView.slivers 属性只能使用包含 SliverGrid 的列表。

GridView上 的 childrenDelegate 属性对应于 SliverGrid.delegate 属性，GridView上 的 gridDelegate 属性对应于 SliverGrid.gridDelegate 属性。

GridView，GridView.count和GridView.extent构造函数的子参数对应于 GridView 中 childrenDelegate 是具有相同参数的 SliverChildListDelegate。

GridView.builder 构造函数的 itemBuilder 和 childCount 参数对应于 GridView 中的 childrenDelegate，它们是具有匹配参数的 SliverChildBuilderDelegate

GridView.count 和 GridView.extent 构造函数创建自定义网格委托，并在 SliverGrid上 具有等效命名的构造函数以简化转换：分别为 SliverGrid.count 和 SliverGrid.extent。

padding 属性对应于在 CustomScrollView.slivers 属性中使用 SliverPadding 而不是网格本身，并且让 SliverGrid 成为 SliverPadding 的子级。

默认情况下，ListView将自动填充列表的可滚动范围，以避免MediaQuery的padding 造成的部分障碍。要避免此行为，请使用padding属性为0进行覆盖。

将代码移植到使用CustomScrollView后，可以将其他slivers（例如 SliverList 或 SliverAppBar）放入CustomScrollView.slivers 中。

以下是使用 CustomScrollView 显示 GridView 等效的代码片段：

GridView.count(
  primary: false,
  padding: const EdgeInsets.all(20.0),
  crossAxisSpacing: 10.0,
  crossAxisCount: 2,
  children: [
    const Text('He\'d have you all unravel at the'),
    const Text('Heed not the rabble'),
    const Text('Sound of screams but the'),
    const Text('Who scream'),
    const Text('Revolution is coming...'),
    const Text('Revolution, they...'),
  ],
)

CustomScrollView(
  primary: false,
  slivers: [
    SliverPadding(
      padding: const EdgeInsets.all(20.0),
      sliver: SliverGrid.count(
        crossAxisSpacing: 10.0,
        crossAxisCount: 2,
        children: [
          const Text('He\'d have you all unravel at the'),
          const Text('Heed not the rabble'),
          const Text('Sound of screams but the'),
          const Text('Who scream'),
          const Text('Revolution is coming...'),
          const Text('Revolution, they...'),
        ],
      ),
    ),
  ],
)

也可以看看：

• SingleChildScrollView，它是一个具有单个子项的可滚动窗口小部件。
• ListView，它是可滚动的，线性的小部件列表。
• PageView，这是一个滚动列表，页面视图的每个子项大小都被强制与视口大小相同。
• CustomScrollView，这是一个可滚动的小部件，使Slivers用创建自定义滚动效果。
• SliverGridDelegateWithFixedCrossAxisCount，它创建一个在横轴上具有固定数量的 网格块 的布局。
• SliverGridDelegateWithMaxCrossAxisExtent，用于创建具有最大横轴范围的 网格块 的布局。
• ScrollNotification 和 NotificationListener，可用于在不使用 ScrollController 的情况下查看滚动位置。

构造函数

使用自定义SliverGridDelegate创建可滚动的2D小部件数组
GridView({Key key, Axis scrollDirection: Axis.vertical, bool reverse: false, ScrollController controller, bool primary, ScrollPhysics physics, bool shrinkWrap: false, EdgeInsetsGeometry padding, @required SliverGridDelegate gridDelegate, bool addAutomaticKeepAlives: true, bool addRepaintBoundaries: true, bool addSemanticIndexes: true, double cacheExtent, List children: const [], int semanticChildCount })

创建 按需创建的可滚动的2D小部件数组
GridView.builder({Key key, Axis scrollDirection: Axis.vertical, bool reverse: false, ScrollController controller, bool primary, ScrollPhysics physics, bool shrinkWrap: false, EdgeInsetsGeometry padding, @required SliverGridDelegate gridDelegate, @required IndexedWidgetBuilder itemBuilder, int itemCount, bool addAutomaticKeepAlives: true, bool addRepaintBoundaries: true, bool addSemanticIndexes: true, double cacheExtent, int semanticChildCount })

创建一个可滚动的2D小部件数组，在横轴上具有固定数量的网格块
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 addRepaintBoundaries: true, bool addSemanticIndexes: true, double cacheExtent, List children: const [], int semanticChildCount })

使用自定义SliverGridDelegate和自定义SliverChildDelegate创建可滚动的2D小部件数组
GridView.custom({Key key, Axis scrollDirection: Axis.vertical, bool reverse: false, ScrollController controller, bool primary, ScrollPhysics physics, bool shrinkWrap: false, EdgeInsetsGeometry padding, @required SliverGridDelegate gridDelegate, @required SliverChildDelegate childrenDelegate, double cacheExtent, int semanticChildCount })

使用每个都具有最大横轴范围的 网格块 创建可滚动的2D小部件数组。
GridView.extent({Key key, Axis scrollDirection: Axis.vertical, bool reverse: false, ScrollController controller, bool primary, ScrollPhysics physics, bool shrinkWrap: false, EdgeInsetsGeometry padding, @required double maxCrossAxisExtent, double mainAxisSpacing: 0.0, double crossAxisSpacing: 0.0, double childAspectRatio: 1.0, bool addAutomaticKeepAlives: true, bool addRepaintBoundaries: true, bool addSemanticIndexes: true, List children: const [], int semanticChildCount })

属性

名称 类型	描述
childrenDelegate → SliverChildDelegate	为GridView提供子代的委托
gridDelegate → SliverGridDelegate	一个控制 GridView 中子项布局的委托。
cacheExtent → double	视口在可见区域之前和之后有一个区域，用于缓存在用户滚动时即将变为可见的项目
controller → ScrollController	一个对象，可用于控制滚动滚动视图的位置
hashCode → int	此对象的哈希码
key → Key	控制一个小部件如何替换树中的另一个小部件
padding → EdgeInsetsGeometry	插入子代的内边距
physics → ScrollPhysics	滚动视图应如何响应用户输入，物理滚动方式
primary → bool	这是否是与父 PrimaryScrollController 关联的主滚动视图。
reverse → bool	滚动视图是否在读取方向上滚动
runtimeType → Type	表示对象的运行时类型
scrollDirection → Axis	滚动视图的滚动轴
semanticChildCount → int	将提供语义信息的子代数量
shrinkWrap → bool	是否应该由正在查看的内容确定scrollDirection中滚动视图的范围。

方法

名称 类型	描述
buildChildLayout(BuildContext context) → Widget	子类应重写此方法以构建布局模型
build(BuildContext context) → Widget	描述此窗口小部件表示的用户界面部分
buildSlivers(BuildContext context) → List	构建要放置在视口内的窗口小部件列表
buildViewport(BuildContext context, ViewportOffset offset, AxisDirection axisDirection, List slivers) → Widget	构建视口
createElement() → StatelessElement	创建StatelessElement以管理此窗口小部件在树中的位置。
debugDescribeChildren() → List	返回描述此节点的子节点的DiagnosticsNode对象列表。
debugFillProperties(DiagnosticPropertiesBuilder properties) → void	添加与节点关联的其他属性
getDirection(BuildContext context) → AxisDirection	返回滚动视图滚动的AxisDirection
noSuchMethod(Invocation invocation) → dynamic	访问不存在的方法或属性时调用
toDiagnosticsNode({String name, DiagnosticsTreeStyle style }) → DiagnosticsNode	返回调试工具和toStringDeep使用的对象的调试表示形式
toString({DiagnosticLevel minLevel: DiagnosticLevel.debug }) → String	返回此对象的字符串表示形式
toStringDeep({String prefixLineOne: '', String prefixOtherLines, DiagnosticLevel minLevel: DiagnosticLevel.debug }) → String	返回此节点及其后代的字符串表示形式。
toStringShallow({String joiner: ', ', DiagnosticLevel minLevel: DiagnosticLevel.debug }) → String	返回对象的单行详细描述
toStringShort() → String	这个小部件的简短文字描述