在鸿蒙 ArkTS 中，开发购物车列表页面并实现商品数量的加减功能时，我们可以使用 List 组件来展示购物车中的多个商品，每个商品的数量可以通过加减按钮进行修改。每次修改数量时，更新对应商品的数量，并计算总金额。

需求分析

1. 商品列表：展示购物车中的多个商品。
2. 数量加减操作：每个商品都有增加和减少按钮来修改数量。
3. 动态更新：更新商品数量时，列表内容和总金额需要刷新。

代码实现

shopping_cart.ets

import ui;
import ohos.agp.components.Column;
import ohos.agp.components.Text;
import ohos.agp.components.Button;
import ohos.agp.components.List;
import ohos.agp.components.ListItemProvider;
import ohos.agp.components.Row;

@Entry
@Component
class ShoppingCartPage extends Page {

    // 模拟购物车数据
    cartItems: Array<CartItem> = [
        { id: "1", name: "商品A", price: 299.99, quantity: 1 },
        { id: "2", name: "商品B", price: 99.99, quantity: 2 },
        { id: "3", name: "商品C", price: 199.99, quantity: 1 }
    ];

    // 商品数据模型
    class CartItem {
        id: string;
        name: string;
        price: number;
        quantity: number;
    }

    // 处理购买数量加1
    increaseQuantity(index: number) {
        this.cartItems[index].quantity++;
        this.update();  // 更新页面
    }

    // 处理购买数量减1
    decreaseQuantity(index: number) {
        if (this.cartItems[index].quantity > 1) {
            this.cartItems[index].quantity--;
            this.update();  // 更新页面
        }
    }

    // 计算总金额
    calculateTotalAmount(): number {
        let total = 0;
        this.cartItems.forEach(item => {
            total += item.quantity * item.price;
        });
        return total;
    }

    // 列表项提供者
    class CartItemProvider extends ListItemProvider {
        data: Array<CartItem> = [];

        constructor(data: Array<CartItem>) {
            super();
            this.data = data;
        }

        getCount(): number {
            return this.data.length;
        }

        getItem(index: number): any {
            return this.data[index];
        }

        getItemComponent(index: number): Component {
            const item = this.data[index];

            return Column {
                width: "match_parent"
                height: "wrap_content"
                padding: "10px"
                marginBottom: "10px"
                alignment: "center"

                Row {
                    width: "match_parent"
                    height: "wrap_content"
                    alignment: "center"

                    Text {
                        text: item.name
                        fontSize: 18
                        width: "60%"
                    }

                    // 显示商品价格
                    Text {
                        text: `¥${item.price.toFixed(2)}`
                        fontSize: 16
                        width: "20%"
                    }

                    // 显示商品数量
                    Row {
                        width: "20%"
                        alignment: "center"
                        Button {
                            text: "-"
                            width: "40px"
                            height: "40px"
                            onClick: () => {
                                this.decreaseQuantity(index);
                            }
                        }
                        Text {
                            text: `${item.quantity}`
                            fontSize: 16
                            marginLeft: "10px"
                            marginRight: "10px"
                        }
                        Button {
                            text: "+"
                            width: "40px"
                            height: "40px"
                            onClick: () => {
                                this.increaseQuantity(index);
                            }
                        }
                    }
                }
            }
        }
    }

    // 页面构建
    build() {
        return Column {
            width: "match_parent"
            height: "match_parent"
            padding: "20px"
            alignment: "center"

            // 购物车商品列表
            List {
                itemProvider: new this.CartItemProvider(this.cartItems)
                width: "match_parent"
                height: "wrap_content"
            }

            // 总金额显示
            Text {
                text: `总金额: ¥${this.calculateTotalAmount().toFixed(2)}`
                fontSize: 18
                marginTop: "20px"
                fontWeight: "bold"
            }

            // 结算按钮
            Button {
                text: "结算"
                width: "match_parent"
                height: "50px"
                marginTop: "20px"
                onClick: () => {
                    console.log("结算购物车");
                }
            }
        }
    }
}

代码详解

1. 商品数据模型 (CartItem)：

   • 包含 id、name（商品名称）、price（商品价格）、quantity（商品数量）属性。

2. 数量加减操作：

   • increaseQuantity(index: number)：通过增加按钮，增加购物车中对应商品的数量。
   • decreaseQuantity(index: number)：通过减少按钮，减少购物车中对应商品的数量，并确保数量不小于 1。

3. ListItemProvider：

   • CartItemProvider 类继承自 ListItemProvider，它负责提供购物车商品的每一项数据。
   • getCount()：返回购物车商品的数量。
   • getItem(index)：返回指定索引的商品对象。
   • getItemComponent(index)：返回指定索引商品的组件。组件包括商品的名称、价格、数量和加减按钮。

4. 计算总金额：

   • calculateTotalAmount()：遍历购物车中所有商品，计算总金额。

5. 列表显示和排版：

   • 使用 List 组件来展示购物车中的所有商品。
   • 每个商品通过 Row 组件排列显示商品名称、价格和数量。
   • 通过按钮点击事件实现加减数量的功能。

6. 总金额显示：

   • 使用 Text 组件显示当前购物车中所有商品的总金额。

7. 结算按钮：

   • 使用 Button 组件提供结算操作。点击结算按钮时，可以触发相关的结算逻辑（如提交订单等）。

页面效果

1. 购物车商品展示：

   • 每个商品包括名称、价格和数量，数量可以通过加减按钮进行修改。

2. 实时更新：

   • 每次修改数量时，购物车列表和总金额都会实时更新。

3. 总金额计算：

   • 总金额根据商品的数量和单价自动计算并显示。

4. 结算操作：

   • 提供结算按钮，用户点击后可以进行结算操作。

总结

通过此示例，你可以实现一个带有数量加减功能的购物车页面。通过 List 组件展示购物车中的商品，并使用 Button 组件实现增加和减少商品数量的功能。总金额会根据数量和商品价格动态计算并展示。

4o