Flutter列表添加项后界面不更新问题及Key用法咨询

1. UI不更新的核心原因 #

你遇到的UI不更新问题和Key几乎无关，核心是状态变更没通知Flutter框架触发重建。点击FAB时print能执行，说明逻辑代码在正常运行，但如果修改列表、计数器的操作没包裹在setState(() { ... })里，Flutter根本不知道状态发生了变化，自然不会重新渲染界面。调整浏览器窗口时，框架会触发全局重建，所以才会显示出更新后的内容。

解决方法很直接：把所有修改状态的代码（比如计数器自增、添加列表项）放进setState回调里，示例如下：

floatingActionButton: FloatingActionButton(
  onPressed: () {
    setState(() { // 必须用setState包裹状态变更
      counter++;
      yourList.add(counter);
      print(counter);
    });
  },
  child: const Icon(Icons.add),
),

2. 关于Key的使用疑问 #

ValueKey<int>(counter++)是否合适？ #

要看你的列表项场景：

• 如果counter是每个列表项的唯一标识（比如后端返回的ID、自增的唯一序号），用ValueKey绑定这个值是非常合适的。它能让Flutter在列表增删、顺序变化时，准确识别每个Widget的身份，避免状态复用错误（比如列表项带输入框时，删除中间项后输入状态不会串位）。
• 如果只是临时给每个项一个唯一Key，UniqueKey也能用，但ValueKey更有语义，可读性更强。

为什么换UniqueKey没用？ #

因为你的问题根源不在Key——Key是帮框架识别Widget身份的工具，不是触发UI更新的开关。哪怕Key用对了，没调用setState通知状态变更，UI还是不会更新。

完整可运行示例代码 #

import 'package:flutter/material.dart';

void main() => runApp(const MyApp());

class MyApp extends StatelessWidget {
  const MyApp({super.key});

  @override
  Widget build(BuildContext context) {
    return MaterialApp(
      title: 'List Demo',
      home: const MyHomePage(),
    );
  }
}

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

  @override
  State<MyHomePage> createState() => _MyHomePageState();
}

class _MyHomePageState extends State<MyHomePage> {
  int counter = 0;
  final List<int> items = [];

  @override
  Widget build(BuildContext context) {
    return Scaffold(
      appBar: AppBar(title: const Text('List Demo')),
      body: ListView.builder(
        itemCount: items.length,
        itemBuilder: (context, index) {
          // 用列表项的唯一值作为ValueKey
          return ListTile(
            key: ValueKey<int>(items[index]),
            title: Text('Item ${items[index]}'),
          );
        },
      ),
      floatingActionButton: FloatingActionButton(
        onPressed: () {
          setState(() {
            counter++;
            items.add(counter);
            print(counter);
          });
        },
        child: const Icon(Icons.add),
      ),
    );
  }
}

内容的提问来源于stack exchange，提问作者gitman-2021