如何在Flutter中返回多个sliver widget？

Question

我正在使用 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
• Saved返回一个SliverList
• 推荐返回SliverList

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

现在根据模型的加载状态，需要渲染其余的条子小部件。但我只能使用一次返回，这不会呈现“已保存”和“推荐”小部件。

如何解决这个问题？如何返回

else

块中指定的所有条子小部件？

Answer 1

我已经使用了这个方便的软件包 - 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(),
              ],
            };
          }
        },
      ),
    ],
  );
}

Answer 2

不需要软件包，有一个小部件：

SliverMainAxisGroup

将多个条子子项放置在线性阵列中的条子 主轴，一个接一个。

所以在你的情况下是：

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(),
              ];
            );
          }
        },
      ),
    ],
  );
}

Answer 3

为了显示所有三个条子，您必须将

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(),
          ]);
        }
      },
    );
  }