按钮灯光匹配交互实现问题：随机变色、状态存储及操作校验

1. 核心状态定义 #

用StatefulWidget管理页面状态，定义两个关键变量：

• currentTargetIndex：存储当前亮起的灯光索引（初始值设为-1表示无灯光亮起）
• lightColors：存储8个灯光的颜色数组，默认用暗色调，选中时切换为高亮色

2. 随机生成目标灯光 #

主按钮绑定点击事件，生成随机索引并更新灯光状态：

void generateRandomLight() {
  final random = Random();
  setState(() {
    // 重置所有灯光为默认灰色
    lightColors = List.generate(8, (_) => Colors.grey[300]!);
    // 随机选中一个灯光索引（0-7）
    currentTargetIndex = random.nextInt(8);
    // 将选中的灯光设为高亮色（比如蓝色）
    lightColors[currentTargetIndex] = Colors.blue;
  });
}

3. 灯光与按钮的UI绑定 #

灯光和普通按钮通过索引一一对应，用循环生成布局：

// 灯光展示区域
Row(
  children: List.generate(8, (index) {
    return Expanded(
      child: Container(
        height: 50,
        color: lightColors[index],
        margin: const EdgeInsets.all(4),
      ),
    );
  }),
),

// 8个普通按钮区域
Row(
  children: List.generate(8, (index) {
    return Expanded(
      child: ElevatedButton(
        // 无目标灯光时按钮置灰不可点击
        onPressed: currentTargetIndex == -1 ? null : () => checkButton(index),
        child: Text('按钮${index + 1}'),
      ),
    );
  }),
),

// 底部主按钮
ElevatedButton(
  onPressed: generateRandomLight,
  child: const Text('生成随机灯光'),
),

4. 按钮点击校验逻辑 #

实现校验方法，对比点击的按钮索引与目标灯光索引：

void checkButton(int pressedIndex) {
  if (pressedIndex == currentTargetIndex) {
    // 正确操作：比如弹出提示、积分累加
    ScaffoldMessenger.of(context).showSnackBar(
      const SnackBar(content: Text('正确！')),
    );
    // 可选：自动生成下一组灯光
    // generateRandomLight();
  } else {
    // 错误操作：弹出提示
    ScaffoldMessenger.of(context).showSnackBar(
      const SnackBar(content: Text('错误，请重试！')),
    );
  }
}

关于之前Key属性无效的说明 #

无需依赖Key识别组件，直接通过索引绑定的方式更直观可靠。Key多用于组件树的状态保留与复用，此处用索引关联灯光和按钮，逻辑更清晰，也能避免Key使用不当导致的问题。

内容的提问来源于stack exchange，提问作者מאי כהן