如何在 Flutter 中使用 SLIVERS 实现交错网格视图？答案

【问题标题】：How to implement staggered grid view with SLIVERS in Flutter?如何在 Flutter 中使用 SLIVERS 实现交错网格视图？
【发布时间】：2022-01-01 13:15:45
【问题描述】：

我想实现一个交错的 GridView，因为我的 SliverGrid 委托需要一个纵横比，并且我希望网格项目是动态调整大小的 > 据我所知，只有交错的网格视图才有可能。

我的问题是如何实现交错网格视图并在我的 CustomScrollView 中将其用作 sliver？

编辑：

我的 pubspec.yaml 文件：

dependencies:
  flutter:
    sdk: flutter
  flutter_localizations:
    sdk: flutter
  flutter_staggered_grid_view: ^0.5.1
  ...other packages

【问题讨论】：

标签： flutter flutter-sliver staggered-gridview customscrollview

【解决方案1】：

对于更新版本，用 SliverToBoxAdapter 包装 GridView 并将 gridView physics 设置为 NeverScrollableScrollPhysics，因为 CustomScrollView 将处理滚动事件。

SliverToBoxAdapter(
  child: GridView.custom(
    shrinkWrap: true,
    physics: const NeverScrollableScrollPhysics(),

测试小部件

Scaffold(
          body: CustomScrollView(
        slivers: [
          const SliverAppBar(
            title: Text("title"),
          ),
          SliverToBoxAdapter(
            child: GridView.custom(
              shrinkWrap: true,
              physics: const NeverScrollableScrollPhysics(),
              gridDelegate: SliverQuiltedGridDelegate(
                crossAxisCount: 4,
                mainAxisSpacing: 4,
                crossAxisSpacing: 4,
                repeatPattern: QuiltedGridRepeatPattern.inverted,
                pattern: const [
                  QuiltedGridTile(2, 2),
                  QuiltedGridTile(1, 1),
                  QuiltedGridTile(1, 1),
                  QuiltedGridTile(1, 2),
                ],
              ),
              childrenDelegate: SliverChildBuilderDelegate(
                (context, index) => Container(
                  color: Colors.cyanAccent,
                  child: Text("$index"),
                ),
                childCount: 44,
              ),
            ),
          )
        ],
      )),

flutter_staggered_grid_view: ^0.4.1 提供SliverStaggeredGrid 用作sliver 的孩子。

 CustomScrollView(
   slivers: [
     SliverStaggeredGrid.countBuilder(...

【讨论】：

文档指定：“此布局适用于少量项目。我暂时没有找到可以在 Sliver 上下文中工作的高性能算法，这就是为什么不是 GridView，因此没有 SliverStaggeredGrid。"
您尝试SliverStaggeredGrid.countBuilder 归档您的用户界面吗？
是的，我确实尝试过，但我没有 SliverStaggeredGrid 类，但是我将 flutter_staggered_grid_view 添加到我的 pubspec.yaml 文件中，运行 pub get，然后导入包。
好像在v0.5.1上已经被删除了，你可以切换到0.4.1，我会用当前版本尝试不同的方法。

【解决方案2】：

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

void main() => runApp(MyApp());

class MyApp extends StatelessWidget {
  const MyApp({Key? key}) : super(key: key);

  @override
  Widget build(BuildContext context) {
    return MaterialApp(home: Dene());
  }
}

class Dene extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    return SafeArea(
      child: Scaffold(
        body: Column(
          children: [
            Expanded(
              child: StaggeredGridView.countBuilder(
                mainAxisSpacing: 16,
                crossAxisSpacing: 16,
                crossAxisCount: 2,
                itemCount: 22,
                itemBuilder: (context, index) {
                  return Container(
                    width: 200,
                    height: 100,
                    color: Colors.red,
                  );
                },
                staggeredTileBuilder: (index) {
                  return StaggeredTile.fit(1);
                },
              ),
            ),
          ],
        ),
      ),
    );
  }
}

【讨论】：

【解决方案3】：

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

void main() => runApp(Dene());

class Dene extends StatelessWidget {
  const Dene({Key? key}) : super(key: key);

  @override
  Widget build(BuildContext context) {
    return MaterialApp(
      home: MyApp(),
    );
  }
}

class MyApp extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    return SafeArea(
      child: Scaffold(
        body: Column(
          children: [
            Expanded(
              child: StaggeredGridView.countBuilder(
                crossAxisCount: 4,
                itemCount: 22,
                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,
              ),
            ),
          ],
        ),
      ),
    );
  }
}

【讨论】：