Question

我对Flutter和Dart非常陌生，但是对本机android dev（Java）相当了解，我正在尝试构建一个底部导航栏，该栏在三个有状态小部件之间切换。我成功实现了底部导航栏的设计，但无法对其执行操作。我遵循了官方文档和这个youtube视频：

文件结构：

onCreate(Bundle savedInstanceState)

first.dart

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

我不知道我的代码有什么问题，所以请帮助新手。

谢谢！

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)
    );
  }

底部导航栏无法改变Flutter中的屏幕

1 个答案: