Flutter删除列表元素后如何刷新ListView.builder渲染的列表？

实现逻辑和你之前用Column时的思路完全一致，依旧是通过父组件传递回调函数给子组件，子组件删除成功后触发回调通知父组件更新数据触发刷新即可，ListView.builder本身不需要额外特殊处理。

第一步：修改父组件逻辑 #

你需要将FutureBuilder返回的会话列表存储为父组件的状态变量，方便后续修改：

class ParentWidgetState extends State<ParentWidget> {
  List<Conversation> _conversations = [];
  // 把列表请求方法提前定义，避免FutureBuilder重复触发请求
  late Future<List<Conversation>> _loadConversations;

  @override
  void initState() {
    super.initState();
    // 替换为你实际的列表请求接口
    _loadConversations = MyWS().getConversations();
  }

  @override
  Widget build(BuildContext context) {
    return FutureBuilder(
      future: _loadConversations,
      builder: (context, snapshot) {
        if (snapshot.hasData) {
          _conversations = snapshot.data as List<Conversation>;
          return ListView.builder(
            itemCount: _conversations.length,
            itemBuilder: (context, index) {
              Conversation conversation = _conversations[index];
              return ConversationSingle(
                conversation: conversation,
                // 新增删除回调参数
                onDelete: (deletedConversation) {
                  // 移除对应项后调用setState刷新
                  setState(() {
                    _conversations.remove(deletedConversation);
                    // 按索引删除效率更高，也可以写为 _conversations.removeAt(index);
                  });
                },
              );
            },
          );
        }
        // 加载、错误状态保持你原有逻辑即可
        return const CircularProgressIndicator();
      },
    );
  }
}

第二步：修改子组件ConversationSingle代码 #

先在子组件中定义回调参数，删除成功后触发回调即可：

class ConversationSingle extends StatefulWidget {
  final Conversation conversation;
  // 新增删除回调参数
  final ValueChanged<Conversation> onDelete;
  const ConversationSingle({
    super.key,
    required this.conversation,
    required this.onDelete,
  });

  @override
  State<ConversationSingle> createState() => _ConversationSingleState();
}

// 子组件内部点击逻辑修改
child: GestureDetector(
  onTap: () async {
    bool deleted = await MyWS().delete(widget.conversation);
    if (deleted) {
      // 删除成功后触发父组件回调更新列表
      widget.onDelete(widget.conversation);
    }
  },
  child: SvgPicture.asset(
    getAssetImage('corbeille.svg'),
  ),
),

补充说明 #

如果你的业务场景需要删除后重新拉取全量列表保证数据准确性，不需要本地修改列表的话，也可以在回调中重新触发列表请求、赋值给_loadConversations后调用setState，FutureBuilder会自动重新加载新的列表数据渲染，效果一致。
ListView.builder和Column的渲染逻辑本质都是基于父组件的数据源，只要数据源发生变化且触发了setState，组件就会自动按照新的数据源渲染，不需要对ListView做额外适配。

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