flutter 效果实现 —— NestedScrollView 嵌套滚动（多固定头）

效果

代码

注：请添加依赖 sliver_tools

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

  final List<String> tabs = ["水果", "蔬菜"];

  @override
  Widget build(BuildContext context) {
    return DefaultTabController(
      length: tabs.length,
      child: Scaffold(
        backgroundColor: Colors.blueGrey,
        body: NestedScrollView(
          physics: BouncingScrollPhysics(),
          headerSliverBuilder: (BuildContext context, bool innerBoxIsScrolled) {
            return [
              SliverOverlapAbsorber(
                //关键
                handle:
                    NestedScrollView.sliverOverlapAbsorberHandleFor(context),
                sliver: MultiSliver(
                  // pushPinnedChildren: true,
                  children: [
                    SliverAppBar(
                      backgroundColor: Colors.transparent,
                      pinned: true,
                      title: Text("固定导航"),
                    ),
                    SliverToBoxAdapter(
                      child: Container(
                        color: Colors.pink,
                        height: 200,
                        alignment: Alignment.center,
                        child: Text("头图"),
                      ),
                    ),
                    SliverAppBar(
                      primary: false,
                      toolbarHeight: 0,
                      pinned: true,
                      backgroundColor: Colors.transparent,
                      bottom: TabBar(
                        tabs: tabs
                            .map((e) => Tab(
                                  text: e,
                                ))
                            .toList(),
                      ),
                    ),
                  ],
                ),
              ),
            ];
          },
          body: TabBarView(
            children: [
              Builder(builder: (context) {
                return CustomScrollView(
                  slivers: [
                    // 关键
                    SliverOverlapInjector(
                      handle: NestedScrollView.sliverOverlapAbsorberHandleFor(
                          context),
                    ),
                    SliverToBoxAdapter(
                      child: Text("Tab1"),
                    )
                  ],
                );
              }),
              Builder(builder: (context) {
                return CustomScrollView(
                  slivers: [
                    SliverToBoxAdapter(
                      child: Text("Tab2"),
                    )
                  ],
                );
              }),
            ],
          ),
        ),
      ),
    );
  }
}