在NestedScrollView中滚动时SliverAppBar与Tab bar重叠问题咨询

以下是两种有效的解决方法：

方法一：使用SliverOverlapAbsorber和SliverOverlapInjector（官方推荐） #

这是Flutter官方针对NestedScrollView内部滚动组件与SliverAppBar重叠问题提供的标准解决方案，通过这两个组件协调滚动偏移，彻底解决重叠问题。

示例代码：

import 'package:flutter/material.dart';

class OverlapFixPage extends StatelessWidget {
  const OverlapFixPage({super.key});

  @override
  Widget build(BuildContext context) {
    return Scaffold(
      body: NestedScrollView(
        headerSliverBuilder: (context, innerBoxIsScrolled) {
          return [
            SliverOverlapAbsorber(
              handle: NestedScrollView.sliverOverlapAbsorberHandleFor(context),
              sliver: SliverAppBar(
                title: const Text("Demo Page"),
                expandedHeight: 200,
                floating: true,
                pinned: true,
                flexibleSpace: FlexibleSpaceBar(
                  background: Image.network(
                    "https://picsum.photos/200/300",
                    fit: BoxFit.cover,
                  ),
                ),
                bottom: const TabBar(
                  tabs: [
                    Tab(text: "标签1"),
                    Tab(text: "标签2"),
                    Tab(text: "标签3"),
                  ],
                ),
              ),
            ),
          ];
        },
        body: TabBarView(
          children: [
            Builder(
              builder: (context) {
                return CustomScrollView(
                  slivers: [
                    SliverOverlapInjector(
                      handle: NestedScrollView.sliverOverlapAbsorberHandleFor(context),
                    ),
                    SliverList(
                      delegate: SliverChildBuilderDelegate(
                        (context, index) => ListTile(title: Text("列表项 $index")),
                        childCount: 50,
                      ),
                    ),
                  ],
                );
              },
            ),
            Builder(
              builder: (context) {
                return CustomScrollView(
                  slivers: [
                    SliverOverlapInjector(
                      handle: NestedScrollView.sliverOverlapAbsorberHandleFor(context),
                    ),
                    SliverList(
                      delegate: SliverChildBuilderDelegate(
                        (context, index) => ListTile(title: Text("标签2列表项 $index")),
                        childCount: 50,
                      ),
                    ),
                  ],
                );
              },
            ),
            Builder(
              builder: (context) {
                return CustomScrollView(
                  slivers: [
                    SliverOverlapInjector(
                      handle: NestedScrollView.sliverOverlapAbsorberHandleFor(context),
                    ),
                    SliverList(
                      delegate: SliverChildBuilderDelegate(
                        (context, index) => ListTile(title: Text("标签3列表项 $index")),
                        childCount: 50,
                      ),
                    ),
                  ],
                );
              },
            ),
          ],
        ),
      ),
    );
  }
}

方法二：手动固定TabBar高度 #

如果场景简单，也可以通过PreferredSize组件固定TabBar的高度，确保SliverAppBar能正确识别底部组件的占位空间，避免滚动时重叠。

示例代码：

SliverAppBar(
  title: const Text("Demo Page"),
  expandedHeight: 200,
  floating: true,
  pinned: true,
  flexibleSpace: FlexibleSpaceBar(
    background: Image.network(
      "https://picsum.photos/200/300",
      fit: BoxFit.cover,
    ),
  ),
  bottom: PreferredSize(
    preferredSize: const Size.fromHeight(kTabBarHeight),
    child: TabBar(
      tabs: [
        Tab(text: "标签1"),
        Tab(text: "标签2"),
        Tab(text: "标签3"),
      ],
    ),
  ),
)

注意：这种方法在复杂滚动场景下可能出现适配问题，优先推荐使用官方方案。

内容的提问来源于stack exchange，提问作者Patil Kalpesh 4242