HarmonyOS鸿蒙Next中实现简单店铺应用示例代码

介绍

本示例构建了一个简单的店铺应用，应用案例内主要包含以下两个功能。

消息页面，通过任务、消息、通报Tab的切换，实现消息的分类
店掌页面，点击全部应用按钮后，自定义布局展示常用服务以及各类经营服务，点击编辑按钮可进行新增操作

简单店铺应用实现源码链接

效果预览

![图片名称]

使用说明

进入应用后，首先展示店掌页面，点击按钮，即可进入全部应用页面。
在全部应用页面可以进行常用服务的查看，点击编辑按钮可以进行常用服务的新增。
点击返回后进入消息页面，可以查看任务页面，Tab组件展示待执行、待验收等任务类型，点击可进行切换。
点击消息按钮，切换页面，展示消息列表。
点击通报按钮，切换页面，展示通报信息列表。

实现思路

消息页面的构建

通过两层嵌套Tabs实现应用的不同页面的切换，消息页面的不同类型的切换。
使用List组件，实现消息列表的呈现；其中使用LazyForEach，相比ForEach在处理大量数据时有明显性能上的优势。

店掌页面的构建

实现数据处理能力，主要包括getList、setList、addList、totalCount等。
实现取消增加服务功能，实现对编辑中想要添加的图标进行取消操作；构造reset函数，将所有值置为0。
构造itemMove函数，函数的主要功能是用于将经营服务的一些图标添加到常用服务列表中。首先，使用splice方法从list数组中移除位置为index的元素，并存储在一个临时变量tmp中。这个操作会修改原始数组，并且tmp会包含北一出的元素。
构造handleDrag()函数，通过判断index的大小，决定要进行添加的位置；根据index的大小，总共分为下、上、右、左、右下、右上、左上、左下八个位置。
对于Grid组件的每个图标设置一个组合手势，其中包含一个长按手势LongPressGesture。GestureGroup创建一个手势组，其中手势按序列Sequence模式执行；LongPressGesture是一个长按手势，设置为可重复触发；.onAction()这是长按手势的处理函数，用于定义当长按手势被识别时应该执行的操作。

更多关于HarmonyOS鸿蒙Next中实现简单店铺应用示例代码的实战系列教程也可以访问 https://www.itying.com/category-93-b0.html

zlyuanteng 1楼•20 天前作者

欢迎来到我的店铺
shop_logo
商品列表购物车

更多关于HarmonyOS鸿蒙Next中实现简单店铺应用示例代码的实战系列教程也可以访问 https://www.itying.com/category-93-b0.html

bupafengyu 2楼•20 天前

在HarmonyOS鸿蒙Next中，可以创建一个简单的店铺应用，展示商品列表和详情。以下是一个示例代码：

import ohos.aafwk.ability.AbilitySlice;
import ohos.aafwk.content.Intent;
import ohos.agp.components.ListContainer;
import ohos.agp.components.Text;
import ohos.agp.components.element.Element;
import ohos.agp.components.element.ShapeElement;
import ohos.agp.utils.Color;
import ohos.agp.window.service.WindowManager;
import ohos.app.Context;
import ohos.hiviewdfx.HiLog;
import ohos.hiviewdfx.HiLogLabel;
import ohos.utils.net.Uri;

import java.util.ArrayList;
import java.util.List;

public class MainAbilitySlice extends AbilitySlice {
    private static final HiLogLabel LABEL_LOG = new HiLogLabel(HiLog.LOG_APP, 0x00201, "MainAbilitySlice");

    @Override
    public void onStart(Intent intent) {
        super.onStart(intent);

        // 创建商品列表
        List<Product> products = new ArrayList<>();
        products.add(new Product("商品1", 100));
        products.add(new Product("商品2", 200));
        products.add(new Product("商品3", 300));

        // 创建适配器
        ProductAdapter adapter = new ProductAdapter(this, products);

        // 设置布局
        ListContainer listContainer = new ListContainer(this);
        listContainer.setItemProvider(adapter);
        setUIContent(listContainer);
    }

    @Override
    public void onActive() {
        super.onActive();
    }

    @Override
    public void onForeground(Intent intent) {
        super.onForeground(intent);
    }
}

class Product {
    String name;
    int price;

    Product(String name, int price) {
        this.name = name;
        this.price = price;
    }
}

class ProductAdapter extends BaseItemProvider {
    private List<Product> products;
    private Context context;

    ProductAdapter(Context context, List<Product> products) {
        this.context = context;
        this.products = products;
    }

    @Override
    public int getCount() {
        return products.size();
    }

    @Override
    public Object getItem(int position) {
        return products.get(position);
    }

    @Override
    public long getItemId(int position) {
        return position;
    }

    @Override
    public Component getComponent(int position, Component convertComponent, ComponentContainer parent) {
        if (convertComponent == null) {
            convertComponent = LayoutScatter.getInstance(context).parse(ResourceTable.Layout_item_product, null, false);
        }

        Product product = products.get(position);
        Text nameText = (Text) convertComponent.findComponentById(ResourceTable.Id_product_name);
        Text priceText = (Text) convertComponent.findComponentById(ResourceTable.Id_product_price);

        nameText.setText(product.name);
        priceText.setText("¥" + product.price);

        return convertComponent;
    }
}

这个示例展示了如何创建一个简单的商品列表并显示在界面上。你可以根据需要扩展功能，比如添加商品详情页或购物车功能。