Flutter切换Tab时如何让SliverPinnedHeader下方内容始终从首项开始

问题场景 #

使用CustomScrollView结合sliver_tools的SliverPinnedHeader实现Tab切换布局：顶部是固定数量的列表，中间是固定在顶部的Tab栏，切换Tab后下方显示对应长度的列表内容。

期望效果 #

切换Tab时，下方的列表内容始终从第一个元素开始显示。

当前问题 #

在内容最长的Tab（如Tab1的30个ListTile）滚动到底部后，切换到其他Tab（如Tab2的20个ListTile），新Tab的内容会从中间位置开始显示，而非首项。

解决思路 #

通过ScrollController控制滚动位置，在切换Tab后，将滚动位置重置到SliverPinnedHeader的底部（即新Tab内容的起始位置）。具体步骤：

• 给CustomScrollView绑定ScrollController，用于手动控制滚动行为
• 给SliverPinnedHeader的容器设置GlobalKey，用于获取其布局位置信息
• 切换Tab时，在布局更新完成后，计算SliverPinnedHeader的底部坐标，将滚动位置跳转至该坐标

修改后的完整代码 #

import 'package:flutter/material.dart';
import 'package:flutter/scheduler.dart';
import 'package:sliver_tools/sliver_tools.dart';

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

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

  @override
  Widget build(BuildContext context) {
    return const MaterialApp(home: HomePage());
  }
}

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

  @override
  State<HomePage> createState() => _HomePageState();
}

class _HomePageState extends State<HomePage> {
  int active = 1;
  final ScrollController _scrollController = ScrollController();
  final GlobalKey _pinnedHeaderKey = GlobalKey();

  void _switchTab(int tabIndex) {
    setState(() {
      active = tabIndex;
    });
    // 布局更新完成后调整滚动位置
    SchedulerBinding.instance.addPostFrameCallback((_) {
      if (_pinnedHeaderKey.currentContext == null) return;
      
      final renderBox = _pinnedHeaderKey.currentContext!.findRenderObject() as RenderBox;
      final headerGlobalOffset = renderBox.localToGlobal(Offset.zero);
      // 计算PinnedHeader底部的滚动偏移量
      final targetOffset = headerGlobalOffset.dy + renderBox.size.height;
      
      // 如果当前滚动位置超过目标位置，跳转过去
      if (_scrollController.offset > targetOffset) {
        _scrollController.jumpTo(targetOffset);
      }
    });
  }

  @override
  Widget build(BuildContext context) {
    return Scaffold(
      appBar: AppBar(title: const Text('App bar')),
      body: CustomScrollView(
        controller: _scrollController,
        slivers: [
          SliverList(
            delegate: SliverChildBuilderDelegate(
              (context, index) => ListTile(leading: Text(index.toString())),
              childCount: 10,
            ),
          ),
          SliverPinnedHeader(
            child: Container(
              key: _pinnedHeaderKey,
              padding: const EdgeInsets.all(10),
              color: Colors.grey,
              child: Row(
                children: [
                  GestureDetector(
                    onTap: () => _switchTab(1),
                    child: Container(
                      decoration: BoxDecoration(
                        border: Border.all(width: 2, color: const Color(0xFF2F2F2F)),
                        color: active == 1 ? const Color(0xFF2F2F2F) : null,
                      ),
                      padding: const EdgeInsets.all(10),
                      child: Text('1', style: TextStyle(color: active == 1 ? Colors.white : null)),
                    ),
                  ),
                  const SizedBox(width: 10),
                  GestureDetector(
                    onTap: () => _switchTab(2),
                    child: Container(
                      decoration: BoxDecoration(
                        border: Border.all(width: 2, color: const Color(0xFF2F2F2F)),
                        color: active == 2 ? const Color(0xFF2F2F2F) : null,
                      ),
                      padding: const EdgeInsets.all(10),
                      child: Text('2', style: TextStyle(color: active == 2 ? Colors.white : null)),
                    ),
                  ),
                ],
              ),
            ),
          ),
          if (active == 1)
            SliverList(
              delegate: SliverChildBuilderDelegate(
                (_, index) => ListTile(leading: Text(index.toString())),
                childCount: 30,
              ),
            ),
          if (active == 2)
            SliverList(
              delegate: SliverChildBuilderDelegate(
                (_, index) => ListTile(leading: Text(index.toString())),
                childCount: 20,
              ),
            ),
        ],
      ),
    );
  }
}

代码说明 #

1. ScrollController：绑定到CustomScrollView，用于手动控制滚动位置
2. GlobalKey：标记SliverPinnedHeader的容器，用于获取其在屏幕中的位置信息
3. PostFrameCallback：在Widget布局更新完成后执行滚动调整，确保能正确获取到SliverPinnedHeader的布局参数
4. 滚动位置计算：通过RenderBox获取SliverPinnedHeader的底部坐标，将滚动位置跳转至该位置，保证新Tab内容从顶部开始显示

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