使用底部导航时删除应用栏的后退按钮 - 颤动

Posted 2023-02-23

【中文标题】使用底部导航时删除应用栏的后退按钮 - 颤动

【英文标题】：remove back button of app bar when using bottom navigation - flutter

【发布时间】：2021-09-06 16:17:58

【问题描述】：

我在我的应用中使用底部导航，如下所示。

class AppMainPage extends StatefulWidget 
  @override
  _AppMainPageState createState() => _AppMainPageState();


class _AppMainPageState extends State<AppMainPage> 
  int _selectedIndex = 1;

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

  @override
  void initState() 
    super.initState();
  

  @override
  void dispose() 
    super.dispose();
  

  static List<Widget> _widgetOptions = <Widget>[
    PaymentPage(),
    HomePage(),
    ProfilePage()
  ];

  @override
  Widget build(BuildContext context) 
    return Scaffold(
      bottomNavigationBar: BottomNavigationBar(
        items: const <BottomNavigationBarItem>[
          BottomNavigationBarItem(
            icon: Icon(CupertinoIcons.money_dollar),
            label: 'Payment',
          ),
          BottomNavigationBarItem(
            icon: Icon(CupertinoIcons.home),
            label: 'Home',
          ),
          BottomNavigationBarItem(
            icon: Icon(Icons.person),
            label: 'Profile',
          ),
        ],
        currentIndex: _selectedIndex,
        selectedItemColor: orange_red1,
        unselectedItemColor: Colors.grey,
        onTap: _onItemTapped,
      ),
      body: _widgetOptions.elementAt(_selectedIndex),
    );
  

我想从底部导航转到的每个页面都有一个不同的（一些应用栏有不同的图标，具有不同的图标和标题。因此不能在 AppMainPage 中使用通用的应用栏）AppBar 在 Scaffold 小部件中如下所示。

首页应用栏代码

    class HomePage extends StatefulWidget 
    
      @override
      _HomePageState createState() => _HomePageState();
    
    
    class _HomePageState extends State<HomePage> 
      @override
      Widget build(BuildContext context) 
        return Scaffold(
          backgroundColor: Colors.white,
            appBar: AppBar(
              backgroundColor: orange_red1,
              title: Text('Home'),
              elevation: 0,
            ),
          body: Stack(...))
      
   

但是每个页面我在应用栏中都有一个后退按钮，当我点击它时我得到一个白屏（屏幕弹出）。我怎样才能删除这个后退按钮并解决问题？

我不确定我的代码实现是否符合我的要求。如果有人能提供帮助，我很高兴。

【参考方案1】：

**Updated**
Note: As I read a line about `WillPopScope` wont work in ios.



return WillPopScope(
          onWillPop: () async 
            //todo
            return Future.value(false);
          ,
          child: Scaffold(
          backgroundColor: Colors.white,
            appBar: AppBar(
              backgroundColor: orange_red1,
              title: Text('Home'),
              elevation: 0,
              leading: SizedBox(),//any one below or SizeBox()
              automaticallyImplyLeading: false,//any one below or SizeBox()
            ),
          body: Stack(...))
         );
      

【讨论】：

这将删除后退按钮，但如果您按下硬件后退按钮（android）仍然存在问题

【参考方案2】：

将automaticallyImplyLeading 设置为false：

class _HomePageState extends State<HomePage> 
      @override
      Widget build(BuildContext context) 
        return Scaffold(
          backgroundColor: Colors.white,
            appBar: AppBar(
              backgroundColor: orange_red1,
              title: Text('Home'),
              elevation: 0,
              automaticallyImplyLeading: false,
            ),
          body: Stack(...))
      

【讨论】：

这将删除后退按钮，但如果您按下硬件后退按钮（android）仍然存在问题