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

Question

一般我们使用drawer into appBar(position 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

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

 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,

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

Flutter- add drawer into bottomNavigationBarItem with other items and navigate

android

ios

dart

flutter

flutter-layout