Flutter中如何根据点击切换容器的选中/未选中颜色？

• 维护选中状态
  根据需求选择合适的状态存储方式：

  • 多选场景：用Set<int>存储选中容器的索引，默认空集合表示都未选中
  • 单选场景：用int?存储当前选中的索引，默认null表示无选中

• 循环生成可点击容器
  通过List.generate配合GestureDetector实现点击交互，同时根据状态切换颜色：

  多选示例代码 #

  // 状态变量
  Set<int> selectedIndices = {};
  
  // 生成容器的Widget
  Wrap(
    spacing: 8,
    runSpacing: 8,
    children: List.generate(10, (index) {
      bool isSelected = selectedIndices.contains(index);
      return GestureDetector(
        onTap: () {
          setState(() {
            isSelected ? selectedIndices.remove(index) : selectedIndices.add(index);
          });
        },
        child: Container(
          width: 100,
          height: 100,
          color: isSelected ? Colors.blueAccent : Colors.grey[300],
          alignment: Alignment.center,
          child: Text('容器 $index'),
        ),
      );
    }),
  )
  

  单选示例代码 #

  // 状态变量
  int? selectedIndex;
  
  // 生成容器的Widget
  Wrap(
    spacing: 8,
    runSpacing: 8,
    children: List.generate(10, (index) {
      bool isSelected = selectedIndex == index;
      return GestureDetector(
        onTap: () {
          setState(() {
            selectedIndex = selectedIndex == index ? null : index;
          });
        },
        child: Container(
          width: 100,
          height: 100,
          color: isSelected ? Colors.blueAccent : Colors.grey[300],
          alignment: Alignment.center,
          child: Text('容器 $index'),
        ),
      );
    }),
  )
  

• 优化与扩展

  • 若容器数量较多，改用ListView.builder或Wrap.builder延迟加载，提升性能
  • 可额外添加边框、阴影等样式，强化选中状态的视觉反馈
  • 必须通过setState更新状态，触发UI重建刷新颜色

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