Flutter BottomNavigationBar选中状态图标不更新问题求助

安全阿岳

2026-8-29

修复方案

问题出在三个位置，对应修改即可：

状态变量定义位置错误
你当前将_selectedIndex、_onPageChanged、_onItemTapped全部声明在build方法内部，每次组件重建执行build时，_selectedIndex都会被重置为初始值0，状态无法持久保存。需要将这几个变量和方法全部移动到对应State类的成员层级，禁止放在build方法内。
导航栏点击回调未同步更新选中索引
现有_onItemTapped方法仅执行了页面跳转逻辑，没有同步更新_selectedIndex，且手动调用jumpToPage时不一定会触发PageView的onPageChanged回调，最终导致导航栏拿到的选中索引和实际页面不匹配。
将_onItemTapped方法修改为如下逻辑：
```
void _onItemTapped(int index) {
  setState(() {
    _selectedIndex = index;
  });
  _pageController.jumpToPage(index);
}
```
同时确认PageView组件已绑定页面切换回调，保证滑动切页时导航状态同步：
```
PageView(
  controller: _pageController,
  onPageChanged: _onPageChanged,
  children: const [
    // 首页、消息页、通知页、设置页组件
  ],
)
```
SVG图标未适配选中态颜色
BottomNavigationBar的selectedItemColor、unselectedItemColor属性仅对原生Icon组件生效，你使用的SvgPicture.asset属于第三方渲染组件，不会自动继承导航栏的颜色配置，因此选中态下不会自动变色。
给每个SVG图标手动添加颜色判断逻辑即可，以消息项为例：
```
BottomNavigationBarItem(
  icon: SvgPicture.asset(
    "assets/images/messages.svg",
    color: _selectedIndex == 1 ? primaryBlue : Colors.black,
  ),
  label: "Messages",
),
```
其余通知、设置项同理，分别判断索引为2、3时应用选中色primaryBlue，否则应用未选中色Colors.black。