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

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
打开抽屉时，在抽屉外面单击会自动关闭抽屉
您可以在下面复制粘贴运行完整代码

代码段

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);