Flutter：点击FutureBuilder生成的单个Container单独变色问题求助

问题出在你用了一个全局的bool isClicked变量——所有生成的Container都在判断同一个状态值，所以只要你把它设为true，所有Container都会同步切换颜色。要实现点击单个Container只改变它的颜色，你需要跟踪具体哪个兴趣被选中，而不是用一个通用的布尔值。

具体修改步骤： #

1. 替换状态变量：把原来的bool isClicked = false;改成存储选中兴趣ID的变量，这样能精准定位被点击的项：

   String? selectedInterestId; // 初始为null，表示没有选中任何兴趣
   

2. 更新点击事件逻辑：点击时把当前兴趣的ID赋值给selectedInterestId，如果点击的是已经选中的ID，可以清空它（实现点击切换选中/取消的效果）：

   onTap: (){
     final currentInterestId = "${datalist[index]['_id']}";
     log(currentInterestId);
     setState(() {
       // 如果当前点击的是已选中的，就取消选中；否则选中它
       selectedInterestId = selectedInterestId == currentInterestId ? null : currentInterestId;
     });
   },
   

3. 修改颜色判断条件：不再依赖isClicked，而是判断当前兴趣的ID是否等于selectedInterestId：

   color: selectedInterestId == "${datalist[index]['_id']}" ? Colors.white : Color(0xFFFFEBE7),
   

修改后的完整代码片段： #

// 先在你的State类中定义状态变量
String? selectedInterestId;

// ... 其他代码 ...

FutureBuilder(
 future: GetInterests.getInterests(),
 builder: (context, snapshot) {
 final datalist = snapshot.data;
 if (snapshot.connectionState == ConnectionState.done) {
 return Expanded(
 child: SizedBox(
 height: 35,
 child: ListView.builder(
 scrollDirection: Axis.horizontal,
 itemBuilder: (context, index) {
 final currentInterestId = "${datalist[index]['_id']}";
 return Wrap(
 direction: Axis.vertical,
 children: <Widget>[
 GestureDetector(
 onTap: (){
 log(currentInterestId);
 setState(() {
 selectedInterestId = selectedInterestId == currentInterestId ? null : currentInterestId;
 });
 },
 child: Container(
 margin: EdgeInsets.only(right: 7),
 height: 30,
 width: MediaQuery.of(context)
 .size
 .width / 5.2,
 decoration: BoxDecoration(
 color: selectedInterestId == currentInterestId ? Colors.white : Color(0xFFFFEBE7),
 border: Border.all(
 color: Color(0xFFE0E0E0)),
 borderRadius: const BorderRadius.only(
 topLeft: Radius.circular(50.0),
 topRight: Radius.circular(50.0),
 bottomRight: Radius.circular(50.0),
 bottomLeft: Radius.circular(0.0))),
 child: Center(
 child: Text(
 "${datalist[index]['iname']}",
 style: const TextStyle(
 fontFamily: 'Montserrat',
 color: Color(0xFFFF5E3A),
 fontSize: 13),
 ),
 ),
 ),
 ),
 ],
 );
 },
 itemCount: datalist.length,
 ),
 ),
 );
 }
 return const Padding(
 padding: EdgeInsets.only(left: 140.0),
 child: Center(
 child: CircularProgressIndicator(),
 ),
 );
 },
 )

为什么这样有效？ #

现在每个Container都会根据自己的ID和selectedInterestId做对比，只有ID完全匹配的那个会切换到白色背景，其他项保持原来的Color(0xFFFFEBE7)。同时新增了点击切换选中状态的逻辑，用户体验更完整。

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