抽屉打开并单击底部导航按钮时出现错误

Question

我是 Flutter 的新手，下面是代码，如果抽屉打开并且我在“BottomNavigationBar onTap”中的“setState”之前调用了“Navigator.of(context).pop()”，它工作正常。

但如果抽屉未打开且代码运行，它将弹出当前页面，而不是推送带有新正文的重建页面。

class BottomNavigationBarScreen extends StatefulWidget {
  static String routeName = '/bottomnavigationscreen';
  @override
  _BottomNavigationBarScreenState createState() =>
      _BottomNavigationBarScreenState();
}

class _BottomNavigationBarScreenState extends State<BottomNavigationBarScreen> {
  int _currentIndex = 0;
  final _optionButton = [
    HomeScreen(),
    SearchScreen(),
    ScanScreen(),
    ShoppingCartScreen(),
  ];

  // void onTap(int index) {
  //   setState(() {
  //     _currentIndex = index;
  //   });
  // }

  @override
  Widget build(BuildContext context) {
    GlobalKey<ScaffoldState> _scaffoldKey = GlobalKey<ScaffoldState>();
    return Scaffold(
      key: _scaffoldKey,
      body: SafeArea(child: _optionButton[_currentIndex]),
      drawer: AppDrawerWidget(),
      bottomNavigationBar: BottomNavigationBar(
          type: BottomNavigationBarType.fixed,
          currentIndex: _currentIndex,
          onTap: (int index) {
            Navigator.of(context).pop();
            setState(() {
              _currentIndex = index;
            });
          },
          items: [
            BottomNavigationBarItem(
              icon: Icon(
                Icons.home,
                color: Theme.of(context).iconTheme.color,
              ),
              title: Text(''),
            ),
            BottomNavigationBarItem(
                icon: Icon(
                  Icons.search,
                  color: Theme.of(context).iconTheme.color,
                ),
                title: Text('')),
            BottomNavigationBarItem(
                icon: Icon(
                  IconData(59392, fontFamily: 'icons'),
                  color: Theme.of(context).iconTheme.color,
                ),
                title: Text('')),
            BottomNavigationBarItem(
                icon: Icon(
                  Icons.shopping_cart,
                  color: Theme.of(context).iconTheme.color,
                ),
                title: Text('')),
          ]),
    );
  }
}

Answer 1

您可以使用_scaffoldKey.currentState.isDrawerOpen检查抽屉是否打开
在您的情况下，您不需要Navigator.of(context).pop();，除非您的AppDrawerWidget 中有特殊操作
当抽屉打开时，点击抽屉外部会自动关闭抽屉
您可以在下面复制粘贴运行完整代码

代码sn-p

onTap: (int index) {
            if (_scaffoldKey.currentState.isDrawerOpen) {
              Navigator.of(context).pop();
            }
            print("onTap");
            setState(() {
              _currentIndex = index;
            });
          },

工作演示

完整代码

import 'package:flutter/material.dart';

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

class MyApp extends StatelessWidget {
  // This widget is the root of your application.
  @override
  Widget build(BuildContext context) {
    return MaterialApp(
      title: 'Flutter Demo',
      theme: ThemeData(
        // This is the theme of your application.
        //
        // Try running your application with "flutter run". You'll see the
        // application has a blue toolbar. Then, without quitting the app, try
        // changing the primarySwatch below to Colors.green and then invoke
        // "hot reload" (press "r" in the console where you ran "flutter run",
        // or simply save your changes to "hot reload" in a Flutter IDE).
        // Notice that the counter didn't reset back to zero; the application
        // is not restarted.
        primarySwatch: Colors.blue,
      ),
      home: BottomNavigationBarScreen(),
    );
  }
}


class BottomNavigationBarScreen extends StatefulWidget {
  static String routeName = '/bottomnavigationscreen';
  @override
  _BottomNavigationBarScreenState createState() =>
      _BottomNavigationBarScreenState();
}

class _BottomNavigationBarScreenState extends State<BottomNavigationBarScreen> {
  int _currentIndex = 0;
  final _optionButton = [
    HomeScreen(),
    SearchScreen(),
    ScanScreen(),
    ShoppingCartScreen(),
  ];

  // void onTap(int index) {
  //   setState(() {
  //     _currentIndex = index;
  //   });
  // }

  @override
  Widget build(BuildContext context) {
    GlobalKey<ScaffoldState> _scaffoldKey = GlobalKey<ScaffoldState>();
    return Scaffold(
      key: _scaffoldKey,
      appBar: AppBar(
        title: Text("Listen to Drawer Open / Close Example"),
      ),
      body: SafeArea(child: _optionButton[_currentIndex]),
      drawer: AppDrawerWidget(),
      bottomNavigationBar: BottomNavigationBar(
          type: BottomNavigationBarType.fixed,
          currentIndex: _currentIndex,
          onTap: (int index) {
            if (_scaffoldKey.currentState.isDrawerOpen) {
              Navigator.of(context).pop();
            }
            print("onTap");
            setState(() {
              _currentIndex = index;
            });
          },
          items: [
            BottomNavigationBarItem(
              icon: Icon(
                Icons.home,
                color: Theme.of(context).iconTheme.color,
              ),
              title: Text(''),
            ),
            BottomNavigationBarItem(
                icon: Icon(
                  Icons.search,
                  color: Theme.of(context).iconTheme.color,
                ),
                title: Text('')),
            BottomNavigationBarItem(
                icon: Icon(
                  IconData(59392, fontFamily: 'icons'),
                  color: Theme.of(context).iconTheme.color,
                ),
                title: Text('')),
            BottomNavigationBarItem(
                icon: Icon(
                  Icons.shopping_cart,
                  color: Theme.of(context).iconTheme.color,
                ),
                title: Text('')),
          ]),
    );
  }
}

class AppDrawerWidget extends StatefulWidget {
  @override
  _AppDrawerWidgetState createState() => _AppDrawerWidgetState();
}

class _AppDrawerWidgetState extends State<AppDrawerWidget> {

  @override
  void initState() {
    super.initState();
    print("open");
  }

  @override
  void dispose() {
    print("close");
    super.dispose();
  }

  @override
  Widget build(BuildContext context) {
    return Drawer(
      child: Column(
        children: <Widget>[
          Text("test1"),
          Text("test2"),
          Text("test3"),
        ],
      ),
    );
  }
}

class HomeScreen extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    return Text("HomeScreen");
  }
}

class SearchScreen extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    return Text("SearchScreen");
  }
}

class ScanScreen extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    return Text("ScanScreen");
  }
}

class ShoppingCartScreen extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    return Text("ShoppingCartScreen");
  }
}

Answer 2

添加一个检查以查看导航抽屉是否打开，如果它打开然后弹出它。

例如：if(navigationDrawerOpen) Navigator.pop(context);