flutter - CustomScrollView 内的固定 SliverPersistentHeader 滚动到 NestedScrollView 内另一个固定的 SliverPersistentHeader 后面

Question

背景

我有两个 SliverPersistentHeaders。一个位于 NestedScrollView 内部，其中有一个 TabBar，它应该在滚动时始终可见，所以我将其固定。我还有另一个 SliverPersistentHeader，它位于其中一个选项卡的 CustomScrollView 内。打开此选项卡时，它应该始终在滚动条上可见，因此我也将其固定。

这是我的视觉效果。我写的 SliverPersistentHeaders 是白色和蓝色的:

https://ibb.co/JzZPyqp

问题

我希望两个 SliverPersistentHeaders 都被固定并且不会滚动。但事实证明，CustomScrollView 中的 SliverPersistentHeader 在 NestedScrollView 中的 SliverPersistentHeader 后面滚动，然后才像这样固定:

https://s2.gifyu.com/images/untitled446dfde99b45261c.gif

让我们跳到代码

import 'package:flutter/material.dart';

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

class MyApp extends StatelessWidget {
  // This widget is the root of your application.
  @override
  Widget build(BuildContext context) {
    return MaterialApp(
      title: 'Flutter Demo',
      theme: ThemeData(
        primarySwatch: Colors.blue,
        visualDensity: VisualDensity.adaptivePlatformDensity,
      ),
      home: MyHomePage(),
    );
  }
}

class MyHomePage extends StatefulWidget {
  MyHomePage({Key key}) : super(key: key);

  @override
  _MyHomePageState createState() => _MyHomePageState();
}

class _MyHomePageState extends State<MyHomePage> with TickerProviderStateMixin {
  var _tabController;

  @override
  void initState() {
    _tabController = TabController(
      length: 2,
      vsync: this,
    );
    super.initState();
  }

  @override
  Widget build(BuildContext context) {
    return SafeArea(
      child: Scaffold(
        body: NestedScrollView(
          physics: BouncingScrollPhysics(),
          floatHeaderSlivers: true,
          headerSliverBuilder: (context, value) {
            return [
              // here we have the first SliverPersistentHeader
              // with TabBar as content
              // inside of NestedScrollView
              SliverPersistentHeader(
                pinned: true,
                floating: false,
                delegate: _TabBarAsSliverPersistentHeader(_tabController),
              ),
            ];
          },
          body: 
              // BlocProvider might be here in the real project...
          CustomScrollView(
            slivers: [
              // here we have the second SliverPersistentHeader
              // inside of CustomScrollView
              // it has unexpected behaviour as shown in gif above
              SliverPersistentHeader(
                pinned: true,
                floating: false,
                delegate: PersistentHeaderDateFilter(),
              ),
              SliverList(
                delegate: SliverChildBuilderDelegate(
                  (context, index) => Container(
                    height: 100,
                    margin: EdgeInsets.all(10),
                    color: Colors.red,
                    
                  ),
                  childCount: 10,
                ),
              )
            ],
          ),
        ),
      ),
    );
  }
}

class _TabBarAsSliverPersistentHeader extends SliverPersistentHeaderDelegate {
  final TabController _tabController;

  _TabBarAsSliverPersistentHeader(this._tabController);

  @override
  Widget build(
      BuildContext context, double shrinkOffset, bool overlapsContent) {
    // TODO: implement build
    return Container(
      // color: Theme.of(context).backgroundColor,
      child: Stack(
        children: [
          Positioned.fill(
            child: Container(
              decoration: BoxDecoration(
                border: Border(
                  bottom: BorderSide(
                    color: Theme.of(context).dividerColor,
                    width: 1.0,
                  ),
                ),
              ),
            ),
          ),
          Container(
            color: Colors.transparent,
            child: TabBar(
              
              isScrollable: false,
              indicator: UnderlineTabIndicator(
                borderSide: BorderSide(
                  width: 2,
                  color: Colors.blue,
                ),
              ),
              indicatorSize: TabBarIndicatorSize.tab,
              indicatorWeight: 2,
              labelColor: Colors.blue,
              unselectedLabelColor: Colors.grey,
              tabs: [
                Tab(text: 'by rating'),
                Tab(text: 'by date'),
              ],
              controller: _tabController,
            ),
          ),
        ],
      ),
    );
  }

  @override
  double get maxExtent => 46.0;

  @override
  double get minExtent => 46.0;

  @override
  bool shouldRebuild(covariant SliverPersistentHeaderDelegate oldDelegate) {
    return false;
  }
}

class PersistentHeaderDateFilter extends SliverPersistentHeaderDelegate {
  PersistentHeaderDateFilter();

  @override
  Widget build(
      BuildContext context, double shrinkOffset, bool overlapsContent) {
    // TODO: implement build
    return Container(
      width: MediaQuery.of(context).size.width,
      padding: EdgeInsets.symmetric(
        vertical: 10,
      ),
      decoration: BoxDecoration(
        color: Colors.blue.shade200,
        border: Border(
          bottom: BorderSide(
            color: Colors.green,
            width: 1.0,
          ),
        ),
      ),
      alignment: Alignment.center,
      child: ListView.builder(
        padding: EdgeInsets.symmetric(horizontal: 20),
        // shrinkWrap: true,
        scrollDirection: Axis.horizontal,
        itemCount: 10,
        // ignore: missing_return
        itemBuilder: (context, index) {
            return Container(
              color: Colors.amber,
              margin: EdgeInsets.all(5),
              width: 50,
              child: Text(index.toString()),
            );
        },
      ),
    );
  }

  @override
  double get maxExtent => 110.0;

  @override
  double get minExtent => 110.0;

  @override
  bool shouldRebuild(covariant SliverPersistentHeaderDelegate oldDelegate) {
    return true;
  }
}

我尝试过的

到目前为止，我已经尝试了 SliverOverlapAbsorber 和 SliverOverlapInjector ，它们在 NestedScrollView 的 flutter doc 中提到但没有任何好的结果。将 TabBar 移动到 SliverAppBar 底部属性也没有成功。

Answer 1

对我有用的:

我已经将整个 SliverPersistentHeader(我的 _buildTabNavigation()) 包装在 SliverOverlapAbsorver 中:

 SliverOverlapAbsorber(
    handle: NestedScrollView.sliverOverlapAbsorberHandleFor(context),
    sliver: _buildTabNavigation(),
 ),

这样做，您的列表将卡在 TabBar 下。然后，您可以将 NestedScrollView 主体包裹在 Container 中，并在顶部添加边距。

像这样:

return NestedScrollView(
      controller: _scrollController,
      headerSliverBuilder: (context, value) {
        return [
          SliverOverlapAbsorber(
            handle: NestedScrollView.sliverOverlapAbsorberHandleFor(context),
            sliver: _buildTabNavigation(),
          ),
        ];
      },
      body: Container(
        margin: EdgeInsets.only(top: 50),
        child: TabBarView(
          controller: _tabController,
          children: _tabs,
        ),
      ),
    );