Flutter点击BottomNavigationBarItem无法加载List Builder页面求助

核心错误点 #

• 错误调用State的build方法：_CocPageState().build(context)完全不符合Flutter的Widget树管理逻辑。State对象由Flutter框架自动创建和管理，手动实例化并调用build生成的Widget不会被加入到Widget树中，自然无法显示。
• 页面切换逻辑错误：BottomNavigationBar的页面切换应该通过更新状态，让Scaffold的body根据选中索引切换对应页面Widget，而非手动触发build。
• 冗余无效代码：Future.sync(() => _CocPageState())没有任何实际作用，既不会触发页面加载，也无法关联状态管理。

修复后的代码示例 #

1. 修正_onItemTapped方法

仅需更新选中索引，页面切换交由Scaffold的body处理：

void _onItemTapped(final int index) {
  setState(() {
    _selectedIndex = index;
  });
}

2. 在Scaffold中实现页面切换逻辑

将Scaffold的body设置为根据选中索引返回对应页面的逻辑：

Scaffold(
  // 保留你的appBar、bottomNavigationBar等配置
  body: _getSelectedPage(),
)

// 新增方法：根据选中索引返回对应页面Widget
Widget _getSelectedPage() {
  switch(_selectedIndex) {
    case 0:
      return CocPage(); // 直接返回StatefulWidget，框架自动管理其State
    case 1:
      return DirtyListPage(); // 替换为你的"脏列表"页面
    case 2:
      return SaferProductsPage(); // 替换为你的"安全产品列表"页面
    default:
      return CocPage();
  }
}

3. 保留原CocPage类（无需修改）

原有的CocPage和_CocPageState是正确的StatefulWidget结构，直接返回CocPage()即可，框架会自动处理状态创建与build调用。

额外注意点 #

• 确保_selectedIndex是当前页面State类的成员变量，初始值设为0（对应第一个页面）。
• CocPage中ListView.builder的prototypeItem文本是硬编码的，可改为动态获取：Text('Index $index: ${chemBrain.chemsBank[index].chemName}')，这属于页面内容优化，不影响页面显示逻辑。

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