Flutter调用setState后ListView未更新的问题

你遇到的问题是：调用setState后控制台打印列表长度为0，但ListView完全没变化。这是因为直接修改现有列表的内容（比如clear()）时，列表对象的引用没改变，Flutter的UI更新机制无法识别到内部元素的变化，所以没触发ListView的刷新。

解决办法1：创建新的列表实例 #

修改FloatingActionButton的onPressed方法，在setState里重新赋值一个新的空列表，让列表的引用发生变化：

floatingActionButton: FloatingActionButton(
  child: Icon(Icons.delete),
  onPressed: (){
    setState(() {
      widget_list = []; // 替换成新的空列表，改变引用
    });
  },
),

如果是删除部分元素，同样要创建新列表，比如：

widget_list = List.from(widget_list)..removeAt(0);

解决办法2：使用ListView.builder（推荐） #

直接存Widget列表不是最佳实践，更推荐用数据列表配合ListView.builder构建列表。这种方式是按需渲染，且能自动识别数据变化，性能也更好：

class _ListTestState extends State<ListTest> {
  // 用数据列表替代Widget列表
  List<String> dataList = ["1", "2", "3"];

  @override
  Widget build(BuildContext context) {
    print("List Length: "+dataList.length.toString());
    return Scaffold(
      appBar: AppBar(
        title: Text("List Test"),
      ),
      body: ListView.builder(
        itemCount: dataList.length,
        itemBuilder: (context, index) {
          return ListTile(title: Text(dataList[index]));
        },
      ),
      floatingActionButton: FloatingActionButton(
        child: Icon(Icons.delete),
        onPressed: (){
          setState(() {
            dataList.clear();
          });
        },
      ),
    );
  }
}

这里即使调用dataList.clear()，setState后itemCount变为0，ListView.builder会自动刷新UI。

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