关闭底部导航栏上的抽屉单击，颤动

Question

每当用户按下< code >底部导航栏中的一个按钮时，我都想关闭我的< code >抽屉小部件，但是我不太明白这一点。我现在设置BNB的方式是通过应用程序记住所有屏幕的当前状态(使用< code>IndexedStack)，但我想在按下BNB按钮之前关闭任何屏幕中打开的抽屉。我的每个屏幕都有自己的抽屉和应用程序栏，所以我不能在BNB里面放一个抽屉(或者我可以，我可以用一个开关盒动态地改变它们，当一个特定的屏幕被点击时，但是这个抽屉会盖住底部的导航栏等等。)，但是我现在想让它这样工作。下面是代码，里面有一些注释来解释事情:

底部导航栏：

class BottomNavBar extends StatefulWidget {
  static const String id = 'bottom_navbar_screen';
  @override
  _BottomNavBarState createState() => _BottomNavBarState();
}

class _BottomNavBarState extends State<BottomNavBar> {
  int _selectedIndex = 0;

  /// list of screen that will render inside the BNB
  List<Navigation> _items = [
    Navigation(
        widget: Screen1(), navigationKey: GlobalKey<NavigatorState>()),
    Navigation(
        widget: Screen2(), navigationKey: GlobalKey<NavigatorState>()),
    Navigation(
        widget: Screen3(), navigationKey: GlobalKey<NavigatorState>()),
    Navigation(
        widget: Screen4(), navigationKey: GlobalKey<NavigatorState>()),
  ];

  /// function that renders components based on selected one in the BNB

  void _onItemTapped(int index) {
    if (index == _selectedIndex) {
      _items[index]
          .navigationKey
          .currentState
          .popUntil((route) => route.isFirst);
    } else {
      setState(() {
        _selectedIndex = index;
      });
    }
 /// when the index is selected, on the button press do some actions
    switch (_selectedIndex) {
      case 0:
         //  Do some actions
        break;
      case 1:
         //  Do some actions
        break;
      case 2:
         //  Do some actions
        break;
      case 3:
         //  Do some actions
        break;
    }
  }

  /// navigation Tab widget for a list of all the screens and puts them in a Indexed Stack
  Widget _navigationTab(
      {GlobalKey<NavigatorState> navigationKey, Widget widget}) {
    return Navigator(
      key: navigationKey,
      onGenerateRoute: (routeSettings) {
        return MaterialPageRoute(builder: (context) => widget);
      },
    );
  }

  @override
  Widget build(BuildContext context) {
    return WillPopScope(
      onWillPop: () async {
        final isFirstRouteInCurrentTab =
            !await _items[_selectedIndex].navigationKey.currentState.maybePop();
        if (isFirstRouteInCurrentTab) {
          if (_selectedIndex != 0) {
            _onItemTapped(1);
            return false;
          }
        }

        /// let system handle back button if we're on the first route
        return isFirstRouteInCurrentTab;
      },
      child: Scaffold(
        body: IndexedStack(
          index: _selectedIndex,
          children: _items
              .map((e) => _navigationTab(
                  navigationKey: e.navigationKey, widget: e.widget))
              .toList(),
        ),
        bottomNavigationBar: BottomNavigationBar(
          items: <BottomNavigationBarItem>[
            BottomNavigationBarItem(
              label: 'Screen 1,
            ),
            BottomNavigationBarItem(
              label: 'Screen 2,
            ),
            BottomNavigationBarItem(
              label: 'Screen 3,
            ),
            BottomNavigationBarItem(
              label: 'Screen 4,
            ),
          ],
          currentIndex: _selectedIndex,
          showUnselectedLabels: true,
          onTap: _onItemTapped,
        ),
      ),
    );
  }
}

假设所有4个屏幕都是一样的，它们有自己的应用程序栏和抽屉:

@override
  Widget build(BuildContext context) {
    return  Scaffold(
        backgroundColor: Colors.white,
        drawer: Drawer(), // so this is what I want to close on BNB button press in each of the 4 screens
        appBar: AppBar( // each screen has its own app bar
          title: Text('Screens 1-4'),
        ),
        body: Text('Body of Screens 1-4'),
    );
  }

所以因为每个屏幕都有自己的应用栏和抽屉，抽屉不会在底部导航栏上渲染，所以我的BNB按钮可以单击。如果我在BNB中为所有屏幕放置一个抽屉，那么除非您先关闭抽屉，否则您无法单击BNB，这不是我现在正在寻找的东西。

所以，我的最后一个问题是，当你按下底部导航条时，我如何关闭每个屏幕抽屉(如果它们之前是打开的)？(例如，我在屏幕1上，打开抽屉，然后在BNB中按屏幕2，我想在导航到屏幕2之前< code > pop()/关闭屏幕1中的抽屉。)

提前感谢您的帮助！

Answer 1

这样做的一个好方法是使用GlobalKey作为脚手架。因此，对于所有的支架，您可以使用以下定义它们：

class SomeClass extends StatelessWidget {
  final scaffoldKey = GlobalKey<ScaffoldState>()

