从 ListView.builder 中返回自定义卡片和关闭（添加和删除到列表视图）

Posted 2023-04-19

【中文标题】从 ListView.builder 中返回自定义卡片和关闭（添加和删除到列表视图）

【英文标题】：Return a custom card and dismisable from a ListView.builder (add and delete to a list view)

【发布时间】：2021-10-22 22:57:37

【问题描述】：

我想在 Flutter 应用中制作购物车，我想添加卡片，使用 ListView.builder 删除它们。所以我想在同一个列表视图中返回我的自定义卡片和可关闭的小部件，但我不知道如何。

这是代码

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('Cart'),
        flexibleSpace: Container(
          decoration: BoxDecoration(
              gradient: LinearGradient(
                  begin: Alignment.bottomLeft,
                  end: Alignment.topRight,
                  colors: <Color>[
                kCostumeBlueColor6,
                kCostumeBlueColor5,
              ])),
        ),
      ),
      body: ListView.builder(itemBuilder: (context,index)
   //     return Dismissible(key: key, child: child);

        return CartCard(image: NetworkImage('link'), productName: cartProducts[index].getProductName(), price: cartProducts[index].getPrice(),);

      ,

      itemCount: cartProducts.length,)

    );
  

【参考方案1】：

根据您的限制，您有多种选择：

将您的 CartCard 包装在 Dismissible like 中

   return  Dismissible(key: key, child: CartCard(
      image: NetworkImage('link'),
      productName: cartProducts[index].getProductName(),
      price: cartProducts[index].getPrice(),));

如果它们确实是两个独立的小部件，请使用 Column 来制作您想要的布局

   return  
Column(children:[
Dismissible(key: key, child: ),
CartCard(
      image: NetworkImage('link'),
      productName: cartProducts[index].getProductName(),
      price: cartProducts[index].getPrice(),)
]);

如果您的项目很少并且不需要 ListView.builder，您可以使用价差：

   return  
ListView(children:[
for (final cart in cartProducts)
...[Dismissible(key: key, child: ),
CartCard(
      image: NetworkImage('link'),
      productName: cart.getProductName(),
      price: cart.getPrice(),)]
]);