Flutter中如何永久修改ElevatedButton按下后的背景颜色？

问题根源 #

你当前实现仅监听了MaterialState.pressed按下瞬时状态，松开后该状态移除，颜色就会恢复默认。要实现永久改色，需要新增状态变量持久化存储每个按钮的点击记录，配合setState触发UI重绘即可。

实现步骤 #

1. 在State类中新增存储按钮点击状态的列表，初始化时与wordlist长度匹配：

class YourWidgetState extends State<YourWidget> {
  // 存储对应索引按钮的点击状态，默认全为未点击
  List<bool> _btnClickedStatus = [];
  List buttonsList = [];
  List wordlist = ["按钮1", "按钮2", "按钮3"]; // 你自己的wordlist定义

  @override
  void initState() {
    super.initState();
    // 初始化状态列表，长度和wordlist完全对应
    _btnClickedStatus = List.generate(wordlist.length, (index) => false);
  }

2. 修改按钮构建逻辑，点击时更新对应索引的状态，背景色优先判断已点击状态：

List<Widget> _buildButtonsWithNames() {
  // 每次构建前清空列表，避免重复添加按钮
  buttonsList.clear();
  for (int i = 0; i < wordlist.length; i++) {
    buttonsList.add(
      ElevatedButton(
        onPressed: () {
          // 点击后更新状态，触发UI重绘
          setState(() {
            _btnClickedStatus[i] = true;
            // 如果需要点击切换颜色，替换为：_btnClickedStatus[i] = !_btnClickedStatus[i];
          });
        },
        child: Text(wordlist[i]),
        style: ButtonStyle(
          overlayColor: getColor(Colors.white, Colors.teal),
          backgroundColor: MaterialStateProperty.resolveWith((states) {
            // 只要已被点击过，永久返回目标色
            if (_btnClickedStatus[i]) {
              return Colors.red;
            }
            // 未点击时保留原有按下变色逻辑
            if (states.contains(MaterialState.pressed)) {
              return Colors.red;
            }
            return Colors.blue;
          }),
        ),
      ),
    );
  }
  return buttonsList;
}

// 原有getColor方法保留，用于overlayColor逻辑
MaterialStateProperty<Color> getColor(Color color, Color colorPressed) {
  final getColor = (Set<MaterialState> states) {
    if (states.contains(MaterialState.pressed)) {
      return colorPressed;
    } else {
      return color;
    }
  };
  return MaterialStateProperty.resolveWith(getColor);
}

注意事项 #

如果你的wordlist是动态更新的，需要在更新wordlist的同时同步修改_btnClickedStatus的长度，避免出现下标越界问题。

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