如何在SliverAppBar和SliverList/Grid之间添加额外的Widget？

你遇到的报错原因是CustomScrollView的slivers数组只能接收Sliver家族组件，普通Row、Container等非Sliver组件直接放入会触发布局异常，你需要的桥接组件是SliverToBoxAdapter。

核心用法 #

将你需要插入的普通组件（比如你要用的Row）用SliverToBoxAdapter包裹，即可直接插入到SliverAppBar和SliverList之间，示例代码如下：

CustomScrollView(
  slivers: [
    // 原有SliverAppBar
    SliverAppBar(
      title: const Text("演示页面"),
      expandedHeight: 200,
      floating: false,
      pinned: true,
    ),
    // 插入需要的Row组件，用SliverToBoxAdapter桥接
    SliverToBoxAdapter(
      child: Container(
        color: Colors.grey[200],
        padding: const EdgeInsets.symmetric(vertical: 12),
        child: Row(
          mainAxisAlignment: MainAxisAlignment.spaceAround,
          children: const [
            Text("选项A"),
            Text("选项B"),
            Text("选项C"),
          ],
        ),
      ),
    ),
    // 原有SliverList
    SliverList(
      delegate: SliverChildBuilderDelegate(
        (context, index) => ListTile(title: Text("列表项 $index")),
        childCount: 30,
      ),
    )
  ],
)

其他常用同类Sliver容器组件 #

• 如果你只需要加固定间隔：可以直接使用SliverSizedBox，是SizedBox的Sliver适配版本，不需要额外嵌套
• 如果你需要给插入的组件加内边距：可以直接给SliverToBoxAdapter的child套Padding，也可以用SliverPadding包裹SliverToBoxAdapter，两种实现效果一致

SliverToBoxAdapter的本质是将普通盒式布局组件适配为符合Sliver布局协议的组件，所有不需要跟随滚动复用的静态组件都可以通过它插入到Sliver序列中。

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