Flutter中如何创建ListTile列表？实现增删并在ListView展示

嘿，我来帮你理顺这个ListTile列表的实现问题，你的代码里有几个容易踩的Flutter坑，我一步步给你修正：

先说说原代码里的核心问题 #

• 绝对不要在build方法里修改列表数据：build会在Widget重建时反复调用，你现在每次build都往notes里加新的ListTile，会导致列表无限增长，不仅性能爆炸，还完全不符合你跟踪条目的需求。
• 未初始化列表：Notes类里的notes变量没有初始化，直接使用会触发空指针错误。
• ListView子项语法错误：你写的<ListTile>[ notes[0]...完全不符合Dart语法，正确的做法是直接传入整个列表或者用展开运算符处理。
• 缺少增删条目的交互逻辑：你需要手动触发增删操作，而不是自动添加条目。

修正后的完整代码 #

import 'package:flutter/material.dart';

class Notes extends StatefulWidget {
  // 初始化列表，避免空指针异常
  List<ListTile> notes = [];
  Notes({super.key});

  @override
  _NotesState createState() => _NotesState();
}

class _NotesState extends State<Notes> {
  // 用于输入新笔记标题的控制器
  final TextEditingController _titleController = TextEditingController();

  // 添加新笔记的方法
  void _addNote() {
    if (_titleController.text.trim().isNotEmpty) {
      setState(() {
        widget.notes.add(ListTile(
          title: Text(_titleController.text),
          trailing: IconButton(
            icon: const Icon(Icons.delete_outline),
            onPressed: () => _removeNote(widget.notes.length - 1),
          ),
        ));
      });
      _titleController.clear();
    }
  }

  // 移除指定索引笔记的方法
  void _removeNote(int index) {
    setState(() {
      widget.notes.removeAt(index);
    });
  }

  @override
  Widget build(BuildContext context) {
    return Scaffold(
      appBar: AppBar(title: const Text('我的笔记')),
      body: Column(
        children: [
          // 顶部输入栏+添加按钮
          Padding(
            padding: const EdgeInsets.symmetric(horizontal: 12, vertical: 8),
            child: Row(
              children: [
                Expanded(
                  child: TextField(
                    controller: _titleController,
                    decoration: const InputDecoration(
                      hintText: '输入笔记标题',
                      border: OutlineInputBorder(),
                    ),
                  ),
                ),
                const SizedBox(width: 8),
                ElevatedButton(
                  onPressed: _addNote,
                  child: const Icon(Icons.add),
                ),
              ],
            ),
          ),
          // 笔记列表展示区
          Expanded(
            child: ListView(
              children: widget.notes,
            ),
          ),
        ],
      ),
    );
  }

  @override
  void dispose() {
    // 释放控制器资源，避免内存泄漏
    _titleController.dispose();
    super.dispose();
  }
}

关键修改说明 #

1. 列表初始化：在Notes类里直接给notes赋初始空列表，彻底避免空指针问题。
2. 状态更新规范：把增删逻辑放到独立方法里，通过setState()触发UI重建，这是Flutter状态管理的正确姿势。
3. 交互功能完善：添加了输入框和添加按钮，每个ListTile右侧加了删除按钮，实现完整的增删操作。
4. 资源清理：重写dispose()方法释放文本控制器，避免内存泄漏。
5. 正确的ListView用法：直接把widget.notes传给ListView的children，因为它本身就是List<ListTile>类型，完全符合参数要求。

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