Flutter使用CurvedNavigationBar无语法错误但标签对应页面不显示求助

核心问题原因 #

代码问题出在buildPages方法的逻辑错误，和多余的未赋值局部变量：

• 你在_MyAppState中已经通过page变量存储了当前选中的标签索引，但是buildPages方法内重新声明了局部变量var index;，该变量没有赋值默认是空值，完全没有关联实际的标签选中状态
• default分支多写了无用的0;语句，属于不影响运行的冗余代码

修复步骤 #

1. 修正buildPages方法逻辑 #

直接使用State中存储的page变量做switch判断，删除多余的局部index声明，清理default分支冗余代码：

Widget buildPages(){
  switch (page){
    case 2:
      return profileTabBar();
    case 1:
      return likedAlbums();
    case 0:
    default:
      return Following();
  }
}

2. 可选优化（不影响基础功能，优化体验） #

如果要避免页面每次切换都重新初始化，可以把body替换为IndexedStack，保留各标签页的滚动位置、输入内容等状态：

// 先在_MyAppState里声明页面列表
final List<Widget> _pages = [
  Following(),
  likedAlbums(),
  profileTabBar(),
];

// build方法里的body替换为
body: IndexedStack(
  index: page,
  children: _pages,
),

3. 验证效果 #

修改后重新热重载应用，点击底部Tab即可正常切换展示对应页面内容。

内容的提问来源于stack exchange，提问作者VoodoO