yowayimono
flutter瀑布流
编辑
2025-01-07
前端
00
请注意，本文编写于 123 天前，最后修改于 123 天前，其中某些信息可能已经过时。

目录

flutterstaggeredgrid_view 中文教程
开始使用
布局介绍
1. 交错网格布局 (Staggered Grid Layout)
网格属性
瓦片属性
放置算法
示例代码
2. 瀑布流网格布局 (Masonry Grid Layout)
网格属性
瓦片属性
放置算法
示例代码
3. 拼布网格布局 (Quilted Grid Layout)
网格属性
瓦片属性
放置算法
示例代码
4. 编织网格布局 (Woven Grid Layout)
网格属性
瓦片属性
放置算法
示例代码
5. 阶梯网格布局 (Staired Grid Layout)
网格属性
瓦片属性
放置算法
示例代码
6. 对齐网格布局 (Aligned Grid Layout)
网格属性
瓦片属性
放置算法
示例代码

flutter_staggered_grid_view 中文教程

flutter_staggered_grid_view 是一个提供多种 Flutter 网格布局的库。本教程将帮助你快速上手并使用该库。

开始使用

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

yaml
dependencies:
  ...
  flutter_staggered_grid_view: <最新版本>

在你的 Dart 文件中，添加以下导入：

dart
import 'package:flutter_staggered_grid_view/flutter_staggered_grid_view.dart';

如果你需要帮助来开始使用 Flutter，可以查看在线文档。

布局介绍

这个库包含了多种网格布局。在接下来的部分中，你将了解每一种布局。为了简化描述，布局的解释将始终考虑从上到下和从左到右的方向。当然，你可以在代码中更改这些方向。

1. 交错网格布局 (Staggered Grid Layout)

这种布局适用于少量项目。目前还没有找到在 Sliver 上下文中运行的高效算法，因此这不是一个 GridView，所以也没有 SliverStaggeredGrid。

网格属性

  • 均匀分为 n 列
  • 适用于少量项目
  • 不可滚动

瓦片属性

  • 必须占据 1 到 n 列

放置算法

  • 从上到下，从左到右

示例代码

dart
import 'package:flutter/material.dart';
import 'package:flutter_staggered_grid_view/flutter_staggered_grid_view.dart';

void main() {
  runApp(MyApp());
}

class MyApp extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    return MaterialApp(
      home: Scaffold(
        appBar: AppBar(title: Text('Staggered Grid Layout')),
        body: StaggeredGridDemo(),
      ),
    );
  }
}

class StaggeredGridDemo extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    return StaggeredGrid.count(
      crossAxisCount: 4,
      mainAxisSpacing: 4,
      crossAxisSpacing: 4,
      children: const [
        StaggeredGridTile.count(
          crossAxisCellCount: 2,
          mainAxisCellCount: 2,
          child: Tile(index: 0, color: Colors.blue),
        ),
        StaggeredGridTile.count(
          crossAxisCellCount: 2,
          mainAxisCellCount: 1,
          child: Tile(index: 1, color: Colors.green),
        ),
        StaggeredGridTile.count(
          crossAxisCellCount: 1,
          mainAxisCellCount: 1,
          child: Tile(index: 2, color: Colors.orange),
        ),
        StaggeredGridTile.count(
          crossAxisCellCount: 1,
          mainAxisCellCount: 1,
          child: Tile(index: 3, color: Colors.red),
        ),
        StaggeredGridTile.count(
          crossAxisCellCount: 4,
          mainAxisCellCount: 2,
          child: Tile(index: 4, color: Colors.purple),
        ),
      ],
    );
  }
}

class Tile extends StatelessWidget {
  final int index;
  final Color color;

  const Tile({required this.index, required this.color});

  @override
  Widget build(BuildContext context) {
    return Container(
      color: color,
      child: Center(
        child: Text('Tile $index', style: TextStyle(color: Colors.white)),
      ),
    );
  }
}

image.png

2. 瀑布流网格布局 (Masonry Grid Layout)

