Question

我在我的 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());
              },
            ),
          ],
        ),
      ),
    );
  }
}```

Answer 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
                  
              },
            ),

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

1 个答案: