Flutter中如何在CustomScrollView里返回多个Sliver组件？

问题原因 #

1. Dart语言中函数执行到第一个return语句就会直接终止，你写的后两个return逻辑完全不会触发。
2. Consumer的builder要求返回单个Widget，你无法在单个返回值里直接输出多个Sliver组件。

解决方案 #

这里提供两种可直接落地的写法，都可以满足SliverAppBar始终显示、加载完成后渲染所有指定Sliver的需求：

方案1（全版本兼容，更推荐）

把整个CustomScrollView放到Consumer内部，配合Dart集合展开语法直接拼接slivers数组：

Widget build(BuildContext context) {
  return Consumer<CustomerController>(
    builder: (context, model, child) {
      return CustomScrollView(
        slivers: [
          SliverAppBar(),
          if (model.loading) 
            Loading()
          else ...[
            Header(),
            Saved(),
            Recommendations(),
          ]
        ],
      );
    },
  );
}

不需要额外引入其他组件，逻辑直观可读性高，所有Flutter版本都支持。

方案2（适合Consumer必须放在slivers列表内的场景）

如果你不想改动现有代码结构，且Flutter版本在3.10以上，可以用SliverMainAxisGroup包裹多个Sliver组件，它本身是Sliver类型，可直接作为CustomScrollView的子元素：

Widget build(BuildContext context) {
  return CustomScrollView(
    slivers: [
      SliverAppBar(),
      Consumer<CustomerController>(
        builder: (context, model, child) {
          if (model.loading) {
            return Loading();
          } else {
            return SliverMainAxisGroup(
              slivers: [
                Header(),
                Saved(),
                Recommendations(),
              ],
            );
          }
        },
      ),
    ],
  );
}

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