  Widget build(BuildContext context) {
    Scaffold(
      backgroundColor: Colors.white,
      drawer: Drawer(), // so this is what I want to close on BNB button press in each of the 4 screens
      appBar: AppBar( // each screen has its own app bar
        title: Text('Screens 1-4),
      ),
      body: Text('Body of Screens 1-4),
      key: scaffoldKey,
      ),
    );
  }

}

然后，您可以将此密钥传递给BottomNavigationBar。在BottomNavigationBar中，您可以拥有所有脚手架密钥，并且在onItemTap函数中：

void _onItemTapped(int index) {
    for (scaffoldKey in scaffoldKeys) {
      // If the drawer is open
      if (scaffoldKey.currentState.isDrawerOpen) {
        // Closes the drawer
        scaffoldKey.currentState?.openEndDrawer();
      }
    }
    if (index == _selectedIndex) {
      _items[index]
          .navigationKey
          .currentState
          .popUntil((route) => route.isFirst);
    } else {
      setState(() {
        _selectedIndex = index;
      });
    }
 /// when the index is selected, on the button press do some actions
    switch (_selectedIndex) {
      case 0:
         //  Do some actions
        break;
      case 1:
         //  Do some actions
        break;
      case 2:
         //  Do some actions
        break;
      case 3:
         //  Do some actions
        break;
    }
  }

由您来决定是否能找到传递钥匙的最佳方式。例如，您可以在包含底部导航栏和不同基架的 Widget 中定义它们，并将其作为参数传递。您可以使用状态管理...任何适合您的用例。

以下是您的代码可能如下所示：

class BottomNavBar extends StatefulWidget {
  static const String id = 'bottom_navbar_screen';
  @override
  _BottomNavBarState createState() => _BottomNavBarState();
}

class _BottomNavBarState extends State<BottomNavBar> {
  int _selectedIndex = 0;
  late final List<GlobalKey<ScaffoldState>> scaffoldKeys;
  /// list of screen that will render inside the BNB
  late final List<Navigation> _items;
  @override
  initState() {
  super.initState()
  scaffoldKeys = [GlobalKey<ScaffoldState>(), GlobalKey<ScaffoldState>(), GlobalKey<ScaffoldState>(), GlobalKey<ScaffoldState>()];
  _items = [
    Navigation(
        widget: Screen1(scaffoldKey: scaffoldKeys[0]), navigationKey: GlobalKey<NavigatorState>()),
    Navigation(
        widget: Screen2(scaffoldKey: scaffoldKeys[1]), navigationKey: GlobalKey<NavigatorState>()),
    Navigation(
        widget: Screen3(scaffoldKey: scaffoldKeys[2]), navigationKey: GlobalKey<NavigatorState>()),
    Navigation(
        widget: Screen4(scaffoldKey: scaffoldKeys[3]), navigationKey: GlobalKey<NavigatorState>()),
  ];
  }

  /// function that renders components based on selected one in the BNB

  void _onItemTapped(int index) {
    for (scaffoldKey in scaffoldKeys) {
      // If the drawer is open
      if (scaffoldKey.currentState.isDrawerOpen) {
        // Closes the drawer
        scaffoldKey.currentState?.openEndDrawer();
      }
    }
    if (index == _selectedIndex) {
      _items[index]
          .navigationKey
          .currentState
          .popUntil((route) => route.isFirst);
    } else {
      setState(() {
        _selectedIndex = index;
      });
    }
 /// when the index is selected, on the button press do some actions
    switch (_selectedIndex) {
      case 0:
         //  Do some actions
        break;
      case 1:
         //  Do some actions
        break;
      case 2:
         //  Do some actions
        break;
      case 3:
         //  Do some actions
        break;
    }
  }

  /// navigation Tab widget for a list of all the screens and puts them in a Indexed Stack
  Widget _navigationTab(
      {GlobalKey<NavigatorState> navigationKey, Widget widget, GlobalKey<ScaffoldState> scaffoldKey}) {
    return Navigator(
      key: navigationKey,
      onGenerateRoute: (routeSettings) {
        return MaterialPageRoute(builder: (context) => widget);
      },
    );
  }

  @override
  Widget build(BuildContext context) {
    return WillPopScope(
      onWillPop: () async {
        final isFirstRouteInCurrentTab =
            !await _items[_selectedIndex].navigationKey.currentState.maybePop();
        if (isFirstRouteInCurrentTab) {
          if (_selectedIndex != 0) {
            _onItemTapped(1);
            return false;
          }
        }

        /// let system handle back button if we're on the first route
        return isFirstRouteInCurrentTab;
      },
      child: Scaffold(
        body: IndexedStack(
          index: _selectedIndex,
          children: _items
              .map((e) => _navigationTab(
                  navigationKey: e.navigationKey, widget: e.widget))
              .toList(),
        ),
        bottomNavigationBar: BottomNavigationBar(
          items: <BottomNavigationBarItem>[
            BottomNavigationBarItem(
              label: 'Screen 1,
            ),
            BottomNavigationBarItem(
              label: 'Screen 2,
            ),
            BottomNavigationBarItem(
              label: 'Screen 3,
            ),
            BottomNavigationBarItem(
              label: 'Screen 4,
            ),
          ],
          currentIndex: _selectedIndex,
          showUnselectedLabels: true,
          onTap: _onItemTapped,
        ),
      ),
    );
  }
}

你屏幕：

class Screen1 extends StatelessWidget {
  final GlobalKey<ScaffoldState> scaffoldKey;
  Screen1({required this.scaffoldKey});
  @override
  Widget build(BuildContext context) {
    return  Scaffold(
        key: scaffoldKey,
        backgroundColor: Colors.white,
        drawer: Drawer(), // so this is what I want to close on BNB button press in each of the 4 screens
        appBar: AppBar( // each screen has its own app bar
          title: Text('Screens 1-4'),
        ),
        body: Text('Body of Screens 1-4'),
    );
    }
  }

我将屏幕列表_items更改为后期变量，以便您可以在声明它们时将基架键传递给它们。