Flutter Dismissible组件问题：二次删除报错已 Dismissed 组件仍在树中

问题描述 #

首次删除购物车条目正常，二次删除时抛出错误：

A dismissed Dismissible widget is still part of the tree. Make sure to implement the onDismissed handler and to immediately remove the Dismissible widget from the application once that handler has fired.

尝试使用UniqueKey()未解决问题，代码如下：

import 'package:flutter/material.dart';
import 'package:provider/provider.dart';
import 'package:shop/models/cart.dart';
import 'package:shop/models/cart_item.dart';

class CartItemWidget extends StatelessWidget {
  final CartItem cartItem;
  const CartItemWidget(this.cartItem);

  @override
  Widget build(BuildContext context) {
    return Dismissible(
      key: ValueKey(cartItem.id),
      direction: DismissDirection.endToStart,
      background: Container(
        margin: EdgeInsets.symmetric(
          horizontal: 15,
          vertical: 4,
        ),
        color: Theme.of(context).colorScheme.error,
        child: Icon(
          Icons.delete,
          size: 30,
          color: Colors.white,
        ),
        padding: EdgeInsets.only(right: 10),
        alignment: Alignment.centerRight,
      ),
      onDismissed: (_) {
        Provider.of<Cart>(context, listen: false)
            .removeProduct(cartItem.productId);
      },
      child: Card(
        margin: EdgeInsets.symmetric(
          horizontal: 15,
          vertical: 4,
        ),
        child: Padding(
          padding: const EdgeInsets.all(8.0),
          child: ListTile(
              leading: CircleAvatar(
                backgroundColor: Theme.of(context).colorScheme.primary,
                child: Padding(
                  padding: const EdgeInsets.all(2),
                  child: FittedBox(
                    child: Text(
                      cartItem.price.toString(),
                      style: TextStyle(
                        color: Colors.white,
                      ),
                    ),
                  ),
                ),
              ),
              title: Text(cartItem.name),
              subtitle: Text("Total: ${cartItem.price * cartItem.quantity}"),
              trailing: Text("${cartItem.quantity}x")),
        ),
      ),
    );
  }
}

问题原因 #

1. Cart状态未正确通知UI更新：如果Cart类的removeProduct方法没有调用notifyListeners()，Provider不会触发UI刷新，导致被删除的Dismissible组件仍留在Widget树中。
2. 父列表未给CartItemWidget指定唯一Key：仅在Dismissible内部设置Key不够，父组件渲染列表时，每个CartItemWidget需要独立的Key，让Flutter能准确识别并移除对应的组件。

解决方案 #

1. 修复Cart类的removeProduct方法
   确保删除条目后调用notifyListeners()通知UI更新：

   class Cart with ChangeNotifier {
     Map<String, CartItem> _items = {};
   
     void removeProduct(String productId) {
       _items.removeWhere((key, item) => key == productId);
       notifyListeners(); // 必须调用此方法触发UI刷新
     }
   
     // 其他方法...
   }
   

2. 给父列表中的CartItemWidget添加唯一Key
   在渲染购物车列表的父组件中，给每个CartItemWidget指定Key：

   // 示例父组件中的列表渲染代码
   Consumer<Cart>(
     builder: (ctx, cart, child) {
       return ListView.builder(
         itemCount: cart.items.length,
         itemBuilder: (ctx, index) {
           final cartItem = cart.items.values.toList()[index];
           return CartItemWidget(
             cartItem,
             key: ValueKey(cartItem.id), // 这里添加唯一Key
           );
         },
       );
     },
   )
   

3. 验证Dismissible的Key有效性
   确保cartItem.id是唯一且不会重复使用的标识，避免删除后新条目复用旧ID导致的Key冲突。如果ID可能重复，可以改用UniqueKey()，但优先使用业务唯一ID。

总结 #

核心是保证状态更新时通知UI刷新，同时让列表中的每个组件都有唯一Key，确保Flutter能正确维护Widget树的状态，避免已销毁的Dismissible组件残留。

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