Flutter中.map()生成列表后点击单个项全部变色的解决方法

问题根源 #

你目前的问题是用了单个全局变量控制所有列表项的颜色状态，导致点击任意项时所有项同步变色。解决核心是给每个列表项单独维护状态。

具体实现步骤 #

1. 定义带状态的数据模型
   创建一个类存储每个规则项的内容、展开状态和点击状态：

class RuleItem {
  final String title;
  final String content;
  bool isExpanded;
  bool isClicked; // 标记是否被点击，用于切换颜色

  RuleItem({
    required this.title,
    required this.content,
    this.isExpanded = false,
    this.isClicked = false,
  });
}

2. 初始化列表数据
   在页面的State类中初始化规则列表：

late List<RuleItem> _ruleItems;

@override
void initState() {
  super.initState();
  _ruleItems = [
    RuleItem(title: "规则1", content: "规则1的详细说明内容"),
    RuleItem(title: "规则2", content: "规则2的详细说明内容"),
    // 可添加更多规则项
  ];
}

3. 构建带单项状态的ExpansionPanelList
   生成面板时，将每个面板的颜色和点击事件绑定到对应RuleItem的状态，点击时仅修改当前项的状态：

@override
Widget build(BuildContext context) {
  return ExpansionPanelList(
    expansionCallback: (int index, bool isExpanded) {
      setState(() {
        _ruleItems[index].isExpanded = !isExpanded;
      });
    },
    children: _ruleItems.map((item) {
      return ExpansionPanel(
        headerBuilder: (context, isExpanded) {
          return GestureDetector(
            onTap: () {
              setState(() {
                item.isClicked = !item.isClicked; // 仅切换当前项的状态
              });
            },
            child: Container(
              color: item.isClicked ? Colors.red : Colors.green,
              padding: const EdgeInsets.symmetric(horizontal: 16, vertical: 12),
              child: Text(item.title),
            ),
          );
        },
        body: Padding(
          padding: const EdgeInsets.all(16),
          child: Text(item.content),
        ),
        isExpanded: item.isExpanded,
      );
    }).toList(),
  );
}

关键注意事项 #

• 绝对不要用单个变量（比如bool _isClicked）控制所有项的颜色，必须让每个项拥有独立的状态
• 修改状态时必须在setState方法内执行，确保Flutter触发UI更新
• 如果用ListTile替代，同样要将颜色属性绑定到对应项的isClicked状态，而非全局变量

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