同步抽屉项目和底部导航栏项目

问题描述

我在我的 Flutter 应用程序中创建了一个底部导航栏和一个抽屉。 当用户单击底部导航栏项目或抽屉项目时，我设法显示相同的屏幕，它们具有相同的目的或目标屏幕。 但我注意到，当用户单击抽屉中的项目时，针对同一屏幕的底部导航栏项目并未处于活动状态。 希望有人明白我在说什么。 现在我想知道什么是方法，甚至是在颤振中实现这种行为的代码

这是我想要增强的代码

void main() => runApp(const MyApp());
class MyApp extends StatelessWidget {
  const MyApp({Key? key}) : super(key: key);

  static const String _title = 'Flutter Code Sample';

  @override
  Widget build(BuildContext context) {
    return const MaterialApp(
      title: _title,home: MyStatefulWidget(),);
  }
}

class MyStatefulWidget extends StatefulWidget {
  const MyStatefulWidget({Key? key}) : super(key: key);

  @override
  State<MyStatefulWidget> createState() => _MyStatefulWidgetState();
}

class _MyStatefulWidgetState extends State<MyStatefulWidget> {
  int _selectedindex = 0;
  static const TextStyle optionStyle =
      TextStyle(fontSize: 30,fontWeight: FontWeight.bold);
  static const List<Widget> screens = <Widget>[
    Screen1(),Screen2(),Screen3()
  ];

  void _onItemTapped(int index) {
    setState(() {
      _selectedindex = index;
    });
  }

  @override
  Widget build(BuildContext context) {
    return Scaffold(
      appBar: AppBar(
        title: const Text('BottomNavigationBar Sample'),),body: screens.elementAt(_selectedindex),bottomNavigationBar: BottomNavigationBar(
        items: const <BottomNavigationBarItem>[
          BottomNavigationBarItem(
            icon: Icon(Icons.home),label: 'Home',BottomNavigationBarItem(
            icon: Icon(Icons.business),label: 'Business',BottomNavigationBarItem(
            icon: Icon(Icons.school),label: 'School',],currentIndex: _selectedindex,selectedItemColor: Colors.Amber[800],onTap: _onItemTapped,drawer: Drawer(
        child: ListView(
          // Important: Remove any padding from the ListView.
          padding: EdgeInsets.zero,children: [
            const DrawerHeader(
              decoration: Boxdecoration(
                color: Colors.blue,child: Text('Drawer Header'),ListTile(
              title: const Text('Item 1'),onTap: () {
                Navigator.push(
            context,new MaterialPageRoute(
                builder: (context) => Screen1());
              },ListTile(
              title: const Text('Item 2'),new MaterialPageRoute(
                builder: (context) => Screen2());
              },ListTile(
              title: const Text('Item 3'),new MaterialPageRoute(
                builder: (context) => Screen3());
              },);
  }
}```

解决方法

因此，如果我的问题是正确的，那么您的抽屉和底部导航栏会执行相同的操作，即单击抽屉项目中的第一个项目显示 Screen1()，然后单击抽屉项目中的第一个项目底部导航栏也应显示 Screen1()。在您的实现中，选择底部导航栏中的项目将更改状态中的 _selectedIndex 变量，从而更新底部导航栏中的所选项目，并显示您的 MyStatefulWidget 内的屏幕。然而，抽屉正在推送一个新屏幕，这意味着它不会更新 _selectedIndex，因此您的 MyStatefulWidget 中没有发生任何变化，只是推送了一个新屏幕

 Navigator.push(
            context,new MaterialPageRoute(
                builder: (context) => Screen1());
              },

因此，如果您希望抽屉和底部导航之间具有相同的行为，您可以更新您的 onTap 方法

ListTile(
              title: const Text('Item 1'),onTap: () {

                  Navigator.of(context).pop();//this will close the drawer
                  _onItemTapped(0);//this will set the selected screen in the widget,and will update the bottom navigation
                  
              },),