flutter - SliverOverlapAbsorber 能够接受多个条子

Question

目前是否有在 SliverOverlapAbsorber 中支持多个 Sliver 的已知解决方法？见：https ://github.com/flutter/flutter/issues/52616

标签： flutter

Answer 1

我发现的解决方法是创建多个NestedScrollView并使用Builder小部件作为主体来获得正确的BuildContext。这种解决方法可能不是最好的，并且会弄乱您的代码，但它现在解决了我的问题。

这就是我想要实现的目标：

• 我的情况
• 结果为 GIF

这是我的代码：

class OrderPage extends StatelessWidget {
  Widget build(BuildContext context) {
    return Scaffold(
      body: DefaultTabController(
        length: 3,

        /// First level of [NestedScrollView]
        child: NestedScrollView(
          headerSliverBuilder: (_, __) => [],

          /// Use [Builder] to get the [BuildContext]
          /// Name the variable of context as contextNestedOne
          body: Builder(
            builder: (contextNestedOne) {

              /// Second level of [NestedScrollView]
              return NestedScrollView(

                /// Name the variable of context as contextNestedTwo
                headerSliverBuilder: (contextNestedTwo, innerBoxIsScrolled) {
                  return [
                    SliverOverlapAbsorber(
                      handle: NestedScrollView.sliverOverlapAbsorberHandleFor(
                        
                        /// Use contextNestedOne
                        contextNestedOne,
                      ),
                      sliver: SliverAppBar(
                        title: Text('My Orders'),
                        elevation: 0,
                      ),
                    ),
                    SliverOverlapAbsorber(
                      handle: NestedScrollView.sliverOverlapAbsorberHandleFor(

                        /// Use contextNestedTwo
                        contextNestedTwo,
                      ),
                      sliver: SliverAppBar(
                        primary: false,
                        pinned: true,
                        automaticallyImplyLeading: false,
                        titleSpacing: 0.0,
                        elevation: innerBoxIsScrolled ? 4 : 0,
                        title: TabBar(
                          labelColor: Colors.black,
                          tabs: <Widget>[
                            Tab(text: 'Delivered'),
                            Tab(text: 'Processing'),
                            Tab(text: 'Cancelled'),
                          ],
                        ),
                      ),
                    ),
                  ];
                },

                /// Use [Builder] to get the [BuildContext]
                /// Name the variable of context as contextNestedTwo
                body: Builder(
                  builder: (contextNestedTwo) {
                    return CustomScrollView(
                      slivers: <Widget>[
                        SliverOverlapInjector(
                          handle:
                              NestedScrollView.sliverOverlapAbsorberHandleFor(

                            /// Use contextNestedOne
                            contextNestedOne,
                          ),
                        ),
                        SliverOverlapInjector(
                          handle:
                              NestedScrollView.sliverOverlapAbsorberHandleFor(

                            /// Use contextNestedOne
                            contextNestedTwo,
                          ),
                        ),
                        SliverToBoxAdapter(
                          child: Container(
                            height: 200,
                            color: Colors.blue,
                            child: Text('My Orders Body'),
                          ),
                        ),
                      ],
                    );
                  },
                ),
              );
            },
          ),
        ),
      ),
    );
  }
}