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

Question

我对 Flutter 和 Dart 非常陌生，但非常擅长原生 android dev(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

问题是:您没有设置 currentIndex您的 BottomNavigationBar 中的字段至_currentIndex .您将其设置为 0解决方法:设置currentIndex您的 BottomNavigationBar 中的字段至_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)
    );
  }