Flutter(Dart)：如何根据布尔值单独修改单个Container颜色

你现在的问题出在用了全局的joined变量，所有Container都绑定同一个变量，所以改一个就全变了。要让每个Container独立变色，得把布尔值和每个Firebase里的People条目一一对应，给每个条目单独维护状态。

解决步骤： #

1. 把Firebase数据转成带独立状态的列表
   从Firebase获取People数据时，把每个条目包装成包含key和joined的对象，存到列表里，这样每个条目有自己的状态。

2. 点击按钮只更新对应条目的状态
   按钮点击时，通过索引或key定位到当前条目，修改它的joined值，同时同步回Firebase。

3. Container颜色绑定对应条目的状态
   构建每个Container时，用当前条目自己的joined值判断颜色，而非全局变量。

代码示例： #

// 状态类里定义存储列表
List<Map<String, dynamic>> peopleList = [];

// 从Firebase拉取数据并初始化状态
void loadPeopleData() async {
  DatabaseReference peopleRef = FirebaseDatabase.instance.ref("people");
  DataSnapshot snapshot = await peopleRef.get();
  
  if (snapshot.exists) {
    Map<dynamic, dynamic> rawData = snapshot.value as Map;
    // 把原始数据转成带key和joined的列表
    peopleList = rawData.entries.map((entry) {
      return {
        "key": entry.key,
        "joined": entry.value["joined"] ?? false, // 优先取Firebase里的已存值，默认false
        // 这里可以加其他需要的字段，比如名字等
      };
    }).toList();
    setState(() {});
  }
}

// 构建列表的代码
ListView.builder(
  itemCount: peopleList.length,
  itemBuilder: (context, index) {
    final currentPerson = peopleList[index];
    return Container(
      key: Key(currentPerson["key"]),
      color: currentPerson["joined"] ? Colors.green : Colors.blue,
      padding: EdgeInsets.all(16),
      child: ElevatedButton(
        onPressed: () async {
          // 1. 切换本地状态
          setState(() {
            peopleList[index]["joined"] = !currentPerson["joined"];
          });
          // 2. 同步更新到Firebase
          DatabaseReference personRef = FirebaseDatabase.instance.ref("people/${currentPerson["key"]}");
          await personRef.update({"joined": peopleList[index]["joined"]});
        },
        child: Text(currentPerson["joined"] ? "已加入" : "点击加入"),
      ),
    );
  },
)

关键说明： #

• 每个条目都有独立的joined状态，存在peopleList的对应元素里，不再共享全局变量
• 点击按钮时，先更新本地列表的状态（触发UI刷新），再把新值同步到Firebase，保证本地和云端数据一致
• Container的颜色直接绑定当前条目的joined，只有被点击的那个Container会变色

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