Flutter中实现按钮点击切换两种图标的方法

核心思路 #

要实现点击切换图标，需要借助StatefulWidget管理可变状态，通过布尔变量标记当前显示的图标类型，点击时切换状态并触发UI更新。

完整实现代码 #

import 'package:flutter/material.dart';

class ToggleIconButton extends StatefulWidget {
  const ToggleIconButton({super.key});

  @override
  State<ToggleIconButton> createState() => _ToggleIconButtonState();
}

class _ToggleIconButtonState extends State<ToggleIconButton> {
  // 标记当前是否显示tick图标，初始为false（显示add）
  bool _isTicked = false;

  @override
  Widget build(BuildContext context) {
    return IconButton(
      icon: _isTicked ? const Icon(Icons.tick) : const Icon(Icons.add),
      onPressed: () {
        // 点击时切换状态，通知框架更新UI
        setState(() {
          _isTicked = !_isTicked;
        });
      },
    );
  }
}

代码说明 #

• 用StatefulWidget维护动态状态：图标切换属于可变状态，StatelessWidget无法自行更新UI，必须使用StatefulWidget。
• _isTicked状态变量：false对应显示Icons.add，true对应显示Icons.tick。
• setState()的作用：修改状态后调用该方法，Flutter会重新执行build方法，从而刷新图标显示。
• 简化逻辑：直接在IconButton的icon参数里通过三元表达式判断显示目标图标，无需额外的select函数。

对你原有代码的修正 #

你的代码存在两个核心问题：

1. 缺少状态管理逻辑：图标切换是动态变化的，必须用StatefulWidget来维护状态。
2. select函数语法错误：正确的三元表达式写法是条件 ? 真值 : 假值，但结合状态管理后，直接在build方法中处理逻辑更简洁。

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