Flutter 中的 GridView

在Flutter中，GridView可以用于展示一个二维网格列表，其中每个单元格可以包含任意的widget，比如图片、文本等等。本文将对GridView的组成结构、属性和常用方法进行介绍。

GridView的组成结构

GridView有两个重要的概念：行和列。

一行中包含多个列，每个列中可以放置一个widget。

GridView的常见属性有：

• scrollDirection：滚动方向，可选值有Axis.horizontal和Axis.vertical。
• crossAxisCount：每行（或每列）的列数。
• crossAxisSpacing：列之间的间隔。
• mainAxisSpacing：行之间的间隔。
• padding：GridView内容的内边距。
• children：GridView中包含的子widget。

GridView的属性描述

以下是常见属性的详细描述：

GridView({
  Key? key,
  Axis scrollDirection = Axis.vertical,
  required SliverGridDelegate gridDelegate,
  bool reverse = false,
  ScrollController? controller,
  bool primary,
  ScrollPhysics? physics,
  bool shrinkWrap = false,
  EdgeInsetsGeometry? padding,
  @Deprecated('Use clipBehavior parameter instead. ' 'This feature was deprecated after v1.19.0.')
      bool? addAutomaticKeepAlives,
  bool addRepaintBoundaries = true,
  bool addSemanticIndexes = true,
  double cacheExtent = RenderViewport.defaultCacheExtent,
  List<Widget> children = const <Widget>[],
  int? semanticChildCount,
  DragStartBehavior dragStartBehavior = DragStartBehavior.start,
  ScrollViewKeyboardDismissBehavior keyboardDismissBehavior = ScrollViewKeyboardDismissBehavior.manual,
  String? restorationId,
})

scrollDirection

• 描述：滚动方向，默认值为Axis.vertical。
• 类型：Axis枚举类型，可选值有Axis.horizontal和Axis.vertical。

crossAxisCount

• 描述：每行（或每列）的列数。
• 类型：整型，必填。

gridDelegate

• 描述：用于控制GridView中的布局策略，比如把GridView分为几行、几列、每个子widget的大小等。
• 类型：必填。

gridDelegate的具体实现类如下：

SliverGridDelegateWithMaxCrossAxisExtent

• 描述：按照最大宽度来分布子widget，比如按照每个子widget的宽度最大值来分布。如果子widget宽度不相等，这种方式比较适用。
• 范围：宽度（Max）：maxCrossAxisExtent
• 高度：必须指定Tile的宽度（tileWidth）

  GridView(
    gridDelegate: SliverGridDelegateWithMaxCrossAxisExtent(
      maxCrossAxisExtent: 120,
      childAspectRatio: 4 / 3,
      mainAxisSpacing: 10,
      crossAxisSpacing: 10,
    ),
  )
  

SliverGridDelegateWithFixedCrossAxisCount

• 描述：指定每行（或每列）显示的子widget数量，子widget大小可以通过childAspectRatio指定。
• 范围：宽度：item的宽度加间隙（crossAxisSpacing）（crossAxisCount-1） 高度：item的高度加间隙（mainAxisSpacing） 总行数

  GridView(
    gridDelegate: SliverGridDelegateWithFixedCrossAxisCount(
      crossAxisCount: 2,
      childAspectRatio: 2 / 1,
      mainAxisSpacing: 10,
      crossAxisSpacing: 10,
    ),
  )
  

SliverGridDelegateWithFixedCrossAxisExtent

• 描述：每个子widget的大小是固定的，而且数量可以根据橫向间隔等自适应变化。
• 范围：宽度：固定的值（crossAxisExtent） * item的个数 高度：固定的值（maxCrossAxisExtent） * 总行数

  GridView(
    gridDelegate: SliverGridDelegateWithFixedCrossAxisExtent(
      crossAxisExtent: 120,
    ),
  )
  

reverse

• 描述：是否反向显示。
• 类型：布尔型，可选。

controller

• 描述：控制滚动位置。
• 类型：ScrollController，可选。

primary

• 描述：是否使用主轴范围内的空间，默认为true。
• 类型：布尔型，可选。

physics

• 描述：滚动视图的物理特性，比如滚动的边界、滚动方向和滚动行为等。
• 类型：ScrollPhysics，可选。

shrinkWrap

• 描述：是否根据子widget的总长度来确定滚动容器的长度，默认为false。
• 类型：布尔型，可选。

padding

• 描述：四周边距，即子widget内容距离容器边缘的距离。
• 类型：EdgeInsetsGeometry，可选。

addRepaintBoundaries

• 描述：是否添加可重绘边界。
• 类型：布尔型，可选。

addSemanticIndexes

• 描述：是否添加语义信息。
• 类型：布尔型，可选。

children

• 描述：GridView中包含的子widget。
• 类型：List<Widget>，可选。

semanticChildCount

• 描述：语义子数量。
• 类型：整型，可选。

dragStartBehavior

• 描述：响应拖动行为的开始方式。
• 类型：DragStartBehavior枚举类型，可选值有DragStartBehavior.start和DragStartBehavior.down。

keyboardDismissBehavior

• 描述：滚动视图在用户点击输入器时如何响应。
• 类型：ScrollViewKeyboardDismissBehavior枚举类型，可选值有ScrollViewKeyboardDismissBehavior.manual、ScrollViewKeyboardDismissBehavior.onDrag和ScrollViewKeyboardDismissBehavior.none。

restorationId

• 描述：该组件的恢复标识符。
• 类型：String，可选。

常用方法

以下是GridView常用的方法：

scrollTo

• 描述：滚动GridView到指定的位置。
• 参数：
  • index：目标位置的索引值。

scrollToCell

• 描述：滚动GridView到指定单元格的位置。
• 参数：
  • row：目标单元格所在行的索引值。
  • column：目标单元格所在列的索引值。

jumpTo

• 描述：快速滚动到目标位置。
• 参数：
  • offset：目标位置的偏移量。

animateTo

• 描述：动画滚动到目标位置。
• 参数：
  • offset：目标位置的偏移量。
  • duration：动画时长。
  • curve：动画方式，比如匀速、减速等。

结语

以上就是关于GridView的介绍，希望对大家有所帮助。如果你也想深入学习Flutter，请移步Flutter官网。