dart - 用于导航流的 Flutter Bloc

Question

我开始使用 BLoC 模式，但我有一个问题:

1) 你应该使用 BloC 模式来确定路由是否应该改变？示例:身份验证对象更改为 unauthenticated，因此监听器应处理路由更改。

2) BLoC 模式是否应该只用于 UI 状态并处理 UI 更改时的路由更改？示例:用户点击 login 并导航到 home 屏幕。

我问这个问题是因为我面临一个没有中央导航管理解决方案的问题。

此代码现在在我的 BLoC 中:

loggedIn.listen((AuthResponse user) {
      currentUserSubject.add(user);
      Navigator.pushReplacement(
        _context,
        PageRouteBuilder(
          pageBuilder: (context, animation1, animation2) {
            return HomePage();
          },
          transitionsBuilder: (context, animation, _, child) {
            return new SlideTransition(
              child: child,
              position: new Tween<Offset>(
                begin: const Offset(0.0, 1.0),
                end: Offset.zero,
              ).animate(animation),
            );
          },
          transitionDuration: Duration(milliseconds: 400),
        ),
      );
    }, onError: (error) {
      Scaffold.of(_context).showSnackBar(new SnackBar(
        content: new Text(error.message),
      ));
    });

Answer 1

我目前正在做的是:

1. 注册一个 NavigatorBloc 在构造函数中接收 NavigatorState 并接收操作以导航到应用程序中的不同页面 例如:GoToHomePageAction，GoToRegisterPageAction, NavigatorActionPop.

在您的 App 小部件中注册 NavigatorBloc 并提供附加到 MaterialApp 小部件的导航键。

@override
  Widget build(BuildContext context) {
    return BlocProvider<NavigatorBloc>(
      bloc: NavigatorBloc(navigatorKey: widget.navigatorKey),
      child: MaterialApp(
        navigatorKey: widget.navigatorKey,
        title: 'Medicine Tracker',
        theme: ThemeData(
            primarySwatch: Colors.red,
            scaffoldBackgroundColor: Colors.white
        ),
        home: HomePage(),
      ),
    );
  }

然后在您的 NavigatorBloc 中，您只需检查操作并导航到所需的页面:

class NavigatorBloc extends Bloc<NavigatorAction, dynamic>{
  final GlobalKey<NavigatorState> navigatorKey;
  NavigatorBloc({this.navigatorKey});

  @override
  dynamic get initialState => 0;

  @override
  Stream<dynamic> mapEventToState(NavigatorAction event) async* {
    if(event is NavigatorActionPop){
      yield navigatorKey.currentState.pop();
    }
  }
}

希望对您有所帮助。