Flutter/Dart调用setState后Text Widget的文本内容未刷新如何解决

问题原因与解决方案 #

导致setState打印正常但UI不更新的核心原因是状态管理不符合Flutter的State生命周期规范，按以下步骤修改即可解决：

1. 移除全局状态，改为State类内部持有实例属性
   UI渲染依赖的状态必须放在对应StatefulWidget的State类内部作为成员属性，全局变量不受State的重绘逻辑管控，很容易出现同步异常。
2. 禁止在build方法中给状态变量赋初始值
   setState触发后会重新执行build方法，如果在build里给ganzerChat/chatverlauf赋值初始空值，刚更新的状态会被直接覆盖，导致UI无变化。
3. 清理冗余的状态操作逻辑
   getDataFromYourApi中不需要提前清空全局变量，直接返回接口拿到的列表即可，所有状态更新统一放在setState回调中处理。

修正后的完整代码 #

import 'package:flutter/material.dart';
import 'package:http/http.dart' as http;
import 'dart:convert';

// 替换成你的接口地址
const url = "你的接口URL";

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

  @override
  State<Chat> createState() => _ChatState();
}

class _ChatState extends State<Chat> {
  // 所有UI相关状态统一放在State内部作为私有属性
  List<String> chatverlauf = [];
  String ganzerChat = "";
  final TextEditingController eingabecontroller = TextEditingController();

  Future<List<String>> getDataFromYourApi() async {
    List<String> tmp = [];
    final response = await http.get(Uri.parse(url));
    final extractedData = json.decode(response.body) as Map<String, dynamic>;
    extractedData.forEach((id, data) {
      tmp.add("${data["name"]}: ${data["text"]}");
    });
    return tmp;
  }

  Future<void> loadChat() async {
    final newChatList = await getDataFromYourApi();
    // 所有状态修改放在setState内部
    setState(() {
      chatverlauf = newChatList;
      ganzerChat = chatverlauf.join("\n");
      print(ganzerChat);
    });
  }

  @override
  Widget build(BuildContext context) {
    // 不要在此处给ganzerChat、chatverlauf赋初始值
    return Scaffold(
      appBar: AppBar(
        title: const Text("Chat"),
      ),
      body: Container(
        alignment: Alignment.center,
        child: Column(
          mainAxisAlignment: MainAxisAlignment.end,
          children: <Widget>[
            Container(
              margin: const EdgeInsets.only(right: 20, bottom: 50),
              alignment: Alignment.centerRight,
              child: Text(
                ganzerChat,
                textAlign: TextAlign.right,
              ),
            ),
            Row(
              mainAxisAlignment: MainAxisAlignment.spaceBetween,
              children: <Widget>[
                Container(
                  width: 300,
                  color: Colors.grey,
                  child: TextField(controller: eingabecontroller),
                ),
                ElevatedButton(
                  onPressed: () async {
                    await loadChat();
                  },
                  child: const Text("Senden"),
                ),
              ],
            ),
          ],
        ),
      ),
    );
  }

  @override
  void dispose() {
    // 及时释放控制器避免内存泄漏
    eingabecontroller.dispose();
    super.dispose();
  }
}

如果修改后仍有问题，可以在build方法中加入print("build时ganzerChat值：$ganzerChat")，确认重绘时的状态值是否符合预期，即可快速定位问题。

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