Flutter中选中单个容器时自动取消其他容器选中状态的实现方法

你原来的实现是每个容器维护独立的选中状态，自然会出现多选的情况。改成用单个变量记录当前选中的容器标识即可实现单选效果，修改方案如下：

步骤1：替换状态变量 #

把原来3个独立的bool变量替换为1个记录选中容器ID的变量：

// 替换原来的三个bool变量，值为1/2/3时对应选中对应容器，为null时全部未选中
int? selectedContainerId;

步骤2：修改每个Container的点击逻辑与样式判断 #

三个GestureDetector分别修改为如下逻辑：

// 第一个容器
GestureDetector(
  onTap: (){
    setState(() {
      // 如果当前选中的就是第一个，点击就取消选中，否则设为选中第一个
      selectedContainerId = selectedContainerId == 1 ? null : 1;
    });
  },
  child: Container(
    decoration: BoxDecoration(
      color: selectedContainerId == 1 ? Colors.orange : Colors.white,
    ),
  ),
),

// 第二个容器
GestureDetector(
  onTap: (){
    setState(() {
      selectedContainerId = selectedContainerId == 2 ? null : 2;
    });
  },
  child: Container(
    decoration: BoxDecoration(
      color: selectedContainerId == 2 ? Colors.orange : Colors.white,
    ),
  ),
),

// 第三个容器
GestureDetector(
  onTap: (){
    setState(() {
      selectedContainerId = selectedContainerId == 3 ? null : 3;
    });
  },
  child: Container(
    decoration: BoxDecoration(
      color: selectedContainerId == 3 ? Colors.orange : Colors.white,
    ),
  ),
),

可选优化方案 #

如果后续容器数量可能增加，可以进一步封装为可复用的循环渲染逻辑，不用重复写多份GestureDetector代码：

// 容器配置列表，可随意扩展数量
int containerCount = 3;
int? selectedIndex;

// 循环渲染容器
Column(
  children: List.generate(containerCount, (index) => GestureDetector(
    onTap: (){
      setState(() {
        selectedIndex = selectedIndex == index ? null : index;
      });
    },
    child: Container(
      decoration: BoxDecoration(
        color: selectedIndex == index ? Colors.orange : Colors.white,
      ),
    ),
  )),
)

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