[鸿蒙项目]如何使用乐观UI更新做到高性能体验('列表删除'中实现), 及将内容设置到剪切板及粘贴

小李A_Z
185 阅读2分钟

一. 乐观UI

1. 乐观UI更新说明

平常删除大文件及某些'无网环境可操作手机,等有网后再提交内容到服务器'的这些操作,均可使用乐观UI更新;

  1. 删除大文件: 先再UI上将大文件视觉上删除,然后再发送请求删除数据库内的数据,这就是乐观UI删除;因为视觉UI上做到文件被删除的效果很少消耗性能(很快UI就能展现效果),而真实数据库数据的删除却很可能消耗大量时间,所以就放在后面慢慢执行;先做到视觉上先呈现;

  2. '无网环境可操作手机,等有网后再提交内容到服务器':此场景就是先本地进行修改等操作,有网后再发送请求一次性提交到服务器,此举也是为了先实现效果,后执行需要耗费高性能高时间的操作.

2. 如何实现

使用如下截图两个步骤 image.png

二. 剪切板管理(文本设置到剪切板 及 读取剪切板)

pasteboard包: import { pasteboard } from '@kit.BasicServicesKit'

1. 文本设置到剪切板

首先配置读取剪贴板权限(注意:此权限需要API12,且要重新签名)

      {
      // API 12 要求，读取剪贴板需要申请权限，注意：应用需要重新签名 (ACL 权限)
        "name": "ohos.permission.READ_PASTEBOARD",
        "reason": "$string:permission_reason_pasteboard",
        "usedScene": {}
      },

代码中主要有三个步骤:

(1)获取系统剪切板的对象

// 1. 获取系统剪贴板
const systemPasteboard = pasteboard.getSystemPasteboard()

(2)准备数据(需指定类型)

// 2. 准备数据(需指定类型)
const pasteData = pasteboard.createData(pasteboard.MIMETYPE_TEXT_PLAIN, text)

(3)将数据设置到剪贴板中

// 3. 把数据设置到剪贴板中
systemPasteboard.setData(pasteData)

经过这些步骤,如果再将这些步骤封装到一个manager文件夹(通常用来存封装代码)中,代码将更优美; 之后再对此功能进行调用即可;

2. 读取剪切板

编写步骤与"设置到剪切板"有些相似:

(1)获取系统剪切板的对象

// 1. 获取系统剪贴板
const systemPasteboard = pasteboard.getSystemPasteboard()

(2)读取剪切板的数据(注意一个坑点: 如果剪切板没数据, 返回undefined,可能导致报错)

// 2.读取剪切板的数据(坑点: 如果剪切板没数据, 返回undefined,可能导致报错)
const pasteData = systemPasteboard.getDataSync()

(3)提取出内容 使用?. 表示可选,也就是可以为undefined

// 3.提取出内容 使用?. 表示可选,也就是可以为undefined
return pasteData?.getPrimaryText() || ''

使用: 最后调用封装的"读取剪切板"功能 image.png

三.其他知识点

EntryAbility.ets的onForeground()方法作用是 切前台,也就是打开应用时 做哪些事情/加载哪些数据.

avatar
文章
阅读
粉丝