Question

我有一个正常的登录页面。我在扑打中使用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");
                }
              ],
            );
          }
      )
    );

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

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

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

Answer 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也具有不透明度，因此我仍然可以在后台看到表单，这就是为什么我选择使用堆栈

在颤振中使用BLoC模式进行堆叠

3 个答案: