鸿蒙开发|购物车案例分析（一）

我要敲代码
715 阅读3分钟

购物车案例分析（一）

今天我们来分析一个综合案例--购物车的第一部分内容

01

今天先将数据处理，实现基本页面布局：

  1. 考察对自定义组件的理解
  2. 对装饰器@Prop，@Link等使用
  3. 对于已给数据的分析处理能力

这是已给的数据

1.在ets下新建一个data目录用于存储数据

image-20240904145432798

2.在Index主页面中导入基本布局结构

关于数据和页面结构代码已存入以下链接，大家可自行查阅

https://hcn9onlgp8rn.feishu.cn/docx/WjhPdR6P9oEy6SxHhgKcRGQXnAc?from=from_copylink

3.当我们拿到数据后，首先要先阅读代码对其有一个大概的认识，并且明确我们首先需要做什么

第一步我们首先是需要对列表进行渲染，所以在一堆数据中我们要先找到关于列表部分的代码段

如图，我们可以看出列表项是先传入内容区域后，在通过内容区域传入父组件中来实现的。

image-20240904152143834

那么我们可以通过一层一层的数据传递来实现对列表的渲染，这里通过对数据包的读取，我们可以知道数组的信息

image-20240904152605453

首先是对ContentCom进行处理，通过对内容区域的分析，我们可以发现，在内容区域GoodsListItem被ForEach循环渲染，

image-20240904155305503

我们通过传参的方式将ContentCom中的item：对象 传入GoodsListItem，那么在内容区域中就需要接收父组件中的数据

这里必须强调以下我们需要用@Link来装饰，因为@Prop是单项同步，对于后面的数据处理会有很大的影响

image-20240904161205351

同时别忘了在父组件中接收参数：

image-20240904162124107

接着对GoodsListItem列表项进行处理，我们通过装饰器@Observed和ObjectLink传递数据

image-20240904152702159

下面是对数据的处理,找到我们需要修改的变量值，使用传递过来的数据进行替换。

image-20240904152947876

这是列表渲染后的效果图

image-20240904162339517

下面我们实现列表删除功能--滑动删除

02

这里我们需要用到ListItem的一个属性swipeAction,对于其的具体用法，大家可以上官网进行查阅

https://developer.huawei.com/consumer/cn/doc/harmonyos-references-V5/ts-container-listitem-V5#swipeaction9

**关于swipeAction核心步骤：**使用 swipeAction属性，结合end设置右侧的效果（builder）

在@Builder中我们可以设置删除的样式和事件，再通过调用的方式来实现效果

image-20240904163257905 image-20240904163344157

想要实现删除效果，这里存在需要注意的问题，如果在删除事件中，我们直接使用索引下标的方式，是会出现bug的，因为我们删除一个商品后下标是会改变的，这会导致我们无法删除我们所需要删除的商品，所以我们需要通过以下步骤来解决

核心步骤:

  1. 确认文档中的：键值生成规则

  2. 使用自定义键值，替换默认规则

  3. 使用索引删除会出现无法删除的情况，改为通过 id 删除

    1. 通过 id 作为标记，id 不变，UI 不会更新，保存的索引还是之前的
    2. 之后通过索引就会出现删除错位的情况（用索引来删有 bug）
    3. 改为通过 id 删除：
      1. builder 的参数：id
      2. 点击删除，改为
        1. 通过 id 找到当前元素对应的 index（最新）
        2. 然后根据找到的索引来删除

核心代码段

image-20240904164836366 image-20240904164852198

好的，第一部分我们先将这么多，下面罗列一下在这阶段我们可能会出现的问题：

1.对于数据的分析，我们可能需要花费一些时间，来思考寻找我们所要完成的部分。

2.对于装饰器@Prop，@ObjectLink，@Provide等使用

3.在删除事件中，我们一定要注意，在复杂的环境下，我们需要通过寻找id的方式，来索引下标，否则会出现bug

avatar
文章
阅读
粉丝