Flutter中为TabBar添加SliverOverlapAbsorber的嵌套滚动配置方案

针对你遇到的问题，我们需要为TabBar添加SliverOverlapAbsorber处理重叠，同时修复切换标签时滚动位置重置的问题，以下是修改后的完整代码及关键说明：

关键修改点 #

• 在_tabBarSelector的SliverPersistentHeader外层添加SliverOverlapAbsorber，处理TabBar与下方滚动内容的重叠
• 在每个Tab的CustomScrollView中添加SliverOverlapInjector，注入重叠偏移量避免内容被遮挡
• 为每个Tab的滚动视图创建独立的ScrollController，确保切换标签时滚动位置正确保存
• 移除冗余的DefaultTabController，直接使用已定义的_tabController

修改后的完整代码 #

class SimpleProfile extends StatefulWidget {
  const SimpleProfile({
    super.key,
  });

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

class _SimpleProfileState extends State<SimpleProfile> with SingleTickerProviderStateMixin {
  late TabController _tabController;
  // 为每个Tab创建独立的ScrollController
  late List<ScrollController> _tabScrollControllers;

  @override
  void initState() {
    super.initState();
    _tabController = TabController(length: 6, vsync: this);
    _tabScrollControllers = List.generate(6, (index) => ScrollController());
  }

  @override
  void dispose() {
    _tabController.dispose();
    // 释放所有滚动控制器
    for (var controller in _tabScrollControllers) {
      controller.dispose();
    }
    super.dispose();
  }

  @override
  Widget build(BuildContext context) {
    return Scaffold(
      body: NestedScrollView(
        headerSliverBuilder: (context, innerBoxIsScrolled) {
          return [
            // 为SliverAppBar添加SliverOverlapAbsorber
            SliverOverlapAbsorber(
              handle: NestedScrollView.sliverOverlapAbsorberHandleFor(context),
              sliver: _profileAppBar(innerBoxIsScrolled),
            ),
            _profileMainInfo(),
            _tabBarSelector(context),
          ];
        },
        body: _tabBarView(),
      ),
    );
  }

  Widget _profileAppBar(bool innerBoxIsScrolled) {
    return SliverAppBar(
      floating: false,
      pinned: true,
      stretch: true,
      forceElevated: innerBoxIsScrolled,
      surfaceTintColor: Colors.white,
      expandedHeight: 300,
      backgroundColor: Colors.black45,
      title: null,
      flexibleSpace: FlexibleSpaceBar(
        collapseMode: CollapseMode.pin,
        background: Column(
          children: [
            Expanded(
              child: LayoutBuilder(
                builder: (context, constraints) {
                  final bgHeight = constraints.maxHeight * 0.85;
                  const avatarSize = 104.0;
                  const borderWidth = 2;
                  final radius = avatarSize / 2;
                  final imgSize = (radius - borderWidth) * 2;
                  return Stack(
                    children: [
                      Positioned(
                        top: 0,
                        left: 0,
                        right: 0,
                        child: SizedBox(
                          height: bgHeight,
                          child: Container(
                            color: Colors.blue,
                          ),
                        ),
                      ),
                      Positioned(
                        left: 0,
                        right: 0,
                        bottom: 0,
                        child: Container(
                          decoration: BoxDecoration(
                            shape: BoxShape.circle,
                            boxShadow: [
                              BoxShadow(
                                color: Colors.black.withOpacity(0.2),
                                spreadRadius: 2,
                                blurRadius: 8,
                                offset: const Offset(0, 4),
                              ),
                            ],
                          ),
                          child: CircleAvatar(
                            radius: radius,
                            backgroundColor: Colors.white,
                            child: ClipOval(
                              child: Container(
                                color: Colors.blueAccent,
                                width: imgSize,
                                height: imgSize,
                              ),
                            ),
                          ),
                        ),
                      ),
                    ],
                  );
                },
              ),
            ),
            const SizedBox(height: 20),
            Padding(
              padding: const EdgeInsets.symmetric(horizontal: 24),
              child: Text(
                'First and Last Names',
                textAlign: TextAlign.center,
                style: TextStyle(fontSize: 28, fontWeight: FontWeight.w600),
              ),
            ),
          ],
        ),
      ),
    );
  }

