时间戳

首页 > 解决方案 > 为什么 Flutter Navigator 2.0 API 不能与 flutter_bloc 一起使用？

flutter - 为什么 Flutter Navigator 2.0 API 不能与 flutter_bloc 一起使用？

问题描述

我正在尝试通过 BLoC（flutter_bloc 6.1.1）提供页面来进行导航。

主要飞镖：

class MyApp extends StatelessWidget {

  List<MaterialPage> _pages = [
    MaterialPage( key: ValueKey('Page1'), child: Page1() ),
  ];

  // This widget is the root of your application.
  @override
  Widget build(BuildContext context) {
    return MaterialApp(
      title: 'Flutter Demo',
      theme: ThemeData(
        primarySwatch: Colors.blue,
        visualDensity: VisualDensity.adaptivePlatformDensity,
      ),

      home: BlocProvider(
        create: (BuildContext context) => NavCubit(),

        // WHY PAGES NOT UPDATES HERE FROM BLoC?????
        child: BlocListener<NavCubit, NavState>(
          listener: (context, state) {
            _pages = state.pages;
          },
          child: Navigator(
            pages: _pages,
            onPopPage: (route, result) {
              if ( !route.didPop(result) ) {
                return false;
              }
              return true;
            },
          )
        )

      ),

    );
  }
}

第一页（第 1 页）有一个按钮，单击该按钮应导航到第二页（第 2 页）

class Page1 extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    return BlocProvider(
      create: (context) => NavCubit(),
      child: Scaffold(
        appBar: AppBar( title: Text('Page 1') ),

        body: Center(
            child: Column(
              mainAxisAlignment: MainAxisAlignment.center,
              children: [
                Text("page 11111111111"),
                RaisedButton(
                  child: Text('Go to: Page 2', style: TextStyle(fontSize: 20)),
                  onPressed: () {
                    print("goto page2 btn");
                    context.read<NavCubit>().navigateTo();
                  },
                ),
              ],
            )
        ),

      ),
    );

  }
}


class NavCubit extends Cubit<NavState> {
  ...

  void navigateTo() {
    final navState = NavState([MaterialPage( key: ValueKey('Page2'), child: Page2() )]);
    debugPrint(navState.toString());

    emit(navState);
  }

}

但它不会发生！

据我所知，BLoC 状态更新得很好。但是画面没有变化...

请参阅：

这是我的完整测试项目：https ://github.com/morfair/flutter_test_app/tree/master/lib

标签： flutterdartflutter-navigationflutter-bloc

解决方案

在 Page1 中，您正在创建另一个NavCubit. BlocProvider因此，您总共有 2 个 NavCubit。因此，当您调用 时context.read<NavCubit>.navigateTo()，您是在错误的 NavCubit 上调用此方法。尝试在 Page1 构建方法中删除 BlocProvider 中创建的第二个 cubit。

推荐阅读