使用 BLoC 处理导航的正确方法

2024-01-25

大家好,我正在使用 BLoC 来开发我目前正在开发的应用程序,但在某些情况下我一无所知,例如当您登录时触发 API 调用并自然等待结果时,我会发送加载状态并显示加载程序,但之后 这完成了如何处理例如导航到不同的屏幕。 我目前有这样的事情

typedef void LoginSuccessCallback();
    class LoginBloc(){
    LoginBloc(Api this.api,LoginSuccessCallback loginSuccesCallback){
      _login.switchMap((ev) => api.login(ev.payload.email,ev.payload.password)).listen((_) => loginSuccessCallback);
     }
    }

但我确信有更干净的方法来处理这个问题,我尝试搜索一些具有类似内容但找不到任何内容的样本。


编辑:使用此解决方案几个月后,我注意到它存在一些问题:

  1. Android 硬件后退按钮不起作用
  2. 当您切换“检查”模式时,应用程序将重置。
  3. 无法进行过渡
  4. 不保证不显示禁止路线

所以我不再推荐使用这种方法!


对于正常的用户启动的导航,您根本不需要 BLoC 模式。只需使用Navigator.

登录是一种特殊情况。遵循 BLoC 模式,提供一个isAuthenticated stream:

abstract class MyBloc {
  Stream<bool> get isAuthenticated;
}

您的应用程序可能有 2 种不同的命名路由树:一种用于登录用户,一种用于匿名用户:

final Map<String, WidgetBuilder> anonymousRoutes = {
  '/': (context) => new LoginScreen(), // default for anon
  '/register': (context) => new RegisterScreen(),
};

final Map<String, WidgetBuilder> authenticatedRoutes = {
  '/': (context) => new HomeScreen(), // default for logged in
  '/savings': (context) => new SavingsScreen(),
  // ...
};

通常情况下Navigator并且它的命名路由与MaterialApp,但您也可以定义自己的,当isAuthenticated流已更新:

class MyApp extends StatelessWidget {
  const MyApp({Key key, this.bloc}) : super(key: key);

  final MyBloc bloc;

  @override
  Widget build(BuildContext context) {
    return MaterialApp(
      builder: (BuildContext context, Widget child) {
        return StreamBuilder<bool>(
          stream: bloc.isAuthenticated,
          builder: (BuildContext context, AsyncSnapshot<bool> snapshot) {
            if (!snapshot.hasData) {
              return Text('loading...');
            }

            bool isAuthenticated = snapshot.data;
            return _buildNavigator(isAuthenticated);
          },
        );
      },
    );
  }
}

Navigator _buildNavigator(bool isAuthenticated) {
  // different route tree and different default route depending on auth state
  final routes = isAuthenticated ? authenticatedRoutes : anonymousRoutes;

  return Navigator(
    key: new ValueKey(isAuthenticated),
    onGenerateRoute: (RouteSettings settings) {
      final name = settings.name;
      return new MaterialPageRoute(
        builder: routes[name],
        settings: settings,
      );
    },
    onUnknownRoute: (RouteSettings settings) {
      throw Exception('unknown route');
    },
  );
}

现在可悲了(2018-07-14)有 2 个相互矛盾的断言 https://github.com/flutter/flutter/issues/18904在 Flutter 代码中,您必须删除该代码才能使上面的代码正常工作(您可以使用 IDE 对其进行编辑):

93号线和96号线packages\flutter\lib\src\widgets\app.dart

//assert(navigatorObservers != null),
//assert(onGenerateRoute != null || navigatorObservers == const <NavigatorObserver>[]),
本文内容由网友自发贡献,版权归原作者所有,本站不承担相应法律责任。如您发现有涉嫌抄袭侵权的内容,请联系:hwhale#tublm.com(使用前将#替换为@)

使用 BLoC 处理导航的正确方法 的相关文章

