SliverPersistentHeader不使用CustomScrollView

Question

我有一个CustomScrollView，看起来像：

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

因为我不得不更改布局以使用砖石布局，所以我使用的是flutter_staggered_grid_view包MasonryGridView。问题是它不支持条子，因此我不能在CustomScrollView中使用它。

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

我尝试过使用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

实际上，您可以在一个SliverMasonryGrid中使用CustomScrollView小部件，如视图的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'),
            ),
          ),
        ],
      ),
    );
  }
}