Flutter实现四个IconButton单选互斥功能的解决方案

你的问题出在每个按钮仅单独控制自身布尔状态，未联动重置其他按钮的状态，因此无法实现单选互斥。以下是两种可行的解决方案：

方案一：单个索引变量控制推荐 #

用一个变量记录当前选中按钮的索引，逻辑更简洁且易维护：

状态变量定义 #

// 初始值设为-1表示未选中任何按钮，0-3对应四个按钮的索引
int selectedIndex = -1;

修改后的布局代码 #

Row(
  mainAxisAlignment: MainAxisAlignment.spaceAround,
  children: [
    IconButton(
      onPressed: () {
        setState(() {
          // 点击已选中按钮则取消选中，否则设置为当前按钮索引
          selectedIndex = selectedIndex == 0 ? -1 : 0;
        });
      },
      icon: const Icon(Icons.music_note_outlined),
      color: selectedIndex == 0 ? Colors.green : Colors.black,
    ),
    IconButton(
      onPressed: () {
        setState(() {
          selectedIndex = selectedIndex == 1 ? -1 : 1;
        });
      },
      icon: const Icon(Icons.music_video_outlined),
      color: selectedIndex == 1 ? Colors.green : Colors.black,
    ),
    IconButton(
      onPressed: () {
        setState(() {
          selectedIndex = selectedIndex == 2 ? -1 : 2;
        });
      },
      icon: const Icon(Icons.headphones_outlined),
      color: selectedIndex == 2 ? Colors.green : Colors.black,
    ),
    IconButton(
      onPressed: () {
        setState(() {
          selectedIndex = selectedIndex == 3 ? -1 : 3;
        });
      },
      icon: const Icon(Icons.multitrack_audio_rounded),
      color: selectedIndex == 3 ? Colors.green : Colors.black,
    )
  ],
);

方案二：保留布尔变量并添加互斥逻辑 #

若坚持使用原布尔变量，需在点击按钮时强制重置其他按钮的状态：

修改后的onPressed逻辑以第一个按钮为例 #

onPressed: () {
  setState(() {
    // 切换当前按钮状态，同时将其他按钮设为未选中
    btn1 = !btn1;
    btn2 = false;
    btn3 = false;
    btn4 = false;
    // 可选：支持取消选中，当当前按钮原本选中时，将所有按钮设为未选中
    if (!btn1) {
      btn1 = false;
    }
  });
},

其余按钮的onPressed逻辑同理，点击时重置另外三个按钮的状态。

显然方案一更具优势，当按钮数量增加时，无需维护多个布尔变量，代码扩展性更强。

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