如何在不使用ListView.builder时为布尔值绑定索引实现行内容器单选变色

问题根源是你用了单个布尔变量控制所有容器的选中状态，所以点击后所有容器会一起变化。要实现单个容器独立切换，不用ListView.builder的话，可以用List<bool>来存储每个索引对应的选中状态，给每个容器分配专属状态。

步骤1：修改状态管理逻辑 #

把原来的单个isSelected和固定index替换为布尔列表，每个元素对应一个容器的选中状态：

// 假设你有3个容器，初始化时设为未选中（可根据需求改为true）
List<bool> selectedStates = List.filled(3, false);

// 修改切换方法，接收索引参数
void changeColor(int index) {
  selectedStates[index] = !selectedStates[index];
  notifyListeners();
}

注意：List.filled(3, false)中的3是容器总数，根据实际数量调整即可。

步骤2：修改UI调用代码 #

每个容器设置颜色和点击事件时，传入自身对应的索引：

// 第一个容器（索引0）
Container(
  color: products.selectedStates[0] ? Colors.white : Colors.orange,
  child: IconButton(
    icon: Image.asset('assets/phone.png'),
    onPressed: () {
      products.changeColor(0); // 传递当前容器的索引
    },
  ),
),
// 第二个容器（索引1）
Container(
  color: products.selectedStates[1] ? Colors.white : Colors.orange,
  child: IconButton(
    icon: Image.asset('assets/phone.png'),
    onPressed: () {
      products.changeColor(1);
    },
  ),
),
// 第三个容器（索引2）
Container(
  color: products.selectedStates[2] ? Colors.white : Colors.orange,
  child: IconButton(
    icon: Image.asset('assets/phone.png'),
    onPressed: () {
      products.changeColor(2);
    },
  ),
),

这样每个容器点击时只会修改自身对应的状态位，颜色也就只会单独切换了。如果容器数量不固定，也可以根据数据源长度动态初始化布尔列表。

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