如何在颤振中实现带条的交错网格视图？

Question

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

我的问题是如何实现交错网格视图，并在我的CustomScrollView中使用它作为条

编辑：

我的pubspec.yaml文件：

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

Answer 1

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

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

测试Widget

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(...

Answer 2

不要在列表中使用shrinkWrap(当您有很多项时)(性能问题)。

2022年更新版本颤振交错已经更新并删除了新版本中的SliverStaggeredGrid，可以使用QuiltedGridDelegate。就像这样：

      CustomScrollView(
      slivers: [
        SliverGrid(
            delegate: SliverChildBuilderDelegate(
              (context, index) => Container(
                color: Colors.cyanAccent,
                child: Text("$index"),
              ),
              childCount: 44,
            ),
            gridDelegate: SliverQuiltedGridDelegate(
              crossAxisCount: 3,
              mainAxisSpacing: 4,
              crossAxisSpacing: 4,
              repeatPattern: QuiltedGridRepeatPattern.inverted,
              pattern: const [
                QuiltedGridTile(2, 1),
                QuiltedGridTile(2, 2),
                QuiltedGridTile(1, 1),
                QuiltedGridTile(1, 1),
                QuiltedGridTile(1, 1),
              ],
            ))
      ],
    ),

Answer 3

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);
                },
              ),
            ),
          ],
        ),
      ),
    );
  }
}