在dart/flutter中处理系统后退按钮

Question

我最近刚开始学习Dart / Flutter，遇到了一个问题：android上的系统后退按钮没有返回到上一屏幕，而是关闭了应用程序。

当我在寻找创建嵌套页面的方法时，我编写了以下代码：

// settings_navigator.dart
class SettingsNavigator extends StatelessWidget {
  const SettingsNavigator({super.key});

  @override
  Widget build(BuildContext context) {
    return Navigator(
      onGenerateRoute: (settings) {
        switch (settings.name) {
          case '/notifications':
            return UnanimatedPageRoute(
              builder: (context) => const NotificationsScreen(),
            );
          
          default:
            return MaterialPageRoute(
              builder: (context) => const SettingsScreen(),
            );
        }
      },
    );
  }
}

这种方法是因为我想将底部菜单放置在所有屏幕上，但是，使用标准方法，它被嵌套页面重叠

在我的代码中，“default”负责父页面，“case '/notifications'”负责嵌套页面。

在“通知”子页面上，我有一个应用栏：

return AppBar(
      titleSpacing: 0,
      title: Padding(
        padding: const EdgeInsets.symmetric(horizontal: 12.0),
        child: Text(title),
      ),
      leading: IconButton(
        icon: const Icon(Icons.arrow_back),
        onPressed: () {
          Navigator.pop(context);
        },
      ),
    );

可以看到，这里使用的是Navigator.pop(context); 我尝试使用 PopScope，但它没有导致任何结果：

class SettingsNavigator extends StatelessWidget {
  const SettingsNavigator({super.key});

  @override
  Widget build(BuildContext context) {
    return PopScope(
      onPopInvokedWithResult: (didPop, result) {
        Navigator.pop(context);
      },
      child: Navigator(
        onGenerateRoute: (settings) {
          switch (settings.name) {
            case '/notifications':
              return UnanimatedPageRoute(
                builder: (context) => const NotificationsScreen(),
              );

            default:
              return MaterialPageRoute(
                builder: (context) => const SettingsScreen(),
              );
          }
        },
      ),
    );
  }
}

我认为这种行为与我的路由架构有关，但我没有在互联网上找到有意义的信息来逐步创建具有嵌套页面的应用程序。

Answer 1

首先，你必须在main.dart中描述所有路由。首先你必须创建路线。

Map<String, WidgetBuilder> routes() {
  return {
    'splash_screen': (context) => const SplashScreenView(),
    'menu_view': (context) => const MenuView(),
  };
}

Route<dynamic>? generateRoute(settings) {
  switch (settings.name) {
    case '/':
      return MaterialPageRoute(builder: (context) => const SplashScreenView());
    case '/splash_screen':
      return MaterialPageRoute(builder: (context) => const SplashScreenView());
    case '/menu_view':
      return MaterialPageRoute(
          builder: (context) => const MenuView());
    default:
      return MaterialPageRoute(builder: (context) => const SplashScreenView());
  }
}

然后在你的 main.dart 中，你可以像这样添加路由

MaterialApp(
        debugShowCheckedModeBanner: false,
        routes: routes(),
        onGenerateRoute: generateRoute,
        home: const SplashScreenView(),
      )

如果你想使用底部导航栏，你必须将导航底部页面的路线添加到路线中，并且可以在导航底部栏页面内添加导航底部栏的嵌套页面