Flutter 使用 provider

如何解决Flutter 使用 provider

我与提供商合作，但对某个问题有点困惑。当我点击页面上的按钮时，我想在导航栏上模拟一个动作。

示例：

我的导航栏由 3 个项目组成（菜单 1、菜单 2、菜单 3）。通过单击页面上的“转到菜单 2”按钮，我想让它看起来像我在单击导航栏。所以页面会发生变化，导航栏也会更新。 在我的示例中，我将使用 3 页使其更易于理解。 InitialElementScreen、InitialElementResultScreen、CorrectionsScreen。 InitialElementResultScreen 没有导航栏。

我的问题：

为此，我使用提供程序。当我在菜单页面上时，我设法完成了我的系统。例如，如果我将按钮放在 InitialElementScreen 页面上，那么我的系统将工作并带我到 CorrectionsScreen。 如果我的按钮位于 InitialElementResultScreen 页面上，则它不再起作用，该页面是使用 InitialElementScreen 中的 navigator.push 打开的页面。

这是我在 InitialElementScreen 上时的树结构：

我的应用屏幕：

class AppScreen extends StatelessWidget {
  const AppScreen({Key key}) : super(key: key);

  @override
  Widget build(BuildContext context) {

    return ChangeNotifierProvider<LicenseNotifier>(
      create: (_) => LicenseNotifier(),child: MaterialApp(
        title: AppConfig.APPLICATION_NAME,debugShowCheckedModeBanner: false,theme: AppTheme().data,initialRoute: AppRoutes.HOME,onGenerateRoute: RoutesClass.generate,),);
  }
}

我的路线类：

abstract class RoutesClass{

  static Route<dynamic> generate(RouteSettings settings){
    final args = settings.arguments;

    switch(settings.name){
      case AppRoutes.HOME :
        return MaterialPageRoute(
          builder: (context) => Consumer(
            builder: (context,LicenseNotifier license,_) {
              return license.selectHomeScreen();
            },);
      break;
}

My Widget selectHomeScreen 在我的 LicenseNotifier 中：

Widget selectHomeScreen()
  {
    switch (appState) {
      case AppState.Uninitialized:
        return SplashedScreen();
        break;
      case AppState.Authenticating:
      case AppState.Unauthenticated:
        return LicenseHomeScreen(title: "Activate the license");
        break;
      case AppState.Authenticated:
        return ChangeNotifierProvider<BottomNavigationBarNotifier>(
          create: (BuildContext context) => BottomNavigationBarNotifier(),child: NavigationBarScreen(),);
        break;
    }
    return null;
  }

我的导航栏屏幕：

class NavigationBarScreen extends StatelessWidget
{
  NavigationBarScreen({Key key}) : super(key: key);

  @override
  Widget build(BuildContext context) {
    var navigationProvider = Provider.of<BottomNavigationBarNotifier>(context);
    return SafeArea(
      child: Scaffold(
        body: navigationProvider.loadScreenWithNavigation(),bottomNavigationBar: BottomNavigationBar(
          currentIndex: navigationProvider.currentIndex,onTap: (index) {
            navigationProvider.navigationScreenIndex = index;
          },items: [
            BottomNavigationBarItem(
              icon: Icon(Icons.home),label: 'Menu 1',BottomNavigationBarItem(
              icon: Icon(Icons.calculate),label: 'Menu 2',BottomNavigationBarItem(
              icon: Icon(Icons.library_books_sharp),label: 'Menu 3',],);
  }
}

我的BottomNavigationBarNotifier：

class BottomNavigationBarNotifier with ChangeNotifier {

  int currentIndex = AppConfig.NAVIGATION_DEFAULT_INDEX;
  BottomNavigationBarNotifier();

  set navigationScreenIndex(int index) {
    currentIndex = index;
    notifyListeners();
  }

  Widget loadScreenWithNavigation()
  {
    switch (currentIndex)
    {
      case 0:
        return MultiProvider(
          providers: [
           ... some providers
          ],child: InitialElementScreen(title : 'Menu 1'),);
        break;

      case 1:
        return CorrectionsScreen(title: 'Menu 2')
        break;

      case 2:
        return TableHomeScreen(title: 'Menu 3');
        break;

      default:
        return InitialElementScreen(title : 'Menu 1');
        break;
    }
  }
}

因此，如果“转到菜单 2”按钮在我的 InitialElementScreen 中，它就可以工作。按钮代码：

var _formProvider = Provider.of<BottomNavigationBarNotifier>(context,listen: false);
    _formProvider.navigationScreenIndex = 1;
    notifyListeners();

现在我希望我的“转到菜单 2”按钮位于菜单 1 的子页面中，所以我将在我的 InitialElementScreen 中有一个按钮来打开我的 InitialElementResultScreen 页面：

await Navigator.pushNamed(context,AppRoutes.RESULT,arguments: jsonEncode(data.toMap()));

现在仍在我的 RouteClass 文件中，我添加此代码以加载我的 InitialElementResultScreen 页面：

case AppRoutes.RESULT:
        var data = settings.arguments as String;
        return MaterialPageRoute(
          builder: (context) => Consumer(
            builder: (context,_) {
              return ChangeNotifierProvider<BottomNavigationBarNotifier>(
                create: (BuildContext context) => BottomNavigationBarNotifier(),child: ChangeNotifierProvider<InitialCalculatorResultNotifier>(
                  create: (BuildContext context) => InitialCalculatorResultNotifier(),child: InitialElementResultScreen(title: "Sub Menu 1",data: data),);
            },);
        break;

当我在菜单 1 的子页面 InitialElementResultScreen 上时，这是我的树结构：

如果我将“转到菜单 2”按钮放回 InitialElementResultScreen 页面，它将不再起作用...我返回菜单 1 页面，InitialElementScreen，为什么？

我的按钮代码“转到菜单 2” 与上面显示的 Navigator.pop 相同：

var _formProvider = Provider.of<BottomNavigationBarNotifier>(context,listen: false);
    _formProvider.navigationScreenIndex = 1;
    notifyListeners();
    Navigator.pop(context);

编辑：我解决了我的问题！ 据我了解，使用 navigator.push 打开的二级页面在 MaterialApp Widget 下打开。所以我把我的 BottomNavigationBarNotifier 移到了上面。

class AppScreen extends StatelessWidget {
  const AppScreen({Key key}) : super(key: key);

  @override
  Widget build(BuildContext context) {

    return ChangeNotifierProvider<LicenseNotifier>(
      create: (_) => LicenseNotifier(),child: ChangeNotifierProvider<BottomNavigationBarNotifier>(
        create: (BuildContext context) => BottomNavigationBarNotifier(),child: MaterialApp(
          title: AppConfig.APPLICATION_NAME,)
    );
  }
}