Flutter Staggered Grid View

staggered_grid_view 是一个用于创建交错网格布局的灵活且高性能的Flutter包，提供了多种配置选项，适用于固定和动态内容。

特性

• 交错布局：创建视觉上吸引人的布局，具有可变大小的项目跨越多行和多列。
• 固定和动态扩展：支持固定大小网格和适应内容大小的网格。
• 可自定义的代理：使用不同的代理配置布局，如跨轴计数、最大扩展和自定义瓷砖大小。
• 懒加载：通过延迟子项创建和缓存来高效处理大型数据集。
• 自动保持活动状态：在滚动过程中平滑过渡的选项。
• 简单使用：类似于Flutter内置GridView的易于使用的API。

开始使用

安装

将包添加到您的pubspec.yaml文件中：

dependencies:
  staggered_grid_view: ^0.0.11

然后运行 flutter pub get。

使用方法

以下是一些基本示例，帮助您开始使用staggered_grid_view插件。

基本交错网格（固定跨轴计数）

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

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

class MyApp extends StatelessWidget {
  const MyApp({super.key});

  @override
  Widget build(BuildContext context) {
    return MaterialApp(
      home: Scaffold(
        appBar: AppBar(title: const Text('Staggered Grid View')),
        body: StaggeredGridView.count(
          crossAxisCount: 4,
          staggeredTiles: const [
            StaggeredTile.count(2, 2),
            StaggeredTile.count(1, 2),
            StaggeredTile.count(1, 1),
            StaggeredTile.count(1, 2),
            StaggeredTile.count(2, 1),
            StaggeredTile.count(1, 1),
          ],
          children: List.generate(6, (index) => Card(
            color: Colors.blue.shade100,
            child: Center(child: Text('Item $index')),
          )),
        ),
      ),
    );
  }
}

最大跨轴扩展和动态子项的交错网格

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

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

class MyApp extends StatelessWidget {
  const MyApp({super.key});

  @override
  Widget build(BuildContext context) {
    return MaterialApp(
      home: Scaffold(
        appBar: AppBar(title: const Text('Staggered Grid View')),
        body: StaggeredGridView.extentBuilder(
          maxCrossAxisExtent: 200,
          itemCount: 20,
          staggeredTileBuilder: (index) => StaggeredTile.count(
                (index % 3) + 1, (index % 5) + 1),
          itemBuilder: (context, index) => Card(
              color: Colors.green.shade100,
              child: Center(child: Text('Item $index'))
            ),
        ),
      ),
    );
  }
}

具有构建器的无限项目的交错网格

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

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

class MyApp extends StatelessWidget {
  const MyApp({super.key});

  @override
  Widget build(BuildContext context) {
    return MaterialApp(
      home: Scaffold(
        appBar: AppBar(title: const Text('Staggered Grid View')),
        body: StaggeredGridView.countBuilder(
          crossAxisCount: 3,
          itemCount: 100,
          staggeredTileBuilder: (index) => StaggeredTile.count(1, 1 + (index % 3)),
          itemBuilder: (context, index) => Card(
              color: Colors.orange.shade100,
              child: Center(child: Text('Item $index'))
            ),
        ),
      ),
    );
  }
}

关键类

• StaggeredGridView：渲染交错网格的主要部件。
• StaggeredTile：定义单个网格项在交叉轴和主轴上的大小。
• SliverStaggeredGridDelegate：创建自定义布局代理的抽象类。
• SliverStaggeredGridDelegateWithFixedCrossAxisCount：用于定义具有固定跨轴计数的网格布局的具体代理。
• SliverStaggeredGridDelegateWithMaxCrossAxisExtent：用于定义具有最大跨轴扩展的网格布局的具体代理。

API 概览

更多详细信息，请参阅API文档。该包模仿了GridView的常见API，提供了一些熟悉的参数，如：

• scrollDirection
• reverse
• controller
• primary
• physics
• shrinkWrap
• padding
• addAutomaticKeepAlives

以及用于构建交错网格的自定义参数：

• crossAxisCount：列数。与StaggeredGridView.count和StaggeredGridView.countBuilder一起使用。
• maxCrossAxisExtent：交叉轴上的最大宽度。与StaggeredGridView.extent和StaggeredGridView.extentBuilder一起使用。
• staggeredTiles：StaggeredTile列表。与StaggeredGridView.count和StaggeredGridView.extent一起使用。
• staggeredTileBuilder：构建StaggeredTile的函数。与StaggeredGridView.countBuilder和StaggeredGridView.extentBuilder一起使用。

示例应用

对于更全面的例子，请参见此仓库中的example文件夹。

贡献

欢迎贡献！请随时提交错误报告、功能请求和拉取请求至GitHub。

希望这些示例能帮助您更好地理解和使用staggered_grid_view插件。如果您有任何问题或需要进一步的帮助，请随时提问！