如何在用户滚动到指定位置时为SliverAppBar添加TabBar

要实现滚动到指定位置时在SliverAppBar底部显示TabBar，核心思路是通过滚动控制器监听滚动位置，动态控制TabBar的显示状态，具体步骤如下：

1. 定义滚动控制器与状态变量 #

在你的State类中添加滚动控制器和控制TabBar显示的布尔变量，同时设置触发TabBar显示的滚动阈值：

late ScrollController _scrollController;
bool _showTabBar = false;
// 滚动超过这个距离就显示TabBar，可根据需求调整
final double _triggerOffset = 200.0;

2. 初始化并监听滚动事件 #

在initState中初始化控制器，添加滚动监听逻辑，判断滚动位置是否达到触发阈值：

@override
void initState() {
  super.initState();
  _scrollController = ScrollController()
    ..addListener(() {
      // 滚动到阈值以上且未显示TabBar时，切换显示状态
      if (_scrollController.offset >= _triggerOffset && !_showTabBar) {
        setState(() => _showTabBar = true);
      }
      // 滚动回阈值以下且已显示TabBar时，隐藏TabBar
      else if (_scrollController.offset < _triggerOffset && _showTabBar) {
        setState(() => _showTabBar = false);
      }
    });
}

@override
void dispose() {
  _scrollController.dispose();
  super.dispose();
}

3. 修改SliverAppBar添加动态TabBar #

将TabBar放在SliverAppBar的bottom属性中，根据_showTabBar状态动态切换显示，同时用AnimatedSize实现平滑过渡动画：

SliverAppBar(
  expandedHeight: 100.w,
  pinned: true,
  stretch: true,
  // 动态显示/隐藏TabBar，添加过渡动画
  bottom: _showTabBar
      ? AnimatedSize(
          duration: const Duration(milliseconds: 300),
          child: TabBar(
            tabs: const [
              Tab(text: '分类A'),
              Tab(text: '分类B'),
              Tab(text: '分类C'),
            ],
            // 如果需要实现Tab切换内容，需创建TabController并绑定
            // controller: _tabController,
          ),
        )
      : null,
  flexibleSpace: FlexibleSpaceBar(
    centerTitle: false,
    title: Text(category.categoryTitle),
    background: AspectRatio(
      aspectRatio: 1 / 1,
      child: Hero(
        tag: category.categoryId,
        child: Image.network(
          category.categoryImage,
          fit: BoxFit.cover,
          errorBuilder: (_, __, ___) => const SizedBox(),
        ),
      ),
    ),
  ),
),

4. 给CustomScrollView绑定控制器 #

最后把滚动控制器赋值给CustomScrollView，让它能监听滚动事件：

CustomScrollView(
  controller: _scrollController,
  slivers: <Widget>[
    // 上面修改后的SliverAppBar
    // ...
    SliverList(
      delegate: SliverChildListDelegate(
        [
          Container(height: 100.h),
        ],
      ),
    ),
  ],
),

补充：实现Tab切换内容 #

如果需要点击Tab切换对应内容，可以添加TabController，并在CustomScrollView中加入SliverFillRemaining包裹TabBarView：

1. 定义TabController：

late TabController _tabController;

@override
void initState() {
  super.initState();
  _tabController = TabController(length: 3, vsync: this);
  // 原有的滚动监听代码...
}

@override
void dispose() {
  _tabController.dispose();
  // 原有的控制器销毁代码...
}

2. 修改TabBar绑定控制器，并添加TabBarView：

// SliverAppBar中的TabBar添加controller
TabBar(
  controller: _tabController,
  tabs: const [/*...*/],
),

// 在SliverList之后添加：
SliverFillRemaining(
  child: TabBarView(
    controller: _tabController,
    children: const [
      Center(child: Text('分类A内容')),
      Center(child: Text('分类B内容')),
      Center(child: Text('分类C内容')),
    ],
  ),
),

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