底部导航栏不会在 Flutter 中更改屏幕

Question

我是 Flutter 和 Dart 的新手，但非常擅长原生 android 开发（Java），我正在尝试构建一个底部导航栏，它可以在三个有状态小部件之间切换。我成功实现了底部导航栏的设计，但无法对其执行操作。我遵循了官方文档和这个 youtube 视频：

• https://api.flutter.dev/flutter/material/BottomNavigationBar-class.html
• https://www.youtube.com/watch?v=18PVdmBOEQM&t=942s（第 15 分钟）

文件结构：

main
  - screens
    - home
    - (other screens' folders)
    - first.dart

first.dart

class First extends StatefulWidget {
  @override
  _FirstState createState() => _FirstState();
}

class _FirstState extends State<First> {
  int _currentIndex = 0;
  List<Widget> listItems = [
    Home(),
    Dashboard(),
    Therapy(),
    Profile()
  ];

  @override
  Widget build(BuildContext context) {
    return Scaffold(
      bottomNavigationBar: BottomNavigationBar(
        backgroundColor: Color(0xFF856C8B),
        selectedItemColor: Color(0xFFFFFFFF),
        unselectedItemColor: Color(0xFFF0F0F0),
        type: BottomNavigationBarType.fixed,
        currentIndex: 0,
        onTap: onTabTapped,
        items: [
          BottomNavigationBarItem(
              icon: Padding(
                padding: EdgeInsets.only(top: 12),
                child: Icon(Icons.home, size: 24,),
              ),
              title: Text("")
          ),
          BottomNavigationBarItem(
              icon: Padding(
                padding: EdgeInsets.only(top: 12, right: 36),
                child: Icon(Icons.dashboard, size: 24,),
              ),
              title: Text("")
          ),
          BottomNavigationBarItem(
              icon: Padding(
                padding: EdgeInsets.only(top: 12, left: 36),
                child: Icon(Icons.star, size: 24,),
              ),
              title: Text("")
          ),
          BottomNavigationBarItem(
              icon: Padding(
                padding: EdgeInsets.only(top: 12),
                child: Icon(Icons.person, size: 24,),
              ),
              title: Text("")
          )
        ],
      ),
      // code to change screens
      body: listItems.elementAt(_currentIndex)
    );
  }

  void onTabTapped(int index) {
    setState(() {
      _currentIndex = index;
    });
  }
}

我不知道我的代码有什么问题所以请帮助初学者。

谢谢！

Answer 1

问题是：您没有将 BottomNavigationBar 中的 currentIndex 字段设置为 _currentIndex。您将其设置为 0

解决方案：将 BottomNavigationBar 中的 currentIndex 字段设置为 _currentIndex

像这样

currentIndex: _currentIndex

完整构建方法代码：

Widget build(BuildContext context) {
    return Scaffold(
      bottomNavigationBar: BottomNavigationBar(
        backgroundColor: Color(0xFF856C8B),
        selectedItemColor: Color(0xFFFFFFFF),
        unselectedItemColor: Color(0xFFF0F0F0),
        type: BottomNavigationBarType.fixed,
        currentIndex: _currentIndex ///HERE,
        onTap: onTabTapped,
        items: [
          BottomNavigationBarItem(
              icon: Padding(
                padding: EdgeInsets.only(top: 12),
                child: Icon(Icons.home, size: 24,),
              ),
              title: Text("")
          ),
          BottomNavigationBarItem(
              icon: Padding(
                padding: EdgeInsets.only(top: 12, right: 36),
                child: Icon(Icons.dashboard, size: 24,),
              ),
              title: Text("")
          ),
          BottomNavigationBarItem(
              icon: Padding(
                padding: EdgeInsets.only(top: 12, left: 36),
                child: Icon(Icons.star, size: 24,),
              ),
              title: Text("")
          ),
          BottomNavigationBarItem(
              icon: Padding(
                padding: EdgeInsets.only(top: 12),
                child: Icon(Icons.person, size: 24,),
              ),
              title: Text("")
          )
        ],
      ),
      // code to change screens
      body: listItems.elementAt(_currentIndex)
    );
  }