Flutter中如何通过按钮onPressed调用remove()和setState删除Stateful组件列表元素

问题原因&修复方案 #

1. 子组件内删除回调未正确执行 #

你在QuoteCard的TextButton中配置的点击事件没有实际触发传入的delete方法：
原错误代码：

TextButton(
    onPressed: (){ delete; },
    // 其余代码省略
)

这里的delete只是对函数的引用，没有执行调用，两种修复方式二选一即可：

• 直接将delete函数赋值给点击回调：

TextButton(
    onPressed: delete,
    // 其余代码省略
)

• 在匿名函数中执行delete调用：

TextButton(
    onPressed: (){ delete(); },
    // 其余代码省略
)

2. 自定义Quote类未重写相等判断逻辑 #

Dart默认对自定义类的相等判断是匹配内存地址，如果你的Quote类没有重写==运算符和hashCode，List.remove()方法会无法匹配到列表中对应的条目，导致删除失败。需要给Quote类补充以下逻辑：

class Quote {
  final String quote;
  final String author;
  Quote({required this.quote, required this.author});

  @override
  bool operator ==(Object other) =>
      identical(this, other) ||
      other is Quote &&
          runtimeType == other.runtimeType &&
          quote == other.quote &&
          author == other.author;

  @override
  int get hashCode => quote.hashCode ^ author.hashCode;
}

可选优化 #

你当前使用Column承载卡片列表，当条目数量超出屏幕高度时会出现溢出报错，建议替换为ListView组件：

@override
Widget build(BuildContext context) {
  return Scaffold(
    backgroundColor: Colors.grey[200],
    appBar: AppBar(
      title: Text('Awesome Quotes'),
      centerTitle: true,
      backgroundColor: Colors.redAccent,
    ),
    // 把Column换成ListView
    body: ListView(
      children: quotes.map((quote) => QuoteCard(
          quote:quote,
          delete:(){
              setState(() {
                quotes.remove(quote);
              });
          }
      )).toList(),
    ),
  );
}

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