Flutter中点击GestureDetector图标同步更新IconButton的实现疑问

1. 新增状态变量存储选中图标 #

在你的State类中添加变量，用来保存当前选中的图标，初始值设为IconButton默认显示的Iconsax.lamp：

IconsaxData? _selectedRoomIcon = Iconsax.lamp;

2. 更新GestureDetector的点击逻辑 #

给每个GestureDetector的onTap方法添加更新选中图标并收起选择面板的逻辑：

GestureDetector(
  onTap: () {
    setState(() {
      _selectedRoomIcon = Iconsax.music;
      isExpanded = false; // 选完图标后自动收起选择区域
    });
  },
  child: const Icon(Iconsax.music, color: Colors.deepPurple),
),
GestureDetector(
  onTap: () {
    setState(() {
      _selectedRoomIcon = Iconsax.pet;
      isExpanded = false;
    });
  },
  child: const Icon(Iconsax.pet, color: Colors.deepPurple),
),
GestureDetector(
  onTap: () {
    setState(() {
      _selectedRoomIcon = Iconsax.lamp4;
      isExpanded = false;
    });
  },
  child: const Icon(Iconsax.lamp4, color: Colors.deepPurple),
),
GestureDetector(
  onTap: () {
    setState(() {
      _selectedRoomIcon = Iconsax.devices;
      isExpanded = false;
    });
  },
  child: const Icon(Iconsax.devices, color: Colors.deepPurple),
),

3. 修改IconButton的显示逻辑 #

把IconButton的固定图标替换为存储的选中图标，同时保留原有的展开/收起逻辑：

IconButton(
  onPressed: () {
    setState(() {
      isExpanded = !isExpanded;
    });
  },
  tooltip: 'Change room icon',
  icon: Icon(_selectedRoomIcon ?? Iconsax.lamp, color: AppColor.primaryColor, size: 25),
),

4. 控制图标选择区域的显示/隐藏 #

用isExpanded变量控制上方图标选择列表的显示状态，比如用Visibility组件包裹：

Visibility(
  visible: isExpanded,
  child: Row(
    mainAxisAlignment: MainAxisAlignment.spaceAround,
    children: [
      // 放入四个GestureDetector图标
    ],
  ),
)

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