  Widget _profileMainInfo() {
    return SliverToBoxAdapter(
      child: Container(
        color: Colors.white,
        child: Column(
          crossAxisAlignment: CrossAxisAlignment.start,
          children: [
            Container(color: Colors.amber, height: 35),
            const SizedBox(height: 20),
            Padding(
              padding: const EdgeInsets.symmetric(horizontal: 24),
              child: Container(color: Colors.green, height: 75),
            ),
            if (true) ...[
              const SizedBox(height: 20),
              const Padding(
                padding: EdgeInsets.symmetric(horizontal: 24),
                child: Text(
                  'Some short/medium long text',
                  textAlign: TextAlign.justify,
                  style: TextStyle(
                    fontSize: 17,
                    fontStyle: FontStyle.italic,
                    fontWeight: FontWeight.w300,
                    height: 22 / 17,
                    letterSpacing: -0.408,
                    textBaseline: TextBaseline.alphabetic,
                  ),
                ),
              ),
            ],
            const SizedBox(height: 20),
          ],
        ),
      ),
    );
  }

  Widget _tabBarSelector(BuildContext context) {
    return SliverOverlapAbsorber(
      // 使用NestedScrollView的handle，确保重叠计算正确
      handle: NestedScrollView.sliverOverlapAbsorberHandleFor(context),
      sliver: SliverPersistentHeader(
        pinned: true,
        delegate: _SliverAppBarDelegate(
          TabBar(
            padding: const EdgeInsets.symmetric(horizontal: 12),
            controller: _tabController,
            tabAlignment: TabAlignment.start,
            isScrollable: true,
            labelPadding: const EdgeInsets.symmetric(horizontal: 12),
            labelColor: Colors.black,
            indicatorColor: Colors.black,
            unselectedLabelColor: Colors.grey,
            tabs: const [
              Tab(text: 'tab 1'),
              Tab(text: 'tab 2'),
              Tab(text: 'tab 3'),
              Tab(text: 'tab 4'),
              Tab(text: 'tab 5'),
              Tab(text: 'tab 6'),
            ],
          ),
        ),
      ),
    );
  }

  Widget _tabBarView() {
    return TabBarView(
      controller: _tabController,
      children: List.generate(6, (index) {
        return Builder(
          builder: (BuildContext context) {
            return CustomScrollView(
              controller: _tabScrollControllers[index],
              key: PageStorageKey<String>('SomeWidget$index'),
              slivers: <Widget>[
                // 添加SliverOverlapInjector，注入偏移量避免内容被TabBar遮挡
                SliverOverlapInjector(
                  handle: NestedScrollView.sliverOverlapAbsorberHandleFor(context),
                ),
                SliverPadding(
                  padding: const EdgeInsets.all(8.0),
                  sliver: SliverFixedExtentList(
                    itemExtent: 48.0,
                    delegate: SliverChildBuilderDelegate(
                      (BuildContext context, int itemIndex) {
                        return ListTile(
                          title: Text('Item $itemIndex'),
                        );
                      },
                      childCount: 30,
                    ),
                  ),
                ),
              ],
            );
          },
        );
      }),
    );
  }
}

class _SliverAppBarDelegate extends SliverPersistentHeaderDelegate {
  _SliverAppBarDelegate(this._tabBar);

  final TabBar _tabBar;

  @override
  double get minExtent => _tabBar.preferredSize.height + 1;
  @override
  double get maxExtent => _tabBar.preferredSize.height + 1;

  @override
  Widget build(BuildContext context, double shrinkOffset, bool overlapsContent) {
    return Column(
      children: [
        Container(
          color: Colors.white,
          child: _tabBar,
        ),
        Divider(
          height: 1,
          color: Colors.grey.withOpacity(0.2),
          thickness: 1,
        ),
      ],
    );
  }

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

说明 #

1. 重叠处理：

   • 在SliverAppBar外层包裹SliverOverlapAbsorber，处理AppBar与下方内容的重叠
   • 在TabBar的SliverPersistentHeader外层同样包裹SliverOverlapAbsorber，因为TabBar是固定的，需要让下方滚动内容感知它的高度
   • 每个Tab的CustomScrollView中添加SliverOverlapInjector，将计算好的重叠偏移量应用到滚动视图，确保内容不会被TabBar或AppBar遮挡

2. 滚动位置保存：

   • 为每个Tab创建独立的ScrollController，替代单一全局控制器，确保每个Tab的滚动状态独立保存
   • 保留PageStorageKey作为辅助，配合独立控制器，双重保障滚动位置的持久化

内容的提问来源于stack exchange，提问作者dev2019