Flutter中点击RaisedButton后如何在指定区域显示图标？

你现在的问题在于直接在onPressed回调里创建Icon不会让它显示在界面上——Flutter的UI是通过build方法构建的Widget树来渲染的，回调里的Icon只是一个孤立的对象，没有被加入到Widget树中，所以不会被显示。

下面给你两种常见场景的解决方案：

场景1：在每个按钮旁边显示对错图标 #

如果希望点击某个按钮后，在该按钮旁边立刻显示图标，可以通过状态变量记录每个选项的选择状态，然后在build方法里根据状态渲染图标：

步骤1：定义状态变量 #

在你的State类里添加一个Map来记录每个选项的状态（未点击/正确/错误）：

Map<String, bool?> _answerStates = {}; // key是选项文本，value：null=未选，true=正确，false=错误
String answer = "Europe"; // 假设正确答案是Europe
List<String> _choice = ["Europe", "Asia", "Africa"];
int NumberChoice = 3;
Color _colorButton = Colors.blue; // 假设你的按钮颜色
int scoreResult = 0;

步骤2：修改按钮和图标渲染逻辑 #

把按钮和图标放在同一个Row里，根据_answerStates的状态决定是否显示图标：

@override
Widget build(BuildContext context) {
  return Scaffold(
    body: Padding(
      padding: EdgeInsets.all(16.0),
      child: Column(
        children: [
          // 循环生成按钮和对应图标
          for (var i = 0; i < NumberChoice; i++)
            Row(
              children: [
                RaisedButton(
                  color: _colorButton,
                  child: Text(
                    _choice[i],
                    style: TextStyle(fontSize: 20.0, color: Colors.white),
                  ),
                  onPressed: () {
                    setState(() {
                      bool isCorrect = _choice[i] == answer;
                      // 更新当前选项的状态
                      _answerStates[_choice[i]] = isCorrect;
                      scoreResult = isCorrect ? 1 : 0;
                      print(isCorrect 
                          ? "--------------- Correct ----------------" 
                          : "--------------- False ------------------------");
                    });
                  },
                ),
                SizedBox(width: 12), // 按钮和图标之间的间距
                // 这里就是你要显示图标的位置
                if (_answerStates[_choice[i]] != null)
                  Icon(
                    _answerStates[_choice[i]]! ? Icons.check : Icons.close,
                    color: _answerStates[_choice[i]]! ? Colors.green : Colors.red,
                    size: 24.0,
                  ),
              ],
              margin: EdgeInsets.symmetric(vertical: 8.0),
            ),
        ],
      ),
    ),
  );
}

场景2：在指定的独立区域显示图标 #

如果希望所有按钮的结果都显示在同一个固定区域（比如你标记的"Button here"位置），可以用单个状态变量记录当前选择的结果：

步骤1：定义状态变量 #

bool? _selectedResult; // null=未选择，true=正确，false=错误
String answer = "Europe";
List<String> _choice = ["Europe", "Asia", "Africa"];
int NumberChoice = 3;
Color _colorButton = Colors.blue;
int scoreResult = 0;

步骤2：渲染按钮和指定区域 #

@override
Widget build(BuildContext context) {
  return Scaffold(
    body: Padding(
      padding: EdgeInsets.all(16.0),
      child: Column(
        children: [
          // 循环生成按钮
          for (var i = 0; i < NumberChoice; i++)
            RaisedButton(
              color: _colorButton,
              child: Text(
                _choice[i],
                style: TextStyle(fontSize: 20.0, color: Colors.white),
              ),
              onPressed: () {
                setState(() {
                  bool isCorrect = _choice[i] == answer;
                  _selectedResult = isCorrect;
                  scoreResult = isCorrect ? 1 : 0;
                  print(isCorrect 
                      ? "--------------- Correct ----------------" 
                      : "--------------- False ------------------------");
                });
              },
              margin: EdgeInsets.symmetric(vertical: 8.0),
            ),
          SizedBox(height: 24),
          // 这里是你指定的显示图标的区域（标记为"Button here"的地方）
          Container(
            padding: EdgeInsets.all(16.0),
            decoration: BoxDecoration(
              border: Border.all(color: Colors.grey),
              borderRadius: BorderRadius.circular(8.0),
            ),
            child: _selectedResult != null
                ? Icon(
                    _selectedResult! ? Icons.check : Icons.close,
                    color: _selectedResult! ? Colors.green : Colors.red,
                    size: 48.0,
                  )
                : Text("Button here", style: TextStyle(fontSize: 18.0)),
          ),
        ],
      ),
    ),
  );
}

核心思路总结：

• Flutter的UI是响应式的，所有可见的Widget必须在build方法的Widget树中。
• 点击按钮后，通过setState更新状态变量，触发build方法重新执行，从而根据新状态渲染对应的图标。

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