Flutter-将抽屉与其他项目一起添加到bottomNavigationBarItem并导航

Question

一般情况下，我们在appBar中使用drawer(位置drawer/endDrawer)。我必须将抽屉功能设置为带有主页、设置的底部导航栏项目。这 3 个项目将适用于所有页面，并且必须显示这三 (3) 个项目的选定索引。我怎样才能做到这一点。

class BottomNavBar extends StatefulWidget {

  @override
  _BottomNavBarState createState() => _BottomNavBarState();
}

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

  @override
  Widget build(BuildContext context) {
    return BottomNavigationBar(
      currentIndex: _selectedIndex,
      onTap: onTabTapped,
      //for more than three items
      type: BottomNavigationBarType.fixed,
      items: [
        BottomNavigationBarItem(
          icon: Icon(processIcon),
          label: 'My Task',
        ),
        BottomNavigationBarItem(
          icon: Icon(Icons.home),
          label: 'Home',
        ),
        BottomNavigationBarItem(
            icon: Icon(settingIcon),
            label: 'Setting',
        ),
        BottomNavigationBarItem(
          icon: Icon(menuIcon),
          label: 'Menu',
        ),
      ],
    );
  }
  void onTabTapped(int index) {
    setState(() {
      _selectedIndex = index;
      print('index ${index}');
    });

  }
}

在这里，抽屉将被导航到菜单中。

Answer 1

您可以在Scaffold 上使用GlobalKey 并使用它来打开抽屉。

 void onTabTapped(int index) {
    setState(() {
      _selectedIndex = index;

      if (_selectedIndex == 3 && _scaffoldKey.currentState != null) {
        _scaffoldKey.currentState!.openDrawer();
      } });
  }

class _BottomNavBarState extends State<BottomNavBar> {
  int _selectedIndex = 1;
  final GlobalKey<ScaffoldState> _scaffoldKey = GlobalKey<ScaffoldState>();

  @override
  Widget build(BuildContext context) {
    return Scaffold(
      key: _scaffoldKey,
      body: Text("B $_selectedIndex"),
      drawer: const Drawer(
        backgroundColor: Colors.cyanAccent,