随机推荐

  • 为什么在图像和 CSS 文件之后查询字符串?

    我在各个网站上看到过一个查询字符串 后面跟着一个图像和 CSS 文件的数字 当我查看源代码 通过 Chrome Developer 时 缓存的 css 文件和图像的名称中没有查询字符串中的数字 我还在网站上看到 当我刷新页面时 查询字符串中
  • 从可迭代的乘积中创建 Pandas MultiIndex?

    当我有两个或多个可迭代对象时 我有一个实用程序函数用于创建 Pandas MultiIndex 并且我想要为这些可迭代对象中的值的每个唯一配对提供一个索引键 看起来像这样 import pandas as pd import itertoo
  • 在javascript中将字符串数组转换为名称/值对象

    我目前正在处理一个向客户端返回字符串数组的 Web 服务 从这里我想获取这个字符串数组并将其转换为一个对象 该对象为每个字符串提供一个名称 以便稍后引用它 所以从这个开始 var result test hello goodbye 我想以此
  • .Net Windows 应用程序 WebBrowser / Google 地图 API v3

    我正在开发一个应用程序 用户可以在其中输入所需的地址 然后按按钮 该地址可以在WebBrowser net windows 应用程序中的控制 我知道你可以运行 javascriptWebBrowser通过使用WebBrowser1 Docu
  • 获取git命令列表

    我想为每个 git 命令创建一个别名 由于它们有很多 我想将它们放在一个列表中 然后在我的循环中循环 bashrc 有什么办法可以将它们写入 shell 脚本中吗 你可以试试这个 git help a 或者 您的 git 命令列在
  • Spring AOP Aspect 无法使用 Mockito 工作

    我有一个 Aspect它编织了我所有控制器操作方法的执行 当我运行系统时它工作得很好 但在单元测试中却不行 我按以下方式使用 Mockito 和 junit RunWith SpringJUnit4ClassRunner class Con
  • asp.net mvc url 路由

    如何映射诸如domain com 用户名之类的内容 问题是我认为 MVC 路由会寻找控制器来确定它应该如何处理映射请求 我对 ASP NET MVC 还很陌生 然而 根据迄今为止的教程 路由机制似乎相当僵化 它实际上非常灵活 我想如果您有更
  • 在 Typescript 中选择材质 UI

    我使用 Material UI select 创建了一个下拉菜单 它说 搜索依据 当我们点击它时 它会给我们一个列表 当我选择其中一个选项时 我想存储该选项并将 搜索依据 更改为所选选项 export default function Us
  • 销毁免费墙实例

    我正在使用jquery Freewall 插件 http vnjs net www project freewall 我想知道如何销毁它的一个实例 我写了一个小例子供大家理解 var startFreewall function funct
  • 将数据从一个子布局发送到 sitecore 中的另一个子布局

    我很难在 Sitecore 7 中构建过滤系统 我有 2 个子布局 位于页面的同一级别 子布局 A 是一个侧边栏 其中包含复选框列表 并具有一个用所选值填充列表的事件 子布局 B 显示一组项目 我想做的是将填充的列表从子布局 A 发送到子布
  • 在 proto 中从父文件夹导入到子文件夹

    我正在尝试将原型 defn 从父原型导入到具有以下文件夹结构的子原型中 parent proto sub child proto 父级 proto message Attribute 子原型 import parent proto mess
  • 在一列上使用 unique 并在另一列上执行 order by 会产生错误

    我有一张桌子 abc test 包含 n num k str 列 此查询不起作用 select distinct n num from abc test order by k str 但这有效 select n num from abc t
  • 请逐步解释递归[关闭]

    Closed 这个问题需要调试细节 help minimal reproducible example 目前不接受答案 请逐步解释递归 public class TestClass private static void printit i
  • 成功安装 Python 自制程序后,运行“pip”会出现“找不到命令”

    前言 我对终端很不好 请耐心等待 当我跑步时pip我得到 zsh command not found pip 我已经安装了带有brew的Python 2 7 11 这应该允许pip工作 当我跑步时echo PATH I get usr lo
  • 如何判断一个点是否在一组区间内?

    我正在寻找最快的方法来确定线上的点是否在该线的子集中 我得到了一个整数 Point 并且我还有一个 列表 点 用整数表示 3 10 1000 等 间隔 我用 2 个整数表示 2 10 是从 2 到 10 的所有整数 50 60 等 在此示例
  • Android 图像视图矩阵缩放 + 平移

    我正在尝试手动获取以图像视图为中心并适合屏幕的图像 我需要用矩阵来完成 稍后我将动态更改矩阵变换 问题是我无法使图像在视图中居中 比例合适 这是代码 Compute the scale to choose this works float
  • npm 安装错误:rollbackFailedOptional:命令 npm install --save-dev @babel/core @babel/cli 的动词 npm-session a0d68

    当我尝试安装 babel 时 我不断收到此错误 rollbackFailedOptional verb npm session a0d68 节点版本为12 16 1 npm 版本是 6 13 4 我只是想安装 babel 并探索它是如何工作
  • 在 Laravel 中使用 number_format 方法

    我对 Laravel 和 Blade 模板相当陌生 谁能帮我展示如何做到这一点 我有这样的看法 foreach Expenses as Expense tr td Expense gt type td td Expense gt narra
  • 如何在命名空间范围内前向声明 constexpr 对象?

    在 clang 主干 上 我可以转发声明一个对象 稍后将用constexpr如下 Fwd declarations struct S extern const S s later definitions struct S constexpr
  • 使用 BLoC 处理导航的正确方法

    大家好 我正在使用 BLoC 来开发我目前正在开发的应用程序 但在某些情况下我一无所知 例如当您登录时触发 API 调用并自然等待结果时 我会发送加载状态并显示加载程序 但之后 这完成了如何处理例如导航到不同的屏幕 我目前有这样的事情 ty