如何点击AlertDialog的Done按钮后修改ElevatedButton的颜色？

要实现点击AlertDialog的“Done”按钮后将ElevatedButton从灰色改为黄色，需要通过状态管理来更新UI，具体实现步骤如下：

1. 将当前无状态组件改为有状态组件，用来维护按钮的颜色状态。
2. 在状态类中定义变量存储按钮颜色，初始值设为灰色。
3. 修改“Done”按钮的点击事件，在关闭弹窗的同时更新按钮颜色状态。

修改后的完整代码 #

import 'package:flutter/material.dart';

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

  @override
  State<CoursePage> createState() => _CoursePageState();
}

class _CoursePageState extends State<CoursePage> {
  // 维护按钮颜色的状态变量，初始为灰色
  Color _buttonColor = Colors.grey;

  @override
  Widget build(BuildContext context) {
    return Scaffold(
      appBar: AppBar(
        title: const Text('Fall 2022'),
        backgroundColor: Color.fromRGBO(37, 57, 92, 1.0),
      ),
      body: SafeArea(
        child: Center(
          child: Column(
            children: [
              const SizedBox(height: 60),
              ElevatedButton(
                // 使用状态变量设置按钮背景色
                style: ElevatedButton.styleFrom(backgroundColor: _buttonColor),
                child: Text(
                  'CSC 1351',
                  style: TextStyle(
                    color: Color.fromRGBO(37, 57, 92, 1.0),
                    fontSize: 20,
                  ),
                ),
                onPressed: () {
                  showDialog(
                    context: context,
                    builder: (context) => AlertDialog(
                      insetPadding: EdgeInsets.all(8.0),
                      shape: RoundedRectangleBorder(
                          borderRadius: BorderRadius.all(Radius.circular(10.0))),
                      title: Text('CSC 1351'),
                      content: Text(
                          'Intro to Computer Science for CS Majors \n \n9:30am - 10:30am  M W F Lecture    Shark, E \n stuff stuff stuff stuff stuff stuff stuff stuff stuff stuff stuff stuff stuff stuff'),
                      actions: [
                        TextButton(
                          child: Text('Ongoing'),
                          onPressed: () => Navigator.pop(context),
                        ),
                        TextButton(
                          child: Text('Done'),
                          onPressed: () {
                            // 更新按钮颜色状态
                            setState(() {
                              _buttonColor = Colors.yellow;
                            });
                            Navigator.pop(context);
                          },
                        ),
                      ],
                    ),
                  );
                },
              ),
            ],
          ),
        ),
      ),
    );
  }
}

关键修改说明 #

• 把原组件改为StatefulWidget，并在状态类中添加_buttonColor变量存储按钮颜色。
• 在ElevatedButton的style属性中绑定_buttonColor作为背景色。
• 调整“Done”按钮的点击逻辑：先调用setState()更新颜色状态，再关闭弹窗。Flutter会自动触发UI重构，将按钮颜色切换为黄色。

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