Flutter技术问题：AlertDialog输入添加至ListView后视图不刷新

刚看了你的代码，问题主要出在状态管理的时机和变量作用域上，我给你拆解一下问题，再给你修改后的代码：

问题分析 #

• 变量定义位置错误：你把item列表和temp变量放在了build方法里，每次setState触发UI重建时，build方法会重新执行，这两个变量都会被重新初始化（item=['HI']），之前添加的内容直接就没了。
• 异步操作的顺序问题：createAlertDialog是异步方法，你在调用它之后立刻就执行了setState，这时候then回调还没拿到用户输入的onValue，temp还是null，所以item.add(temp)其实加了个空值，而且这时候的setState也不会等到用户输入完成再更新UI。

修改后的完整代码 #

class YourWidgetState extends State<YourWidget> {
  // 把变量移到State类的成员位置，避免每次build重置
  List<String> item = ['HI'];
  String? temp;

  Future<String> createAlertDialog(BuildContext context) {
    TextEditingController customController = TextEditingController();
    return showDialog(
        context: context,
        builder: (context) {
          return AlertDialog(
            title: const Text("Enter URL: "),
            content: TextField(
              controller: customController,
            ),
            actions: [
              MaterialButton(
                elevation: 5.0,
                child: const Text("OK"),
                onPressed: () {
                  Navigator.of(context).pop(customController.text.toString());
                },
              )
            ],
          );
        });
  }

  @override
  Widget build(BuildContext context) {
    return Scaffold(
      appBar: AppBar(
        title: const Text("Shortie"),
      ),
      body: Padding(
        padding: const EdgeInsets.all(8.0),
        child: ListView(
          children: item.map((element) => Text(element)).toList(),
        ),
      ),
      floatingActionButton: FloatingActionButton(
        onPressed: () {
          // 把setState放在then回调里，确保拿到用户输入后再更新状态
          createAlertDialog(context).then((onValue) {
            temp = onValue;
            setState(() {
              item.add(temp!); // 这里因为onValue是用户输入的字符串，所以可以用!或者做空判断
              print(item);
            });
          });
        },
        tooltip: 'Add URL',
        child: const Icon(Icons.add),
      ),
    );
  }
}

关键修改点说明 #

• 成员变量定义：将item和temp从build方法移到State类的成员位置，这样它们的生命周期和Widget的State一致，不会每次UI重建就被重置。
• 异步回调内更新状态：把setState放在createAlertDialog的then回调里面，这样只有当用户点击OK、我们拿到输入内容后，才会更新列表并触发UI刷新，保证数据和UI同步。
• 类型安全优化：把List item改成List<String> item，这样更符合Dart的类型安全规范，避免潜在的类型错误。

这样修改之后，你点击FAB弹出对话框输入内容，点击OK后，ListView就会立刻显示新添加的项啦～

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