flutter_staggered_grid_view

一个支持多列且行大小可变的 Flutter 交错网格视图。

flutter_staggered_grid_view

特点

  • 可配置的交叉轴计数或最大交叉轴跨度，类似于GridView。
  • 图块可以具有固定的主轴跨度，或细胞长度的倍数。
  • 图块之间可配置的主轴和交叉轴边距。
  • SliverStaggeredGrid 用于 CustomScrollView。
  • 交错和可跨越的网格布局。

spannable_1

staggered_1

  • 图块可以适应主轴中的内容。

dynamic_tile_sizes

入门

在您的 flutter 项目的 pubspec.yaml 文件中，添加以下依赖项

dependencies:
  ...
  flutter_staggered_grid_view: "^0.2.2"

在您的库中添加以下导入

import 'package:flutter_staggered_grid_view/flutter_staggered_grid_view.dart';

要开始使用 Flutter，请查看在线 文档。

示例

Screenshot_Example

new StaggeredGridView.countBuilder(
  crossAxisCount: 4,
  itemCount: 8,
  itemBuilder: (BuildContext context, int index) => new Container(
      color: Colors.green,
      child: new Center(
        child: new CircleAvatar(
          backgroundColor: Colors.white,
          child: new Text('$index'),
        ),
      )),
  staggeredTileBuilder: (int index) =>
      new StaggeredTile.count(2, index.isEven ? 2 : 1),
  mainAxisSpacing: 4.0,
  crossAxisSpacing: 4.0,
)

您可以在 示例 项目中找到更多示例。

构造函数

StaggeredGridView 遵循与 GridView 相同的构造函数约定。
还有两个构造函数：countBuilder 和 extentBuilder。这些构造函数允许您为布局和子项定义一个构建器。

图块

StaggeredGridView 需要知道如何显示每个图块，以及哪个小部件与图块相关联。

图块在交叉轴上需要固定数量的单元格。
对于主轴上的跨度，您有 3 种选择

  • 您想要固定数量的单元格 => 使用 StaggeredTile.count。
  • 您想要固定的跨度 => 使用 StaggeredTile.extent。
  • 您想要可变跨度，由图块本身的内容定义 => 使用 StaggeredTile.fit。

GitHub

https://github.com/letsar/flutter_staggered_grid_view