IconButton的selectedIcon无法切换问题求助

我最近碰到个Flutter的小问题，卡了好半天：点击IconButton的播放图标时，它本该切换成暂停图标，但现在完全没反应。我已经在点击事件里修改了task.isRecording的状态，而且每次点击都会打印这个值，能看到它在true和false之间正常切换，但IconButton就是一直显示最初的播放图标，selectedIcon完全没生效。

下面是我的代码，麻烦帮我看看哪里出问题了：

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

  @override
  State<TestScreen> createState() => _TestScreenState();
}

class _TestScreenState extends State<TestScreen> {
  Task task = Task(name: 'Test Task', order: 0, isRecording: false);

  @override
  Widget build(BuildContext context) {
    print(task.isRecording);
    return Scaffold(
      appBar: AppBar(
        title: const Text('Test Screen'),
      ),
      body: Center(
        child: IconButton(
          icon: const Icon(Icons.play_arrow),
          isSelected: task.isRecording,
          selectedIcon: const Icon(Icons.pause),
          onPressed: () {
            setState(() {
              task.isRecording = !task.isRecording;
            });
          },
        ),
      ),
    );
  }
}

可能的原因和解决方案 #

我琢磨了下，大概率是Flutter对对象内部属性的变化感知不够灵敏——虽然你调用了setState触发了build，但绑定isSelected的是task对象的内部属性，有时候会出现更新不及时的情况。这里有两个简单的解决办法：

方法一：把状态单独抽出来作为State的成员变量

把isRecording从task对象里单独拿出来，作为State类的成员变量，这样状态变化会更直接，Flutter能准确感知到：

class _TestScreenState extends State<TestScreen> {
  bool _isRecording = false;
  Task task = Task(name: 'Test Task', order: 0, isRecording: false);

  @override
  Widget build(BuildContext context) {
    print(_isRecording);
    return Scaffold(
      appBar: AppBar(
        title: const Text('Test Screen'),
      ),
      body: Center(
        child: IconButton(
          icon: const Icon(Icons.play_arrow),
          isSelected: _isRecording,
          selectedIcon: const Icon(Icons.pause),
          onPressed: () {
            setState(() {
              _isRecording = !_isRecording;
              // 同步更新task对象的状态
              task.isRecording = _isRecording;
            });
          },
        ),
      ),
    );
  }
}

方法二：直接在icon参数里判断切换

不用selectedIcon和isSelected，直接根据状态动态生成图标，这种方式更直观，也不容易出问题：

IconButton(
  icon: Icon(_isRecording ? Icons.pause : Icons.play_arrow),
  onPressed: () {
    setState(() {
      _isRecording = !_isRecording;
      task.isRecording = _isRecording;
    });
  },
)

你可以试试这两种方法，应该能解决图标不切换的问题。

备注：内容来源于stack exchange，提问作者tazboy