这种布局便于浏览未裁剪的同等内容。容器的高度根据小部件的大小进行调整。

网格属性

  • 均匀分为 n 列

瓦片属性

  • 必须占据 1 列

放置算法

  • 从上到下，从左到右

示例代码

dart
import 'package:flutter/material.dart';
import 'package:flutter_staggered_grid_view/flutter_staggered_grid_view.dart';

void main() {
  runApp(MyApp());
}

class MyApp extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    return MaterialApp(
      home: Scaffold(
        appBar: AppBar(title: Text('Masonry Grid Layout')),
        body: MasonryGridDemo(),
      ),
    );
  }
}

class MasonryGridDemo extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    return MasonryGridView.count(
      crossAxisCount: 4,
      mainAxisSpacing: 4,
      crossAxisSpacing: 4,
      itemCount: 20,
      itemBuilder: (context, index) {
        return Tile(
          index: index,
          color: Colors.primaries[index % Colors.primaries.length],
          height: (index % 5 + 1) * 50,
        );
      },
    );
  }
}

class Tile extends StatelessWidget {
  final int index;
  final Color color;
  final double height;

  const Tile({required this.index, required this.color, required this.height});

  @override
  Widget build(BuildContext context) {
    return Container(
      color: color,
      height: height,
      child: Center(
        child: Text('Tile $index', style: TextStyle(color: Colors.white)),
      ),
    );
  }
}

image.png

3. 拼布网格布局 (Quilted Grid Layout)

这种布局通过不同的容器大小和比例来强调某些项目，从而创建层次结构。

网格属性

  • 均匀分为 n 列
  • 每行的高度等于每列的宽度
  • 模式定义了瓦片的大小，并且可以有不同的重复模式

瓦片属性

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

放置算法

  • 从上到下，从左到右

示例代码

dart
import 'package:flutter/material.dart';
import 'package:flutter_staggered_grid_view/flutter_staggered_grid_view.dart';

void main() {
  runApp(MyApp());
}

class MyApp extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    return MaterialApp(
      home: Scaffold(
        appBar: AppBar(title: Text('Quilted Grid Layout')),
        body: QuiltedGridDemo(),
      ),
    );
  }
}

class QuiltedGridDemo extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    return 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,
          color: Colors.primaries[index % Colors.primaries.length],
        ),
        childCount: 20,
      ),
    );
  }
}

class Tile extends StatelessWidget {
  final int index;
  final Color color;

  const Tile({required this.index, required this.color});

  @override
  Widget build(BuildContext context) {
    return Container(
      color: color,
      child: Center(
        child: Text('Tile $index', style: TextStyle(color: Colors.white)),
      ),
    );
  }
}

image.png

4. 编织网格布局 (Woven Grid Layout)

这种布局便于浏览同等内容。项目显示在不同比例的容器中，以创建有节奏的布局。

网格属性

  • 均匀分为 n 列
  • 行的高度是瓦片的最大高度
  • 模式定义了瓦片的大小
  • 瓦片的大小按照 'z' 序列的模式排列

瓦片属性

  • 高度由 aspectRatio（宽高比）定义
  • 宽度由 crossAxisRatio（宽度/列宽）定义，范围在 0（不包括）到 1（包括）之间
  • 每个瓦片可以定义其在可用空间内的对齐方式

放置算法

  • 从上到下，从左到右

示例代码

dart
import 'package:flutter/material.dart';
import 'package:flutter_staggered_grid_view/flutter_staggered_grid_view.dart';

void main() {
  runApp(MyApp());
}

class MyApp extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    return MaterialApp(
      home: Scaffold(
        appBar: AppBar(title: Text('Quilted Grid Layout')),
        body: QuiltedGridDemo(),
      ),
    );
  }
}

class QuiltedGridDemo extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    return 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,
          color: Colors.primaries[index % Colors.primaries.length],
        ),
        childCount: 20,
      ),
    );
  }
}

class Tile extends StatelessWidget {
  final int index;
  final Color color;

