如何在 Flutter 中返回多个 sliver 小部件？答案

【问题标题】：How to return multiple sliver widgets in Flutter?如何在 Flutter 中返回多个 sliver 小部件？
【发布时间】：2021-09-05 21:34:06
【问题描述】：

我正在使用 Slivers 和 Provider 构建一个 Flutter 应用程序。

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

Loading 返回一个 SliverFillRemaining
Header 返回一个 SliverToBoxAdapter
已保存返回一个 SliverList
推荐返回 SliverList

基本上在我的应用程序中，SliverAppBar 始终显示。

现在根据模型的加载状态，需要渲染其余的 sliver 小部件。但我只能使用 return 一次，它不会呈现 Saved 和 Recommendation 小部件。

我该如何解决这个问题？如何返回 else 块中指定的所有 sliver 小部件？

【问题讨论】：

标签： flutter flutter-provider

【解决方案1】：

为了显示所有三个条子，您必须将 Consumer 小部件设为父小部件。看看下面的代码。

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

【讨论】：

在这种情况下，Sliver App Bar 在加载时不会显示。
是的，为了显示 appbar，您需要将 Loading 小部件包装在 Column 小部件中，并在 Loading 小部件上方添加自定义 appbar（不是 SliverAppbar）。

【解决方案2】：

我用过这个方便的包 - sliver_tools。

并像这样使用它

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

【讨论】：