Flutter自定义底部导航栏图标颜色无法切换问题求助

核心问题 #

1. 状态不共享：你在每个页面中都单独实例化了CustomBottomTabBar，每个组件都有独立的_selectedIndex状态，初始值都是0。当跳转到新页面时，新页面的底部导航会重置为初始选中状态（第一个图标），导致选中状态“闪回”。
2. 错误的setState调用：在_buildNavItem方法中调用setState是完全多余的，甚至会触发不必要的组件重建，干扰状态更新逻辑。

修复步骤 #

第一步：移除无效的setState调用

删除_buildNavItem中的这行代码：

setState(() {
  color = isSelected ? const Color(0xFF06B6D4) : Colors.white;
});

颜色值已经通过isSelected计算得出，不需要在构建方法中触发状态更新。

第二步：实现全局共享的底部导航状态

推荐使用父页面+IndexedStack的方式，让底部导航仅保留一个实例，状态在所有页面间共享：

1. 创建主页面容器

class MainContainer extends StatefulWidget {
  const MainContainer({super.key});

  @override
  State<MainContainer> createState() => _MainContainerState();
}

class _MainContainerState extends State<MainContainer> {
  int _selectedIndex = 0;

  // 存放所有页面内容
  final List<Widget> _pages = const [
    HomePage(),
    AppointmentsPage(),
    ChatPage(),
    ProfilePage(),
  ];

  void _onTabTap(int index) {
    setState(() {
      _selectedIndex = index;
    });
  }

  @override
  Widget build(BuildContext context) {
    return Scaffold(
      // 使用IndexedStack切换页面内容，保留页面状态
      body: IndexedStack(
        index: _selectedIndex,
        children: _pages,
      ),
      // 底部导航使用同一实例，传入共享状态和回调
      bottomNavigationBar: CustomBottomTabBar(
        selectedIndex: _selectedIndex,
        onTabTap: _onTabTap,
      ),
    );
  }
}

2. 修改CustomBottomTabBar为无状态组件

将状态移到父容器中，组件仅负责渲染和传递点击事件：

class CustomBottomTabBar extends StatelessWidget {
  final int selectedIndex;
  final Function(int) onTabTap;

  const CustomBottomTabBar({
    super.key,
    required this.selectedIndex,
    required this.onTabTap,
  });

  @override
  Widget build(BuildContext context) {
    return Container(
      width: 375.0,
      height: 89.0,
      padding: const EdgeInsets.symmetric(horizontal: 16.0),
      decoration: const BoxDecoration(
        color: Color(0xFF272F3E),
        boxShadow: [
          BoxShadow(
            color: Color(0x14000000),
            offset: Offset(0, -1),
            blurRadius: 8.0,
          ),
        ],
        borderRadius: BorderRadius.only(
          topLeft: Radius.circular(32.0),
          topRight: Radius.circular(32.0),
        ),
      ),
      child: Stack(
        children: [
          Row(
            mainAxisAlignment: MainAxisAlignment.spaceBetween,
            children: [
              _buildNavItem(0, 'Home', 'assets/images/HouseIcon.png'),
              _buildNavItem(1, 'Appointments', 'assets/images/AppointmentIcon.png'),
              _buildNavItem(2, 'Chat', 'assets/images/ChatIcon.png'),
              _buildNavItem(3, 'Profile', 'assets/images/UserIcon.png'),
            ],
          ),
          // 动态调整底部指示器位置
          Positioned(
            top: 63.0,
            // 根据选中项计算偏移，确保指示器居中对齐
            left: 16 + (85.75 * selectedIndex) + (85.75 - 139)/2,
            child: Container(
              width: 139.0,
              height: 5.0,
              decoration: const BoxDecoration(
                color: Color(0xFFF8FAFC), 
                borderRadius: BorderRadius.only(
                  topLeft: Radius.circular(100.0),
                  topRight: Radius.circular(100.0),
                ),
              ),
            ),
          ),
        ],
      ),
    );
  }

  Widget _buildNavItem(int index, String label, String iconPath) {
    bool isSelected = selectedIndex == index;
    Color color = isSelected ? const Color(0xFF06B6D4) : Colors.white;

    return GestureDetector(
      onTap: () => onTabTap(index),
      child: SizedBox(
        width: 85.75,
        height: 63.0,
        child: Column(
          mainAxisAlignment: MainAxisAlignment.center,
          children: [
            Container(
              width: 24.0,
              height: 24.0,
              padding: const EdgeInsets.fromLTRB(3.0, 0.75, 1.5, 3.75),
              child: Image.asset(
                iconPath,
                width: 18.0,
                height: 18.75,
                color: color,
              ),
            ),
            const SizedBox(height: 10.0),
            Text(
              label,
              style: TextStyle(
                fontFamily: 'Plus Jakarta Sans',
                fontSize: 12.0,
                fontWeight: FontWeight.bold,
                height: 1.33,
                letterSpacing: -0.02,
                color: color,
              ),
            ),
          ],
        ),
      ),
    );
  }
}

额外优化 #

原来的底部指示器是固定位置的，修改后会根据选中项动态调整偏移，保证指示器与选中图标对齐。

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