不使用 CustomScrollView 的 SliverPersistentHeader

Question

我有一个 CustomScrollView 看起来像：


CustomScrollView(
  slivers: [
    SliverPersistentHeader(
      floating: true,
      delegate: MyPersistentHeaderDelegate(),
    ),
    SliverList(...),
  ],
)

因为我必须更改布局以使用砌体布局，所以我正在使用 flutter_staggered_grid_view 包 MasonryGridView。问题是它不支持条子，因此我不能在 CustomScrollView 中使用它。

问题是我现在如何在不使用 CustomScrollView 的情况下仍然使用我的 SliverPersistentHeader (/Delegate)？

我试过使用 NestedScrollView，但所有示例仅显示它如何与 CustomScrollView 一起使用：

NestedScrollView(
  floatHeaderSlivers: true,
  headerSliverBuilder: (BuildContext _, bool innerBoxIsScrolled) {
    return <Widget>[
        SliverOverlapAbsorber(
            handle: NestedScrollView.sliverOverlapAbsorberHandleFor(context),
            sliver: SliverPersistentHeader(
                delegate: MyPersistentHeaderDelegate(),
                floating: true,
            ),
        ),
    ];
  },
  body: CustomScrollView(
    sliver: [
        SliverOverlapInjector(handle: handle: NestedScrollView.sliverOverlapAbsorberHandleFor(context)),

        // wont work in sliver because it uses its own scroll view
        MasonryGridView.builder(),
    ]
  )
),

Answer 1

实际上，您可以在 CustomScrollView 中使用 SliverMasonryGrid 小部件，如 flutter_staggered_grid_view's wiki 中所述。

这是一个代码示例，其灵感来自对我来说效果很好的文档：

代码示例

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

  @override
  Widget build(BuildContext context) {
    return Scaffold(
      body: CustomScrollView(
        slivers: [
          SliverPersistentHeader(
            floating: true,
            delegate: MyPersistentHeaderDelegate(),
          ),
          SliverMasonryGrid.count(
            childCount: 100,
            crossAxisCount: 4,
            itemBuilder: (_, i) => Container(
              margin: const EdgeInsets.all(8),
              padding: const EdgeInsets.all(16),
              alignment: Alignment.center,
              decoration: BoxDecoration(
                color: Colors.blue,
                borderRadius: BorderRadius.circular(12),
              ),
              child: Text('$i'),
            ),
          ),
        ],
      ),
    );
  }
}

不使用 CustomScrollView 的 SliverPersistentHeader

SliverPersistentHeader without using CustomScrollView

nestedscrollview

flutter

flutter-sliver

代码示例