如何在SliverAppBar与TabBar之间添加随滚动隐藏的Widget？

针对你需要将搜索栏、广告、按钮和TabBar与SliverAppBar一同滚动隐藏的需求，有两种实用的实现方案：

方案1：将所有组件整合到SliverAppBar的flexibleSpace中 #

SliverAppBar的flexibleSpace支持嵌套复杂布局，你可以把搜索栏、广告、按钮和TabBar全部放入其中，通过调整expandedHeight设置展开后的总高度，滚动时这些组件会和AppBar一起收起。

示例代码：

CustomScrollView(
  slivers: [
    SliverAppBar(
      expandedHeight: 280.0, // 调整为包含所有头部组件的总高度
      floating: false,
      pinned: true, // 固定顶部标题，滚动时下方组件收起
      flexibleSpace: FlexibleSpaceBar(
        title: const Text('首页'),
        background: Column(
          children: [
            // 搜索栏
            Container(
              padding: const EdgeInsets.symmetric(horizontal: 16, vertical: 8),
              child: TextField(
                decoration: InputDecoration(
                  hintText: '搜索',
                  border: OutlineInputBorder(
                    borderRadius: BorderRadius.circular(8),
                  ),
                ),
              ),
            ),
            // 广告组件
            Container(
              height: 100,
              color: Colors.blueAccent,
              child: const Center(child: Text('广告位')),
            ),
            // 操作按钮
            ElevatedButton(
              onPressed: () {},
              child: const Text('立即参与'),
            ),
            // TabBar
            const TabBar(
              tabs: [
                Tab(text: '推荐'),
                Tab(text: '热点'),
                Tab(text: '我的'),
              ],
            ),
          ],
        ),
      ),
    ),
    // 页面内容区域
    SliverFillRemaining(
      child: TabBarView(
        children: [
          Container(color: Colors.grey[200]),
          Container(color: Colors.grey[300]),
          Container(color: Colors.grey[400]),
        ],
      ),
    ),
  ],
)

关键说明：

• 若希望滚动时整个头部区域完全隐藏，可将pinned设为false，floating设为true；
• expandedHeight的值需根据你添加的组件总高度灵活调整，避免布局溢出。

方案2：用SliverPersistentHeader封装自定义头部 #

如果需要更精细的控制（比如让TabBar固定，其他组件滚动隐藏），可以通过自定义SliverPersistentHeaderDelegate来封装搜索栏、广告等组件，再和SliverAppBar配合使用。

步骤1：自定义Header Delegate #

class CustomHeaderDelegate extends SliverPersistentHeaderDelegate {
  @override
  double get minExtent => 50.0; // 收起后保留的高度（比如TabBar的高度）
  @override
  double get maxExtent => 280.0; // 展开后的总高度

  @override
  Widget build(BuildContext context, double shrinkOffset, bool overlapsContent) {
    // 计算收缩比例，用于控制组件的隐藏动画
    final shrinkRatio = shrinkOffset / (maxExtent - minExtent);
    
    return Container(
      color: Theme.of(context).primaryColor,
      child: Column(
        children: [
          // 搜索栏：随滚动逐渐隐藏
          Opacity(
            opacity: 1 - shrinkRatio,
            child: Container(
              padding: const EdgeInsets.symmetric(horizontal: 16, vertical: 8),
              child: TextField(
                decoration: InputDecoration(
                  hintText: '搜索',
                  border: OutlineInputBorder(
                    borderRadius: BorderRadius.circular(8),
                  ),
                ),
              ),
            ),
          ),
          // 广告组件：随滚动逐渐隐藏
          Opacity(
            opacity: 1 - shrinkRatio,
            child: Container(
              height: 100,
              color: Colors.blueAccent,
              child: const Center(child: Text('广告位')),
            ),
          ),
          // 操作按钮：随滚动逐渐隐藏
          Opacity(
            opacity: 1 - shrinkRatio,
            child: ElevatedButton(
              onPressed: () {},
              child: const Text('立即参与'),
            ),
          ),
          // TabBar：始终固定在顶部
          const TabBar(
            tabs: [
              Tab(text: '推荐'),
              Tab(text: '热点'),
              Tab(text: '我的'),
            ],
          ),
        ],
      ),
    );
  }

  @override
  bool shouldRebuild(covariant SliverPersistentHeaderDelegate oldDelegate) => true;
}

步骤2：在CustomScrollView中使用 #

CustomScrollView(
  slivers: [
    SliverAppBar(
      title: const Text('首页'),
      pinned: true,
      floating: false,
    ),
    SliverPersistentHeader(
      delegate: CustomHeaderDelegate(),
      pinned: true, // 固定TabBar区域
    ),
    // 页面内容区域
    SliverFillRemaining(
      child: TabBarView(
        children: [
          Container(color: Colors.grey[200]),
          Container(color: Colors.grey[300]),
          Container(color: Colors.grey[400]),
        ],
      ),
    ),
  ],
)

关键说明：

• 通过shrinkRatio可以实现组件的渐变隐藏效果，提升交互体验；
• 修改minExtent可以控制收起后保留的组件高度，满足不同的布局需求。

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