Flutter 底部导航栏：将索引计数器放置在脚手架中的何处才能工作？

Question

我正在努力实现底部导航栏。具体来说，我试图将“索引”与主体一起放置，就像我发现的所有示例一样，但主体元素内部已经具有响应式屏幕。问题是：即使我显示了导航栏，它也不会重定向到特定路线，也不会突出显示所选的导航项。

你能帮我解决一下吗？

我的代码顺序如下所示：

    class LevelSelectionScreen extends StatefulWidget {
    const LevelSelectionScreen({super.key});
    @override
    _LevelSelectionScreenState createState() => 
    _LevelSelectionScreenState();

    }
    class _LevelSelectionScreenState extends State<LevelSelectionScreen> {
    int _selectedIndex = 0;
    void _onItemTapped(int index) {
    setState(() {
      _selectedIndex = index;
    });
    }


    @override
      Widget build(BuildContext context) {
     final playerProgress = context.watch<PlayerProgress>();
     int _selectedIndex = 0;
     final pages = [
     const MainMenuScreen(),
     const AvailabilityScreen(),
     const SettingsScreen(),
     ];

return Scaffold(
    extendBody: true,
    bottomNavigationBar: NavigationBar(
      height: 60,
      selectedIndex: _selectedIndex,
      elevation: 100,
      onDestinationSelected: _onItemTapped,
      destinations: [
      NavigationDestination(
        icon: Icon(Icons.home),
        selectedIcon: Icon(Icons.home),
        label: 'home',

      ),
      NavigationDestination(
        icon: Icon(Icons.book),
        selectedIcon: Icon(Icons.book),
        label: 'learn',
      ),
      NavigationDestination(
        icon: Icon(Icons.gamepad),
        selectedIcon: Icon(Icons.gamepad),
        label: 'play',
      ),
       NavigationDestination(
        icon: Icon(Icons.person),
        selectedIcon: Icon(Icons.person),
        label: 'profile',
      ),
      ]),
    backgroundColor: Color(0XFFFEF4DF),
    
    body: 
    
            ResponsiveScreen(    
        squarishMainArea: Padding(
          child: Column(
            children: [
          
              Row(
                children: [
                  Align(
                    InkResponse(
                      onTap: 
                      child: Padding(
                        padding: 
                        child: CircleAvatar(
                 
                          child: Icon(
                            Icons.person,
                            
                          ),
                        ),
                      ),
                    ),
                  ),
                  Align(
                 
                    child: InkResponse(
                      onTap: 
                      child: Padding(
                        padding: 
                        child: CircleAvatar(
                          radius: 20,
                          child: Icon(
                            Icons.home,
                          ),
                        ),
                      ),
                    ),
                  ),
                ],
              ),
         
              Padding(
              
                child: Center(
              ),

              Expanded(
                child: ListView(
                  children: [
                    for (final level in gameLevels)
                      Padding(
                      
                        child: ListTile(
                          )

        rectangularMenuArea: SizedBox()));
     }

    }

    

Answer 1

var

 int _selectedIndex = 0;

在build函数中定义的问题。这样每次重建时 _selectedIndex 将设置为 0。