Flutter/Dart中如何删除列表内的作者条目？

要实现删除作者条目功能，按以下步骤修改代码：

1. 给ItemAutor组件添加删除按钮与回调 #

修改ItemAutor，新增删除按钮和回调参数，让父组件能处理删除逻辑：

class ItemAutor extends StatelessWidget {
  final Autor _autor;
  final VoidCallback onDelete; // 新增删除回调

  const ItemAutor(this._autor, {required this.onDelete, super.key});

  @override
  Widget build(BuildContext context) {
    return Card(
      child: ListTile(
        title: Text(_autor.nome),
        subtitle: Text(_autor.anoNascimento.toString()),
        trailing: IconButton( // 新增右侧删除按钮
          icon: const Icon(Icons.delete, color: Colors.red),
          onPressed: onDelete,
        ),
      ),
    );
  }
}

2. 在ListAutor中实现删除逻辑并绑定到子组件 #

同时修复原代码中的拼写错误（boby改为body、list<Autor>改为List<Autor>）：

class ListAutor extends StatefulWidget {
  final List<Autor> _autores = []; // 修正List首字母大写
  ListAutor({super.key});

  @override
  State<ListAutor> createState() => _ListAutorState();
}

class _ListAutorState extends State<ListAutor> {
  // 新增删除方法，通过索引删除条目
  void _deleteAutor(int index) {
    setState(() {
      widget._autores.removeAt(index);
    });
  }

  @override
  Widget build(BuildContext context) {
    return Scaffold(
      appBar: AppBar(
        title: const Text('Lista de Autores'),
      ),
      body: ListView.builder( // 修正boby为body
        itemCount: widget._autores.length,
        itemBuilder: (context, index) {
          final autor = widget._autores[index];
          // 给每个条目绑定删除回调
          return ItemAutor(autor, onDelete: () => _deleteAutor(index));
        },
      ),
      floatingActionButton: FloatingActionButton(
        child: const Icon(Icons.add),
        onPressed: () {
          Navigator.push(context, MaterialPageRoute(builder: (context) {
            return const FormAutor();
          })).then((autor) {
            if (autor != null) {
              setState(() {
                widget._autores.add(autor);
              });
            }
          });
        },
      ),
    );
  }
}

3. 修复其他代码小问题 #

• Autor.dart中Class改为小写class：

class Autor {
  final String nome;
  final int anoNascimento;
  
  Autor(this.nome, this.anoNascimento);
}

• Form.dart中修正变量类型大写、补全输入框装饰的逗号，新增非空校验：

// 修正输入框装饰的逗号
Padding(
  padding: const EdgeInsets.all(16.0),
  child: TextField(
    controller: _ctrlNome,
    decoration: const InputDecoration(
      labelText: 'Nome do autor',
      hintText: 'Joaquim da Silva'
    ),
    keyboardType: TextInputType.text,
  ),
),

// 保存按钮逻辑修正
FloatingActionButton(
  child: const Icon(Icons.save),
  onPressed: (){
    final int? anoNascimento = int.tryParse(_ctrlAno.text);
    final String nome = _ctrlNome.text; // 修正String首字母大写
    // 新增非空校验，避免创建空数据
    if(anoNascimento != null && nome.isNotEmpty) {
      final autor = Autor(nome, anoNascimento);
      Navigator.pop(context, autor);
    }
})

修改完成后，每个作者条目右侧会显示红色删除按钮，点击即可移除对应条目，界面会自动刷新。

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