如何在Flutter的CustomScrollView中使用Stack嵌套Sliver组件

CustomScrollView的slivers数组要求所有子组件必须为Sliver类型（最终会生成RenderSliver渲染对象），你当前的_MainLayout返回普通Stack组件，属于RenderBox类型，不符合Viewport的子节点类型要求，所以触发断言报错。

根据你的Banner交互需求，有两种常用实现方式：

方案1：Banner固定不跟随列表滚动（无额外依赖） #

直接将Stack套在CustomScrollView外层即可，结构如下：

@override
Widget build(context) {
  return Stack(
    children: [
      CustomScrollView(
        slivers: [
          SliverAppBar(title: ...),
          SliverList(...), // 原列表逻辑直接放在slivers中
        ],
      ),
      // 此处放置Banner，用Positioned调整位置
      Positioned(
        top: 120,
        left: 16,
        right: 16,
        child: YourBannerComponent(),
      )
    ],
  );
}

方案2：Banner跟随列表一起滚动 #

如果需要Banner和列表保持相对位置、同步滚动，使用Sliver系列的Stack组件实现，推荐引入sliver_tools库的SliverStack组件，它本身是Sliver类型可直接放入slivers数组，同时保留Sliver的懒加载特性，代码结构如下：

@override
Widget build(context) {
  return CustomScrollView(
    slivers: [
      SliverAppBar(title: ...),
      _MainLayout(),
    ],
  );
}

class _MainLayout extends StatelessWidget {
  @override
  Widget build(context) {
    // 替换原有Stack为SliverStack
    return SliverStack(
      children: [
        SliverList(...),
        // 用SliverPositioned调整Banner位置
        SliverPositioned(
          top: 20,
          left: 16,
          child: YourBannerComponent(),
        )
      ],
    );
  }
}

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