Android 后退按钮无法与 Flutter 选项卡内的导航器一起使用

Question

我需要在每个选项卡内都有一个导航器，因此当我推送一个新的小部件时，选项卡栏会一直显示在屏幕上。该代码运行良好，但 android 后退按钮关闭应用程序而不是运行 Navigator.pop()

import 'package:flutter/material.dart';

void main() {
  runApp(const TabBarDemo());
}

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

  @override
  Widget build(BuildContext context) {
    return MaterialApp(
      home: DefaultTabController(
        length: 1,
        child: Scaffold(
          bottomNavigationBar: const BottomAppBar(
            color: Colors.black,
            child: TabBar(
              tabs: [
                Tab(icon: Icon(Icons.directions_car)),
              ],
            ),
          ),
          body: TabBarView(
            children: [
              Navigator(
                onGenerateRoute: (settings) {
                  return MaterialPageRoute(
                    builder: (context) => IconButton(
                        icon: Icon(Icons.directions_car),
                        onPressed: () => Navigator.of(context).push(
                            MaterialPageRoute(
                                builder: (context) => newPage()))),
                  );
                },
              ),
            ],
          ),
        ),
      ),
    );
  }
}

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

  @override
  Widget build(BuildContext context) {
    return Scaffold(
      appBar: AppBar(
        title: Text("new page"),
      ),
      body: Center(child: Icon(Icons.add)),
    );
  }
}

代码也可用 here 但在 dartpad 上你无法测试 android 后退按钮。

Answer 1

首先你应该为你的导航器创建一个密钥

final GlobalKey<NavigatorState> homeNavigatorKey = GlobalKey();

然后将此键添加到您的导航器

Navigator(
      key: homeNavigatorKey,

然后将您的 Navigator 包装在 WillPopScope 小部件中并添加 onWillPop 如下

child: WillPopScope(
    onWillPop: () async {
      return !(await homeNavigatorKey.currentState!.maybePop());
    },
    child: Navigator(
      key: homeNavigatorKey,

这将检查 navigatorKey 是否可以弹出路由，如果是，它只会弹出这条路由，如果不能，它会自行弹出，从而关闭应用程序

Android 后退按钮无法与 Flutter 选项卡内的导航器一起使用

Android back button not working with navigators inside tabs on Flutter

navigation

tabs

android

flutter