Flutter购物车开发：ListView.builder中结合自定义卡片与Dismissible实现增删

核心实现逻辑：Dismissible 是容器类组件，直接将自定义 CartCard 作为它的 child 参数嵌套传入即可，无需在列表项中单独返回两个组件，滑动删除逻辑在 Dismissible 的 onDismissed 回调中处理即可。

实现注意要点 #

• Dismissible 的 key 必须为全局唯一值，推荐使用商品本身的唯一ID作为key，不要直接用列表索引，避免列表刷新时出现组件错乱问题
• 滑动删除完成后需要调用 setState 同步更新 cartProducts 列表数据，才能触发UI刷新完成删除操作

修改后完整代码 #

class CartScreen extends StatefulWidget {
  @override
  _CartScreenState createState() => _CartScreenState();
}

class _CartScreenState extends State<CartScreen> {
  List<Product> cartProducts = [];
  @override
  Widget build(BuildContext context) {
    return Scaffold(
      appBar: AppBar(
        actions: [
          IconButton(
              icon: Icon(Icons.home_rounded),
              onPressed: () {
                Navigator.pushNamed(context, 'homeScreen');
              })
        ],
        title: Text('购物车'),
        flexibleSpace: Container(
          decoration: BoxDecoration(
              gradient: LinearGradient(
                  begin: Alignment.bottomLeft,
                  end: Alignment.topRight,
                  colors: <Color>[
                    kCostumeBlueColor6,
                    kCostumeBlueColor5,
                  ])),
        ),
      ),
      body: ListView.builder(
        itemBuilder: (context, index) {
          final currentProduct = cartProducts[index];
          return Dismissible(
            // 用商品唯一ID作为key，这里假设Product类有id字段，可根据你的实际字段调整
            key: Key(currentProduct.id.toString()),
            // 配置左滑删除的背景样式，可自定义
            background: Container(
              color: Colors.red,
              alignment: Alignment.centerRight,
              padding: EdgeInsets.only(right: 20),
              child: Icon(Icons.delete, color: Colors.white),
            ),
            // 配置滑动删除的方向，可选左右滑、仅左滑、仅右滑等
            direction: DismissDirection.endToStart,
            // 删除完成后的回调
            onDismissed: (direction) {
              setState(() {
                // 从列表中移除当前商品
                cartProducts.removeAt(index);
              });
              // 可选：弹出删除成功提示
              ScaffoldMessenger.of(context).showSnackBar(
                SnackBar(content: Text('${currentProduct.getProductName()} 已从购物车移除'))
              );
            },
            // 嵌套你的自定义商品卡片
            child: CartCard(
              image: NetworkImage('link'), 
              productName: currentProduct.getProductName(), 
              price: currentProduct.getPrice(),
            ),
          );
        },
        itemCount: cartProducts.length,
      )
    );
  }
}

可选优化点 #

• 可以通过 confirmDismiss 参数配置删除二次确认弹窗，避免用户误删
• 可以自定义不同滑动方向对应的操作，比如左滑删除、右滑加入收藏

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