【问题标题】: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(...))
      }
   }

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

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

【问题讨论】:

    标签: flutter navigation back-button appbar flutter-bottomnavigation


    【解决方案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)仍然存在问题