如何将StatelessWidget改为StatefulWidget实现图标点击实时刷新？

你当前的代码通过全局变量修改图标，但因为SecondRoute是StatelessWidget，UI不会自动响应变量变化——只有StatefulWidget能通过setState触发UI重建，实现实时切换。下面是修改后的完整代码，完全保留原有UI结构，仅调整状态管理逻辑：

import 'package:flutter/material.dart';

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

  @override
  State<SecondRoute> createState() => _SecondRouteState();
}

class _SecondRouteState extends State<SecondRoute> {
  // 将全局状态移到State类内部，用单个IconData变量更简洁
  IconData _currentIcon = Icons.check_box;

  @override
  Widget build(BuildContext context) {
    return Scaffold(
      backgroundColor: Colors.blueGrey,
      body: Center(
        child: SafeArea(
          child: Column(
            children: <Widget>[
              Padding(
                padding: const EdgeInsets.all(8.0),
                child: AppBar(
                  backgroundColor: Colors.black,
                  title: const Text('your list'),
                ),
              ),
              const Padding(
                padding: EdgeInsets.all(8.0),
                child: TextField(
                  keyboardType: TextInputType.multiline,
                  minLines: 1,//Normal textInputField will be displayed
                  maxLines: 5,
                ),
              ),
              IconButton(
                onPressed: () {
                  // 调用setState更新状态，触发UI重建
                  setState(() {
                    _currentIcon = Icons.question_mark;
                  });
                },
                color: Colors.greenAccent,
                highlightColor: Colors.amberAccent,
                iconSize: 100,
                icon: Icon(_currentIcon),
              )
            ],
          ),
        ),
      ),
    );
  }
}

关键改动说明： #

• 转为StatefulWidget：把SecondRoute继承自StatelessWidget改成StatefulWidget，并创建对应的_SecondRouteState类，所有状态和UI构建逻辑都放到这个State类里。
• 状态私有化：移除全局的done列表，换成State类内的_currentIcon变量，避免全局状态污染，更符合Flutter的状态管理规范。
• 用setState触发更新：在IconButton的点击回调里，用setState包裹状态修改操作——Flutter会监听这个方法，自动重建当前Widget的UI，新图标就会实时显示，无需重启应用。

如果需要实现点击切换回原图标的逻辑，可以修改onPressed代码：

onPressed: () {
  setState(() {
    _currentIcon = _currentIcon == Icons.check_box ? Icons.question_mark : Icons.check_box;
  });
},

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