时间戳

首页 > 解决方案 > 用于导航流的 Flutter Bloc

dart - 用于导航流的 Flutter Bloc

问题描述

我开始使用 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),
      ));
    });

标签： dartflutter

解决方案

我目前正在做的是：

  1. 在构造函数中注册一个NavigatorBloc接收 aNavigatorState并接收操作以导航到您的应用程序中的不同页面 Ex: 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();
    }
  }
}

希望它有所帮助。

推荐阅读