Flutter开发：如何在SliverAppBar与SliverToBoxAdapter间添加新闻标题容器

问题核心是CustomScrollView的slivers数组只能接收Sliver类型组件，普通Container不属于Sliver组件，直接添加会报错。解决思路就是把新闻标题容器用SliverToBoxAdapter包裹，转换成Sliver类型后再放入列表。

基础实现代码示例 #

CustomScrollView(
  slivers: [
    // 原有的SliverAppBar
    SliverAppBar(
      title: const Text('新闻首页'),
      expandedHeight: 200,
      flexibleSpace: FlexibleSpaceBar(
        background: Image.network(
          'https://example.com/news_banner.jpg',
          fit: BoxFit.cover,
        ),
      ),
    ),
    // 用SliverToBoxAdapter包裹新闻标题容器
    SliverToBoxAdapter(
      child: Container(
        padding: const EdgeInsets.symmetric(horizontal: 16, vertical: 12),
        color: Colors.white,
        child: const Text(
          '今日头条：XX行业发布最新政策',
          style: TextStyle(fontSize: 18, fontWeight: FontWeight.bold),
        ),
      ),
    ),
    // 原有的SliverToBoxAdapter内容
    SliverToBoxAdapter(
      child: Container(
        height: 600,
        color: Colors.grey[200],
        child: const Center(child: Text('新闻列表内容区域')),
      ),
    ),
  ],
)

进阶：实现新闻标题吸顶效果 #

如果需要滚动时新闻标题固定在顶部，可以用SliverPersistentHeader代替SliverToBoxAdapter：

自定义Header代理类 #

class NewsTitleHeader extends SliverPersistentHeaderDelegate {
  @override
  Widget build(BuildContext context, double shrinkOffset, bool overlapsContent) {
    return Container(
      padding: const EdgeInsets.symmetric(horizontal: 16, vertical: 12),
      color: Colors.white,
      child: const Text(
        '今日头条：XX行业发布最新政策',
        style: TextStyle(fontSize: 18, fontWeight: FontWeight.bold),
      ),
    );
  }

  @override
  double get maxExtent => 50; // 标题容器的最大高度
  @override
  double get minExtent => 50; // 吸顶时的最小高度（和max一致则高度不变）
  @override
  bool shouldRebuild(covariant SliverPersistentHeaderDelegate oldDelegate) => false;
}

使用吸顶标题 #

CustomScrollView(
  slivers: [
    SliverAppBar(
      title: const Text('新闻首页'),
      expandedHeight: 200,
      flexibleSpace: FlexibleSpaceBar(
        background: Image.network(
          'https://example.com/news_banner.jpg',
          fit: BoxFit.cover,
        ),
      ),
    ),
    // 吸顶的新闻标题
    SliverPersistentHeader(
      delegate: NewsTitleHeader(),
      pinned: true, // 设置为true开启吸顶
    ),
    // 原有的新闻列表内容
    SliverList(
      delegate: SliverChildBuilderDelegate(
        (context, index) => ListTile(title: Text('新闻条目 ${index+1}')),
        childCount: 20,
      ),
    ),
  ],
)

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