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

Posted 2023-04-13

【中文标题】同步抽屉项目和底部导航栏项目

【英文标题】：Syncing drawer items and bottom navigation bar items

【发布时间】：2021-10-04 10:51:34

【问题描述】：

我在我的 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'),
              onTap: () 
                Navigator.push(
            context,
            new MaterialPageRoute(
                builder: (context) => Screen2());
              ,
            ),
            ListTile(
              title: const Text('Item 3'),
              onTap: () 
                Navigator.push(
            context,
            new MaterialPageRoute(
                builder: (context) => Screen3());
              ,
            ),
          ],
        ),
      ),
    );
  
```

【问题讨论】：

请问您可以添加您的代码吗？

ok @SamiKanafani 我现在已经添加了代码

【参考方案1】：

所以如果我的问题是正确的，你有抽屉和底部导航栏做同样的事情，即点击抽屉项目中的第一个项目显示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
                  
              ,
            ),

【讨论】：

似乎很明显 :)) 非常感谢您的提示。如果我有更多的徽章，我会投票的