Flutter点击底部导航按钮修改Container背景色setState不生效

setState调用后容器颜色未更新，核心原因是你将col颜色列表、index索引变量定义在了build方法内部。
setState触发时会重新执行整个build方法完成组件重建，定义在build内部的变量每次重建都会被重置为初始值index = 0，最终表现为颜色完全不变化。

• 将col列表、index变量移动到对应页面State类的顶层成员位置，删除build方法内的同名变量定义
• （可选）优化边界判断逻辑，支持首尾循环切换颜色，不需要的话保留原有边界停止逻辑即可

变量定义（State类顶层） #

class _ColorDemoPageState extends State<ColorDemoPage> {
  // 变量必须定义在build方法外，作为State的成员属性
  List<Color> col = [Colors.grey, Colors.red, Colors.pink];
  int index = 0;

  // 你的尺寸工具方法也可放在该位置
  double h(double x) => MediaQuery.of(context).size.height * x;
  double w(double x) => MediaQuery.of(context).size.width * x;

  @override
  Widget build(BuildContext context) {
    // 注意：不要在这里重新定义col和index！
    return Scaffold(
      // 其余页面代码保持原有结构即可

底部导航栏代码 #

bottomNavigationBar: BottomAppBar(
        child: Container(
          color: Colors.orange,
          height: h(0.07),
          child: Row(
            mainAxisAlignment: MainAxisAlignment.spaceBetween,
            children: [
              IconButton(
                icon: Icon(Icons.arrow_back_ios),
                color: Colors.white,
                onPressed: () {
                  if (index == 0) {
                    // 要做循环切换就替换为 index = col.length - 1; 否则直接return
                    return;
                  }
                  setState(() {
                    index--;
                  });
                },
              ),
              Icon(
                Icons.color_lens_rounded,
                color: Colors.white,
              ),
              IconButton(
                icon: Icon(Icons.arrow_forward_ios),
                color: Colors.white,
                onPressed: () {
                  if (index == col.length - 1) {
                    // 要做循环切换就替换为 index = 0; 否则直接return
                    return;
                  }
                  setState(() {
                    index++;
                  });
                },
              ),
            ],
          ),
        ),
      ),

目标容器代码 #

body: Column(
        children: [
          // 其他页面组件
          Expanded(
            child: Container(
              color: col[index],
              child: Column(
                children: [],
              ),
            ),
          )
        ],
      ),
    );
  }
}

• 确认当前页面是StatefulWidget，StatelessWidget无法执行setState刷新
• 确认没有其他逻辑在setState执行后重置index值
• 确认目标Container没有被父组件的颜色属性覆盖

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