flutter_staggered_grid_view

机器翻译正文由机器翻译自项目原始文档（英文），排版经程序统一处理，可能存在偏差，请以原项目仓库为准。

flutter_staggered_grid_view

提供了一组 Flutter 网格布局。

入门

在你 flutter 项目的 pubspec.yaml 中，添加以下依赖项：

dependencies:
  ...
  flutter_staggered_grid_view: <latest_version>

在你的库中添加以下导入：

import 'package:flutter_staggered_grid_view/flutter_staggered_grid_view.dart';

有关开始使用 Flutter 的帮助，请查看在线文档。

布局

此包包含各种网格布局。在接下来的部分中，您将发现它们每一个。布局的说明始终按从上到下、从左到右的方向来考虑，以简化描述。然而，可以在代码中更改这些方向。

错落布局

此布局适用于少量项目。目前，我还没有找到在 Sliver 环境中可用的高性能算法，这就是为什么它不是 GridView，因此没有 SliverStaggeredGrid。

网格属性

• 平均分成 n 列
• 项目数量少
• 不可滚动

瓦片属性

• 必须占用 1 到 n 列

排列算法

• 先顶部，再左侧

示例

下面是创建此网格布局的代码：

StaggeredGrid.count(
  crossAxisCount: 4,
  mainAxisSpacing: 4,
  crossAxisSpacing: 4,
  children: const [
    StaggeredGridTile.count(
      crossAxisCellCount: 2,
      mainAxisCellCount: 2,
      child: Tile(index: 0),
    ),
    StaggeredGridTile.count(
      crossAxisCellCount: 2,
      mainAxisCellCount: 1,
      child: Tile(index: 1),
    ),
    StaggeredGridTile.count(
      crossAxisCellCount: 1,
      mainAxisCellCount: 1,
      child: Tile(index: 2),
    ),
    StaggeredGridTile.count(
      crossAxisCellCount: 1,
      mainAxisCellCount: 1,
      child: Tile(index: 3),
    ),
    StaggeredGridTile.count(
      crossAxisCellCount: 4,
      mainAxisCellCount: 2,
      child: Tile(index: 4),
    ),
  ],
);

砖石布局

此布局便于浏览未裁剪的同行内容。容器高度根据小部件大小进行设置。

这是一个完全独立的网格，而不是 SliverGridDelegate，为了性能原因。SliverGrid 很棒，但它需要一个不依赖其子元素大小的布局。否则，我们必须在缓存结束之前计算所有子元素的大小，对于砖石布局来说，这样的性能非常低。

网格属性

• 均匀分为 n 列

瓦片属性

• 必须只占用 1 列

放置算法

• 最顶部，然后最左侧

示例

下面是创建此网格布局的代码：

MasonryGridView.count(
  crossAxisCount: 4,
  mainAxisSpacing: 4,
  crossAxisSpacing: 4,
  itemBuilder: (context, index) {
    return Tile(
      index: index,
      extent: (index % 5 + 1) * 100,
    );
  },
);

绗缝

这种布局在集合中强调某些项目优于其他项目。它通过不同的容器大小和比例创建层次结构。

这是内置 GridView（或 SliverGrid）小部件的特定代理。这就是为什么下面的示例将使用 GridView 创建这样的布局。

网格属性

• 在 n 列中均匀划分
• 每行的高度等于每列的宽度
• 图案定义了瓷砖的大小，并且可以有不同的重复模式

瓷砖属性

• 必须占据 1 到 n 列
• 必须占据 1 行或多行完整行

放置算法

• 首先从顶部，然后从左侧

示例

以下是创建此网格布局的代码：

GridView.custom(
  gridDelegate: SliverQuiltedGridDelegate(
    crossAxisCount: 4,
    mainAxisSpacing: 4,
    crossAxisSpacing: 4,
    repeatPattern: QuiltedGridRepeatPattern.inverted,
    pattern: [
      QuiltedGridTile(2, 2),
      QuiltedGridTile(1, 1),
      QuiltedGridTile(1, 1),
      QuiltedGridTile(1, 2),
    ],
  ),
  childrenDelegate: SliverChildBuilderDelegate(
    (context, index) => Tile(index: index),
  ),
);

编织

此布局便于浏览同伴内容。各项目以不同比例的容器显示，以创建有节奏的布局。

这是内置 GridView（或 SliverGrid）组件的特定委托。这就是为什么下面的示例将使用 GridView 创建这样的布局。

网格属性

• • n * 列均分
• 行的高度为瓷砖的最大高度
• 一个模式定义瓷砖的大小
• 瓷砖的大小根据 'z' 序列中的模式排列。

瓷砖属性

• 高度由 aspectRatio（宽度/高度）定义
• 宽度由 crossAxisRatio（宽度/列宽）定义，范围为 0（不含）到 1（含）
• 每个瓷砖可以定义其在可用空间中的对齐方式

放置算法

• 首先从最上方，然后从最左侧

示例

下面你会找到创建此网格布局的代码：

GridView.custom(
  gridDelegate: SliverWovenGridDelegate.count(
    crossAxisCount: 2,
    mainAxisSpacing: 8,
    crossAxisSpacing: 8,
    pattern: [
      WovenGridTile(1),
      WovenGridTile(
        5 / 7,
        crossAxisRatio: 0.9,
        alignment: AlignmentDirectional.centerEnd,
      ),
    ],
  ),
  childrenDelegate: SliverChildBuilderDelegate(
    (context, index) => Tile(index: index),
  ),
);

阶梯式

此布局使用交替的容器尺寸和比例来创建节奏感。这是另一种编织网格布局。

这是内置 GridView（或 SliverGrid）小部件的特定委托。因此，下面的示例将使用 GridView 创建这样的布局。

网格属性

• 模式定义了瓦片的大小
• 每个瓦片在两个轴上都相对于前一个瓦片有一个边距的偏移
• 放置遵循 'z' 顺序

瓦片属性

• 高度由 aspectRatio（宽度/高度）定义
• 宽度由 crossAxisRatio（宽度/可用水平空间）定义，范围在 0（不包括）到 1（包括）之间

放置算法

• 按照 'z' 顺序

示例

下面您将找到创建此网格布局的代码：

GridView.custom(
  gridDelegate: SliverStairedGridDelegate(
    crossAxisSpacing: 48,
    mainAxisSpacing: 24,
    startCrossAxisDirectionReversed: true,
    pattern: [
      StairedGridTile(0.5, 1),
      StairedGridTile(0.5, 3 / 4),
      StairedGridTile(1.0, 10 / 4),
    ],
  ),
  childrenDelegate: SliverChildBuilderDelegate(
    (context, index) => Tile(index: index),
  ),
);

对齐

这种布局也叫做 CSS 网格。这是在网页上常见的网格布局，其中每个轨道内的项目的交叉轴最大范围与其兄弟元素相同。

网格属性

• 均匀分为 n 列
• 行的高度可以不同

瓦片属性

• 必须仅占用 1 列
• 每个瓦片的高度与所在行中最高的瓦片相同。

放置算法

• 先顶部，然后最左侧

示例

下面是创建此网格布局的代码：

AlignedGridView.count(
  crossAxisCount: 4,
  mainAxisSpacing: 4,
  crossAxisSpacing: 4,
  itemBuilder: (context, index) {
    return Tile(
      index: index,
      extent: (index % 7 + 1) * 30,
    );
  },
);

贡献

欢迎随时为此项目做出贡献。

如果您发现了一个错误或想要一个功能，但不知道如何修复/实现它，请填写一个问题。如果您修复了一个错误或实现了一个功能，请发送一个拉取请求。