Flutter Beta 2更新后如何更新ListView？附代码示例

我看你已经搭好了基本框架，不过代码里有几处小疏漏（比如addNewNote方法缺闭合括号、build方法未完成），我帮你补全并优化成可直接运行的版本，同时给你讲讲关键要点：

import 'package:flutter/material.dart';

class Notes extends StatefulWidget {
  @override
  _NotesState createState() => _NotesState();
}

class _NotesState extends State<Notes> {
  // 用于存储所有ListTile的列表
  List<ListTile> notes = [];

  // 添加新笔记的方法
  void addNewNote() {
    setState(() {
      // 这里可以替换成动态内容，比如用户输入的文本
      notes.add(const ListTile(title: Text("Broccoli")));
    });
  }

  @override
  Widget build(BuildContext context) {
    return Scaffold(
      appBar: AppBar(title: const Text("我的笔记")),
      // 直接把notes列表作为ListView的子组件
      body: ListView(children: notes),
      // 添加触发按钮，方便测试添加功能
      floatingActionButton: FloatingActionButton(
        onPressed: addNewNote,
        child: const Icon(Icons.add),
      ),
    );
  }
}

核心细节说明： #

• 状态更新必须用setState：只有调用setState，Flutter才会感知到数据变化并重新渲染UI，新添加的ListTile才会显示出来。
• ListView的children参数：ListView的children接受一个List<Widget>类型的参数，所以直接传入存储ListTile的notes列表完全符合要求。
• 性能优化建议：如果后续笔记数量会很多，建议把数据和UI分离，比如用List<String>存储笔记内容，再用ListView.builder动态生成ListTile，这样只会渲染当前可见的项，性能更好：

  // 改成存储文本内容而非直接存Widget
  List<String> noteTexts = [];
  
  void addNewNote() {
    setState(() {
      noteTexts.add("Broccoli");
    });
  }
  
  // 用ListView.builder构建列表
  body: ListView.builder(
    itemCount: noteTexts.length,
    itemBuilder: (context, index) {
      return ListTile(title: Text(noteTexts[index]));
    },
  ),
  

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