按下后退按钮转到主屏幕时如何处理颤动的底部导航栏

Question

我正在处理底部导航栏，但在返回主屏幕时我无法完美完成。

如果我 select 来自底部导航栏视图项目的两个导航按钮那么当我按下后退按钮时它会关闭应用程序。

我想 return 按下后退按钮时返回主页。

这是我的代码。

import 'package:flutter/material.dart';

void main() => runApp(const MyApp());


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

  static const String _title = 'Flutter Code Sample';

  @override
  Widget build(BuildContext context) {
    return const MaterialApp(
      title: _title,
      home: MyStatefulWidget(),
    );
  }
}


class MyStatefulWidget extends StatefulWidget {
  const MyStatefulWidget({Key? key}) : super(key: key);

  @override
  State<MyStatefulWidget> createState() => _MyStatefulWidgetState();
}


class _MyStatefulWidgetState extends State<MyStatefulWidget> {
  int _selectedIndex = 0;
  static const TextStyle optionStyle =
      TextStyle(fontSize: 30, fontWeight: FontWeight.bold);
  static const List<Widget> _widgetOptions = <Widget>[
    Text(
      'Index 0: Home',
      style: optionStyle,
    ),
    Text(
      'Index 1: Business',
      style: optionStyle,
    ),
    Text(
      'Index 2: School',
      style: optionStyle,
    ),
  ];

  void _onItemTapped(int index) {
    setState(() {
      _selectedIndex = index;
    });
  }

  @override
  Widget build(BuildContext context) {
    return Scaffold(
      appBar: AppBar(
        title: const Text('BottomNavigationBar Sample'),
      ),
      body: Center(
        child: _widgetOptions.elementAt(_selectedIndex),
      ),
      bottomNavigationBar: BottomNavigationBar(
        items: const <BottomNavigationBarItem>[
          BottomNavigationBarItem(
            icon: Icon(Icons.home),
            label: 'Home',
          ),
          BottomNavigationBarItem(
            icon: Icon(Icons.business),
            label: 'Business',
          ),
          BottomNavigationBarItem(
            icon: Icon(Icons.school),
            label: 'School',
          ),
        ],
        currentIndex: _selectedIndex,
        selectedItemColor: Colors.amber[800],
        onTap: _onItemTapped,
      ),
    );
  }
}

Answer 1

后退按钮的默认行为是关闭您在顶部弹出的路由。在这种情况下，您还没有弹出一条新路线。您刚刚在新索引处显示了一个小部件。所以没有什么可以关闭的。

您可以通过后退按钮返回以下选项：

点击 BottomNavigationBar，显示带有 Navigator.of(context).push(...) 的新路线。然后后退按钮将关闭它。但是使用这种方法，您的应用程序会在每个底部导航栏上出现新屏幕，并且这些屏幕不会保留状态。
使用 WillPopScope 小部件拦截后退按钮事件并执行您的自定义操作，如下所示：但是使用这种方法，您必须手动将导航堆栈保留在某处。当您添加新屏幕时，这将变得无法缩放。

但我认为真正的问题在于导航设计本身。现在每个选项卡都保留自己的导航历史记录已成为一种习惯。因此，当您来回切换选项卡时，每个选项卡仍然允许您独立于其他选项卡的历史记录返回其自己的历史记录。

要实现这一点，第一步是确定切换选项卡不应通过后退按钮撤消。字母步骤可以在这里找到：https://medium.com/flutter-community/flutter-navigation-maintaining-tab-state-while-navigating-bottomnavigationbar-6009fbceb59c

按下后退按钮转到主屏幕时如何处理颤动的底部导航栏

How to handle flutter bottom navigation bar when back button is pressed to go to the HomeScreen

android

button

onbackpressed

flutter