  const Tile({required this.index, required this.color});

  @override
  Widget build(BuildContext context) {
    return Container(
      color: color,
      child: Center(
        child: Text('Tile $index', style: TextStyle(color: Colors.white)),
      ),
    );
  }
}

5. 阶梯网格布局 (Staired Grid Layout)

这种布局使用交替的容器大小和比例来创建有节奏的效果。它是另一种编织网格布局。

网格属性

  • 模式定义了瓦片的大小
  • 每个瓦片相对于前一个瓦片在水平和垂直方向上都有一定的偏移
  • 放置遵循 'z' 序列

瓦片属性

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

放置算法

  • 按照 'z' 序列

示例代码

dart
import 'package:flutter/material.dart';
import 'package:flutter_staggered_grid_view/flutter_staggered_grid_view.dart';

void main() {
  runApp(MyApp());
}

class MyApp extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    return MaterialApp(
      home: Scaffold(
        appBar: AppBar(title: Text('Staired Grid Layout')),
        body: StairedGridDemo(),
      ),
    );
  }
}

class StairedGridDemo extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    return GridView.custom(
      gridDelegate: SliverStairedGridDelegate(
        crossAxisSpacing: 8,
        mainAxisSpacing: 8,
        startCrossAxisDirectionReversed: true,
        pattern: [
          StairedGridTile(0.5, 1), // 第一个瓦片：宽度 50%，高度 1 倍
          StairedGridTile(0.5, 3 / 4), // 第二个瓦片：宽度 50%，高度 0.75 倍
          StairedGridTile(1.0, 10 / 4), // 第三个瓦片：宽度 100%，高度 2.5 倍
        ],
      ),
      childrenDelegate: SliverChildBuilderDelegate(
        (context, index) => Tile(
          index: index,
          color: Colors.primaries[index % Colors.primaries.length],
        ),
        childCount: 20,
      ),
    );
  }
}

class Tile extends StatelessWidget {
  final int index;
  final Color color;

  const Tile({required this.index, required this.color});

  @override
  Widget build(BuildContext context) {
    return Container(
      color: color,
      child: Center(
        child: Text('Tile $index', style: TextStyle(color: Colors.white)),
      ),
    );
  }
}

image.png

6. 对齐网格布局 (Aligned Grid Layout)

image.png 这种布局也被称为 CSS 网格。这是网页上常见的网格布局，其中每个项目在其轨道内具有与其兄弟项目相同的最大交叉轴范围。

网格属性

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

瓦片属性

  • 必须占据 1 列
  • 每个瓦片的高度与行中最高的瓦片相同

放置算法

  • 从上到下，从左到右

示例代码

dart
import 'package:flutter/material.dart';
import 'package:flutter_staggered_grid_view/flutter_staggered_grid_view.dart';

void main() {
  runApp(MyApp());
}

class MyApp extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    return MaterialApp(
      home: Scaffold(
        appBar: AppBar(title: Text('Aligned Grid Layout')),
        body: AlignedGridDemo(),
      ),
    );
  }
}

class AlignedGridDemo extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    return AlignedGridView.count(
      crossAxisCount: 4,
      mainAxisSpacing: 4,
      crossAxisSpacing: 4,
      itemCount: 20,
      itemBuilder: (context, index) {
        return Tile(
          index: index,
          color: Colors.primaries[index % Colors.primaries.length],
          height: (index % 7 + 1) * 30,
        );
      },
    );
  }
}

class Tile extends StatelessWidget {
  final int index;
  final Color color;
  final double height;

  const Tile({required this.index, required this.color, required this.height});

  @override
  Widget build(BuildContext context) {
    return Container(
      color: color,
      height: height,
      child: Center(
        child: Text('Tile $index', style: TextStyle(color: Colors.white)),
      ),
    );
  }
}

image.png

本文作者:yowayimono

本文链接:

版权声明:本博客所有文章除特别声明外，均采用 BY-NC-SA 许可协议。转载请注明出处！