在颤动中使用 BLoC 模式进行堆栈答案

【问题标题】：Stack using BLoC pattern in flutter在颤动中使用 BLoC 模式进行堆栈
【发布时间】：2020-01-31 19:51:45
【问题描述】：

我有一个可用的登录页面。我在颤振中使用 BLoC 模式。我想要实现的是切换加载屏幕覆盖，我有使用堆栈的代码。

下面是我的构建方法

    _loginBloc.loginController.stream.listen((event)=>{
      Navigator.of(context).push(MaterialPageRoute(builder: (context) => HomePage()))
    });

    return Scaffold(
      backgroundColor: Theme.of(context).backgroundColor,
      appBar: buildAppBar(context, "", isSearchView: false, showHome: false, elevation: 0.0),
      body: StreamBuilder<String>(
          stream: _loginBloc.processingController.stream,
          builder: (context, processingSnapshot) {
            return Stack(
              children: <Widget>[
                SingleChildScrollView(...),
                if (processingSnapshot.hasData){  // <-- This is giving me an error
                  return Text("Loading overlay goes here");
                }
              ],
            );
          }
      )
    );

【问题讨论】：

标签： flutter bloc

【解决方案1】：

你不能在小部件内部这样做

if (processingSnapshot.hasData){  // <-- This is giving me an error
   return Text("Loading overlay goes here");
}

尝试像这样移动加载小部件

builder: (context, processingSnapshot) {
  if (!processingSnapshot.hasData){  // <-- This is giving me an error
     return Text("Loading overlay goes here");
  }
  return Stack(
    children: <Widget>[
      SingleChildScrollView(...),
    ],
  );
}

编辑：我们还需要查看错误。

【讨论】：

【解决方案2】：

试试这个：

builder: (BuildContext context, processingSnapshot) {
        switch (processingSnapshot.connectionState) {
          case ConnectionState.active:
          case ConnectionState.done:
            if (processingSnapshot.hasData) {
              return Home(firebaseUser: snapshot.data);
            } else {
              return CircularProgressIndicator();
            }
            break;
          default:
            return CircularProgressIndicator();
        }
      },

【讨论】：

我想要一个 Stack 实现，这样我仍然可以在后台看到表单。不过这很好用。谢谢

【解决方案3】：

我想通了。解决方法是将小部件包装在可见性小部件中，而不是将其放在 if 语句中。

代码如下所示

return Scaffold(
      backgroundColor: Theme.of(context).backgroundColor,
      appBar: buildAppBar(context, "", isSearchView: false, showHome: false, elevation: 0.0),
      body: StreamBuilder<String>(
          stream: _loginBloc.processingController.stream,
          builder: (context, processingSnapshot) {
            return Stack(
              children: <Widget>[
                ListView(...),
                Visibility(
                  visible: processingSnapshot.hasData,
                  child: FullPageLoading(),
                )
              ],
            );
          }
      )
    );

这样，覆盖屏幕的可见性会根据流是否具有有效值（任何字符串）来切换。

FullPageLoading 也具有不透明度，因此我仍然可以在后台看到表单，这就是我选择使用堆栈的原因

【讨论】：