diff --git a/zh-cn/application-dev/Readme-CN.md b/zh-cn/application-dev/Readme-CN.md index bed2717108f14cae96bff807db39fc0c3be0572b..a39af87214af6492f3a303b9e22584f26c0bb3ac 100644 --- a/zh-cn/application-dev/Readme-CN.md +++ b/zh-cn/application-dev/Readme-CN.md @@ -10,6 +10,8 @@ - [基于TS扩展的声明式开发范式](ui/ui-arkui-ts.md) - [音频](media/audio.md) - [IPC与RPC通信](connectivity/ipc-rpc.md) +- [分布式数据服务](database/Readme-CN.md) +- [USB服务](usb/Readme-CN.md) - [应用事件打点](application-event-logging/hiappevent.md) - [开发参考](reference/Readme-CN.md) diff --git a/zh-cn/application-dev/database/Readme-CN.md b/zh-cn/application-dev/database/Readme-CN.md new file mode 100644 index 0000000000000000000000000000000000000000..f6341aa680d95dc524fb2e1820f7b08b53ecc69d --- /dev/null +++ b/zh-cn/application-dev/database/Readme-CN.md @@ -0,0 +1,4 @@ +# 分布式数据服务 + +- [分布式数据服务概述](database-mdds-overview.md) +- [分布式数据服务开发指导](database-mdds-guidelines.md) diff --git a/zh-cn/application-dev/database/database-mdds-guidelines.md b/zh-cn/application-dev/database/database-mdds-guidelines.md new file mode 100644 index 0000000000000000000000000000000000000000..5c75f819a34ed8add1552ec558806a5e4be36b70 --- /dev/null +++ b/zh-cn/application-dev/database/database-mdds-guidelines.md @@ -0,0 +1,172 @@ +# 分布式数据服务开发指导 + +## 场景介绍 + +分布式数据服务主要实现用户设备中应用程序数据内容的分布式同步。当设备1上的应用A在分布式数据库中增、删、改数据后，设备2上的应用A也可以获取到该数据库变化。可在分布式图库、信息、通讯录、文件管理器等场景中使用。 + + +## 接口说明 + +OpenHarmony系统中的分布式数据服务模块为开发者提供下面几种功能： + +**表1** 分布式数据服务关键API功能介绍 + +| 功能分类 | 接口名称 | 描述 | +| -------- | -------- | -------- | +| 分布式数据库创建。 | createKVManager(config: KVManagerConfig, callback: AsyncCallback<KVManager>): void
createKVManager(config: KVManagerConfig): Promise<KVManager> | 创建一个KVManager对象实例，用于管理数据库对象。 | +| getKVStore<T extends KVStore>(storeId: string, options: Options, callback: AsyncCallback<T>): void
getKVStore<T extends KVStore>(storeId: string, options: Options): Promise<T> | 指定Options和storeId，创建并获取KVStore数据库。 | +| 分布式数据增、删、改、查。 | put(key: string, value: Uint8Array \| string \| number \| boolean, callback: AsyncCallback<void>): void
put(key: string, value: Uint8Array \| string \| number \| boolean): Promise<void> | 插入和更新数据。 | +| delete(key: string, callback: AsyncCallback<void>): void
delete(key: string): Promise<void> | 删除数据。 | +| get(key: string, callback: AsyncCallback<Uint8Array \| string \| boolean \| number>): void
get(key: string): Promise<Uint8Array \| string \| boolean \| number> | 查询数据。 | +| 订阅分布式数据变化。 | on(event: 'dataChange', type: SubscribeType, observer: Callback<ChangeNotification>): void
on(event: 'syncComplete', syncCallback: Callback<Array<[string, number]>>): void | 订阅数据库中数据的变化。 | +| 分布式数据同步。 | sync(deviceIdList: string[], mode: SyncMode, allowedDelayMs?: number): void | 在手动模式下，触发数据库同步。 | + + +## 开发步骤 + +以单版本分布式数据库为例，说明开发步骤。 + +1. 导入模块。 + ``` + import distributedData from '@ohos.data.distributedData'; + ``` + +2. 根据配置构造分布式数据库管理类实例。 + 1. 根据应用上下文创建KvManagerConfig对象。 + 2. 创建分布式数据库管理器实例。 + + 以下为创建分布式数据库管理器的代码示例： + ``` + let kvManager; + try { + const kvManagerConfig = { + bundleName : 'com.example.datamanagertest', + userInfo : { + userId : '0', + userType : distributedData.UserType.SAME_USER_ID + } + } + distributedData.createKVManager(kvManagerConfig, function (err, manager) { + if (err) { + console.log("createKVManager err: " + JSON.stringify(err)); + return; + } + console.log("createKVManager success"); + kvManager = manager; + }); + } catch (e) { + console.log("An unexpected error occurred. Error:" + e); + } + ``` + +3. 获取/创建分布式数据库。 + 1. 声明需要创建的分布式数据库ID描述。 + 2. 创建分布式数据库，建议关闭自动同步功能(autoSync:false)，需要同步时主动调用sync接口。 + + 以下为创建分布式数据库的代码示例： + ``` + let kvStore; + try { + const options = { + createIfMissing : true, + encrypt : false, + backup : false, + autoSync : false, + kvStoreType : distributedData.KVStoreType.SINGLE_VERSION, + securityLevel : distributedData.SecurityLevel.S2, + }; + kvManager.getKVStore('storeId', options, function (err, store) { + if (err) { + console.log("getKVStore err: " + JSON.stringify(err)); + return; + } + console.log("getKVStore success"); + kvStore = store; + }); + } catch (e) { + console.log("An unexpected error occurred. Error:" + e); + } + ``` + + > ![icon-note.gif](public_sys-resources/icon-note.gif) **说明：** + > 组网设备间同步数据的场景，建议在应用启动时打开分布式数据库，获取数据库的句柄。在该句柄（如上例中的kvStore）的生命周期内无需重复创建数据库，可直接使用句柄对数据库进行数据的插入等操作。 + +4. 订阅分布式数据变化。 + 以下为订阅单版本分布式数据库数据变化通知的代码示例: + ``` + kvStore.on('dataChange', distributedData.SubscribeType.SUBSCRIBE_TYPE_ALL, function (data) { + console.log("dataChange callback call data: " + JSON.stringify(data)); + }); + ``` + +5. 将数据写入分布式数据库。 + 1. 构造需要写入分布式数据库的Key(键)和Value(值)。 + 2. 将键值数据写入分布式数据库。 + + 以下为将字符串类型键值数据写入分布式数据库的代码示例： + + ``` + const KEY_TEST_STRING_ELEMENT = 'key_test_string'; + const VALUE_TEST_STRING_ELEMENT = 'value-test-string'; + try { + kvStore.put(KEY_TEST_STRING_ELEMENT, VALUE_TEST_STRING_ELEMENT, function (err,data) { + if (err != undefined) { + console.log("put err: " + JSON.stringify(err)); + return; + } + console.log("put success"); + }); + }catch (e) { + console.log("An unexpected error occurred. Error:" + e); + } + ``` + +6. 查询分布式数据库数据。 + 1. 构造需要从单版本分布式数据库中查询的Key(键)。 + 2. 从单版本分布式数据库中获取数据。 + + 以下为从分布式数据库中查询字符串类型数据的代码示例： + ``` + const KEY_TEST_STRING_ELEMENT = 'key_test_string'; + const VALUE_TEST_STRING_ELEMENT = 'value-test-string'; + try { + kvStore.put(KEY_TEST_STRING_ELEMENT, VALUE_TEST_STRING_ELEMENT, function (err,data) { + if (err != undefined) { + console.log("put err: " + JSON.stringify(err)); + return; + } + console.log("put success"); + kvStore.get(KEY_TEST_STRING_ELEMENT, function (err,data) { + console.log("get success data: " + data); + }); + }); + }catch (e) { + console.log("An unexpected error occurred. Error:" + e); + } + ``` + +7. 同步数据到其他设备。 + 1.选择同一组网环境下的设备以及同步模式，进行数据同步。 + + 以下为单版本分布式数据库进行数据同步的代码示例，其中deviceIds可由deviceManager调用getTrustedDeviceListSync()方法得到，1000表示最大延迟时间为1000ms： + ``` + import deviceManager from '@ohos.distributedHardware.deviceManager'; + + let devManager; + // create deviceManager + deviceManager.createDeviceManager("bundleName", (err, value) => { + if (!err) { + devManager = value; + } + }); + + // get deviceIds + let deviceIds = []; + if (devManager != null) { + var deviceList = devManager.getTrustedDeviceListSync(); + for (var i = 0; i < deviceList.length; i++) { + deviceIds[i] = deviceList[i].deviceId; + } + } + kvStore.sync(deviceIds, distributedData.SyncMode.PUSH_ONLY, 1000); + ``` diff --git a/zh-cn/application-dev/database/database-mdds-overview.md b/zh-cn/application-dev/database/database-mdds-overview.md new file mode 100644 index 0000000000000000000000000000000000000000..246117ea6c4f9241ad1140695615df6e2ef476c4 --- /dev/null +++ b/zh-cn/application-dev/database/database-mdds-overview.md @@ -0,0 +1,92 @@ +# 分布式数据服务概述 + +分布式数据服务（Distributed Data Service，DDS） 为应用程序提供不同设备间数据库的分布式协同能力。通过调用分布式数据接口，应用程序将数据保存到分布式数据库中。通过结合帐号、应用和数据库三元组，分布式数据服务对属于不同应用的数据进行隔离，保证不同应用之间的数据不能通过分布式数据服务互相访问。在通过可信认证的设备间，分布式数据服务支持应用数据相互同步，为用户提供在多种终端设备上最终一致的数据访问体验。 + + +## 基本概念 + +- **KV数据模型** + “KV数据模型”是“Key-Value数据模型”的简称，“Key-Value”即“键-值”；其数据以键值对的形式进行组织、索引和存储。 + + KV数据模型适合不涉及过多数据关系和业务关系的业务数据存储，比SQL数据库存储拥有更好的读写性能，同时因其在分布式场景中降低了解决数据库版本兼容问题的复杂度，和数据同步过程中冲突解决的复杂度而被广泛使用。分布式数据库也是基于KV数据模型，对外提供KV类型的访问接口。 + +- **分布式数据库事务性** + 分布式数据库事务支持本地事务（和传统数据库的事务概念一致）和同步事务。同步事务是指在设备之间同步数据时，以本地事务为单位进行同步，一次本地事务的修改要么都同步成功，要么都同步失败。 + +- **分布式数据库一致性** + 在分布式场景中一般会涉及多个设备，组网内设备之间看到的数据是否一致称为分布式数据库的一致性。分布式数据库一致性可以分为**强一致性**、**弱一致性**和**最终一致性**。 + + - **强一致性**：是指某一设备成功增、删、改数据后，组网内设备对该数据的读取操作都将得到更新后的值。 + - **弱一致性**：是指某一设备成功增、删、改数据后，组网内设备可能读取到本次更新数据，也可能读取不到，不能保证在多长时间后每个设备的数据一定是一致的。 + - **最终一致性**：是指某一设备成功增、删、改数据后，组网内设备可能读取不到本次更新数据，但在某个时间窗口之后组网内设备的数据能够达到一致状态。 + + 强一致性对分布式数据的管理要求非常高，在服务器的分布式场景可能会遇到。因为移动终端设备的不常在线、以及无中心的特性，分布式数据服务不支持强一致性，只支持最终一致性。 + +- **分布式数据库同步** + 底层通信组件完成设备发现和认证，会通知上层应用程序（包括分布式数据服务）设备上线。收到设备上线的消息后分布式数据服务可以在两个设备之间建立加密的数据传输通道，利用该通道在两个设备之间进行数据同步。 + + 分布式数据服务提供了两种同步方式：**手动同步**和**自动同步**。 + + - **手动同步：**由应用程序调用sync接口来触发，需要指定同步的设备列表和同步模式。同步模式分为PULL_ONLY（将远端数据拉到本端）、PUSH_ONLY（将本端数据推送到远端）和PUSH_PULL（将本端数据推送到远端同时也将远端数据拉取到本端）。内部接口支持按条件过滤同步，将符合条件的数据同步到远端。 + - **自动同步：**包括全量同步和按条件订阅同步。全量同步由分布式数据库自动将本端数据推送到远端，同时也将远端数据拉取到本端来完成数据同步，同步时机包括设备上线、应用程序更新数据等，应用不需要主动调用sync接口；内部接口支持按条件订阅同步，将远端符合订阅条件的数据自动同步到本端。 + +- **单版本分布式数据库** + 单版本是指数据在本地保存是以单个KV条目为单位的方式保存，对每个Key最多只保存一个条目项，当数据在本地被用户修改时，不管它是否已经被同步出去，均直接在这个条目上进行修改。同步也以此为基础，按照它在本地被写入或更改的顺序将当前最新一次修改逐条同步至远端设备。 + +- **设备协同分布式数据库** + 设备协同分布式数据库建立在单版本分布式数据库之上，对应用程序存入的KV数据中的Key前面拼接了本设备的DeviceID标识符，这样能保证每个设备产生的数据严格隔离，底层按照设备的维度管理这些数据，设备协同分布式数据库支持以设备的维度查询分布式数据，但是不支持修改远端设备同步过来的数据。 + +- **分布式数据库冲突解决策略** + 分布式数据库多设备提交冲突场景，在给提交冲突做合并的过程中，如果多个设备同时修改了同一数据，则称这种场景为数据冲突。数据冲突采用默认冲突解决策略（Last-write-wins），基于提交时间戳，取时间戳较大的提交数据，当前不支持定制冲突解决策略。 + +- **数据库Schema化管理与谓词查询** + 单版本数据库支持在创建和打开数据库时指定Schema，数据库根据Schema定义感知KV记录的Value格式，以实现对Value值结构的检查，并基于Value中的字段实现索引建立和谓词查询。 + +- **分布式数据库备份能力** + 提供分布式数据库备份能力，业务通过设置backup属性为true，可以触发分布式数据服务每日备份。当分布式数据库发生损坏，分布式数据服务会删除损坏数据库，并且从备份数据库中恢复上次备份的数据。如果不存在备份数据库，则创建一个新的数据库。同时支持加密数据库的备份能力。 + + +## 运作机制 + +分布式数据服务支撑OpenHarmony系统上应用程序数据库数据分布式管理，支持数据在相同帐号的多端设备之间相互同步，为用户在多端设备上提供一致的用户体验，分布式数据服务包含五部分： + +- **服务接口** + 分布式数据服务提供专门的数据库创建、数据访问、数据订阅等接口给应用程序调用，接口支持KV数据模型，支持常用的数据类型，同时确保接口的兼容性、易用性和可发布性。 + +- **服务组件** + 服务组件负责服务内元数据管理、权限管理、加密管理、备份和恢复管理以及多用户管理等、同时负责初始化底层分布式DB的存储组件、同步组件和通信适配层。 + +- **存储组件** + 存储组件负责数据的访问、数据的缩减、事务、快照、数据库加密，以及数据合并和冲突解决等特性。 + +- **同步组件** + 同步组件连结了存储组件与通信组件，其目标是保持在线设备间的数据库数据一致性，包括将本地产生的未同步数据同步给其他设备，接收来自其他设备发送过来的数据，并合并到本地设备中。 + +- **通信适配层** + 通信适配层负责调用底层公共通信层的接口完成通信管道的创建、连接，接收设备上下线消息，维护已连接和断开设备列表的元数据，同时将设备上下线信息发送给上层同步组件，同步组件维护连接的设备列表，同步数据时根据该列表，调用通信适配层的接口将数据封装并发送给连接的设备。 + +应用程序通过调用分布式数据服务接口实现分布式数据库创建、访问、订阅功能，服务接口通过操作服务组件提供的能力，将数据存储至存储组件，存储组件调用同步组件实现将数据同步，同步组件使用通信适配层将数据同步至远端设备，远端设备通过同步组件接收数据，并更新至本端存储组件，通过服务接口提供给应用程序使用。 + + +**图1** 数据分布式运作示意图 + + +![zh-cn_image_0000001183386164](figures/zh-cn_image_0000001183386164.png) + + +## 约束与限制 + +- 分布式数据服务的数据模型仅支持KV数据模型，不支持外键、触发器等关系型数据库中的功能。 + +- 分布式数据服务支持的KV数据模型规格： + - 设备协同数据库，针对每条记录，Key的长度≤896 Byte，Value的长度<4 MB。 + - 单版本数据库，针对每条记录，Key的长度≤1 KB，Value的度<4 MB。 + - 每个应用程序最多支持同时打开16个分布式数据库。 + +- 分布式数据库与本地数据库的使用场景不同，因此开发者应识别需要在设备间进行同步的数据，并将这些数据保存到分布式数据库中。 + +- 分布式数据服务当前不支持应用程序自定义冲突解决策略。 + +- 分布式数据服务针对每个应用程序当前的流控机制：KvStore的接口1秒最大访问1000次，1分钟最大访问10000次；KvManager的接口1秒最大访问50次，1分钟最大访问500次。 + +- 分布式数据库事件回调方法中不允许进行阻塞操作，例如修改UI组件。 diff --git a/zh-cn/application-dev/database/figures/zh-cn_image_0000001183386164.png b/zh-cn/application-dev/database/figures/zh-cn_image_0000001183386164.png new file mode 100644 index 0000000000000000000000000000000000000000..0538c11963b2e54fccc57d560831d41ceab82446 Binary files /dev/null and b/zh-cn/application-dev/database/figures/zh-cn_image_0000001183386164.png differ diff --git a/zh-cn/application-dev/database/public_sys-resources/icon-caution.gif b/zh-cn/application-dev/database/public_sys-resources/icon-caution.gif new file mode 100644 index 0000000000000000000000000000000000000000..6e90d7cfc2193e39e10bb58c38d01a23f045d571 Binary files /dev/null and b/zh-cn/application-dev/database/public_sys-resources/icon-caution.gif differ diff --git a/zh-cn/application-dev/database/public_sys-resources/icon-danger.gif b/zh-cn/application-dev/database/public_sys-resources/icon-danger.gif new file mode 100644 index 0000000000000000000000000000000000000000..6e90d7cfc2193e39e10bb58c38d01a23f045d571 Binary files /dev/null and b/zh-cn/application-dev/database/public_sys-resources/icon-danger.gif differ diff --git a/zh-cn/application-dev/database/public_sys-resources/icon-note.gif b/zh-cn/application-dev/database/public_sys-resources/icon-note.gif new file mode 100644 index 0000000000000000000000000000000000000000..6314297e45c1de184204098efd4814d6dc8b1cda Binary files /dev/null and b/zh-cn/application-dev/database/public_sys-resources/icon-note.gif differ diff --git a/zh-cn/application-dev/database/public_sys-resources/icon-notice.gif b/zh-cn/application-dev/database/public_sys-resources/icon-notice.gif new file mode 100644 index 0000000000000000000000000000000000000000..86024f61b691400bea99e5b1f506d9d9aef36e27 Binary files /dev/null and b/zh-cn/application-dev/database/public_sys-resources/icon-notice.gif differ diff --git a/zh-cn/application-dev/database/public_sys-resources/icon-tip.gif b/zh-cn/application-dev/database/public_sys-resources/icon-tip.gif new file mode 100644 index 0000000000000000000000000000000000000000..93aa72053b510e456b149f36a0972703ea9999b7 Binary files /dev/null and b/zh-cn/application-dev/database/public_sys-resources/icon-tip.gif differ diff --git a/zh-cn/application-dev/database/public_sys-resources/icon-warning.gif b/zh-cn/application-dev/database/public_sys-resources/icon-warning.gif new file mode 100644 index 0000000000000000000000000000000000000000..6e90d7cfc2193e39e10bb58c38d01a23f045d571 Binary files /dev/null and b/zh-cn/application-dev/database/public_sys-resources/icon-warning.gif differ diff --git a/zh-cn/application-dev/quick-start/figures/zh-cn_image_0000001166904552.png b/zh-cn/application-dev/quick-start/figures/zh-cn_image_0000001089359413.png old mode 100755 new mode 100644 similarity index 100% rename from zh-cn/application-dev/quick-start/figures/zh-cn_image_0000001166904552.png rename to zh-cn/application-dev/quick-start/figures/zh-cn_image_0000001089359413.png diff --git a/zh-cn/application-dev/quick-start/figures/zh-cn_image_0000001118018452.png b/zh-cn/application-dev/quick-start/figures/zh-cn_image_0000001118018452.png deleted file mode 100644 index 74b66efabbbbbea4752f0296985486369a0cdc74..0000000000000000000000000000000000000000 Binary files a/zh-cn/application-dev/quick-start/figures/zh-cn_image_0000001118018452.png and /dev/null differ diff --git a/zh-cn/application-dev/quick-start/figures/zh-cn_image_0000001212066021.png b/zh-cn/application-dev/quick-start/figures/zh-cn_image_0000001167690688.png old mode 100755 new mode 100644 similarity index 100% rename from zh-cn/application-dev/quick-start/figures/zh-cn_image_0000001212066021.png rename to zh-cn/application-dev/quick-start/figures/zh-cn_image_0000001167690688.png diff --git a/zh-cn/application-dev/quick-start/figures/zh-cn_image_0000001166744640.png b/zh-cn/application-dev/quick-start/figures/zh-cn_image_0000001167850660.png similarity index 100% rename from zh-cn/application-dev/quick-start/figures/zh-cn_image_0000001166744640.png rename to zh-cn/application-dev/quick-start/figures/zh-cn_image_0000001167850660.png diff --git a/zh-cn/application-dev/quick-start/figures/zh-cn_image_0000001172123966.png b/zh-cn/application-dev/quick-start/figures/zh-cn_image_0000001168898456.png similarity index 100% rename from zh-cn/application-dev/quick-start/figures/zh-cn_image_0000001172123966.png rename to zh-cn/application-dev/quick-start/figures/zh-cn_image_0000001168898456.png diff --git a/zh-cn/application-dev/quick-start/figures/zh-cn_image_0000001217683805.png b/zh-cn/application-dev/quick-start/figures/zh-cn_image_0000001169221404.png similarity index 100% rename from zh-cn/application-dev/quick-start/figures/zh-cn_image_0000001217683805.png rename to zh-cn/application-dev/quick-start/figures/zh-cn_image_0000001169221404.png diff --git a/zh-cn/application-dev/quick-start/figures/zh-cn_image_0000001172283938.png b/zh-cn/application-dev/quick-start/figures/zh-cn_image_0000001172283938.png deleted file mode 100644 index a4ddc8ef114b973936dc354fc5ea628b87aae9f3..0000000000000000000000000000000000000000 Binary files a/zh-cn/application-dev/quick-start/figures/zh-cn_image_0000001172283938.png and /dev/null differ diff --git a/zh-cn/application-dev/quick-start/figures/zh-cn_image_0000001172442490.png b/zh-cn/application-dev/quick-start/figures/zh-cn_image_0000001172442490.png deleted file mode 100644 index 85345789b60927729e9243798fe122c64ca92687..0000000000000000000000000000000000000000 Binary files a/zh-cn/application-dev/quick-start/figures/zh-cn_image_0000001172442490.png and /dev/null differ diff --git a/zh-cn/application-dev/quick-start/figures/zh-cn_image_0000001172602436.png b/zh-cn/application-dev/quick-start/figures/zh-cn_image_0000001172602436.png deleted file mode 100644 index b196bc42a1cb0dd57a382dc1f9315c30074f4952..0000000000000000000000000000000000000000 Binary files a/zh-cn/application-dev/quick-start/figures/zh-cn_image_0000001172602436.png and /dev/null differ diff --git a/zh-cn/application-dev/quick-start/figures/zh-cn_image_0000001208274069.png b/zh-cn/application-dev/quick-start/figures/zh-cn_image_0000001208274069.png deleted file mode 100644 index 74b66efabbbbbea4752f0296985486369a0cdc74..0000000000000000000000000000000000000000 Binary files a/zh-cn/application-dev/quick-start/figures/zh-cn_image_0000001208274069.png and /dev/null differ diff --git a/zh-cn/application-dev/quick-start/figures/zh-cn_image_0000001212142015.png b/zh-cn/application-dev/quick-start/figures/zh-cn_image_0000001212142015.png deleted file mode 100644 index 74b66efabbbbbea4752f0296985486369a0cdc74..0000000000000000000000000000000000000000 Binary files a/zh-cn/application-dev/quick-start/figures/zh-cn_image_0000001212142015.png and /dev/null differ diff --git a/zh-cn/application-dev/quick-start/figures/zh-cn_image_0000001166904582.png b/zh-cn/application-dev/quick-start/figures/zh-cn_image_0000001213130527.png old mode 100755 new mode 100644 similarity index 100% rename from zh-cn/application-dev/quick-start/figures/zh-cn_image_0000001166904582.png rename to zh-cn/application-dev/quick-start/figures/zh-cn_image_0000001213130527.png diff --git a/zh-cn/application-dev/quick-start/figures/zh-cn_image_0000001217602267.png b/zh-cn/application-dev/quick-start/figures/zh-cn_image_0000001213883165.png similarity index 100% rename from zh-cn/application-dev/quick-start/figures/zh-cn_image_0000001217602267.png rename to zh-cn/application-dev/quick-start/figures/zh-cn_image_0000001213883165.png diff --git a/zh-cn/application-dev/quick-start/figures/zh-cn_image_0000001172442492.png b/zh-cn/application-dev/quick-start/figures/zh-cn_image_0000001214043107.png similarity index 100% rename from zh-cn/application-dev/quick-start/figures/zh-cn_image_0000001172442492.png rename to zh-cn/application-dev/quick-start/figures/zh-cn_image_0000001214043107.png diff --git a/zh-cn/application-dev/quick-start/figures/zh-cn_image_0000001217402315.png b/zh-cn/application-dev/quick-start/figures/zh-cn_image_0000001217402315.png deleted file mode 100644 index afdab82267fcd7d5eacae76eba500baa3bbecd40..0000000000000000000000000000000000000000 Binary files a/zh-cn/application-dev/quick-start/figures/zh-cn_image_0000001217402315.png and /dev/null differ diff --git a/zh-cn/application-dev/quick-start/figures/zh-cn_image_0000001217523751.png b/zh-cn/application-dev/quick-start/figures/zh-cn_image_0000001217523751.png deleted file mode 100644 index 469ca774dde99530329d5e7bd62a5a40fb16237b..0000000000000000000000000000000000000000 Binary files a/zh-cn/application-dev/quick-start/figures/zh-cn_image_0000001217523751.png and /dev/null differ diff --git a/zh-cn/application-dev/quick-start/figures/zh-cn_image_0000001217683803.png b/zh-cn/application-dev/quick-start/figures/zh-cn_image_0000001217683803.png deleted file mode 100644 index cb05a7cb0fa33a9d9074f4424a3851478935ff33..0000000000000000000000000000000000000000 Binary files a/zh-cn/application-dev/quick-start/figures/zh-cn_image_0000001217683803.png and /dev/null differ diff --git a/zh-cn/application-dev/quick-start/figures/zh-cn_image_0000001238733799.png b/zh-cn/application-dev/quick-start/figures/zh-cn_image_0000001238733799.png new file mode 100644 index 0000000000000000000000000000000000000000..37736ed10ff7cd16907684dfe2c1d6bb19c61d50 Binary files /dev/null and b/zh-cn/application-dev/quick-start/figures/zh-cn_image_0000001238733799.png differ diff --git a/zh-cn/application-dev/quick-start/figures/zh-cn_image_0000001238853759.png b/zh-cn/application-dev/quick-start/figures/zh-cn_image_0000001238853759.png new file mode 100644 index 0000000000000000000000000000000000000000..6bf1ed8cb6d6b6d88b57e533f9efe840afee95b5 Binary files /dev/null and b/zh-cn/application-dev/quick-start/figures/zh-cn_image_0000001238853759.png differ diff --git a/zh-cn/application-dev/quick-start/start-overview.md b/zh-cn/application-dev/quick-start/start-overview.md index beed7cea4e1fffdc96130fbd7aadb4a53233c9ae..813d87c1b13465cfa10d7171ca2cd23f6cb149f4 100644 --- a/zh-cn/application-dev/quick-start/start-overview.md +++ b/zh-cn/application-dev/quick-start/start-overview.md @@ -4,9 +4,9 @@ 本文档适用于OpenHarmony应用开发的初学者。通过构建一个简单的具有页面跳转功能的应用（如下图[预览器](https://developer.harmonyos.com/cn/docs/documentation/doc-guides/previewer-0000001054328973#ZH-CN_TOPIC_0000001056725592__section16523172216252)运行效果所示），熟悉OpenHarmony应用开发流程。 -为确保运行效果，本文以使用**DevEco Studio 3.0.0.601 Beta1**版本为例，点击[此处](https://developer.harmonyos.com/cn/develop/deveco-studio#download_beta)获取下载链接。 +为确保运行效果，本文以使用**DevEco Studio 3.0 Beta2**版本为例，点击[此处](https://developer.harmonyos.com/cn/develop/deveco-studio#download_beta)获取下载链接。 -![zh-cn_image_0000001172442490](figures/zh-cn_image_0000001172442490.png) +![zh-cn_image_0000001089359413](figures/zh-cn_image_0000001089359413.png) **表1** 方舟开发框架的对比 @@ -26,8 +26,10 @@ 2. 开发环境配置完成后，请参考[创建OpenHarmony工程](../quick-start/use-wizard-to-create-project.md)创建工程。 - 使用JS语言开发，模板选择Empty Ability，Language选择JS。 + - 使用eTS语言开发，模板选择Empty Ability，Language选择eTS。 3. 工程创建完成后，使用[预览器](https://developer.harmonyos.com/cn/docs/documentation/doc-guides/previewer-0000001054328973#ZH-CN_TOPIC_0000001056725592__section16523172216252)运行该工程。 完成上述操作后，请参考[使用JS语言开发](../quick-start/start-with-js.md)、[使用eTS语言开发](../quick-start/start-with-ets.md)继续下一步的学习。 + diff --git a/zh-cn/application-dev/quick-start/start-with-ets.md b/zh-cn/application-dev/quick-start/start-with-ets.md index 67a360c5412fc10172036344a3668eff1a2658dd..4e9cba5db895f36d3234f9b21e1f658abee9e3b9 100644 --- a/zh-cn/application-dev/quick-start/start-with-ets.md +++ b/zh-cn/application-dev/quick-start/start-with-ets.md @@ -1,23 +1,25 @@ # 使用eTS语言开发 > ![icon-note.gif](public_sys-resources/icon-note.gif) **说明：** -> 请使用DevEco Studio V3.0.0.601 Beta1及更高版本。本文以使用**DevEco Studio 3.0.0.601 Beta1**版本为例，点击[此处](https://developer.harmonyos.com/cn/develop/deveco-studio#download_beta)获取下载链接。 -> +> 请使用DevEco Studio V3.0.0.601 Beta1及更高版本。本文以使用**DevEco Studio 3.0 Beta2**版本为例，点击[此处](https://developer.harmonyos.com/cn/develop/deveco-studio#download_beta)获取下载链接。 ## 创建eTS工程 1. 打开DevEco Studio，创建一个新工程，选择模板，如Empty Ability： - ![zh-cn_image_0000001172602436](figures/zh-cn_image_0000001172602436.png) + + ![zh-cn_image_0000001238733799](figures/zh-cn_image_0000001238733799.png) 2. 进入配置工程界面，Project Type选择Application，Language选择eTS，其他参数根据实际需要设置即可。 - ![zh-cn_image_0000001172283938](figures/zh-cn_image_0000001172283938.png) + + ![zh-cn_image_0000001238853759](figures/zh-cn_image_0000001238853759.png) ## 编写第一个页面 -1. 工程创建完成后，在“Project“窗口，点击entry > src > main > ets > default > pages，打开index.ets文件。 - ![zh-cn_image_0000001217602267](figures/zh-cn_image_0000001217602267.png) +1. 工程创建完成后，在"Project"窗口，点击entry > src > main > ets > default > pages，打开index.ets文件。 + + ![zh-cn_image_0000001213883165](figures/zh-cn_image_0000001213883165.png) 2. 第一个页面由Flex容器组件、Text组件和Button组件构成。在index.ets中编写并设置页面组件的属性和样式，示例代码如下所示： ``` @@ -46,15 +48,15 @@ ``` 3. 使用[预览器](https://developer.harmonyos.com/cn/docs/documentation/doc-guides/previewer-0000001054328973#ZH-CN_TOPIC_0000001056725592__section16523172216252)运行项目，效果如下图所示： - -![zh-cn_image_0000001172123966](figures/zh-cn_image_0000001172123966.png) + + ![zh-cn_image_0000001168898456](figures/zh-cn_image_0000001168898456.png) ## 创建第二个页面 -1. 在“Project“窗口，打开entry > src > main > etsdefault，右键点击pages文件夹，选择New > eTS Page，命名为details，单击回车键。创建完成后，可以看到pages文件夹下的文件目录结构如下： - - ![zh-cn_image_0000001172442492](figures/zh-cn_image_0000001172442492.png) +1. 在"Project"窗口，打开entry > src > main > ets > default，右键点击pages文件夹，选择NeweTS Page，命名为details，单击回车键。创建完成后，可以看到pages文件夹下的文件目录结构如下： + + ![zh-cn_image_0000001214043107](figures/zh-cn_image_0000001214043107.png) 2. 第二个页面由Flex容器组件、Text组件构成。在details.ets中编写并设置页面组件的属性和样式，示例代码如下所示： ``` @@ -110,7 +112,7 @@ ``` 2. 再次使用[预览器](https://developer.harmonyos.com/cn/docs/documentation/doc-guides/previewer-0000001054328973#ZH-CN_TOPIC_0000001056725592__section16523172216252)运行项目，效果如下图所示： - -![zh-cn_image_0000001217683805](figures/zh-cn_image_0000001217683805.png) + + ![zh-cn_image_0000001169221404](figures/zh-cn_image_0000001169221404.png) 恭喜你，至此已成功完成OpenHarmony快速入门-使用eTS语言开发。 diff --git a/zh-cn/application-dev/quick-start/start-with-js.md b/zh-cn/application-dev/quick-start/start-with-js.md index fb7329a6063c5f79b5e8c0a88c94d2c16204ee16..b803bfa5c9b258bc727d6dc2c9b5d15aa6614f01 100644 --- a/zh-cn/application-dev/quick-start/start-with-js.md +++ b/zh-cn/application-dev/quick-start/start-with-js.md @@ -1,12 +1,11 @@ -# 使用JS语言开发 +# 使用JS语言开发（传统代码方式） -为确保运行效果，本文以使用**DevEco Studio 3.0.0.601 Beta1**版本为例，点击[此处](https://developer.harmonyos.com/cn/develop/deveco-studio#download_beta)获取下载链接。 +为确保运行效果，本文以使用**DevEco Studio 3.0 Beta2**版本为例，点击[此处](https://developer.harmonyos.com/cn/develop/deveco-studio#download_beta)获取下载链接。 ## 编写第一个页面 1. 第一个页面内有一个文本和一个按钮，通过text和button组件来实现。 - 在“Project“窗口，选择entry > src > main > js > default > pages > index，打开index.hml文件，添加一个文本和一个按钮，示例代码如下： - + 在"Project"窗口，选择entry > src > main > js > default > pages > index，打开index.hml文件，添加一个文本和一个按钮，示例代码如下： ```
@@ -18,9 +17,9 @@
``` - + 2. 打开index.css文件，设置文本和按钮的样式，示例代码如下： - ``` + ``` /* index.css */ .container { flex-direction: column; /* 设置容器内的项目纵向排列 */ @@ -42,19 +41,19 @@ text-color: white; margin-top: 20px; } - ``` + ``` 3. 使用[预览器](https://developer.harmonyos.com/cn/docs/documentation/doc-guides/previewer-0000001054328973#ZH-CN_TOPIC_0000001056725592__section16523172216252)运行项目，效果如下图所示： - ![zh-cn_image_0000001217683803](figures/zh-cn_image_0000001217683803.png) + ![zh-cn_image_0000001167690688](figures/zh-cn_image_0000001167690688.png) ## 创建另一个页面 -1. 在“Project“窗口，打开entry > src > main > js > default，右键点击pages文件夹，选择New > JS Page，命名为details，单击回车键。 +1. 在"Project"窗口，打开entry > src > main > js > default，右键点击pages文件夹，选择NewJS Page，命名为details，单击回车键。 创建完成后，可以看到pages文件夹下的文件目录结构如下： - ![zh-cn_image_0000001217523751](figures/zh-cn_image_0000001217523751.png) + ![zh-cn_image_0000001167850660](figures/zh-cn_image_0000001167850660.png) 2. 打开details.hml文件，添加一个文本，示例代码如下： ``` @@ -89,7 +88,7 @@ ``` // index.js import router from '@system.router'; - + export default { launch() { router.push ({ @@ -100,7 +99,7 @@ ``` 2. 再次使用[预览器](https://developer.harmonyos.com/cn/docs/documentation/doc-guides/previewer-0000001054328973#ZH-CN_TOPIC_0000001056725592__section16523172216252)运行项目，效果如下图所示： - -![zh-cn_image_0000001217402315](figures/zh-cn_image_0000001217402315.png) -恭喜你，至此已成功完成OpenHarmony快速入门-使用JS语言开发。 \ No newline at end of file + ![zh-cn_image_0000001213130527](figures/zh-cn_image_0000001213130527.png) + +恭喜你，至此已成功完成OpenHarmony快速入门-使用JS语言开发。 diff --git a/zh-cn/application-dev/reference/apis/Readme-CN.md b/zh-cn/application-dev/reference/apis/Readme-CN.md index 6d981e76ae023bac60d44a8dda07a5b4ce9b3567..e8fdc804c3f0bc0fac9677a4b157bb5e6fdc3c7a 100644 --- a/zh-cn/application-dev/reference/apis/Readme-CN.md +++ b/zh-cn/application-dev/reference/apis/Readme-CN.md @@ -17,14 +17,17 @@ - [音频管理](js-apis-audio.md) - [音频播放和录制](js-apis-media.md) - 数据管理 - - [文件管理](js-apis-fileio.md) - [轻量级存储](js-apis-data-storage.md) - [分布式数据管理](js-apis-distributed-data.md) - [关系型数据库](js-apis-data-rdb.md) - [结果集](js-apis-data-resultset.md) - [DataAbility 谓词](js-apis-data-ability.md) +- 文件管理 + - [文件管理](js-apis-fileio.md) + - [Statfs管理](js-apis-statfs.md) - 账号管理 - [分布式帐号管理](js-apis-distributed-account.md) + - [应用帐号管理](js-apis-appAccount.md) - 电话服务 - [拨打电话](js-apis-call.md) - [短信服务](js-apis-sms.md) @@ -35,6 +38,7 @@ - 设备管理 - [传感器](js-apis-sensor.md) - [振动](js-apis-vibrator.md) + - [位置服务](js-apis-geolocation.md) - [屏幕亮度](js-apis-brightness.md) - [电量信息](js-apis-battery-info.md) - [系统电源管理](js-apis-power.md) @@ -45,6 +49,7 @@ - [窗口](js-apis-window.md) - [显示设备属性](js-apis-display.md) - [升级](js-apis-update.md) + - [USB管理](js-apis-usb.md) - 基本功能 - [应用上下文](js-apis-basic-features-app-context.md) - [日志打印](js-apis-basic-features-logs.md) @@ -56,8 +61,11 @@ - [动画](js-apis-basic-features-animator.md) - [应用打点](js-apis-hiappevent.md) - [性能打点](js-apis-bytrace.md) + -[设置](js-apis-settings.md) - 语言基础类库 - [获取进程相关的信息](js-apis-process.md) - [URL字符串解析](js-apis-url.md) - - [字符串编解码](js-apis-util.md) + - [URI字符串解析](js-apis-uri.md) + - [util工具函数](js-apis-util.md) + - [xml文本转换](js-apis-xml.md) - [启动一个worker](js-apis-worker.md) \ No newline at end of file diff --git a/zh-cn/application-dev/reference/apis/js-apis-ability.md b/zh-cn/application-dev/reference/apis/js-apis-ability.md deleted file mode 100644 index 08fbf6e592c0c8259b604ecea5ad08354276ef31..0000000000000000000000000000000000000000 --- a/zh-cn/application-dev/reference/apis/js-apis-ability.md +++ /dev/null @@ -1,10 +0,0 @@ -# Ability框架 - -- [FeatureAbility模块](js-apis-featureAbility.md) -- [ParticleAbility模块](js-apis-particleAbility.md) -- [DataAbilityHelper模块](js-apis-dataAbilityHelper.md) -- [DataUriUtils模块](js-apis-DataUriUtils.md) -- [Bundle模块](js-apis-Bundle.md) -- [CommonEvent模块](js-apis-commonEvent.md) -- [Notification模块](js-apis-notification.md) -- [Context模块](js-apis-Context.md) \ No newline at end of file diff --git a/zh-cn/application-dev/reference/apis/js-apis-account.md b/zh-cn/application-dev/reference/apis/js-apis-account.md deleted file mode 100644 index 1727b66576bce6f6b1d678a3d92ce99e82120ed3..0000000000000000000000000000000000000000 --- a/zh-cn/application-dev/reference/apis/js-apis-account.md +++ /dev/null @@ -1,6 +0,0 @@ -# 账号管理 - - - -- **[分布式帐号管理](js-apis-distributed-account.md)** -- **[应用帐号管理](js-apis-appAccount.md)** \ No newline at end of file diff --git a/zh-cn/application-dev/reference/apis/js-apis-base-library.md b/zh-cn/application-dev/reference/apis/js-apis-base-library.md deleted file mode 100644 index eb15d6d04be0f09879d8a83d4e9c35a39f3b533f..0000000000000000000000000000000000000000 --- a/zh-cn/application-dev/reference/apis/js-apis-base-library.md +++ /dev/null @@ -1,11 +0,0 @@ -# 语言基础类库 - - - -- **[获取进程相关的信息](js-apis-process.md)** - -- **[URL字符串解析](js-apis-url.md)** - -- **[字符串编解码](js-apis-util.md)** - -- **[启动一个worker](js-apis-worker.md)** \ No newline at end of file diff --git a/zh-cn/application-dev/reference/apis/js-apis-basic-features.md b/zh-cn/application-dev/reference/apis/js-apis-basic-features.md deleted file mode 100644 index d41efd0d1810c8b5f39bd86b952a92d87f0226b3..0000000000000000000000000000000000000000 --- a/zh-cn/application-dev/reference/apis/js-apis-basic-features.md +++ /dev/null @@ -1,23 +0,0 @@ -# 基本功能 - - - -- **[应用上下文](js-apis-basic-features-app-context.md)** - -- **[日志打印](js-apis-basic-features-logs.md)** - -- **[页面路由](js-apis-basic-features-routes.md)** - -- **[弹窗](js-apis-basic-features-pop-up.md)** - -- **[应用配置](js-apis-basic-features-configuration.md)** - -- **[定时器](js-apis-basic-features-timer.md)** - -- **[设置系统时间](js-apis-system-time.md)** - -- **[动画](js-apis-basic-features-animator.md)** - -- **[应用打点](js-apis-hiappevent.md)** - -- **[性能打点](js-apis-bytrace.md)** \ No newline at end of file diff --git a/zh-cn/application-dev/reference/apis/js-apis-connectivity.md b/zh-cn/application-dev/reference/apis/js-apis-connectivity.md deleted file mode 100644 index 564f742a68bc058153515e87887792f2c9025ff6..0000000000000000000000000000000000000000 --- a/zh-cn/application-dev/reference/apis/js-apis-connectivity.md +++ /dev/null @@ -1,7 +0,0 @@ -# 网络与连接 - -- 网络与连接 - - [WLAN](js-apis-wifi.md) - - - diff --git a/zh-cn/application-dev/reference/apis/js-apis-data-rdb.md b/zh-cn/application-dev/reference/apis/js-apis-data-rdb.md index 35320c16f06518332a5cb19eebd3fffc54195cda..855629bb4b28870a50080996ea4ae669d8478587 100644 --- a/zh-cn/application-dev/reference/apis/js-apis-data-rdb.md +++ b/zh-cn/application-dev/reference/apis/js-apis-data-rdb.md @@ -32,7 +32,7 @@ getRdbStore(config: StoreConfig, version: number, callback: AsyncCallback<Rdb - 示例： ``` import dataRdb from '@ohos.data.rdb' - const STORE_CONFIG = { name: "RdbTest.db" } + const STORE_CONFIG = { name: "RdbTest.db", encryptKey: new Uint8Array([1, 2])} const SQL_CREATE_TABLE = "CREATE TABLE IF NOT EXISTS EMPLOYEE (ID INTEGER PRIMARY KEY AUTOINCREMENT, NAME TEXT NOT NULL, AGE INTEGER, SALARY REAL, CODES BLOB)" dataRdb.getRdbStore(STORE_CONFIG, 1, function (err, rdbStore) { rdbStore.executeSql(SQL_CREATE_TABLE) @@ -1043,7 +1043,7 @@ query(rdbPredicates: RdbPredicates, columns: Array<string>, callback: Asyn | -------- | -------- | -------- | -------- | | rdbPredicates | [RdbPredicates](#rdbpredicates) | 是 | 表示rdbPredicates的实例对象指定的查询条件。 | | columns | Array<string> | 是 | 表示要查询的列。如果值为空，则查询应用于所有列。 | - | callback | AsyncCallback<[ResultSet](../reference/apis/js-apis-data-resultset.md#resultset)> | 是 | 指定callback回调函数。如果操作成功，则返回ResultSet对象。 | + | callback | AsyncCallback<[ResultSet](js-apis-data-resultset.md)> | 是 | 指定callback回调函数。如果操作成功，则返回ResultSet对象。 | - 示例： ``` @@ -1070,7 +1070,7 @@ query(rdbPredicates: RdbPredicates, columns: Array<string>):Promise<Res - 返回值： | 类型 | 说明 | | -------- | -------- | - | Promise<[ResultSet](../reference/apis/js-apis-data-resultset.md#resultset)> | 指定Promise回调函数。如果操作成功，则返回ResultSet对象。 | + | Promise<[ResultSet](../apis/js-apis-data-resultset.md)> | 指定Promise回调函数。如果操作成功，则返回ResultSet对象。 | - 示例： ``` @@ -1127,6 +1127,54 @@ executeSql(sql: string, bindArgs: Array<ValueType>):Promise<void> console.info(TAG + 'delete done.')}) ``` +### changeEncryptKey8+ + +changeEncryptKey(newEncryptKey:Uint8Array, callback: AsyncCallback<number>):void + +修改数据库原有秘钥，结果以callbck形式返回。 + +- 参数： + + | 参数名 | 类型 | 必填 | 说明 | + | ------------- | --------------------------- | ---- | ------------------------------ | + | newEncryptKey | Uint8Array | 是 | 要变更的数据库秘钥，不能为空。 | + | callback | AsyncCallback<number> | 是 | 指定callback回调函数。 | + +- 示例： + + ``` + var newKey = new Uint8Array([1, 2]) + rdbStore.changeEncryptKey(newKey, function (ret) { + console.info(TAG + "result is " + ret)}) + ``` + + +### changeEncryptKey8+ + +changeEncryptKey(newEncryptKey:Uint8Array): Promise<number> + +修改数据库原有秘钥，结果以Promise形式返回。 + +- 参数： + + | 参数名 | 类型 | 必填 | 说明 | + | ------------- | ---------- | ---- | ------------------------------ | + | newEncryptKey | Uint8Array | 是 | 要变更的数据库秘钥，不能为空。 | + +- 返回值： + + | 类型 | 说明 | + | --------------------- | --------------------- | + | Promise<number> | 指定Promise回调函数。 | + +- 示例： + + ``` + var newKey = new Uint8Array([1, 2]) + let promise = rdbStore.changeEncryptKey(newKey) + promise.then((ret) => { + console.info(TAG + "result is " + ret)}) + ``` ## StoreConfig @@ -1135,6 +1183,7 @@ executeSql(sql: string, bindArgs: Array<ValueType>):Promise<void> | 参数名 | 类型 | 必填 | 说明 | | -------- | -------- | -------- | -------- | | name | string | 是 | 数据库文件名。 | +| encryptKey8+ | Uint8Array | 否 | 对数据库加密的秘钥。在创建时加入，则为初始化秘钥。后续打开时，需要保证其一致性。 | ## ValueType diff --git a/zh-cn/application-dev/reference/apis/js-apis-data.md b/zh-cn/application-dev/reference/apis/js-apis-data.md deleted file mode 100644 index 977343bc8587fce5200d1ac805cdca3ae6adc79e..0000000000000000000000000000000000000000 --- a/zh-cn/application-dev/reference/apis/js-apis-data.md +++ /dev/null @@ -1,15 +0,0 @@ -# 数据管理 - - - -- **[文件管理](js-apis-fileio.md)** - -- **[轻量级存储](js-apis-data-storage.md)** - -- **[分布式数据管理](js-apis-distributed-data.md)** - -- **[关系型数据库](js-apis-data-rdb.md)** - -- **[结果集](js-apis-data-resultset.md)** - -- **[DataAbility 谓词](js-apis-data-ability.md)** \ No newline at end of file diff --git a/zh-cn/application-dev/reference/apis/js-apis-device-mgmt.md b/zh-cn/application-dev/reference/apis/js-apis-device-mgmt.md deleted file mode 100644 index c0db6aae2f1412eded00f9c564440163297c3fee..0000000000000000000000000000000000000000 --- a/zh-cn/application-dev/reference/apis/js-apis-device-mgmt.md +++ /dev/null @@ -1,25 +0,0 @@ -# 设备管理 - - - -- **[传感器](js-apis-sensor.md)** - -- **[振动](js-apis-vibrator.md)** - -- **[屏幕亮度(新)](js-apis-brightness.md)** - -- **[电量信息(新)](js-apis-battery-info.md)** - -- **[系统电源管理](js-apis-power.md)** - -- **[Runninglock锁](js-apis-runninglock.md)** - -- **[设备信息](js-apis-device-info.md)** - -- **[系统属性](js-apis-system-parameter.md)** - -- **[设备管理](js-apis-device-manager.md)** - -- **[窗口](js-apis-window.md)** - -- **[显示设备属性](js-apis-display.md)** \ No newline at end of file diff --git a/zh-cn/application-dev/reference/apis/js-apis-geolocation.md b/zh-cn/application-dev/reference/apis/js-apis-geolocation.md new file mode 100644 index 0000000000000000000000000000000000000000..6641b3bc7fef14096e3a19553631d61752539348 --- /dev/null +++ b/zh-cn/application-dev/reference/apis/js-apis-geolocation.md @@ -0,0 +1,546 @@ +# 位置服务 + +> ![icon-note.gif](public_sys-resources/icon-note.gif) **说明：** +> 本模块首批接口从API version 7开始支持。后续版本的新增接口，采用上角标单独标记接口的起始版本。 + + +## 导入模块 + +``` +import geolocation from '@ohos.geolocation'; +import { LocationEventListener } from '@ohos.geolocation'; + +var locationEventListener = new LocationEventListener(); +``` + + +## 权限 + +ohos.permission.LOCATION + +ohos.permission.LOCATION_IN_BACKGROUND + + +## locationEventListener.on('locationChange') + +on(type: 'locationChange', request: LocationRequest, callback: Callback<Location>) : void + +开启位置变化订阅，并发起定位请求。 + +- 参数： + | 参数名 | 类型 | 必填 | 说明 | + | -------- | -------- | -------- | -------- | + | type | string | 是 | 设置事件类型。type为“locationChange”，表示位置变化。 | + | request | LocationRequest | 是 | 设置位置请求参数。 | + | callback | Callback<[Location](#location)> | 是 | 接收位置变化状态变化监听。 | + +- 示例： + ``` + var requestInfo = {'priority': 0x203, 'scenario': 0x300, 'timeInterval': 0, 'distanceInterval': 0, 'maxAccuracy': 0}; + var locationChange = (location) => { + console.log('locationChanger: data: ' + JSON.stringify(location)); + }; + locationEventListener.on('locationChange', requestInfo, locationChange); + ``` + + +## locationEventListener.off('locationChange') + +off(type: 'locationChange', callback?: Callback<Location>) : void + +关闭位置变化订阅，并删除对应的定位请求。 + +- 参数： + | 参数名 | 类型 | 必填 | 说明 | + | -------- | -------- | -------- | -------- | + | type | string | 是 | 设置事件类型。type为“locationChange”，表示位置变化。 | + | callback | Callback<[Location](#location)> | 否 | 接收位置变化状态变化监听。 | + +- 示例： + ``` + var requestInfo = {'priority': 0x203, 'scenario': 0x300, 'timeInterval': 0, 'distanceInterval': 0, 'maxAccuracy': 0}; + var locationChange = (location) => { + console.log('locationChanger: data: ' + JSON.stringify(location)); + }; + locationEventListener.on('locationChange', requestInfo, locationChange); + locationEventListener.off('locationChange', locationChange); + ``` + + +## locationEventListener.on('locationServiceState') + +on(type: 'locationServiceState', callback: Callback<boolean>) : void + +订阅位置服务状态变化。 + +- 参数： + | 参数名 | 类型 | 必填 | 说明 | + | -------- | -------- | -------- | -------- | + | type | string | 是 | 设置事件类型。type为“locationServiceState”，表示位置服务状态。 | + | callback | Callback<boolean> | 是 | 接收位置服务状态变化监听。 | + +- 示例： + ``` + var locationServiceState = (state) => { + console.log('locationServiceState: ' + state); + } + locationEventListener.on('locationServiceState', locationServiceState); + ``` + + +## locationEventListener.off('locationServiceState') + +off(type: 'locationServiceState', callback: Callback<boolean>) : void + +取消订阅位置服务状态变化。 + +- 参数： + | 参数名 | 类型 | 必填 | 说明 | + | -------- | -------- | -------- | -------- | + | type | string | 是 | 设置事件类型。type为“locationServiceState”，表示位置服务状态。 | + | callback | Callback<boolean> | 否 | 接收位置服务状态变化监听。 | + +- 示例： + ``` + var locationServiceState = (state) => { + console.log('locationServiceState: state: ' + state); + } + locationEventListener.on('locationServiceState', locationServiceState); + locationEventListener.off('locationServiceState', locationServiceState); + ``` + + +## locationEventListener.getCurrentLocation + +getCurrentLocation(request: CurrentLocationRequest, callback: AsyncCallback<Location>) : void + + +获取当前位置，使用callback回调异步返回结果。 + + +- 参数： + | 参数名 | 类型 | 必填 | 说明 | + | -------- | -------- | -------- | -------- | + | request | [CurrentLocationRequest](#currentlocationrequest) | 否 | 设置位置请求参数。 | + | callback | AsyncCallback<[Location](#location)> | 是 | 用来接收位置信息的回调。 | + +- 示例： + ``` + var requestInfo = {'priority': 0x203, 'scenario': 0x300,'maxAccuracy': 0}; + var locationChange = (location) => { + console.log('locationChanger: data: ' + JSON.stringify(location)); + }; + locationEventListener.getCurrentLocation(requestInfo, locationChange); + locationEventListener.getCurrentLocation(locationChange); + ``` + + +## locationEventListener.getCurrentLocation + +getCurrentLocation(request?: CurrentLocationRequest) : Promise<Location> + + +获取当前位置，使用Promise方式异步返回结果。 + + +- 参数： + | 参数名 | 类型 | 必填 | 说明 | + | -------- | -------- | -------- | -------- | + | request | [CurrentLocationRequest](#currentlocationrequest) | 否 | 设置位置请求参数。 | + +- 返回值： + | 参数名 | 说明 | + | -------- | -------- | + | Promise<[Location](#location)> | 返回位置信息。 | + +- 示例： + ``` + var requestInfo = {'priority': 0x203, 'scenario': 0x300,'maxAccuracy': 0}; + locationEventListener.getCurrentLocation(requestInfo).then((result) => { + console.log('current location: ' + JSON.stringify(result)); + }); + ``` + + +## geolocation.getLastLocation + +getLastLocation(callback: AsyncCallback<Location>) : void + +获取上一次位置，使用callback回调异步返回结果。 + +- 参数： + | 参数名 | 类型 | 必填 | 说明 | + | -------- | -------- | -------- | -------- | + | callback | AsyncCallback<[Location](#location)> | 是 | 用来接收上次位置的回调。 | + +- 示例： + ``` + geolocation.getLastLocation((data) => { + console.log('getLastLocation: data: ' + JSON.stringify(data)); + }); + ``` + + +## geolocation.getLastLocation + +getLastLocation() : Promise<Location> + +获取上一次位置，使用Promise方式异步返回结果。 + +- 返回值： + | 参数名 | 说明 | + | -------- | -------- | + | Promise<[Location](#location)> | 返回上次位置信息。 | + +- 示例： + ``` + geolocation.getLastLocation().then((result) => { + console.log('getLastLocation: result: ' + JSON.stringify(result)); + }); + ``` + + +## geolocation.isLocationEnabled + +isLocationEnabled(callback: AsyncCallback<boolean>) : void + + +判断位置服务是否已经打开，使用callback回调异步返回结果。 + + +- 参数： + | 参数名 | 类型 | 必填 | 说明 | + | -------- | -------- | -------- | -------- | + | callback | AsyncCallback<boolean> | 是 | 用来接收位置服务状态的回调。 | + +- 示例： + ``` + geolocation.isLocationEnabled((data) => { + console.log('isLocationEnabled: data: ' + data); + }); + ``` + + +## geolocation.isLocationEnabled + +isLocationEnabled() : Promise<boolean> + +判断位置服务是否已经开启，使用Promise方式异步返回结果。 + +- 返回值： + | 参数名 | 说明 | + | -------- | -------- | + | Promise<boolean> | 返回位置服务是否可用的状态。 | + +- 示例： + ``` + geolocation.isLocationEnabled().then((result) => { + console.log('promise, isLocationEnabled: ' + result); + }); + ``` + + +## geolocation.requestEnableLocation + +requestEnableLocation(callback: AsyncCallback<boolean>) : void + + +请求打开位置服务，使用callback回调异步返回结果。 + + +- 参数： + | 参数名 | 类型 | 必填 | 说明 | + | -------- | -------- | -------- | -------- | + | callback | AsyncCallback<boolean> | 是 | 用来接收位置服务状态的回调。 | + +- 示例： + ``` + geolocation.requestEnableLocation((data) => { + console.log('requestEnableLocation: ' + data); + }); + ``` + + +## geolocation.requestEnableLocation + +requestEnableLocation() : Promise<boolean> + +请求打开位置服务，使用Promise方式异步返回结果。 + +- 返回值： + | 参数名 | 说明 | + | -------- | -------- | + | Promise<boolean> | 返回位置服务是否可用。 | + +- 示例： + ``` + geolocation.requestEnableLocation().then((result) => { + console.log('promise, requestEnableLocation: ' + result); + }); + ``` + + +## geolocation.isGeoServiceAvailable + +isGeoServiceAvailable(callback: AsyncCallback<boolean>) : void + +判断（逆）地理编码服务状态，使用callback回调异步返回结果。 + +- 参数： + | 参数名 | 类型 | 必填 | 说明 | + | -------- | -------- | -------- | -------- | + | callback | AsyncCallback<boolean> | 是 | 用来接收地理编码服务状态的回调。 | + +- 示例： + ``` + geolocation.isLocationEnabled((data) => { + console.log('isLocationEnabled: ' + data); + }); + ``` + + +## geolocation.isGeoServiceAvailable + +isGeoServiceAvailable() : Promise<boolean> + +判断（逆）地理编码服务状态，使用Promise方式异步返回结果。 + +- 返回值： + | 参数名 | 说明 | + | -------- | -------- | + | Promise<boolean> | 返回地理编码服务是否可用的状态。 | + +- 示例： + ``` + geolocation.isLocationEnabled().then((result) => { + console.log('promise, isLocationEnabled: ' + result); + }); + ``` + + +## geolocation.getAddressesFromLocation + +getAddressesFromLocation(request: ReverseGeoCodeRequest, callback: AsyncCallback<Array<GeoAddress>>) : void + +调用逆地理编码服务，将坐标转换为地理描述，使用callback回调异步返回结果。 + +- 参数： + | 参数名 | 类型 | 必填 | 说明 | + | -------- | -------- | -------- | -------- | + | request | [ReverseGeoCodeRequest](#reversegeocoderequest) | 是 | 设置逆地理编码请求的相关参数。 | + | callback | AsyncCallback<Array<[GeoAddress](#geoaddress)>> | 是 | 设置接收逆地理编码请求的回调参数。 | + +- 示例： + ``` + var reverseGeocodeRequest = {"latitude": 31.12, "longitude": 121.11, "maxItems": 1}; + geolocation.getAddressesFromLocation(reverseGeocodeRequest, (data) => { + console.log('getAddressesFromLocation: ' + JSON.stringify(data)); + }); + ``` + + +## geolocation.getAddressesFromLocation + +getAddressesFromLocation(request: ReverseGeoCodeRequest) : Promise<Array<GeoAddress>>; + +调用逆地理编码服务，将坐标转换为地理描述，使用Promise方式异步返回结果。 + +- 参数： + | 参数名 | 类型 | 必填 | 说明 | + | -------- | -------- | -------- | -------- | + | request | [ReverseGeoCodeRequest](#reversegeocoderequest) | 是 | 设置逆地理编码请求的相关参数。 | + +- 返回值： + | 参数名 | 说明 | + | -------- | -------- | + | Promise<Array<[GeoAddress](#geoaddress)>> | 返回地理描述信息。 | + +- 示例： + ``` + var reverseGeocodeRequest = {"latitude": 31.12, "longitude": 121.11, "maxItems": 1}; + geolocation.getAddressesFromLocation(reverseGeocodeRequest, (data) => { + console.log('getAddressesFromLocation: ' + JSON.stringify(data)); + }); + ``` + + +## geolocation.getAddressesFromLocationName + +getAddressesFromLocationName(request: GeoCodeRequest, callback: AsyncCallback<Array<GeoAddress>>) : void + +调用地理编码服务，将地理描述转换为具体坐标，使用callback回调异步返回结果。 + +- 参数： + | 参数名 | 类型 | 必填 | 说明 | + | -------- | -------- | -------- | -------- | + | request | [GeoCodeRequest](#geocoderequest) | 是 | 设置地理编码请求的相关参数。 | + | callback | AsyncCallback<Array<[GeoAddress](#geoaddress)>> | 是 | 设置接收地理编码请求的回调参数。 | + +- 示例： + ``` + var geocodeRequest = {"description": "上海市浦东新区xx路xx号", "maxItems": 1}; + geolocation.getAddressesFromLocationName(geocodeRequest, (data) => { + console.log('getAddressesFromLocationName: ' + JSON.stringify(data)); + }); + ``` + + +## geolocation.getAddressesFromLocationName + +getAddressesFromLocationName(request: GeoCodeRequest) : Promise<Array<GeoAddress>> + +调用地理编码服务，将地理描述转换为具体坐标，使用Promise方式异步返回结果。 + +- 参数： + | 参数名 | 类型 | 必填 | 说明 | + | -------- | -------- | -------- | -------- | + | request | [GeoCodeRequest](#geocoderequest) | 是 | 设置地理编码请求的相关参数。 | + +- 返回值： + | 参数名 | 说明 | + | -------- | -------- | + | Promise<Array<[GeoAddress](#geoaddress)>> | 设置接收地理编码请求的回调参数。 | + +- 示例： + ``` + var geocodeRequest = {"description": "上海市浦东新区xx路xx号", "maxItems": 1}; + geolocation.getAddressesFromLocationName(geocodeRequest).then((result) => { + console.log('getAddressesFromLocationName: ' + JSON.stringify(result)); + }); + ``` + + +## LocationRequestPriority + +位置请求中位置信息优先级设置。 + +| 名称 | 默认值 | 说明 | +| -------- | -------- | -------- | +| UNSET | 0x200 | 表示未设置优先级。 | +| ACCURACY | 0x201 | 表示精度优先。 | +| LOW_POWER | 0x202 | 表示低功耗优先。 | +| FIRST_FIX | 0x203 | 表示快速获取位置优先，如果应用希望快速拿到1个位置，可以将优先级设置为该字段。 | + + +## LocationRequestScenario + +位置请求中定位场景设置。 +| 名称 | 默认值 | 说明 | +| -------- | -------- | -------- | +| UNSET | 0x300 | 表示未设置场景信息。 | +| NAVIGATION | 0x301 | 表示导航场景。 | +| TRAJECTORY_TRACKING | 0x302 | 表示运动轨迹记录场景。 | +| CAR_HAILING | 0x303 | 表示打车场景。 | +| DAILY_LIFE_SERVICE | 0x304 | 表示日常服务使用场景。 | +| NO_POWER | 0x305 | 表示无功耗功场景，这种场景下不会主动触发定位，会在其他应用定位时，才给当前应用返回位置。 | + + +## GeoLocationErrorCode + +位置服务中的错误码信息。 + +| 名称 | 默认值 | 说明 | +| -------- | -------- | -------- | +| INPUT_PARAMS_ERROR | 101 | 表示输入参数错误。 | +| REVERSE_GEOCODE_ERROR | 102 | 表示逆地理编码接口调用失败。 | +| GEOCODE_ERROR | 103 | 表示地理编码接口调用失败。 | +| LOCATOR_ERROR | 104 | 表示定位失败。 | +| LOCATION_SWITCH_ERROR | 105 | 表示定位开关。 | +| LAST_KNOWN_LOCATION_ERROR | 106 | 表示获取上次位置失败。 | +| LOCATION_REQUEST_TIMEOUT_ERROR | 107 | 表示单次定位，没有在指定时间内返回位置。 | + + +## ReverseGeoCodeRequest + +逆地理编码请求接口。 + +| 名称 | 参数类型 | 必填 | 说明 | +| -------- | -------- | -------- | -------- | +| locale | string | 否 | 指定位置描述信息的语言，“zh”代表中文，“en”代表英文。 | +| latitude | number | 是 | 表示纬度信息，正值表示北纬，负值表示南纬。 | +| longitude | number | 是 | 表示经度信息，正值表示东经，负值表示西经。 | +| maxItems | number | 否 | 指定返回位置信息的最大个数。 | + + +## GeoCodeRequest + +地理编码请求接口。 + +| 名称 | 参数类型 | 必填 | 说明 | +| -------- | -------- | -------- | -------- | +| locale | string | 否 | 表示位置描述信息的语言，“zh”代表中文，“en”代表英文。 | +| description | number | 是 | 表示位置信息描述，如“上海市浦东新区xx路xx号”。 | +| maxItems | number | 否 | 表示返回位置信息的最大个数。 | +| minLatitude | number | 否 | 表示最小纬度信息，与下面三个参数一起，表示一个经纬度范围。 | +| minLongitude | number | 否 | 表示最小经度信息。 | +| maxLatitude | number | 否 | 表示最大纬度信息。 | +| maxLongitude | number | 否 | 表示最大经度信息。 | + + +## GeoAddress + +地理编码类型。 + +| 名称 | 参数类型 | 必填 | 说明 | +| -------- | -------- | -------- | -------- | +| latitude | number | 否 | 表示纬度信息，正值表示北纬，负值表示南纬。 | +| longitude | number | 否 | 表示经度信息，正值表示东经，负值表是西经。 | +| locale | string | 否 | 表示位置描述信息的语言，“zh”代表中文，“en”代表英文。 | +| placeName | string | 否 | 表示地区信息。 | +| countryCode | string | 否 | 表示国家码信息。 | +| countryName | string | 否 | 表示国家信息。 | +| administrativeArea | string | 否 | 表示省份区域信息。 | +| subAdministrativeArea | string | 否 | 表示表示子区域信息。 | +| locality | string | 否 | 表示城市信息。 | +| subLocality | string | 否 | 表示子城市信息。 | +| roadName | string | 否 | 表示路名信息。 | +| subRoadName | string | 否 | 表示子路名信息。 | +| premises | string | 否 | 表示门牌号信息。 | +| postalCode | string | 否 | 表示邮政编码信息。 | +| phoneNumber | string | 否 | 表示联系方式信息。 | +| addressUrl | string | 否 | 表示位置信息附件的网址信息。 | +| descriptions | Array<string> | 否 | 表示附加的描述信息。 | +| descriptionsSize | number | 否 | 表示附加的描述信息数量。 | + + +## LocationRequest + +位置信息请求类型。 + +| 名称 | 参数类型 | 必填 | 说明 | +| -------- | -------- | -------- | -------- | +| priority | [LocationRequestPriority](#locationrequestpriority) | 否 | 表示优先级信息。 | +| scenario | [LocationRequestScenario](#locationrequestscenario) | 是 | 表示场景信息。 | +| timeInterval | number | 否 | 表示上报位置信息的时间间隔。 | +| distanceInterval | number | 否 | 表示上报位置信息的距离间隔。 | +| maxAccuracy | number | 否 | 表示精度信息。 | + + +## CurrentLocationRequest + +当前位置信息请求类型。 + +| 名称 | 参数类型 | 必填 | 说明 | +| -------- | -------- | -------- | -------- | +| priority | [LocationRequestPriority](#locationrequestpriority) | 否 | 表示优先级信息。 | +| scenario | [LocationRequestScenario](#locationrequestscenario) | 否 | 表示场景信息。 | +| maxAccuracy | number | 否 | 表示精度信息，单位是米。 | +| timeoutMs | number | 否 | 表示超时时间，单位是毫秒，最小为1000毫秒。 | + + +## Location + +位置信息类型。 + +| 名称 | 参数类型 | 必填 | 说明 | +| -------- | -------- | -------- | -------- | +| latitude | number | 是 | 表示纬度信息，正值表示北纬，负值表示南纬。 | +| longitude | number | 是 | 表示经度信息，正值表示东经，负值表是西经。 | +| altitude | number | 是 | 表示高度信息，单位米。 | +| accuracy | number | 是 | 表示精度信息，单位米。 | +| speed | number | 是 | 表示速度信息，单位米每秒。 | +| timeStamp | number | 是 | 表示位置时间戳，UTC格式。 | +| direction | number | 是 | 表示航向信息。 | +| timeSinceBoot | number | 是 | 表示位置时间戳，开机时间格式。 | +| additions | Array<string> | 否 | 附加信息。 | +| additionSize | number | 否 | 附加信息数量。 | diff --git a/zh-cn/application-dev/reference/apis/js-apis-i18n.md b/zh-cn/application-dev/reference/apis/js-apis-i18n.md index cda606534f085f5aac08401c6634ac652142c335..b08b7921216d36ff904923054d6993f794fa94cd 100644 --- a/zh-cn/application-dev/reference/apis/js-apis-i18n.md +++ b/zh-cn/application-dev/reference/apis/js-apis-i18n.md @@ -27,14 +27,14 @@ getDisplayLanguage(language: string, locale: string, sentenceCase?: boolean): st - 参数： | 参数名 | 类型 | 必填 | 说明 | | -------- | -------- | -------- | -------- | - | language | string | 是 | 指定语言 | - | locale | string | 是 | 显示指定语言的区域ID | - | sentenceCase | boolean | 否 | 本地化显示文本是否要首字母大写 | + | language | string | 是 | 指定语言。 | + | locale | string | 是 | 显示指定语言的区域ID。 | + | sentenceCase | boolean | 否 | 本地化显示文本是否要首字母大写。 | - 返回值： | 类型 | 说明 | | -------- | -------- | - | string | 指定语言的本地化显示文本 | + | string | 指定语言的本地化显示文本。 | - 示例： ``` @@ -52,14 +52,14 @@ getDisplayCountry(country: string, locale: string, sentenceCase?: boolean): stri - 参数： | 参数名 | 类型 | 必填 | 说明 | | -------- | -------- | -------- | -------- | - | country | string | 是 | 指定国家 | - | locale | string | 是 | 显示指定国家的区域ID | - | sentenceCase | boolean | 否 | 本地化显示文本是否要首字母大写 | + | country | string | 是 | 指定国家。 | + | locale | string | 是 | 显示指定国家的区域ID。 | + | sentenceCase | boolean | 否 | 本地化显示文本是否要首字母大写。 | - 返回值： | 类型 | 说明 | | -------- | -------- | - | string | 指定国家的本地化显示文本 | + | string | 指定国家的本地化显示文本。 | - 示例： ``` @@ -68,6 +68,29 @@ getDisplayCountry(country: string, locale: string, sentenceCase?: boolean): stri ``` +## i18n.isRTL8+ + +isRTL(locale: string): boolean + +获取是否为从右至左显示语言。 + +- 参数： + | 参数名 | 类型 | 说明 | + | -------- | -------- | -------- | + | locale | string | 指定区域ID。 | + +- 返回值： + | 类型 | 说明 | + | -------- | -------- | + | boolean | true表示该locale从右至左显示语言；false表示该locale从左至右显示语言。 | + +- 示例： + ``` + i18n.isRTL("zh-CN");// 中文不是RTL语言，返回false + i18n.isRTL("ar-EG");// 阿语是RTL语言，返回true + ``` + + ## i18n.getSystemLanguage getSystemLanguage(): string @@ -77,7 +100,7 @@ getSystemLanguage(): string - 返回值： | 类型 | 说明 | | -------- | -------- | - | string | 系统语言ID | + | string | 系统语言ID。 | - 示例： ``` @@ -94,7 +117,7 @@ getSystemRegion(): string - 返回值： | 类型 | 说明 | | -------- | -------- | - | string | 系统地区ID | + | string | 系统地区ID。 | - 示例： ``` @@ -111,9 +134,900 @@ getSystemLocale(): string - 返回值： | 类型 | 说明 | | -------- | -------- | - | string | 系统区域ID | + | string | 系统区域ID。 | - 示例： ``` i18n.getSystemLocale(); ``` + + +## i18n.getCalendar8+ + +getCalendar(locale: string, type? : string): Calendar + +获取日历对象。 + +- 参数： + | 参数名 | 类型 | 必填 | 说明 | + | -------- | -------- | -------- | -------- | + | locale | string | 是 | 合法的locale值，例如zh-Hans-CN。 | + | type | string | 否 | 合法的日历类型，目前合法的类型有buddhist, chinese, coptic, ethiopic, hebrew, gregory, indian, islamic_civil, islamic_tbla, islamic_umalqura, japanese, persian。当type没有给出时，采用区域默认的日历类型。 | + +- 返回值： + | 类型 | 说明 | + | -------- | -------- | + | [Calendar](#calendar8) | 日历对象。 | + +- 示例： + ``` + i18n.getCalendar("zh-Hans", "gregory"); + ``` + + +## Calendar8+ + + +### setTime8+ + +setTime(date: Date): void + +设置日历对象内部的时间日期。 + +- 参数： + | 参数名 | 类型 | 必填 | 说明 | + | -------- | -------- | -------- | -------- | + | date | Date | 是 | 将要设置的日历对象的内部时间日期。 | + +- 示例： + ``` + var calendar = I18n.getCalendar("en-US", "gregory"); + var date = new Date(2021, 10, 7, 8, 0, 0, 0); + calendar.setTime(date); + ``` + + +### setTime8+ + +setTime(time: number): void + +设置日历对象内部的时间日期, time为从1970.1.1 00:00:00 GMT逝去的毫秒数。 + +- 参数： + | 参数名 | 类型 | 必填 | 说明 | + | -------- | -------- | -------- | -------- | + | time | number | 是 | time为从1970.1.1 00:00:00 GMT逝去的毫秒数。 | + +- 示例： + ``` + var calendar = I18n.getCalendar("en-US", "gregory"); + calendar.setTime(10540800000); + ``` + + +### set8+ + +set(year: number, month: number, date:number, hour?: number, minute?: number, second?: number): void + +设置日历对象的年、月、日、时、分、秒。 + +- 参数： + | 参数名 | 类型 | 必填 | 说明 | + | -------- | -------- | -------- | -------- | + | year | number | 是 | 设置的年。 | + | month | number | 是 | 设置的月。 | + | date | number | 是 | 设置的日。 | + | hour | number | 否 | 设置的小时。 | + | minute | number | 否 | 设置的分钟。 | + | second | number | 否 | 设置的秒。 | + +- 示例： + ``` + var calendar = i18n.getCalendar("zh-Hans"); + calendar.setTime(2021, 10, 1, 8, 0, 0); // set time to 2021.10.1 08:00:00 + ``` + + +### setTimeZone8+ + +setTimeZone(timezone: string): void + +设置日历对象的时区。 + +- 参数： + | 参数名 | 类型 | 必填 | 说明 | + | -------- | -------- | -------- | -------- | + | timezone | string | 是 | 设置的时区id，如“Asia/Shanghai”。 | + +- 示例： + ``` + var calendar = i18n.getCalendar("zh-Hans"); + calendar.setTimeZone("Asia/Shanghai"); + ``` + + +### getTimeZone8+ + +getTimeZone(): string + +获取日历对象的时区。 + +- 返回值： + | 类型 | 说明 | + | -------- | -------- | + | string | 日历对象的时区id。 | + +- 示例： + ``` + var calendar = i18n.getCalendar("zh-Hans"); + calendar.setTimeZone("Asia/Shanghai"); + calendar.getTimeZone(); // Asia/Shanghai" + ``` + + +### getFirstDayOfWeek8+ + +getFirstDayOfWeek(): number + +获取日历对象的一周起始日。 + +- 返回值： + | 类型 | 说明 | + | -------- | -------- | + | number | 获取一周的起始日，1代表周日，7代表周六。 | + +- 示例： + ``` + var calendar = I18n.getCalendar("en-US", "gregory"); + calendar.getFirstDayOfWeek(); + ``` + + +### setFirstDayOfWeek8+ + +setFirstDayOfWeek(value: number): void + +设置每一周的起始日。 + +- 参数： + | 参数名 | 类型 | 必填 | 说明 | + | -------- | -------- | -------- | -------- | + | value | number | 否 | 设置一周的起始日，1代表周日，7代表周六。 | + +- 示例： + ``` + var calendar = i18n.getCalendar("zh-Hans"); + calendar.setFirstDayOfWeek(0); + ``` + + +### getMinimalDaysInFirstWeek8+ + +getMinimalDaysInFirstWeek(): number + +获取一年中第一周的最小天数。 + +- 返回值： + | 类型 | 说明 | + | -------- | -------- | + | number | 一年中第一周的最小天数。 | + +- 示例： + ``` + var calendar = i18n.getCalendar("zh-Hans"); + calendar.getMinimalDaysInFirstWeek(); + ``` + + +### setMinimalDaysInFirstWeek8+ + +setMinimalDaysInFirstWeek(value: number): void + +设置一年中第一周的最小天数。 + +- 参数： + | 参数名 | 类型 | 必填 | 说明 | + | -------- | -------- | -------- | -------- | + | value | number | 否 | 一年中第一周的最小天数。 | + +- 示例： + ``` + var calendar = i18n.getCalendar("zh-Hans"); + calendar.setMinimalDaysInFirstWeek(3); + ``` + + +### get8+ + +get(field: string): number + +获取日历对象中与field相关联的值。 + +- 参数： + | 参数名 | 类型 | 必填 | 说明 | + | -------- | -------- | -------- | -------- | + | field | string | 是 | 通过field来获取日历对象相应的值。目前支持的field值有 era, year, month, week_of_year, week_of_month, date, day_of_year, day_of_week, day_of_week_in_month, hour, hour_of_day, minute, second, millisecond, zone_offset, dst_offset, year_woy, dow_local, extended_year, julian_day, milliseconds_in_day, is_leap_month。 | + +- 返回值： + | 类型 | 说明 | + | -------- | -------- | + | number | 与field相关联的值，如当前Calendar对象的内部日期的年份为1990，get("year")返回1990。 | + +- 示例： + ``` + var calendar = i18n.getCalendar("zh-Hans"); + calendar.setTime(2021, 10, 1, 8, 0, 0); // set time to 2021.10.1 08:00:00 + calendar.get("hour_of_day"); // 8 + ``` + + +### getDisplayName8+ + +getDisplayName(locale: string): string + +获取日历对象在locale所指定的区域的名字。 + +- 参数： + | 参数名 | 类型 | 必填 | 说明 | + | -------- | -------- | -------- | -------- | + | locale | string | 是 | locale指定获取哪个区域下该calendar的名字，如buddhist在en-US上显示的名称为“Buddhist Calendar”。 | + +- 返回值： + | 类型 | 说明 | + | -------- | -------- | + | string | 日历在locale所指示的区域的名字。 | + +- 示例： + ``` + var calendar = i18n.getCalendar("en-US", "buddhist"); + calendar.getDisplayName("zh"); // 佛历 + ``` + + +### isWeekend8+ + +isWeekend(date?: Date): boolean + +判断给定的日期是否在日历中是周末。 + +- 参数： + | 参数名 | 类型 | 必填 | 说明 | + | -------- | -------- | -------- | -------- | + | date | Date | 否 | 判断日期在日历中是否是周末。如果date没有给出，判断calendar当前日期是否为周末。 | + +- 返回值： + | 类型 | 说明 | + | -------- | -------- | + | boolean | 当所判断的日期为周末时，返回 true，否则返回false。 | + +- 示例： + ``` + var calendar = i18n.getCalendar("zh-Hans"); + calendar.setTime(2021, 11, 11, 8, 0, 0); // set time to 2021.11.11 08:00:00 + calendar.isWeekend(); // false + var date = new Date(2011, 11, 6, 9, 0, 0); + calendar.isWeekend(date); // true + ``` + + +## PhoneNumberFormat8+ + + +### constructor8+ + +constructor(country: string, options?: PhoneNumberFormatOptions) + +创建电话号码格式化对象。 + +参数： +| 参数名 | 类型 | 必填 | 说明 | +| -------- | -------- | -------- | -------- | +| country | string | 是 | 表示电话号码所属国家或地区代码。 | +| options | [PhoneNumberFormatOptions](#phonenumberformatoptions8) | 否 | 电话号码格式化对象的相关选项。 | + +- 示例： + ``` + var phoneNumberFormat= new i18n.PhoneNumberFormat("CN", {"type": "E164"}); + ``` + + +### isValidNumber8+ + +isValidNumber(number: string): boolean + +判断传入的电话号码格式是否正确。 + +- 参数： + | 参数名 | 类型 | 必填 | 说明 | + | -------- | -------- | -------- | -------- | + | number | string | 是 | 待判断的电话号码。 | + +- 返回值： + | 类型 | 说明 | + | -------- | -------- | + | boolean | 返回true表示电话号码的格式正确，返回false表示电话号码的格式错误。 | + +- 示例： + ``` + var phonenumberfmt = new i18n.PhoneNumberFormat("CN"); + phonenumberfmt.isValidNumber("15812312312"); + ``` + + +### format8+ + +format(number: string): string + +对电话号码进行格式化。 + +- 参数： + | 参数名 | 类型 | 必填 | 说明 | + | -------- | -------- | -------- | -------- | + | number | string | 是 | 待格式化的电话号码。 | + +- 返回值： + | 类型 | 说明 | + | -------- | -------- | + | string | 格式化后的电话号码。 | + +- 示例： + ``` + var phonenumberfmt = new i18n.PhoneNumberFormat("CN"); + phonenumberfmt.format("15812312312"); + ``` + + +## PhoneNumberFormatOptions8+ + +表示电话号码格式化对象可设置的属性。 + + +| 名称 | 参数类型 | 可读 | 可写 | 说明 | +| -------- | -------- | -------- | -------- | -------- | +| type | string | 是 | 是 | 表示对电话号码格式化的类型，取值范围："E164", "INTERNATIONAL", "NATIONAL", "RFC3966"。 | + + +## UnitInfo8+ + +度量衡单位信息。 + + +| 名称 | 参数类型 | 可读 | 可写 | 说明 | +| -------- | -------- | -------- | -------- | -------- | +| unit | string | 是 | 是 | 单位的名称，如："meter", "inch", "cup"等。 | +| measureSystem | string | 是 | 是 | 单位的度量体系，取值包括："SI", "US", "UK"。 | + + +## Util8+ + + +### unitConvert8+ + +unitConvert(fromUnit: UnitInfo, toUnit: UnitInfo, value: number, locale: string, style?: string): string + +将fromUnit的单位转换为toUnit的单位，并根据区域与风格进行格式化。 + +- 参数： + | 参数名 | 类型 | 必填 | 说明 | + | -------- | -------- | -------- | -------- | + | fromUnit | [UnitInfo](#unitinfo8) | 是 | 要被转换的单位。 | + | toUnit | [UnitInfo](#unitinfo8) | 是 | 要转换为的单位。 | + | value | number | 是 | 要被转换的单位的数量值。 | + | locale | string | 是 | 格式化时使用的区域参数，如：zh-Hans-CN。 | + | style | string | 否 | 格式化使用的风格，取值包括："long", "short", "medium"。 | + +- 返回值： + | 类型 | 说明 | + | -------- | -------- | + | string | 按照toUnit的单位格式化后，得到的字符串。 | + +- 示例： + ``` + I18n.Util.unitConvert({unit: "cup", measureSystem: "US"}, {unit: "liter", measureSystem: "SI"}, 1000, "en-US", "long"); + ``` + + +## i18n.getInstance8+ + + +getInstance(locale?: string): IndexUtil + + +创建并返回IndexUtil对象。 + + +- 参数： + | 参数名 | 类型 | 必填 | 说明 | + | -------- | -------- | -------- | -------- | + | locale | string | 否 | 包含区域设置信息的字符串，包括语言以及可选的脚本和区域。 | + +- 返回值： + | 类型 | 说明 | + | -------- | -------- | + | [IndexUtil](#indexutil8) | locale对应的IndexUtil对象。 | + + +- 示例： + ``` + var indexUtil= i18n.getInstance("zh-CN"); + ``` + + +## IndexUtil8+ + + +### getIndexList8+ + +getIndexList(): Array<string> + +获取当前locale对应的索引列表。 + +- 返回值： + | 类型 | 说明 | + | -------- | -------- | + | Array<string> | 返回当前locale对应的索引列表。 | + +- 示例： + ``` + var indexUtil = i18n.getInstance("zh-CN"); + var indexList = indexUtil.getIndexList(); + ``` + + +### addLocale8+ + +addLocale(locale: string) + +将新的locale对应的索引加入当前索引列表。 + +- 参数： + | 参数名 | 类型 | 必填 | 说明 | + | -------- | -------- | -------- | -------- | + | locale | string | 是 | 包含区域设置信息的字符串，包括语言以及可选的脚本和区域。 | + +- 示例： + ``` + var indexUtil = i18n.getInstance("zh-CN"); + indexUtil.addLocale("en-US"); + ``` + + +### getIndex8+ + +getIndex(text: string): string + +获取text对应的索引。 + +- 参数： + | 参数名 | 类型 | 必填 | 说明 | + | -------- | -------- | -------- | -------- | + | text | string | 是 | 待计算索引值的输入文本。 | + +- 返回值： + | 类型 | 说明 | + | -------- | -------- | + | string | 输入文本对应的索引值。 | + +- 示例： + ``` + var indexUtil= i18n.getInstance("zh-CN"); + indexUtil.getIndex("hi"); // 返回h + ``` + + +## Character8+ + + +### isDigit8+ + +isDigit(char: string): boolean + +判断字符串char是否是数字。 + +- 参数： + | 参数名 | 类型 | 必填 | 说明 | + | -------- | -------- | -------- | -------- | + | char | string | 是 | 输入字符。 | + +- 返回值： + | 类型 | 说明 | + | -------- | -------- | + | boolean | 返回true表示输入的字符是数字，返回false表示输入的字符不是数字。 | + +- 示例： + ``` + var isdigit = Character.isDigit("1"); // 返回true + ``` + + +### isSpaceChar8+ + +isSpaceChar(char: string): boolean + +判断字符串char是否是空格符。 + +- 参数： + | 参数名 | 类型 | 必填 | 说明 | + | -------- | -------- | -------- | -------- | + | char | string | 是 | 输入字符。 | + +- 返回值： + | 类型 | 说明 | + | -------- | -------- | + | boolean | 返回true表示输入的字符是空格符，返回false表示输入的字符不是空格符。 | + +- 示例： + ``` + var isspacechar = Character.isSpaceChar("a"); // 返回false + ``` + + +### isWhitespace8+ + +isWhitespace(char: string): boolean + +判断字符串char是否是空白符。 + +- 参数： + | 参数名 | 类型 | 必填 | 说明 | + | -------- | -------- | -------- | -------- | + | char | string | 是 | 输入字符。 | + +- 返回值： + | 类型 | 说明 | + | -------- | -------- | + | boolean | 返回true表示输入的字符是空白符，返回false表示输入的字符不是空白符。 | + +- 示例： + ``` + var iswhitespace = Character.isWhitespace("a"); // 返回false + ``` + + +### isRTL8+ + +isRTL(char: string): boolean + +判断字符串char是否是从右到左语言的字符。 + +- 参数： + | 参数名 | 类型 | 必填 | 说明 | + | -------- | -------- | -------- | -------- | + | char | string | 是 | 输入字符。 | + +- 返回值： + | 类型 | 说明 | + | -------- | -------- | + | boolean | 返回true表示输入的字符是从右到左语言的字符，返回false表示输入的字符不是从右到左语言的字符。 | + +- 示例： + ``` + var isrtl = Character.isRTL("a"); // 返回false + ``` + + +### isIdeograph8+ + +isIdeograph(char: string): boolean + +判断字符串char是否是表意文字。 + +- 参数： + | 参数名 | 类型 | 必填 | 说明 | + | -------- | -------- | -------- | -------- | + | char | string | 是 | 输入字符。 | + +- 返回值： + | 类型 | 说明 | + | -------- | -------- | + | boolean | 返回true表示输入的字符是表意文字，返回false表示输入的字符不是表意文字。 | + +- 示例： + ``` + var isideograph = Character.isIdeograph("a"); // 返回false + ``` + + +### isLetter8+ + +isLetter(char: string): boolean + +判断字符串char是否是字母。 + +- 参数： + | 参数名 | 类型 | 必填 | 说明 | + | -------- | -------- | -------- | -------- | + | char | string | 是 | 输入字符。 | + +- 返回值： + | 类型 | 说明 | + | -------- | -------- | + | boolean | 返回true表示输入的字符是字母，返回false表示输入的字符不是字母。 | + +- 示例： + ``` + var isletter = Character.isLetter("a"); // 返回true + ``` + + +### isLowerCase8+ + +isLowerCase(char: string): boolean + +判断字符串char是否是小写字母。 + +- 参数： + | 参数名 | 类型 | 必填 | 说明 | + | -------- | -------- | -------- | -------- | + | char | string | 是 | 输入字符。 | + +- 返回值： + | 类型 | 说明 | + | -------- | -------- | + | boolean | 返回true表示输入的字符是小写字母，返回false表示输入的字符不是小写字母。 | + +- 示例： + ``` + var islowercase = Character.isLowerCase("a"); // 返回true + ``` + + +### isUpperCase8+ + +isUpperCase(char: string): boolean + +判断字符串char是否是大写字母。 + +- 参数： + | 参数名 | 类型 | 必填 | 说明 | + | -------- | -------- | -------- | -------- | + | char | string | 是 | 输入字符。 | + +- 返回值： + | 类型 | 说明 | + | -------- | -------- | + | boolean | 返回true表示输入的字符是大写字母，返回false表示输入的字符不是大写字母。 | + +- 示例： + ``` + var isuppercase = Character.isUpperCase("a"); // 返回false + ``` + + +### getType8+ + +getType(char: string): string + +获取输入字符串的一般类别值。 + +- 参数： + | 参数名 | 类型 | 必填 | 说明 | + | -------- | -------- | -------- | -------- | + | char | string | 是 | 输入字符。 | + +- 返回值： + | 类型 | 说明 | + | -------- | -------- | + | string | 输入字符的一般类别值。 | + +- 示例： + ``` + var type = Character.getType("a"); + ``` + + +## i18n.getLineInstance8+ + +getLineInstance(locale: string): BreakIterator + +获取一个用于断句的[BreakIterator](#breakiterator8)对象。 + +- 参数： + | 参数名 | 类型 | 必填 | 说明 | + | -------- | -------- | -------- | -------- | + | locale | string | 是 | 合法的locale值，例如zh-Hans-CN。生成的[BreakIterator](#breakiterator8)将按照locale所指定的区域的规则来进行断句。 | + +- 返回值： + | 类型 | 说明 | + | -------- | -------- | + | [BreakIterator](#breakiterator8) | 用于进行断句的处理器。 | + +- 示例： + ``` + i18n.getLineInstance("en"); + ``` + + +## BreakIterator8+ + + +### setLineBreakText8+ + +setLineBreakText(text: string): void + +设置[BreakIterator](#breakiterator8)要处理的文本。 + +- 参数： + | 参数名 | 类型 | 必填 | 说明 | + | -------- | -------- | -------- | -------- | + | text | string | 是 | 指定BreakIterator进行断句的文本。 | + +- 示例： + ``` + iterator = I18n.getLineInstance("en"); + iterator.setLineBreakText("Apple is my favorite fruit."); + ``` + + +### getLineBreakText8+ + +getLineBreakText(): string + +获取[BreakIterator](#breakiterator8)当前处理的文本。 + +- 返回值： + | 类型 | 说明 | + | -------- | -------- | + | string | BreakIterator对象正在处理的文本 | + +- 示例： + ``` + iterator = I18n.getLineInstance("en"); + iterator.setLineBreakText("Apple is my favorite fruit."); + iterator.getLineBreakText(); // Apple is my favorite fruit. + ``` + + +### current8+ + +current(): number + +获取[BreakIterator](#breakiterator8)对象在当前处理的文本中的位置。 + +- 返回值： + | 类型 | 说明 | + | -------- | -------- | + | number | BreakIterator在当前所处理的文本中的位置。 | + +- 示例： + ``` + iterator = I18n.getLineInstance("en"); + iterator.setLineBreakText("Apple is my favorite fruit."); + breakIter.current(); // 0 + ``` + + +### first8+ + +first(): number + +将[BreakIterator](#breakiterator8)对象设置到第一个可断句的分割点。第一个分割点总是被处理的文本的起始位置。 + +- 返回值： + | 类型 | 说明 | + | -------- | -------- | + | number | 被处理文本的第一个分割点的偏移量。 | + +- 示例： + ``` + iterator = I18n.getLineInstance("en"); + iterator.setLineBreakText("Apple is my favorite fruit."); + breakIter.first(); // 0 + ``` + + +### last8+ + +last(): number + +将[BreakIterator](#breakiterator8)对象的位置设置到最后一个可断句的分割点。最后一个分割点总是被处理文本末尾的下一个位置。 + +- 返回值： + | 类型 | 说明 | + | -------- | -------- | + | number | 被处理的文本的最后一个分割点的偏移量 | + +- 示例： + ``` + iterator = I18n.getLineInstance("en"); + iterator.setLineBreakText("Apple is my favorite fruit."); + iterator.last(); // 27 + ``` + + +### next8+ + +next(index?: number): number + +如果index给出，并且index是一个正数将[BreakIterator](#breakiterator8)向后移动number个可断句的分割点，如果n是一个负数，向前移动相应个分割点。若index没有给出，则相当于index = 1。 + +- 参数： + | 参数名 | 类型 | 必填 | 说明 | + | -------- | -------- | -------- | -------- | + | index | number | 否 | [BreakIterator](#breakiterator8)将要移动的分割点数，正数代表向后移动，负数代表向前移动。若index没有给出，则按照index=1处理。 | + +- 返回值： + | 类型 | 说明 | + | -------- | -------- | + | number | 返回移动了index个分割点后，当前[BreakIterator](#breakiterator8)在文本中的位置。若移动index个分割点后超出了所处理的文本的长度范围，返回-1。 | + +- 示例： + ``` + iterator = I18n.getLineInstance("en"); + iterator.setLineBreakText("Apple is my favorite fruit."); + iterator.first(); // 0 + iterator.next(); // 6 + iterator.next(10); // -1 + ``` + + +### previous8+ + +previous(): number + +将[BreakIterator](#breakiterator8)移动到前一个分割点处。 + +- 返回值： + | 类型 | 说明 | + | -------- | -------- | + | number | 返回移动到前一个分割点后，当前[BreakIterator](#breakiterator8)在文本中的位置。若移动index个分割点后超出了所处理的文本的长度范围，返回-1。 | + +- 示例： + ``` + iterator = I18n.getLineInstance("en"); + iterator.setLineBreakText("Apple is my favorite fruit."); + iterator.first(); // 0 + iterator.next(3); // 12 + iterator.previous(); // 9 + ``` + + +### following8+ + +following(offset: number): number + +将[BreakIterator](#breakiterator8)设置到由offset指定的位置的后面一个分割点。返回移动后[BreakIterator](#breakiterator8)的位置。 + +- 参数： + | 参数名 | 类型 | 必填 | 说明 | + | -------- | -------- | -------- | -------- | + | offset | number | 是 | 将[BreakIterator](#breakiterator8)对象的位置设置到由offset所指定的位置的下一个分割点。 | + +- 返回值： + | 类型 | 说明 | + | -------- | -------- | + | number | 返回[BreakIterator](#breakiterator8)移动后的位置，如果由offset所指定的位置的下一个分割点超出了文本的范围则返回-1。 | + +- 示例： + ``` + iterator = I18n.getLineInstance("en"); + iterator.setLineBreakText("Apple is my favorite fruit."); + iterator.following(0); // 6 + iterator.following(100); // -1 + iterator.current(); // 27 + ``` + + +### isBoundary8+ + +isBoundary(offset: number): boolean + +如果offset所指定的文本位置是一个分割点，那么返回true，否则返回false。如果返回true, 将[BreakIterator](#breakiterator8)对象设置到offset所指定的位置, 否则相当于调用[following](#following8)(offset)。 + +- 参数： + | 参数名 | 类型 | 必填 | 说明 | + | -------- | -------- | -------- | -------- | + | offset | number | 是 | 指定需要进行判断的位置 | + +- 返回值： + | 类型 | 说明 | + | -------- | -------- | + | boolean | 如果是一个分割点返回true, 否则返回false。 | + +- 示例： + ``` + iterator = I18n.getLineInstance("en"); + iterator.setLineBreakText("Apple is my favorite fruit."); + iterator.isBoundary(0); // true; + iterator.isBoundary(5); // false; + ``` diff --git a/zh-cn/application-dev/reference/apis/js-apis-intl.md b/zh-cn/application-dev/reference/apis/js-apis-intl.md index bed5a28c1e7f369ebb1e7fd75fe546c7492a6a96..3bd8821cb190423c1ac5ec8c4cd4cd23b308a973 100644 --- a/zh-cn/application-dev/reference/apis/js-apis-intl.md +++ b/zh-cn/application-dev/reference/apis/js-apis-intl.md @@ -13,7 +13,7 @@ import Intl from '@ohos.intl'; ``` -## 权限 +## 权限列表 无 @@ -25,21 +25,21 @@ import Intl from '@ohos.intl'; | 名称 | 参数类型 | 可读 | 可写 | 说明 | | -------- | -------- | -------- | -------- | -------- | -| language | string | 是 | 否 | 与区域设置关联的语言 | -| script | string | 是 | 否 | 语言的书写方式 | -| region | string | 是 | 否 | 与区域设置相关的地区 | -| baseName | string | 是 | 否 | Locale的基本核心信息 | -| caseFirst | string | 是 | 否 | 区域的整理规则是否考虑大小写 | -| calendar | string | 是 | 否 | 区域的日历信息 | -| collation | string | 是 | 否 | 区域的排序规则 | -| hourCycle | string | 是 | 否 | 区域的时制信息 | -| numberingSystem | string | 是 | 否 | 区域使用的数字系统 | -| numeric | boolean | 是 | 否 | 是否对数字字符具有特殊的排序规则处理 | +| language | string | 是 | 否 | 与区域设置关联的语， 如：zh。 | +| script | string | 是 | 否 | 语言的书写方式，如：Hans。 | +| region | string | 是 | 否 | 与区域设置相关的地区，如：CN。 | +| baseName | string | 是 | 否 | Locale的基本核心信息（由语言脚本与地区组成），如：zh-Hans-CN。 | +| caseFirst | string | 是 | 否 | 区域的整理规则是否考虑大小写，取值包括："upper", "lower", "false"。 | +| calendar | string | 是 | 否 | 区域的日历信息，取值包括："buddhist", "chinese", "coptic","dangi", "ethioaa", "ethiopic", "gregory", "hebrew", "indian", "islamic", "islamic-umalqura", "islamic-tbla", "islamic-civil", "islamic-rgsa", "iso8601", "japanese", "persian", "roc", "islamicc"。 | +| collation | string | 是 | 否 | 区域的排序规则，取值包括："big5han", "compat", "dict", "direct", "ducet", "eor", "gb2312", "phonebk", "phonetic", "pinyin", "reformed", "searchjl", "stroke", "trad", "unihan", "zhuyin"。 | +| hourCycle | string | 是 | 否 | 区域的时制信息，取值包括："h12", "h23", "h11", "h24"。 | +| numberingSystem | string | 是 | 否 | 区域使用的数字系统，取值包括："adlm", "ahom", "arab", "arabext", "bali", "beng", "bhks", "brah", "cakm", "cham", "deva", "diak", "fullwide", "gong", "gonm", "gujr", "guru", "hanidec", "hmng", "hmnp", "java", "kali", "khmr", "knda", "lana", "lanatham", "laoo", "latn", "lepc", "limb", "mathbold", "mathdbl", "mathmono", "mathsanb", "mathsans", "mlym", "modi", "mong", "mroo", "mtei", "mymr", "mymrshan", "mymrtlng", "newa", "nkoo", "olck", "orya", "osma", "rohg", "saur", "segment", "shrd", "sind", "sinh", "sora", "sund", "takr", "talu", "tamldec", "telu", "thai", "tibt", "tirh", "vaii", "wara", "wcho"。 | +| numeric | boolean | 是 | 否 | 是否对数字字符具有特殊的排序规则处理。 | ### constructor -constructor(locale: string, options?:options) +constructor(locale: string, options?: options) 创建区域对象 @@ -51,7 +51,7 @@ constructor(locale: string, options?:options) - 示例： ``` - var locale = new Intl.Locale("zh-CN"); + var locale = new Intl.Locale("zh-CN"， { numeric: true }); ``` @@ -64,8 +64,7 @@ toString(): string - 返回值： | 类型 | 说明 | | -------- | -------- | - | string | 字符串形式的区域信息 | - + | string | 字符串形式的区域信息。 | - 示例： ``` @@ -83,8 +82,7 @@ maximize(): Locale - 返回值： | 类型 | 说明 | | -------- | -------- | - | Locale | 最大化后的区域对象 | - + | [Locale](#locale) | 最大化后的区域对象。 | - 示例： ``` @@ -102,8 +100,7 @@ minimize(): Locale - 返回值： | 类型 | 说明 | | -------- | -------- | - | Locale | 最小化后的区域对象 | - + | [Locale](#locale) | 最小化后的区域对象。 | - 示例： ``` @@ -117,7 +114,7 @@ minimize(): Locale ### constructor -constructor(locale: string, options?:DateTimeOptions) +constructor(locale: string, options?: DateTimeOptions) 创建时间日期格式化对象。 @@ -135,7 +132,7 @@ constructor(locale: string, options?:DateTimeOptions) ### constructor -constructor(locales: Array<string>, options?:DateTimeOptions) +constructor(locales: Array<string>, options?: DateTimeOptions) 创建时间日期格式化对象。 @@ -153,7 +150,7 @@ constructor(locales: Array<string>, options?:DateTimeOptions) ### format -format(date: Date): string; +format(date: Date): string 格式化时间日期字符串。 @@ -167,7 +164,6 @@ format(date: Date): string; | -------- | -------- | | string | 格式化后的时间日期字符串 | - - 示例： ``` var date = new Date(2021, 11, 17, 3, 24, 0); @@ -178,21 +174,20 @@ format(date: Date): string; ### formatRange -formatRange(fromDate: Date, toDate: Date): string; +formatRange(fromDate: Date, toDate: Date): string 格式化时间日期段字符串。 - 参数： | 参数名 | 类型 | 必填 | 说明 | | -------- | -------- | -------- | -------- | - | startDate | Date | 是 | 起始的时间日期 | - | endDate | Date | 是 | 结束的时间日期 | + | startDate | Date | 是 | 起始的时间日期。 | + | endDate | Date | 是 | 结束的时间日期。 | - 返回值： | 类型 | 说明 | | -------- | -------- | - | string | 格式化后的时间日期段字符串 | - + | string | 格式化后的时间日期段字符串。 | - 示例： ``` @@ -207,14 +202,13 @@ formatRange(fromDate: Date, toDate: Date): string; resolvedOptions(): DateTimeOptions -获取DateTimeFormat 对象的格式化选项。 +获取DateTimeFormat对象的格式化选项。 - 返回值： | 类型 | 说明 | | -------- | -------- | | [DateTimeOptions](#datetimeoptions) | DateTimeFormat 对象的格式化选项。 | - - 示例： ``` var datefmt = new Intl.DateTimeFormat("en-GB"); @@ -222,12 +216,39 @@ resolvedOptions(): DateTimeOptions ``` +## DateTimeOptions + +表示时间日期格式化选项。 + +| 名称 | 参数类型 | 可读 | 可写 | 说明 | +| -------- | -------- | -------- | -------- | -------- | +| locale | string | 是 | 否 | 区域参数， 如：zh-Hans-CN。 | +| dateStyle | string | 是 | 是 | 日期显示格式，取值包括："long", "short", "medium", "full"。 | +| timeStyle | string | 是 | 是 | 时间显示格式，取值包括："long", "short", "medium", "full"。 | +| hourCycle | string | 是 | 是 | 时制格式，取值包括："h11", "h12", "h23", "h24"。 | +| timeZone | string | 是 | 是 | 使用的时区（合法的IANA时区ID）。 | +| numberingSystem | string | 是 | 是 | 数字系统，取值包括："adlm", "ahom", "arab", "arabext", "bali", "beng", "bhks", "brah", "cakm", "cham", "deva", "diak", "fullwide", "gong", "gonm", "gujr", "guru", "hanidec", "hmng", "hmnp", "java", "kali", "khmr", "knda", "lana", "lanatham", "laoo", "latn", "lepc", "limb", "mathbold", "mathdbl", "mathmono", "mathsanb", "mathsans", "mlym", "modi", "mong", "mroo", "mtei", "mymr", "mymrshan", "mymrtlng", "newa", "nkoo", "olck", "orya", "osma", "rohg", "saur", "segment", "shrd", "sind", "sinh", "sora", "sund", "takr", "talu", "tamldec", "telu", "thai", "tibt", "tirh", "vaii", "wara", "wcho"。 | +| hour12 | boolean | 是 | 是 | 是否使用12小时制。 | +| weekday | string | 是 | 是 | 工作日的显示格式，取值包括："long", "short", "narrow"。 | +| era | string | 是 | 是 | 时代的显示格式，取值包括："long", "short", "narrow"。 | +| year | string | 是 | 是 | 年份的显示格式，取值包括："numeric", "2-digit"。 | +| month | string | 是 | 是 | 月份的显示格式，取值包括："numeric", "2-digit", "long", "short", "narrow"。 | +| day | string | 是 | 是 | 日期的显示格式，取值包括："numeric", "2-digit"。 | +| hour | string | 是 | 是 | 小时的显示格式，取值包括："numeric", "2-digit"。 | +| minute | string | 是 | 是 | 分钟的显示格式，取值包括："numeric", "2-digit"。 | +| second | string | 是 | 是 | 秒钟的显示格式，取值包括："numeric", "2-digit"。 | +| timeZoneName | string | 是 | 是 | 时区名称的本地化表示。 | +| dayPeriod | string | 是 | 是 | 时段的显示格式，取值包括："long", "short", "narrow"。 | +| localeMatcher | string | 是 | 是 | 要使用的区域匹配算法，取值包括："lookup", "best fit"。 | +| formatMatcher | string | 是 | 是 | 要使用的格式匹配算法，取值包括："basic", "best fit"。 | + + ## NumberFormat ### constructor -constructor(locale: string, options?:NumberOptions) +constructor(locale: string, options?: NumberOptions) 创建数字格式化对象。 @@ -245,7 +266,7 @@ constructor(locale: string, options?:NumberOptions) ### constructor -constructor(locales: Array<string>, options?:NumberOptions) +constructor(locales: Array<string>, options?: NumberOptions) 创建数字格式化对象。 @@ -304,54 +325,312 @@ resolvedOptions(): NumberOptions ``` -## DateTimeOptions +## NumberOptions -表示时间日期格式化选项。 +表示设备支持的能力。 | 名称 | 参数类型 | 可读 | 可写 | 说明 | | -------- | -------- | -------- | -------- | -------- | -| locale | string | 是 | 否 | 区域参数 | -| dateStyle | string | 是 | 是 | 日期显示格式，取值范围："long", "short", "medium", "full" | -| timeStyle | string | 是 | 是 | 时间显示格式，取值范围："long", "short", "medium", "full" | -| hourCycle | string | 是 | 是 | 时制格式，取值范围："h11", "h12", "h23", "h24". | -| timeZone | string | 是 | 是 | 使用的时区（合法的IANA时区ID） | -| numberingSystem | string | 是 | 是 | 数字系统 | -| hour12 | boolean | 是 | 是 | 是否使用12小时制 | -| weekday | string | 是 | 是 | 工作日的显示格式，取值范围："long", "short", "narrow" | -| era | string | 是 | 是 | 时代的显示格式，取值范围："long", "short", "narrow" | -| year | string | 是 | 是 | 年份的显示格式，取值范围："numeric", "2-digit" | -| month | string | 是 | 是 | 月份的显示格式，取值范围："numeric", "2-digit", "long", "short", "narrow" | -| day | string | 是 | 是 | 日期的显示格式，取值范围："numeric", "2-digit" | -| hour | string | 是 | 是 | 小时的显示格式，取值范围："numeric", "2-digit" | -| minute | string | 是 | 是 | 分钟的显示格式，取值范围："numeric", "2-digit" | -| second | string | 是 | 是 | 秒钟的显示格式，取值范围："numeric", "2-digit" | -| timeZoneName | string | 是 | 是 | 时区名称的本地化表示 | -| dayPeriod | string | 是 | 是 | 时段的显示格式，取值范围："long", "short", "narrow" | -| localeMatcher | string | 是 | 是 | 要使用的区域匹配算法，取值范围："lookup", "best fit" | -| formatMatcher | string | 是 | 是 | 要使用的格式匹配算法，取值范围："basic", "best fit" | +| locale | string | 是 | 否 | 区域参数， 如："zh-Hans-CN"。 | +| currency | string | 是 | 是 | 货币单位， 如："EUR"，"CNY"，"USD"等。 | +| currencySign | string | 是 | 是 | 货币单位的符号显示，取值包括： "symbol"，"narrowSymbol"，"code"，"name" 。 | +| currencyDisplay | string | 是 | 是 | 货币的显示方式，取值包括："symbol", "narrowSymbol", "code", "name"。 | +| unit | string | 是 | 是 | 单位名称，如："meter"，"inch"，“hectare”等。 | +| unitDisplay | string | 是 | 是 | 单位的显示格式，取值包括："long", "short", "medium"。 | +| unitUsage | string | 是 | 是 | 单位的使用场景，取值包括："default", "area-land-agricult", "area-land-commercl", "area-land-residntl", "length-person", "length-person-small", "length-rainfall", "length-road", "length-road-small", "length-snowfall", "length-vehicle", "length-visiblty", "length-visiblty-small", "length-person-informal", "length-person-small-informal", "length-road-informal", "speed-road-travel", "speed-wind", "temperature-person", "temperature-weather", "volume-vehicle-fuel"。 | +| signDisplay | string | 是 | 是 | 数字符号的显示格式，取值包括："auto", "never", "always", "expectZero"。 | +| compactDisplay | string | 是 | 是 | 紧凑型的显示格式，取值包括："long", "short"。 | +| notation | string | 是 | 是 | 数字的格式化规格，取值包括："standard", "scientific", "engineering", "compact"。 | +| localeMatcher | string | 是 | 是 | 要使用的区域匹配算法，取值包括："lookup", "best fit"。 | +| style | string | 是 | 是 | 数字的显示格式，取值包括："decimal", "currency", "percent", "unit"。 | +| numberingSystem | string | 是 | 是 | 数字系统，取值包括："adlm", "ahom", "arab", "arabext", "bali", "beng", "bhks", "brah", "cakm", "cham", "deva", "diak", "fullwide", "gong", "gonm", "gujr", "guru", "hanidec", "hmng", "hmnp", "java", "kali", "khmr", "knda", "lana", "lanatham", "laoo", "latn", "lepc", "limb", "mathbold", "mathdbl", "mathmono", "mathsanb", "mathsans", "mlym", "modi", "mong", "mroo", "mtei", "mymr", "mymrshan", "mymrtlng", "newa", "nkoo", "olck", "orya", "osma", "rohg", "saur", "segment", "shrd", "sind", "sinh", "sora", "sund", "takr", "talu", "tamldec", "telu", "thai", "tibt", "tirh", "vaii", "wara", "wcho"。 | +| useGrouping | boolean | 是 | 是 | 是否分组显示。 | +| miniumumIntegerDigits | number | 是 | 是 | 表示要使用的最小整数位数，取值范围：1~21。 | +| miniumumFractionDigits | number | 是 | 是 | 表示要使用的最小分数位数，取值范围：0~20。 | +| maxiumumFractionDigits | number | 是 | 是 | 表示要使用的最大分数位数，取值范围：1~21。 | +| miniumumSignificantDigits | number | 是 | 是 | 表示要使用的最低有效位数，取值范围：1~21。 | +| maxiumumSignificantDigits | number | 是 | 是 | 表示要使用的最大有效位数，取值范围：1~21。 | -## NumberOptions +## Collator8+ -表示设备支持的能力。 + +### constructor8+ + +constructor() + +创建排序对象。 + +- 示例： + ``` + var collator = new Intl.Collator(); + ``` + + +### constructor8+ + +constructor(locale: string | Array<string>, options?: CollatorOptions) + +创建排序对象。 + +- 参数： + + | 参数名 | 类型 | 必填 | 说明 | + | -------- | -------- | -------- | -------- | + | locale | string\|Array<string> | 是 | 包含区域设置信息的字符串，包括语言以及可选的脚本和区域。 | + | options | [CollatorOptions](#collatoroptions) | 否 | 用于创建排序对象的选项。 | + +- 示例： + ``` + var collator = new Intl.Collator("zh-CN", {"localeMatcher": "lookup", "usage": "sort"}); + ``` + + +### compare8+ + +compare(first: string, second: string): number + +依据Collator的排序策略对两个字符串进行比较。 + +- 参数： + | 参数名 | 类型 | 必填 | 说明 | + | -------- | -------- | -------- | -------- | + | first | string | 是 | 进行比较第一个字符串。 | + | second | string | 是 | 进行比较的第二个字符串。 | + +- 返回值： + | 类型 | 说明 | + | -------- | -------- | + | number | 比较结果。当number为负数，表示first排序在second之前；当number为0，表示first与second排序相同；当number为正数，表示first排序在second之后。 | + +- 示例： + ``` + var collator = new intl.Collator("zh-Hans"); + collator.compare("first", "second"); + ``` + + +### resolvedOptions8+ + +resolvedOptions(): CollatorOptions + +返回Collator对象的属性。 + +- 返回值： + | 类型 | 说明 | + | -------- | -------- | + | [CollatorOptions](#collatoroptions) | 返回的Collator对象的属性。 | + +- 示例： + ``` + var collator = new intl.Collator("zh-Hans"); + var options = collator.resolvedOptions(); + ``` + + +## CollatorOptions8+ + +表示Collator可设置的属性。 + +| 名称 | 参数类型 | 可读 | 可写 | 说明 | +| -------- | -------- | -------- | -------- | -------- | +| localeMatcher | string | 是 | 是 | locale匹配算法，取值范围："best fit", "lookup"。 | +| usage | string | 是 | 是 | 比较的用途，取值范围："sort", "search"。 | +| sensitivity | string | 是 | 是 | 表示字符串中的哪些差异会导致非零结果值，取值范围："base", "accent", "case", "variant"。 | +| ignorePunctuation | boolean | 是 | 是 | 表示是否忽略标点符号，取值范围：true, false。 | +| collation | string | 是 | 是 | 排序规则，取值范围："big5han", "compat", "dict", "direct", "ducet", "eor", "gb2312", "phonebk", "phonetic", "pinyin", "reformed", "searchjl", "stroke", "trad", "unihan", "zhuyin"。 | +| numeric | boolean | 是 | 是 | 是否使用数字排序，取值范围：true, false。 | +| caseFirst | string | 是 | 是 | 表示大写、小写的排序顺序，取值范围："upper", "lower", "false"。 | + + +## PluralRules8+ + + +### constructor8+ + +constructor() + +创建PluralRules对象。 + +- 示例： + ``` + var pluralRules = new Intl.PluralRules(); + ``` + + +### constructor8+ + +constructor(locale: string | Array<string>, options?: PluralRulesOptions) + +创建PluralRules对象。 + +参数： +| 参数名 | 类型 | 必填 | 说明 | +| -------- | -------- | -------- | -------- | +| locale | string\|Array<string> | 是 | 包含区域设置信息的字符串，包括语言以及可选的脚本和区域。 | +| options | [PluralRulesOptions](#pluralrulesoptions) | 否 | 用于创建单复数对象的选项。 | + +- 示例： + ``` + var pluralRules= new Intl.PluraRules("zh-CN", {"localeMatcher": "lookup", "type": "cardinal"}); + ``` + + +### select8+ + +select(n: number): string + +返回一个字符串表示该数字的单复数类别。 + +- 参数： + | 参数名 | 类型 | 必填 | 说明 | + | -------- | -------- | -------- | -------- | + | n | number | 是 | 待获取单复数类别的数字。 | + +- 返回值： + | 类型 | 说明 | + | -------- | -------- | + | string | 单复数类别，取值包括："zero"，"one"，"two", "few", "many", "others"。 | + +- 示例： + ``` + var pluralRules = new intl.PluralRules("zh-Hans"); + pluralRules.select(1); + ``` + + +## PluralRulesOptions8+ + +表示PluralRules对象可设置的属性。 + +| 名称 | 参数类型 | 可读 | 可写 | 说明 | +| -------- | -------- | -------- | -------- | -------- | +| localeMatcher | string | 是 | 是 | locale匹配算法，取值包括："best fit", "lookup"。 | +| type | string | 是 | 是 | 排序的类型，取值包括："cardinal", "ordinal"。 | +| minimumIntegerDigits | number | 是 | 是 | 表示要使用的最小整数位数，取值范围：1~21。 | +| minimumFractionDigits | number | 是 | 是 | 表示要使用的最小分数位数，取值范围：0~20。 | +| maximumFractionDigits | number | 是 | 是 | 表示要使用的最大分数位数，取值范围：1~21。 | +| minimumSignificantDigits | number | 是 | 是 | 表示要使用的最低有效位数，取值范围：1~21。 | +| maximumSignificantDigits | number | 是 | 是 | 表示要使用的最大有效位数，取值范围：1~21。 | + + +## RelativeTimeFormat8+ + + +### constructor8+ + +constructor() + +创建相对时间格式化对象。 + +- 示例： + ``` + var relativetimefmt = new Intl.RelativeTimeFormat(); + ``` + + +### constructor8+ + +constructor(locale: string | Array<string>, options?: RelativeTimeFormatInputOptions) + +创建相对时间格式化对象。 + +参数： +| 参数名 | 类型 | 必填 | 说明 | +| -------- | -------- | -------- | -------- | +| locale | string\|Array<string> | 是 | 包含区域设置信息的字符串，包括语言以及可选的脚本和区域。 | +| options | [RelativeTimeFormatInputOptions](#relativetimeformatinputoptions) | 否 | 用于创建相对时间格式化对象的选项。 | + +- 示例： + ``` + var relativeTimeFormat = new Intl.RelativeTimeFormat("zh-CN", {"localeMatcher": "lookup", "numeric": "always", "style": "long"}); + ``` + + +### format8+ + +format(value: numeric, unit: string): string + +依据locale和格式化选项，对value和unit进行格式化。 + +- 参数： + | 参数名 | 类型 | 必填 | 说明 | + | -------- | -------- | -------- | -------- | + | value | numeric | 是 | 相对时间格式化的数值。 | + | unit | string | 是 | 相对时间格式化的单位，取值包括："year", "quarter", "month", "week", "day", "hour", "minute", "second"。 | + +- 返回值： + | 类型 | 说明 | + | -------- | -------- | + | string | 格式化后的相对时间。 | + +- 示例： + ``` + var relativetimefmt = new Intl.RelativeTimeFormat("zh-CN"); + relativetimefmt.format(3, "quarter") + ``` + + +### formatToParts8+ + +formatToParts(value: numeric, unit: string): Array<Object> + +返回一个对象数组，表示可用于自定义区域设置格式的相对时间格式。 + +- 参数： + | 参数名 | 类型 | 必填 | 说明 | + | -------- | -------- | -------- | -------- | + | value | numeric | 是 | 相对时间格式化的数值。 | + | unit | string | 是 | 相对时间格式化的单位，取值包括："year", "quarter", "month", "week", "day", "hour", "minute", "second"。 | + +- 返回值： + | 类型 | 说明 | + | -------- | -------- | + | Array<Object> | 返回可用于自定义区域设置格式的相对时间格式的对象数组。 | + +- 示例： + ``` + var relativetimefmt = new Intl.RelativeTimeFormat("en", {"numeric": "auto"}); + var parts = relativetimefmt.format(10, "seconds"); + ``` + + +### resolvedOptions8+ + +resolvedOptions(): RelativeTimeFormatResolvedOptions + +获取RelativeTimeFormat对象的格式化选项。 + +- 返回值： + | 类型 | 说明 | + | -------- | -------- | + | [RelativeTimeFormatResolvedOptions](#relativetimeformatresolvedoptions) | RelativeTimeFormat 对象的格式化选项。 | + +- 示例： + ``` + var relativetimefmt= new Intl.RelativeTimeFormat("en-GB"); + relativetimefmt.resolvedOptions(); + ``` + + +## RelativeTimeFormatInputOptions8+ + +表示RelativeTimeFormat对象可设置的属性。 + +| 名称 | 参数类型 | 可读 | 可写 | 说明 | +| -------- | -------- | -------- | -------- | -------- | +| localeMatcher | string | 是 | 是 | locale匹配算法，取值包括："best fit", "lookup"。 | +| numeric | string | 是 | 是 | 输出消息的格式，取值包括："always", "auto"。 | +| style | string | 是 | 是 | 国际化消息的长度，取值包括："long", "short", "narrow"。 | + + +## RelativeTimeFormatResolvedOptions8+ + +表示RelativeTimeFormat对象可设置的属性。 | 名称 | 参数类型 | 可读 | 可写 | 说明 | | -------- | -------- | -------- | -------- | -------- | -| locale | string | 是 | 否 | 区域参数 | -| currency | string | 是 | 是 | 货币单位 | -| currencySign | string | 是 | 是 | 货币单位的符号显示 | -| currencyDisplay | string | 是 | 是 | 货币的显示方式，取值范围："symbol", "narrowSymbol", "code", "name" | -| unit | string | 是 | 是 | 单位 | -| unitDisplay | string | 是 | 是 | 单位的显示格式，取值范围："long", "short", "medium" | -| signDisplay | string | 是 | 是 | 数字符号的显示格式，取值范围："auto", "never", "always", "expectZero" | -| compactDisplay | string | 是 | 是 | 紧凑型的显示格式，取值范围："long", "short" | -| notation | string | 是 | 是 | 数字的格式化规格，取值范围："standard", "scientific", "engineering", "compact" | -| localeMatcher | string | 是 | 是 | 要使用的区域匹配算法，取值范围："lookup", "best fit" | -| style | string | 是 | 是 | 数字的显示格式，取值范围："decimal", "currency", "percent", "unit" | -| numberingSystem | string | 是 | 是 | 数字系统 | -| useGrouping | boolean | 是 | 是 | 是否分组显示 | -| miniumumIntegerDigits | number | 是 | 是 | 最少整数个数 | -| miniumumFractionDigits | number | 是 | 是 | 最少小数个数 | -| maxiumumFractionDigits | number | 是 | 是 | 最多小数个数 | -| miniumumSignificantDigits | number | 是 | 是 | 最少有效位个数 | -| maxiumumSignificantDigits | number | 是 | 是 | 最多有效位个数 | +| locale | string | 是 | 是 | 包含区域设置信息的字符串，包括语言以及可选的脚本和区域。 | +| numeric | string | 是 | 是 | 输出消息的格式，取值包括："always", "auto"。 | +| style | string | 是 | 是 | 国际化消息的长度，取值包括："long", "short", "narrow"。 | +| numberingSystem | string | 是 | 是 | 使用的数字系统。 | diff --git a/zh-cn/application-dev/reference/apis/js-apis-multmedia.md b/zh-cn/application-dev/reference/apis/js-apis-multmedia.md deleted file mode 100644 index f0e04036770055995edc35b72946a92fa3382ddf..0000000000000000000000000000000000000000 --- a/zh-cn/application-dev/reference/apis/js-apis-multmedia.md +++ /dev/null @@ -1,7 +0,0 @@ -# 媒体 - - - -- **[音频管理](js-apis-audio.md)** - -- **[音频播放和录制](js-apis-media.md)** diff --git a/zh-cn/application-dev/reference/apis/js-apis-process.md b/zh-cn/application-dev/reference/apis/js-apis-process.md index 932158f683e36699996904229e3e960e76022a75..1f8674f4226dccb2d538f4b3030f40444294c8a8 100644 --- a/zh-cn/application-dev/reference/apis/js-apis-process.md +++ b/zh-cn/application-dev/reference/apis/js-apis-process.md @@ -20,13 +20,14 @@ import process from '@ohos.process'; | 名称 | 类型 | 可读 | 可写 | 说明 | | -------- | -------- | -------- | -------- | -------- | -| egid | number | 是 | 否 | 获取进程的有效组标识。 | -| euid | number | 是 | 否 | 获取进程的有效用户身份。 | -| gid | number | 是 | 否 | 获取进程的组标识。 | -| uid | number | 是 | 否 | 获取进程的用户标识。 | -| groups | number[] | 是 | 否 | 获取一个带有补充组id的数组。 | -| pid | number | 是 | 否 | 获取当前进程的pid。 | -| ppid | number | 是 | 否 | 获取当前进程的父进程的pid。 | +| egid | number | 是 | 否 | 进程的有效组标识。 | +| euid | number | 是 | 否 | 进程的有效用户身份。 | +| gid | number | 是 | 否 | 进程的组标识。 | +| uid | number | 是 | 否 | 进程的用户标识。 | +| groups | number[] | 是 | 否 | 带有补充组id的数组。 | +| pid | number | 是 | 否 | 当前进程的pid。 | +| ppid | number | 是 | 否 | 当前进程的父进程的pid。 | +| tid8+ | number | 是 | 否 | 当前进程的tid。 | ## ChildProcess @@ -143,6 +144,213 @@ kill函数用来发送信号给子进程，结束指定进程。 ``` +## process.isIsolatedProcess8+ + +isIsolatedProcess(): boolean + +检查进程是否被隔离。 + +- 返回值： + | 类型 | 说明 | + | -------- | -------- | + | boolean | 进程是否隔离 | + +- 示例： + ``` + import process from '@ohos.process'; + var result = process.isIsolatedProcess(); + ``` + + +## process.isAppUid8+ + +isAppUid(v:number): boolean + +判断是否特定程序的uid。 + +- 参数： + | 参数名 | 类型 | 必填 | 说明 | + | -------- | -------- | -------- | -------- | + | v | number | 是 | 进程的id。 | + +- 返回值： + | 类型 | 说明 | + | -------- | -------- | + | boolean | 是否是当前app的uid | + +- 示例： + ``` + import process from '@ohos.process'; + var result = process.isAppUid(688); + ``` + + +## process.is64Bit8+ + +is64Bit(): boolean + +判断运行环境是不是64位。 + +- 返回值： + | 类型 | 说明 | + | -------- | -------- | + | boolean | 是不是64位环境 | + +- 示例： + ``` + import process from '@ohos.process'; + var ressult = process.is64Bit(); + ``` + + +## process.getUidForName8+ + +getUidForName(v:string): number + +通过进程名获取进程uid。 + +- 参数： + | 参数名 | 类型 | 必填 | 说明 | + | -------- | -------- | -------- | -------- | + | v | string | 是 | 进程name | + +- 返回值： + | 类型 | 说明 | + | -------- | -------- | + | number | 进程的uid | + +- 示例： + ``` + import process from '@ohos.process' + var pres = process.getUidForName("tool") + ``` + + +## process.getThreadPriority8+ + +getThreadPriority(v:number): number + +根据指定的 TID 获取线程优先级。 + +- 参数： + | 参数名 | 类型 | 必填 | 说明 | + | -------- | -------- | -------- | -------- | + | v | number | 是 | 进程的id | + +- 返回值： + | 类型 | 说明 | + | -------- | -------- | + | number | 进程的优先级 | + +- 示例： + ``` + import process from '@ohos.process' + var tid = process。getTid(); + var pres = process.getThreadPriority(tid); + ``` + + +## process.getStartRealtime8+ + +getStartRealtime() :number + +获取从系统启动到进程启动所经过的实时时间（以毫秒为单位）。 + +- 返回值： + | 类型 | 说明 | + | -------- | -------- | + | number | 时间 | + +- 示例： + ``` + import process from '@ohos.process'; + var realtime = process.getStartRealtime(); + ``` + + +## process.getAvailableCores8+ + +getAvailableCores() :number[] + +获取多核设备上当前进程可用的 CPU 内核。 + +- 返回值： + | 类型 | 说明 | + | -------- | -------- | + | number[] | 可用内核数 | + +- 示例： + ``` + import process from '@ohos.process'; + var result = getAvailableCores(); + ``` + + +## process.getPastCputime8+ + +getPastCputime() :number + +获取进程启动到当前时间的CPU时间（以毫秒为单位）。 + +- 返回值： + | 类型 | 说明 | + | -------- | -------- | + | number | 时间 | + +- 示例： + ``` + import process from '@ohos.process'; + var result = process.getPastCputime() ; + ``` + + +## process.getSystemConfig8+ + +getSystemConfig(name:number): number + +用该方法发送signal到指定的进程。 + +- 参数： + | 参数名 | 类型 | 必填 | 说明 | + | -------- | -------- | -------- | -------- | + | name | number | 是 | 系统配置参数名 | + +- 返回值： + | 类型 | 说明 | + | -------- | -------- | + | number | 配置信息 | + +- 示例： + ``` + import process from '@ohos.process' + var _SC_ARG_MAX = 0 + var pres = process.getSystemConfig(_SC_ARG_MAX) + ``` + + +## process.getEnvironmentVar8+ + +getEnvironmentVar(name:string): string + +用该方法获取环境变量对应的值。 + +- 参数： + | 参数名 | 类型 | 必填 | 说明 | + | -------- | -------- | -------- | -------- | + | name | string | 是 | 环境名 | + +- 返回值： + | 类型 | 说明 | + | -------- | -------- | + | string | 环境名对应的value | + +- 示例： + ``` + import process from '@ohos.process' + var pres = process.getEnvironmentVar("PATH") + ``` + + ## process.runCmd runCmd(command: string, options?: { timeout : number, killSignal ：number | string, maxBuffer : number }) : ChildProcess diff --git a/zh-cn/application-dev/reference/apis/js-apis-resource-manager.md b/zh-cn/application-dev/reference/apis/js-apis-resource-manager.md index 09edae1a0d06601c4414573ccd3e6894964c08e5..7e8aa54cd51b3457101f4624994fd942b1dd15e8 100644 --- a/zh-cn/application-dev/reference/apis/js-apis-resource-manager.md +++ b/zh-cn/application-dev/reference/apis/js-apis-resource-manager.md @@ -160,8 +160,6 @@ getResourceManager(bundleName: string): Promise<ResourceManager> 表示当前设备的状态。 -### 属性 - | 名称 | 参数类型 | 可读 | 可写 | 说明 | | -------- | -------- | -------- | -------- | -------- | | direction | [Direction](#direction) | 是 | 否 | 当前设备屏幕方向 | @@ -173,8 +171,6 @@ getResourceManager(bundleName: string): Promise<ResourceManager> 表示设备支持的能力。 -### 属性 - | 名称 | 参数类型 | 可读 | 可写 | 说明 | | -------- | -------- | -------- | -------- | -------- | | screenDensity | [ScreenDensity](#screendensity) | 是 | 否 | 当前设备屏幕密度 | @@ -557,3 +553,55 @@ getPluralString(resId: number, num: number): Promise<string> }); }); ``` + +### getRawFile8+ + +getRawFile(path: string, callback: AsyncCallback<Uint8Array>): void + +用户获取指定路径对应的rawfile文件内容，使用callback形式返回字节数组。 + +- 参数： + | 参数名 | 类型 | 必填 | 说明 | + | -------- | -------- | -------- | -------- | + | path | string | 是 | rawfile文件路径 | + | callback | AsyncCallback<Array<Uint8Array>> | 是 | 异步回调，用于返回获取的rawfile文件内容 | + +- 示例： + ``` + resourceManager.getResourceManager((error, mgr) => { + mgr.getRawFile("test.xml", (error, value) => { + if (error != null) { + console.log(value); + } else { + console.log(value); + } + }); + }); + ``` + +### getRawFile8+ + +getRawFile(path: string): Promise<Uint8Array> + +用户获取指定路径对应的rawfile文件内容，使用Promise形式返回字节数组。 + +- 参数： + | 参数名 | 类型 | 必填 | 说明 | + | -------- | -------- | -------- | -------- | + | path | string | 是 | rawfile文件路径 | + +- 返回值： + | 类型 | 说明 | + | -------- | -------- | + | Promise<Array<Uint8Array>> | rawfile文件内容 | + +- 示例： + ``` + resourceManager.getResourceManager((error, mgr) => { + mgr.getRawFile("test.xml").then(value => { + console.log(value); + }).catch(error => { + console.log("getrawfile promise " + error); + }); + }); + ``` diff --git a/zh-cn/application-dev/reference/apis/js-apis-resource.md b/zh-cn/application-dev/reference/apis/js-apis-resource.md deleted file mode 100644 index 73f7c912a25e287ac1ce7f7baeb23a8753218cfe..0000000000000000000000000000000000000000 --- a/zh-cn/application-dev/reference/apis/js-apis-resource.md +++ /dev/null @@ -1,9 +0,0 @@ -# 资源管理 - - - -- **[资源管理](js-apis-resource-manager.md)** - -- **[国际化-Intl(新)](js-apis-intl.md)** - -- **[国际化-I18n(新)](js-apis-i18n.md)** \ No newline at end of file diff --git a/zh-cn/application-dev/reference/apis/js-apis-sensor.md b/zh-cn/application-dev/reference/apis/js-apis-sensor.md index a4472bce4bcebd388bb000f3f4f858f143b17ed4..1abb59effb99cabfbb0111aef6c201f1b2448228 100644 --- a/zh-cn/application-dev/reference/apis/js-apis-sensor.md +++ b/zh-cn/application-dev/reference/apis/js-apis-sensor.md @@ -44,7 +44,6 @@ on(type: SensorType.SENSOR_TYPE_ID_ACCELEROMETER, callback: AsyncCallback<Acc console.error("Subscription failed. Error code: " + error.code + "; message: " + error.message); return; } - //打印data的x,y,z轴坐标的分量 console.info('X-coordinate component: ' + data.x); console.info('Y-coordinate component: ' + data.y); console.info('Z-coordinate component: ' + data.z); @@ -74,7 +73,6 @@ on(type:SensorType.SENSOR_TYPE_ID_LINEAR_ACCELERATION,callback:AsyncCallback< console.error("Subscription failed. Error code: " + error.code + "; message: " + error.message); return; } - //打印data的x,y,z轴坐标的分量 console.info('X-coordinate component: ' + data.x); console.info('Y-coordinate component: ' + data.y); console.info('Z-coordinate component: ' + data.z); @@ -104,11 +102,9 @@ on(type:SensorType.SENSOR_TYPE_ID_ACCELEROMETER_UNCALIBRATED,callback:AsyncCallb console.error("Subscription failed. Error code: " + error.code + "; message: " + error.message); return; } - //打印data的x,y,z轴坐标的分量 console.info('X-coordinate component: ' + data.x); console.info('Y-coordinate component: ' + data.y); console.info('Z-coordinate component: ' + data.z); - //打印data在x,y,z轴坐标的偏移量 console.info('X-coordinate bias: ' + data.biasX); console.info('Y-coordinate bias: ' + data.biasY); console.info('Z-coordinate bias: ' + data.biasZ); @@ -138,7 +134,6 @@ on(type: SensorType.SENSOR_TYPE_ID_GRAVITY, callback: AsyncCallback<GravityRe console.error("Subscription failed. Error code: " + error.code + "; message: " + error.message); return; } - //打印data的x,y,z轴坐标的分量 console.info('X-coordinate component: ' + data.x); console.info('Y-coordinate component: ' + data.y); console.info('Z-coordinate component: ' + data.z); @@ -168,7 +163,6 @@ on(type: SensorType.SENSOR_TYPE_ID_GYROSCOPE, callback: AsyncCallback<Gyrosco console.error("Subscription failed. Error code: " + error.code + "; message: " + error.message); return; } - //打印data的x,y,z轴坐标的分量 console.info('X-coordinate component: ' + data.x); console.info('Y-coordinate component: ' + data.y); console.info('Z-coordinate component: ' + data.z); @@ -198,11 +192,9 @@ on(type:SensorType.SENSOR_TYPE_ID_GYROSCOPE_UNCALIBRATED,callback:AsyncCallback& console.error("Subscription failed. Error code: " + error.code + "; message: " + error.message); return; } - //打印data的x,y,z轴坐标的分量 console.info('X-coordinate component: ' + data.x); console.info('Y-coordinate component: ' + data.y); console.info('Z-coordinate component: ' + data.z); - //打印data的x,y,z轴坐标的偏移量 console.info('X-coordinate bias: ' + data.biasX); console.info('Y-coordinate bias: ' + data.biasY); console.info('Z-coordinate bias: ' + data.biasZ); @@ -216,12 +208,12 @@ on(type:SensorType.SENSOR_TYPE_ID_GYROSCOPE_UNCALIBRATED,callback:AsyncCallback& on(type: SensorType.SENSOR_TYPE_ID_SIGNIFICANT_MOTION, callback: AsyncCallback<SignificantMotionResponse>, options?: Options): void -监听有效运动传感器数据变化。如果多次调用该接口，仅最后一次调用生效。 +监听大幅动作传感器数据变化。如果多次调用该接口，仅最后一次调用生效。 - 参数： | 参数名 | 类型 | 必填 | 说明 | | -------- | -------- | -------- | -------- | - | type | [SensorType](#sensortype) | 是 | 要订阅的有效运动传感器类型为SENSOR_TYPE_ID_SIGNIFICANT_MOTION。 | + | type | [SensorType](#sensortype) | 是 | 要订阅的大幅动作传感器类型为SENSOR_TYPE_ID_SIGNIFICANT_MOTION。 | | callback | AsyncCallback<[SignificantMotionResponse](#significantmotionresponse)> | 是 | 注册有效运动传感器的回调函数，上报的数据类型为SignificantMotionResponse。 | | options | [Options](#options) | 否 | 可选参数列表，设置上报频率，默认值为200000000ns。 | @@ -286,7 +278,6 @@ on(type: SensorType.SENSOR_TYPE_ID_PEDOMETER, callback: AsyncCallback<Pedomet console.error("Subscription failed. Error code: " + error.code + "; message: " + error.message); return; } - //打印data的步数 console.info('Steps: ' + data.steps); } {interval: 10000000} @@ -314,7 +305,6 @@ on(type:SensorType.SENSOR_TYPE_ID_AMBIENT_TEMPERATURE,callback:AsyncCallback< console.error("Subscription failed. Error code: " + error.code + "; message: " + error.message); return; } - //打印data的温度值 console.info('Temperature: ' + data.temperature); } {interval: 10000000} @@ -342,7 +332,6 @@ on(type: SensorType.SENSOR_TYPE_ID_MAGNETIC_FIELD, callback: AsyncCallback<Ma console.error("Subscription failed. Error code: " + error.code + "; message: " + error.message); return; } - //打印data的x,y,z轴坐标的分量 console.info('X-coordinate component: ' + data.x); console.info('Y-coordinate component: ' + data.y); console.info('Z-coordinate component: ' + data.z); @@ -372,11 +361,9 @@ on(type:SensorType.SENSOR_TYPE_ID_MAGNETIC_FIELD_UNCALIBRATED,callback:AsyncCall console.error("Subscription failed. Error code: " + error.code + "; message: " + error.message); return; } - //打印data的x,y,z轴坐标的分量 console.info('X-coordinate component: ' + data.x); console.info('Y-coordinate component: ' + data.y); console.info('Z-coordinate component: ' + data.z); - //打印data的x,y,z轴坐标的偏移量 console.info('X-coordinate bias: ' + data.biasX); console.info('Y-coordinate bias: ' + data.biasY); console.info('Z-coordinate bias: ' + data.biasZ); @@ -406,7 +393,6 @@ on(type: SensorType.SENSOR_TYPE_ID_PROXIMITY, callback: AsyncCallback<Proximi console.error("Subscription failed. Error code: " + error.code + "; message: " + error.message); return; } - //打印data的距离值 console.info('Distance: ' + data.distance); } {interval: 10000000} @@ -434,7 +420,6 @@ on(type: SensorType.SENSOR_TYPE_ID_HUMIDITY, callback: AsyncCallback<Humidity console.error("Subscription failed. Error code: " + error.code + "; message: " + error.message); return; } - //打印data的湿度值 console.info('Humidity: ' + data.humidity); } {interval: 10000000} @@ -462,7 +447,6 @@ on(type: SensorType.SENSOR_TYPE_ID_BAROMETER, callback: AsyncCallback<Baromet console.error("Subscription failed. Error code: " + error.code + "; message: " + error.message); return; } - //打印data的压强值 console.info('Atmospheric pressure: ' + data.pressure); } {interval: 10000000} @@ -490,7 +474,6 @@ on(type: SensorType.SENSOR_TYPE_ID_HALL, callback: AsyncCallback<HallResponse console.error("Subscription failed. Error code: " + error.code + "; message: " + error.message); return; } - //打印data的状态值 console.info('Status: ' + data.status); } {interval: 10000000} @@ -518,7 +501,6 @@ on(type: SensorType.SENSOR_TYPE_ID_AMBIENT_LIGHT, callback: AsyncCallback<Lig console.error("Subscription failed. Error code: " + error.code + "; message: " + error.message); return; } - //打印data的光强值 console.info(''Illumination: ' + data.intensity); } {interval: 10000000} @@ -546,7 +528,6 @@ on(type: SensorType.SENSOR_TYPE_ID_ORIENTATION, callback: AsyncCallback<Orien console.error("Subscription failed. Error code: " + error.code + "; message: " + error.message); return; } - //打印data的x,y,z轴坐标的分量 console.info('X-coordinate component: ' + data.x); console.info('Y-coordinate component: ' + data.y); console.info('Z-coordinate component: ' + data.z); @@ -576,7 +557,6 @@ on(type:SensorType.SENSOR_TYPE_ID_ROTATION_VECTOR,callback:AsyncCallback<Rota console.error("Subscription failed. Error code: " + error.code + "; message: " + error.message); return; } - //打印data的x,y,z轴坐标的分量 console.info('X-coordinate component: ' + data.x); console.info('Y-coordinate component: ' + data.y); console.info('Z-coordinate component: ' + data.z); @@ -606,7 +586,6 @@ on(type: SensorType.SENSOR_TYPE_ID_WEAR_DETECTION, callback: AsyncCallback<We console.error("Subscription failed. Error code: " + error.code + "; message: " + error.message); return; } - //打印data的佩戴状态 console.info('Wear status: ' + data.value); } {interval: 10000000} @@ -633,7 +612,6 @@ once(type: SensorType.SENSOR_TYPE_ID_ACCELEROMETER, callback: AsyncCallback<A console.error("Subscription failed. Error code: " + error.code + "; message: " + error.message); return; } - //打印data的x,y,z轴坐标的分量 console.info('X-coordinate component: ' + data.x); console.info('Y-coordinate component: ' + data.y); console.info('Z-coordinate component: ' + data.z); @@ -661,7 +639,6 @@ once(type:SensorType.SENSOR_TYPE_ID_LINEAR_ACCELERATION,callback:AsyncCallback&l console.error("Subscription failed. Error code: " + error.code + "; message: " + error.message); return; } - //打印data的x,y,z轴坐标的分量 console.info('X-coordinate component: ' + data.x); console.info('Y-coordinate component: ' + data.y); console.info('Z-coordinate component: ' + data.z); @@ -689,11 +666,9 @@ once(type:SensorType.SENSOR_TYPE_ID_ACCELEROMETER_UNCALIBRATED,callback:AsyncCal console.error("Subscription failed. Error code: " + error.code + "; message: " + error.message); return; } - //打印data的x,y,z轴坐标的分量 console.info('X-coordinate component: ' + data.x); console.info('Y-coordinate component: ' + data.y); console.info('Z-coordinate component: ' + data.z); - //打印data的x,y,z轴坐标的偏移量 console.info('X-coordinate bias: ' + data.biasX); console.info('Y-coordinate bias: ' + data.biasY); console.info('Z-coordinate bias: ' + data.biasZ); @@ -721,7 +696,6 @@ once(type: SensorType.SENSOR_TYPE_ID_GRAVITY, callback: AsyncCallback<Gravity console.error("Subscription failed. Error code: " + error.code + "; message: " + error.message); return; } - //打印data的x,y,z轴坐标的分量 console.info('X-coordinate component: ' + data.x); console.info('Y-coordinate component: ' + data.y); console.info('Z-coordinate component: ' + data.z); @@ -749,7 +723,6 @@ once(type: SensorType.SENSOR_TYPE_ID_GYROSCOPE, callback: AsyncCallback<Gyros console.error("Subscription failed. Error code: " + error.code + "; message: " + error.message); return; } - //打印data的x,y,z轴坐标的分量 console.info('X-coordinate component: ' + data.x); console.info('Y-coordinate component: ' + data.y); console.info('Z-coordinate component: ' + data.z); @@ -777,11 +750,9 @@ once(type:SensorType.SENSOR_TYPE_ID_GYROSCOPE_UNCALIBRATED,callback:AsyncCallbac console.error("Subscription failed. Error code: " + error.code + "; message: " + error.message); return; } - //打印data的x,y,z轴坐标的分量 console.info('X-coordinate component: ' + data.x); console.info('Y-coordinate component: ' + data.y); console.info('Z-coordinate component: ' + data.z); - //打印data的x,y,z轴坐标的偏移量 console.info('X-coordinate bias: ' + data.biasX); console.info('Y-coordinate bias: ' + data.biasY); console.info('Z-coordinate bias: ' + data.biasZ); @@ -859,7 +830,6 @@ once(type: SensorType.SENSOR_TYPE_ID_PEDOMETER, callback: AsyncCallback<Pedom console.error("Subscription failed. Error code: " + error.code + "; message: " + error.message); return; } - //打印data的步数 console.info('Steps: ' + data.steps); } ); @@ -885,7 +855,6 @@ once(type:SensorType.SENSOR_TYPE_ID_AMBIENT_TEMPERATURE,callback:AsyncCallback&l console.error("Subscription failed. Error code: " + error.code + "; message: " + error.message); return; } - //打印data的温度值 console.info('Temperature: ' + data.temperature); } ); @@ -911,7 +880,6 @@ once(type: SensorType.SENSOR_TYPE_ID_MAGNETIC_FIELD, callback: AsyncCallback< console.error("Subscription failed. Error code: " + error.code + "; message: " + error.message); return; } - //打印data的x,y,z轴坐标的分量 console.info('X-coordinate component: ' + data.x); console.info('Y-coordinate component: ' + data.y); console.info('Z-coordinate component: ' + data.z); @@ -939,11 +907,9 @@ once(type:SensorType.SENSOR_TYPE_ID_MAGNETIC_FIELD_UNCALIBRATED,callback:AsyncCa console.error("Subscription failed. Error code: " + error.code + "; message: " + error.message); return; } - //打印data的x,y,z轴坐标的分量 console.info('X-coordinate component: ' + data.x); console.info('Y-coordinate component: ' + data.y); console.info('Z-coordinate component: ' + data.z); - //打印data的x,y,z轴坐标的偏移量 console.info('X-coordinate bias: ' + data.biasX); console.info('Y-coordinate bias: ' + data.biasY); console.info('Z-coordinate bias: ' + data.biasZ); @@ -971,7 +937,6 @@ once(type: SensorType.SENSOR_TYPE_ID_PROXIMITY, callback: AsyncCallback<Proxi console.error("Subscription failed. Error code: " + error.code + "; message: " + error.message); return; } - //打印data的距离值 console.info('Distance: ' + data.distance); } ); @@ -997,7 +962,6 @@ once(type: SensorType.SENSOR_TYPE_ID_HUMIDITY, callback: AsyncCallback<Humidi console.error("Subscription failed. Error code: " + error.code + "; message: " + error.message); return; } - //打印data的湿度值 console.info('Humidity: ' + data.humidity); } ); @@ -1023,7 +987,6 @@ once(type: SensorType.SENSOR_TYPE_ID_BAROMETER, callback: AsyncCallback<Barom console.error("Subscription failed. Error code: " + error.code + "; message: " + error.message); return; } - //打印data的压强值 console.info('Atmospheric pressure: ' + data.pressure); } ); @@ -1049,7 +1012,6 @@ once(type: SensorType.SENSOR_TYPE_ID_HALL, callback: AsyncCallback<HallResp console.error("Subscription failed. Error code: " + error.code + "; message: " + error.message); return; } - //打印data的状态值 console.info('Status: ' + data.status); } ); @@ -1075,7 +1037,6 @@ once(type: SensorType.SENSOR_TYPE_ID_AMBIENT_LIGHT, callback: AsyncCallback<L console.error("Subscription failed. Error code: " + error.code + "; message: " + error.message); return; } - //打印data的光强值 console.info(''Illumination: ' + data.intensity); } ); @@ -1101,7 +1062,6 @@ once(type: SensorType.SENSOR_TYPE_ID_ORIENTATION, callback: AsyncCallback<Ori console.error("Subscription failed. Error code: " + error.code + "; message: " + error.message); return; } - //打印data的x,y,z轴坐标的分量 console.info('X-coordinate component: ' + data.x); console.info('Y-coordinate component: ' + data.y); console.info('Z-coordinate component: ' + data.z); @@ -1129,7 +1089,6 @@ once(type: SensorType.SENSOR_TYPE_ID_ROTATION_VECTOR, callback: AsyncCallback< console.error("Subscription failed. Error code: " + error.code + "; message: " + error.message); return; } - //打印data的x,y,z轴坐标的分量 console.info('X-coordinate component: ' + data.x); console.info('Y-coordinate component: ' + data.y); console.info('Z-coordinate component: ' + data.z); @@ -1157,7 +1116,6 @@ once(type: SensorType.SENSOR_TYPE_ID_HEART_RATE, callback: AsyncCallback<Hear console.error("Subscription failed. Error code: " + error.code + "; message: " + error.message); return; } - //打印data的心率值 console.info("Heart rate: " + data.heartRate); } ); @@ -1183,7 +1141,6 @@ once(type: SensorType.SENSOR_TYPE_ID_WEAR_DETECTION, callback: AsyncCallback< console.error("Failed to register data, error code is" + error.code + ", message: " + error.message); return; } - //打印data的佩戴状态 console.info("Wear status: "+ data.value); } ); @@ -1216,35 +1173,63 @@ off(type: SensorType, callback?: AsyncCallback<void>): void ``` -## sensor.createRotationMatrix +## sensor.getGeomagneticField -createRotationMatrix(rotationVector: Array<number>): Promise<Array<number>> +getGeomagneticField(locationOptions: LocationOptions, timeMillis: number, callback: AsyncCallback<GeomagneticResponse>): void -将旋转矢量转换为旋转矩阵,返回值为数组。 +获取地球上特定位置的地磁场。 - 参数 | 参数名 | 类型 | 必填 | 说明 | | -------- | -------- | -------- | -------- | - | rotationVector | Array<number> | 是 | 旋转矢量指示旋转矢量。 | + | locationOptions | [LocationOptions](#locationoptions) | 是 | 地理位置。 | + | timeMillis | number | 是 | 表示获取磁偏角的时间，单位为毫秒。 | + | callback | AsyncCallback<[GeomagneticResponse](#geomagneticresponse)> | 是 | 返回磁场信息。 | + +- 示例 + ``` + sensor.getGeomagneticField([80, 0, 0], {'timeMillis':1580486400000}, function(err, data) { + if (err) { + console.error('Operation failed. Error code: ' + err.code + '; message: ' + err.message); + return; + } + console.info('sensor_getGeomagneticField_promise x: ' + data.x + ',y: ' + data.y + ',z: ' + + data.z + ',geomagneticDip: ' + data.geomagneticDip + ',deflectionAngle: ' + data.deflectionAngle + + ',levelIntensity: ' + data.levelIntensity + ',totalIntensity: ' + data.totalIntensity); + }); + ``` + + +## sensor.getGeomagneticField + +getGeomagneticField(locationOptions: LocationOptions, timeMillis: number): Promise<GeomagneticResponse> + +获取地球上特定位置的地磁场。 + +- 参数 + | 参数名 | 类型 | 必填 | 说明 | + | -------- | -------- | -------- | -------- | + | locationOptions | [LocationOptions](#locationoptions) | 是 | 地理位置。 | + | timeMillis | number | 是 | 表示获取磁偏角的时间，单位为毫秒。 | - 返回值 | 类型 | 说明 | | -------- | -------- | - | Promise<Array<number>> | 返回角度变化的数字（z、x和y）数组。 | + | Promise<[GeomagneticResponse](#geomagneticresponse)> | 返回磁场信息。 | - 示例 ``` - const promise = sensor.createRotationMatrix([0.20046076, 0.21907, 0.73978853, 0.60376877]); + const promise = sensor.getGeomagneticField([80, 0, 0], {'timeMillis':1580486400000}); promise.then((data) => { - console.info(LABEL + 'createRotationMatrix_promise success'); - for (var i=0; i < data.length; i++) { - console.info(LABEL + "data[" + i + "]: " + data[i]); - } + console.info('sensor_getGeomagneticField_promise x: ' + data.x + ',y: ' + data.y + ',z: ' + + data.z + ',geomagneticDip: ' + data.geomagneticDip + ',deflectionAngle: ' + data.deflectionAngle + + ',levelIntensity: ' + data.levelIntensity + ',totalIntensity: ' + data.totalIntensity); }).catch((reason) => { - console.info(LABEL + "promise::catch", reason); - }); + console.info('Operation failed.'); + }) ``` + ## SensorType 表示要订阅或取消订阅的传感器类型。 @@ -1275,111 +1260,120 @@ createRotationMatrix(rotationVector: Array<number>): Promise<Array<n | SENSOR_TYPE_ID_ACCELEROMETER_UNCALIBRATED | 281 | 未校准加速度计传感器。 | +## Response + +传感器数据的时间戳。 + +| 名称 | 参数类型 | 可读 | 可写 | 说明 | +| -------- | -------- | -------- | -------- | -------- | +| timestamp | number | 是 | 是 | 传感器数据上报的时间戳。 | + + ## AccelerometerResponse -加速度传感器数据。 +加速度传感器数据，继承于[Response](#response)。 | 名称 | 参数类型 | 可读 | 可写 | 说明 | | -------- | -------- | -------- | -------- | -------- | -| x | number | 是 | 是 | x轴坐标分量。 | -| y | number | 是 | 是 | y轴坐标分量。 | -| z | number | 是 | 是 | z轴坐标分量。 | +| x | number | 是 | 是 | 施加在设备x轴的加速度，单位 : m/s2。 | +| y | number | 是 | 是 | 施加在设备y轴的加速度，单位 : m/s2。 | +| z | number | 是 | 是 | 施加在设备z轴的加速度，单位 : m/s2。 | ## LinearAccelerometerResponse -线性加速度传感器数据。 +线性加速度传感器数据，继承于[Response](#response)。 | 名称 | 参数类型 | 可读 | 可写 | 说明 | | -------- | -------- | -------- | -------- | -------- | -| x | number | 是 | 是 | x轴坐标分量。 | -| y | number | 是 | 是 | y轴坐标分量。 | -| z | number | 是 | 是 | z轴坐标分量。 | +| x | number | 是 | 是 | 施加在设备x轴的线性加速度，单位 : m/s2。 | +| y | number | 是 | 是 | 施加在设备y轴的线性加速度，单位 : m/s2。 | +| z | number | 是 | 是 | 施加在设备z轴的线性加速度，单位 : m/s2。 | ## AccelerometerUncalibratedResponse -未校准加速度计传感器数据。 +未校准加速度计传感器数据，继承于[Response](#response)。 | 名称 | 参数类型 | 可读 | 可写 | 说明 | | -------- | -------- | -------- | -------- | -------- | -| x | number | 是 | 是 | x轴坐标分量。 | -| y | number | 是 | 是 | y轴坐标分量。 | -| z | number | 是 | 是 | z轴坐标分量。 | -| biasX | number | 是 | 是 | x轴坐标偏移量。 | -| biasY | number | 是 | 是 | y轴坐标偏移量。 | -| biasZ | number | 是 | 是 | z轴坐标偏移量。 | +| x | number | 是 | 是 | 施加在设备x轴未校准的加速度，单位 : m/s2。 | +| y | number | 是 | 是 | 施加在设备y轴未校准的加速度，单位 : m/s2。 | +| z | number | 是 | 是 | 施加在设备z轴未校准的加速度，单位 : m/s2。 | +| biasX | number | 是 | 是 | 施加在设备x轴未校准的加速度偏量，单位 : m/s2。 | +| biasY | number | 是 | 是 | 施加在设备上y轴未校准的加速度偏量，单位 : m/s2。 | +| biasZ | number | 是 | 是 | 施加在设备z轴未校准的加速度偏量，单位 : m/s2。 | ## GravityResponse -重力传感器数据。 +重力传感器数据，继承于[Response](#response)。 | 名称 | 参数类型 | 可读 | 可写 | 说明 | | -------- | -------- | -------- | -------- | -------- | -| x | number | 是 | 是 | x轴坐标分量。 | -| y | number | 是 | 是 | y轴坐标分量。 | -| z | number | 是 | 是 | z轴坐标分量。 | +| x | number | 是 | 是 | 施加在设备x轴的重力加速度，单位 : m/s2。 | +| y | number | 是 | 是 | 施加在设备y轴的重力加速度，单位 : m/s2。 | +| z | number | 是 | 是 | 施加在设备z轴的重力加速度，单位 : m/s2。 | ## OrientationResponse -方向传感器数据。 +方向传感器数据，继承于[Response](#response)。 | 名称 | 参数类型 | 可读 | 可写 | 说明 | | -------- | -------- | -------- | -------- | -------- | -| x | number | 是 | 是 | x轴坐标分量。 | -| y | number | 是 | 是 | y轴坐标分量。 | -| z | number | 是 | 是 | z轴坐标分量。 | +| x | number | 是 | 是 | 设备围绕x轴的旋转角度，单位 : rad。 | +| y | number | 是 | 是 | 设备围绕y轴的旋转角度，单位 : rad。 | +| z | number | 是 | 是 | 设备围绕z轴的旋转角度，单位 : rad。 | ## RotationVectorResponse -旋转矢量传感器数据。 +旋转矢量传感器数据，继承于[Response](#response)。 | 名称 | 参数类型 | 可读 | 可写 | 说明 | | -------- | -------- | -------- | -------- | -------- | -| x | number | 是 | 是 | x轴坐标分量。 | -| y | number | 是 | 是 | y轴坐标分量。 | -| z | number | 是 | 是 | z轴坐标分量。 | +| x | number | 是 | 是 | 旋转矢量x轴分量。 | +| y | number | 是 | 是 | 旋转矢量y轴分量。 | +| z | number | 是 | 是 | 旋转矢量z轴分量。 | ## GyroscopeResponse -陀螺仪传感器数据。 +陀螺仪传感器数据，继承于[Response](#response)。 | 名称 | 参数类型 | 可读 | 可写 | 说明 | | -------- | -------- | -------- | -------- | -------- | -| x | number | 是 | 是 | x轴坐标分量。 | -| y | number | 是 | 是 | y轴坐标分量。 | -| z | number | 是 | 是 | z轴坐标分量。 | +| x | number | 是 | 是 | 设备x轴的旋转角速度，单位rad/s。 | +| y | number | 是 | 是 | 设备y轴的旋转角速度，单位rad/s。 | +| z | number | 是 | 是 | 设备z轴的旋转角速度，单位rad/s。 | ## GyroscopeUncalibratedResponse -未校准陀螺仪传感器数据。 +未校准陀螺仪传感器数据，继承于[Response](#response)。 | 名称 | 参数类型 | 可读 | 可写 | 说明 | | -------- | -------- | -------- | -------- | -------- | -| x | number | 是 | 是 | x轴坐标分量。 | -| y | number | 是 | 是 | y轴坐标分量。 | -| z | number | 是 | 是 | z轴坐标分量。 | -| biasX | number | 是 | 是 | x轴坐标偏移量。 | -| biasY | number | 是 | 是 | y轴坐标偏移量。 | -| biasZ | number | 是 | 是 | z轴坐标偏移量。 | +| x | number | 是 | 是 | 设备x轴未校准的旋转角速度，单位rad/s。 | +| y | number | 是 | 是 | 设备y轴未校准的旋转角速度，单位rad/s。 | +| z | number | 是 | 是 | 设备z轴未校准的旋转角速度，单位rad/s。 | +| biasX | number | 是 | 是 | 设备x轴未校准的旋转角速度偏量，单位rad/s。 | +| biasY | number | 是 | 是 | 设备y轴未校准的旋转角速度偏量，单位rad/s。 | +| biasZ | number | 是 | 是 | 设备z轴未校准的旋转角速度偏量，单位rad/s。 | ## SignificantMotionResponse -有效运动传感器数据。 +有效运动传感器数据，继承于[Response](#response)。 | 名称 | 参数类型 | 可读 | 可写 | 说明 | @@ -1389,7 +1383,7 @@ createRotationMatrix(rotationVector: Array<number>): Promise<Array<n ## ProximityResponse -接近光传感器数据。 +接近光传感器数据，继承于[Response](#response)。 | 名称 | 参数类型 | 可读 | 可写 | 说明 | @@ -1399,7 +1393,7 @@ createRotationMatrix(rotationVector: Array<number>): Promise<Array<n ## LightResponse -环境光传感器数据。 +环境光传感器数据，继承于[Response](#response)。 | 名称 | 参数类型 | 可读 | 可写 | 说明 | @@ -1409,7 +1403,7 @@ createRotationMatrix(rotationVector: Array<number>): Promise<Array<n ## HallResponse -霍尔传感器数据。 +霍尔传感器数据，继承于[Response](#response)。 | 名称 | 参数类型 | 可读 | 可写 | 说明 | @@ -1419,44 +1413,44 @@ createRotationMatrix(rotationVector: Array<number>): Promise<Array<n ## MagneticFieldResponse -磁场传感器数据。 +磁场传感器数据，继承于[Response](#response)。 | 名称 | 参数类型 | 可读 | 可写 | 说明 | | -------- | -------- | -------- | -------- | -------- | -| x | number | 是 | 是 | x轴坐标分量。 | -| y | number | 是 | 是 | y轴坐标分量。 | -| z | number | 是 | 是 | z轴坐标分量。 | +| x | number | 是 | 是 | x轴环境磁场强度，单位 : μT。 | +| y | number | 是 | 是 | y轴环境磁场强度，单位 : μT。 | +| z | number | 是 | 是 | z轴环境磁场强度，单位 : μT。。 | ## MagneticFieldUncalibratedResponse -未校准磁场传感器数据。 +未校准磁场传感器数据，继承于[Response](#response)。 | 名称 | 参数类型 | 可读 | 可写 | 说明 | | -------- | -------- | -------- | -------- | -------- | -| x | number | 是 | 是 | x轴坐标分量。 | -| y | number | 是 | 是 | y轴坐标分量。 | -| z | number | 是 | 是 | z轴坐标分量。 | -| biasX | number | 是 | 是 | x轴坐标偏移量。 | -| biasY | number | 是 | 是 | y轴坐标偏移量。 | -| biasZ | number | 是 | 是 | z轴坐标偏移量。 | +| x | number | 是 | 是 | x轴未校准环境磁场强度，单位 : μT。 | +| y | number | 是 | 是 | y轴未校准环境磁场强度，单位 : μT。 | +| z | number | 是 | 是 | z轴未校准环境磁场强度，单位 : μT。 | +| biasX | number | 是 | 是 | x轴未校准环境磁场强度偏量，单位 : μT。 | +| biasY | number | 是 | 是 | y轴未校准环境磁场强度偏量，单位 : μT。 | +| biasZ | number | 是 | 是 | z轴未校准环境磁场强度偏量，单位 : μT。 | ## PedometerResponse -计步传感器数据。 +计步传感器数据，继承于[Response](#response)。 | 名称 | 参数类型 | 可读 | 可写 | 说明 | | -------- | -------- | -------- | -------- | -------- | -| steps | number | 是 | 是 | 计数的步骤数。每次设备重新启动时，该值将从0重新计算。 | +| steps | number | 是 | 是 | 用户的行走步数。 | ## HumidityResponse -湿度传感器数据。 +湿度传感器数据，继承于[Response](#response)。 | 名称 | 参数类型 | 可读 | 可写 | 说明 | @@ -1466,7 +1460,7 @@ createRotationMatrix(rotationVector: Array<number>): Promise<Array<n ## PedometerDetectResponse -计步检测传感器数据。 +计步检测传感器数据，继承于[Response](#response)。 | 名称 | 参数类型 | 可读 | 可写 | 说明 | @@ -1476,7 +1470,7 @@ createRotationMatrix(rotationVector: Array<number>): Promise<Array<n ## AmbientTemperatureResponse -温度传感器数据。 +温度传感器数据，继承于[Response](#response)。 | 名称 | 参数类型 | 可读 | 可写 | 说明 | @@ -1486,7 +1480,7 @@ createRotationMatrix(rotationVector: Array<number>): Promise<Array<n ## BarometerResponse -气压计传感器数据。 +气压计传感器数据，继承于[Response](#response)。 | 名称 | 参数类型 | 可读 | 可写 | 说明 | @@ -1496,66 +1490,46 @@ createRotationMatrix(rotationVector: Array<number>): Promise<Array<n ## HeartRateResponse -心率传感器数据。 +心率传感器数据，继承于[Response](#response)。 | 名称 | 参数类型 | 可读 | 可写 | 说明 | | -------- | -------- | -------- | -------- | -------- | -| heartRate | number | 是 | 是 | 心率值。测量用户的心率数值，单位是次/分。 | +| heartRate | number | 是 | 是 | 心率值。测量用户的心率数值，单位：bpm。 | ## WearDetectionResponse -佩戴检测传感器数据。 +佩戴检测传感器数据，继承于[Response](#response)。 | 名称 | 参数类型 | 可读 | 可写 | 说明 | | -------- | -------- | -------- | -------- | -------- | -| value | boolean | 是 | 是 | 表示设备是否被穿戴（true 表示已穿戴，false表示未穿戴）。 | +| value | number | 是 | 是 | 表示设备是否被穿戴（1表示已穿戴，0表示未穿戴）。 | ## Options -设置传感器上报频率 +设置传感器上报频率。 | 名称 | 参数类型 | 说明 | | -------- | -------- | -------- | | interval | number | 表示传感器的上报频率，默认值为200000000ns。 | -## RotationMatrixResponse - -设置旋转矩阵响应对象 - -| 名称 | 参数类型 | 可读 | 可写 | 说明 | -| -------- | -------- | -------- | -------- | -------- | -| rotation | Array<number> | 是 | 是 | 旋转矩阵。 | -| inclination | Array<number> | 是 | 是 | 倾斜矩阵。 | - - -## CoordinatesOptions - -设置坐标选项对象 - -| 名称 | 参数类型 | 可读 | 可写 | 说明 | -| -------- | -------- | -------- | -------- | -------- | -| x | number | 是 | 是 | x坐标偏移量。 | -| y | number | 是 | 是 | y坐标偏移量。 | - - ## GeomagneticResponse -设置地磁响应对象 +设置地磁响应对象，继承于[Response](#response)。 | 名称 | 参数类型 | 可读 | 可写 | 说明 | | -------- | -------- | -------- | -------- | -------- | -| x | number | 是 | 是 | x轴坐标分量。 | -| y | number | 是 | 是 | y轴坐标分量。 | -| z | number | 是 | 是 | z轴坐标分量。 | -| geomagneticDip | number | 是 | 是 | 地磁倾角。 | -| deflectionAngle | number | 是 | 是 | 偏转角。 | -| levelIntensity | number | 是 | 是 | 水平强度。 | -| totalIntensity | number | 是 | 是 | 总强度。 | +| x | number | 是 | 是 | 地磁场的北分量。 | +| y | number | 是 | 是 | 地磁场的东分量。 | +| z | number | 是 | 是 | 地磁场的垂直分量。 | +| geomagneticDip | number | 是 | 是 | 地磁倾角，即地球磁场线与水平面的夹角。 | +| deflectionAngle | number | 是 | 是 | 地磁偏角，即地磁北方向与正北方向在水平面上的角度。 | +| levelIntensity | number | 是 | 是 | 地磁场的水平强度。 | +| totalIntensity | number | 是 | 是 | 地磁场的总强度。 | ## LocationOptions @@ -1564,4 +1538,4 @@ createRotationMatrix(rotationVector: Array<number>): Promise<Array<n | -------- | -------- | -------- | -------- | -------- | | latitude | number | 是 | 是 | 纬度。 | | longitude | number | 是 | 是 | 经度。 | -| altitude | number | 是 | 是 | 海拔。 | +| altitude | number | 是 | 是 | 海拔高度。 | diff --git a/zh-cn/application-dev/reference/apis/js-apis-settings.md b/zh-cn/application-dev/reference/apis/js-apis-settings.md new file mode 100644 index 0000000000000000000000000000000000000000..e3e7d0c51b30f6a760d5cc2ef091145b664d7a6c --- /dev/null +++ b/zh-cn/application-dev/reference/apis/js-apis-settings.md @@ -0,0 +1,111 @@ +# 设置 + +> ![icon-note.gif](public_sys-resources/icon-note.gif) **说明：** +> 本模块首批接口从API version 8开始支持。后续版本如有新增内容，则采用上角标单独标记该内容的起始版本。 + + +本模块提供设置数据项的访问功能相关接口的说明及示例。 + + +## 导入模块 + +``` +import settings from '@ohos.settings'; +``` + + +## 权限 + +无 + + +## settings.getUri + +getUri(name: string): string + +获取数据项的URI。 + +- 参数： + | 参数名 | 类型 | 必填 | 说明 | + | -------- | -------- | -------- | -------- | + | name | string | 是 | 数据项的名称。 | + +- 返回值： + | 类型 | 说明 | + | -------- | -------- | + | string | 数据项的URI。 | + +- 示例： + ``` + // 获取数据项的URI + let urivar = settings.getUri(this.dataName); + ``` + + +## settings.getValue + +getValue(dataAbilityHelper: DataAbilityHelper, name: string, defValue: string): string + +获取数据项的值。 + +- 参数： + | 参数名 | 类型 | 必填 | 说明 | + | -------- | -------- | -------- | -------- | + | dataAbilityHelper | [DataAbilityHelper](js-apis-dataAbilityHelper.md) | 是 | 数据管理辅助类。 | + | name | string | 是 | 数据项的名称。 | + | defValue | string | 是 | 默认值。 | + +- 返回值： + | 类型 | 说明 | + | -------- | -------- | + | string | 返回数据项的值。 | + +- 示例： + ``` + Button(`register and unregister an observer`) + .onClick(()=>{ + // 获取数据项的URI + let urivar = settings.getUri(this.dataName); + // 获取DataAbilityHelper对象 + let helper = featureAbility.acquireDataAbilityHelper(urivar); + // 注册观察者，on方法第一个参数写"dataChange"，第二个参数为URI，第三个参数为当该URI指向的数据发生改变时触发的回调函数 + helper.on("dataChange", urivar, (err) => { + console.log('observer reveive notifychange on success data : ' + JSON.stringify(err)) + this.value = settings.getValue(helper, this.dataName, 'this is default value') + }) + ``` + + +## settings.setValue + +setValue(dataAbilityHelper: DataAbilityHelper, name: string, value: string): boolean + +设置数据项的值。 + +使用此方法需获取ohos.permission.WRITE_SYSTEM_SETTING权限。 + +- 参数： + | 参数名 | 类型 | 必填 | 说明 | + | -------- | -------- | -------- | -------- | + | dataAbilityHelper | [DataAbilityHelper](js-apis-dataAbilityHelper.md) | 是 | 数据管理辅助类。 | + | name | string | 是 | 数据项的名称。 | + | value | string | 是 | 数据项的具体数值。 | + +- 返回值： + | 类型 | 说明 | + | -------- | -------- | + | boolean | 返回设置数据项的值是否成功的结果。true表示设置成功，false则表示设置失败。 | + +- 示例： + ``` + Button(`setValue`) + .onClick(()=>{ + // 获取数据项的URI + let urivar = settings.getUri(this.dataName); + // 获取DataAbilityHelper对象 + let helper = featureAbility.acquireDataAbilityHelper(urivar); + let valueTest = 'valueTest'; + // 更新数据库中的值 + settings.setValue(helper, this.dataName, valueTest) + }) + ``` diff --git a/zh-cn/application-dev/reference/apis/js-apis-telephony.md b/zh-cn/application-dev/reference/apis/js-apis-telephony.md deleted file mode 100644 index f0e4f4ed886f45a9c062e9328d71b622d526cef5..0000000000000000000000000000000000000000 --- a/zh-cn/application-dev/reference/apis/js-apis-telephony.md +++ /dev/null @@ -1,2 +0,0 @@ -# 电话服务 - diff --git a/zh-cn/application-dev/reference/apis/js-apis-uri.md b/zh-cn/application-dev/reference/apis/js-apis-uri.md new file mode 100644 index 0000000000000000000000000000000000000000..acbf97163f00dde322be42cf4fb3ab61cc8cef30 --- /dev/null +++ b/zh-cn/application-dev/reference/apis/js-apis-uri.md @@ -0,0 +1,130 @@ +# URI字符串解析 + +> ![icon-note.gif](public_sys-resources/icon-note.gif) **说明：** +> 本模块首批接口从API version 8开始支持。后续版本的新增接口，采用上角标单独标记接口的起始版本。 + + +## 导入模块 + +``` +import uri from '@ohos.uri' +``` + + +## 权限 + +无 + + +## URI + + +### 属性 + +| 名称 | 参数类型 | 可读 | 可写 | 说明 | +| -------- | -------- | -------- | -------- | -------- | +| scheme | string | 是 | 否 | 获取URI 的协议部分。 | +| userinfo | string | 是 | 否 | 获取 URI 的用户信息部分。 | +| host | string | 是 | 否 | 获取 URI 的主机名部分（不带端口）。 | +| port | string | 是 | 否 | 获取 URI 的端口部分。 | +| path | string | 是 | 否 | 获取 URI 的路径部分。 | +| query | string | 是 | 否 | 获取 URI 的查询部分。 | +| fragment | string | 是 | 否 | 获取 URI 的片段部分 | +| authority | string | 是 | 否 | 获取此URI的解码权限组件部分。 | +| ssp | string | 是 | 否 | 获取URI的解码方案特定部分。 | + + +### constructor + +constructor(uri: string) + +constructor是URI的构造函数。 + +- 参数： + | 参数名 | 类型 | 可读 | 可写 | 说明 | + | -------- | -------- | -------- | -------- | -------- | + | url | string | 是 | 是 | 入参对象。 | + +- 示例： + ``` + var mm = 'http://username:password@host:8080/directory/file?foo=1&bar=2#fragment'; + new URI(mm); // Output 'http://username:password@host:8080/directory/file?foo=1&bar=2#fragment'; + new URI('http://username:password@host:8080'); // Output 'http://username:password@host:8080'; + ``` + + +### toString + +toString(): string + +返回适用于URL中的查询字符串。 + +- 返回值： + | 类型 | 说明 | + | -------- | -------- | + | string | 用于返回网址的字符串序列化。 | + +- 示例: + ``` + const url = new URL('http://username:password@host:8080/directory/file?query=pppppp#qwer=da'); + url.toString() + ``` + + +### equals + +equals(other: URI): boolean + +判断此URI是否与其他URI对象相等。 + +- 参数： + | 参数名 | 类型 | 必填 | 说明 | + | -------- | -------- | -------- | -------- | + | other | [URI](#uri) | 是 | 需要比较的URI对象。 | + +- 返回值： + | 类型 | 说明 | + | -------- | -------- | + | boolean | 用于测试此URI是否与其他URI对象相等。 | + +- 示例: + ``` + const uri = new URI('http://username:password@host:8080/directory/file?query=pppppp#qwer=da'); + const uri1 = new URI('http://username:password@host:8080/directory/file?query=pppppp#qwer=da#fragment'); + uri.equals(uri1); + ``` + + +### checkIsAbsolute + +判断此URI是否为绝对URI。 + +- 返回值： + | 类型 | 说明 | + | -------- | -------- | + | boolean | 用于说明此URI是否为绝对URI（是否定义了scheme组件）。 | + +- 示例: + ``` + const uri = new URI('http://username:password@www.qwer.com:8080?query=pppppp'); + uri.checkIsAbsolute(); + ``` + + +### normalize + +normalize(): URI + +规范化此URI的路径。 + +- 返回值： + | 类型 | 说明 | + | -------- | -------- | + | URI | 用于规范化此URI的路径，并返回一个path被规范化后的URI对象。 | + +- 示例: + ``` + const uri = new URI('http://username:password@www.qwer.com:8080/path/path1/../path2/./path3?query=pppppp'); + let uri1 = uri.normalize(); + uri1.path; + ``` diff --git a/zh-cn/application-dev/reference/apis/js-apis-usb.md b/zh-cn/application-dev/reference/apis/js-apis-usb.md new file mode 100644 index 0000000000000000000000000000000000000000..57ec4cdcf843c36971de312b614f0c0c64dfb4de --- /dev/null +++ b/zh-cn/application-dev/reference/apis/js-apis-usb.md @@ -0,0 +1,528 @@ +# USB管理 + +> ![icon-note.gif](public_sys-resources/icon-note.gif) **说明：** +> 本模块首批接口从API version 8开始支持。后续版本的新增接口，采用上角标单独标记接口的起始版本。 + + +## 导入模块 + +``` +import usb from "@ohos.usb"; +``` + + +## 权限 + +无 + + +## usb.getDevices + +usb.getDevices(): Array<Readonly<USBDevice>> + +获取USB设备列表。 + +- 返回值： + | 类型 | 说明 | + | -------- | -------- | + | Array<Readonly<[USBDevice](#usbdevice)>> | 设备信息列表。 | + +- 示例： + ``` + let devicesList = usb.getDevices(); + console.log(`devicesList = ${JSON.stringify(devicesList)}`); + //devicesList 返回的数据结构 + //此处提供一个简单的示例，如下 + [ + { + name: "1-1", + serial: "", + manufacturerName: "", + productName: "", + version: "", + vendorId: 7531, + productId: 2, + clazz: 9, + subclass: 0, + protocol: 1, + devAddress: 1, + busNum: 1, + configs: [ + { + id: 1, + attributes: 224, + isRemoteWakeup: true, + isSelfPowered: true, + maxPower: 0, + name: "1-1", + interfaces: [ + { + id: 0, + protocol: 0, + clazz: 9, + subclass: 0, + alternateSetting: 0, + name: "1-1", + endpoints: [ + { + address: 129, + attributes: 3, + interval: 12, + maxPacketSize: 4, + direction: 128, + number: 1, + type: 3, + interfaceId: 0, + }, + ], + }, + ], + }, + ], + }, + ] + ``` + + +## usb.connectDevice + +usb.connectDevice(device: USBDevice): Readonly<USBDevicePipe> + +打开USB设备。 + +需要调用[usb.getDevices](#usbgetdevices)获取设备信息以及device；再调用[usb.requestRight](#usbrequestright)获取设备请求权限。 + +- 参数： + | 参数名 | 类型 | 必填 | 说明 | + | -------- | -------- | -------- | -------- | + | device | [USBDevice](#usbdevice) | 是 | USB设备信息。 | + +- 返回值： + | 类型 | 说明 | + | -------- | -------- | + | Readonly<[USBDevicePipe](#usbdevicepipe)> | 指定的传输通道对象。 | + +- 示例： + ``` + let devicepipe= usb.connectDevice(device); + console.log(`devicepipe = ${JSON.stringify(devicepipe)}`); + ``` + + +## usb.hasRight + +usb.hasRight(deviceName: string): boolean + +判断是否有权访问该设备。 + +- 参数： + | 参数名 | 类型 | 必填 | 说明 | + | -------- | -------- | -------- | -------- | + | deviceName | string | 是 | 设备名称。 | + +- 返回值： + | 类型 | 说明 | + | -------- | -------- | + | boolean | true表示有访问设备的权限，false表示没有访问设备的权限。 | + +- 示例： + ``` + let divicesName="1-1"; + let bool = usb.hasRight(divicesName); + console.log(bool); + ``` + + +## usb.requestRight + +usb.requestRight(deviceName: string): Promise<boolean> + +请求软件包的临时权限以访问设备。 + +- 参数： + | 参数名 | 类型 | 必填 | 说明 | + | -------- | -------- | -------- | -------- | + | deviceName | string | 是 | 设备名称。 | + +- 返回值： + | 类型 | 说明 | + | -------- | -------- | + | Promise<boolean> | 获取到true则表示软件包的临时权限已访问成功， 获取到false则表示软件包的临时权限已访问失败。 | + +- 示例： + ``` + let divicesName="1-1"; + usb.requestRight(divicesName).then((ret) => { + console.log(`requestRight = ${JSON.stringify(ret)}`); + }); + ``` + + +## usb.claimInterface + +usb.claimInterface(pipe: USBDevicePipe, iface: USBInterface, force?: boolean): number + +注册通信接口。 + +需要调用[usb.getDevices](#usbgetdevices)获取设备信息以及interfaces；调用[usb.requestRight](#usbrequestright)获取设备请求权限；调用[usb.connectDevice](#usbconnectdevice)接口得到devicepipe作为参数。 + +- 参数： + | 参数名 | 类型 | 必填 | 说明 | + | -------- | -------- | -------- | -------- | + | pipe | [USBDevicePipe](#usbdevicepipe) | 是 | 用于确定总线号和设备地址。 | + | iface | [USBInterface](#usbinterface) | 是 | 用于确定需要获取接口的索引。 | + | force | boolean | 否 | 可选参数，是否强制获取。默认值false ，表示不强制获取。 | + +- 返回值： + | 类型 | 说明 | + | -------- | -------- | + | number | 注册通信接口成功返回0；注册通信接口失败返回其他错误码。 | + +- 示例： + ``` + let ret = usb.claimInterface(devicepipe, interfaces); + console.log(`claimInterface = ${ret}`); + ``` + + +## usb.releaseInterface + +usb.releaseInterface(pipe: USBDevicePipe, iface: USBInterface): number + +释放注册过的通信接口。 + +需要调用[usb.claimInterface](#usbclaiminterface)先获取接口，才能使用此方法释放接口。 + +- 参数： + | 参数名 | 类型 | 必填 | 说明 | + | -------- | -------- | -------- | -------- | + | pipe | [USBDevicePipe](#usbdevicepipe) | 是 | 用于确定总线号和设备地址。 | + | iface | [USBInterface](#usbinterface) | 是 | 用于确定需要释放接口的索引。 | + +- 返回值： + | 类型 | 说明 | + | -------- | -------- | + | number | 释放接口成功返回0；释放接口失败返回其他错误码。 | + +- 示例： + ``` + let ret = usb.releaseInterface(devicepipe, interfaces); + console.log(`releaseInterface = ${ret}`); + ``` + + +## usb.setConfiguration + +usb.setConfiguration(pipe: USBDevicePipe, config: USBConfig): number + +设置设备配置。 + +需要调用[usb.getDevices](#usbgetdevices)获取设备信息以及config；调用[usb.requestRight](#usbrequestright)获取设备请求权限；调用[usb.connectDevice](#usbconnectdevice)得到devicepipe作为参数。 + +- 参数： + | 参数名 | 类型 | 必填 | 说明 | + | -------- | -------- | -------- | -------- | + | pipe | [USBDevicePipe](#usbdevicepipe) | 是 | 用于确定总线号和设备地址。 | + | config | [USBConfig](#usbconfig) | 是 | 用于确定需要设置的配置。 | + +- 返回值： + | 类型 | 说明 | + | -------- | -------- | + | number | 设置设备配置成功返回0；设置设备配置失败返回其他错误码。 | + +- 示例： + ``` + let ret = usb.setConfiguration(devicepipe, config); + console.log(`setConfiguration = ${ret}`); + ``` + + +## usb.setInterface + +usb.setInterface(pipe: USBDevicePipe, iface: USBInterface): number + +设置设备接口。 + +需要调用[usb.getDevices](#usb-getdevices)获取设备列表以及interfaces；调用[usb.requestRight](#usbrequestright)获取设备请求权限；调用[usb.connectDevice](#usbconnectdevice)得到devicepipe作为参数。 + +- 参数： + | 参数名 | 类型 | 必填 | 说明 | + | -------- | -------- | -------- | -------- | + | pipe | [USBDevicePipe](#usbdevicepipe) | 是 | 用于确定总线号和设备地址。 | + | iface | [USBInterface](#usbinterface) | 是 | 用于确定需要设置的接口。 | + +- 返回值： + | 类型 | 说明 | + | -------- | -------- | + | number | 设置设备接口成功返回0；设置设备接口失败返回其他错误码。 | + +- 示例： + ``` + let ret = usb.setInterface(devicepipe, interfaces); + console.log(`setInterface = ${ret}`); + ``` + + +## usb.getRawDescriptor + +usb.getRawDescriptor(pipe: USBDevicePipe): Uint8Array + +获取原始的USB描述符。 + +需要调用[usb.getDevices](#usbgetdevices)获取设备列表；调用[usb.requestRight](#usbrequestright)获取设备请求权限；调用[usb.connectDevice](#usbconnectdevice)接口得到devicepipe作为参数。 + +- 参数： + | 参数名 | 类型 | 必填 | 说明 | + | -------- | -------- | -------- | -------- | + | pipe | [USBDevicePipe](#usbdevicepipe) | 是 | 用于确定总线号和设备地址。 | + +- 返回值： + | 类型 | 说明 | + | -------- | -------- | + | Uint8Array | 返回获取的原始数据。 | + +- 示例： + ``` + let ret = usb.getRawDescriptor(devicepipe); + ``` + + +## usb.getFileDescriptor + +usb.getFileDescriptor(pipe: USBDevicePipe): number + +获取文件描述符。 + +需要调用[usb.getDevices](#usbgetdevices)获取设备列表；调用[usb.requestRight](#usbrequestright)获取设备请求权限；调用[usb.connectDevice](#usbconnectdevice)接口得到devicepipe作为参数。 + +- 参数： + | 参数名 | 类型 | 必填 | 说明 | + | -------- | -------- | -------- | -------- | + | pipe | [USBDevicePipe](#usbdevicepipe) | 是 | 用于确定总线号和设备地址。 | + +- 返回值: + | 类型 | 说明 | + | -------- | -------- | + | number | 返回设备对应的文件描述符。 | + +- 示例： + ``` + let ret = usb.getFileDescriptor(devicepipe); + ``` + + +## usb.controlTransfer + +usb.controlTransfer(pipe: USBDevicePipe, contrlparam: USBControlParams, timeout?: number): Promise<number> + +控制传输。 + +需要调用[usb.getDevices](#usbgetdevices)获取设备列表；调用[usb.requestRight](#usbrequestright)获取设备请求权限；调用[usb.connectDevice](#usbconnectdevice)接口得到devicepipe作为参数。 + +- 参数： + | 参数名 | 类型 | 必填 | 说明 | + | -------- | -------- | -------- | -------- | + | pipe | [USBDevicePipe](#usbdevicepipe) | 是 | 用于确定设备。 | + | contrlparam | [USBControlParams](#usbcontrolparams) | 是 | 控制传输参数。 | + | timeout | number | 否 | 超时时间，可选参数，默认为0不超时。 | + +- 返回值： + | 类型 | 说明 | + | -------- | -------- | + | Promise<number> | 获取传输或接收到的数据块大小， 获取到-1则表示异常。 | + +- 示例： + ``` + usb.controlTransfer(devicepipe, USBControlParams).then((ret) => { + console.log(`controlTransfer = ${JSON.stringify(ret)}`); + }) + ``` + + +## usb.bulkTransfer + +usb.bulkTransfer(pipe: USBDevicePipe, endpoint: USBEndpoint, buffer: Uint8Array, timeout?: number): Promise<number> + +批量传输。 + +需要调用[usb.getDevices](#usbgetdevices)获取设备信息列表以及endpoint；再调用[usb.requestRight](#usbrequestright)获取设备请求权限；然后调用[usb.connectDevice](#usbconnectdevice)接口得到返回数据devicepipe之后，再次获取接口[usb.claimInterface](#usbclaiminterface)；再调用usb.bulkTransfer接口。 + +- 参数： + | 参数名 | 类型 | 必填 | 说明 | + | -------- | -------- | -------- | -------- | + | pipe | [USBDevicePipe](#usbdevicepipe) | 是 | 用于确定设备。 | + | endpoint | [USBEndpoint](#usbendpoint) | 是 | 用于确定传输的端口。 | + | buffer | Uint8Array | 是 | 用于写入或读取的缓冲区。 | + | timeout | number | 否 | 超时时间，可选参数，默认为0不超时。 | + +- 返回值： + | 类型 | 说明 | + | -------- | -------- | + | Promise<number> | 获取传输或接收到的数据块大小， 获取到-1则表示异常。 | + +- 示例： + ``` + //usb.getDevices 接口返回数据集合，取其中一个设备对象，并获取权限 。 + //把获取到的设备对象作为参数传入usb.connectDevice;当usb.connectDevice接口成功返回之后； + //才可以调用第三个接口usb.claimInterface.当usb.claimInterface 调用成功以后,再调用该接口。 + usb.bulkTransfer(devicepipe, endpoint, buffer).then((ret) => { + console.log(`bulkTransfer = ${JSON.stringify(ret)}`); + }); + ``` + + +## usb.closePipe + +usb.closePipe(pipe: USBDevicePipe): number + +关闭设备消息控制通道。 + +需要调用[usb.getDevices](#usbgetdevices)获取设备列表；调用[usb.requestRight](#usbrequestright)获取设备请求权限；调用[usb.connectDevice](#usbconnectdevice)得到devicepipe作为参数。 + +- 参数： + | 参数名 | 类型 | 必填 | 说明 | + | -------- | -------- | -------- | -------- | + | pipe | [USBDevicePipe](#usbdevicepipe) | 是 | 用于确定USB设备消息控制通道。 | + +- 返回值： + | 类型 | 说明 | + | -------- | -------- | + | number | 关闭设备消息控制通道成功返回0；关闭设备消息控制通道失败返回其他错误码。 | + +- 示例： + ``` + let ret = usb.closePipe(devicepipe); + console.log(`closePipe = ${ret}`); + ``` + + +## USBEndpoint + +通过USB发送和接收数据的端口。通过[USBInterface](#usbinterface)获取。 + +| 名称 | 参数类型 | 说明 | +| -------- | -------- | -------- | +| address | number | 端点地址。 | +| attributes | number | 端点属性。 | +| interval | number | 端点间隔。 | +| maxPacketSize | number | 端点最大数据包大小。 | +| direction | [USBRequestDirection](#usbrequestdirection) | 端点的方向。 | +| number | number | 端点号。 | +| type | number | 端点类型。 | +| interfaceId | number | 端点所属的接口的唯一标识。 | + + +## USBInterface + +一个[USBConfig](#usbconfig)中可以含有多个USBInterface，每个USBInterface提供一个功能。 + +| 名称 | 参数类型 | 说明 | +| -------- | -------- | -------- | +| id | number | 接口的唯一标识。 | +| protocol | number | 接口的协议。 | +| clazz | number | 设备类型。 | +| subClass | number | 设备子类。 | +| alternateSetting | number | 在同一个接口中的多个描述符中进行切换设置。 | +| name | string | 接口名称。 | +| endpoints | Array<[USBEndpoint](#usbendpoint)> | 当前接口所包含的端点。 | + + +## USBConfig + +USB配置，一个[USBDevice](#usbdevice)中可以含有多个配置。 + +| 名称 | 参数类型 | 说明 | +| -------- | -------- | -------- | +| id | number | 配置的唯一标识。 | +| attributes | number | 配置的属性。 | +| maxPower | number | 最大功耗，以毫安为单位。 | +| name | string | 配置的名称，可以为空。 | +| isRemoteWakeup | boolean | 检查当前配置是否支持远程唤醒。 | +| isSelfPowered | boolean | 检查当前配置是否支持独立电源。 | +| interfaces | Array <[USBInterface](#usbinterface)> | 配置支持的接口属性。 | + + +## USBDevice + +USB设备信息。 + +| 名称 | 参数类型 | 说明 | +| -------- | -------- | -------- | +| busNum | number | 总线地址。 | +| devAddress | number | 设备地址。 | +| serial | string | 序列号。 | +| name | string | 设备名字。 | +| manufacturerName | string | 产商信息。 | +| productName | string | 产品信息。 | +| version | string | 版本。 | +| vendorId | number | 厂商ID。 | +| productId | number | 产品ID。 | +| clazz | number | 设备类。 | +| subClass | number | 设备子类。 | +| protocol | number | 设备协议码。 | +| configs | Array<[USBConfig](#usbconfig)> | 设备配置描述符信息。 | + + +## USBDevicePipe + +USB设备消息传输通道，用于确定设备。 + +| 名称 | 参数类型 | 说明 | +| -------- | -------- | -------- | +| busNum | number | 总线地址。 | +| devAddress | number | 设备地址。 | + + +## USBControlParams + +控制传输参数。 + +| 名称 | 参数类型 | 说明 | +| -------- | -------- | -------- | +| request | number | 请求类型。 | +| target | [USBRequestTargetType](#usbrequesttargettype) | 请求目标类型。 | +| reqType | [USBControlRequestType](#usbcontrolrequesttype) | 请求控制类型。 | +| value | number | 请求参数。 | +| index | number | 请求参数value对应的索引值。 | +| data | Uint8Array | 用于写入或读取的缓冲区。 | + + +## USBRequestTargetType + +请求目标类型。 + + +| 名称 | 默认值 | 说明 | +| -------- | -------- | -------- | +| USB_REQUEST_TARGET_DEVICE | 0 | 设备。 | +| USB_REQUEST_TARGET_INTERFACE | 1 | 接口。 | +| USB_REQUEST_TARGET_ENDPOINT | 2 | 端点。 | +| USB_REQUEST_TARGET_OTHER | 3 | 其他。 | + + +## USBControlRequestType + +控制请求类型。 + +| 名称 | 默认值 | 说明 | +| -------- | -------- | -------- | +| USB_REQUEST_TYPE_STANDARD | 0 | 标准。 | +| USB_REQUEST_TYPE_CLASS | 1 | 类。 | +| USB_REQUEST_TYPE_VENDOR | 2 | 厂商。 | + + +## USBRequestDirection + +请求方向。 + +| 名称 | 默认值 | 说明 | +| -------- | -------- | -------- | +| USB_REQUEST_TYPE_STANDARD | 0 | 写数据，主设备往从设备。 | +| USB_REQUEST_TYPE_CLASS | 0x80 | 读数据，从设备往主设备。 | + +| 名称 | 默认值 | 说明 | +| -------- | -------- | -------- | +| NONE | 0 | 无。 | +| ACM | 1 | 串口设备。 | +| ECM | 2 | 网口设备。 | +| HDC | 4 | HDC设备。 | diff --git a/zh-cn/application-dev/reference/apis/js-apis-util.md b/zh-cn/application-dev/reference/apis/js-apis-util.md index 2b0da9c6af96b71757c14cebb62eafbfc5a27cec..e1c76e3221300fe2a7da2d327dc7d8966c408f37 100644 --- a/zh-cn/application-dev/reference/apis/js-apis-util.md +++ b/zh-cn/application-dev/reference/apis/js-apis-util.md @@ -1,9 +1,13 @@ -# 字符串编解码 +# util工具函数 + > ![icon-note.gif](public_sys-resources/icon-note.gif) **说明：** > 本模块首批接口从API version 7开始支持。后续版本的新增接口，采用上角标单独标记接口的起始版本。 +该模块主要提供常用的工具函数，实现字符串编解码（TextEncoder，TextDecoder）、有理数运算（RationalNumber）、缓冲区管理（LruBuffer）、范围判断（Scope）、Base64编解码（Base64）、内置对象类型检查（Types）等功能。 + + ## 导入模块 ``` @@ -18,7 +22,7 @@ import util from '@ohos.util'; ## util.printf -printf(format: string, ...args: Object[]): string +printf(format: string, ...args: Object[]): string 通过式样化字符串对输入的内容按特定格式输出。 @@ -66,7 +70,7 @@ getErrorString(errno: number): string ## util.callbackWrapper -callbackWrapper(original: Function): (err: Object, value: Object)=>void +callbackWrapper(original: Function): (err: Object, value: Object )=>void 对异步函数进行回调化处理，回调中第一个参数将是拒绝原因（如果 Promise 已解决，则为 null），第二个参数将是已解决的值。 @@ -134,12 +138,12 @@ promiseWrapper(original: (err: Object, value: Object) => void): Object | -------- | -------- | -------- | -------- | -------- | | encoding | string | 是 | 否 | 编码格式。
- 支持格式：utf-8、ibm866、iso-8859-2、iso-8859-3、iso-8859-4、iso-8859-5、iso-8859-6、iso-8859-7、iso-8859-8、iso-8859-8-i、iso-8859-10、iso-8859-13、iso-8859-14、iso-8859-15、koi8-r、koi8-u、macintosh、windows-874、windows-1250、windows-1251、windows-1252、windows-1253、windows-1254、windows-1255、windows-1256、windows-1257、windows-1258、x-mac-cyrilli、gbk、gb18030、big5、euc-jp、iso-2022-jp、shift_jis、euc-kr、utf-16be、utf-16le。 | | fatal | boolean | 是 | 否 | 是否显示致命错误。 | -| ignoreBOM | boolean | 是 | 否 | 是否忽略BOM（byte order marker）标记，默认值是false。 | +| ignoreBOM | boolean | 是 | 否 | 是否忽略BOM（byte order marker）标记，默认值为false ，表示解码结果包含BOM标记。 | ### constructor -constructor(encoding?: string, options?: { fatal?: boolean; ignoreBOM?: boolean },) +constructor(encoding?:string, options?:{ fatal?:boolean;ignoreBOM?:boolean }) TextDecoder的构造函数。 @@ -164,21 +168,21 @@ TextDecoder的构造函数。 ### decode -decode(input: Uint8Array, options?:{stream?:false}): string +decode(input: Unit8Array, options?:{stream?:false}):string 通过输入参数解码后输出对应文本。 - 参数： | 参数名 | 类型 | 必填 | 说明 | | -------- | -------- | -------- | -------- | - | input | Uint8Array | 是 | 符合格式需要解码的数组。 | + | input | Unit8Array | 是 | 符合格式需要解码的数组。 | | options | Object | 否 | 解码相关选项参数。 | **表2** options | 名称 | 参数类型 | 必填 | 说明 | | -------- | -------- | -------- | -------- | - | stream | boolean | 否 | 在随后的decode()调用中是否跟随附加数据块，如果以块的形式处理数据，则设置为true；如果处理最后的数据块或数据未分块，则设置为false。默认为false。 | + | stream | boolean | 否 | 在随后的decode()调用中是否跟随附加数据块。如果以块的形式处理数据，则设置为true；如果处理最后的数据块或数据未分块，则设置为false。默认为false。 | - 返回值： | 类型 | 说明 | @@ -228,7 +232,7 @@ TextEncoder的构造函数。 ### encode -encode(input?: string): Uint8Array +encode(input?:string):Uint8Array 通过输入参数编码后输出对应文本。 @@ -252,7 +256,7 @@ encode(input?: string): Uint8Array ### encodeInto -encodeInto(input: string, dest: Uint8Array,):{ read: number; written: number } +encodeInto(input:string, dest:Uint8Array, ):{ read:number; written:number } 放置生成的UTF-8编码文本。 @@ -274,3 +278,2054 @@ encodeInto(input: string, dest: Uint8Array,):{ read: number; written: number } this.dest = new Uint8Array(buffer); var result = that.encodeInto("abcd", this.dest); ``` + +## RationalNumber8+ + + +### constructor8+ + +constructor(numerator:number,denominator:number) + +RationalNumber的构造函数。 + +- 参数： + | 参数名 | 类型 | 必填 | 说明 | + | -------- | -------- | -------- | -------- | + | numerator | number | 是 | 分子，整数类型。 | + | denominator | number | 是 | 分母，整数类型。 | + +- 示例： + ``` + var rationalNumber = new util.RationalNumber(1,2)； + ``` + + +### createRationalFromString8+ + +static createRationalFromString​(rationalString:string):RationalNumber​ + +基于给定的字符串创建一个RationalNumber对象。 + +- 参数： + | 参数名 | 类型 | 必填 | 说明 | + | -------- | -------- | -------- | -------- | + | rationalString | string | 是 | 字符串格式。 | + +- 返回值： + | 类型 | 说明 | + | -------- | -------- | + | object | 返回有理数类的对象。 | + +- 示例： + ``` + var rationalNumber = new util.RationalNumber(1,2); + var rational = rationalNumer.creatRationalFromString("3/4"); + ``` + + +### compareTo8+ + +compareTo​(another:RationalNumber):number​ + +将当前的RationalNumber对象与给定的对象进行比较。 + +- 参数： + | 参数名 | 类型 | 必填 | 说明 | + | -------- | -------- | -------- | -------- | + | another | RationalNumber | 是 | 其他的有理数对象。 | + +- 返回值： + | 类型 | 说明 | + | -------- | -------- | + | number | 如果两个对象相等，则返回0；如果给定对象小于当前对象，则返回1；如果给定对象大于当前对象，则返回-1。 | + +- 示例： + ``` + var rationalNumber = new util.RationalNumber(1,2); + var rational = rationalNumer.creatRationalFromString("3/4"); + var result = rationalNumber.compareTo(rational); + ``` + + +### valueOf8+ + +valueOf():number + +以整数形式或者浮点数的形式获取当前RationalNumber对象的值。 + +- 返回值： + | 类型 | 说明 | + | -------- | -------- | + | number | 返回整数或者浮点数的值。 | + +- 示例： + ``` + var rationalNumber = new util.RationalNumber(1,2); + var result = rationalNumber.valueOf(); + ``` + + +### equals8+ + +equals​(obj:Object):boolean + +将当前的RationalNumber对象与给定的对象进行比较是否相等。 + +- 参数： + | 参数名 | 类型 | 必填 | 说明 | + | -------- | -------- | -------- | -------- | + | object | Object | 是 | 其他类型对象。 | + +- 返回值： + | 类型 | 说明 | + | -------- | -------- | + | boolean | 如果给定对象与当前对象相同，则返回true；否则返回false。 | + +- 示例： + ``` + var rationalNumber = new util.RationalNumber(1,2); + var rational = rationalNumer.creatRationalFromString("3/4"); + var result = rationalNumber.equals(rational); + ``` + + +### getCommonDivisor8+ + +static getCommonDivisor​(number1:number,number2:number):number + +获取两个指定整数的最大公约数。 + +- 参数： + | 参数名 | 类型 | 必填 | 说明 | + | -------- | -------- | -------- | -------- | + | number1 | number | 是 | 整数类型。 | + | number2 | number | 是 | 整数类型。 | + +- 返回值： + | 类型 | 说明 | + | -------- | -------- | + | number | 返回两个给定数字的最大公约数。 | + +- 示例： + ``` + var rationalNumber = new util.RationalNumber(1,2); + var result = rationalNumber.getCommonDivisor(4,6); + ``` + + +### getNumerator8+ + +getNumerator​():number + +获取当前RationalNumber对象的分子。 + +- 返回值： + | 类型 | 说明 | + | -------- | -------- | + | number | 返回RationalNumber对象的分子的值。 | + +- 示例： + ``` + var rationalNumber = new util.RationalNumber(1,2); + var result = rationalNumber.getNumerator(); + ``` + + +### getDenominator8+ + +getDenominator​():number + +获取当前RationalNumber对象的分母。 + +- 返回值： + | 类型 | 说明 | + | -------- | -------- | + | number | 返回RationalNumber对象的分母的值。 | + +- 示例： + ``` + var rationalNumber = new util.RationalNumber(1,2); + var result = rationalNumber.getDenominator(); + ``` + + +### isZero8+ + +isZero​():boolean + +检查当前RationalNumber对象是否为0。 + +- 返回值： + | 类型 | 说明 | + | -------- | -------- | + | boolean | 如果当前对象表示的值为0，则返回true；否则返回false。 | + +- 示例： + ``` + var rationalNumber = new util.RationalNumber(1,2); + var result = rationalNumber.isZero(); + ``` + + +### isNaN8+ + +isNaN​():boolean + +检查当前RationalNumber对象是否表示非数字(NaN)值。 + +- 返回值： + | 类型 | 说明 | + | -------- | -------- | + | boolean | 如果分母和分子都为0，则返回true；否则返回false。 | + +- 示例： + ``` + var rationalNumber = new util.RationalNumber(1,2); + var result = rationalNumber.isNaN(); + ``` + + +### isFinite8+ + +isFinite​():boolean + +检查当前RationalNumber对象是否表示一个有限值。 + +- 返回值： + | 类型 | 说明 | + | -------- | -------- | + | boolean | 如果分母不为0，则返回true；否则返回false。 | + +- 示例： + ``` + var rationalNumber = new util.RationalNumber(1,2); + var result = rationalNumber.isFinite(); + ``` + + +### toString8+ + +toString​():string + +获取当前RationalNumber对象的字符串表示形式。 + +- 返回值： + | 类型 | 说明 | + | -------- | -------- | + | string | 返回Numerator/Denominator格式的字符串，例如3/5，如果当前对象的分子和分母都为0，则返回NaN。 | + +- 示例： + ``` + var rationalNumber = new util.RationalNumber(1,2); + var result = rationalNumber.toString(); + ``` + +## LruBuffer8+ + + +### 属性 + +| 名称 | 类型 | 可读 | 可写 | 说明 | +| -------- | -------- | -------- | -------- | -------- | +| length | number | 是 | 否 | 当前缓冲区中值的总数。 | + +- 示例： + ``` + var pro = new util.LruBuffer(); + pro.put(2,10); + pro.put(1,8); + var result = pro.length; + ``` + + +### constructor8+ + +constructor(capacity?:number) + +默认构造函数用于创建一个新的LruBuffer实例，默认容量为64。 + +- 参数： + | 参数名 | 类型 | 必填 | 说明 | + | -------- | -------- | -------- | -------- | + | capacity | number | 否 | 指示要为缓冲区自定义的容量。 | + +- 示例： + ``` + var lrubuffer= new util.LruBuffer()； + ``` + + +### updateCapacity8+ + +updateCapacity(newCapacity:number):void + +将缓冲区容量更新为指定容量，如果newCapacity小于或等于0，则抛出异常。 + +- 参数： + | 参数名 | 类型 | 必填 | 说明 | + | -------- | -------- | -------- | -------- | + | newCapacity | number | 是 | 指示要为缓冲区自定义的容量。 | + +- 示例： + ``` + var pro = new util.LruBuffer(); + var result = pro.updateCapacity(100); + ``` + + +### toString8+ + +toString():string + +返回对象的字符串表示形式。 + +- 返回值： + | 类型 | 说明 | + | -------- | -------- | + | string | 返回对象的字符串表示形式。 | + +- 示例： + ``` + var pro = new util.LruBuffer(); + pro.put(2,10); + pro.get(2); + pro.remove(20); + var result = pro.toString(); + ``` + + +### getCapacity8+ + +getCapacity():number + +获取当前缓冲区的容量。 + +- 返回值： + | 类型 | 说明 | + | -------- | -------- | + | number | 返回当前缓冲区的容量。 | + +- 示例： + ``` + var pro = new util.LruBuffer(); + var result = pro.getCapacity(); + ``` + + +### clear8+ + +clear():void + +从当前缓冲区清除键值对。后续会调用afterRemoval()方法执行后续操作。 + +- 示例： + ``` + var pro = new util.LruBuffer(); + pro.put(2,10); + var result = pro.size(); + pro.clear(); + ``` + + +### getCreateCount8+ + +getCreateCount():number + +获取createDefault()返回值的次数。 + +- 返回值： + | 类型 | 说明 | + | -------- | -------- | + | number | 返回createDefault()返回值的次数。 | + +- 示例： + ``` + var pro = new util.LruBuffer(); + pro.put(1,8); + var result = pro.getCreateCount(); + ``` + + +### getMissCount8+ + +getMissCount():number + +获取查询值不匹配的次数。 + +- 返回值： + | 类型 | 说明 | + | -------- | -------- | + | number | 返回查询值不匹配的次数。 | + +- 示例： + ``` + var pro = new util.LruBuffer(); + pro.put(2,10); + pro.get(2) + var result = pro.getMissCount(); + ``` + + +### getRemovalCount8+ + +getRemovalCount():number + +获取从缓冲区中逐出值的次数。 + +- 返回值： + | 类型 | 说明 | + | -------- | -------- | + | number | 返回从缓冲区中驱逐的次数。 | + +- 示例： + ``` + var pro = new util.LruBuffer(); + pro.put(2,10); + pro.updateCapacity(2); + pro.put(50,22); + var result = pro.getRemovalCount(); + ``` + + +### getMatchCount8+ + +getMatchCount():number + +获取查询值匹配成功的次数。 + +- 返回值： + | 类型 | 说明 | + | -------- | -------- | + | number | 返回查询值匹配成功的次数。 | + +- 示例： + ``` + var pro = new util.LruBuffer(); + pro.put(2,10); + pro.get(2); + var result = pro.getMatchCount(); + ``` + + +### getPutCount8+ + +getPutCount():number + +获取将值添加到缓冲区的次数。 + +- 返回值： + | 类型 | 说明 | + | -------- | -------- | + | number | 返回将值添加到缓冲区的次数。 | + +- 示例： + ``` + var pro = new util.LruBuffer(); + pro.put(2,10); + var result = pro.getPutCount(); + ``` + + +### isEmpty8+ + +isEmpty():boolean + +检查当前缓冲区是否为空。 + +- 返回值： + | 类型 | 说明 | + | -------- | -------- | + | boolean | 如果当前缓冲区不包含任何值，则返回true。 | + +- 示例： + ``` + var pro = new util.LruBuffer(); + pro.put(2,10); + var result = pro.isEmpty(); + ``` + + +### get8+ + +get(key:K):V | undefined + +表示要查询的键。 + +- 参数： + | 参数名 | 类型 | 必填 | 说明 | + | -------- | -------- | -------- | -------- | + | key | K | 是 | 要查询的键。 | + +- 返回值： + | 类型 | 说明 | + | -------- | -------- | + | V \| undefind | 如果指定的键存在于缓冲区中，则返回与键关联的值；否则返回undefined。 | + +- 示例： + ``` + var pro = new util.LruBuffer(); + pro.put(2,10); + var result = pro.get(2); + ``` + + +### put8+ + +put(key:K,value:V):V + +将键值对添加到缓冲区。 + +- 参数： + | 参数名 | 类型 | 必填 | 说明 | + | -------- | -------- | -------- | -------- | + | key | K | 是 | 要添加的密钥。 | + | value | V | 是 | 指示与要添加的键关联的值。 | + +- 返回值： + | 类型 | 说明 | + | -------- | -------- | + | V | 返回与添加的键关联的值；如果要添加的键已经存在，则返回原始值，如果键或值为空，则抛出此异常。 | + +- 示例： + ``` + var pro = new util.LruBuffer(); + var result = pro.put(2,10); + ``` + + +### values8+ + +values():V[] + +获取当前缓冲区中所有值从最近访问到最近最少访问的顺序列表 。 + +- 返回值： + | 类型 | 说明 | + | -------- | -------- | + | V [] | 按从最近访问到最近最少访问的顺序返回当前缓冲区中所有值的列表。 | + +- 示例： + ``` + var pro = new util.LruBuffer(); + pro.put(2,10); + pro.put(2,"anhu"); + pro.put("afaf","grfb"); + var result = pro.values(); + ``` + + +### keys8+ + +keys():K[] + +获取当前缓冲区中所有键从最近访问到最近最少访问的升序列表。 + +- 返回值： + | 类型 | 说明 | + | -------- | -------- | + | K [] | 按升序返回当前缓冲区中所有键的列表，从最近访问到最近最少访问。 | + +- 示例： + ``` + var pro = new util.LruBuffer(); + pro.put(2,10); + var result = pro.keys(); + ``` + + +### remove8+ + +remove(key:K):V | undefined + +从当前缓冲区中删除指定的键及其关联的值。 + +- 参数： + | 参数名 | 类型 | 必填 | 说明 | + | -------- | -------- | -------- | -------- | + | key | K | 是 | 要删除的密钥。 | + +- 返回值： + | 类型 | 说明 | + | -------- | -------- | + | V \| undefind | 返回一个包含已删除键值对的Optional对象；如果key不存在，则返回一个空的Optional对象，如果key为null，则抛出异常。 | + +- 示例： + ``` + var pro = new util.LruBuffer(); + pro.put(2,10); + var result = pro.remove(20); + ``` + + +### afterRemoval8+ + +afterRemoval(isEvict:boolean,key:K,value:V,newValue:V):void + +删除值后执行后续操作。 + +- 参数： + | 参数名 | 类型 | 必填 | 说明 | + | -------- | -------- | -------- | -------- | + | isEvict | boolean | 否 | 因容量不足而调用该方法时，参数值为true，其他情况为false。 | + | key | K | 是 | 表示删除的键。 | + | value | V | 是 | 表示删除的值。 | + | newValue | V | 否 | 如果已调用put方法并且要添加的键已经存在，则参数值是关联的新值。其他情况下参数值为空。 | + +- 示例： + ``` + var arr = []; + class ChildLruBuffer extends util.LruBuffer + { + constructor() + { + super(); + } + static getInstance() + { + if(this.instance == null) + { + this.instance = new ChildLruBuffer(); + } + return this.instance; + } + afterRemoval(isEvict, key, value, newValue) + { + if (isEvict === false) + { + arr = [key, value, newValue]; + } + } + } + ChildLruBuffer.getInstance().afterRemoval(false,10,30,null)； + ``` + + +### contains8+ + +contains(key:K):boolean + +检查当前缓冲区是否包含指定的键。 + +- 参数： + | 参数名 | 类型 | 必填 | 说明 | + | -------- | -------- | -------- | -------- | + | key | K | 是 | 表示要检查的键。 | + +- 返回值： + | 类型 | 说明 | + | -------- | -------- | + | boolean | 如果缓冲区包含指定的键，则返回 true。 | + +- 示例： + ``` + var pro = new util.LruBuffer(); + pro.put(2,10); + var result = pro.contains(20); + ``` + + +### createDefault8+ + +createDefault(key:K):V + +如果未计算特定键的值，则执行后续操作，参数表示丢失的键，返回与键关联的值。 + +- 参数： + | 参数名 | 类型 | 必填 | 说明 | + | -------- | -------- | -------- | -------- | + | key | K | 是 | 表示丢失的键。 | + +- 返回值： + | 类型 | 说明 | + | -------- | -------- | + | V | 返回与键关联的值。 | + +- 示例： + ``` + var pro = new util.LruBuffer(); + var result = pro.createDefault(50); + ``` + + +### entries8+ + +entries():IterableIterator<[K,V]> + +允许迭代包含在这个对象中的所有键值对。 + +- 返回值： + | 类型 | 说明 | + | -------- | -------- | + | [K, V] | 返回一个可迭代数组。 | + +- 示例： + ``` + var pro = new util.LruBuffer(); + pro.put(2,10); + var result = pro.entries(); + ``` + + +### [Symbol.iterator]8+ + +[Symbol.iterator]\(): IterableIterator<[K, V]> + +返回一个键值对形式的二维数组。 + +- 返回值： + | 类型 | 说明 | + | -------- | -------- | + | [K, V] | 返回一个键值对形式的二维数组。 | + +- 示例： + ``` + var pro = new util.LruBuffer(); + pro.put(2,10); + var result = pro[symbol.iterator](); + ``` + + +## Scope8+ + + +### ScopeType8+ + +用于表示范围中的值的类型。该类型的值，类型可以为ScopeComparable或number。 + +ScopeComparable类型的值需要实现compareTo方法，确保传入的数据具有可比性。 +``` +interface ScopeComparable{ + compareTo(other:ScopeComparable):boolean; +} +type ScopeType = ScopeComparable | number; +``` + + +构造新类，实现compareTo方法。后续示例代码中，均通过Temperature，获取[ScopeType](#scopetype8)的实例化对象。 + + +示例： +``` +class Temperature{ + constructor(value){ + this._temp = value; + } + comapreTo(value){ + return this._temp >= value.getTemp(); + } + getTemp(){ + return this._temp; + } + toString(){ + return this._temp.toString(); + } +} +``` + + +### constructor8+ + +constructor(lowerObj:ScopeType,upperObje:ScopeType) + +用于创建指定下限和上限的作用域实例的构造函数，返回一个Scope对象。 + +- 参数： + | 参数名 | 类型 | 必填 | 说明 | + | -------- | -------- | -------- | -------- | + | lowerObj | [ScopeType](#scopetype8) | 是 | 指定作用域实例的下限。 | + | upperObj | [ScopeType](#scopetype8) | 是 | 指定作用域实例的上限。 | + +- 示例： + ``` + var tempLower = new Temperature(30); + var tempUpper = new Temperature(40); + var range = new util.Scope(tempLower, tempUpper); + ``` + + +### toString8+ + +toString():string + +该字符串化方法返回一个包含当前范围的字符串表示形式。 + +- 返回值： + | 类型 | 说明 | + | -------- | -------- | + | string | 返回包含当前范围对象的字符串表示形式。 | + +- 示例： + ``` + var tempLower = new Temperature(30); + var tempUpper = new Temperature(40); + var range = new util.Scope(tempLower, tempUpper); + var result = range.toString(); + ``` + + +### intersect8+ + +intersect(range:Scope):Scope + +获取给定范围和当前范围的交集。 + +- 参数： + | 参数名 | 类型 | 必填 | 说明 | + | -------- | -------- | -------- | -------- | + | range | [Scope](#scope8) | 是 | 传入一个给定范围。 | + +- 返回值： + | 类型 | 说明 | + | -------- | -------- | + | [Scope](#scope8) | 返回给定范围和当前范围的交集。 | + +- 示例： + ``` + var tempLower = new Temperature(30); + var tempUpper = new Temperature(40); + var range = new util.Scope(tempLower, tempUpper); + var tempMiDF = new Temperature(35); + var tempMidS = new Temperature(39); + var rangeFir = new util.Scope(tempMiDF, tempMidS); + range.intersect(rangeFir ); + ``` + + +### intersect8+ + +intersect(lowerObj:ScopeType,upperObj:ScopeType):Scope + +获取当前范围与给定下限和上限范围的交集。 + +- 参数： + | 参数名 | 类型 | 必填 | 说明 | + | -------- | -------- | -------- | -------- | + | lowerObj | [ScopeType](#scopetype8) | 是 | 给定范围的下限。 | + | upperObj | [ScopeType](#scopetype8) | 是 | 给定范围的上限。 | + +- 返回值： + | 类型 | 说明 | + | -------- | -------- | + | [Scope](#scope8) | 返回当前范围与给定下限和上限范围的交集。 | + +- 示例： + ``` + var tempLower = new Temperature(30); + var tempUpper = new Temperature(40); + var tempMiDF = new Temperature(35); + var tempMidS = new Temperature(39); + var range = new util.Scope(tempLower, tempUpper); + var result = range.intersect(tempMiDF, tempMidS)； + ``` + + +### getUpper8+ + +getUpper():ScopeType + +获取当前范围的上限。 + +- 返回值： + | 类型 | 说明 | + | -------- | -------- | + | [ScopeType](#scopetype8) | 返回当前范围的上限值。 | + +- 示例： + ``` + var tempLower = new Temperature(30); + var tempUpper = new Temperature(40); + var range = new util.Scope(tempLower, tempUpper); + var result = range.getUpper()； + ``` + + +### getLower8+ + +getLower():ScopeType + +获取当前范围的下限。 + +- 返回值： + | 类型 | 说明 | + | -------- | -------- | + | [ScopeType](#scopetype8) | 返回当前范围的下限值。 | + +- 示例： + ``` + var tempLower = new Temperature(30); + var tempUpper = new Temperature(40); + var range = new util.Scope(tempLower, tempUpper); + var result = range.getLower()； + ``` + + +### expand8+ + +expand(lowerObj:ScopeType,upperObj:ScopeType):Scope + +创建并返回包括当前范围和给定下限和上限的并集。 + +- 参数： + | 参数名 | 类型 | 必填 | 说明 | + | -------- | -------- | -------- | -------- | + | lowerObj | [ScopeType](#scopetype8) | 是 | 给定范围的下限。 | + | upperObj | [ScopeType](#scopetype8) | 是 | 给定范围的上限。 | + +- 返回值： + | 类型 | 说明 | + | -------- | -------- | + | [Scope](#scope8) | 返回当前范围和给定下限和上限的并集。 | + +- 示例： + ``` + var tempLower = new Temperature(30); + var tempUpper = new Temperature(40); + var tempMiDF = new Temperature(35); + var tempMidS = new Temperature(39); + var range = new util.Scope(tempLower, tempUpper); + var result = range.expand(tempMiDF, tempMidS)； + ``` + + +### expand8+ + +expand(range:Scope):Scope + +创建并返回包括当前范围和给定范围的并集。 + +- 参数： + | 参数名 | 类型 | 必填 | 说明 | + | -------- | -------- | -------- | -------- | + | range | [Scope](#scope8) | 是 | 传入一个给定范围。 | + +- 返回值： + | 类型 | 说明 | + | -------- | -------- | + | [Scope](#scope8) | 返回包括当前范围和给定范围的并集。 | + +- 示例： + ``` + var tempLower = new Temperature(30); + var tempUpper = new Temperature(40); + var tempMiDF = new Temperature(35); + var tempMidS = new Temperature(39); + var range = new util.Scope(tempLower, tempUpper); + var rangeFir = new util.Scope(tempMiDF, tempMidS); + var result = range.expand(rangeFir)； + ``` + + +### expand8+ + +expand(value:ScopeType):Scope + +创建并返回包括当前范围和给定值的并集。 + +- 参数： + | 参数名 | 类型 | 必填 | 说明 | + | -------- | -------- | -------- | -------- | + | value | [ScopeType](#scopetype8) | 是 | 传入一个给定值。 | + +- 返回值： + | 类型 | 说明 | + | -------- | -------- | + | [Scope](#scope8) | 返回包括当前范围和给定值的并集。 | + +- 示例： + ``` + var tempLower = new Temperature(30); + var tempUpper = new Temperature(40); + var tempMiDF = new Temperature(35); + var range = new util.Scope(tempLower, tempUpper); + var result = range.expand(tempMiDF)； + ``` + + +### contains8+ + +contains(value:ScopeType):boolean + +检查给定value是否包含在当前范围内。 + +- 参数： + | 参数名 | 类型 | 必填 | 说明 | + | -------- | -------- | -------- | -------- | + | value | [ScopeType](#scopetype8) | 是 | 传入一个给定值。 | + +- 返回值： + | 类型 | 说明 | + | -------- | -------- | + | boolean | 如果给定值包含在当前范围内返回true，否则返回false。 | + +- 示例： + ``` + var tempLower = new Temperature(30); + var tempUpper = new Temperature(40); + var tempMiDF = new Temperature(35); + var range = new util.Scope(tempLower, tempUpper); + range.contains(tempMiDF)； + ``` + + +### contains8+ + +contains(range:Scope):boolean + +检查给定range是否在当前范围内。 + +- 参数： + | 参数名 | 类型 | 必填 | 说明 | + | -------- | -------- | -------- | -------- | + | range | [Scope](#scope8) | 是 | 传入一个给定范围。 | + +- 返回值： + | 类型 | 说明 | + | -------- | -------- | + | boolean | 如果给定范围包含在当前范围内返回true，否则返回false。 | + +- 示例： + ``` + var tempLower = new Temperature(30); + var tempUpper = new Temperature(40); + var range = new util.Scope(tempLower, tempUpper); + var tempLess = new Temperature(20); + var tempMore = new Temperature(45); + var rangeSec = new util.Scope(tempLess, tempMore); + var result = range.contains(rangeSec)； + ``` + + +### clamp8+ + +clamp(value:ScopeType):ScopeType + +将给定值限定到当前范围内。 + +- 参数： + | 参数名 | 类型 | 必填 | 说明 | + | -------- | -------- | -------- | -------- | + | value | [ScopeType](#scopetype8) | 是 | 传入的给定值。 | + +- 返回值： + | 类型 | 说明 | + | -------- | -------- | + | [ScopeType](#scopetype8) | 如果传入的value小于下限，则返回lowerObj；如果大于上限值则返回upperObj；如果在当前范围内，则返回value | + +- 示例： + ``` + var tempLower = new Temperature(30); + var tempUpper = new Temperature(40); + var tempMiDF = new Temperature(35); + var range = new util.Scope(tempLower, tempUpper); + var result = range.clamp(tempMiDF)； + ``` + + +## Base648+ + + +### constructor8+ + +constructor() + +Base64的构造函数。 + +- 示例： + ``` + var base64 = new util.Base64()； + ``` + + +### encodeSync8+ + +encodeSync(src:Uint8Array):Uint8Array + +通过输入参数编码后输出对应文本。 + +- 参数： + | 参数名 | 类型 | 必填 | 说明 | + | -------- | -------- | -------- | -------- | + | src | Uint8Array | 是 | 编码输入Uint8数组。 | + +- 返回值： + | 类型 | 说明 | + | -------- | -------- | + | Uint8Array | 返回编码后新分配的Uint8数组。 | + +- 示例： + ``` + var that = new util.Base64(); + var array = new Uint8Array([115,49,51]); + var result = that.encodeSync(array); + ``` + + +### encodeToStringSync8+ + +encodeToStringSync(src:Uint8Array):string + +通过输入参数编码后输出对应文本。 + +- 参数： + | 参数名 | 类型 | 必填 | 说明 | + | -------- | -------- | -------- | -------- | + | src | Uint8Array | 是 | 编码输入Uint8数组。 | + +- 返回值： + | 类型 | 说明 | + | -------- | -------- | + | string | 返回编码后的字符串。 | + +- 示例： + ``` + var that = new util.Base64(); + var array = new Uint8Array([115,49,51]); + var result = that.encodeToStringSync(array); + ``` + + +### decodeSync8+ + +decodeSync(src:Uint8Array | string):Uint8Array + +通过输入参数解码后输出对应文本。 + +- 参数： + | 参数名 | 类型 | 必填 | 说明 | + | -------- | -------- | -------- | -------- | + | src | Uint8Array \| string | 是 | 解码输入Uint8数组或者字符串。 | + +- 返回值： + | 类型 | 说明 | + | -------- | -------- | + | Uint8Array | 返回解码后新分配的Uint8数组。 | + +- 示例： + ``` + var that = new util.Base64(); + var buff = 'czEz'; + var result = that.decodeSync(buff); + ``` + + +### encode8+ + +encode(src:Uint8Array):Promise<Uint8Array> + +通过输入参数异步编码后输出对应文本。 + +- 参数： + | 参数名 | 类型 | 必填 | 说明 | + | -------- | -------- | -------- | -------- | + | src | Uint8Array | 是 | 异步编码输入Uint8数组。 | + +- 返回值： + | 类型 | 说明 | + | -------- | -------- | + | Promise<Uint8Array> | 返回异步编码后新分配的Uint8数组。 | + +- 示例： + ``` + var that = new util.Base64(); + var array = new Uint8Array([115,49,51]); + var rarray = new Uint8Array([99,122,69,122]); + await that.encode(array).then(val=>{ + for (var i = 0; i < rarray.length; i++) { + expect(val[i]).assertEqual(rarray[i]) + } + }) + done(); + ``` + + +### encodeToString8+ + +encodeToString(src:Uint8Array):Promise<string> + +通过输入参数异步编码后输出对应文本。 + +- 参数： + | 参数名 | 类型 | 必填 | 说明 | + | -------- | -------- | -------- | -------- | + | src | Uint8Array | 是 | 异步编码输入Uint8数组。 | + +- 返回值： + | 类型 | 说明 | + | -------- | -------- | + | Promise<string> | 返回异步编码后的字符串。 | + +- 示例： + ``` + var that = new util.Base64(); + var array = new Uint8Array([115,49,51]); + await that.encodeToString(array).then(val=>{ + expect(val).assertEqual('czEz') + }) + done(); + ``` + + +### decode8+ + +decode(src:Uint8Array | string):Promise<Uint8Array> + +通过输入参数异步解码后输出对应文本。 + +- 参数： + | 参数名 | 类型 | 必填 | 说明 | + | -------- | -------- | -------- | -------- | + | src | Uint8Array \| string | 是 | 异步解码输入Uint8数组或者字符串。 | + +- 返回值： + | 类型 | 说明 | + | -------- | -------- | + | Promise<Uint8Array> | 返回异步解码后新分配的Uint8数组。 | + +- 示例： + ``` + var that = new util.Base64(); + var array = new Uint8Array([99,122,69,122]); + var rarray = new Uint8Array([115,49,51]); + await that.decode(array).then(val=>{ + for (var i = 0; i < rarray.length; i++) { + expect(val[i]).assertEqual(rarray[i]) + } + }) + done(); + ``` + + +## Types8+ + + +### constructor8+ + +constructor() + +Types的构造函数。 + +- 示例： + ``` + var type = new util.Types()； + ``` + + +### isAnyArrayBuffer8+ + +isAnyArrayBuffer(value: Object):boolean + +检查输入的value是否是ArrayBuffer类型。 + +- 参数： + | 参数名 | 类型 | 必填 | 说明 | + | -------- | -------- | -------- | -------- | + | value | Object | 是 | 待检测对象。 | + +- 返回值： + | 类型 | 说明 | + | -------- | -------- | + | boolean | 判断的结果，如果是ArrayBuffer类型为true，反之为false。 | + +- 示例： + ``` + var that = new util.Types(); + var result = that.isAnyArrayBuffer(new ArrayBuffer([])); + ``` + + +### isArrayBufferView8+ + +isArrayBufferView(value: Object):boolean + +检查输入的value是否是内置ArrayBufferView辅助类型。 + +ArrayBufferView辅助类型包括：Int8Array、Uint8Array、Uint8ClampedArray、Int16Array、Int16Array、Int32Array、Uint32Array、Float32Array、Float64Array、DataView。 + +- 参数： + | 参数名 | 类型 | 必填 | 说明 | + | -------- | -------- | -------- | -------- | + | value | Object | 是 | 待检测对象。 | + +- 返回值： + | 类型 | 说明 | + | -------- | -------- | + | boolean | 判断的结果，如果是内置包含的ArrayBufferView辅助类型为true，反之为false。 | + +- 示例： + ``` + var that = new util.Types(); + var result = that.isArrayBufferView(new Int8Array([])); + ``` + + +### isArgumentsObject8+ + +isArgumentsObject(value: Object):boolean + +检查输入的value是否是一个arguments对象类型。 + +- 参数： + | 参数名 | 类型 | 必填 | 说明 | + | -------- | -------- | -------- | -------- | + | value | Object | 是 | 待检测对象。 | + +- 返回值： + | 类型 | 说明 | + | -------- | -------- | + | boolean | 判断的结果，如果是内置包含的arguments类型为true，反之为false。 | + +- 示例： + ``` + var that = new util.Types(); + function foo() { + var result = that.isArgumentsObject(arguments); + } + var f = foo(); + ``` + + +### isArrayBuffer8+ + +isArrayBuffer(value: Object):boolean + +检查输入的value是否是一个ArrayBuffer对象类型。 + +- 参数： + | 参数名 | 类型 | 必填 | 说明 | + | -------- | -------- | -------- | -------- | + | value | Object | 是 | 待检测对象。 | + +- 返回值： + | 类型 | 说明 | + | -------- | -------- | + | boolean | 判断的结果，如果是内置包含的ArrayBuffer类型为true，反之为false。 | + +- 示例： + ``` + var that = new util.Types(); + var result = that.isArrayBuffer(new ArrayBuffer([])); + ``` + + +### isAsyncFunction8+ + +isAsyncFunction(value: Object):boolean + +检查输入的value是否是一个异步函数类型。 + +- 参数： + | 参数名 | 类型 | 必填 | 说明 | + | -------- | -------- | -------- | -------- | + | value | Object | 是 | 待检测对象。 | + +- 返回值： + | 类型 | 说明 | + | -------- | -------- | + | boolean | 判断的结果，如果是内置包含的异步函数类型为true，反之为false。 | + +- 示例： + ``` + var that = new util.Types(); + var result = that.isAsyncFunction(async function foo() {}); + ``` + + +### isBooleanObject8+ + +isBooleanObject(value: Object):boolean + +检查输入的value是否是一个Boolean对象类型。 + +- 参数： + | 参数名 | 类型 | 必填 | 说明 | + | -------- | -------- | -------- | -------- | + | value | Object | 是 | 待检测对象。 | + +- 返回值： + | 类型 | 说明 | + | -------- | -------- | + | boolean | 判断的结果，如果是内置包含的Boolean对象类型为true，反之为false。 | + +- 示例： + ``` + var that = new util.Types(); + var result = that.isBooleanObject(new Boolean(true)); + ``` + + +### isBoxedPrimitive8+ + +isBoxedPrimitive(value: Object):boolean + +检查输入的value是否是Boolean或Number或String或Symbol对象类型。 + +- 参数： + | 参数名 | 类型 | 必填 | 说明 | + | -------- | -------- | -------- | -------- | + | value | Object | 是 | 待检测对象。 | + +- 返回值： + | 类型 | 说明 | + | -------- | -------- | + | boolean | 判断的结果，如果是内置包含的Boolean或Number或String或Symbol对象类型为true，反之为false。 | + +- 示例： + ``` + var that = new util.Types(); + var result = that.isBoxedPrimitive(new Boolean(false)); + ``` + + +### isDataView8+ + +isDataView(value: Object):boolean + +检查输入的value是否是DataView类型。 + +- 参数： + | 参数名 | 类型 | 必填 | 说明 | + | -------- | -------- | -------- | -------- | + | value | Object | 是 | 待检测对象。 | + +- 返回值： + | 类型 | 说明 | + | -------- | -------- | + | boolean | 判断的结果，如果是内置包含的DataView对象类型为true，反之为false。 | + +- 示例： + ``` + var that = new util.Types(); + const ab = new ArrayBuffer(20); + var result = that.isDataView(new DataView(ab)); + ``` + + +### isDate8+ + +isDate(value: Object):boolean + +检查输入的value是否是Date类型。 + +- 参数： + | 参数名 | 类型 | 必填 | 说明 | + | -------- | -------- | -------- | -------- | + | value | Object | 是 | 待检测对象。 | + +- 返回值： + | 类型 | 说明 | + | -------- | -------- | + | boolean | 判断的结果，如果是内置包含的Date对象类型为true，反之为false。 | + +- 示例： + ``` + var that = new util.Types(); + var result = that.isDate(new Date()); + ``` + + +### isExternal8+ + +isExternal(value: Object):boolean + +检查输入的value是否是native External类型。 + +- 参数： + | 参数名 | 类型 | 必填 | 说明 | + | -------- | -------- | -------- | -------- | + | value | Object | 是 | 待检测对象。 | + +- 返回值： + | 类型 | 说明 | + | -------- | -------- | + | boolean | 判断的结果，如果是内置包含native External类型为true，反之为false。 | + +- 示例： + ``` + var that = new util.Types(); + const data = util.createExternalType(); + var result = that.isExternal(data); + ``` + + +### isFloat32Array8+ + +isFloat32Array(value: Object):boolean + +检查输入的value是否是Float32Array数组类型。 + +- 参数： + | 参数名 | 类型 | 必填 | 说明 | + | -------- | -------- | -------- | -------- | + | value | Object | 是 | 待检测对象。 | + +- 返回值： + | 类型 | 说明 | + | -------- | -------- | + | boolean | 判断的结果，如果是内置包含的Float32Array数组类型为true，反之为false。 | + +- 示例： + ``` + var that = new util.Types(); + var result = that.isFloat32Array(new Float32Array()); + ``` + + +### isFloat64Array8+ + +isFloat64Array(value: Object):boolean + +检查输入的value是否是Float64Array数组类型。 + +- 参数： + | 参数名 | 类型 | 必填 | 说明 | + | -------- | -------- | -------- | -------- | + | value | Object | 是 | 待检测对象。 | + +- 返回值： + | 类型 | 说明 | + | -------- | -------- | + | boolean | 判断的结果，如果是内置包含的Float64Array数组类型为true，反之为false。 | + +- 示例： + ``` + var that = new util.Types(); + var result = that.isFloat64Array(new Float64Array()); + ``` + + +### isGeneratorFunction8+ + +isGeneratorFunction(value: Object):boolean + +检查输入的value是否是generator函数类型。 + +- 参数： + | 参数名 | 类型 | 必填 | 说明 | + | -------- | -------- | -------- | -------- | + | value | Object | 是 | 待检测对象。 | + +- 返回值： + | 类型 | 说明 | + | -------- | -------- | + | boolean | 判断的结果，如果是内置包含的generator函数类型为true，反之为false。 | + +- 示例： + ``` + var that = new util.Types(); + var result = that.isGeneratorFunction(function* foo() {}); + ``` + + +### isGeneratorObject8+ + +isGeneratorObject(value: Object):boolean + +检查输入的value是否是generator对象类型。 + +- 参数： + | 参数名 | 类型 | 必填 | 说明 | + | -------- | -------- | -------- | -------- | + | value | Object | 是 | 待检测对象。 | + +- 返回值： + | 类型 | 说明 | + | -------- | -------- | + | boolean | 判断的结果，如果是内置包含的generator对象类型为true，反之为false。 | + +- 示例： + ``` + var that = new util.Types(); + function* foo() {} + const generator = foo(); + var result = that.isGeneratorObject(generator); + ``` + + +### isInt8Array8+ + +isInt8Array(value: Object):boolean + +检查输入的value是否是Int8Array数组类型。 + +- 参数： + | 参数名 | 类型 | 必填 | 说明 | + | -------- | -------- | -------- | -------- | + | value | Object | 是 | 待检测对象。 | + +- 返回值： + | 类型 | 说明 | + | -------- | -------- | + | boolean | 判断的结果，如果是内置包含的Int8Array数组类型为true，反之为false。 | + +- 示例： + ``` + var that = new util.Types(); + var result = that.isInt8Array(new Int8Array([])); + ``` + + +### isInt16Array8+ + +isInt16Array(value: Object):boolean + +检查输入的value是否是Int16Array数组类型。 + +- 参数： + | 参数名 | 类型 | 必填 | 说明 | + | -------- | -------- | -------- | -------- | + | value | Object | 是 | 待检测对象。 | + +- 返回值： + | 类型 | 说明 | + | -------- | -------- | + | boolean | 判断的结果，如果是内置包含的Int16Array数组类型为true，反之为false。 | + +- 示例： + ``` + var that = new util.Types(); + var result = that.isInt16Array(new Int16Array([])); + ``` + + +### isInt32Array8+ + +isInt32Array(value: Object):boolean + +检查输入的value是否是Int32Array数组类型。 + +- 参数： + | 参数名 | 类型 | 必填 | 说明 | + | -------- | -------- | -------- | -------- | + | value | Object | 是 | 待检测对象。 | + +- 返回值： + | 类型 | 说明 | + | -------- | -------- | + | boolean | 判断的结果，如果是内置包含的Int32Array数组类型为true，反之为false。 | + +- 示例： + ``` + var that = new util.Types(); + var result = that.isInt32Array(new Int32Array([])); + ``` + + +### isMap8+ + +isMap(value: Object):boolean + +检查输入的value是否是Map类型。 + +- 参数： + | 参数名 | 类型 | 必填 | 说明 | + | -------- | -------- | -------- | -------- | + | value | Object | 是 | 待检测对象。 | + +- 返回值： + | 类型 | 说明 | + | -------- | -------- | + | boolean | 判断的结果，如果是内置包含的Map类型为true，反之为false。 | + +- 示例： + ``` + var that = new util.Types(); + var result = that.isMap(new Map()); + ``` + + +### isMapIterator8+ + +isMapIterator(value: Object):boolean + +检查输入的value是否是Map的Iterator类型。 + +- 参数： + | 参数名 | 类型 | 必填 | 说明 | + | -------- | -------- | -------- | -------- | + | value | Object | 是 | 待检测对象。 | + +- 返回值： + | 类型 | 说明 | + | -------- | -------- | + | boolean | 判断的结果，如果是内置包含的Map的Iterator类型为true，反之为false。 | + +- 示例： + ``` + var that = new util.Types(); + const map = new Map(); + var result = that.isMapIterator(map.keys()); + ``` + + +### isNativeError8+ + +isNativeError(value: Object):boolean + +检查输入的value是否是Error类型。 + +- 参数： + | 参数名 | 类型 | 必填 | 说明 | + | -------- | -------- | -------- | -------- | + | value | Object | 是 | 待检测对象。 | + +- 返回值： + | 类型 | 说明 | + | -------- | -------- | + | boolean | 判断的结果，如果是内置包含的Error类型为true，反之为false。 | + +- 示例： + ``` + var that = new util.Types(); + var result = that.isNativeError(new TypeError()); + ``` + + +### isNumberObject8+ + +isNumberObject(value: Object):boolean + +检查输入的value是否是Number对象类型。 + +- 参数： + | 参数名 | 类型 | 必填 | 说明 | + | -------- | -------- | -------- | -------- | + | value | Object | 是 | 待检测对象。 | + +- 返回值： + | 类型 | 说明 | + | -------- | -------- | + | boolean | 判断的结果，如果是内置包含的Number对象类型为true，反之为false。 | + +- 示例： + ``` + var that = new util.Types(); + var result = that.isNumberObject(new Number(0)); + ``` + + +### isPromise8+ + +isPromise(value: Object):boolean + +检查输入的value是否是Promise类型。 + +- 参数： + | 参数名 | 类型 | 必填 | 说明 | + | -------- | -------- | -------- | -------- | + | value | Object | 是 | 待检测对象。 | + +- 返回值： + | 类型 | 说明 | + | -------- | -------- | + | boolean | 判断的结果，如果是内置包含的Promise类型为true，反之为false。 | + +- 示例： + ``` + var that = new util.Types(); + var result = that.isPromise(Promise.resolve(1)); + ``` + + +### isProxy8+ + +isProxy(value: Object):boolean + +检查输入的value是否是Proxy类型。 + +- 参数： + | 参数名 | 类型 | 必填 | 说明 | + | -------- | -------- | -------- | -------- | + | value | Object | 是 | 待检测对象。 | + +- 返回值： + | 类型 | 说明 | + | -------- | -------- | + | boolean | 判断的结果，如果是内置包含的Proxy类型为true，反之为false。 | + +- 示例： + ``` + var that = new util.Types(); + const target = {}; + const proxy = new Proxy(target, {}); + var result = that.isProxy(proxy); + ``` + + +### isRegExp8+ + +isRegExp(value: Object):boolean + +检查输入的value是否是RegExp类型。 + +- 参数： + | 参数名 | 类型 | 必填 | 说明 | + | -------- | -------- | -------- | -------- | + | value | Object | 是 | 待检测对象。 | + +- 返回值： + | 类型 | 说明 | + | -------- | -------- | + | boolean | 判断的结果，如果是内置包含的RegExp类型为true，反之为false。 | + +- 示例： + ``` + var that = new util.Types(); + var result = that.isRegExp(new RegExp('abc')); + ``` + + +### isSet8+ + +isSet(value: Object):boolean + +检查输入的value是否是Set类型。 + +- 参数： + | 参数名 | 类型 | 必填 | 说明 | + | -------- | -------- | -------- | -------- | + | value | Object | 是 | 待检测对象。 | + +- 返回值： + | 类型 | 说明 | + | -------- | -------- | + | boolean | 判断的结果，如果是内置包含的Set类型为true，反之为false。 | + +- 示例： + ``` + var that = new util.Types(); + var result = that.isSet(new Set()); + ``` + + +### isSetIterator8+ + +isSetIterator(value: Object):boolean + +检查输入的value是否是Set的Iterator类型。 + +- 参数： + | 参数名 | 类型 | 必填 | 说明 | + | -------- | -------- | -------- | -------- | + | value | Object | 是 | 待检测对象。 | + +- 返回值： + | 类型 | 说明 | + | -------- | -------- | + | boolean | 判断的结果，如果是内置包含的Set的Iterator类型为true，反之为false。 | + +- 示例： + ``` + var that = new util.Types(); + const set = new Set(); + var result = that.isSetIterator(set.keys()); + ``` + + +### isStringObject8+ + +isStringObject(value: Object):boolean + +检查输入的value是否是String对象类型。 + +- 参数： + | 参数名 | 类型 | 必填 | 说明 | + | -------- | -------- | -------- | -------- | + | value | Object | 是 | 待检测对象。 | + +- 返回值： + | 类型 | 说明 | + | -------- | -------- | + | boolean | 判断的结果，如果是内置包含的String对象类型为true，反之为false。 | + +- 示例： + ``` + var that = new util.Types(); + var result = that.isStringObject(new String('foo')); + ``` + + +### isSymbolObjec8+ + +isSymbolObjec(value: Object):boolean + +检查输入的value是否是Symbol对象类型。 + +- 参数： + | 参数名 | 类型 | 必填 | 说明 | + | -------- | -------- | -------- | -------- | + | value | Object | 是 | 待检测对象。 | + +- 返回值： + | 类型 | 说明 | + | -------- | -------- | + | boolean | 判断的结果，如果是内置包含的Symbol对象类型为true，反之为false。 | + +- 示例： + ``` + var that = new util.Types(); + const symbols = Symbol('foo'); + var result = that.isSymbolObject(Object(symbols)); + ``` + + +### isTypedArray8+ + +isTypedArray(value: Object):boolean + +检查输入的value是否是TypedArray类型的辅助类型。 + +TypedArray类型的辅助类型，包括Int8Array、Uint8Array、Uint8ClampedArray、Int16Array、Uint16Array、Int32Array、Uint32Array、Float32Array、Float64Array、DataView。 + +- 参数： + | 参数名 | 类型 | 必填 | 说明 | + | -------- | -------- | -------- | -------- | + | value | Object | 是 | 待检测对象。 | + +- 返回值： + | 类型 | 说明 | + | -------- | -------- | + | boolean | 判断的结果，如果是内置包含的TypedArray包含的类型为true，反之为false。 | + +- 示例： + ``` + var that = new util.Types(); + var result = that.isTypedArray(new Float64Array([])); + ``` + + +### isUint8Array8+ + +isUint8Array(value: Object):boolean + +检查输入的value是否是Uint8Array数组类型。 + +- 参数： + | 参数名 | 类型 | 必填 | 说明 | + | -------- | -------- | -------- | -------- | + | value | Object | 是 | 待检测对象。 | + +- 返回值： + | 类型 | 说明 | + | -------- | -------- | + | boolean | 判断的结果，如果是内置包含的Uint8Array数组类型为true，反之为false。 | + +- 示例： + ``` + var that = new util.Types(); + var result = that.isUint8Array(new Uint8Array([])); + ``` + + +### isUint8ClampedArray8+ + +isUint8ClampedArray(value: Object):boolean + +检查输入的value是否是Uint8ClampedArray数组类型。 + +- 参数： + | 参数名 | 类型 | 必填 | 说明 | + | -------- | -------- | -------- | -------- | + | value | Object | 是 | 待检测对象。 | + +- 返回值： + | 类型 | 说明 | + | -------- | -------- | + | boolean | 判断的结果，如果是内置包含的Uint8ClampedArray数组类型为true，反之为false。 | + +- 示例： + ``` + var that = new util.Types(); + var result = that.isUint8ClampedArray(new Uint8ClampedArray([])); + ``` + + +### isUint16Array8+ + +isUint16Array(value: Object):boolean + +检查输入的value是否是Uint16Array数组类型。 + +- 参数： + | 参数名 | 类型 | 必填 | 说明 | + | -------- | -------- | -------- | -------- | + | value | Object | 是 | 待检测对象。 | + +- 返回值： + | 类型 | 说明 | + | -------- | -------- | + | boolean | 判断的结果，如果是内置包含的Uint16Array数组类型为true，反之为false。 | + +- 示例： + ``` + var that = new util.Types(); + var result = that.isUint16Array(new Uint16Array([])); + ``` + + +### isUint32Array8+ + +isUint32Array(value: Object):boolean + +检查输入的value是否是Uint32Array数组类型。 + +- 参数： + | 参数名 | 类型 | 必填 | 说明 | + | -------- | -------- | -------- | -------- | + | value | Object | 是 | 待检测对象。 | + +- 返回值： + | 类型 | 说明 | + | -------- | -------- | + | boolean | 判断的结果，如果是内置包含的Uint32Array数组类型为true，反之为false。 | + +- 示例： + ``` + var that = new util.Types(); + var result = that.isUint32Array(new Uint32Array([])); + ``` + + +### isWeakMap8+ + +isWeakMap(value: Object):boolean + +检查输入的value是否是WeakMap类型。 + +- 参数： + | 参数名 | 类型 | 必填 | 说明 | + | -------- | -------- | -------- | -------- | + | value | Object | 是 | 待检测对象。 | + +- 返回值： + | 类型 | 说明 | + | -------- | -------- | + | boolean | 判断的结果，如果是内置包含的WeakMap类型为true，反之为false。 | + +- 示例： + ``` + var that = new util.Types(); + var result = that.isWeakMap(new WeakMap()); + ``` + + +### isWeakSet8+ + +isWeakSet(value: Object):boolean + +检查输入的value是否是WeakSet类型。 + +- 参数： + | 参数名 | 类型 | 必填 | 说明 | + | -------- | -------- | -------- | -------- | + | value | Object | 是 | 待检测对象。 | + +- 返回值： + | 类型 | 说明 | + | -------- | -------- | + | boolean | 判断的结果，如果是内置包含的WeakSet类型为true，反之为false。 | + +- 示例： + ``` + var that = new util.Types(); + var result = that.isWeakSet(new WeakSet()); + ``` diff --git a/zh-cn/application-dev/reference/apis/js-apis-wifi.md b/zh-cn/application-dev/reference/apis/js-apis-wifi.md index 512732d38636d4dd1b8f1ee89dab0d43e4df1d39..a790cd76c5855ea3784c7397a38659729b7d676c 100644 --- a/zh-cn/application-dev/reference/apis/js-apis-wifi.md +++ b/zh-cn/application-dev/reference/apis/js-apis-wifi.md @@ -3,23 +3,122 @@ > ![icon-note.gif](public_sys-resources/icon-note.gif) **说明：** > 本模块首批接口从API version 6开始支持。后续版本的新增接口，采用上角标单独标记接口的起始版本。 -## 导入模块 + +## 导入模块 ``` -import wifi from '@ohos.wifi_native_js'; +import wifi from '@ohos.wifi'; ``` + ## wifi.isWifiActive isWifiActive(): boolean 查询WLAN是否已激活。 -**返回值：** +- 返回值： + | **类型** | **说明** | + | -------- | -------- | + | boolean | true:已激活， false:未激活。 | + + +## wifi.scan + +scan(): boolean + +启动WLAN扫描。 + +- 返回值： + | **类型** | **说明** | + | -------- | -------- | + | boolean | true:扫描操作成功， false:扫描操作执行失败。 | + + +## wifi.getScanInfos + +getScanInfos(): Promise<Array<WifiScanInfo>> + +获取扫描结果，使用promise方式作为异步方法。 + +- 返回值： + | **类型** | **说明** | + | -------- | -------- | + | Promise< Array<[WifiScanInfo](#wifiscaninfo)> > | 返回扫描到的热点列表。 | + + +## wifi.getScanInfos + +getScanInfos(callback: AsyncCallback<Array<WifiScanInfo>>): void + +获取扫描结果，使用callback方式作为异步方法。 + +- 参数 + | **参数名** | **类型** | **必填** | **说明** | + | -------- | -------- | -------- | -------- | + | callback | AsyncCallback< Array<[WifiScanInfo](#wifiscaninfo)>> | 是 | 扫描到的热点列表结果回调函数。 | + +- 示例 + ``` + import wifi from '@ohos.wifi'; + + wifi.getScanInfos(result => { + var len = Object.keys(result).length; + console.log("wifi received scan info call back: " + len); + for (var i = 0; i < len; ++i) { + console.info("ssid: " + result[i].ssid); + console.info("bssid: " + result[i].bssid); + console.info("securityType: " + result[i].securityType); + console.info("rssi: " + result[i].rssi); + console.info("band: " + result[i].band); + console.info("frequency: " + result[i].frequency); + console.info("timestamp: " + result[i].timestamp); + } + }); + + wifi.getScanInfos().then(result => { + var len = Object.keys(result).length; + console.log("wifi received scan info promise: " + len); + for (var i = 0; i < len; ++i) { + console.info("ssid: " + result[i].ssid); + console.info("bssid: " + result[i].bssid); + console.info("securityType: " + result[i].securityType); + console.info("rssi: " + result[i].rssi); + console.info("band: " + result[i].band); + console.info("frequency: " + result[i].frequency); + console.info("timestamp: " + result[i].timestamp); + } + }); + ``` + + +## WifiScanInfo + +WLAN热点信息。 + +| **参数名** | **类型** | **读写属性** | **说明** | +| -------- | -------- | -------- | -------- | +| ssid | string | 只读 | 热点的SSID，编码格式为UTF-8。 | +| bssid | string | 只读 | 热点的BSSID。 | +| securityType | [WifiSecurityType](#wifisecuritytype) | 只读 | WLAN加密类型。 | +| rssi | number | 只读 | 热点的信号强度(dBm)。 | +| band | number | 只读 | WLAN接入点的频段。 | +| frequency | number | 只读 | WLAN接入点的频率。 | +| timestamp | number | 只读 | 时间戳。 | + + +## WifiSecurityType + +表示加密类型的枚举。 + +| **名称** | **默认值** | **说明** | +| -------- | -------- | -------- | +| WIFI_SEC_TYPE_INVALID | 0 | 无效加密类型。 | +| WIFI_SEC_TYPE_OPEN | 1 | 开放加密类型。 | +| WIFI_SEC_TYPE_WEP | 2 | Wired Equivalent Privacy (WEP)加密类型。 | +| WIFI_SEC_TYPE_PSK | 3 | Pre-shared key (PSK)加密类型。 | +| WIFI_SEC_TYPE_SAE | 4 | Simultaneous Authentication of Equals (SAE)加密类型。 | -| **类型** | **说明** | -| -------- | ---------------------------- | -| boolean | true:已激活， false:未激活。 | ## wifi.getSignalLevel @@ -27,98 +126,347 @@ getSignalLevel(rssi: number, band: number): number 查询WLAN信号强度。 -**参数：** +- 参数： + | **参数名** | **类型** | **必填** | **说明** | + | -------- | -------- | -------- | -------- | + | rssi | number | 是 | 热点的信号强度(dBm)。 | + | band | number | 是 | WLAN接入点的频段。 | -| **参数名** | **类型** | **必填** | **说明** | -| ---------- | -------- | -------- | --------------------- | -| rssi | number | 是 | 热点的信号强度(dBm)。 | -| band | number | 是 | WLAN接入点的频段。 | +- 返回值： + | **类型** | **说明** | + | -------- | -------- | + | number | 信号强度，取值范围为[0, 4]。 | -**返回值：** -| **类型** | **说明** | -| -------- | ---------------------------- | -| number | 信号强度，取值范围为[0, 4]。 | +## wifi.getIpInfo7+ -## wifi.scan +getIpInfo(): IpInfo -scan(): boolean +获取IP信息。 -启动WLAN扫描。 +- 返回值： + | **类型** | **说明** | + | -------- | -------- | + | [IpInfo](#ipinfo) | 返回IP信息。 | -**返回值：** -| **类型** | **说明** | -| -------- | -------------------------------------------- | -| boolean | true:扫描操作成功， false:扫描操作执行失败。 | +## IpInfo -## wifi.getScanInfos +IP信息。 -getScanInfos(): Promise> +| **参数名** | **类型** | **读写属性** | **说明** | +| -------- | -------- | -------- | -------- | +| ipAddress | number | 只读 | IP地址。 | +| gateway | number | 只读 | 网关。 | +| netmask | number | 只读 | 掩码。 | +| primaryDns | number | 只读 | 主DNS服务器IP地址。 | +| secondDns | number | 只读 | 备DNS服务器IP地址。 | +| serverIp | number | 只读 | DHCP服务端IP地址。 | +| leaseDuration | number | 只读 | IP地址租用时长。 | -获取扫描结果，使用promise方式作为异步方法。 -**返回值：** +## wifi.isConnected7+ -| **类型** | **说明** | -| ------------------------------------------------ | ---------------------- | -| Promise< Array\<[WifiScanInfo](#wifiscaninfo)> > | 返回扫描到的热点列表。 | +isConnected(): boolean -## wifi.getScanInfos +查询WLAN是否已连接。 -getScanInfos(callback: AsyncCallback>): void +- 返回值： + | **类型** | **说明** | + | -------- | -------- | + | boolean | true:已连接， false:未连接。 | -获取扫描结果，使用callback方式作为异步方法。 -| **参数名** | **类型** | **必填** | **说明** | -| ---------- | ----------------------------------------------------- | -------- | ------------------------------ | -| callback | AsyncCallback< Array\<[WifiScanInfo](#wifiscaninfo)>> | 是 | 扫描到的热点列表结果回调函数。 | +## wifi.getLinkedInfo7+ -**示例：** +getLinkedInfo(): Promise<WifiLinkedInfo> -``` -import wifi from '@ohos.wifi_native_js'; - - -wifi.getScanInfos(result => { - var len = Object.keys(result).length; - console.log("received scan info size: " + len); - for (var i = 0; i < len; ++j) { - console.info("ssid: " + result[i].ssid); - console.info("bssid: " + result[i].bssid); - console.info("securityType: " + result[i].securityType); - console.info("rssi: " + result[i].rssi); - console.info("band: " + result[i].band); - console.info("frequency: " + result[i].frequency); - console.info("timestamp: " + result[i].timestamp); - } -}); - -wifi.getScanInfos().then(result => { - var len = Object.keys(result).length; - console.log("received scan info size: " + len); - for (var i = 0; i < len; ++i) { - console.info("ssid: " + result[i].ssid); - console.info("bssid: " + result[i].bssid); - console.info("securityType: " + result[i].securityType); - console.info("rssi: " + result[i].rssi); - console.info("band: " + result[i].band); - console.info("frequency: " + result[i].frequency); - console.info("timestamp: " + result[i].timestamp); - } -}); -``` +获取WLAN连接信息，使用promise方式作为异步方法。 -## WifiScanInfo +- 返回值： + | 类型 | 说明 | + | -------- | -------- | + | Promise<[WifiLinkedInfo](#wifilinkedinfo)> | 返回WLAN连接的相关信息。 | -WLAN热点信息。 -| **参数名** | **类型** | **读写属性** | **说明** | -| ------------ | ---------------- | ------------ | ----------------------------- | -| ssid | string | 只读 | 热点的SSID，编码格式为UTF-8。 | -| bssid | string | 只读 | 热点的BSSID。 | -| securityType | WifiSecurityType | 只读 | WLAN加密类型。 | -| rssi | number | 只读 | 热点的信号强度(dBm)。 | -| band | number | 只读 | WLAN接入点的频段。 | -| frequency | number | 只读 | WLAN接入点的频率。 | -| timestamp | number | 只读 | 时间戳。 | \ No newline at end of file +## wifi.getLinkedInfo7+ + +getLinkedInfo(callback: AsyncCallback<WifiLinkedInfo>): void + +获取WLAN连接信息，使用callback方式作为异步方法。 + +- 参数 + | 参数名 | 类型 | 必填 | 说明 | + | -------- | -------- | -------- | -------- | + | callback | AsyncCallback<[WifiLinkedInfo](#wifilinkedinfo)> | 是 | 获取WLAN连接信息结果回调函数。 | + +- 示例 + ``` + import wifi from '@ohos.wifi'; + + wifi.getLinkedInfo(data => { + console.info("get wifi linked info [callback]: " + JSON.stringify(data)); + }); + + wifi.getLinkedInfo().then(data => { + console.info("get wifi linked info [promise]: " + JSON.stringify(data)); + }).catch(error => { + console.info("linked info promise then error"); + }); + ``` + + +## WifiLinkedInfo + +提供WLAN连接的相关信息。 + +| 参数名 | 类型 | 读写属性 | 说明 | +| -------- | -------- | -------- | -------- | +| ssid | string | 只读 | 热点的SSID，编码格式为UTF-8。 | +| bssid | string | 只读 | 热点的BSSID。 | +| rssi | number | 只读 | 热点的信号强度(dBm)。 | +| band | number | 只读 | WLAN接入点的频段。 | +| linkSpeed | number | 只读 | WLAN接入点的速度。 | +| frequency | number | 只读 | WLAN接入点的频率。 | +| isHidden | boolean | 只读 | WLAN接入点是否是隐藏网络。 | +| isRestricted | boolean | 只读 | WLAN接入点是否限制数据量。 | +| macAddress | string | 只读 | 设备的MAC地址。 | +| ipAddress | number | 只读 | WLAN连接的IP地址。 | +| connState | ConnState | 只读 | WLAN连接状态。 | + + +## ConnState + +表示WLAN连接状态的枚举。 + +| 名称 | 默认值 | 说明 | +| -------- | -------- | -------- | +| SCANNING | 0 | 设备正在搜索可用的AP。 | +| CONNECTING | 1 | 正在建立WLAN连接。 | +| AUTHENTICATING | 2 | WLAN连接正在认证中。 | +| OBTAINING_IPADDR | 3 | 正在获取WLAN连接的IP地址。 | +| CONNECTED | 4 | WLAN连接已建立。 | +| DISCONNECTING | 5 | WLAN连接正在断开。 | +| DISCONNECTED | 6 | WLAN连接已断开。 | +| UNKNOWN | 7 | WLAN连接建立失败。 | + + +## wifi.getCountryCode7+ + +getCountryCode(): string + +获取国家码信息。 + +- 返回值： + | **类型** | **说明** | + | -------- | -------- | + | string | 国家码。 | + + +## wifi.isFeatureSupported7+ + +isFeatureSupported(featureId: number): boolean + +判断设备是否支持相关WLAN特性。 + +- 参数： + | **参数名** | **类型** | 必填 | **说明** | + | -------- | -------- | -------- | -------- | + | featureId | number | 是 | 特性ID值。 | + +- 返回值： + | **类型** | **说明** | + | -------- | -------- | + | boolean | true:支持， false:不支持。 | + +- 特性ID值枚举。 + | 枚举值 | 说明 | + | -------- | -------- | + | 0x0001 | 基础结构模式特性。 | + | 0x0002 | 5 GHz带宽特性。 | + | 0x0004 | GAS/ANQP特性。 | + | 0x0008 | Wifi-Direct特性。 | + | 0x0010 | Soft AP特性。 | + | 0x0040 | Wi-Fi AWare组网特性。 | + | 0x8000 | AP STA共存特性。 | + | 0x8000000 | WPA3-Personal SAE特性。 | + | 0x10000000 | WPA3-Enterprise Suite-B | + | 0x20000000 | 增强开放特性。 | + + +## wifi.on('wifiStateChange')7+ + +on(type: "wifiStateChange", callback: Callback<number>): void + +注册WLAN状态改变事件。 + +- 参数 + | **参数名** | **类型** | **必填** | **说明** | + | -------- | -------- | -------- | -------- | + | type | string | 是 | 固定填"wifiStateChange"字符串 | + | callback | Callback<number> | 是 | 状态改变回调函数。 | + +- 状态改变事件的枚举。 + | **枚举值** | **说明** | + | -------- | -------- | + | 0 | 未激活。 | + | 1 | 已激活。 | + | 2 | 激活中。 | + | 3 | 去激活中。 | + + +## wifi.off('wifiStateChange')7+ + +off(type: "wifiStateChange", callback?: Callback<number>): void + +取消注册WLAN状态改变事件。 + +- 参数 + | **参数名** | **类型** | **必填** | **说明** | + | -------- | -------- | -------- | -------- | + | type | string | 是 | 固定填"wifiStateChange"字符串 | + | callback | Callback<number> | 否 | 状态改变回调函数。如果callback不填，将去注册该事件关联的所有回调函数。 | + +- 示例 + ``` + import wifi from '@ohos.wifi'; + import { EventListener } from '@ohos.wifi'; + + var WIFI_POWER_STATE = "wifiStateChange"; + var listener = new EventListener(); + + var recvPowerNotifyFunc = result => { + console.info("power state receive event: " + result); + } + + // Register event + listener.on(WIFI_POWER_STATE, recvPowerNotifyFunc); + + // Unregister event + listener.off(WIFI_POWER_STATE, recvPowerNotifyFunc); + ``` + + +## wifi.on('wifiConnectionChange')7+ + +on(type: "wifiConnectionChange", callback: Callback<number>): void + +注册WLAN连接状态改变事件。 + +- 参数 + | **参数名** | **类型** | **必填** | **说明** | + | -------- | -------- | -------- | -------- | + | type | string | 是 | 固定填"wifiConnectionChange"字符串 | + | callback | Callback<number> | 是 | 状态改变回调函数。 | + +- 连接状态改变事件的枚举。 + | **枚举值** | **说明** | + | -------- | -------- | + | 0 | 已断开。 | + | 1 | 已连接。 | + + +## wifi.off('wifiConnectionChange')7+ + +off(type: "wifiConnectionChange", callback?: Callback<number>): void + +取消注册WLAN连接状态改变事件。 + +- 参数 + | **参数名** | **类型** | **必填** | **说明** | + | -------- | -------- | -------- | -------- | + | type | string | 是 | 固定填"wifiConnectionChange"字符串 | + | callback | Callback<number> | 否 | 连接状态改变回调函数。如果callback不填，将去注册该事件关联的所有回调函数。 | + + +## wifi.on('wifiScanStateChange')7+ + +on(type: "wifiScanStateChange", callback: Callback<number>): void + +注册扫描状态改变事件。 + +- 参数 + | **参数名** | **类型** | **必填** | **说明** | + | -------- | -------- | -------- | -------- | + | type | string | 是 | 固定填"wifiScanStateChange"字符串 | + | callback | Callback<number> | 是 | 状态改变回调函数。 | + +- 扫描状态改变事件的枚举。 + | **枚举值** | **说明** | + | -------- | -------- | + | 0 | 扫描失败。 | + | 1 | 扫描成功。 | + + +## wifi.off('wifiScanStateChange')7+ + +off(type: "wifiScanStateChange", callback?: Callback<number>): void + +取消注册扫描状态改变事件。 + +- 参数 + +| **参数名** | **类型** | **必填** | **说明** | +| -------- | -------- | -------- | -------- | +| type | string | 是 | 固定填"wifiScanStateChange"字符串 | +| callback | Callback<number> | 否 | 状态改变回调函数。如果callback不填，将去注册该事件关联的所有回调函数。 | + + +## wifi.on('wifiRssiChange')7+ + +on(type: "wifiRssiChange", callback: Callback<number>): void + +注册RSSI状态改变事件。 + +- 参数 + | **参数名** | **类型** | **必填** | **说明** | + | -------- | -------- | -------- | -------- | + | type | string | 是 | 固定填"wifiRssiChange"字符串 | + | callback | Callback<number> | 是 | 状态改变回调函数，返回以dBm为单位的RSSI值。 | + + +## wifi.off('wifiRssiChange')7+ + +off(type: "wifiRssiChange", callback?: Callback<number>): void + +取消注册RSSI状态改变事件。 + +- 参数 + | **参数名** | **类型** | **必填** | **说明** | + | -------- | -------- | -------- | -------- | + | type | string | 是 | 固定填"wifiRssiChange"字符串 | + | callback | Callback<number> | 否 | 状态改变回调函数。如果callback不填，将去注册该事件关联的所有回调函数。 | + + +## wifi.on('hotspotStateChange')7+ + +on(type: "hotspotStateChange", callback: Callback<number>): void + +注册热点状态改变事件。 + +- 参数 + | **参数名** | **类型** | **必填** | **说明** | + | -------- | -------- | -------- | -------- | + | type | string | 是 | 固定填"hotspotStateChange"字符串 | + | callback | Callback<number> | 是 | 状态改变回调函数。 | + +- 热点状态改变事件的枚举。 + | **枚举值** | **说明** | + | -------- | -------- | + | 0 | 未激活。 | + | 1 | 已激活。 | + | 2 | 激活中。 | + | 3 | 去激活中。 | + + +## wifi.off('hotspotStateChange')7+ + +off(type: "hotspotStateChange", callback?: Callback<number>): void + +取消注册热点状态改变事件。 + +- 参数 + | **参数名** | **类型** | **必填** | **说明** | + | -------- | -------- | -------- | -------- | + | type | string | 是 | 固定填"hotspotStateChange"字符串 | + | callback | Callback<number> | 否 | 状态改变回调函数。如果callback不填，将去注册该事件关联的所有回调函数。 | diff --git a/zh-cn/application-dev/reference/apis/js-apis-xml.md b/zh-cn/application-dev/reference/apis/js-apis-xml.md new file mode 100644 index 0000000000000000000000000000000000000000..ab941b90410da1cfc263da8c126cd8c1f2037d98 --- /dev/null +++ b/zh-cn/application-dev/reference/apis/js-apis-xml.md @@ -0,0 +1,561 @@ +# xml文本转换 + +> ![icon-note.gif](public_sys-resources/icon-note.gif) **说明：** +> 本模块首批接口从API version 8开始支持。后续版本的新增接口，采用上角标单独标记接口的起始版本。 + + +## 导入模块 + +``` +import convertXml from '@ohos.convertxml' +``` + + +## 权限 + +无 + + +## ConvertXML + + +### convert + +convert(xml: string, options?: ConvertOptions) : Object + +转化xml文本为JavaScript对象。 + + +- 参数： + | 参数名 | 类型 | 必填 | 说明 | + | -------- | -------- | -------- | -------- | + | xml | string | 是 | 传入的xml文本, | + | options | [ConvertOptions](#convertoptions) | 否 | 用户可进行的选项 | + +- 返回值： + | 类型 | 说明 | + | -------- | -------- | + | string | 处理后返回的JavaScript对象。 | + +- 示例： + ``` + import convertXml from '@ohos.convertxml' + var xml = + '' + + '' + + ' Happy' + + ' Work' + + ' Play' + + ''; + var convertxml = new convertXml.ConvertXML(); + var result1 = convertxml.convert(xml, {compact: false, spaces: 0}); + console.log(result1) + ``` + + +## ConvertOptions + +| 名称 | 参数类型 | 必填 | 说明 | +| -------- | -------- | -------- | -------- | +| trim | boolean | 否 | 是否修剪位于文本前后的空白字符，默认false。 | +| ignoreDeclaration | boolean | 否 | 是否忽略xml写入声明指示，默认false。 | +| ignoreInstruction | boolean | 否 | 是否忽略xml的写入处理指令，默认false。 | +| ignoreAttributes | boolean | 否 | 是否跨多行打印属性并缩进属性，默认false。 | +| ignoreComment | boolean | 否 | 是否忽略元素的注释信息，默认false。 | +| ignoreCdata | boolean | 否 | 是否忽略元素的CData信息，默认false。 | +| ignoreDoctype | boolean | 否 | 是否忽略元素的Doctype信息，默认false。 | +| ignoreText | boolean | 否 | 是否忽略元素的文本信息，默认false。 | +| declarationKey | string | 否 | 用于输出对象中declaration的属性键的名称，默认_declaration。 | +| instructionKey | string | 否 | 用于输出对象中instruction的属性键的名称，默认_instruction。 | +| attributesKey | string | 否 | 用于输出对象中attributes的属性键的名称，默认_attributes。 | +| textKey | string | 否 | 用于输出对象中text的属性键的名称，默认_text。 | +| cdataKey | string | 否 | 用于输出对象中cdata的属性键的名称，默认_cdata。 | +| doctypeKey | string | 否 | 用于输出对象中doctype的属性键的名称，默认_doctype。 | +| commentKey | string | 否 | 用于输出对象中comment的属性键的名称，默认_comment。 | +| parentKey | string | 否 | 用于输出对象中parent的属性键的名称，默认_parent。 | +| typeKey | string | 否 | 用于输出对象中type的属性键的名称，默认_type。 | +| nameKey | string | 否 | 用于输出对象中name的属性键的名称，默认_name。 | +| elementsKey | string | 否 | 用于输出对象中elements的属性键的名称，默认_elements。 | + + +## XmlSerializer + + +### constructor + +constructor(buffer: ArrayBuffer | DataView, encoding?: string) + +XmlSerializer的构造函数。 + +- 参数： + | 参数名 | 类型 | 必填 | 说明 | + | -------- | -------- | -------- | -------- | + | buffer | ArrayBuffer \| DataView | 是 | 用于接收写入xml信息的ArrayBuffer \| DataView内存。 | + | encoding | string | 否 | 编码格式。 | + +- 示例： + ``` + import xml form '@ohos.xml' + new XmlSerializer(buffer: ArrayBuffer | DataView, encoding?: string) + + var arrayBuffer = new ArrayBuffer(1024); + var bufView = new DataView(arrayBuffer); + var thatSer = new xml.XmlSerializer(bufView); + ``` + + +### setAttributes + +setAttributes(name: string, value: string)：void + +设置Attributes方法。 + +- 参数： + | 参数名 | 类型 | 必填 | 说明 | + | -------- | -------- | -------- | -------- | + | name | string | 是 | 属性的key值 | + | value | string | 是 | 属性的value值 | + +- 示例： + ``` + import xml form '@ohos.xml' + setAttributes(name: string, value: string) + + var thatSer = new xml.XmlSerializer(bufView); + thatSer.setAttributes("importance", "high"); + ``` + + +### addEmptyElement + +addEmptyElement(name: string): void + +写入一个空元素。 + +- 参数： + | 参数名 | 类型 | 必填 | 说明 | + | -------- | -------- | -------- | -------- | + | name | string | 是 | 该空元素的元素名 | + +- 示例： + ``` + import xml form '@ohos.xml' + addEmptyElement(name: string): void + + var thatSer = new xml.XmlSerializer(bufView); + thatSer.addEmptyElement("b"); // => + ``` + + +### setDeclaration + +setDeclaration(): void + +设置Declaration方法。 + +- 示例： + ``` + import xml form '@ohos.xml' + setDeclaration()：void + + var thatSer = new xml.XmlSerializer(bufView); + thatSer.setDeclaration() // => ; + ``` + + +### startElement + +startElement(name: string): void + +XmlSerializer的构造函数。 + +- 参数： + | 参数名 | 类型 | 必填 | 说明 | + | -------- | -------- | -------- | -------- | + | name | string | 是 | 当前元素的元素名 | + +- 示例： + ``` + import xml form '@ohos.xml' + startElement(name:string):void + + var arrayBuffer = new ArrayBuffer(1024); + var thatSer = new xml.XmlSerializer(arrayBuffer); + thatSer.startElement("notel"); + thatSer.endElement();// => ''; + ``` + + +### endElement + +endElement(): void + +设置结束元素方法。 + +- 示例： + ``` + import xml form '@ohos.xml' + endElement() + + var thatSer = new xml.XmlSerializer(bufView); + thatSer.setNamespace("h", "http://www.w3.org/TR/html4/"); + thatSer.startElement("table"); + thatSer.setAttributes("importance", "high"); + thatSer.setText("Happy"); + endElement(); // => Happy + ``` + + +### setNamespace + +setNamespace(prefix: string, namespace: string): void + +写入当前元素标记的命名空间。 + +- 参数： + | 参数名 | 类型 | 必填 | 说明 | + | -------- | -------- | -------- | -------- | + | prefix | string | 是 | 当前元素及其子元素的前缀 | + | namespace | string | 是 | 当前元素及其子元素的命名空间 | + +- 示例： + ``` + import xml form '@ohos.xml' + setNamespace(prefix:string,namespace:string):void + + var arrayBuffer = new ArrayBuffer(1024); + var thatSer = new xml.XmlSerializer(arrayBuffer); + thatSer.setDeclaration(); + thatSer.setNamespace("h", "http://www.w3.org/TR/html4/"); + thatSer.startElement("note"); + thatSer.endElement();// = >'\r\n'; + ``` + +### setCommnet + +setCommnet(text: string): void + +写入comment属性。 + +- 参数： + | 参数名 | 类型 | 必填 | 说明 | + | -------- | -------- | -------- | -------- | + | text | string | 是 | 当前元素的注释内容 | + +- 示例： + ``` + import xml form '@ohos.xml' + setCommnet(text: string):void + + var arrayBuffer = new ArrayBuffer(1024); + var thatSer = new xml.XmlSerializer(arrayBuffer); + thatSer.startElement("note"); + thatSer.setCommnet("Hi!"); + thatSer.endElement(); // => '\r\n \r\n'; + ``` + + +### setCData + +setCData(text: string): void + +写入CData属性。 + +- 参数： + | 参数名 | 类型 | 必填 | 说明 | + | -------- | -------- | -------- | -------- | + | text | string | 是 | CDate属性的内容 | + +- 示例： + ``` + import xml form '@ohos.xml' + setCData(text: string) :void + + var arrayBuffer = new ArrayBuffer(1028); + var thatSer = new xml.XmlSerializer(arrayBuffer); + thatSer.setCData('root SYSTEM') // => ''; + ``` + + +### setText + +setText(text: string): void + +设置Text方法。 + +- 参数： + | 参数名 | 类型 | 必填 | 说明 | + | -------- | -------- | -------- | -------- | + | text | string | 是 | text属性的内容 | + +- 示例： + ``` + import xml form '@ohos.xml' + setText(text: string): void + + var arrayBuffer = new ArrayBuffer(1024); + var thatSer = new xml.XmlSerializer(arrayBuffer); + thatSer.startElement("note"); + thatSer.setAttributes("importance", "high"); + thatSer.setText("Happy1"); + thatSer.endElement(); // => 'Happy1'; + ``` + + +### setDocType + +setDocType(text: string): void + +写入DocType属性。 + +- 参数： + | 参数名 | 类型 | 必填 | 说明 | + | -------- | -------- | -------- | -------- | + | text | string | 是 | DocType属性的内容 | + +- 示例： + ``` + import xml form '@ohos.xml' + setDocType(text: string):void + + var arrayBuffer = new ArrayBuffer(1024); + var thatSer = new xml.XmlSerializer(arrayBuffer); + thatSer.setDocType('root SYSTEM'); // => ''; + ``` + + +## XmlPullParser + + +### XmlPullParser + +constructor(buffer: ArrayBuffer | DataView, encoding?: string) + +创建并返回一个XmlPullParser对象，该XmlPullParser对象传参两个, 第一参数是ArrayBuffer或DataView类型的一段内存，第二个参数为文件格式（默认为UTF-8） + +- 参数： + | 参数名 | 类型 | 必填 | 说明 | + | -------- | -------- | -------- | -------- | + | buffer | ArrayBuffer \| DataView | 是 | 含有xml文本信息的ArrayBuffer 或者DataView | + | encoding | string | 否 | 编码格式（仅支持utf-8） | + +- 示例： + ``` + import xml form '@ohos.xml' + new (buffer: ArrayBuffer | DataView, encoding?: string) + + var strXml = + '' + + '' + + ' Happy' + + ' Work' + + ' Play' + + ''; + var arrayBuffer = new ArrayBuffer(strXml.length*2); + var bufView = new Uint8Array(arrayBuffer); + var strLen = strXml.length; + for (var i = 0; i < strLen; ++i) { + bufView[i] = strXml.charCodeAt(i);//设置arraybuffer方式 + } + var that = new xml.XmlPullParser(arrayBuffer); + ``` + + +### parse + +parse(option: ParseOptions): void + +该接口用于解析xml。 + +- 参数： + | 参数名 | 类型 | 必填 | 说明 | + | -------- | -------- | -------- | -------- | + | option | [ParseOptions](#parseoptions) | 是 | 用户控制以及获取解析信息的选项。 | + +- 示例： + ``` + import xml form '@ohos.xml' + parse(option: ParseOptions): void + + var strXml = + '' + + '' + + ' Happy' + + ' Work' + + ' Play' + + ''; + var arrayBuffer = new ArrayBuffer(strXml.length*2); + var bufView = new Uint8Array(arrayBuffer); + var strLen = strXml.length; + for (var i = 0; i < strLen; ++i) { + bufView[i] = strXml.charCodeAt(i); + } + var that = new xml.XmlPullParser(arrayBuffer); + var arrTag = {}; + arrTag[0] = '132'; + var i = 1; + function func(key, value){ + arrTag[i] = 'key:'+key+' value:'+ value.getDepth(); + i++; + return true; + } + var options = {supportDoctype:true, ignoreNameSpace:true, tokenValueCallbackFunction:func} + that.parse(options); + ``` + + +## ParseOptions + +xml解析选项。 + +| 名称 | 参数类型 | 必填 | 说明 | +| -------- | -------- | -------- | -------- | +| supportDoctype | boolean | 否 | 是否忽略Doctype , 默认false。 | +| ignoreNameSpace | boolean | 否 | 是否忽略NameSpace，默认false。 | +| tagValueCallbackFunction | (name: string, value: string)=> boolean | 否 | 获取tagValue回调函数。 | +| attributeValueCallbackFunction | (name: string, value: string)=> boolean | 否 | 获取attributeValue回调函数。 | +| tokenValueCallbackFunction | (eventType: [EventType](#eventtype), value: [ParseInfo](#parseinfo))=> boolean | 否 | 获取tokenValue回调函数。 | + + +## ParseInfo + +当前xml解析信息。 + + +### getColumnNumber + +getColumnNumber(): number + +获取当前行号，从1开始。 + +- 返回值： + | 类型 | 说明 | + | -------- | -------- | + | number | 返回当前行号。 | + + +### getDepth + +getDepth(): number + +获取元素的当前深度。 + +- 返回值： + | 类型 | 说明 | + | -------- | -------- | + | number | 返回元素的当前深度。 | + + +### getLineNumber + +getLineNumber(): number + +获取当前列号，从1开始。 + +- 返回值： + | 类型 | 说明 | + | -------- | -------- | + | number | 返回当前列号。 | + + +### getName + +getName(): string + +获取当前元素名称。 + +- 返回值： + | 类型 | 说明 | + | -------- | -------- | + | string | 返回当前元素名称。 | + + +### getNamespace + +getNamespace(): string + +获取当前元素的命名空间。 + +- 返回值： + | 类型 | 说明 | + | -------- | -------- | + | string | 返回当前元素的命名空间。 | + + +### getPrefix + +getPrefix(): string + +获取当前元素前缀。 + +- 返回值： + | 类型 | 说明 | + | -------- | -------- | + | string | 返回当前元素前缀。 | + + +### getText + +getText(): string + +获取当前事件的文本内容。 + +- 返回值： + | 类型 | 说明 | + | -------- | -------- | + | string | 返回当前事件的文本内容。 | + + +### isEmptyElementTag + +isEmptyElementTag(): boolean + +判断当前元素是否为空元素。 + +- 返回值： + | 类型 | 说明 | + | -------- | -------- | + | boolean | 返回true，当前元素为空元素。 | + + +### isWhitespace + +isWhitespace(): boolean + +判断当前文本事件是否仅包含空格字符。 + +- 返回值： + | 类型 | 说明 | + | -------- | -------- | + | boolean | 返回true，当前文本事件仅包含空格字符。 | + + +### getAttributeCount + +getAttributeCount(): number + +获取当前开始标记的属性数。 + +- 返回值： + | 类型 | 说明 | + | -------- | -------- | + | number | 当前开始标记的属性数。 | + + +## EventType + +事件枚举。 + +| 名称 | 枚举值 | 说明 | +| -------- | -------- | -------- | +| START_DOCUMENT | 0 | 启动文件事件。 | +| END_DOCUMENT | 1 | 结束文件事件。 | +| START_TAG | 2 | 启动标签事件。 | +| END_TAG | 3 | 结束标签事件。 | +| TEXT | 4 | 文本事件。 | +| CDSECT | 5 | CDATA事件。 | +| COMMENT | 6 | XML注释事件。 | +| DOCDECL | 7 | XML文档类型声明事件。 | +| INSTRUCTION | 8 | XML处理指令声明事件。 | +| ENTITY_REFERENCE | 9 | 实体引用事件。 | +| WHITESPACE | 10 | 空白事件。 | diff --git a/zh-cn/application-dev/reference/arkui-js/Readme-CN.md b/zh-cn/application-dev/reference/arkui-js/Readme-CN.md.md similarity index 89% rename from zh-cn/application-dev/reference/arkui-js/Readme-CN.md rename to zh-cn/application-dev/reference/arkui-js/Readme-CN.md.md index cef2064bcf24ec8b259d43e1f376b5a4b4cb8a0d..0e5e4ea6dd12656aa933b27c995c8e045a44ded3 100644 --- a/zh-cn/application-dev/reference/arkui-js/Readme-CN.md +++ b/zh-cn/application-dev/reference/arkui-js/Readme-CN.md.md @@ -1,17 +1,4 @@ -# 基于JS扩展的类Web开发范式 - -- [框架说明](js-framework.md) - - [文件组织](js-framework-file.md) - - [js标签配置](js-framework-js-tag.md) - - [app.js](js-framework-js-file.md) - - [语法](js-framework-syntax.md) - - [HML语法参考](js-framework-syntax-hml.md) - - [CSS语法参考](js-framework-syntax-css.md) - - [JS语法参考](js-framework-syntax-js.md) - - - [生命周期](js-framework-lifecycle.md) - - [资源限定与访问](js-framework-resource-restriction.md) - - [多语言支持](js-framework-multiple-languages.md) +# 基于JS扩展的类Web开发范式 - [组件](js-components.md) - [通用](js-components-common.md) @@ -119,5 +106,3 @@ - [slot插槽](js-components-custom-slot.md) - [生命周期定义](js-components-custom-lifecycle.md) -- [附录](js-appendix.md) - - [类型说明](js-appendix-types.md) \ No newline at end of file diff --git a/zh-cn/application-dev/reference/arkui-js/figures/001.gif b/zh-cn/application-dev/reference/arkui-js/figures/001.gif new file mode 100644 index 0000000000000000000000000000000000000000..b5bac4f696cc84f6e3116483209f51c08e0ad532 Binary files /dev/null and b/zh-cn/application-dev/reference/arkui-js/figures/001.gif differ diff --git "a/zh-cn/application-dev/reference/arkui-js/figures/\351\273\230\350\256\244\346\270\220\345\217\230\346\226\271\345\220\221\344\270\272\344\273\216\344\270\212\345\220\221\344\270\213\346\270\220\345\217\230.png" b/zh-cn/application-dev/reference/arkui-js/figures/111.png similarity index 100% rename from "zh-cn/application-dev/reference/arkui-js/figures/\351\273\230\350\256\244\346\270\220\345\217\230\346\226\271\345\220\221\344\270\272\344\273\216\344\270\212\345\220\221\344\270\213\346\270\220\345\217\230.png" rename to zh-cn/application-dev/reference/arkui-js/figures/111.png diff --git "a/zh-cn/application-dev/reference/arkui-js/figures/45\345\272\246\345\244\271\350\247\222\346\270\220\345\217\230.png" b/zh-cn/application-dev/reference/arkui-js/figures/222.png similarity index 100% rename from "zh-cn/application-dev/reference/arkui-js/figures/45\345\272\246\345\244\271\350\247\222\346\270\220\345\217\230.png" rename to zh-cn/application-dev/reference/arkui-js/figures/222.png diff --git a/zh-cn/application-dev/reference/arkui-js/figures/33.png b/zh-cn/application-dev/reference/arkui-js/figures/33.png deleted file mode 100644 index 7886ced8676b7de190671f1d0f08546ee0c6d23b..0000000000000000000000000000000000000000 Binary files a/zh-cn/application-dev/reference/arkui-js/figures/33.png and /dev/null differ diff --git "a/zh-cn/application-dev/reference/arkui-js/figures/\350\256\276\347\275\256\346\226\271\345\220\221\344\270\272to-right\344\270\272\344\273\216\345\267\246\345\220\221\345\217\263\346\270\220\345\217\230.png" b/zh-cn/application-dev/reference/arkui-js/figures/333.png similarity index 100% rename from "zh-cn/application-dev/reference/arkui-js/figures/\350\256\276\347\275\256\346\226\271\345\220\221\344\270\272to-right\344\270\272\344\273\216\345\267\246\345\220\221\345\217\263\346\270\220\345\217\230.png" rename to zh-cn/application-dev/reference/arkui-js/figures/333.png diff --git a/zh-cn/application-dev/reference/arkui-js/figures/44.gif b/zh-cn/application-dev/reference/arkui-js/figures/44.gif deleted file mode 100644 index 483d53003cc3be451c2c2962d60256b293aee428..0000000000000000000000000000000000000000 Binary files a/zh-cn/application-dev/reference/arkui-js/figures/44.gif and /dev/null differ diff --git "a/zh-cn/application-dev/reference/arkui-js/figures/\344\273\216\345\267\246\345\220\221\345\217\263\346\270\220\345\217\230-\351\207\215\345\244\215\346\270\220\345\217\230.png" b/zh-cn/application-dev/reference/arkui-js/figures/444.png similarity index 100% rename from "zh-cn/application-dev/reference/arkui-js/figures/\344\273\216\345\267\246\345\220\221\345\217\263\346\270\220\345\217\230-\351\207\215\345\244\215\346\270\220\345\217\230.png" rename to zh-cn/application-dev/reference/arkui-js/figures/444.png diff --git a/zh-cn/application-dev/reference/arkui-js/figures/aliceblue.png b/zh-cn/application-dev/reference/arkui-js/figures/aliceblue.png deleted file mode 100644 index 378000d344e90ab4db41869a4612daf6b60d66ab..0000000000000000000000000000000000000000 Binary files a/zh-cn/application-dev/reference/arkui-js/figures/aliceblue.png and /dev/null differ diff --git a/zh-cn/application-dev/reference/arkui-js/figures/antiquewhite.png b/zh-cn/application-dev/reference/arkui-js/figures/antiquewhite.png deleted file mode 100644 index 8e195633945b3387c46a7d295862351d4ff1fc64..0000000000000000000000000000000000000000 Binary files a/zh-cn/application-dev/reference/arkui-js/figures/antiquewhite.png and /dev/null differ diff --git a/zh-cn/application-dev/reference/arkui-js/figures/aqua.png b/zh-cn/application-dev/reference/arkui-js/figures/aqua.png deleted file mode 100644 index 3e6aaacfe1c26157294e6dedfeaa1488aeed12a3..0000000000000000000000000000000000000000 Binary files a/zh-cn/application-dev/reference/arkui-js/figures/aqua.png and /dev/null differ diff --git a/zh-cn/application-dev/reference/arkui-js/figures/aquamarine.png b/zh-cn/application-dev/reference/arkui-js/figures/aquamarine.png deleted file mode 100644 index c25a692065d473ccf9f5b6d36254787e2497fad6..0000000000000000000000000000000000000000 Binary files a/zh-cn/application-dev/reference/arkui-js/figures/aquamarine.png and /dev/null differ diff --git a/zh-cn/application-dev/reference/arkui-js/figures/azure.png b/zh-cn/application-dev/reference/arkui-js/figures/azure.png deleted file mode 100644 index 2e7cec00f9d186d76ff5cb12d47811084217cc1c..0000000000000000000000000000000000000000 Binary files a/zh-cn/application-dev/reference/arkui-js/figures/azure.png and /dev/null differ diff --git a/zh-cn/application-dev/reference/arkui-js/figures/beige.png b/zh-cn/application-dev/reference/arkui-js/figures/beige.png deleted file mode 100644 index 21f20a4220aabf9449c707291633e7b3723fe378..0000000000000000000000000000000000000000 Binary files a/zh-cn/application-dev/reference/arkui-js/figures/beige.png and /dev/null differ diff --git a/zh-cn/application-dev/reference/arkui-js/figures/bisque.png b/zh-cn/application-dev/reference/arkui-js/figures/bisque.png deleted file mode 100644 index 7983d590a2c617c6cad68c90af6b12aa17518810..0000000000000000000000000000000000000000 Binary files a/zh-cn/application-dev/reference/arkui-js/figures/bisque.png and /dev/null differ diff --git a/zh-cn/application-dev/reference/arkui-js/figures/blanchedalmond.png b/zh-cn/application-dev/reference/arkui-js/figures/blanchedalmond.png deleted file mode 100644 index 04bcf099edface801be6074a33ff33a980c9b606..0000000000000000000000000000000000000000 Binary files a/zh-cn/application-dev/reference/arkui-js/figures/blanchedalmond.png and /dev/null differ diff --git a/zh-cn/application-dev/reference/arkui-js/figures/blueviolet.png b/zh-cn/application-dev/reference/arkui-js/figures/blueviolet.png deleted file mode 100644 index ca1edf2219980ab9c8533b9fda3219521c50533d..0000000000000000000000000000000000000000 Binary files a/zh-cn/application-dev/reference/arkui-js/figures/blueviolet.png and /dev/null differ diff --git a/zh-cn/application-dev/reference/arkui-js/figures/burlywood.png b/zh-cn/application-dev/reference/arkui-js/figures/burlywood.png deleted file mode 100644 index 0d53a47b7eace81d5c7da88c59fee61e30c89681..0000000000000000000000000000000000000000 Binary files a/zh-cn/application-dev/reference/arkui-js/figures/burlywood.png and /dev/null differ diff --git a/zh-cn/application-dev/reference/arkui-js/figures/cadetblue.png b/zh-cn/application-dev/reference/arkui-js/figures/cadetblue.png deleted file mode 100644 index a59bc9cdb0f75ad79e4714d3593216021369c862..0000000000000000000000000000000000000000 Binary files a/zh-cn/application-dev/reference/arkui-js/figures/cadetblue.png and /dev/null differ diff --git a/zh-cn/application-dev/reference/arkui-js/figures/chartreuse.png b/zh-cn/application-dev/reference/arkui-js/figures/chartreuse.png deleted file mode 100644 index 3026d3c195598159232b4b1f08e9f198f4b4fa2c..0000000000000000000000000000000000000000 Binary files a/zh-cn/application-dev/reference/arkui-js/figures/chartreuse.png and /dev/null differ diff --git a/zh-cn/application-dev/reference/arkui-js/figures/chocolate.png b/zh-cn/application-dev/reference/arkui-js/figures/chocolate.png deleted file mode 100644 index 02d5f4e31b020ea9f64e36a7b7cd50299cf3d7f2..0000000000000000000000000000000000000000 Binary files a/zh-cn/application-dev/reference/arkui-js/figures/chocolate.png and /dev/null differ diff --git a/zh-cn/application-dev/reference/arkui-js/figures/coral.png b/zh-cn/application-dev/reference/arkui-js/figures/coral.png deleted file mode 100644 index 8442c9b2258c79ee6b6a3d5963df5b792bbb1a16..0000000000000000000000000000000000000000 Binary files a/zh-cn/application-dev/reference/arkui-js/figures/coral.png and /dev/null differ diff --git a/zh-cn/application-dev/reference/arkui-js/figures/cornflowerblue.png b/zh-cn/application-dev/reference/arkui-js/figures/cornflowerblue.png deleted file mode 100644 index 3621ef6876dbd1103487aed8ff190e6a0204ffde..0000000000000000000000000000000000000000 Binary files a/zh-cn/application-dev/reference/arkui-js/figures/cornflowerblue.png and /dev/null differ diff --git a/zh-cn/application-dev/reference/arkui-js/figures/cornsilk.png b/zh-cn/application-dev/reference/arkui-js/figures/cornsilk.png deleted file mode 100644 index bf38fe45eaf254939b88b9d2a66635408060acf7..0000000000000000000000000000000000000000 Binary files a/zh-cn/application-dev/reference/arkui-js/figures/cornsilk.png and /dev/null differ diff --git a/zh-cn/application-dev/reference/arkui-js/figures/crimson.png b/zh-cn/application-dev/reference/arkui-js/figures/crimson.png deleted file mode 100644 index bca655617699ef8dc1265bf692a3170c7effe15b..0000000000000000000000000000000000000000 Binary files a/zh-cn/application-dev/reference/arkui-js/figures/crimson.png and /dev/null differ diff --git a/zh-cn/application-dev/reference/arkui-js/figures/cyan.png b/zh-cn/application-dev/reference/arkui-js/figures/cyan.png deleted file mode 100644 index 3e6aaacfe1c26157294e6dedfeaa1488aeed12a3..0000000000000000000000000000000000000000 Binary files a/zh-cn/application-dev/reference/arkui-js/figures/cyan.png and /dev/null differ diff --git a/zh-cn/application-dev/reference/arkui-js/figures/darkblue.png b/zh-cn/application-dev/reference/arkui-js/figures/darkblue.png deleted file mode 100644 index b234a769d1a9f1f30c4d2127160cf067e9f71ad6..0000000000000000000000000000000000000000 Binary files a/zh-cn/application-dev/reference/arkui-js/figures/darkblue.png and /dev/null differ diff --git a/zh-cn/application-dev/reference/arkui-js/figures/darkcyan.png b/zh-cn/application-dev/reference/arkui-js/figures/darkcyan.png deleted file mode 100644 index b780eb08852e8916ec6ff1a401ea6946c8d727cf..0000000000000000000000000000000000000000 Binary files a/zh-cn/application-dev/reference/arkui-js/figures/darkcyan.png and /dev/null differ diff --git a/zh-cn/application-dev/reference/arkui-js/figures/darkgoldenrod.png b/zh-cn/application-dev/reference/arkui-js/figures/darkgoldenrod.png deleted file mode 100644 index 26f2f228b47b8acb8adcddc3abf9156d6c29364e..0000000000000000000000000000000000000000 Binary files a/zh-cn/application-dev/reference/arkui-js/figures/darkgoldenrod.png and /dev/null differ diff --git a/zh-cn/application-dev/reference/arkui-js/figures/darkgray.png b/zh-cn/application-dev/reference/arkui-js/figures/darkgray.png deleted file mode 100644 index f1abe2afcb7902557ac3c4f58abfdf333af03121..0000000000000000000000000000000000000000 Binary files a/zh-cn/application-dev/reference/arkui-js/figures/darkgray.png and /dev/null differ diff --git a/zh-cn/application-dev/reference/arkui-js/figures/darkgreen.png b/zh-cn/application-dev/reference/arkui-js/figures/darkgreen.png deleted file mode 100644 index 4c4c304b67c398f32c5fff516cdde377ca39c73d..0000000000000000000000000000000000000000 Binary files a/zh-cn/application-dev/reference/arkui-js/figures/darkgreen.png and /dev/null differ diff --git a/zh-cn/application-dev/reference/arkui-js/figures/darkgrey.png b/zh-cn/application-dev/reference/arkui-js/figures/darkgrey.png deleted file mode 100644 index f1abe2afcb7902557ac3c4f58abfdf333af03121..0000000000000000000000000000000000000000 Binary files a/zh-cn/application-dev/reference/arkui-js/figures/darkgrey.png and /dev/null differ diff --git a/zh-cn/application-dev/reference/arkui-js/figures/darkkhaki.png b/zh-cn/application-dev/reference/arkui-js/figures/darkkhaki.png deleted file mode 100644 index 12085848c0f6472d53f7e6504c1924ea6f5a44c1..0000000000000000000000000000000000000000 Binary files a/zh-cn/application-dev/reference/arkui-js/figures/darkkhaki.png and /dev/null differ diff --git a/zh-cn/application-dev/reference/arkui-js/figures/darkmagenta.png b/zh-cn/application-dev/reference/arkui-js/figures/darkmagenta.png deleted file mode 100644 index 9ed54c6c5c5186fb43f24dab24f7689ae0d14a12..0000000000000000000000000000000000000000 Binary files a/zh-cn/application-dev/reference/arkui-js/figures/darkmagenta.png and /dev/null differ diff --git a/zh-cn/application-dev/reference/arkui-js/figures/darkolivegreen.png b/zh-cn/application-dev/reference/arkui-js/figures/darkolivegreen.png deleted file mode 100644 index 53081e06f458cfc1772de30f669180333b8d783d..0000000000000000000000000000000000000000 Binary files a/zh-cn/application-dev/reference/arkui-js/figures/darkolivegreen.png and /dev/null differ diff --git a/zh-cn/application-dev/reference/arkui-js/figures/darkorange.png b/zh-cn/application-dev/reference/arkui-js/figures/darkorange.png deleted file mode 100644 index 6064f64867e3aca621244e1e6fdb16d3ab2ed748..0000000000000000000000000000000000000000 Binary files a/zh-cn/application-dev/reference/arkui-js/figures/darkorange.png and /dev/null differ diff --git a/zh-cn/application-dev/reference/arkui-js/figures/darkorchid.png b/zh-cn/application-dev/reference/arkui-js/figures/darkorchid.png deleted file mode 100644 index 6315d4654d04dd6b9b295fa1f8b37e8c550b17cf..0000000000000000000000000000000000000000 Binary files a/zh-cn/application-dev/reference/arkui-js/figures/darkorchid.png and /dev/null differ diff --git a/zh-cn/application-dev/reference/arkui-js/figures/darkred.png b/zh-cn/application-dev/reference/arkui-js/figures/darkred.png deleted file mode 100644 index c33d763d18f5108bf0eedba19c662d05af397ee9..0000000000000000000000000000000000000000 Binary files a/zh-cn/application-dev/reference/arkui-js/figures/darkred.png and /dev/null differ diff --git a/zh-cn/application-dev/reference/arkui-js/figures/darksalmon.png b/zh-cn/application-dev/reference/arkui-js/figures/darksalmon.png deleted file mode 100644 index 57594c6855d4cdf1b37cc3e5354374c9dae0823b..0000000000000000000000000000000000000000 Binary files a/zh-cn/application-dev/reference/arkui-js/figures/darksalmon.png and /dev/null differ diff --git a/zh-cn/application-dev/reference/arkui-js/figures/darkseagreen.png b/zh-cn/application-dev/reference/arkui-js/figures/darkseagreen.png deleted file mode 100644 index 454b1796715794d51e2a1a4649bfafa1bfde80f0..0000000000000000000000000000000000000000 Binary files a/zh-cn/application-dev/reference/arkui-js/figures/darkseagreen.png and /dev/null differ diff --git a/zh-cn/application-dev/reference/arkui-js/figures/darkslateblue.png b/zh-cn/application-dev/reference/arkui-js/figures/darkslateblue.png deleted file mode 100644 index 7dfc7ee8793298d19c939369ba980abd547982ff..0000000000000000000000000000000000000000 Binary files a/zh-cn/application-dev/reference/arkui-js/figures/darkslateblue.png and /dev/null differ diff --git a/zh-cn/application-dev/reference/arkui-js/figures/darkslategray.png b/zh-cn/application-dev/reference/arkui-js/figures/darkslategray.png deleted file mode 100644 index 5e23c304c4911dc0ef487dfeb8d7820aea5fb44b..0000000000000000000000000000000000000000 Binary files a/zh-cn/application-dev/reference/arkui-js/figures/darkslategray.png and /dev/null differ diff --git a/zh-cn/application-dev/reference/arkui-js/figures/darkslategrey.png b/zh-cn/application-dev/reference/arkui-js/figures/darkslategrey.png deleted file mode 100644 index 5e23c304c4911dc0ef487dfeb8d7820aea5fb44b..0000000000000000000000000000000000000000 Binary files a/zh-cn/application-dev/reference/arkui-js/figures/darkslategrey.png and /dev/null differ diff --git a/zh-cn/application-dev/reference/arkui-js/figures/darkturquoise.png b/zh-cn/application-dev/reference/arkui-js/figures/darkturquoise.png deleted file mode 100644 index 4e41450db5d70f6d10d6d7bf59daba33085c177e..0000000000000000000000000000000000000000 Binary files a/zh-cn/application-dev/reference/arkui-js/figures/darkturquoise.png and /dev/null differ diff --git a/zh-cn/application-dev/reference/arkui-js/figures/darkviolet.png b/zh-cn/application-dev/reference/arkui-js/figures/darkviolet.png deleted file mode 100644 index 6f085565bd8c64d44bf58ce0969557515ec7ab97..0000000000000000000000000000000000000000 Binary files a/zh-cn/application-dev/reference/arkui-js/figures/darkviolet.png and /dev/null differ diff --git a/zh-cn/application-dev/reference/arkui-js/figures/date33.png b/zh-cn/application-dev/reference/arkui-js/figures/date33.png deleted file mode 100644 index cbe406b48fd77d39b575f506fd6fe48c830e43fa..0000000000000000000000000000000000000000 Binary files a/zh-cn/application-dev/reference/arkui-js/figures/date33.png and /dev/null differ diff --git a/zh-cn/application-dev/reference/arkui-js/figures/datetime.png b/zh-cn/application-dev/reference/arkui-js/figures/datetime.png deleted file mode 100644 index 50c2d2d700960d22c332e33d9fba1b27690e63a4..0000000000000000000000000000000000000000 Binary files a/zh-cn/application-dev/reference/arkui-js/figures/datetime.png and /dev/null differ diff --git a/zh-cn/application-dev/reference/arkui-js/figures/deeppink.png b/zh-cn/application-dev/reference/arkui-js/figures/deeppink.png deleted file mode 100644 index 6348bb2b6ee281976f7d58159e4c33db29f542ad..0000000000000000000000000000000000000000 Binary files a/zh-cn/application-dev/reference/arkui-js/figures/deeppink.png and /dev/null differ diff --git a/zh-cn/application-dev/reference/arkui-js/figures/deepskyblue.png b/zh-cn/application-dev/reference/arkui-js/figures/deepskyblue.png deleted file mode 100644 index 0ac129028e67b43fcae8e3d5c1a539cc45ba6d21..0000000000000000000000000000000000000000 Binary files a/zh-cn/application-dev/reference/arkui-js/figures/deepskyblue.png and /dev/null differ diff --git a/zh-cn/application-dev/reference/arkui-js/figures/dimgray.png b/zh-cn/application-dev/reference/arkui-js/figures/dimgray.png deleted file mode 100644 index 1072a50f468dda3c90c889c31424b7c290eb1a13..0000000000000000000000000000000000000000 Binary files a/zh-cn/application-dev/reference/arkui-js/figures/dimgray.png and /dev/null differ diff --git a/zh-cn/application-dev/reference/arkui-js/figures/dimgrey.png b/zh-cn/application-dev/reference/arkui-js/figures/dimgrey.png deleted file mode 100644 index 1072a50f468dda3c90c889c31424b7c290eb1a13..0000000000000000000000000000000000000000 Binary files a/zh-cn/application-dev/reference/arkui-js/figures/dimgrey.png and /dev/null differ diff --git a/zh-cn/application-dev/reference/arkui-js/figures/dodgerblue.png b/zh-cn/application-dev/reference/arkui-js/figures/dodgerblue.png deleted file mode 100644 index fe422eecde9ec9f1fcac762bd81a23b3fa3abde7..0000000000000000000000000000000000000000 Binary files a/zh-cn/application-dev/reference/arkui-js/figures/dodgerblue.png and /dev/null differ diff --git a/zh-cn/application-dev/reference/arkui-js/figures/firebrick.png b/zh-cn/application-dev/reference/arkui-js/figures/firebrick.png deleted file mode 100644 index af32ecea68c1cef693bcfa379af5ac28f66c1e14..0000000000000000000000000000000000000000 Binary files a/zh-cn/application-dev/reference/arkui-js/figures/firebrick.png and /dev/null differ diff --git a/zh-cn/application-dev/reference/arkui-js/figures/floralwhite.png b/zh-cn/application-dev/reference/arkui-js/figures/floralwhite.png deleted file mode 100644 index 5ee9f7e893611dce988b8aa7ccfe3fab4b9d912f..0000000000000000000000000000000000000000 Binary files a/zh-cn/application-dev/reference/arkui-js/figures/floralwhite.png and /dev/null differ diff --git a/zh-cn/application-dev/reference/arkui-js/figures/forestgreen.png b/zh-cn/application-dev/reference/arkui-js/figures/forestgreen.png deleted file mode 100644 index 7cfd4846ca697424582edbfed23ed93ef9e98138..0000000000000000000000000000000000000000 Binary files a/zh-cn/application-dev/reference/arkui-js/figures/forestgreen.png and /dev/null differ diff --git a/zh-cn/application-dev/reference/arkui-js/figures/fuchsia.png b/zh-cn/application-dev/reference/arkui-js/figures/fuchsia.png deleted file mode 100644 index 6823cbc9203b07abae455b4ee5c7692878c4be72..0000000000000000000000000000000000000000 Binary files a/zh-cn/application-dev/reference/arkui-js/figures/fuchsia.png and /dev/null differ diff --git a/zh-cn/application-dev/reference/arkui-js/figures/gainsboro.png b/zh-cn/application-dev/reference/arkui-js/figures/gainsboro.png deleted file mode 100644 index d1d37504e15eb6fccd6b1c8e985d37fcc8ba9875..0000000000000000000000000000000000000000 Binary files a/zh-cn/application-dev/reference/arkui-js/figures/gainsboro.png and /dev/null differ diff --git a/zh-cn/application-dev/reference/arkui-js/figures/ghostwhite.png b/zh-cn/application-dev/reference/arkui-js/figures/ghostwhite.png deleted file mode 100644 index 45467f3e6fc0866b6da0521911bdb5e7d740df29..0000000000000000000000000000000000000000 Binary files a/zh-cn/application-dev/reference/arkui-js/figures/ghostwhite.png and /dev/null differ diff --git a/zh-cn/application-dev/reference/arkui-js/figures/gold.png b/zh-cn/application-dev/reference/arkui-js/figures/gold.png deleted file mode 100644 index 91a276a7dffb4d98c507e9af6afa1912cca1fed2..0000000000000000000000000000000000000000 Binary files a/zh-cn/application-dev/reference/arkui-js/figures/gold.png and /dev/null differ diff --git a/zh-cn/application-dev/reference/arkui-js/figures/goldenrod.png b/zh-cn/application-dev/reference/arkui-js/figures/goldenrod.png deleted file mode 100644 index 04ab7decab16cb7341665c2a67e8d5655a7eed6a..0000000000000000000000000000000000000000 Binary files a/zh-cn/application-dev/reference/arkui-js/figures/goldenrod.png and /dev/null differ diff --git a/zh-cn/application-dev/reference/arkui-js/figures/greenyellow.png b/zh-cn/application-dev/reference/arkui-js/figures/greenyellow.png deleted file mode 100644 index c89f746719790333bce2bde8c5b8d86102fdfc33..0000000000000000000000000000000000000000 Binary files a/zh-cn/application-dev/reference/arkui-js/figures/greenyellow.png and /dev/null differ diff --git a/zh-cn/application-dev/reference/arkui-js/figures/grey.png b/zh-cn/application-dev/reference/arkui-js/figures/grey.png deleted file mode 100644 index dfcb0c5e259b3f8d7375c21712249c1e847edd67..0000000000000000000000000000000000000000 Binary files a/zh-cn/application-dev/reference/arkui-js/figures/grey.png and /dev/null differ diff --git a/zh-cn/application-dev/reference/arkui-js/figures/grid.gif b/zh-cn/application-dev/reference/arkui-js/figures/grid.gif new file mode 100644 index 0000000000000000000000000000000000000000..b6d2387c6db849678ae8897878fe3117170ea42a Binary files /dev/null and b/zh-cn/application-dev/reference/arkui-js/figures/grid.gif differ diff --git a/zh-cn/application-dev/reference/arkui-js/figures/honeydew.png b/zh-cn/application-dev/reference/arkui-js/figures/honeydew.png deleted file mode 100644 index 51fb00e10bb5c167506ddfae1689b58e368df340..0000000000000000000000000000000000000000 Binary files a/zh-cn/application-dev/reference/arkui-js/figures/honeydew.png and /dev/null differ diff --git a/zh-cn/application-dev/reference/arkui-js/figures/hotpink.png b/zh-cn/application-dev/reference/arkui-js/figures/hotpink.png deleted file mode 100644 index cbc1d312680f479e8c443476ea39eaf1e8a16e55..0000000000000000000000000000000000000000 Binary files a/zh-cn/application-dev/reference/arkui-js/figures/hotpink.png and /dev/null differ diff --git a/zh-cn/application-dev/reference/arkui-js/figures/indianred.png b/zh-cn/application-dev/reference/arkui-js/figures/indianred.png deleted file mode 100644 index 069f570291be858a1768b75719a4a6adbd1bdef8..0000000000000000000000000000000000000000 Binary files a/zh-cn/application-dev/reference/arkui-js/figures/indianred.png and /dev/null differ diff --git a/zh-cn/application-dev/reference/arkui-js/figures/indigo.png b/zh-cn/application-dev/reference/arkui-js/figures/indigo.png deleted file mode 100644 index db83d39f98583ee653ee39b0237eb55961e539c7..0000000000000000000000000000000000000000 Binary files a/zh-cn/application-dev/reference/arkui-js/figures/indigo.png and /dev/null differ diff --git a/zh-cn/application-dev/reference/arkui-js/figures/ivory.png b/zh-cn/application-dev/reference/arkui-js/figures/ivory.png deleted file mode 100644 index ff0aa71de78cb461a6602398ee915c677efdf3d4..0000000000000000000000000000000000000000 Binary files a/zh-cn/application-dev/reference/arkui-js/figures/ivory.png and /dev/null differ diff --git a/zh-cn/application-dev/reference/arkui-js/figures/khaki.png b/zh-cn/application-dev/reference/arkui-js/figures/khaki.png deleted file mode 100644 index 3fca22c329e9dc9ef73eee20757eac4ce7386842..0000000000000000000000000000000000000000 Binary files a/zh-cn/application-dev/reference/arkui-js/figures/khaki.png and /dev/null differ diff --git a/zh-cn/application-dev/reference/arkui-js/figures/lavender.png b/zh-cn/application-dev/reference/arkui-js/figures/lavender.png deleted file mode 100644 index 44e4d991524bd0ef88a0dd10f204e022dd9d0621..0000000000000000000000000000000000000000 Binary files a/zh-cn/application-dev/reference/arkui-js/figures/lavender.png and /dev/null differ diff --git a/zh-cn/application-dev/reference/arkui-js/figures/lavenderblush.png b/zh-cn/application-dev/reference/arkui-js/figures/lavenderblush.png deleted file mode 100644 index 5b22707e37ec772dc08a961e557a937862210167..0000000000000000000000000000000000000000 Binary files a/zh-cn/application-dev/reference/arkui-js/figures/lavenderblush.png and /dev/null differ diff --git a/zh-cn/application-dev/reference/arkui-js/figures/lawngreen.png b/zh-cn/application-dev/reference/arkui-js/figures/lawngreen.png deleted file mode 100644 index 41be1a646e14511b5d177d11a7bce10deaee5bc9..0000000000000000000000000000000000000000 Binary files a/zh-cn/application-dev/reference/arkui-js/figures/lawngreen.png and /dev/null differ diff --git a/zh-cn/application-dev/reference/arkui-js/figures/lemonchiffon.png b/zh-cn/application-dev/reference/arkui-js/figures/lemonchiffon.png deleted file mode 100644 index d77ed21418dc3035feb9f9c8e15815e577d71a90..0000000000000000000000000000000000000000 Binary files a/zh-cn/application-dev/reference/arkui-js/figures/lemonchiffon.png and /dev/null differ diff --git a/zh-cn/application-dev/reference/arkui-js/figures/lightblue.png b/zh-cn/application-dev/reference/arkui-js/figures/lightblue.png deleted file mode 100644 index 7cc96f8f6364b93923f0a88b895fe6b151080932..0000000000000000000000000000000000000000 Binary files a/zh-cn/application-dev/reference/arkui-js/figures/lightblue.png and /dev/null differ diff --git a/zh-cn/application-dev/reference/arkui-js/figures/lightcoral.png b/zh-cn/application-dev/reference/arkui-js/figures/lightcoral.png deleted file mode 100644 index 515185ab1b3cf9aaba1204760dae19ab3c112b42..0000000000000000000000000000000000000000 Binary files a/zh-cn/application-dev/reference/arkui-js/figures/lightcoral.png and /dev/null differ diff --git a/zh-cn/application-dev/reference/arkui-js/figures/lightcyan.png b/zh-cn/application-dev/reference/arkui-js/figures/lightcyan.png deleted file mode 100644 index 6f929d8ab35b708978d8053047cb56bec4fa83bc..0000000000000000000000000000000000000000 Binary files a/zh-cn/application-dev/reference/arkui-js/figures/lightcyan.png and /dev/null differ diff --git a/zh-cn/application-dev/reference/arkui-js/figures/lightgoldenrodyellow.png b/zh-cn/application-dev/reference/arkui-js/figures/lightgoldenrodyellow.png deleted file mode 100644 index 1b0ed50716d897398c1e9a741e08ff5f1b9fd9de..0000000000000000000000000000000000000000 Binary files a/zh-cn/application-dev/reference/arkui-js/figures/lightgoldenrodyellow.png and /dev/null differ diff --git a/zh-cn/application-dev/reference/arkui-js/figures/lightgray.png b/zh-cn/application-dev/reference/arkui-js/figures/lightgray.png deleted file mode 100644 index 0a5eb251a8d731dc6a9d8b1f31f904c42fd372c3..0000000000000000000000000000000000000000 Binary files a/zh-cn/application-dev/reference/arkui-js/figures/lightgray.png and /dev/null differ diff --git a/zh-cn/application-dev/reference/arkui-js/figures/lightgreen.png b/zh-cn/application-dev/reference/arkui-js/figures/lightgreen.png deleted file mode 100644 index f89943fc98661a6d2b78b5659c41483308a0c54b..0000000000000000000000000000000000000000 Binary files a/zh-cn/application-dev/reference/arkui-js/figures/lightgreen.png and /dev/null differ diff --git a/zh-cn/application-dev/reference/arkui-js/figures/lightpink.png b/zh-cn/application-dev/reference/arkui-js/figures/lightpink.png deleted file mode 100644 index 6eb2d41877c85cccfb918b042bc13c81c58ec191..0000000000000000000000000000000000000000 Binary files a/zh-cn/application-dev/reference/arkui-js/figures/lightpink.png and /dev/null differ diff --git a/zh-cn/application-dev/reference/arkui-js/figures/lightsalmon.png b/zh-cn/application-dev/reference/arkui-js/figures/lightsalmon.png deleted file mode 100644 index d87462d1cdc9410e91ee050a53d58e71d1c5f312..0000000000000000000000000000000000000000 Binary files a/zh-cn/application-dev/reference/arkui-js/figures/lightsalmon.png and /dev/null differ diff --git a/zh-cn/application-dev/reference/arkui-js/figures/lightseagreen.png b/zh-cn/application-dev/reference/arkui-js/figures/lightseagreen.png deleted file mode 100644 index e863d7a1c3b9c1ca08bd182dce43c55a4866d59b..0000000000000000000000000000000000000000 Binary files a/zh-cn/application-dev/reference/arkui-js/figures/lightseagreen.png and /dev/null differ diff --git a/zh-cn/application-dev/reference/arkui-js/figures/lightskyblue.png b/zh-cn/application-dev/reference/arkui-js/figures/lightskyblue.png deleted file mode 100644 index daa035cea33b810571c18de67e4ac887eeb11850..0000000000000000000000000000000000000000 Binary files a/zh-cn/application-dev/reference/arkui-js/figures/lightskyblue.png and /dev/null differ diff --git a/zh-cn/application-dev/reference/arkui-js/figures/lightslategray.png b/zh-cn/application-dev/reference/arkui-js/figures/lightslategray.png deleted file mode 100644 index 2dadb92ce56793e2dd693bfa7d99b0c1168130dc..0000000000000000000000000000000000000000 Binary files a/zh-cn/application-dev/reference/arkui-js/figures/lightslategray.png and /dev/null differ diff --git a/zh-cn/application-dev/reference/arkui-js/figures/lightslategrey.png b/zh-cn/application-dev/reference/arkui-js/figures/lightslategrey.png deleted file mode 100644 index 2dadb92ce56793e2dd693bfa7d99b0c1168130dc..0000000000000000000000000000000000000000 Binary files a/zh-cn/application-dev/reference/arkui-js/figures/lightslategrey.png and /dev/null differ diff --git a/zh-cn/application-dev/reference/arkui-js/figures/lightsteelblue.png b/zh-cn/application-dev/reference/arkui-js/figures/lightsteelblue.png deleted file mode 100644 index ac0521001d2513fd69e48ce61e1d1128b9d3a6dd..0000000000000000000000000000000000000000 Binary files a/zh-cn/application-dev/reference/arkui-js/figures/lightsteelblue.png and /dev/null differ diff --git a/zh-cn/application-dev/reference/arkui-js/figures/lightyellow.png b/zh-cn/application-dev/reference/arkui-js/figures/lightyellow.png deleted file mode 100644 index d1ca7dd07fe7812ec1f87bf748595174569a5672..0000000000000000000000000000000000000000 Binary files a/zh-cn/application-dev/reference/arkui-js/figures/lightyellow.png and /dev/null differ diff --git a/zh-cn/application-dev/reference/arkui-js/figures/lime.png b/zh-cn/application-dev/reference/arkui-js/figures/lime.png deleted file mode 100644 index 481c833482d38c5f564127c8f412fe3c0275fd24..0000000000000000000000000000000000000000 Binary files a/zh-cn/application-dev/reference/arkui-js/figures/lime.png and /dev/null differ diff --git a/zh-cn/application-dev/reference/arkui-js/figures/limegreen.png b/zh-cn/application-dev/reference/arkui-js/figures/limegreen.png deleted file mode 100644 index 63a8c6adc29d340634ed06a1006a0fb56c991a9d..0000000000000000000000000000000000000000 Binary files a/zh-cn/application-dev/reference/arkui-js/figures/limegreen.png and /dev/null differ diff --git a/zh-cn/application-dev/reference/arkui-js/figures/linen.png b/zh-cn/application-dev/reference/arkui-js/figures/linen.png deleted file mode 100644 index 486baf6be50982404fd1c68a5bc51db45c62046a..0000000000000000000000000000000000000000 Binary files a/zh-cn/application-dev/reference/arkui-js/figures/linen.png and /dev/null differ diff --git a/zh-cn/application-dev/reference/arkui-js/figures/list.png b/zh-cn/application-dev/reference/arkui-js/figures/list.png new file mode 100644 index 0000000000000000000000000000000000000000..7933730b5753d05a6f5734cb3d7ebb39aeb5f173 Binary files /dev/null and b/zh-cn/application-dev/reference/arkui-js/figures/list.png differ diff --git a/zh-cn/application-dev/reference/arkui-js/figures/magenta.png b/zh-cn/application-dev/reference/arkui-js/figures/magenta.png deleted file mode 100644 index 6823cbc9203b07abae455b4ee5c7692878c4be72..0000000000000000000000000000000000000000 Binary files a/zh-cn/application-dev/reference/arkui-js/figures/magenta.png and /dev/null differ diff --git a/zh-cn/application-dev/reference/arkui-js/figures/maroon.png b/zh-cn/application-dev/reference/arkui-js/figures/maroon.png deleted file mode 100644 index 1324b43b3f5b8dd0548cf2069c4c532c5284c445..0000000000000000000000000000000000000000 Binary files a/zh-cn/application-dev/reference/arkui-js/figures/maroon.png and /dev/null differ diff --git a/zh-cn/application-dev/reference/arkui-js/figures/mediumaquamarine.png b/zh-cn/application-dev/reference/arkui-js/figures/mediumaquamarine.png deleted file mode 100644 index 800bf296338fd01962f16a8863c37bfe515ce3be..0000000000000000000000000000000000000000 Binary files a/zh-cn/application-dev/reference/arkui-js/figures/mediumaquamarine.png and /dev/null differ diff --git a/zh-cn/application-dev/reference/arkui-js/figures/mediumblue.png b/zh-cn/application-dev/reference/arkui-js/figures/mediumblue.png deleted file mode 100644 index c0df3f4f7d99f0b8c39995133c71d944bc07ea4b..0000000000000000000000000000000000000000 Binary files a/zh-cn/application-dev/reference/arkui-js/figures/mediumblue.png and /dev/null differ diff --git a/zh-cn/application-dev/reference/arkui-js/figures/mediumorchid.png b/zh-cn/application-dev/reference/arkui-js/figures/mediumorchid.png deleted file mode 100644 index 664d13c38389361e61a45870899e2a6f0bfc835f..0000000000000000000000000000000000000000 Binary files a/zh-cn/application-dev/reference/arkui-js/figures/mediumorchid.png and /dev/null differ diff --git a/zh-cn/application-dev/reference/arkui-js/figures/mediumpurple.png b/zh-cn/application-dev/reference/arkui-js/figures/mediumpurple.png deleted file mode 100644 index 848454297b67eb73ab641424badc438433e24479..0000000000000000000000000000000000000000 Binary files a/zh-cn/application-dev/reference/arkui-js/figures/mediumpurple.png and /dev/null differ diff --git a/zh-cn/application-dev/reference/arkui-js/figures/mediumseagreen.png b/zh-cn/application-dev/reference/arkui-js/figures/mediumseagreen.png deleted file mode 100644 index 984e7a561e661ecefca8b60d5ac239b67f96c98c..0000000000000000000000000000000000000000 Binary files a/zh-cn/application-dev/reference/arkui-js/figures/mediumseagreen.png and /dev/null differ diff --git a/zh-cn/application-dev/reference/arkui-js/figures/mediumslateblue.png b/zh-cn/application-dev/reference/arkui-js/figures/mediumslateblue.png deleted file mode 100644 index 39cf9d01563cf63bee003a47cd88258e860a0757..0000000000000000000000000000000000000000 Binary files a/zh-cn/application-dev/reference/arkui-js/figures/mediumslateblue.png and /dev/null differ diff --git a/zh-cn/application-dev/reference/arkui-js/figures/mediumspringgreen.png b/zh-cn/application-dev/reference/arkui-js/figures/mediumspringgreen.png deleted file mode 100644 index 56db1024a714f821528656c64e12520311bae8f5..0000000000000000000000000000000000000000 Binary files a/zh-cn/application-dev/reference/arkui-js/figures/mediumspringgreen.png and /dev/null differ diff --git a/zh-cn/application-dev/reference/arkui-js/figures/mediumturquoise.png b/zh-cn/application-dev/reference/arkui-js/figures/mediumturquoise.png deleted file mode 100644 index b3c353b6a872d3597b767f4c216b2d16bfc2139b..0000000000000000000000000000000000000000 Binary files a/zh-cn/application-dev/reference/arkui-js/figures/mediumturquoise.png and /dev/null differ diff --git a/zh-cn/application-dev/reference/arkui-js/figures/mediumvioletred.png b/zh-cn/application-dev/reference/arkui-js/figures/mediumvioletred.png deleted file mode 100644 index 00767e63c899eec52c2c732e834bca8d26d348ce..0000000000000000000000000000000000000000 Binary files a/zh-cn/application-dev/reference/arkui-js/figures/mediumvioletred.png and /dev/null differ diff --git a/zh-cn/application-dev/reference/arkui-js/figures/midnightblue.png b/zh-cn/application-dev/reference/arkui-js/figures/midnightblue.png deleted file mode 100644 index ac66614c0f277cd722b3d090cb10efb973152b0f..0000000000000000000000000000000000000000 Binary files a/zh-cn/application-dev/reference/arkui-js/figures/midnightblue.png and /dev/null differ diff --git a/zh-cn/application-dev/reference/arkui-js/figures/mintcream.png b/zh-cn/application-dev/reference/arkui-js/figures/mintcream.png deleted file mode 100644 index 64fdda07447707816e8a6238939169f58a4ce58f..0000000000000000000000000000000000000000 Binary files a/zh-cn/application-dev/reference/arkui-js/figures/mintcream.png and /dev/null differ diff --git a/zh-cn/application-dev/reference/arkui-js/figures/mistyrose.png b/zh-cn/application-dev/reference/arkui-js/figures/mistyrose.png deleted file mode 100644 index 6f5fe69b5a5a62b2d2b719b2be0a17a501363918..0000000000000000000000000000000000000000 Binary files a/zh-cn/application-dev/reference/arkui-js/figures/mistyrose.png and /dev/null differ diff --git a/zh-cn/application-dev/reference/arkui-js/figures/mmmm.gif b/zh-cn/application-dev/reference/arkui-js/figures/mmmm.gif new file mode 100644 index 0000000000000000000000000000000000000000..5959ae695322f2e1eda3364d7603ec9d2ca10819 Binary files /dev/null and b/zh-cn/application-dev/reference/arkui-js/figures/mmmm.gif differ diff --git a/zh-cn/application-dev/reference/arkui-js/figures/moccasin.png b/zh-cn/application-dev/reference/arkui-js/figures/moccasin.png deleted file mode 100644 index 115cb4c96382681743381aeba099549dc24c2ae5..0000000000000000000000000000000000000000 Binary files a/zh-cn/application-dev/reference/arkui-js/figures/moccasin.png and /dev/null differ diff --git a/zh-cn/application-dev/reference/arkui-js/figures/multitext.png b/zh-cn/application-dev/reference/arkui-js/figures/multitext.png deleted file mode 100644 index fba75110896e178bbfbd9cc309b260b49c83b06d..0000000000000000000000000000000000000000 Binary files a/zh-cn/application-dev/reference/arkui-js/figures/multitext.png and /dev/null differ diff --git a/zh-cn/application-dev/reference/arkui-js/figures/navajowhite.png b/zh-cn/application-dev/reference/arkui-js/figures/navajowhite.png deleted file mode 100644 index a68e61ab120651294310c5e3632ce22d71917a52..0000000000000000000000000000000000000000 Binary files a/zh-cn/application-dev/reference/arkui-js/figures/navajowhite.png and /dev/null differ diff --git a/zh-cn/application-dev/reference/arkui-js/figures/navy.png b/zh-cn/application-dev/reference/arkui-js/figures/navy.png deleted file mode 100644 index 4e41c2cd90ba17798448d70b493ccceb3ac960f0..0000000000000000000000000000000000000000 Binary files a/zh-cn/application-dev/reference/arkui-js/figures/navy.png and /dev/null differ diff --git a/zh-cn/application-dev/reference/arkui-js/figures/oldlace.png b/zh-cn/application-dev/reference/arkui-js/figures/oldlace.png deleted file mode 100644 index ecf361e4c749446160da1e8a07169b21d99f362a..0000000000000000000000000000000000000000 Binary files a/zh-cn/application-dev/reference/arkui-js/figures/oldlace.png and /dev/null differ diff --git a/zh-cn/application-dev/reference/arkui-js/figures/olive.png b/zh-cn/application-dev/reference/arkui-js/figures/olive.png deleted file mode 100644 index 0d386fef5c4fa9faf1b29c7667c7392db250f2eb..0000000000000000000000000000000000000000 Binary files a/zh-cn/application-dev/reference/arkui-js/figures/olive.png and /dev/null differ diff --git a/zh-cn/application-dev/reference/arkui-js/figures/olivedrab.png b/zh-cn/application-dev/reference/arkui-js/figures/olivedrab.png deleted file mode 100644 index 639f16f8aaf261176b3bc760c2eb616ad2f4aa28..0000000000000000000000000000000000000000 Binary files a/zh-cn/application-dev/reference/arkui-js/figures/olivedrab.png and /dev/null differ diff --git a/zh-cn/application-dev/reference/arkui-js/figures/orangered.png b/zh-cn/application-dev/reference/arkui-js/figures/orangered.png deleted file mode 100644 index e72165fdf1b24d80f0abde742ad3d848497c6ea7..0000000000000000000000000000000000000000 Binary files a/zh-cn/application-dev/reference/arkui-js/figures/orangered.png and /dev/null differ diff --git a/zh-cn/application-dev/reference/arkui-js/figures/orchid.png b/zh-cn/application-dev/reference/arkui-js/figures/orchid.png deleted file mode 100644 index 9114031e04fc28be59e8c9567c0fcfe81a9cc5cb..0000000000000000000000000000000000000000 Binary files a/zh-cn/application-dev/reference/arkui-js/figures/orchid.png and /dev/null differ diff --git a/zh-cn/application-dev/reference/arkui-js/figures/palegoldenrod.png b/zh-cn/application-dev/reference/arkui-js/figures/palegoldenrod.png deleted file mode 100644 index 131584c72c082f40e2b466e2706c86a05df375e0..0000000000000000000000000000000000000000 Binary files a/zh-cn/application-dev/reference/arkui-js/figures/palegoldenrod.png and /dev/null differ diff --git a/zh-cn/application-dev/reference/arkui-js/figures/palegreen.png b/zh-cn/application-dev/reference/arkui-js/figures/palegreen.png deleted file mode 100644 index 891d52276622fd51893634ce26e08bd56f62b782..0000000000000000000000000000000000000000 Binary files a/zh-cn/application-dev/reference/arkui-js/figures/palegreen.png and /dev/null differ diff --git a/zh-cn/application-dev/reference/arkui-js/figures/paleturquoise.png b/zh-cn/application-dev/reference/arkui-js/figures/paleturquoise.png deleted file mode 100644 index a618da21cf6c6d32066286e594921c0fc75b5dba..0000000000000000000000000000000000000000 Binary files a/zh-cn/application-dev/reference/arkui-js/figures/paleturquoise.png and /dev/null differ diff --git a/zh-cn/application-dev/reference/arkui-js/figures/palevioletred.png b/zh-cn/application-dev/reference/arkui-js/figures/palevioletred.png deleted file mode 100644 index c88212b6818d6d18c77ee497cfcafaf661a70d52..0000000000000000000000000000000000000000 Binary files a/zh-cn/application-dev/reference/arkui-js/figures/palevioletred.png and /dev/null differ diff --git a/zh-cn/application-dev/reference/arkui-js/figures/papayawhip.png b/zh-cn/application-dev/reference/arkui-js/figures/papayawhip.png deleted file mode 100644 index 4b1948de8581602c6c5879c03d68c14f06eccd00..0000000000000000000000000000000000000000 Binary files a/zh-cn/application-dev/reference/arkui-js/figures/papayawhip.png and /dev/null differ diff --git a/zh-cn/application-dev/reference/arkui-js/figures/peachpuff.png b/zh-cn/application-dev/reference/arkui-js/figures/peachpuff.png deleted file mode 100644 index 1821f9c40ad9d24dc10dc662ecbe7936c9e10633..0000000000000000000000000000000000000000 Binary files a/zh-cn/application-dev/reference/arkui-js/figures/peachpuff.png and /dev/null differ diff --git a/zh-cn/application-dev/reference/arkui-js/figures/peru.png b/zh-cn/application-dev/reference/arkui-js/figures/peru.png deleted file mode 100644 index 3ca3e045717379bb09fa8d13ea0d42019bf546f2..0000000000000000000000000000000000000000 Binary files a/zh-cn/application-dev/reference/arkui-js/figures/peru.png and /dev/null differ diff --git a/zh-cn/application-dev/reference/arkui-js/figures/plum.png b/zh-cn/application-dev/reference/arkui-js/figures/plum.png deleted file mode 100644 index 1e0bad2b2bfed2559e53a8bc21162e6163ec8434..0000000000000000000000000000000000000000 Binary files a/zh-cn/application-dev/reference/arkui-js/figures/plum.png and /dev/null differ diff --git a/zh-cn/application-dev/reference/arkui-js/figures/powderblue.png b/zh-cn/application-dev/reference/arkui-js/figures/powderblue.png deleted file mode 100644 index 8b3eec4e46f6a29dc47694940ceaef1cfa1314af..0000000000000000000000000000000000000000 Binary files a/zh-cn/application-dev/reference/arkui-js/figures/powderblue.png and /dev/null differ diff --git a/zh-cn/application-dev/reference/arkui-js/figures/purple.png b/zh-cn/application-dev/reference/arkui-js/figures/purple.png deleted file mode 100644 index 8bc3583f82d21c8bec0c70b2da36ed05723fd9a7..0000000000000000000000000000000000000000 Binary files a/zh-cn/application-dev/reference/arkui-js/figures/purple.png and /dev/null differ diff --git a/zh-cn/application-dev/reference/arkui-js/figures/rebeccapurple.png b/zh-cn/application-dev/reference/arkui-js/figures/rebeccapurple.png deleted file mode 100644 index 6a64534a0a867d44cf81c8a34c9981b5fbaf5faf..0000000000000000000000000000000000000000 Binary files a/zh-cn/application-dev/reference/arkui-js/figures/rebeccapurple.png and /dev/null differ diff --git a/zh-cn/application-dev/reference/arkui-js/figures/rosybrown.png b/zh-cn/application-dev/reference/arkui-js/figures/rosybrown.png deleted file mode 100644 index adca00e684afb79ff4f21313d0586025576a8be1..0000000000000000000000000000000000000000 Binary files a/zh-cn/application-dev/reference/arkui-js/figures/rosybrown.png and /dev/null differ diff --git a/zh-cn/application-dev/reference/arkui-js/figures/royalblue.png b/zh-cn/application-dev/reference/arkui-js/figures/royalblue.png deleted file mode 100644 index 69cb300d4bc8decee06c7fb64b03a24287865a8f..0000000000000000000000000000000000000000 Binary files a/zh-cn/application-dev/reference/arkui-js/figures/royalblue.png and /dev/null differ diff --git a/zh-cn/application-dev/reference/arkui-js/figures/saddlebrown.png b/zh-cn/application-dev/reference/arkui-js/figures/saddlebrown.png deleted file mode 100644 index 5d0ae86ad14ff863511a10ecc1a85b273e826dfc..0000000000000000000000000000000000000000 Binary files a/zh-cn/application-dev/reference/arkui-js/figures/saddlebrown.png and /dev/null differ diff --git a/zh-cn/application-dev/reference/arkui-js/figures/salmon.png b/zh-cn/application-dev/reference/arkui-js/figures/salmon.png deleted file mode 100644 index b80a6c31cdb287c35965c7841aa97711d79b371c..0000000000000000000000000000000000000000 Binary files a/zh-cn/application-dev/reference/arkui-js/figures/salmon.png and /dev/null differ diff --git a/zh-cn/application-dev/reference/arkui-js/figures/sandybrown.png b/zh-cn/application-dev/reference/arkui-js/figures/sandybrown.png deleted file mode 100644 index c952585d8032733700b57ce1a919d71ce9a4b58b..0000000000000000000000000000000000000000 Binary files a/zh-cn/application-dev/reference/arkui-js/figures/sandybrown.png and /dev/null differ diff --git a/zh-cn/application-dev/reference/arkui-js/figures/seagreen.png b/zh-cn/application-dev/reference/arkui-js/figures/seagreen.png deleted file mode 100644 index 858c4187d3a2874f651adc09dcae9a32f8407d86..0000000000000000000000000000000000000000 Binary files a/zh-cn/application-dev/reference/arkui-js/figures/seagreen.png and /dev/null differ diff --git a/zh-cn/application-dev/reference/arkui-js/figures/seashell.png b/zh-cn/application-dev/reference/arkui-js/figures/seashell.png deleted file mode 100644 index c0b21ed6b44c2f756458137f931873f540c16e5f..0000000000000000000000000000000000000000 Binary files a/zh-cn/application-dev/reference/arkui-js/figures/seashell.png and /dev/null differ diff --git a/zh-cn/application-dev/reference/arkui-js/figures/sienna.png b/zh-cn/application-dev/reference/arkui-js/figures/sienna.png deleted file mode 100644 index bdb02fdda28a155e2f622eeea2ff820144780e50..0000000000000000000000000000000000000000 Binary files a/zh-cn/application-dev/reference/arkui-js/figures/sienna.png and /dev/null differ diff --git a/zh-cn/application-dev/reference/arkui-js/figures/silver.png b/zh-cn/application-dev/reference/arkui-js/figures/silver.png deleted file mode 100644 index 0491d350277cd67d7774e3761164b9dd7038a117..0000000000000000000000000000000000000000 Binary files a/zh-cn/application-dev/reference/arkui-js/figures/silver.png and /dev/null differ diff --git a/zh-cn/application-dev/reference/arkui-js/figures/skyblue.png b/zh-cn/application-dev/reference/arkui-js/figures/skyblue.png deleted file mode 100644 index 1c4f9ae52153198f8690a1066fe66ba8c7bd1ee1..0000000000000000000000000000000000000000 Binary files a/zh-cn/application-dev/reference/arkui-js/figures/skyblue.png and /dev/null differ diff --git a/zh-cn/application-dev/reference/arkui-js/figures/slateblue.png b/zh-cn/application-dev/reference/arkui-js/figures/slateblue.png deleted file mode 100644 index 87915df37741dacfe9448bfebccf5a88d3ca2a76..0000000000000000000000000000000000000000 Binary files a/zh-cn/application-dev/reference/arkui-js/figures/slateblue.png and /dev/null differ diff --git a/zh-cn/application-dev/reference/arkui-js/figures/slategray-6.png b/zh-cn/application-dev/reference/arkui-js/figures/slategray-6.png deleted file mode 100644 index 6e4476c4791e37d4681f8e12313ae1cad0887c1b..0000000000000000000000000000000000000000 Binary files a/zh-cn/application-dev/reference/arkui-js/figures/slategray-6.png and /dev/null differ diff --git a/zh-cn/application-dev/reference/arkui-js/figures/slategray.png b/zh-cn/application-dev/reference/arkui-js/figures/slategray.png deleted file mode 100644 index 6e4476c4791e37d4681f8e12313ae1cad0887c1b..0000000000000000000000000000000000000000 Binary files a/zh-cn/application-dev/reference/arkui-js/figures/slategray.png and /dev/null differ diff --git a/zh-cn/application-dev/reference/arkui-js/figures/snow.png b/zh-cn/application-dev/reference/arkui-js/figures/snow.png deleted file mode 100644 index 283cf90b3828b36af6fb3a746e806f6715053310..0000000000000000000000000000000000000000 Binary files a/zh-cn/application-dev/reference/arkui-js/figures/snow.png and /dev/null differ diff --git a/zh-cn/application-dev/reference/arkui-js/figures/springgreen.png b/zh-cn/application-dev/reference/arkui-js/figures/springgreen.png deleted file mode 100644 index 93825b7fe53a0794751ee4aa3ca46300c404835e..0000000000000000000000000000000000000000 Binary files a/zh-cn/application-dev/reference/arkui-js/figures/springgreen.png and /dev/null differ diff --git a/zh-cn/application-dev/reference/arkui-js/figures/steelblue.png b/zh-cn/application-dev/reference/arkui-js/figures/steelblue.png deleted file mode 100644 index a9aba5f67b94427168fade014542532431e28a2e..0000000000000000000000000000000000000000 Binary files a/zh-cn/application-dev/reference/arkui-js/figures/steelblue.png and /dev/null differ diff --git a/zh-cn/application-dev/reference/arkui-js/figures/tan.png b/zh-cn/application-dev/reference/arkui-js/figures/tan.png deleted file mode 100644 index b162dbf0a6c890a03ea1aa0b28bdb454651b697c..0000000000000000000000000000000000000000 Binary files a/zh-cn/application-dev/reference/arkui-js/figures/tan.png and /dev/null differ diff --git a/zh-cn/application-dev/reference/arkui-js/figures/teal.png b/zh-cn/application-dev/reference/arkui-js/figures/teal.png deleted file mode 100644 index 93299fc38d761e5251673210c364f6825e319153..0000000000000000000000000000000000000000 Binary files a/zh-cn/application-dev/reference/arkui-js/figures/teal.png and /dev/null differ diff --git a/zh-cn/application-dev/reference/arkui-js/figures/text.png b/zh-cn/application-dev/reference/arkui-js/figures/text.png deleted file mode 100644 index 4a5cbc0c72ee404eb9c8afe605cd862042e98ee3..0000000000000000000000000000000000000000 Binary files a/zh-cn/application-dev/reference/arkui-js/figures/text.png and /dev/null differ diff --git a/zh-cn/application-dev/reference/arkui-js/figures/thistle.png b/zh-cn/application-dev/reference/arkui-js/figures/thistle.png deleted file mode 100644 index d62fc7767f7b2e0e8d0d7fed57e30bdf6a6a332f..0000000000000000000000000000000000000000 Binary files a/zh-cn/application-dev/reference/arkui-js/figures/thistle.png and /dev/null differ diff --git a/zh-cn/application-dev/reference/arkui-js/figures/time.png b/zh-cn/application-dev/reference/arkui-js/figures/time.png deleted file mode 100644 index 484a77f31b70679cb01d8678c93439d4b55c4bcd..0000000000000000000000000000000000000000 Binary files a/zh-cn/application-dev/reference/arkui-js/figures/time.png and /dev/null differ diff --git a/zh-cn/application-dev/reference/arkui-js/figures/tomato.png b/zh-cn/application-dev/reference/arkui-js/figures/tomato.png deleted file mode 100644 index 6d795f1618b1546c94266548069eccf9e9af2e01..0000000000000000000000000000000000000000 Binary files a/zh-cn/application-dev/reference/arkui-js/figures/tomato.png and /dev/null differ diff --git a/zh-cn/application-dev/reference/arkui-js/figures/turquoise.png b/zh-cn/application-dev/reference/arkui-js/figures/turquoise.png deleted file mode 100644 index a33c4fce8448e2127b21e277437195ce0002766b..0000000000000000000000000000000000000000 Binary files a/zh-cn/application-dev/reference/arkui-js/figures/turquoise.png and /dev/null differ diff --git a/zh-cn/application-dev/reference/arkui-js/figures/violet.png b/zh-cn/application-dev/reference/arkui-js/figures/violet.png deleted file mode 100644 index e9a0799a203fdd7bd41fa5175585dc170a20156e..0000000000000000000000000000000000000000 Binary files a/zh-cn/application-dev/reference/arkui-js/figures/violet.png and /dev/null differ diff --git a/zh-cn/application-dev/reference/arkui-js/figures/wheat.png b/zh-cn/application-dev/reference/arkui-js/figures/wheat.png deleted file mode 100644 index 8a5c7039b580128e75299672dc5438151dcf3572..0000000000000000000000000000000000000000 Binary files a/zh-cn/application-dev/reference/arkui-js/figures/wheat.png and /dev/null differ diff --git a/zh-cn/application-dev/reference/arkui-js/figures/whitesmoke.png b/zh-cn/application-dev/reference/arkui-js/figures/whitesmoke.png deleted file mode 100644 index 6dc88e656c293c2e65939e4a793684488dfc81be..0000000000000000000000000000000000000000 Binary files a/zh-cn/application-dev/reference/arkui-js/figures/whitesmoke.png and /dev/null differ diff --git a/zh-cn/application-dev/reference/arkui-js/figures/yellowgreen.png b/zh-cn/application-dev/reference/arkui-js/figures/yellowgreen.png deleted file mode 100644 index f89e20a55ba1e81f2cbda2bd0241edefadbe7149..0000000000000000000000000000000000000000 Binary files a/zh-cn/application-dev/reference/arkui-js/figures/yellowgreen.png and /dev/null differ diff --git a/zh-cn/application-dev/reference/arkui-js/figures/zh-cn_image_0000001169309930.png b/zh-cn/application-dev/reference/arkui-js/figures/zh-cn_image_0000001169309930.png deleted file mode 100644 index 072d846a3cd629316cd0dcf25d5e9e1e1d3e0dc4..0000000000000000000000000000000000000000 Binary files a/zh-cn/application-dev/reference/arkui-js/figures/zh-cn_image_0000001169309930.png and /dev/null differ diff --git a/zh-cn/application-dev/reference/arkui-js/figures/zh-cn_image_0000001173324847.png b/zh-cn/application-dev/reference/arkui-js/figures/zh-cn_image_0000001193704354.png similarity index 100% rename from zh-cn/application-dev/reference/arkui-js/figures/zh-cn_image_0000001173324847.png rename to zh-cn/application-dev/reference/arkui-js/figures/zh-cn_image_0000001193704354.png diff --git a/zh-cn/application-dev/reference/arkui-js/figures/zh-cn_image_0000001236697937.png b/zh-cn/application-dev/reference/arkui-js/figures/zh-cn_image_0000001236697937.png new file mode 100644 index 0000000000000000000000000000000000000000..8cc5fef8ddb3f1af9d6b231f9183f5094faf5434 Binary files /dev/null and b/zh-cn/application-dev/reference/arkui-js/figures/zh-cn_image_0000001236697937.png differ diff --git a/zh-cn/application-dev/reference/arkui-js/figures/zh-cn_image_0000001127125268.png b/zh-cn/application-dev/reference/arkui-js/figures/zh-cn_image_0000001238184345.png similarity index 100% rename from zh-cn/application-dev/reference/arkui-js/figures/zh-cn_image_0000001127125268.png rename to zh-cn/application-dev/reference/arkui-js/figures/zh-cn_image_0000001238184345.png diff --git a/zh-cn/application-dev/reference/arkui-js/js-appendix-types.md b/zh-cn/application-dev/reference/arkui-js/js-appendix-types.md deleted file mode 100644 index 7328c141b88f9c663459aaa9634d4e7c402ea67b..0000000000000000000000000000000000000000 --- a/zh-cn/application-dev/reference/arkui-js/js-appendix-types.md +++ /dev/null @@ -1,1099 +0,0 @@ -# 类型说明 - -## 长度类型 - - - - - - - - - - - - - - - - -

名称

-

类型定义

-

描述

-

length

-

string | number

-

用于描述尺寸单位，输入为number类型时，使用px单位；输入为string类型时，需要显式指定像素单位，当前支持的像素单位有：

-
  • px：逻辑尺寸单位。
  • fp6+：字体尺寸单位，会随系统字体大小设置发生变化，仅支持文本类组件设置相应的字体大小。
-

percentage

-

string

-

百分比尺寸单位，如“50%”。

-
- -## 颜色类型 - - - - - - - - - - - - -

名称

-

类型定义

-

描述

-

color

-

string | 颜色枚举字符串

-

用于描述颜色信息。

-
字符串格式如下：
  • 'rgb(255, 255, 255)'
  • 'rgba(255, 255, 255, 1.0)'
  • HEX格式：'#rrggbb'，'#aarrggbb'
  • 枚举格式：'black'，'white'。
    说明：

    JS脚本中不支持颜色枚举格式。

    -
    -
-
-
- -**表 1** 当前支持的颜色枚举 - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - -

枚举名称

-

对应颜色

-

颜色

-

aliceblue

-

#f0f8ff

-

-

antiquewhite

-

#faebd7

-

-

aqua

-

#00ffff

-

-

aquamarine

-

#7fffd4

-

-

azure

-

#f0ffff

-

-

beige

-

#f5f5dc

-

-

bisque

-

#ffe4c4

-

-

black

-

#000000

-

-

blanchedalmond

-

#ffebcd

-

-

blue

-

#0000ff

-

-

blueviolet

-

#8a2be2

-

-

brown

-

#a52a2a

-

-

burlywood

-

#deB887

-

-

cadetblue

-

#5f9ea0

-

-

chartreuse

-

#7fff00

-

-

chocolate

-

#d2691e

-

-

coral

-

#ff7f50

-

-

cornflowerblue

-

#6495ed

-

-

cornsilk

-

#fff8dc

-

-

crimson

-

#dc143c

-

-

cyan

-

#00ffff

-

-

darkblue

-

#00008b

-

-

darkcyan

-

#008b8b

-

-

darkgoldenrod

-

#b8860b

-

-

darkgray

-

#a9a9a9

-

-

darkgreen

-

#006400

-

-

darkgrey

-

#a9a9a9

-

-

darkkhaki

-

#bdb76b

-

-

darkmagenta

-

#8b008b

-

-

darkolivegreen

-

#556b2f

-

-

darkorange

-

#ff8c00

-

-

darkorchid

-

#9932cc

-

-

darkred

-

#8b0000

-

-

darksalmon

-

#e9967a

-

-

darkseagreen

-

#8fbc8f

-

-

darkslateblue

-

#483d8b

-

-

darkslategray

-

#2f4f4f

-

-

darkslategrey

-

#2f4f4f

-

-

darkturquoise

-

#00ced1

-

-

darkviolet

-

#9400d3

-

-

deeppink

-

#ff1493

-

-

deepskyblue

-

#00bfff

-

-

dimgray

-

#696969

-

-

dimgrey

-

#696969

-

-

dodgerblue

-

#1e90ff

-

-

firebrick

-

#b22222

-

-

floralwhite

-

#fffaf0

-

-

forestgreen

-

#228b22

-

-

fuchsia

-

#ff00ff

-

-

gainsboro

-

#dcdcdc

-

-

ghostwhite

-

#f8f8ff

-

-

gold

-

#ffd700

-

-

goldenrod

-

#daa520

-

-

gray

-

#808080

-

-

green

-

#008000

-

-

greenyellow

-

#adff2f

-

-

grey

-

#808080

-

-

honeydew

-

#f0fff0

-

-

hotpink

-

#ff69b4

-

-

indianred

-

#cd5c5c

-

-

indigo

-

#4b0082

-

-

ivory

-

#fffff0

-

-

khaki

-

#f0e68c

-

-

lavender

-

#e6e6fa

-

-

lavenderblush

-

#fff0f5

-

-

lawngreen

-

#7cfc00

-

-

lemonchiffon

-

#fffacd

-

-

lightblue

-

#add8e6

-

-

lightcoral

-

#f08080

-

-

lightcyan

-

#e0ffff

-

-

lightgoldenrodyellow

-

#fafad2

-

-

lightgray

-

#d3d3d3

-

-

lightgreen

-

#90ee90

-

-

lightpink

-

#ffb6c1

-

-

lightsalmon

-

#ffa07a

-

-

lightseagreen

-

#20b2aa

-

-

lightskyblue

-

#87cefa

-

-

lightslategray

-

#778899

-

-

lightslategrey

-

#778899

-

-

lightsteelblue

-

#b0c4de

-

-

lightyellow

-

#ffffe0

-

-

lime

-

#00ff00

-

-

limegreen

-

#32cd32

-

-

linen

-

#faf0e6

-

-

magenta

-

#ff00ff

-

-

maroon

-

#800000

-

-

mediumaquamarine

-

#66cdaa

-

-

mediumblue

-

#0000cd

-

-

mediumorchid

-

#ba55d3

-

-

mediumpurple

-

#9370db

-

-

mediumseagreen

-

#3cb371

-

-

mediumslateblue

-

#7b68ee

-

-

mediumspringgreen

-

#00fa9a

-

-

mediumturquoise

-

#48d1cc

-

-

mediumvioletred

-

#c71585

-

-

midnightblue

-

#191970

-

-

mintcream

-

#f5fffa

-

-

mistyrose

-

#ffe4e1

-

-

moccasin

-

#ffe4b5

-

-

navajowhite

-

#ffdead

-

-

navy

-

#000080

-

-

oldlace

-

#fdf5e6

-

-

olive

-

#808000

-

-

olivedrab

-

#6b8e23

-

-

orange

-

#ffa500

-

-

orangered

-

#ff4500

-

-

orchid

-

#da70d6

-

-

palegoldenrod

-

#eee8aa

-

-

palegreen

-

#98fb98

-

-

paleturquoise

-

#afeeee

-

-

palevioletred

-

#db7093

-

-

papayawhip

-

#ffefd5

-

-

peachpuff

-

#ffdab9

-

-

peru

-

#cd853f

-

-

pink

-

#ffc0cb

-

-

plum

-

#dda0dd

-

-

powderblue

-

#b0e0e6

-

-

purple

-

#800080

-

-

rebeccapurple

-

#663399

-

-

red

-

#ff0000

-

-

rosybrown

-

#bc8f8f

-

-

royalblue

-

#4169e1

-

-

saddlebrown

-

#8b4513

-

-

salmon

-

#fa8072

-

-

sandybrown

-

#f4a460

-

-

seagreen

-

#2e8b57

-

-

seashell

-

#fff5ee

-

-

sienna

-

#a0522d

-

-

silver

-

#c0c0c0

-

-

skyblue

-

#87ceeb

-

-

slateblue

-

#6a5acd

-

-

slategray

-

#708090

-

-

slategrey

-

#708090

-

-

snow

-

#fffafa

-

-

springgreen

-

#00ff7f

-

-

steelblue

-

#4682b4

-

-

tan

-

#d2b48c

-

-

teal

-

#008080

-

-

thistle

-

#d8Bfd8

-

-

tomato

-

#ff6347

-

-

turquoise

-

#40e0d0

-

-

violet

-

#ee82ee

-

-

wheat

-

#f5deb3

-

-

white

-

#ffffff

-

-

whitesmoke

-

#f5f5f5

-

-

yellow

-

#ffff00

-

-

yellowgreen

-

#9acd32

-

-
- diff --git a/zh-cn/application-dev/reference/arkui-js/js-appendix.md b/zh-cn/application-dev/reference/arkui-js/js-appendix.md deleted file mode 100644 index 30905dbc91d4d700576235f9badd9e78bcab376a..0000000000000000000000000000000000000000 --- a/zh-cn/application-dev/reference/arkui-js/js-appendix.md +++ /dev/null @@ -1,5 +0,0 @@ -# 附录 - -- **[类型说明](js-appendix-types.md)** - - diff --git a/zh-cn/application-dev/reference/arkui-js/js-components-basic-button.md b/zh-cn/application-dev/reference/arkui-js/js-components-basic-button.md index 3a54e3a64126b6e99924089ef51d03048bde1419..d763b53429b03e67322337b3039ba60aa127da9b 100644 --- a/zh-cn/application-dev/reference/arkui-js/js-components-basic-button.md +++ b/zh-cn/application-dev/reference/arkui-js/js-components-basic-button.md @@ -10,74 +10,73 @@ 除支持[通用属性](js-components-common-attributes.md)外，还支持如下属性： - -

名称

+ - - - - - - - - - - - - - - - - - - - - - - - - - - - - - @@ -85,126 +84,125 @@ ## 样式 -**type设置为非arc时：** +### type设置为非arc 除支持[通用样式](js-components-common-styles.md)外，还支持如下样式： - -

名称

类型

+

类型

默认值

+

默认值

必填

+

必填

描述

+

描述

type

+

type

string

+

string

-

+

-

否

+

否

不支持动态修改。如果该属性缺省，展示类胶囊型按钮，不同于胶囊类型，四边圆角可以通过border-radius分别指定，如果需要设置该属性，则可选值包括如下：

-
  • capsule：胶囊型按钮，带圆角按钮，有背景色和文本；
  • circle：圆形按钮，支持放置图标；
  • text：文本按钮，仅包含文本显示；
  • arc：弧形按钮，仅支持智能穿戴；
  • download：下载按钮，额外增加下载进度条功能，仅支持手机和智慧屏。
+

不支持动态修改。如果该属性缺省，展示类胶囊型按钮，不同于胶囊类型，四边圆角可以通过border-radius分别指定，如果需要设置该属性，则可选值包括如下：

+
  • capsule：胶囊型按钮，带圆角按钮，有背景色和文本；
  • circle：圆形按钮，支持放置图标；
  • text：文本按钮，仅包含文本显示；
  • arc：弧形按钮，仅支持智能穿戴；
  • download：下载按钮，额外增加下载进度条功能，仅支持手机和智慧屏。

value

+

value

string

+

string

-

+

-

否

+

否

button的文本值。

+

button的文本值。

icon

+

icon

string

+

string

-

+

-

否

+

否

button的图标路径，图标格式为jpg，png和svg。

+

button的图标路径，图标格式为jpg，png和svg。

placement5+

+

placement5+

string

+

string

end

+

end

否

+

否

仅在type属性为缺省时生效，设置图标位于文本的位置，可选值为：

-
  • start：图标位于文本起始处；
  • end：图标位于文本结束处；
  • top：图标位于文本上方；
  • bottom：图标位于文本下方。
+

仅在type属性为缺省时生效，设置图标位于文本的位置，可选值为：

+
  • start：图标位于文本起始处；
  • end：图标位于文本结束处；
  • top：图标位于文本上方；
  • bottom：图标位于文本下方。

waiting

+

waiting

boolean

+

boolean

false

+

false

否

+

否

waiting状态，waiting为true时展现等待中转圈效果，位于文本左侧。类型为download时不生效，不支持智能穿戴。

+

waiting状态，waiting为true时展现等待中转圈效果，位于文本左侧。类型为download时不生效，不支持智能穿戴。

名称

+ - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - @@ -215,87 +213,86 @@ >- 圆形按钮（type=circle）时，不支持文本相关样式； >- 文本按钮（type=text）时，自适应文本大小，不支持尺寸设置（radius，width，height），背景透明不支持background-color样式。 -**type设置为arc时：** +### type设置为arc 除支持[通用样式](js-components-common-styles.md)中background-color、opacity、display、visibility、position、\[left|top|right|bottom外，还支持如下样式： - -

名称

类型

+

类型

默认值

+

默认值

必填

+

必填

描述

+

描述

text-color

+

text-color

<color>

+

<color>

#ff007dff

+

#ff007dff

否

+

否

按钮的文本颜色。

+

按钮的文本颜色。

font-size

+

font-size

<length>

+

<length>

16px

+

16px

否

+

否

按钮的文本尺寸。

+

按钮的文本尺寸。

allow-scale

+

allow-scale

boolean

+

boolean

true

+

true

否

+

否

按钮的文本尺寸是否跟随系统设置字体缩放尺寸进行放大缩小。

-
说明：

如果在config描述文件中针对ability配置了fontSize的config-changes标签，则应用不会重启而直接生效。

+

按钮的文本尺寸是否跟随系统设置字体缩放尺寸进行放大缩小。

+
说明：

如果在config描述文件中针对ability配置了fontSize的config-changes标签，则应用不会重启而直接生效。

font-style

+

font-style

string

+

string

normal

+

normal

否

+

否

按钮的字体样式。

+

按钮的字体样式。

font-weight

+

font-weight

number | string

+

number | string

normal

+

normal

否

+

否

按钮的字体粗细。见text组件font-weight的样式属性。

+

按钮的字体粗细。见text组件font-weight的样式属性。

font-family

+

font-family

<string>

+

<string>

sans-serif

+

sans-serif

否

+

否

按钮的字体列表，用逗号分隔，每个字体用字体名或者字体族名设置。列表中第一个系统中存在的或者通过自定义字体指定的字体，会被选中作为文本的字体。

+

按钮的字体列表，用逗号分隔，每个字体用字体名或者字体族名设置。列表中第一个系统中存在的或者通过自定义字体指定的字体，会被选中作为文本的字体。

icon-width

+

icon-width

<length>

+

<length>

-

+

-

否

+

否

设置圆形按钮内部图标的宽，默认填满整个圆形按钮。

-
说明：

icon使用svg图源时必须设置该样式。

+

设置圆形按钮内部图标的宽，默认填满整个圆形按钮。

+
说明：

icon使用svg图源时必须设置该样式。

icon-height

+

icon-height

<length>

+

<length>

-

+

-

否

+

否

设置圆形按钮内部图标的高，默认填满整个圆形按钮。

-
说明：

icon使用svg图源时必须设置该样式。

+

设置圆形按钮内部图标的高，默认填满整个圆形按钮。

+
说明：

icon使用svg图源时必须设置该样式。

radius

+

radius

<length>

+

<length>

-

+

-

否

+

否

圆形按钮半径或者胶囊按钮圆角半径。在圆形按钮类型下该样式优先于通用样式的width和height样式。

+

按钮圆角半径。在圆形按钮类型下该样式优先于通用样式的width和height样式。

名称

+ - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - @@ -311,21 +308,20 @@ 类型为download时，支持如下方法： - -

名称

类型

+

类型

默认值

+

默认值

必填

+

必填

描述

+

描述

text-color

+

text-color

<color>

+

<color>

#de0000

+

#de0000

否

+

否

弧形按钮的文本颜色。

+

弧形按钮的文本颜色。

font-size

+

font-size

<length>

+

<length>

37.5px

+

37.5px

否

+

否

弧形按钮的文本尺寸。

+

弧形按钮的文本尺寸。

allow-scale

+

allow-scale

boolean

+

boolean

true

+

true

否

+

否

弧形按钮的文本尺寸是否跟随系统设置字体缩放尺寸进行放大缩小。

+

弧形按钮的文本尺寸是否跟随系统设置字体缩放尺寸进行放大缩小。

font-style

+

font-style

string

+

string

normal

+

normal

否

+

否

弧形按钮的字体样式。

+

弧形按钮的字体样式。

font-weight

+

font-weight

number | string

+

number | string

normal

+

normal

否

+

否

弧形按钮的字体粗细。见text组件font-weight的样式属性。

+

弧形按钮的字体粗细。见text组件font-weight的样式属性。

font-family

+

font-family

<string>

+

<string>

sans-serif

+

sans-serif

否

+

否

按钮的字体列表，用逗号分隔，每个字体用字体名或者字体族名设置。列表中第一个系统中存在的或者通过自定义字体指定的字体，会被选中作为文本的字体。

+

按钮的字体列表，用逗号分隔，每个字体用字体名或者字体族名设置。列表中第一个系统中存在的或者通过自定义字体指定的字体，会被选中作为文本的字体。

名称

+ - - - - - diff --git a/zh-cn/application-dev/reference/arkui-js/js-components-basic-chart.md b/zh-cn/application-dev/reference/arkui-js/js-components-basic-chart.md index 60d22aeea225cfc661a2fe0af97bdd1b6e041bd2..f9befe5cf7115b7226ca278d090f18009e0ccf25 100644 --- a/zh-cn/application-dev/reference/arkui-js/js-components-basic-chart.md +++ b/zh-cn/application-dev/reference/arkui-js/js-components-basic-chart.md @@ -14,91 +14,90 @@ 除支持[通用属性](js-components-common-attributes.md)外，还支持如下属性： - -

名称

参数

+

参数

描述

+

描述

setProgress

+

setProgress

{ progress:percent }

+

{ progress:percent }

设定下载按钮进度条进度，取值位于0-100区间内，当设置的值大于0时，下载按钮展现进度条。当设置的值大于等于100时，取消进度条显示。

-
说明：

浮在进度条上的文字通过value值进行变更。

+

设定下载按钮进度条进度，取值位于0-100区间内，当设置的值大于0时，下载按钮展现进度条。当设置的值大于等于100时，取消进度条显示。

+
说明：

浮在进度条上的文字通过value值进行变更。

名称

+ - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - @@ -108,50 +107,50 @@ **表 1** ChartOptions -

名称

类型

+

类型

默认值

+

默认值

必填

+

必填

描述

+

描述

type

+

type

string

+

string

line

+

line

否

+

否

设置图表类型（不支持动态修改），可选项有：

-
  • bar：柱状图。
  • line：线形图。
  • gauge：量规图。
  • progress5+：进度类圆形图表。
  • loading5+：加载类圆形图表。
  • rainbow5+：占比类圆形图表。
+

设置图表类型（不支持动态修改），可选项有：

+
  • bar：柱状图。
  • line：线形图。
  • gauge：量规图。
  • progress5+：进度类圆形图表。
  • loading5+：加载类圆形图表。
  • rainbow5+：占比类圆形图表。

options

+

options

ChartOptions

+

ChartOptions

-

+

-

否

+

否

图表参数设置，柱状图和线形图必须设置参数设置，量规图不生效。可以设置x轴、y轴的最小值、最大值、刻度数、是否显示，线条宽度、是否平滑等。（不支持动态修改）

+

图表参数设置，柱状图和线形图必须设置参数设置，量规图不生效。可以设置x轴、y轴的最小值、最大值、刻度数、是否显示，线条宽度、是否平滑等。（不支持动态修改）

datasets

+

datasets

Array<ChartDataset>

+

Array<ChartDataset>

-

+

-

否

+

否

数据集合，柱状图和线形图必须设置数据集合，量规图不生效。可以设置多条数据集及其背景色。

+

数据集合，柱状图和线形图必须设置数据集合，量规图不生效。可以设置多条数据集及其背景色。

segments5+

+

segments5+

DataSegment | Array<DataSegment>

+

DataSegment | Array<DataSegment>

-

+

-

否

+

否

进度类、加载类和占比类圆形图表使用的数据结构。

-

DataSegment针对进度类和加载类圆形图表使用，

-

Array<DataSegment>针对占比类图标使用，DataSegment最多9个。

-
说明：

仅手机和平板设备支持。

+

进度类、加载类和占比类圆形图表使用的数据结构。

+

DataSegment针对进度类和加载类圆形图表使用，

+

Array<DataSegment>针对占比类图标使用，DataSegment最多9个。

+
说明：

仅手机和平板设备支持。

effects5+

+

effects5+

boolean

+

boolean

true

+

true

否

+

否

是否开启占比类、进度类圆形图表特效。

-
说明：

仅手机和平板设备支持。

+

是否开启占比类、进度类圆形图表特效。

+
说明：

仅手机和平板设备支持。

animationduration6+

+

animationduration6+

number

+

number

3000

+

3000

否

+

否

设置占比类圆形图表展开动画时长，单位为ms。

-
说明：

仅手机和平板设备支持。

+

设置占比类圆形图表展开动画时长，单位为ms。

+
说明：

仅手机和平板设备支持。

名称

+ - - - - - - - - - - - - - - - - - - - @@ -161,63 +160,63 @@ **表 2** ChartDataset -

名称

类型

+

类型

默认值

+

默认值

必填

+

必填

描述

+

描述

xAxis

+

xAxis

ChartAxis

+

ChartAxis

-

+

-

是

+

是

x轴参数设置。可以设置x轴最小值、最大值、刻度数以及是否显示。

+

x轴参数设置。可以设置x轴最小值、最大值、刻度数以及是否显示。

yAxis

+

yAxis

ChartAxis

+

ChartAxis

-

+

-

是

+

是

y轴参数设置。可以设置y轴最小值、最大值、刻度数以及是否显示。

+

y轴参数设置。可以设置y轴最小值、最大值、刻度数以及是否显示。

series

+

series

ChartSeries

+

ChartSeries

-

+

-

否

+

否

数据序列参数设置。可以设置1）线的样式，如线宽、是否平滑；2）设置线最前端位置白点的样式和大小。

-
说明：

仅线形图支持。

+

数据序列参数设置。可以设置1）线的样式，如线宽、是否平滑；2）设置线最前端位置白点的样式和大小。

+
说明：

仅线形图支持。

名称

+ - - - - - - - - - - - - - - - - - - - - - - - - @@ -227,78 +226,78 @@ **表 3** ChartAxis -

名称

类型

+

类型

默认值

+

默认值

必填

+

必填

描述

+

描述

strokeColor

+

strokeColor

<color>

+

<color>

#ff6384

+

#ff6384

否

+

否

线条颜色。

-
说明：

仅线形图支持。

+

线条颜色。

+
说明：

仅线形图支持。

fillColor

+

fillColor

<color>

+

<color>

#ff6384

+

#ff6384

否

+

否

填充颜色。线形图表示填充的渐变颜色。

+

填充颜色。线形图表示填充的渐变颜色。

data

+

data

Array<number> | Array<Point>5+

+

Array<number> | Array<Point>5+

-

+

-

是

+

是

设置绘制线或柱中的点集。

+

设置绘制线或柱中的点集。

gradient

+

gradient

boolean

+

boolean

false

+

false

否

+

否

设置是否显示填充渐变颜色。

-
说明：

仅线形图支持。

+

设置是否显示填充渐变颜色。

+
说明：

仅线形图支持。

名称

+ - - - - - - - - - - - - - - - - - - - - - - - - - - - - - @@ -307,71 +306,71 @@ **表 4** ChartSeries -

名称

类型

+

类型

默认值

+

默认值

必填

+

必填

描述

+

描述

min

+

min

number

+

number

0

+

0

否

+

否

轴的最小值。

-
说明：

仅线形图支持负数。

+

轴的最小值。

+
说明：

仅线形图支持负数。

max

+

max

number

+

number

100

+

100

否

+

否

轴的最大值。

-
说明：

仅线形图支持负数。

+

轴的最大值。

+
说明：

仅线形图支持负数。

axisTick

+

axisTick

number

+

number

10

+

10

否

+

否

轴显示的刻度数量。

-
说明：

仅支持1~20，且具体显示的效果与如下计算值有关（图的宽度所占的像素/（max-min））。

-

在柱状图中，每组数据显示的柱子数量与刻度数量一致，且柱子显示在刻度处。

+

轴显示的刻度数量。

+
说明：

仅支持1~20，且具体显示的效果与如下计算值有关（图的宽度所占的像素/（max-min））。

+

在柱状图中，每组数据显示的柱子数量与刻度数量一致，且柱子显示在刻度处。

display

+

display

boolean

+

boolean

false

+

false

否

+

否

是否显示轴。

+

是否显示轴。

color

+

color

<color>

+

<color>

#c0c0c0

+

#c0c0c0

否

+

否

轴颜色。

+

轴颜色。

名称

+ - - - - - - - - - - - - - - - - - - - - - - - - - - - - - @@ -380,38 +379,38 @@ **表 5** ChartLineStyle -

名称

类型

+

类型

默认值

+

默认值

必填

+

必填

描述

+

描述

lineStyle

+

lineStyle

ChartLineStyle

+

ChartLineStyle

-

+

-

否

+

否

线样式设置，如线宽、是否平滑。

+

线样式设置，如线宽、是否平滑。

headPoint

+

headPoint

PointStyle

+

PointStyle

-

+

-

否

+

否

线最前端位置白点的样式和大小。

+

线最前端位置白点的样式和大小。

topPoint

+

topPoint

PointStyle

+

PointStyle

-

+

-

否

+

否

最高点的样式和大小。

+

最高点的样式和大小。

bottomPoint

+

bottomPoint

PointStyle

+

PointStyle

-

+

-

否

+

否

最低点的样式和大小。

+

最低点的样式和大小。

loop

+

loop

ChartLoop

+

ChartLoop

-

+

-

否

+

否

设置屏幕显示满时，是否需要重头开始绘制。

+

设置屏幕显示满时，是否需要重头开始绘制。

名称

+ - - - - - - - - - - - - - - @@ -420,72 +419,72 @@ **表 6** PointStyle -

名称

类型

+

类型

默认值

+

默认值

必填

+

必填

描述

+

描述

width

+

width

<length>

+

<length>

1px

+

1px

否

+

否

线宽设置。

+

线宽设置。

smooth

+

smooth

boolean

+

boolean

false

+

false

否

+

否

是否平滑。

+

是否平滑。

名称

+ - - - - - - - - - - - - - - - - - - - - - - - - - - - - - @@ -494,38 +493,38 @@ **表 7** ChartLoop -

名称

类型

+

类型

默认值

+

默认值

必填

+

必填

描述

+

描述

shape

+

shape

string

+

string

circle

+

circle

否

+

否

高亮点的形状。可选值为：

-
  • circle：圆形。
  • square：方形。
  • triangle：三角形。
+

高亮点的形状。可选值为：

+
  • circle：圆形。
  • square：方形。
  • triangle：三角形。

size

+

size

<length>

+

<length>

5px

+

5px

否

+

否

高亮点的大小。

+

高亮点的大小。

strokeWidth

+

strokeWidth

<length>

+

<length>

1px

+

1px

否

+

否

边框宽度

+

边框宽度

strokeColor

+

strokeColor

<color>

+

<color>

#ff0000

+

#ff0000

否

+

否

边框颜色。

+

边框颜色。

fillColor

+

fillColor

<color>

+

<color>

#ff0000

+

#ff0000

否

+

否

填充颜色。

+

填充颜色。

名称

+ - - - - - - - - - - - - - - @@ -534,93 +533,93 @@ **表 8** Point5+ -

名称

类型

+

类型

默认值

+

默认值

必填

+

必填

描述

+

描述

margin

+

margin

<length>

+

<length>

1

+

1

否

+

否

擦除点的个数（最新绘制的点与最老的点之间的横向距离）。注意：轻量设备margin和topPoint/bottomPoint/headPoint同时使用时，有概率出现point正好位于擦除区域的情况，导致point不可见，因此不建议同时使用。

+

擦除点的个数（最新绘制的点与最老的点之间的横向距离）。注意：轻量设备margin和topPoint/bottomPoint/headPoint同时使用时，有概率出现point正好位于擦除区域的情况，导致point不可见，因此不建议同时使用。

gradient

+

gradient

boolean

+

boolean

false

+

false

否

+

否

是否需要渐变擦除。

+

是否需要渐变擦除。

名称

+ - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - @@ -629,136 +628,135 @@ **表 9** DataSegment5+ -

名称

类型

+

类型

默认值

+

默认值

必填

+

必填

描述

+

描述

value

+

value

number

+

number

0

+

0

是

+

是

表示绘制点的Y轴坐标。

+

表示绘制点的Y轴坐标。

pointStyle

+

pointStyle

PointStyle

+

PointStyle

-

+

-

否

+

否

表示当前数据点的绘制样式。

+

表示当前数据点的绘制样式。

description

+

description

string

+

string

-

+

-

否

+

否

表示当前点的注释内容。

+

表示当前点的注释内容。

textLocation

+

textLocation

string

+

string

-

+

-

否

+

否

可选值为top，bottom，none。分别表示注释的绘制位置位于点的上方，下方，以及不绘制。

+

可选值为top，bottom，none。分别表示注释的绘制位置位于点的上方，下方，以及不绘制。

textColor

+

textColor

<color>

+

<color>

#000000

+

#000000

否

+

否

表示注释文字的颜色。

+

表示注释文字的颜色。

lineDash

+

lineDash

string

+

string

solid

+

solid

否

+

否

表示绘制当前线段虚线的样式。“dashed， 5， 5”表示纯虚线，绘制5px的实线后留5px的空白。“solid”表示绘制实线。

+

表示绘制当前线段虚线的样式。“dashed， 5， 5”表示纯虚线，绘制5px的实线后留5px的空白。“solid”表示绘制实线。

lineColor

+

lineColor

<color>

+

<color>

#000000

+

#000000

否

+

否

表示绘制当前线段的颜色。此颜色不设置会默认使用整体的strokeColor。

+

表示绘制当前线段的颜色。此颜色不设置会默认使用整体的strokeColor。

名称

+ - - - - - - - - - - - - - - - - - - - - - - - -

名称

类型

+

类型

默认值

+

默认值

必填

+

必填

描述

+

描述

startColor

+

startColor

Color

+

Color

-

+

-

否

+

否

起始位置的颜色，设置startColor必须设置endColor。不设置startColor时，会使用系统默认预置的颜色数组，具体颜色值见下表。

+

起始位置的颜色，设置startColor必须设置endColor。不设置startColor时，会使用系统默认预置的颜色数组，具体颜色值见下表。

endColor

+

endColor

Color

+

Color

-

+

-

否

+

否

终止位置的颜色，设置endColor必须设置startColor。

-

不设置startColor时，会使用系统默认预置的颜色数组。

+

终止位置的颜色，设置endColor必须设置startColor。

+

不设置startColor时，会使用系统默认预置的颜色数组。

value

+

value

number

+

number

0

+

0

是

+

是

占比数据的所占份额，最大100。

+

占比数据的所占份额，最大100。

name

+

name

string

+

string

-

+

-

否

+

否

此类数据的名称。

+

此类数据的名称。
- -

数据组

+ - - - - - - - - - - - - - - - - - - - - - - - - - - - - - @@ -766,28 +764,27 @@ 当类型为量规图时，还支持如下属性： - -

数据组

浅色主题

+

浅色主题

深色主题

+

深色主题

0

+

0

起始颜色：#f7ce00，结束颜色：#f99b11

+

起始颜色：#f7ce00，结束颜色：#f99b11

起始颜色：#d1a738，结束颜色：#eb933d

+

起始颜色：#d1a738，结束颜色：#eb933d

1

+

1

起始颜色：#f76223，结束颜色：#f2400a

+

起始颜色：#f76223，结束颜色：#f2400a

起始颜色：#e67d50，结束颜色：#d9542b

+

起始颜色：#e67d50，结束颜色：#d9542b

2

+

2

起始颜色：#f772ac，结束颜色：#e65392

+

起始颜色：#f772ac，结束颜色：#e65392

起始颜色：#d5749e，结束颜色：#d6568d

+

起始颜色：#d5749e，结束颜色：#d6568d

3

+

3

起始颜色：#a575eb，结束颜色：#a12df7

+

起始颜色：#a575eb，结束颜色：#a12df7

起始颜色：#9973d1，结束颜色：#5552d9

+

起始颜色：#9973d1，结束颜色：#5552d9

4

+

4

起始颜色：#7b79f7，结束颜色：#4b48f7

+

起始颜色：#7b79f7，结束颜色：#4b48f7

起始颜色：#7977d9，结束颜色：#f99b11

+

起始颜色：#7977d9，结束颜色：#f99b11

5

+

5

起始颜色：#4b8af3，结束颜色：#007dff

+

起始颜色：#4b8af3，结束颜色：#007dff

起始颜色：#4c81d9，结束颜色：#217bd9

+

起始颜色：#4c81d9，结束颜色：#217bd9

6

+

6

起始颜色：#73c1e6，结束颜色：#4fb4e3

+

起始颜色：#73c1e6，结束颜色：#4fb4e3

起始颜色：#5ea6d1，结束颜色：#4895c2

+

起始颜色：#5ea6d1，结束颜色：#4895c2

7

+

7

起始颜色：#a5d61d，结束颜色：#69d14f

+

起始颜色：#a5d61d，结束颜色：#69d14f

起始颜色：#91c23a，结束颜色：#70ba5d

+

起始颜色：#91c23a，结束颜色：#70ba5d

8

+

8

起始颜色：#a2a2b0，结束颜色：#8e8e93

+

起始颜色：#a2a2b0，结束颜色：#8e8e93

起始颜色：#8c8c99，结束颜色：#6b6b76

+

起始颜色：#8c8c99，结束颜色：#6b6b76

名称

+ - - - - - - - - - @@ -797,132 +794,131 @@ 除支持[通用样式](js-components-common-styles.md)外，还支持如下样式： - -

名称

类型

+

类型

默认值

+

默认值

必填

+

必填

描述

+

描述

percent

+

percent

number

+

number

0

+

0

否

+

否

当前值占整体的百分比，取值范围为0-100。

+

当前值占整体的百分比，取值范围为0-100。

名称

+ - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - @@ -936,23 +932,22 @@ 除支持[通用方法](js-components-common-methods.md)外，还支持如下方法： - -

名称

类型

+

类型

默认值

+

默认值

必填

+

必填

描述

+

描述

stroke-width

+

stroke-width

<length>

+

<length>

32px（量规）

-

24px（占比类圆形图表）

+

32px（量规）

+

24px（占比类圆形图表）

否

+

否

量规、占比类圆形图表组件刻度条的宽度。

+

量规、占比类圆形图表组件刻度条的宽度。

start-angle

+

start-angle

<deg>

+

<deg>

240（量规）

-

0（占比类圆形图表）

+

240（量规）

+

0（占比类圆形图表）

否

+

否

量规、占比类圆形图表组件刻度条起始角度，以时钟0点为基线。范围为0到360。

+

量规、占比类圆形图表组件刻度条起始角度，以时钟0点为基线。范围为0到360。

total-angle

+

total-angle

<deg>

+

<deg>

240（量规）

-

360（占比类圆形图表）

+

240（量规）

+

360（占比类圆形图表）

否

+

否

量规、占比类圆形图表组件刻度条总长度，范围为-360到360，负数标识起点到终点为逆时针。

+

量规、占比类圆形图表组件刻度条总长度，范围为-360到360，负数标识起点到终点为逆时针。

center-x

+

center-x

<length>

+

<length>

-

+

-

否

+

否

量规组件刻度条中心位置，该样式优先于通用样式的position样式。该样式需要和center-y和radius一起配置才能生效。（仅量规图支持）

+

量规组件刻度条中心位置，该样式优先于通用样式的position样式。该样式需要和center-y和radius一起配置才能生效。（仅量规图支持）

center-y

+

center-y

<length>

+

<length>

-

+

-

否

+

否

量规组件刻度条中心位置，该样式优先于通用样式的position样式。该样式需要和center-x和radius一起配置才能生效。（仅量规图支持）

+

量规组件刻度条中心位置，该样式优先于通用样式的position样式。该样式需要和center-x和radius一起配置才能生效。（仅量规图支持）

radius

+

radius

<length>

+

<length>

-

+

-

否

+

否

量规组件刻度条半径，该样式优先于通用样式的width和height样式。该样式需要和center-x和center-y一起配置才能生效。（仅量规图支持）

+

量规组件刻度条半径，该样式优先于通用样式的width和height样式。该样式需要和center-x和center-y一起配置才能生效。（仅量规图支持）

colors

+

colors

Array

+

Array

-

+

-

否

+

否

量规组件刻度条每一个区段的颜色。

-

如：colors: #ff0000, #00ff00。（仅量规图支持）

+

量规组件刻度条每一个区段的颜色。

+

如：colors: #ff0000, #00ff00。（仅量规图支持）

weights

+

weights

Array

+

Array

-

+

-

否

+

否

量规组件刻度条每一个区段的权重。

-

如：weights: 2, 2。（仅量规图支持）

+

量规组件刻度条每一个区段的权重。

+

如：weights: 2, 2。（仅量规图支持）

font-family5+

+

font-family5+

Array

+

Array

-

+

-

否

+

否

表示绘制注释的字体样式，支持自定义字体。

+

表示绘制注释的字体样式，支持自定义字体。

font-size5+

+

font-size5+

<length>

+

<length>

-

+

-

否

+

否

表示绘制注释的字体的大小。

+

表示绘制注释的字体的大小。

方法

+ - - - - - diff --git a/zh-cn/application-dev/reference/arkui-js/js-components-basic-divider.md b/zh-cn/application-dev/reference/arkui-js/js-components-basic-divider.md index b5fc0f0c36e17dee76a83e04c0719721bec9db0c..0fa9d6c594146179d6d468e93368c3c8cb533481 100644 --- a/zh-cn/application-dev/reference/arkui-js/js-components-basic-divider.md +++ b/zh-cn/application-dev/reference/arkui-js/js-components-basic-divider.md @@ -14,184 +14,182 @@ 除支持[通用属性](js-components-common-attributes.md)外，还支持如下属性： - -

方法

参数

+

参数

描述

+

描述

append

+

append

{

-

serial: number, // 设置要更新的线形图数据下标

-

data: Array<number>, // 设置新增的数据

-

}

+

{

+

serial: number, // 设置要更新的线形图数据下标

+

data: Array<number>, // 设置新增的数据

+

}

往已有的数据序列中动态添加数据，根据serial指定目标序列，serial为datasets数组的下标，从0开始。注意：不会更新datasets[index].data。仅线形图支持，按横坐标加1递增（与xAxis min/max设置相关）。

+

往已有的数据序列中动态添加数据，根据serial指定目标序列，serial为datasets数组的下标，从0开始。注意：不会更新datasets[index].data。仅线形图支持，按横坐标加1递增（与xAxis min/max设置相关）。

名称

+ - - - - - - - - -

名称

类型

+

类型

默认值

+

默认值

必填

+

必填

描述

+

描述

vertical

+

vertical

boolean

+

boolean

false

+

false

否

+

否

使用水平分割线还是垂直分割线，默认水平。

+

使用水平分割线还是垂直分割线，默认水平。
>![](../../public_sys-resources/icon-note.gif) **说明：** ->- 不支持focusable、disabled属性。 +>不支持focusable、disabled属性。 ## 样式 仅支持如下样式： - -

名称

+ - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - diff --git a/zh-cn/application-dev/reference/arkui-js/js-components-basic-image-animator.md b/zh-cn/application-dev/reference/arkui-js/js-components-basic-image-animator.md index 8f78800c511547256baca3ea434f442ea18eb648..dff6cc80512cc66d65017fdeff34d09a528fd6e1 100644 --- a/zh-cn/application-dev/reference/arkui-js/js-components-basic-image-animator.md +++ b/zh-cn/application-dev/reference/arkui-js/js-components-basic-image-animator.md @@ -10,98 +10,97 @@ 除支持[通用属性](js-components-common-attributes.md)外，还支持如下属性： - -

名称

类型

+

类型

默认值

+

默认值

必填

+

必填

描述

+

描述

margin

+

margin

<length>

+

<length>

0

+

0

否

+

否

使用简写属性设置所有的外边距属性，该属性可以有1到4个值。

+

使用简写属性设置所有的外边距属性，该属性可以有1到4个值。

margin-[left|top|right|bottom]

+

margin-[left|top|right|bottom]

<length>

+

<length>

0

+

0

否

+

否

使用简写属性设置左、上、右、下外边距属性，类型length，单位px，默认值0。

+

使用简写属性设置左、上、右、下外边距属性，类型length，单位px，默认值0。

color

+

color

<color>

+

<color>

#08000000

+

#08000000

否

+

否

设置分割线颜色。

+

设置分割线颜色。

stroke-width

+

stroke-width

<length>

+

<length>

1

+

1

否

+

否

设置分割线宽度。

+

设置分割线宽度。

display

+

display

string

+

string

flex

+

flex

否

+

否

确定分割线所产生的框的类型。值flex/none，默认值flex。

+

确定分割线所产生的框的类型。值flex/none，默认值flex。

visibility

+

visibility

string

+

string

visible

+

visible

否

+

否

是否显示分割线。不可见的框会占用布局。visible代表显示元素，hidden代表不显示元素。

+

是否显示分割线。不可见的框会占用布局。visible代表显示元素，hidden代表不显示元素。

line-cap

+

line-cap

string

+

string

butt

+

butt

否

+

否

设置分割线条的端点样式，默认为butt，可选值为：

-
  • butt：分割线两端为平行线；
  • round：分割线两端额外添加半圆；
  • square：分割线两端额外添加半方形；
-
说明：

round和square会额外增加一个线宽的分割线长度。

+

设置分割线条的端点样式，默认为butt，可选值为：

+
  • butt：分割线两端为平行线；
  • round：分割线两端额外添加半圆；
  • square：分割线两端额外添加半方形；
+
说明：

round和square会额外增加一个线宽的分割线长度。

flex

+

flex

number

+

number

-

+

-

否

+

否

规定了分割线如何适应父组件中的可用空间。它作为一个简写属性，用来设置组件的flex-grow。

-
说明：

仅父容器为<div>、<list-item>、<tabs>时生效。

+

规定了分割线如何适应父组件中的可用空间。它作为一个简写属性，用来设置组件的flex-grow。

+
说明：

仅父容器为<div>、<list-item>、<tabs>时生效。

flex-grow

+

flex-grow

number

+

number

0

+

0

否

+

否

设置分割线的伸展因子，指定父组件容器主轴方向上剩余空间（容器本身大小减去所有flex项加起来的大小）的分配系数。0为不伸展。

-
说明：

仅父容器为<div>、<list-item>、<tabs>时生效。

+

设置分割线的伸展因子，指定父组件容器主轴方向上剩余空间（容器本身大小减去所有flex项加起来的大小）的分配系数。0为不伸展。

+
说明：

仅父容器为<div>、<list-item>、<tabs>时生效。

-

+

flex-shrink

+

flex-shrink

number

+

number

1

+

1

否

+

否

设置分割线的收缩因子，flex元素仅在默认宽度之和大于容器的时候才会发生收缩，0为不收缩。

-
说明：

仅父容器为<div>、<list-item>、<tabs>时生效。

+

设置分割线的收缩因子，flex元素仅在默认宽度之和大于容器的时候才会发生收缩，0为不收缩。

+
说明：

仅父容器为<div>、<list-item>、<tabs>时生效。

flex-basis

+

flex-basis

<length>

-

+

<length>

+

-

+

-

否

+

否

设置分割线在主轴方向上的初始大小。

-
说明：

仅父容器为<div>、<list-item>、<tabs>时生效。

+

设置分割线在主轴方向上的初始大小。

+
说明：

仅父容器为<div>、<list-item>、<tabs>时生效。

名称

+ - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - @@ -110,82 +109,82 @@ **表 1** ImageFrame说明 -

名称

类型

+

类型

默认值

+

默认值

必填

+

必填

描述

+

描述

images

+

images

Array<ImageFrame>

+

Array<ImageFrame>

-

+

-

是

+

是

设置图片帧信息集合。每一帧的帧信息包含图片路径、图片大小和图片位置信息。目前支持以下图片格式：png、jpg。ImageFrame的详细说明请见表1。

-
说明：

使用时需要使用数据绑定的方式，如images = {{images}}，js中声明相应变量：images: [{src: "/common/heart-rate01.png"}, {src: "/common/heart-rate02.png"}]。

-

js中声明相应变量：images: [{src: "/common/heart-rate01.png", duration: "100"}, {src: "/common/heart-rate02.png", duration: "200"}]。支持配置每一帧图片的时长，单位毫秒。6+

+

设置图片帧信息集合。每一帧的帧信息包含图片路径、图片大小和图片位置信息。目前支持以下图片格式：png、jpg。ImageFrame的详细说明请见表1。

+
说明：

使用时需要使用数据绑定的方式，如images = {{images}}，js中声明相应变量：images: [{src: "/common/heart-rate01.png"}, {src: "/common/heart-rate02.png"}]。

+

js中声明相应变量：images: [{src: "/common/heart-rate01.png", duration: "100"}, {src: "/common/heart-rate02.png", duration: "200"}]。支持配置每一帧图片的时长，单位毫秒。6+

predecode6+

+

predecode6+

number

+

number

0

+

0

否

+

否

是否启用预解码，默认值为0，即不启用预解码，如该值设为2，则播放当前页时会提前加载后面两张图片至缓存以提升性能。

+

是否启用预解码，默认值为0，即不启用预解码，如该值设为2，则播放当前页时会提前加载后面两张图片至缓存以提升性能。

iteration

+

iteration

number | string

+

number | string

infinite

+

infinite

否

+

否

设置帧动画播放次数。number表示固定次数，infinite枚举表示无限次数播放。

+

设置帧动画播放次数。number表示固定次数，infinite枚举表示无限次数播放。

reverse

+

reverse

boolean

+

boolean

false

+

false

否

+

否

设置播放顺序。false表示从第1张图片播放到最后1张图片； true表示从最后1张图片播放到第1张图片。

+

设置播放顺序。false表示从第1张图片播放到最后1张图片； true表示从最后1张图片播放到第1张图片。

fixedsize

+

fixedsize

boolean

+

boolean

true

+

true

否

+

否

设置图片大小是否固定为组件大小。 true表示图片大小与组件大小一致，此时设置图片的width 、height 、top 和left属性是无效的。false表示每一张图片的 width 、height 、top和left属性都要单独设置。

+

设置图片大小是否固定为组件大小。 true表示图片大小与组件大小一致，此时设置图片的width 、height 、top 和left属性是无效的。false表示每一张图片的 width 、height 、top和left属性都要单独设置。

duration

+

duration

string

+

string

-

+

-

是

+

是

设置单次播放时长。单位支持[s(秒)|ms(毫秒)]，默认单位为ms。 duration为0时，不播放图片。 值改变只会在下一次循环开始时生效，当images中设置了单独的duration后，该属性设置无效。

+

设置单次播放时长。单位支持[s(秒)|ms(毫秒)]，默认单位为ms。 duration为0时，不播放图片。 值改变只会在下一次循环开始时生效，当images中设置了单独的duration后，该属性设置无效。

fillmode5+

+

fillmode5+

string

+

string

forwards

+

forwards

否

+

否

指定帧动画执行结束后的状态。可选项有：

-
  • none：恢复初始状态。
  • forwards：保持帧动画结束时的状态（在最后一个关键帧中定义）。
+

指定帧动画执行结束后的状态。可选项有：

+
  • none：恢复初始状态。
  • forwards：保持帧动画结束时的状态（在最后一个关键帧中定义）。

名称

+ - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - @@ -199,41 +198,40 @@ 除支持[通用事件](js-components-common-events.md)外，还支持如下事件： - -

名称

类型

+

类型

默认值

+

默认值

必填

+

必填

描述

+

描述

src

+

src

<uri>

+

<uri>

-

+

-

是

+

是

图片路径，图片格式为svg，png和jpg。

+

图片路径，图片格式为svg，png和jpg。

width

+

width

<length>

+

<length>

0

+

0

否

+

否

图片宽度。

+

图片宽度。

height

+

height

<length>

+

<length>

0

+

0

否

+

否

图片高度。

+

图片高度。

top

+

top

<length>

+

<length>

0

+

0

否

+

否

图片相对于组件左上角的纵向坐标。

+

图片相对于组件左上角的纵向坐标。

left

+

left

<length>

+

<length>

0

+

0

否

+

否

图片相对于组件左上角的横向坐标。

+

图片相对于组件左上角的横向坐标。

duration6+

+

duration6+

number

+

number

-

+

-

否

+

否

每一帧图片的播放时长，单位毫秒。

+

每一帧图片的播放时长，单位毫秒。

名称

+ - - - - - - - - - - - - - - @@ -243,49 +241,48 @@ 支持[通用方法](js-components-common-methods.md)外，还支持如下方法： - -

名称

参数

+

参数

描述

+

描述

start

+

start

-

+

-

帧动画启动时触发。

+

帧动画启动时触发。

pause

+

pause

-

+

-

帧动画暂停时触发。

+

帧动画暂停时触发。

stop

+

stop

-

+

-

帧动画结束时触发。

+

帧动画结束时触发。

resume

+

resume

-

+

-

帧动画恢复时触发。

+

帧动画恢复时触发。

名称

+ - - - - - - - - - - - - - - - - - diff --git a/zh-cn/application-dev/reference/arkui-js/js-components-basic-image.md b/zh-cn/application-dev/reference/arkui-js/js-components-basic-image.md index 2c6fc5216f99b44d18df2647567fa6a8382f1e1b..0983d9d761542fcffb8b8708607af958007b1dc1 100644 --- a/zh-cn/application-dev/reference/arkui-js/js-components-basic-image.md +++ b/zh-cn/application-dev/reference/arkui-js/js-components-basic-image.md @@ -10,41 +10,40 @@ 除支持[通用属性](js-components-common-attributes.md)外，还支持如下属性： - -

名称

参数

+

参数

描述

+

描述

start

+

start

-

+

-

开始播放图片帧动画。再次调用，重新从第1帧开始播放。

+

开始播放图片帧动画。再次调用，重新从第1帧开始播放。

pause

+

pause

-

+

-

暂停播放图片帧动画。

+

暂停播放图片帧动画。

stop

+

stop

-

+

-

停止播放图片帧动画。

+

停止播放图片帧动画。

resume

+

resume

-

+

-

继续播放图片帧。

+

继续播放图片帧。

getState

+

getState

-

+

-

获取播放状态。可能值有：

-
  • playing：播放中
  • paused：已暂停
  • stopped：已停止。
+

获取播放状态。可能值有：

+
  • playing：播放中
  • paused：已暂停
  • stopped：已停止。

名称

+ - - - - - - - - - - - - - - @@ -54,65 +53,64 @@ 除支持[通用样式](js-components-common-styles.md)外，还支持如下属性： - -

名称

类型

+

类型

默认值

+

默认值

必填

+

必填

描述

+

描述

src

+

src

string

+

string

-

+

-

否

+

否

图片的路径，支持本地路径，图片格式包括png、jpg、bmp、svg和gif。

-

支持Base64字符串6+。格式为data:image/[png | jpeg | bmp | webp];base64, [base64 data], 其中[base64 data]为Base64字符串数据。

-

支持dataability://的路径前缀，用于访问通过data ability提供的图片路径6+。

+

图片的路径，支持本地路径，图片格式包括png、jpg、bmp、svg和gif。

+

支持Base64字符串6+。格式为data:image/[png | jpeg | bmp | webp];base64, [base64 data], 其中[base64 data]为Base64字符串数据。

+

支持dataability://的路径前缀，用于访问通过data ability提供的图片路径6+。

alt

+

alt

string

+

string

-

+

-

否

+

否

占位图，当指定图片在加载中时显示。

+

占位图，当指定图片在加载中时显示。

名称

+ - - - - - - - - - - - - - - - - - - - - - - - - @@ -121,35 +119,35 @@ **表 1** object-fit 类型说明 -

名称

类型

+

类型

默认值

+

默认值

必填

+

必填

描述

+

描述

object-fit

+

object-fit

string

+

string

cover

+

cover

否

+

否

设置图片的缩放类型。可选值类型说明请见object-fit 类型说明。（不支持svg格式）

+

设置图片的缩放类型。可选值类型说明请见object-fit 类型说明。（不支持svg格式）

match-text-direction

+

match-text-direction

boolean

+

boolean

false

+

false

否

+

否

图片是否跟随文字方向。（不支持svg格式）

+

图片是否跟随文字方向。（不支持svg格式）

fit-original-size

+

fit-original-size

boolean

+

boolean

false

+

false

否

+

否

image组件在未设置宽高的情况下是否适应图源尺寸（该属性为true时object-fit属性不生效），svg类型图源不支持该属性。

+

image组件在未设置宽高的情况下是否适应图源尺寸（该属性为true时object-fit属性不生效），svg类型图源不支持该属性。

object-position7+

+

object-position7+

string

+

string

0px 0px

+

0px 0px

否

+

否

设置图片在组件内展示的位置。

-

设置类型有两种：

-

1. 像素，单位px，示例 15px 15px 代表X轴或者Y轴移动的位置

-

2. 字符，可选值：

-
  • left 图片显示在组件左侧；
  • top 图片显示在组件顶部位置；
  • right 图片显示在组件右侧位置；
  • bottom图片显示在组件底部位置。
+

设置图片在组件内展示的位置。

+

设置类型有两种：

+

1. 像素，单位px，示例 15px 15px 代表X轴或者Y轴移动的位置

+

2. 字符，可选值：

+
  • left 图片显示在组件左侧；
  • top 图片显示在组件顶部位置；
  • right 图片显示在组件右侧位置；
  • bottom图片显示在组件底部位置。

类型

+ - - - - - - - - - - - @@ -167,27 +165,26 @@ 除支持[通用事件](js-components-common-events.md)外，还支持如下事件： - -

类型

描述

+

描述

cover

+

cover

保持宽高比进行缩小或者放大，使得图片两边都大于或等于显示边界，居中显示。

+

保持宽高比进行缩小或者放大，使得图片两边都大于或等于显示边界，居中显示。

contain

+

contain

保持宽高比进行缩小或者放大，使得图片完全显示在显示边界内，居中显示。

+

保持宽高比进行缩小或者放大，使得图片完全显示在显示边界内，居中显示。

fill

+

fill

不保持宽高比进行放大缩小，使得图片填充满显示边界。

+

不保持宽高比进行放大缩小，使得图片填充满显示边界。

none

+

none

保持原有尺寸进行居中显示。

+

保持原有尺寸进行居中显示。

scale-down

+

scale-down

保持宽高比居中显示，图片缩小或者保持不变。

+

保持宽高比居中显示，图片缩小或者保持不变。

名称

+ - - - - - - - - @@ -202,7 +199,7 @@ ```
- +

名称

参数

+

参数

描述

+

描述

complete(Rich)

+

complete(Rich)

{ width：width， height：height }

+

{ width：width， height：height }

图片成功加载时触发该回调，返回成功加载的图源尺寸。

+

图片成功加载时触发该回调，返回成功加载的图源尺寸。

error(Rich)

+

error(Rich)

{ width：width， height：height }

+

{ width：width， height：height }

图片加载出现异常时触发该回调，异常时长宽为零。

+

图片加载出现异常时触发该回调，异常时长宽为零。

名称

+ - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - @@ -209,26 +208,26 @@ **表 1** MenuOption5+ -

名称

类型

+

类型

默认值

+

默认值

必填

+

必填

描述

+

描述

type

+

type

string

+

string

text

+

text

否

+

否

input组件类型，可选值为text，email，date，time，number，password，button，checkbox，radio。

-

其中text，email，date，time，number，password这六种类型之间支持动态切换修改。

-

button，checkbox，radio不支持动态修改。可选值定义如下：

-
  • button：定义可点击的按钮；
  • checkbox：定义多选框；
  • radio：定义单选按钮，允许在多个拥有相同name值的选项中选中其中一个；
  • text：定义一个单行的文本字段
  • email：定义用于e-mail地址的字段；
  • date：定义 date 控件（包括年、月、日，不包括时间）；
  • time：定义用于输入时间的控件（不带时区）；
  • number：定义用于输入数字的字段；
  • password：定义密码字段（字段中的字符会被遮蔽）。
    说明：

    智能穿戴仅支持button、radio、checkbox类型。

    +

input组件类型，可选值为text，email，date，time，number，password，button，checkbox，radio。

+

其中text，email，date，time，number，password这六种类型之间支持动态切换修改。

+

button，checkbox，radio不支持动态修改。可选值定义如下：

+
  • button：定义可点击的按钮；
  • checkbox：定义多选框；
  • radio：定义单选按钮，允许在多个拥有相同name值的选项中选中其中一个；
  • text：定义一个单行的文本字段
  • email：定义用于e-mail地址的字段；
  • date：定义 date 控件（包括年、月、日，不包括时间）；
  • time：定义用于输入时间的控件（不带时区）；
  • number：定义用于输入数字的字段；
  • password：定义密码字段（字段中的字符会被遮蔽）。
    说明：

    智能穿戴仅支持button、radio、checkbox类型。

checked

+

checked

boolean

+

boolean

false

+

false

否

+

否

当前组件是否选中，仅type为checkbox和radio生效。

+

当前组件是否选中，仅type为checkbox和radio生效。

name

+

name

string

+

string

-

+

-

否

+

否

input组件的名称。

+

input组件的名称。

value

+

value

string

+

string

-

+

-

否

+

否

input组件的value值，当类型为radio时必填且相同name值的选项该值唯一。

+

input组件的value值，当类型为radio时必填且相同name值的选项该值唯一。

placeholder

+

placeholder

string

+

string

-

+

-

否

+

否

设置提示文本的内容，仅在type为text|email|date|time|number|password时生效。

+

设置提示文本的内容，仅在type为text|email|date|time|number|password时生效。

maxlength

+

maxlength

number

+

number

-

+

-

否

+

否

输入框可输入的最多字符数量，不填表示不限制输入框中字符数量。

+

输入框可输入的最多字符数量，不填表示不限制输入框中字符数量。

enterkeytype

+

enterkeytype

string

+

string

default

+

default

否

+

否

不支持动态修改。

-

设置软键盘Enter按钮的类型，可选值为：

-
  • default：默认
  • next：下一项
  • go：前往
  • done：完成
  • send：发送
  • search：搜索
-
说明：

除“next”外，点击后会自动收起软键盘。

+

不支持动态修改。

+

设置软键盘Enter按钮的类型，可选值为：

+
  • default：默认
  • next：下一项
  • go：前往
  • done：完成
  • send：发送
  • search：搜索
+
说明：

除“next”外，点击后会自动收起软键盘。

headericon

+

headericon

string

+

string

-

+

-

否

+

否

在文本输入前的图标资源路径，该图标不支持点击事件（button，checkbox和radio不生效），图标格式为jpg，png和svg。

+

在文本输入前的图标资源路径，该图标不支持点击事件（button，checkbox和radio不生效），图标格式为jpg，png和svg。

showcounter5+

+

showcounter5+

boolean

+

boolean

false

+

false

否

+

否

文本输入框是否显示计数下标，需要配合maxlength一起使用。

+

文本输入框是否显示计数下标，需要配合maxlength一起使用。

menuoptions5+

+

menuoptions5+

Array<MenuOption>

+

Array<MenuOption>

-

+

-

否

+

否

设置文本选择弹框点击更多按钮之后显示的菜单项。

+

设置文本选择弹框点击更多按钮之后显示的菜单项。

autofocus6+

+

autofocus6+

boolean

+

boolean

false

+

false

否

+

否

是否自动获焦。

-
说明：

应用首页中设置不生效，可在onActive中延迟（100-500ms左右）调用focus方法实现输入框在首页中自动获焦。

+

是否自动获焦。

+
说明：

应用首页中设置不生效，可在onActive中延迟（100-500ms左右）调用focus方法实现输入框在首页中自动获焦。

selectedstart6+

+

selectedstart6+

number

+

number

-1

+

-1

否

+

否

开始选择文本时初始选择位置。

+

开始选择文本时初始选择位置。

selectedend6+

+

selectedend6+

number

+

number

-1

+

-1

否

+

否

开始选择文本时结尾选择位置。

+

开始选择文本时结尾选择位置。

softkeyboardenabled6+

+

softkeyboardenabled6+

boolean

+

boolean

true

+

true

否

+

否

编辑时是否弹出系统软键盘。

+

编辑时是否弹出系统软键盘。

showpasswordicon6+

+

showpasswordicon6+

boolean

+

boolean

true

+

true

否

+

否

是否显示密码框末尾的图标（仅type为password时生效）。

+

是否显示密码框末尾的图标（仅type为password时生效）。

名称

+ - - - - - - - - @@ -238,85 +237,84 @@ 除支持[通用样式](js-components-common-styles.md)外，还支持如下样式： - -

名称

类型

+

类型

描述

+

描述

icon

+

icon

string

+

string

菜单选项中的图标路径。

+

菜单选项中的图标路径。

content

+

content

string

+

string

菜单选项中的文本内容。

+

菜单选项中的文本内容。

名称

+ - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - @@ -328,65 +326,64 @@ - 当input类型为text、email、date、time、number、password时，支持如下事件： - -

名称

类型

+

类型

默认值

+

默认值

必填

+

必填

描述

+

描述

color

+

color

<color>

+

<color>

#e6000000

+

#e6000000

否

+

否

单行输入框或者按钮的文本颜色。

+

单行输入框或者按钮的文本颜色。

font-size

+

font-size

<length>

+

<length>

16px

+

16px

否

+

否

单行输入框或者按钮的文本尺寸。

+

单行输入框或者按钮的文本尺寸。

allow-scale

+

allow-scale

boolean

+

boolean

true

+

true

否

+

否

单行输入框或者按钮的文本尺寸是否跟随系统设置字体缩放尺寸进行放大缩小。

-
说明：

如果在config描述文件中针对ability配置了fontSize的config-changes标签，则应用不会重启而直接生效。

+

单行输入框或者按钮的文本尺寸是否跟随系统设置字体缩放尺寸进行放大缩小。

+
说明：

如果在config描述文件中针对ability配置了fontSize的config-changes标签，则应用不会重启而直接生效。

placeholder-color

+

placeholder-color

<color>

+

<color>

#99000000

+

#99000000

否

+

否

单行输入框的提示文本的颜色，type为text|email|date|time|number|password时生效。

+

单行输入框的提示文本的颜色，type为text|email|date|time|number|password时生效。

font-weight

+

font-weight

number | string

+

number | string

normal

+

normal

否

+

否

单行输入框或者按钮的字体粗细，见text组件font-weight的样式属性。

+

单行输入框或者按钮的字体粗细，见text组件font-weight的样式属性。

caret-color6+

+

caret-color6+

<color>

+

<color>

-

+

-

否

+

否

设置输入光标的颜色。

+

设置输入光标的颜色。

名称

+ - - - - - - - - - - - - - - - - - - - - - - - @@ -394,20 +391,19 @@ - 当input类型为checkbox、radio时，支持如下事件： - -

名称

参数

+

参数

描述

+

描述

change

+

change

{ value:inputValue }

+

{ value:inputValue }

输入框输入内容发生变化时触发该事件，返回用户当前输入值。

-
说明：

改变value属性值不会触发该回调。

+

输入框输入内容发生变化时触发该事件，返回用户当前输入值。

+
说明：

改变value属性值不会触发该回调。

enterkeyclick

+

enterkeyclick

{ value:enterKey }

+

{ value:enterKey }

软键盘enter键点击后触发该事件，返回enter按钮的类型，enterKey类型为number，可选值为：

-
  • 2：设置enterkeytype属性为go时生效。
  • 3：设置enterkeytype属性为search时生效。
  • 4：设置enterkeytype属性为send时生效。
  • 5：设置enterkeytype属性为next时生效。
  • 6：不设置enterkeytype或者设置enterkeytype属性为default、done时生效。
+

软键盘enter键点击后触发该事件，返回enter按钮的类型，enterKey类型为number，可选值为：

+
  • 2：设置enterkeytype属性为go时生效。
  • 3：设置enterkeytype属性为search时生效。
  • 4：设置enterkeytype属性为send时生效。
  • 5：设置enterkeytype属性为next时生效。
  • 6：不设置enterkeytype或者设置enterkeytype属性为default、done时生效。

translate5+

+

translate5+

{ value: selectedText }

+

{ value: selectedText }

设置此事件后，进行文本选择操作后文本选择弹窗会出现翻译按钮，点击翻译按钮之后，触发该回调，返回选中的文本内容。

+

设置此事件后，进行文本选择操作后文本选择弹窗会出现翻译按钮，点击翻译按钮之后，触发该回调，返回选中的文本内容。

share5+

+

share5+

{ value: selectedText }

+

{ value: selectedText }

设置此事件后，进行文本选择操作后文本选择弹窗会出现分享按钮，点击分享按钮之后，触发该回调，返回选中的文本内容。

+

设置此事件后，进行文本选择操作后文本选择弹窗会出现分享按钮，点击分享按钮之后，触发该回调，返回选中的文本内容。

search5+

+

search5+

{ value: selectedText }

+

{ value: selectedText }

设置此事件后，进行文本选择操作后文本选择弹窗会出现搜索按钮，点击搜索按钮之后，触发该回调，返回选中的文本内容。

+

设置此事件后，进行文本选择操作后文本选择弹窗会出现搜索按钮，点击搜索按钮之后，触发该回调，返回选中的文本内容。

optionselect5+

+

optionselect5+

{ index:optionIndex, value: selectedText }

+

{ index:optionIndex, value: selectedText }

文本选择弹窗中设置menuoptions属性后，用户在文本选择操作后，点击菜单项后触发该回调，返回点击的菜单项序号和选中的文本内容。

+

文本选择弹窗中设置menuoptions属性后，用户在文本选择操作后，点击菜单项后触发该回调，返回点击的菜单项序号和选中的文本内容。

selectchange6+

+

selectchange6+

{ start: number，end: number }

+

{ start: number，end: number }

文本选择变化时触发事件。

+

文本选择变化时触发事件。

名称

+ - - - - - @@ -418,34 +414,33 @@ 除支持[通用方法](js-components-common-methods.md)外，还支持如下方法： - -

名称

参数

+

参数

描述

+

描述

change

+

change

{ checked:true | false }

+

{ checked:true | false }

checkbox多选框或radio单选框的checked状态发生变化时触发该事件。

+

checkbox多选框或radio单选框的checked状态发生变化时触发该事件。

名称

+ - - - - - - - - - - - @@ -522,6 +517,8 @@ .div-button { flex-direction: column; align-items: center; + + } .button { margin-top: 30px; @@ -536,7 +533,8 @@ ```
- + +
``` @@ -545,6 +543,8 @@ .content{ width: 100%; height: 200px; + + align-items: center; justify-content: center; } @@ -573,6 +573,7 @@ + ``` ``` diff --git a/zh-cn/application-dev/reference/arkui-js/js-components-basic-label.md b/zh-cn/application-dev/reference/arkui-js/js-components-basic-label.md index 3fa3c78a09b7f04380af8587e3c1d0902d543e26..b411b26956eea31e47a1e07117fee3bbb552794f 100644 --- a/zh-cn/application-dev/reference/arkui-js/js-components-basic-label.md +++ b/zh-cn/application-dev/reference/arkui-js/js-components-basic-label.md @@ -14,28 +14,27 @@ 除支持[通用属性](js-components-common-attributes.md)外，还支持如下属性： - -

名称

参数

+

参数

描述

+

描述

focus

+

focus

{ focus: true|false }，focus不传默认为true。

+

{ focus: true|false }，focus不传默认为true。

使组件获得或者失去焦点，type为text|email|date|time|number|password时，可弹出或收起输入法。

+

使组件获得或者失去焦点，type为text|email|date|time|number|password时，可弹出或收起输入法。

showError

+

showError

{ error: string }

+

{ error: string }

展示输入错误提示，type为text|email|date|time|number|password时生效。

+

展示输入错误提示，type为text|email|date|time|number|password时生效。

delete6+

+

delete6+

-

+

-

type为text|email|date|time|number|password时，根据当前光标位置删除文本内容，如果当前输入组件没有光标，默认删除最后一个字符并展示光标。

+

type为text|email|date|time|number|password时，根据当前光标位置删除文本内容，如果当前输入组件没有光标，默认删除最后一个字符并展示光标。

名称

+ - - - - - - - - - @@ -45,205 +44,204 @@ 除支持[通用样式](js-components-common-styles.md)外，还支持如下样式： - -

名称

类型

+

类型

默认值

+

默认值

必填

+

必填

描述

+

描述

target

+

target

string

+

string

-

+

-

否

+

否

目标组件的属性id值。

+

目标组件的属性id值。

名称

+ - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - diff --git a/zh-cn/application-dev/reference/arkui-js/js-components-basic-marquee.md b/zh-cn/application-dev/reference/arkui-js/js-components-basic-marquee.md index 29dd46d9edc5bfb82a01c68d101dee113bb79aaa..efc07b40de3c548bc983bed6829d57a5781fbd6a 100644 --- a/zh-cn/application-dev/reference/arkui-js/js-components-basic-marquee.md +++ b/zh-cn/application-dev/reference/arkui-js/js-components-basic-marquee.md @@ -14,50 +14,49 @@ 除支持[通用属性](js-components-common-attributes.md)外，还支持如下属性： - -

名称

类型

+

类型

默认值

+

默认值

必填

+

必填

描述

+

描述

color

+

color

<color>

+

<color>

#e5000000

+

#e5000000

否

+

否

设置文本的颜色。

+

设置文本的颜色。

font-size

+

font-size

<length>

+

<length>

30px

+

30px

否

+

否

设置文本的尺寸。

+

设置文本的尺寸。

allow-scale

+

allow-scale

boolean

+

boolean

true

+

true

否

+

否

文本尺寸是否跟随系统设置字体缩放尺寸进行放大缩小。

-
说明：

如果需要支持动态生效，请参看config描述文件中config-changes标签。

+

文本尺寸是否跟随系统设置字体缩放尺寸进行放大缩小。

+
说明：

如果需要支持动态生效，请参看config描述文件中config-changes标签。

letter-spacing

+

letter-spacing

<length>

+

<length>

0px

+

0px

否

+

否

设置文本的字符间距。

+

设置文本的字符间距。

font-style

+

font-style

string

+

string

normal

+

normal

否

+

否

设置文本的字体样式，可选值为：

-
  • normal：标准的字体样式；
  • italic：斜体的字体样式。
+

设置文本的字体样式，可选值为：

+
  • normal：标准的字体样式；
  • italic：斜体的字体样式。

font-weight

+

font-weight

number | string

+

number | string

normal

+

normal

否

+

否

设置文本的字体粗细，number类型取值[100, 900]，默认为400，取值越大，字体越粗。

-
说明：

number取值必须为100的整数倍。

+

设置文本的字体粗细，number类型取值[100, 900]，默认为400，取值越大，字体越粗。

+
说明：

number取值必须为100的整数倍。

-

string类型取值支持如下四个值：lighter、normal、bold、bolder。

+

string类型取值支持如下四个值：lighter、normal、bold、bolder。

text-decoration

+

text-decoration

string

+

string

none

+

none

否

+

否

设置文本的文本修饰，可选值为：

-
  • underline：文字下划线修饰；
  • line-through：穿过文本的修饰线n
  • none：标准文本。
+

设置文本的文本修饰，可选值为：

+
  • underline：文字下划线修饰；
  • line-through：穿过文本的修饰线n
  • none：标准文本。

text-align

+

text-align

string

+

string

start

+

start

否

+

否

设置文本的文本对齐方式，可选值为：

-
  • left：文本左对齐；
  • center：文本居中对齐；
  • right：文本右对齐；
  • start：根据文字书写相同的方向对齐；
  • end：根据文字书写相反的方向对齐。
-
说明：

如文本宽度未指定大小，文本的宽度和父容器的宽度大小相等的情况下，对齐效果可能会不明显。

+

设置文本的文本对齐方式，可选值为：

+
  • left：文本左对齐；
  • center：文本居中对齐；
  • right：文本右对齐；
  • start：根据文字书写相同的方向对齐；
  • end：根据文字书写相反的方向对齐。
+
说明：

如文本宽度未指定大小，文本的宽度和父容器的宽度大小相等的情况下，对齐效果可能会不明显。

line-height

+

line-height

<length>

+

<length>

0px

+

0px

否

+

否

设置文本的文本行高，设置为0px时，不限制文本行高，自适应字体大小。

+

设置文本的文本行高，设置为0px时，不限制文本行高，自适应字体大小。

text-overflow

+

text-overflow

string

+

string

clip

+

clip

否

+

否

在设置了最大行数的情况下生效，可选值为：

-
  • clip：将文本根据父容器大小进行裁剪显示；
  • ellipsis：根据父容器大小显示，显示不下的文本用省略号代替。需配合max-lines使用。
+

在设置了最大行数的情况下生效，可选值为：

+
  • clip：将文本根据父容器大小进行裁剪显示；
  • ellipsis：根据父容器大小显示，显示不下的文本用省略号代替。需配合max-lines使用。

font-family

+

font-family

string

+

string

sans-serif

+

sans-serif

否

+

否

设置文本的字体列表，用逗号分隔，每个字体用字体名或者字体族名设置。列表中第一个系统中存在的或者通过自定义字体指定的字体，会被选中作为文本的字体。

+

设置文本的字体列表，用逗号分隔，每个字体用字体名或者字体族名设置。列表中第一个系统中存在的或者通过自定义字体指定的字体，会被选中作为文本的字体。

max-lines

+

max-lines

number

+

number

-

+

-

否

+

否

设置文本的最大行数。

+

设置文本的最大行数。

min-font-size

+

min-font-size

<length>

+

<length>

-

+

-

否

+

否

文本最小字号，需要和文本最大字号同时设置，支持文本字号动态变化。设置最大最小字体样式后，font-size不生效。

+

文本最小字号，需要和文本最大字号同时设置，支持文本字号动态变化。设置最大最小字体样式后，font-size不生效。

max-font-size

+

max-font-size

<length>

+

<length>

-

+

-

否

+

否

文本最大字号，需要和文本最小字号同时设置，支持文本字号动态变化。设置最大最小字体样式后，font-size不生效。

+

文本最大字号，需要和文本最小字号同时设置，支持文本字号动态变化。设置最大最小字体样式后，font-size不生效。

font-size-step

+

font-size-step

<length>

+

<length>

1px

+

1px

否

+

否

文本动态调整字号时的步长，需要设置最小，最大字号样式生效。

+

文本动态调整字号时的步长，需要设置最小，最大字号样式生效。

prefer-font-sizes

+

prefer-font-sizes

<array>

+

<array>

-

+

-

否

+

否

预设的字号集合，在动态尺寸调整时，优先使用预设字号集合中的字号匹配设置的最大行数，如果预设字号集合未设置，则使用最大最小和步长调整字号。针对仍然无法满足最大行数要求的情况，使用text-overflow设置项进行截断，设置预设尺寸集后，font-size、max-font-size、min-font-size和font-size-step不生效。

-

如：prefer-font-sizes: 12px,14px,16px

+

预设的字号集合，在动态尺寸调整时，优先使用预设字号集合中的字号匹配设置的最大行数，如果预设字号集合未设置，则使用最大最小和步长调整字号。针对仍然无法满足最大行数要求的情况，使用text-overflow设置项进行截断，设置预设尺寸集后，font-size、max-font-size、min-font-size和font-size-step不生效。

+

如：prefer-font-sizes: 12px,14px,16px

名称

+ - - - - - - - - - - - - - - - - - - - @@ -67,74 +66,73 @@ 除支持[通用样式](js-components-common-styles.md)外，还支持如下样式： - -

名称

类型

+

类型

默认值

+

默认值

必填

+

必填

描述

+

描述

scrollamount

+

scrollamount

number

+

number

6

+

6

否

+

否

跑马灯每次滚动时移动的最大长度。

+

跑马灯每次滚动时移动的最大长度。

loop

+

loop

number

+

number

-1

+

-1

否

+

否

跑马灯滚动的次数。如果未指定，则默认值为-1，当该值小于等于零时表示marquee将连续滚动。

+

跑马灯滚动的次数。如果未指定，则默认值为-1，当该值小于等于零时表示marquee将连续滚动。

direction

+

direction

string

+

string

left

+

left

否

+

否

设置跑马灯的文字滚动方向，可选值为left和right。

+

设置跑马灯的文字滚动方向，可选值为left和right。

名称

+ - - - - - - - - - - - - - - - - - - - - - - - - - - - - - @@ -144,34 +142,33 @@ 除支持[通用事件](js-components-common-events.md)外，还支持如下事件： - -

名称

类型

+

类型

默认值

+

默认值

必填

+

必填

描述

+

描述

color

+

color

<color>

+

<color>

#e5000000

+

#e5000000

否

+

否

设置跑马灯中文字的文本颜色。

+

设置跑马灯中文字的文本颜色。

font-size

+

font-size

<length>

+

<length>

37.5

+

37.5

否

+

否

设置跑马灯中文字的文本尺寸。

+

设置跑马灯中文字的文本尺寸。

allow-scale

+

allow-scale

boolean

+

boolean

true

+

true

否

+

否

设置跑马灯中文字的文本尺寸是否跟随系统设置字体缩放尺寸进行放大缩小。

-
说明：

如果在config描述文件中针对ability配置了fontSize的config-changes标签，则应用不会重启而直接生效。

+

设置跑马灯中文字的文本尺寸是否跟随系统设置字体缩放尺寸进行放大缩小。

+
说明：

如果在config描述文件中针对ability配置了fontSize的config-changes标签，则应用不会重启而直接生效。

font-weight

+

font-weight

number | string

+

number | string

normal

+

normal

否

+

否

设置跑马灯中文字的字体的粗细，见text组件font-weight的样式属性。

+

设置跑马灯中文字的字体的粗细，见text组件font-weight的样式属性。

font-family

+

font-family

string

+

string

sans-serif

+

sans-serif

否

+

否

设置跑马灯中文字的字体列表，用逗号分隔，每个字体用字体名或者字体族名设置。列表中第一个系统中存在的或者通过自定义字体指定的字体，会被选中作为文本的字体。

+

设置跑马灯中文字的字体列表，用逗号分隔，每个字体用字体名或者字体族名设置。列表中第一个系统中存在的或者通过自定义字体指定的字体，会被选中作为文本的字体。

名称

+ - - - - - - - - - - - @@ -181,27 +178,26 @@ 除支持[通用方法](js-components-common-methods.md)外，还支持如下方法： - -

名称

参数

+

参数

描述

+

描述

bounce(Rich)

+

bounce(Rich)

-

+

-

当文本滚动到末尾时触发该事件。

+

当文本滚动到末尾时触发该事件。

finish(Rich)

+

finish(Rich)

-

+

-

当完成滚动次数时触发该事件。需要在 loop 属性值大于 0 时触发。

+

当完成滚动次数时触发该事件。需要在 loop 属性值大于 0 时触发。

start(Rich)

+

start(Rich)

-

+

-

当文本滚动开始时触发该事件。

+

当文本滚动开始时触发该事件。

名称

+ - - - - - - - - diff --git a/zh-cn/application-dev/reference/arkui-js/js-components-basic-menu.md b/zh-cn/application-dev/reference/arkui-js/js-components-basic-menu.md index dc698d66376b141ea0109edea18582a84404b6fa..4e65ea084a69caa4c7fcf8e3e5e792273c020055 100644 --- a/zh-cn/application-dev/reference/arkui-js/js-components-basic-menu.md +++ b/zh-cn/application-dev/reference/arkui-js/js-components-basic-menu.md @@ -14,153 +14,151 @@ 除支持[通用属性](js-components-common-attributes.md)外，还支持如下属性：↵ - -

名称

参数

+

参数

描述

+

描述

start

+

start

-

+

-

开始滚动。

+

开始滚动。

stop

+

stop

-

+

-

停止滚动。

+

停止滚动。

名称

+ - - - - - - - - - - - - - - - - - - -

名称

类型

+

类型

默认值

+

默认值

必填

+

必填

描述

+

描述

target

+

target

string

+

string

-

+

-

否

+

否

目标元素选择器。当使用目标元素选择器后，点击目标元素会自动弹出menu菜单。弹出菜单位置优先为目标元素右下角，当右边可视空间不足时会适当左移，当下方空间不足时会适当上移。

+

目标元素选择器。当使用目标元素选择器后，点击目标元素会自动弹出menu菜单。弹出菜单位置优先为目标元素右下角，当右边可视空间不足时会适当左移，当下方空间不足时会适当上移。

type

+

type

string

+

string

click

+

click

否

+

否

目标元素触发弹窗的方式，可选值有：

-
  • click：点击弹窗。
  • longpress：长按弹窗。
+

目标元素触发弹窗的方式，可选值有：

+
  • click：点击弹窗。
  • longpress：长按弹窗。

title

+

title

string

+

string

-

+

-

否

+

否

菜单标题内容。

+

菜单标题内容。
>![](../../public_sys-resources/icon-note.gif) **说明：** ->- 不支持focusable、disabled属性。 +>不支持focusable、disabled属性。 ## 样式 仅支持如下样式： - -

名称

+ - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - @@ -170,27 +168,26 @@ 仅支持如下事件： - -

名称

类型

+

类型

默认值

+

默认值

必填

+

必填

描述

+

描述

text-color

+

text-color

<color>

+

<color>

-

+

-

否

+

否

设置菜单的文本颜色。

+

设置菜单的文本颜色。

font-size

+

font-size

<length>

+

<length>

30px

+

30px

否

+

否

设置菜单的文本尺寸。

+

设置菜单的文本尺寸。

allow-scale

+

allow-scale

boolean

+

boolean

true

+

true

否

+

否

设置菜单的文本尺寸是否跟随系统设置字体缩放尺寸进行放大缩小。

-
说明：

如果在config描述文件中针对ability配置了fontSize的config-changes标签，则应用不会重启而直接生效。

+

设置菜单的文本尺寸是否跟随系统设置字体缩放尺寸进行放大缩小。

+
说明：

如果在config描述文件中针对ability配置了fontSize的config-changes标签，则应用不会重启而直接生效。

letter-spacing

+

letter-spacing

<length>

+

<length>

0

+

0

否

+

否

设置菜单的字符间距。

+

设置菜单的字符间距。

font-style

+

font-style

string

+

string

normal

+

normal

否

+

否

设置菜单的字体样式。见text组件font-style的样式属性。

+

设置菜单的字体样式。见text组件font-style的样式属性。

font-weight

+

font-weight

number | string

+

number | string

normal

+

normal

否

+

否

设置菜单的字体粗细。见text组件font-weight的样式属性。

+

设置菜单的字体粗细。见text组件font-weight的样式属性。

font-family

+

font-family

string

+

string

sans-serif

+

sans-serif

否

+

否

设置菜单的字体列表，用逗号分隔，每个字体用字体名或者字体族名设置。列表中第一个系统中存在的或者通过自定义字体指定的字体，会被选中作为文本的字体。

+

设置菜单的字体列表，用逗号分隔，每个字体用字体名或者字体族名设置。列表中第一个系统中存在的或者通过自定义字体指定的字体，会被选中作为文本的字体。

名称

+ - - - - - - - - @@ -200,20 +197,19 @@ 仅支持如下方法。 - -

名称

参数

+

参数

描述

+

描述

selected

+

selected

{ value:value }

+

{ value:value }

菜单中某个值被点击选中时触发，返回的value值为option组件的value属性。

+

菜单中某个值被点击选中时触发，返回的value值为option组件的value属性。

cancel

+

cancel

-

+

-

用户取消。

+

用户取消。

名称

+ - - - - - diff --git a/zh-cn/application-dev/reference/arkui-js/js-components-basic-option.md b/zh-cn/application-dev/reference/arkui-js/js-components-basic-option.md index 839c135eb2e8d425accab6ede970f9c8712273cf..9106a3e8cad1847499654c5918964344f732d872 100644 --- a/zh-cn/application-dev/reference/arkui-js/js-components-basic-option.md +++ b/zh-cn/application-dev/reference/arkui-js/js-components-basic-option.md @@ -16,52 +16,51 @@ 除支持[通用属性](js-components-common-attributes.md)外，还支持如下属性：↵ - -

名称

参数

+

参数

描述

+

描述

show

+

show

{ x:x, y:y }

+

{ x:x, y:y }

显示menu菜单。(x, y)指定菜单弹窗位置。其中x表示距离可见区域左边沿的 X 轴坐标，不包含任何滚动偏移，y表示距离可见区域上边沿的 Y 轴坐标，不包含任何滚动偏移以及状态栏。菜单优先显示在弹窗位置右下角，当右边可视空间不足时会适当左移，当下方空间不足时会适当上移。

+

显示menu菜单。(x, y)指定菜单弹窗位置。其中x表示距离可见区域左边沿的 X 轴坐标，不包含任何滚动偏移，y表示距离可见区域上边沿的 Y 轴坐标，不包含任何滚动偏移以及状态栏。菜单优先显示在弹窗位置右下角，当右边可视空间不足时会适当左移，当下方空间不足时会适当上移。

名称

+ - - - - - - - - - - - - - - - - - - - @@ -71,85 +70,84 @@ 支持如下样式。 - -

名称

类型

+

类型

默认值

+

默认值

必填

+

必填

描述

+

描述

selected

+

selected

boolean

+

boolean

-

+

-

否

+

否

选择项是否为下拉列表的默认项，仅在父组件是select时生效。

+

选择项是否为下拉列表的默认项，仅在父组件是select时生效。

value

+

value

string

+

string

-

+

-

是

+

是

选择项的值，作为select、menu父组件的selected事件中的返回值。

-
说明：

option选项的UI展示值需要放在标签内，如<option value="10">十月</option>

+

选择项的值，作为select、menu父组件的selected事件中的返回值。

+
说明：

option选项的UI展示值需要放在标签内，如<option value="10">十月</option>

icon

+

icon

string

+

string

-

+

-

否

+

否

图标资源路径，该图标展示在选项文本前，图标格式为jpg，png和svg。

+

图标资源路径，该图标展示在选项文本前，图标格式为jpg，png和svg。

名称

+ - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - diff --git a/zh-cn/application-dev/reference/arkui-js/js-components-basic-picker-view.md b/zh-cn/application-dev/reference/arkui-js/js-components-basic-picker-view.md index 22ba20cba780f27ba5e9234cf965c2a4c49909ba..665604b18b775f0a181febfe2599e31f151c6798 100644 --- a/zh-cn/application-dev/reference/arkui-js/js-components-basic-picker-view.md +++ b/zh-cn/application-dev/reference/arkui-js/js-components-basic-picker-view.md @@ -10,29 +10,28 @@ 除支持[通用属性](js-components-common-attributes.md)外，还支持如下属性： - -

名称

类型

+

类型

默认值

+

默认值

必填

+

必填

描述

+

描述

color

+

color

<color>

+

<color>

#e6000000

+

#e6000000

否

+

否

选择项的文本颜色。

+

选择项的文本颜色。

font-size

+

font-size

<length>

+

<length>

16px

+

16px

否

+

否

选择项的文本尺寸。

+

选择项的文本尺寸。

allow-scale

+

allow-scale

boolean

+

boolean

true

+

true

否

+

否

选择项的文本尺寸是否跟随系统设置字体缩放尺寸进行放大缩小。

-
说明：

如果在config描述文件中针对ability配置了fontSize的config-changes标签，则应用不会重启而直接生效。

+

选择项的文本尺寸是否跟随系统设置字体缩放尺寸进行放大缩小。

+
说明：

如果在config描述文件中针对ability配置了fontSize的config-changes标签，则应用不会重启而直接生效。

font-weight

+

font-weight

number | string

+

number | string

normal

+

normal

否

+

否

选择项的字体粗细，见text组件font-weight的样式属性。

+

选择项的字体粗细，见text组件font-weight的样式属性。

text-decoration

+

text-decoration

string

+

string

none

+

none

否

+

否

选择项的文本修饰，见text组件text-decoration的样式属性。

+

选择项的文本修饰，见text组件text-decoration的样式属性。

font-family

+

font-family

string

+

string

sans-serif

+

sans-serif

否

+

否

选择项的字体列表，用逗号分隔，每个字体用字体名或者字体族名设置。列表中第一个系统中存在的或者通过自定义字体指定的字体，会被选中作为文本的字体。

+

选择项的字体列表，用逗号分隔，每个字体用字体名或者字体族名设置。列表中第一个系统中存在的或者通过自定义字体指定的字体，会被选中作为文本的字体。

名称

+ - - - - - - - - - @@ -40,63 +39,62 @@ 文本选择器：type=text - -

名称

类型

+

类型

默认值

+

默认值

必填

+

必填

描述

+

描述

type

+

type

string

+

string

text

+

text

否

+

否

设置滑动选择器的类型，该属性不支持动态修改，可选项有：

-
  • text：文本选择器。
  • time：时间选择器。
  • date：日期选择器。
  • datetime：日期时间选择器。
  • multi-text：多列文本选择器。
+

设置滑动选择器的类型，该属性不支持动态修改，可选项有：

+
  • text：文本选择器。
  • time：时间选择器。
  • date：日期选择器。
  • datetime：日期时间选择器。
  • multi-text：多列文本选择器。

名称

+ - - - - - - - - - - - - - - - - - - - - - - - - @@ -104,53 +102,52 @@ 时间选择器：type=time - -

名称

类型

+

类型

默认值

+

默认值

必填

+

必填

描述

+

描述

range

+

range

Array

+

Array

-

+

-

否

+

否

设置文本选择器的取值范围。

-
说明：

使用时需要使用数据绑定的方式，如range = {{data}}，js中声明相应变量：data：["15", "20", "25"]。

+

设置文本选择器的取值范围。

+
说明：

使用时需要使用数据绑定的方式，如range = {{data}}，js中声明相应变量：data：["15", "20", "25"]。

selected

+

selected

string

+

string

0

+

0

否

+

否

设置文本选择器的默认选择值，该值需要为range的索引。

+

设置文本选择器的默认选择值，该值需要为range的索引。

indicatorprefix

+

indicatorprefix

string

+

string

-

+

-

否

+

否

文本选择器选定值增加的前缀字段。

+

文本选择器选定值增加的前缀字段。

indicatorsuffix

+

indicatorsuffix

string

+

string

-

+

-

否

+

否

文本选择器选定值增加的后缀字段。

+

文本选择器选定值增加的后缀字段。

名称

+ - - - - - - - - - - - - - - - - - - - @@ -160,73 +157,72 @@ 日期选择器：type=date - -

名称

类型

+

类型

默认值

+

默认值

必填

+

必填

描述

+

描述

containsecond

+

containsecond

boolean

+

boolean

false

+

false

否

+

否

时间选择器是否包含秒。

+

时间选择器是否包含秒。

selected

+

selected

string

+

string

当前时间

+

当前时间

否

+

否

设置时间选择器的默认取值，格式为 HH:mm；

-

当包含秒时，格式为HH:mm:ss。

+

设置时间选择器的默认取值，格式为 HH:mm；

+

当包含秒时，格式为HH:mm:ss。

hours

+

hours

number

+

number

241-4

-

-5+

+

241-4

+

-5+

否

+

否

设置时间选择器采用的时间格式，可选值：

-
  • 12：按照12小时制显示，用上午和下午进行区分；
  • 24：按照24小时制显示。
    说明：

    默认值会依据系统当前所选地区和语言选择当地习惯的小时制(12小时制或24小时制)。5+

    +

设置时间选择器采用的时间格式，可选值：

+
  • 12：按照12小时制显示，用上午和下午进行区分；
  • 24：按照24小时制显示。
    说明：

    默认值会依据系统当前所选地区和语言选择当地习惯的小时制(12小时制或24小时制)。5+

名称

+ - - - - - - - - - - - - - - - - - - - - - - - - - - - - - @@ -235,66 +231,65 @@ 日期时间选择器：type=datetime，日期的选择范围为本年的日月。 - -

名称

类型

+

类型

默认值

+

默认值

必填

+

必填

描述

+

描述

start

+

start

<time>

+

<time>

1970-1-1

+

1970-1-1

否

+

否

设置日期选择器的起始时间，格式为 YYYY-MM-DD。

+

设置日期选择器的起始时间，格式为 YYYY-MM-DD。

end

+

end

<time>

+

<time>

2100-12-31

+

2100-12-31

否

+

否

设置日期选择器的结束时间，格式为 YYYY-MM-DD。

+

设置日期选择器的结束时间，格式为 YYYY-MM-DD。

selected

+

selected

string

+

string

当前日期

+

当前日期

否

+

否

设置日期选择器的默认选择值，格式为 YYYY-MM-DD。

+

设置日期选择器的默认选择值，格式为 YYYY-MM-DD。

lunar5+

+

lunar5+

boolean

+

boolean

false

+

false

否

+

否

设置日期选择器弹窗界面是否为农历展示。

+

设置日期选择器弹窗界面是否为农历展示。

lunarswitch

+

lunarswitch

boolean

+

boolean

false

+

false

否

+

否

设置日期选择器是否显示农历开关，显示农历开关时，可以在弹窗界面展现农历的开关由于公历和农历切换。在设置显示农历时，开关状态为开，当设置不显示农历时，开关状态为关。手机生效。

-
说明：

仅手机和平板设备支持。

+

设置日期选择器是否显示农历开关，显示农历开关时，可以在弹窗界面展现农历的开关由于公历和农历切换。在设置显示农历时，开关状态为开，当设置不显示农历时，开关状态为关。手机生效。

+
说明：

仅手机和平板设备支持。

名称

+ - - - - - - - - - - - - - - - - - - - - - - - - @@ -303,52 +298,51 @@ 多列文本选择器：type=multi-text - -

名称

类型

+

类型

默认值

+

默认值

必填

+

必填

描述

+

描述

selected

+

selected

string

+

string

当前日期时间

+

当前日期时间

否

+

否

设置日期时间选择器的默认取值，格式有两种，为月日时分MM-DD-HH-mm或者年月日时分YYYY-MM-DD-HH-mm，不设置年时，默认使用当前年，该取值表示选择器弹窗时弹窗界面的默认选择值。

+

设置日期时间选择器的默认取值，格式有两种，为月日时分MM-DD-HH-mm或者年月日时分YYYY-MM-DD-HH-mm，不设置年时，默认使用当前年，该取值表示选择器弹窗时弹窗界面的默认选择值。

hours

+

hours

number

+

number

241-4

-

-5+

+

241-4

+

-5+

否

+

否

设置日期时间选择器采用的时间格式，可选值：

-
  • 12：按照12小时制显示，用上午和下午进行区分；
  • 24：按照24小时制显示。
    说明：

    默认值会依据系统当前所选地区和语言选择当地习惯的小时制(12小时制或24小时制)。5+

    +

设置日期时间选择器采用的时间格式，可选值：

+
  • 12：按照12小时制显示，用上午和下午进行区分；
  • 24：按照24小时制显示。
    说明：

    默认值会依据系统当前所选地区和语言选择当地习惯的小时制(12小时制或24小时制)。5+

lunar5+

+

lunar5+

boolean

+

boolean

false

+

false

否

+

否

设置日期时间选择器弹窗界面是否为农历展示。

+

设置日期时间选择器弹窗界面是否为农历展示。

lunarswitch

+

lunarswitch

boolean

+

boolean

false

+

false

否

+

否

设置日期时间选择器是否显示农历开关，显示农历开关时，可以在弹窗界面展现农历的开关由于公历和农历切换。在设置显示农历时，开关状态为开，当设置不显示农历时，开关状态为关。手机生效。

-
说明：

仅手机和平板设备支持。

+

设置日期时间选择器是否显示农历开关，显示农历开关时，可以在弹窗界面展现农历的开关由于公历和农历切换。在设置显示农历时，开关状态为开，当设置不显示农历时，开关状态为关。手机生效。

+
说明：

仅手机和平板设备支持。

名称

+ - - - - - - - - - - - - - - - - - - - @@ -358,98 +352,97 @@ 除支持[通用样式](js-components-common-styles.md)外，还支持如下样式： - -

名称

类型

+

类型

默认值

+

默认值

必填

+

必填

描述

+

描述

columns

+

columns

number

+

number

-

+

-

是

+

是

设置多列文本选择器的列数。

+

设置多列文本选择器的列数。

range

+

range

二维Array

+

二维Array

-

+

-

否

+

否

设置多列文本选择器的选择值，该值为二维数组。长度表示多少列，数组的每项表示每列的数据，如 [["a","b"], ["c","d"]]。

-
说明：

使用时需要使用数据绑定的方式，如range = {{data}}，js中声明相应变量：data：[["a","b"], ["c","d"]]。

+

设置多列文本选择器的选择值，该值为二维数组。长度表示多少列，数组的每项表示每列的数据，如 [["a","b"], ["c","d"]]。

+
说明：

使用时需要使用数据绑定的方式，如range = {{data}}，js中声明相应变量：data：[["a","b"], ["c","d"]]。

selected

+

selected

Array

+

Array

[0,0,0,…]

+

[0,0,0,…]

否

+

否

设置多列文本选择器的默认值，每一列被选中项对应的索引构成的数组，该取值表示选择器弹窗时弹窗界面的默认选择值。

+

设置多列文本选择器的默认值，每一列被选中项对应的索引构成的数组，该取值表示选择器弹窗时弹窗界面的默认选择值。

名称

+ - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - @@ -461,20 +454,19 @@ type=text： - -

名称

类型

+

类型

默认值

+

默认值

必填

+

必填

描述

+

描述

color

+

color

<color>

+

<color>

#ffffff

+

#ffffff

否

+

否

候选项字体颜色。

+

候选项字体颜色。

font-size

+

font-size

<length>

+

<length>

16px

+

16px

否

+

否

候选项字体尺寸，类型length，单位px。

+

候选项字体尺寸，类型length，单位px。

selected-color

+

selected-color

<color>

+

<color>

#ff0a69f7

+

#ff0a69f7

否

+

否

选中项字体颜色。

+

选中项字体颜色。

selected-font-size

+

selected-font-size

<length>

+

<length>

20px

+

20px

否

+

否

选中项字体尺寸，类型length，单位px。

+

选中项字体尺寸，类型length，单位px。

disappear-color5+

+

disappear-color5+

<color>

+

<color>

#ffffff

+

#ffffff

否

+

否

渐变消失项的字体颜色。消失项是在一列中有五个选项场景下最上和最下的两个选项。

-
说明：

仅手机和平板设备支持。

+

渐变消失项的字体颜色。消失项是在一列中有五个选项场景下最上和最下的两个选项。

+
说明：

仅手机和平板设备支持。

disappear-font-size5+

+

disappear-font-size5+

<length>

+

<length>

14px

+

14px

否

+

否

渐变消失项的字体尺寸。消失项是在一列中有五个选项场景下最上和最下的两个选项。

-
说明：

仅手机和平板设备支持。

+

渐变消失项的字体尺寸。消失项是在一列中有五个选项场景下最上和最下的两个选项。

+
说明：

仅手机和平板设备支持。

font-family

+

font-family

string

+

string

sans-serif

+

sans-serif

否

+

否

选项字体类型。字体列表，用逗号分隔，每个字体用字体名或者字体族名设置。列表中第一个系统中存在的或者通过自定义字体指定的字体，会被选中作为文本的字体。

+

选项字体类型。字体列表，用逗号分隔，每个字体用字体名或者字体族名设置。列表中第一个系统中存在的或者通过自定义字体指定的字体，会被选中作为文本的字体。

名称

+ - - - - - @@ -482,21 +474,20 @@ type=text： type=time： - -

名称

参数

+

参数

描述

+

描述

change

+

change

{ newValue: newValue, newSelected: newSelected }

+

{ newValue: newValue, newSelected: newSelected }

文本选择器选定值后触发该事件。

+

文本选择器选定值后触发该事件。

名称

+ - - - - - @@ -504,20 +495,19 @@ type=time： type=date： - -

名称

参数

+

参数

描述

+

描述

change

+

change

{ hour: hour, minute: minute, [second:second] }

+

{ hour: hour, minute: minute, [second:second] }

时间选择器选定值后触发该事件。

-

包含秒时，返回时分秒。

+

时间选择器选定值后触发该事件。

+

包含秒时，返回时分秒。

名称

+ - - - - - @@ -525,20 +515,19 @@ type=date： type=datetime： - -

名称

参数

+

参数

描述

+

描述

change

+

change

{ year:year, month:month, day:day }

+

{ year:year, month:month, day:day }

日期选择器选择值后触发该事件。

+

日期选择器选择值后触发该事件。

名称

+ - - - - - @@ -546,20 +535,19 @@ type=datetime： type=multi-text： - -

名称

参数

+

参数

描述

+

描述

change

+

change

{ year:year, month:month, day:day, hour:hour, minute:minute }

+

{ year:year, month:month, day:day, hour:hour, minute:minute }

日期时间选择器选择值后触发该事件。

+

日期时间选择器选择值后触发该事件。

名称

+ - - - - - diff --git a/zh-cn/application-dev/reference/arkui-js/js-components-basic-picker.md b/zh-cn/application-dev/reference/arkui-js/js-components-basic-picker.md index 532975b56b313251f40f2ad1a53a0bb59c306469..c49072a3cf378833f26a6bd6b6850ced66798034 100644 --- a/zh-cn/application-dev/reference/arkui-js/js-components-basic-picker.md +++ b/zh-cn/application-dev/reference/arkui-js/js-components-basic-picker.md @@ -14,233 +14,235 @@ 除支持[通用属性](js-components-common-attributes.md)外，还支持如下属性：↵ - -

名称

参数

+

参数

描述

+

描述

columnchange

+

columnchange

{ column:column, newValue:newValue, newSelected:newSelected }

+

{ column:column, newValue:newValue, newSelected:newSelected }

多列文本选择器某一列的值改变时触发该事件，column：第几列修改，newValue：选中的值，newSelected：选中值对应的索引。

+

多列文本选择器某一列的值改变时触发该事件，column：第几列修改，newValue：选中的值，newSelected：选中值对应的索引。

名称

+ - - - - - - - - -

名称

类型

+

类型

默认值

+

默认值

必填

+

必填

描述

+

描述

type

+

type

string

+

string

-

+

-

否

+

否

该属性值不支持动态修改。可选择项有：

-
  • text：文本选择器。
  • date：日期选择器。
  • time：时间选择器。
  • datetime：日期时间选择器。
  • multi-text：多列文本选择器。
+

该属性值不支持动态修改。可选择项有：

+
  • text：文本选择器。
  • date：日期选择器。
  • time：时间选择器。
  • datetime：日期时间选择器。
  • multi-text：多列文本选择器。
-普通选择器：type=text +### 普通选择器 - -

名称

+滑动选择器类型设置为text时表示普通选择器。 + + - - - - - - - - - - - - - - - - - - -

名称

类型

+

类型

默认值

+

默认值

必填

+

必填

描述

+

描述

range

+

range

Array

+

Array

-

+

-

否

+

否

设置普通选择器的取值范围，如["15", "20", "25"]。

-
说明：

使用时需要使用数据绑定的方式，如range = {{data}}，js中声明相应变量：data：["15", "20", "25"]。

+

设置普通选择器的取值范围，如["15", "20", "25"]。

+
说明：

使用时需要使用数据绑定的方式，如range = {{data}}，js中声明相应变量：data：["15", "20", "25"]。

selected

+

selected

string

+

string

0

+

0

否

+

否

设置普通选择器弹窗的默认取值，取值需要是 range 的索引值，该取值表示选择器弹窗时弹窗界面的默认选择值。

+

设置普通选择器弹窗的默认取值，取值需要是 range 的索引值，该取值表示选择器弹窗界面的默认选择值。

value

+

value

string

+

string

-

+

-

否

+

否

设置普通选择器的值。

+

设置普通选择器的值。
-日期选择器：type=date +### 日期选择器 + +滑动选择器类型设置为date时表示日期选择器。 - -

名称

+ - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - -

名称

类型

+

类型

默认值

+

默认值

必填

+

必填

描述

+

描述

start

+

start

<time>

+

<time>

1970-1-1

+

1970-1-1

否

+

否

设置日期选择器的起始时间，格式为 YYYY-MM-DD。

+

设置日期选择器的起始时间，格式为 YYYY-MM-DD。

end

+

end

<time>

+

<time>

2100-12-31

+

2100-12-31

否

+

否

设置日期选择器的结束时间，格式为 YYYY-MM-DD。

+

设置日期选择器的结束时间，格式为 YYYY-MM-DD。

selected

+

selected

string

+

string

当前日期

+

当前日期

否

+

否

设置日期选择器弹窗的默认取值，格式为 YYYY-MM-DD，该取值表示选择器弹窗时弹窗界面的默认选择值。

+

设置日期选择器弹窗的默认取值，格式为 YYYY-MM-DD，该取值表示选择器弹窗界面的默认选择值。

value

+

value

string

+

string

-

+

-

是

+

是

设置日期选择器的值。

+

设置日期选择器的值。

lunar5+

+

lunar5+

boolean

+

boolean

false

+

false

否

+

否

设置日期选择器弹窗界面是否为农历展示。

+

设置日期选择器弹窗界面是否为农历展示。

lunarswitch

+

lunarswitch

boolean

+

boolean

false

+

false

否

+

否

设置日期选择器是否显示农历开关。当值为true时，显示农历开关，点击农历开关可切换公历和农历。当值为false时，不显示农历开关。

-
说明：

仅手机和平板设备支持。 当lunarswitch=true且lunar=true时，开关按钮处于被选中状态。

+

设置日期选择器是否显示农历开关。当值为true时，显示农历开关，点击农历开关可切换公历和农历。当值为false时，不显示农历开关。

+
说明：

仅手机和平板设备支持。 当lunarswitch=true且lunar=true时，开关按钮处于被选中状态。
-时间选择器：type=time +### 时间选择器 - -

名称

+滑动选择器类型设置为time时表示时间选择器。 + + - - - - - - - - - - - - - - - - - - - - - - - - @@ -248,144 +250,148 @@

名称

类型

+

类型

默认值

+

默认值

必填

+

必填

描述

+

描述

containsecond

+

containsecond

boolean

+

boolean

false

+

false

否

+

否

设置时间选择器是否包含秒。

+

设置时间选择器是否包含秒。

selected

+

selected

string

+

string

当前时间

+

当前时间

否

+

否

设置时间选择器弹窗的默认取值，格式为 HH:mm；当包含秒时，格式为HH:mm:ss，

-

该取值表示选择器弹窗时弹窗界面的默认选择值。

+

设置时间选择器弹窗的默认取值，格式为 HH:mm；当包含秒时，格式为HH:mm:ss，

+

该取值表示选择器弹窗界面的默认选择值。

value

+

value

string

+

string

-

+

-

否

+

否

设置时间选择器的值。

+

设置时间选择器的值。

hours

+

hours

number

+

number

241-4

-

-5+

+

241-4

+

-5+

否

+

否

设置时间选择器采用的时间格式，可选值：

-
  • 12：按照12小时制显示，用上午和下午进行区分；
  • 24：按照24小时制显示。
    说明：

    默认值会依据系统当前所选地区和语言选择当地习惯的小时制(12小时制或24小时制)。5+

    +

设置时间选择器采用的时间格式，可选值：

+
  • 12：按照12小时制显示，用上午和下午进行区分；
  • 24：按照24小时制显示。
    说明：

    默认值会依据系统当前所选地区和语言选择当地习惯的小时制(12小时制或24小时制)。5+
-日期时间选择器：type=datetime，日期的选择范围为本年的日月。 +### 日期时间选择器 + +滑动选择器类型设置为datetime时表示日期时间选择器，日期的选择范围为本年的日月。 - -

名称

+ - - - - - - - - - - - - - - - - - - - - - - - - - - - - -

名称

类型

+

类型

默认值

+

默认值

必填

+

必填

描述

+

描述

selected

+

selected

string

+

string

当前日期时间

+

当前日期时间

否

+

否

设置日期时间选择器弹窗的默认取值，格式有两种，为月日时分MM-DD-HH-mm或者年月日时分YYYY-MM-DD-HH-mm，不设置年时，默认使用当前年，该取值表示选择器弹窗时弹窗界面的默认选择值。

+

设置日期时间选择器弹窗的默认取值，有两种可选格式。

+
  • 月日时分：MM-DD-HH-mm
  • 年月日时分：YYYY-MM-DD-HH-mm
+

不设置年时，默认使用当前年，该取值表示选择器弹窗界面的默认选择值。

value

+

value

string

+

string

-

+

-

是

+

是

设置日期时间选择器的值。

+

设置日期时间选择器的值。

hours

+

hours

number

+

number

241-4

-

-5+

+

241-4

+

-5+

否

+

否

设置日期时间选择器采用的时间格式，可选值：

-
  • 12：按照12小时制显示，用上午和下午进行区分；
  • 24：按照24小时制显示。
    说明：

    默认值会依据系统当前所选地区和语言选择当地习惯的小时制(12小时制或24小时制)。5+

    +

设置日期时间选择器采用的时间格式，可选值：

+
  • 12：按照12小时制显示，用上午和下午进行区分；
  • 24：按照24小时制显示。
    说明：

    默认值会依据系统当前所选地区和语言选择当地习惯的小时制(12小时制或24小时制)。5+

lunar5+

+

lunar5+

boolean

+

boolean

false

+

false

否

+

否

设置日期时间选择器弹窗界面是否为农历展示。

+

设置日期时间选择器弹窗界面是否为农历展示。

lunarswitch

+

lunarswitch

boolean

+

boolean

false

+

false

否

+

否

设置日期选择器是否显示农历开关。当值为true时，显示农历开关，点击农历开关可切换公历和农历。当值为false时，不显示农历开关。

-
说明：

仅手机和平板设备支持。 当lunarswitch=true且lunar=true时，开关按钮处于被选中状态。

+

设置日期选择器是否显示农历开关。当值为true时，显示农历开关，点击农历开关可切换公历和农历。当值为false时，不显示农历开关。

+
说明：

仅手机和平板设备支持。 当lunarswitch=true且lunar=true时，开关按钮处于被选中状态。
-多列文本选择器：type=multi-text +### 多列文本选择器 - -

名称

+滑动选择器类型设置为multi-text时表示多列文本选择器。 + + - - - - - - - - - - - - - - - - - - - - - - - - @@ -395,130 +401,129 @@ 除支持[通用样式](js-components-common-styles.md)外，还支持如下样式： - -

名称

类型

+

类型

默认值

+

默认值

必填

+

必填

描述

+

描述

columns

+

columns

number

+

number

-

+

-

是

+

是

设置多列文本选择器的列数。

+

设置多列文本选择器的列数。

range

+

range

二维Array

+

二维Array

-

+

-

否

+

否

设置多列文本选择器的选择项，其中range 为二维数组。长度表示多少列，数组的每项表示每列的数据，如 [["a","b"], ["c","d"]]。

-
说明：

使用时需要使用数据绑定的方式，如range = {{data}}，js中声明相应变量：data：[["a","b"], ["c","d"]]。

+

设置多列文本选择器的选择项，其中range 为二维数组。长度表示多少列，数组的每项表示每列的数据，如 [["a","b"], ["c","d"]]。

+
说明：

使用时需要使用数据绑定的方式，如range = {{data}}，js中声明相应变量：data：[["a","b"], ["c","d"]]。

selected

+

selected

Array

+

Array

[0,0,0,…]

+

[0,0,0,…]

否

+

否

设置多列文本选择器弹窗的默认值，每一列被选中项对应的索引构成的数组，该取值表示选择器弹窗时弹窗界面的默认选择值。

+

设置多列文本选择器弹窗的默认值，每一列被选中项对应的索引构成的数组，该取值表示选择器弹窗界面的默认选择值。

value

+

value

Array

+

Array

-

+

-

否

+

否

设置多列文本选择器的值，每一列被选中项对应的值构成的数组。

+

设置多列文本选择器的值，每一列被选中项对应的值构成的数组。

名称

+ - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - @@ -529,153 +534,147 @@ 除支持[通用事件](js-components-common-events.md)外，还支持如下事件： -普通选择器： +### 普通选择器 - -

名称

类型

+

类型

默认值

+

默认值

必填

+

必填

描述

+

描述

text-color

+

text-color

<color>

+

<color>

-

+

-

否

+

否

选择器的文本颜色。

+

选择器的文本颜色。

font-size

+

font-size

<length>

+

<length>

-

+

-

否

+

否

选择器的文本尺寸。

+

选择器的文本尺寸。

allow-scale

+

allow-scale

boolean

+

boolean

true

+

true

否

+

否

选择器的文本尺寸是否跟随系统设置字体缩放尺寸进行放大缩小。

-
说明：

如果在config描述文件中针对ability配置了fontSize的config-changes标签，则应用不会重启而直接生效。

+

选择器的文本尺寸是否跟随系统设置字体缩放尺寸进行放大缩小。

+
说明：

如果在config描述文件中针对ability配置了fontSize的config-changes标签，则应用不会重启而直接生效。

letter-spacing

+

letter-spacing

<length>

+

<length>

0

+

0

否

+

否

选择器的字符间距。见text组件的letter-spacing样式属性。

+

选择器的字符间距。见text组件的letter-spacing样式属性。

text-decoration

+

text-decoration

string

+

string

-

+

-

否

+

否

选择器的文本修饰。见text组件的text-decoration样式属性。

+

选择器的文本修饰。见text组件的text-decoration样式属性。

font-style

+

font-style

string

+

string

normal

+

normal

否

+

否

选择器的字体样式。见text组件的font-style样式属性。

+

选择器的字体样式。见text组件的font-style样式属性。

font-weight

+

font-weight

number | string

+

number | string

normal

+

normal

否

+

否

选择器的字体粗细。见text组件的font-weight样式属性。

+

选择器的字体粗细。见text组件的font-weight样式属性。

font-family

+

font-family

string

+

string

sans-serif

+

sans-serif

否

+

否

选择器的字体列表，用逗号分隔，每个字体用字体名或者字体族名设置。列表中第一个系统中存在的或者通过自定义字体指定的字体，会被选中作为文本的字体。

+

选择器的字体列表，用逗号分隔，每个字体用字体名或者字体族名设置。列表中第一个系统中存在的或者通过自定义字体指定的字体，会被选中作为文本的字体。

line-height

+

line-height

<length>

+

<length>

0px

+

0px

否

+

否

选择器的文本行高。

+

选择器的文本行高。

column-height5+

+

column-height5+

<length>

+

<length>

-

+

-

否

+

否

选择器的选择项列表高度。

-
说明：

仅手机和平板设备支持。

+

选择器的选择项列表高度。

+
说明：

仅手机和平板设备支持。

名称

+ - - - - - - - -

名称

参数

+

参数

描述

+

描述

change

+

change

{ newValue:newValue, newSelected:newSelected }

+

{ newValue: newValue, newSelected: newSelected }

普通选择器选择值后点击弹窗中的确定按钮时触发该事件（newSelected为索引）。

+

普通选择器选择值后点击弹窗中的确定按钮时触发该事件（newSelected为索引）。

cancel

+

cancel

-

+

-

用户点击弹窗中的取消按钮时触发该事件。

+

用户点击弹窗中的取消按钮时触发该事件。
-日期选择器： +### 日期选择器 - -

名称

+ - - - - - - - -

名称

参数

+

参数

描述

+

描述

change

+

change

{ year:year, month:month, day:day }

+

{ year: year, month: month, day: day }

日期选择器选择值后点击弹窗中的确认按钮时触发该事件。

-
说明：

month值范围为： 0（1月）~11（12月）。5+

+

日期选择器选择值后点击弹窗中的确认按钮时触发该事件。

+
说明：

month值范围为： 0（1月）~11（12月）。5+

cancel

+

cancel

-

+

-

用户点击弹窗中的取消按钮时触发该事件。

+

用户点击弹窗中的取消按钮时触发该事件。
-日期时间选择器： +### 日期时间选择器 - -

名称

+ - - - - - - - -

名称

参数

+

参数

描述

+

描述

change

+

change

{ year:year, month:month, day:day, hour:hour, minute:minute}

+

{ year: year, month: month, day: day, hour: hour, minute: minute}

日期时间选择器选择值后点击弹窗中的确认按钮时触发该事件。

+

日期时间选择器选择值后点击弹窗中的确认按钮时触发该事件。

cancel

+

cancel

-

+

-

用户点击弹窗中的取消按钮时触发该事件。

+

用户点击弹窗中的取消按钮时触发该事件。
-时间选择器： +### 时间选择器 - -

名称

+ - - - - - - - -

名称

参数

+

参数

描述

+

描述

change

+

change

{ hour:hour, minute:minute,

-

[second:second] }

+

{ hour: hour, minute: minute, [second: second] }

时间选择器选择值后点击弹窗中的确认按钮时触发该事件，当使用时分秒时，还包含秒数据。

+

时间选择器选择值后点击弹窗中的确认按钮时触发该事件，当使用时分秒时，还包含秒数据。

cancel

+

cancel

-

+

-

用户点击弹窗中的取消按钮时触发该事件。

+

用户点击弹窗中的取消按钮时触发该事件。
-多列文本选择器： +### 多列文本选择器 - -

名称

+ - - - - - - - - - - - @@ -685,20 +684,19 @@ 除支持[通用方法](js-components-common-methods.md)外，支持如下方法： - -

名称

参数

+

参数

描述

+

描述

change

+

change

{ newValue:[newValue1, newValue2, newValue3, …], newSelected:[newSelected1, newSelected2, newSelected3, …] }

+

{ newValue: [newValue1, newValue2, newValue3, …], newSelected:[newSelected1, newSelected2, newSelected3, …] }

多列文本选择器选择值后点击弹窗中的确认按钮时触发该事件，其中：

-
  • newValue：被选中项对应的值构成的数组。
  • newSelected：被选中项对应的索引构成的数组，两者的长度和range的长度一致。
+

多列文本选择器选择值后点击弹窗中的确认按钮时触发该事件，其中：

+
  • newValue：被选中项对应的值构成的数组。
  • newSelected：被选中项对应的索引构成的数组，两者的长度和range的长度一致。

columnchange

+

columnchange

{ column:column, newValue:newValue, newSelected:newSelected }

+

{ column: column, newValue: newValue, newSelected: newSelected }

多列文本选择器中某一列的值改变时触发该事件，其中：

-
  • column：第几列修改。
  • newValue：选中的值。
  • newSelected：选中值对应的索引。
+

多列文本选择器中某一列的值改变时触发该事件，其中：

+
  • column：第几列修改。
  • newValue：选中的值。
  • newSelected：选中值对应的索引。

cancel

+

cancel

-

+

-

用户点击弹窗中的取消按钮时触发该事件。

+

用户点击弹窗中的取消按钮时触发该事件。

名称

+ - - - - - @@ -709,20 +707,25 @@ ```
- + + - + - + - + - +
``` @@ -733,28 +736,23 @@ justify-content: center; align-items: center; } -.pickertext{ - background-color: red; - width: 300; - height: 400; -} -.pickerdate{ - background-color: #BEFF5B; - width: 200; - height: 200; -} -.pickertime{ - background-color: #B764FF; - width: 500; - height: 200; + picker{ + width:60%; + height:80px; + border-radius:20px; + text-color:white; + font-size:15px; + background-color:#4747e3; + margin-left:20%; } -.pickerdatetime{ - background-color: #FF6387; - width: 100%; - height: 300; -} -.pickermuitl{ - background-color: #71FF31; + select{ + background-color: #efecec; + height: 50px; + width: 60%; + margin-left: 20%; + margin-top: 300px; + margin-bottom: 50px; + font-size: 22px; } ``` @@ -764,6 +762,7 @@ import router from '@system.router'; import prompt from '@system.prompt'; export default { data: { + selectList:["text","data","time","datetime","multitext"], rangetext:['15', "20", "25"], multitext:[["a", "b", "c"], ["e", "f", "g"], ["h", "i"], ["k", "l", "m"]], textvalue:'default textvalue', @@ -778,6 +777,13 @@ export default { dateselect:'2021-3-2', textselect:'2' }, + selectChange(e){ + for(let i = 0;i -![](figures/text.png "text") - -**图 2** date - - -![](figures/date33.png) - -**图 3** time -![](figures/time.png "time") - -**图 4** datetime -![](figures/datetime.png "datetime") - -**图 5** multitext -![](figures/multitext.png "multitext") +![](figures/mmmm.gif) diff --git a/zh-cn/application-dev/reference/arkui-js/js-components-basic-piece.md b/zh-cn/application-dev/reference/arkui-js/js-components-basic-piece.md index fc9a08fe4a14c9653970b5ed28945881ec5fac83..7cab19b45c3046537b850656563fdc81f09238f5 100644 --- a/zh-cn/application-dev/reference/arkui-js/js-components-basic-piece.md +++ b/zh-cn/application-dev/reference/arkui-js/js-components-basic-piece.md @@ -2,9 +2,6 @@ 一种块状的入口，可包含图片和文本。常用于展示收件人，例如：邮件收件人或信息收件人。 ->![](../../public_sys-resources/icon-note.gif) **说明：** ->从API Version 5 开始支持。 - ## 子组件 无 @@ -13,50 +10,49 @@ 除支持[通用属性](js-components-common-attributes.md)外，还支持如下属性： - -

名称

参数

+

参数

描述

+

描述

show

+

show

-

+

-

显示 picker。

+

显示 picker。

名称

+ - - - - - - - - - - - - - - - - - - - @@ -73,20 +69,19 @@ 除支持[通用事件](js-components-common-events.md)外，还支持如下事件： - -

名称

类型

+

类型

默认值

+

默认值

必填

+

必填

描述

+

描述

content

+

content

string

+

string

-

+

-

是

+

是

操作块文本内容。

+

操作块文本内容。

closable

+

closable

boolean

+

boolean

false

+

false

否

+

否

设置当前操作块是否显示删除图标，当显示删除图标时，点击删除图标会触发close事件。

+

设置当前操作块是否显示删除图标，当显示删除图标时，点击删除图标会触发close事件。

icon

+

icon

string

+

string

-

+

-

否

+

否

操作块删除图标的url，支持本地。

+

操作块删除图标的url，支持本地。

名称

+ - - - - - diff --git a/zh-cn/application-dev/reference/arkui-js/js-components-basic-progress.md b/zh-cn/application-dev/reference/arkui-js/js-components-basic-progress.md index 3940ed7750e99b9b750be1ac1e73ccc3e1ccc61d..9be9c6722894dceabb7714da9fb126ef503369b7 100644 --- a/zh-cn/application-dev/reference/arkui-js/js-components-basic-progress.md +++ b/zh-cn/application-dev/reference/arkui-js/js-components-basic-progress.md @@ -14,29 +14,28 @@ 除支持[通用属性](js-components-common-attributes.md)外，还支持如下属性： - -

名称

参数

+

参数

描述

+

描述

close

+

close

-

+

-

当piece组件点击删除图标触发，此时可以通过渲染属性if删除该组件。

+

当piece组件点击删除图标触发，此时可以通过渲染属性if删除该组件。

名称

+ - - - - - - - - - @@ -46,39 +45,38 @@ - 类型为horizontal、ring、scale-ring时，支持如下属性： - -

名称

类型

+

类型

默认值

+

默认值

必填

+

必填

描述

+

描述

type

+

type

string

+

string

horizontal

+

horizontal

否

+

否

设置进度条的类型，该属性不支持动态修改，可选值为：

-
  • horizontal：线性进度条；
  • circular：loading样式进度条；
  • ring：圆环形进度条；
  • scale-ring：带刻度圆环形进度条
  • arc：弧形进度条。
  • eclipse5+：圆形进度条，展现类似月圆月缺的进度展示效果。
+

设置进度条的类型，该属性不支持动态修改，可选值为：

+
  • horizontal：线性进度条；
  • circular：loading样式进度条；
  • ring：圆环形进度条；
  • scale-ring：带刻度圆环形进度条
  • arc：弧形进度条。
  • eclipse5+：圆形进度条，展现类似月圆月缺的进度展示效果。

名称

+ - - - - - - - - - - - - - - @@ -86,28 +84,27 @@ - 类型为ring、scale-ring时，支持如下属性： - -

名称

类型

+

类型

默认值

+

默认值

必填

+

必填

描述

+

描述

percent

+

percent

number

+

number

0

+

0

否

+

否

当前进度。取值范围为0-100。

+

当前进度。取值范围为0-100。

secondarypercent

+

secondarypercent

number

+

number

0

+

0

否

+

否

次级进度。取值范围为0-100。

+

次级进度。取值范围为0-100。

名称

+ - - - - - - - - - @@ -115,28 +112,27 @@ - 类型为arc、eclipse5+时，支持如下属性： - -

名称

类型

+

类型

默认值

+

默认值

必填

+

必填

描述

+

描述

clockwise

+

clockwise

boolean

+

boolean

true

+

true

否

+

否

圆环形进度条是否采用顺时针。

+

圆环形进度条是否采用顺时针。

名称

+ - - - - - - - - - @@ -149,62 +145,61 @@ type=horizontal - -

名称

类型

+

类型

默认值

+

默认值

必填

+

必填

描述

+

描述

percent

+

percent

number

+

number

0

+

0

否

+

否

当前进度。取值范围为0-100。

+

当前进度。取值范围为0-100。

名称

+ - - - - - - - - - - - - - - - - - - - - - - - - @@ -212,28 +207,27 @@ type=horizontal type=circular - -

名称

类型

+

类型

默认值

+

默认值

必填

+

必填

描述

+

描述

color

+

color

<color>

+

<color>

#ff007dff

+

#ff007dff

否

+

否

设置进度条的颜色。

+

设置进度条的颜色。

stroke-width

+

stroke-width

<length>

+

<length>

4px

-

+

4px

+

否

+

否

设置进度条的宽度。

+

设置进度条的宽度。

background-color

+

background-color

<color>

+

<color>

-

+

-

否

+

否

设置进度条的背景色。

+

设置进度条的背景色。

secondary-color

+

secondary-color

<color>

+

<color>

-

+

-

否

+

否

设置次级进度条的颜色。

+

设置次级进度条的颜色。

名称

+ - - - - - - - - - @@ -241,85 +235,84 @@ type=circular type=ring, scale-ring - -

名称

类型

+

类型

默认值

+

默认值

必填

+

必填

描述

+

描述

color

+

color

<color>

+

<color>

-

+

-

否

+

否

loading进度条上的圆点颜色。

+

loading进度条上的圆点颜色。

名称

+ - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - @@ -327,109 +320,108 @@ type=ring, scale-ring type=arc - -

名称

类型

+

类型

默认值

+

默认值

必填

+

必填

描述

+

描述

color

+

color

<color> | <linear-gradient>

+

<color> | <linear-gradient>

-

+

-

否

+

否

环形进度条的颜色，ring类型支持线性渐变色设置。

-
说明：

线性渐变色仅支持两个颜色参数设置格式，如color = linear-gradient(#ff0000, #00ff00)。

+

环形进度条的颜色，ring类型支持线性渐变色设置。

+
说明：

线性渐变色仅支持两个颜色参数设置格式，如color = linear-gradient(#ff0000, #00ff00)。

background-color

+

background-color

<color>

+

<color>

-

+

-

否

+

否

环形进度条的背景色。

+

环形进度条的背景色。

secondary-color

+

secondary-color

<color>

+

<color>

-

+

-

否

+

否

环形次级进度条的颜色。

+

环形次级进度条的颜色。

stroke-width

+

stroke-width

<length>

+

<length>

10px

+

10px

否

+

否

环形进度条的宽度。

+

环形进度条的宽度。

scale-width

+

scale-width

<length>

+

<length>

-

+

-

否

+

否

带刻度的环形进度条的刻度粗细，类型为scale-ring生效。

+

带刻度的环形进度条的刻度粗细，类型为scale-ring生效。

scale-number

+

scale-number

number

+

number

120

+

120

否

+

否

带刻度的环形进度条的刻度数量，类型为scale-ring生效。

+

带刻度的环形进度条的刻度数量，类型为scale-ring生效。

名称

+ - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - @@ -437,39 +429,38 @@ type=arc type=eclipse5+ - -

名称

类型

+

类型

默认值

+

默认值

必填

+

必填

描述

+

描述

color

+

color

<color>

+

<color>

-

-

+

-

+

否

+

否

弧形进度条的颜色。

+

弧形进度条的颜色。

background-color

+

background-color

<color>

+

<color>

-

-

+

-

+

否

+

否

弧形进度条的背景色。

+

弧形进度条的背景色。

stroke-width

+

stroke-width

<length>

+

<length>

4px

+

4px

否

+

否

弧形进度条的宽度。

-
说明：

进度条宽度越大，进度条越靠近圆心，进度条始终在半径区域内。

+

弧形进度条的宽度。

+
说明：

进度条宽度越大，进度条越靠近圆心，进度条始终在半径区域内。

start-angle

+

start-angle

<deg>

+

<deg>

240

+

240

否

+

否

弧形进度条起始角度，以时钟0点为基线，取值范围为0到360（顺时针）。

+

弧形进度条起始角度，以时钟0点为基线，取值范围为0到360（顺时针）。

total-angle

+

total-angle

<deg>

+

<deg>

240

+

240

否

+

否

弧形进度条总长度，范围为-360到360，负数标识起点到终点为逆时针。

+

弧形进度条总长度，范围为-360到360，负数标识起点到终点为逆时针。

center-x

+

center-x

<length>

+

<length>

弧形进度条宽度的一半

+

弧形进度条宽度的一半

否

+

否

弧形进度条中心位置，（坐标原点为组件左上角顶点）。该样式需要和center-y和radius一起使用。

+

弧形进度条中心位置，（坐标原点为组件左上角顶点）。该样式需要和center-y和radius一起使用。

center-y

+

center-y

<length>

+

<length>

弧形进度条高度的一半

+

弧形进度条高度的一半

否

+

否

弧形进度条中心位置，（坐标原点为组件左上角顶点）。该样式需要和center-x和radius一起使用。

+

弧形进度条中心位置，（坐标原点为组件左上角顶点）。该样式需要和center-x和radius一起使用。

radius

+

radius

<length>

+

<length>

弧形进度条宽高最小值的一半

+

弧形进度条宽高最小值的一半

否

+

否

弧形进度条半径，该样式需要和center-x和center-y一起使用。

+

弧形进度条半径，该样式需要和center-x和center-y一起使用。

名称

+ - - - - - - - - - - - - - - diff --git a/zh-cn/application-dev/reference/arkui-js/js-components-basic-qrcode.md b/zh-cn/application-dev/reference/arkui-js/js-components-basic-qrcode.md index 2cc06af6065797af7377282a7854e0f95fdfdaf5..d1149797eb3119b84e75a83ac0fd36388c5185b0 100644 --- a/zh-cn/application-dev/reference/arkui-js/js-components-basic-qrcode.md +++ b/zh-cn/application-dev/reference/arkui-js/js-components-basic-qrcode.md @@ -2,9 +2,6 @@ 生成并显示二维码。 ->![](../../public_sys-resources/icon-note.gif) **说明：** ->从API Version 5 开始支持。 - ## 权限列表 无 @@ -17,40 +14,39 @@ 除支持[通用属性](js-components-common-attributes.md)外，还支持如下属性： - -

名称

类型

+

类型

默认值

+

默认值

必填

+

必填

描述

+

描述

color

+

color

<color>

+

<color>

-

+

-

否

+

否

圆形进度条的颜色。

+

圆形进度条的颜色。

background-color

+

background-color

<color>

+

<color>

-

+

-

否

+

否

弧形进度条的背景色。

+

弧形进度条的背景色。

名称

+ - - - - - - - - - - - - - - @@ -60,39 +56,38 @@ 除支持[通用样式](js-components-common-styles.md)外，还支持如下样式： - -

名称

类型

+

类型

默认值

+

默认值

必填

+

必填

描述

+

描述

value

+

value

string

+

string

-

+

-

是

+

是

用来生成二维码的内容。

+

用来生成二维码的内容。

type

+

type

string

+

string

rect

+

rect

否

+

否

二维码类型。可能选项有：

-
  • rect：矩形二维码。
  • circle：圆形二维码。
+

二维码类型。可能选项有：

+
  • rect：矩形二维码。
  • circle：圆形二维码。

名称

+ - - - - - - - - - - - - - - diff --git a/zh-cn/application-dev/reference/arkui-js/js-components-basic-rating.md b/zh-cn/application-dev/reference/arkui-js/js-components-basic-rating.md index 29a3d5860f6b418d2a7c8591750997fdcbc1039c..40811a1e11b65bcddeea2c38c74af62550327e78 100644 --- a/zh-cn/application-dev/reference/arkui-js/js-components-basic-rating.md +++ b/zh-cn/application-dev/reference/arkui-js/js-components-basic-rating.md @@ -14,63 +14,62 @@ 除支持[通用属性](js-components-common-attributes.md)外，还支持如下属性： - -

名称

类型

+

类型

默认值

+

默认值

必填

+

必填

描述

+

描述

color

+

color

<color>

+

<color>

#000000

+

#000000

否

+

否

二维码颜色。

+

二维码颜色。

background-color

+

background-color

<color>

+

<color>

#ffffff

+

#ffffff

否

+

否

二维码背景颜色。

+

二维码背景颜色。

名称

+ - - - - - - - - - - - - - - - - - - - - - - - - @@ -80,85 +79,84 @@ 除支持[通用样式](js-components-common-styles.md)外，还支持如下样式： - -

名称

类型

+

类型

默认值

+

默认值

必填

+

必填

描述

+

描述

numstars

+

numstars

number

+

number

5

+

5

否

+

否

设置评分条的星级总数。

+

设置评分条的星级总数。

rating

+

rating

number

+

number

0

+

0

否

+

否

设置评分条当前评星数。

+

设置评分条当前评星数。

stepsize

+

stepsize

number

+

number

0.5

+

0.5

否

+

否

设置评分条的评星步长。

-
说明：

仅手机和平板设备支持

+

设置评分条的评星步长。

+
说明：

仅手机和平板设备支持

indicator

+

indicator

boolean

+

boolean

false

+

false

否

+

否

设置评分条是否作为一个指示器，此时用户不可操作。

+

设置评分条是否作为一个指示器，此时用户不可操作。

名称

+ - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - @@ -171,20 +169,19 @@ 除支持[通用事件](js-components-common-events.md)外，还支持如下事件： - -

名称

类型

+

类型

默认值

+

默认值

必填

+

必填

描述

+

描述

star-background

+

star-background

string

+

string

-

+

-

否

+

否

设置单个星级未选中的背景图片，只支持本地路径图片，图片格式为png和jpg。

+

设置单个星级未选中的背景图片，只支持本地路径图片，图片格式为png和jpg。

star-foreground

+

star-foreground

string

+

string

-

+

-

否

+

否

设置单个星级选中的前景图片，只支持本地路径图片，图片格式为png和jpg。

+

设置单个星级选中的前景图片，只支持本地路径图片，图片格式为png和jpg。

star-secondary

+

star-secondary

string

+

string

-

+

-

否

+

否

设置单个星级部分选中的次级背景图片，该图片会覆盖背景图片，只支持本地路径图片，图片格式为png和jpg。

+

设置单个星级部分选中的次级背景图片，该图片会覆盖背景图片，只支持本地路径图片，图片格式为png和jpg。

width

+

width

<length>|<percentage>

+

<length>|<percentage>

120px

-

60px（不可操作）

+

120px

+

60px（不可操作）

否

+

否

默认值是在未设置自定义资源和评分星数时，使用5个星和默认资源下的宽度值。

+

默认值是在未设置自定义资源和评分星数时，使用5个星和默认资源下的宽度值。

height

+

height

<length>|<percentage>

+

<length>|<percentage>

24px

-

12px（不可操作）

+

24px

+

12px（不可操作）

否

+

否

默认值是在未设置自定义资源和评分星数时，使用5个星和默认资源下的高度值。

+

默认值是在未设置自定义资源和评分星数时，使用5个星和默认资源下的高度值。

rtl-flip

+

rtl-flip

boolean

+

boolean

true

+

true

否

+

否

在RTL文字方向下是否自动翻转图源。

+

在RTL文字方向下是否自动翻转图源。

名称

+ - - - - - diff --git a/zh-cn/application-dev/reference/arkui-js/js-components-basic-richtext.md b/zh-cn/application-dev/reference/arkui-js/js-components-basic-richtext.md index b18d45c2f294064174f4e3fd3dbdb459fab2a105..957029b6e9c0962cfdeeeff0b1305b8927f23f74 100644 --- a/zh-cn/application-dev/reference/arkui-js/js-components-basic-richtext.md +++ b/zh-cn/application-dev/reference/arkui-js/js-components-basic-richtext.md @@ -3,7 +3,6 @@ 富文本组件，用于展示富文本信息。 >![](../../public_sys-resources/icon-note.gif) **说明：** ->- 从 API Version 6 开始支持。 >- 富文本内容需要写在元素标签内。 ## 权限列表 @@ -22,27 +21,26 @@ 除支持[通用事件](js-components-common-events.md)外，还支持如下事件： - -

名称

参数

+

参数

描述

+

描述

change

+

change

{ rating: number }

+

{ rating: number }

评分条的评星发生改变时触发该回调。

+

评分条的评星发生改变时触发该回调。

名称

+ - - - - - - - - @@ -53,6 +51,7 @@ >- 不支持无障碍事件。 >- 包含richtext的页面返回时richtext显示区域不会跟随页面的转场动效。 >- richtext内容不建议超过一个屏幕高度，超出部分不会显示。 +>- 不支持设置宽度，默认撑开全屏。 ## 方法 diff --git a/zh-cn/application-dev/reference/arkui-js/js-components-basic-search.md b/zh-cn/application-dev/reference/arkui-js/js-components-basic-search.md index 6f3f08839320552a009be6f84ac8badba0466f21..4f36d73e57139c86f4ead73dfd50111dba71c524 100644 --- a/zh-cn/application-dev/reference/arkui-js/js-components-basic-search.md +++ b/zh-cn/application-dev/reference/arkui-js/js-components-basic-search.md @@ -10,72 +10,71 @@ 除支持[通用属性](js-components-common-attributes.md)外，还支持如下属性： - -

名称

参数

+

参数

描述

+

描述

start

+

start

-

+

-

开始加载时触发。

+

开始加载时触发。

complete

+

complete

-

+

-

加载完成时触发。

+

加载完成时触发。

名称

+ - - - - - - - - - - - - - - - - - - - - - - - - - - - - - @@ -84,26 +83,26 @@ **表 1** MenuOption5+ -

名称

类型

+

类型

默认值

+

默认值

必填

+

必填

描述

+

描述

icon

+

icon

string

+

string

-

+

-

否

+

否

搜索图标，默认使用系统搜索图标，图标格式为svg，jpg和png。

+

搜索图标，默认使用系统搜索图标，图标格式为svg，jpg和png。

hint

+

hint

string

+

string

-

+

-

否

+

否

搜索提示文字。

+

搜索提示文字。

value

+

value

string

+

string

-

+

-

否

+

否

搜索框搜索文本值。

+

搜索框搜索文本值。

searchbutton5+

+

searchbutton5+

string

+

string

-

+

-

否

+

否

搜索框末尾搜索按钮文本值。

+

搜索框末尾搜索按钮文本值。

menuoptions5+

+

menuoptions5+

Array<MenuOption>

+

Array<MenuOption>

-

+

-

否

+

否

设置文本选择弹框点击更多按钮之后显示的菜单项。

+

设置文本选择弹框点击更多按钮之后显示的菜单项。

名称

+ - - - - - - - - @@ -113,96 +112,95 @@ 除支持[通用样式](js-components-common-styles.md)外，还支持如下样式： - -

名称

类型

+

类型

描述

+

描述

icon

+

icon

string

+

string

菜单选项中的图标路径。

+

菜单选项中的图标路径。

content

+

content

string

+

string

菜单选项中的文本内容。

+

菜单选项中的文本内容。

名称

+ - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - @@ -212,57 +210,56 @@ 除支持[通用事件](js-components-common-events.md)外，还支持如下事件： - -

名称

类型

+

类型

默认值

+

默认值

必填

+

必填

描述

+

描述

color

+

color

<color>

+

<color>

#e6000000

+

#e6000000

否

+

否

搜索框的文本颜色。

+

搜索框的文本颜色。

font-size

+

font-size

<length>

+

<length>

16px

+

16px

否

+

否

搜索框的文本尺寸。

+

搜索框的文本尺寸。

allow-scale

+

allow-scale

boolean

+

boolean

true

+

true

否

+

否

搜索框的文本尺寸是否跟随系统设置字体缩放尺寸进行放大缩小。

-
说明：

如果在config描述文件中针对ability配置了fontSize的config-changes标签，则应用不会重启而直接生效。

+

搜索框的文本尺寸是否跟随系统设置字体缩放尺寸进行放大缩小。

+
说明：

如果在config描述文件中针对ability配置了fontSize的config-changes标签，则应用不会重启而直接生效。

placeholder-color

+

placeholder-color

<color>

+

<color>

#99000000

+

#99000000

否

+

否

搜索框的提示文本颜色。

+

搜索框的提示文本颜色。

font-weight

+

font-weight

number | string

+

number | string

normal

+

normal

否

+

否

搜索框的字体粗细，见text组件font-weight的样式属性。

+

搜索框的字体粗细，见text组件font-weight的样式属性。

font-family

+

font-family

string

+

string

sans-serif

+

sans-serif

否

+

否

搜索框的字体列表，用逗号分隔，每个字体用字体名或者字体族名设置。列表中第一个系统中存在的或者通过自定义字体指定的字体，会被选中作为文本的字体。

+

搜索框的字体列表，用逗号分隔，每个字体用字体名或者字体族名设置。列表中第一个系统中存在的或者通过自定义字体指定的字体，会被选中作为文本的字体。

caret-color6+

+

caret-color6+

<color>

+

<color>

-

+

-

否

+

否

设置输入光标的颜色。

+

设置输入光标的颜色。

名称

+ - - - - - - - - - - - - - - - - - - - - diff --git a/zh-cn/application-dev/reference/arkui-js/js-components-basic-select.md b/zh-cn/application-dev/reference/arkui-js/js-components-basic-select.md index 17a2d1eb7065d810e127304d6a7d78dc94f813f1..54127fa0ecf141ba15cdcbd11388063fe042e691 100644 --- a/zh-cn/application-dev/reference/arkui-js/js-components-basic-select.md +++ b/zh-cn/application-dev/reference/arkui-js/js-components-basic-select.md @@ -18,28 +18,27 @@ 除支持[通用样式](js-components-common-styles.md)外，还支持如下样式： - -

名称

参数

+

参数

描述

+

描述

change

+

change

{ text:newText }

+

{ text:newText }

输入内容发生变化时触发。

-
说明：

改变value属性值不会触发该回调。

+

输入内容发生变化时触发。

+
说明：

改变value属性值不会触发该回调。

submit

+

submit

{ text:submitText }

+

{ text:submitText }

点击搜索图标、搜索按钮5+或者按下软键盘搜索按钮时触发。

+

点击搜索图标、搜索按钮5+或者按下软键盘搜索按钮时触发。

translate5+

+

translate5+

{ value: selectedText }

+

{ value: selectedText }

设置此事件后，进行文本选择操作后文本选择弹窗会出现翻译按钮，点击翻译按钮之后，触发该回调，返回选中的文本内容。

+

设置此事件后，进行文本选择操作后文本选择弹窗会出现翻译按钮，点击翻译按钮之后，触发该回调，返回选中的文本内容。

share5+

+

share5+

{ value: selectedText }

+

{ value: selectedText }

设置此事件后，进行文本选择操作后文本选择弹窗会出现分享按钮，点击分享按钮之后，触发该回调，返回选中的文本内容。

+

设置此事件后，进行文本选择操作后文本选择弹窗会出现分享按钮，点击分享按钮之后，触发该回调，返回选中的文本内容。

search5+

+

search5+

{ value: selectedText }

+

{ value: selectedText }

设置此事件后，进行文本选择操作后文本选择弹窗会出现搜索按钮，点击搜索按钮之后，触发该回调，返回选中的文本内容。

+

设置此事件后，进行文本选择操作后文本选择弹窗会出现搜索按钮，点击搜索按钮之后，触发该回调，返回选中的文本内容。

optionselect5+

+

optionselect5+

{ index:optionIndex, value: selectedText }

+

{ index:optionIndex, value: selectedText }

文本选择弹窗中设置menuoptions属性后，用户在文本选择操作后，点击菜单项后触发该回调，返回点击的菜单项序号和选中的文本内容。

+

文本选择弹窗中设置menuoptions属性后，用户在文本选择操作后，点击菜单项后触发该回调，返回点击的菜单项序号和选中的文本内容。

名称

+ - - - - - - - - - @@ -49,20 +48,19 @@ 除支持[通用事件](js-components-common-events.md)外，还支持如下事件： - -

名称

类型

+

类型

默认值

+

默认值

必填

+

必填

描述

+

描述

font-family

+

font-family

string

+

string

sans-serif

+

sans-serif

否

+

否

字体列表，用逗号分隔，每个字体用字体名或者字体族名设置。列表中第一个系统中存在的或者通过自定义字体指定的字体，会被选中作为文本的字体。

+

字体列表，用逗号分隔，每个字体用字体名或者字体族名设置。列表中第一个系统中存在的或者通过自定义字体指定的字体，会被选中作为文本的字体。

名称

+ - - - - - diff --git a/zh-cn/application-dev/reference/arkui-js/js-components-basic-slider.md b/zh-cn/application-dev/reference/arkui-js/js-components-basic-slider.md index 419b41ce1bd0a7e8ea1769401c34795b1226d14f..19644290837f2f68c82b738f63ba592a6fe76404 100644 --- a/zh-cn/application-dev/reference/arkui-js/js-components-basic-slider.md +++ b/zh-cn/application-dev/reference/arkui-js/js-components-basic-slider.md @@ -10,100 +10,99 @@ 除支持[通用属性](js-components-common-attributes.md)外，还支持如下属性： - -

名称

参数

+

参数

描述

+

描述

change

+

change

{newValue: newValue}

+

{newValue: newValue}

下拉选择新值后触发该事件，newValue的值为子组件option的value属性值。

+

下拉选择新值后触发该事件，newValue的值为子组件option的value属性值。

名称

+ - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - @@ -114,51 +113,50 @@ 除支持[通用样式](js-components-common-styles.md)外，还支持如下样式： - -

名称

类型

+

类型

默认值

+

默认值

必填

+

必填

描述

+

描述

min

+

min

number

+

number

0

+

0

否

+

否

滑动选择器的最小值。

+

滑动选择器的最小值。

max

+

max

number

+

number

100

+

100

否

+

否

滑动选择器的最大值。

+

滑动选择器的最大值。

step

+

step

number

+

number

1

+

1

否

+

否

每次滑动的步长。

+

每次滑动的步长。

value

+

value

number

+

number

0

+

0

否

+

否

滑动选择器的初始值。

+

滑动选择器的初始值。

mode5+

+

mode5+

string

+

string

outset

+

outset

否

+

否

滑动条样式：

-
  • outset：滑块在滑杆上；
  • inset：滑块在滑杆内。
    说明：

    仅手机和平板设备支持。

    +

滑动条样式：

+
  • outset：滑块在滑杆上；
  • inset：滑块在滑杆内。
    说明：

    仅手机和平板设备支持。

showsteps5+

+

showsteps5+

boolean

+

boolean

false

+

false

否

+

否

是否显示步长标识；

-
说明：

仅手机和平板设备支持。

+

是否显示步长标识；

+
说明：

仅手机和平板设备支持。

showtips5+

+

showtips5+

boolean

+

boolean

false

+

false

否

+

否

滑动时是否有气泡提示百分比；

-
说明：

仅手机和平板设备支持。

+

滑动时是否有气泡提示百分比；

+
说明：

仅手机和平板设备支持。

名称

+ - - - - - - - - - - - - - - - - - - - @@ -169,20 +167,19 @@ 除支持[通用事件](js-components-common-events.md)外，还支持如下事件： - -

名称

类型

+

类型

默认值

+

默认值

必填

+

必填

描述

+

描述

color

+

color

<color>

+

<color>

#19000000

+

#19000000

否

+

否

滑动条的背景颜色。

+

滑动条的背景颜色。

selected-color

+

selected-color

<color>

+

<color>

#ff007dff

+

#ff007dff

否

+

否

滑动条的已选择颜色。

+

滑动条的已选择颜色。

block-color

+

block-color

<color>

+

<color>

#ffffff

+

#ffffff

否

+

否

滑动条的滑块颜色。

-
说明：

仅手机、平板和智慧屏设备支持。

+

滑动条的滑块颜色。

+
说明：

仅手机、平板和智慧屏设备支持。

名称

+ - - - - - @@ -191,42 +188,42 @@ **表 1** ChangeEvent -

名称

参数

+

参数

描述

+

描述

change

+

change

ChangeEvent

+

ChangeEvent

选择值发生变化时触发该事件。

+

选择值发生变化时触发该事件。

属性

+ - - - - - - - - - - - - - - @@ -240,7 +237,7 @@ slider start value is {{startValue}}slider current value is {{currentValue}}slider end value is {{endValue}} - + ``` @@ -250,6 +247,8 @@ flex-direction: column; justify-content: center; align-items: center; + + } ``` diff --git a/zh-cn/application-dev/reference/arkui-js/js-components-basic-span.md b/zh-cn/application-dev/reference/arkui-js/js-components-basic-span.md index 6fa717a0b9d0f66500c04dc61bcb5e6b45a20749..657a0bbd8a917bb6316c5d2a1e91280679de808d 100644 --- a/zh-cn/application-dev/reference/arkui-js/js-components-basic-span.md +++ b/zh-cn/application-dev/reference/arkui-js/js-components-basic-span.md @@ -15,102 +15,101 @@ 支持[通用属性](js-components-common-attributes.md)。 >![](../../public_sys-resources/icon-note.gif) **说明：** ->- 不支持focusable和disabled属性。 +>不支持focusable和disabled属性。 ## 样式 仅支持如下样式： - -

属性

类型

+

类型

说明

+

说明

progress(deprecated5+)

+

progress(deprecated5+)

string

+

string

当前slider的进度值。

+

当前slider的进度值。

isEnd(deprecated5+)

+

isEnd(deprecated5+)

string

+

string

当前slider是否拖拽结束，可选值为：

-
  • true：slider拖拽结束。
  • false：slider拖拽中。
+

当前slider是否拖拽结束，可选值为：

+
  • true：slider拖拽结束。
  • false：slider拖拽中。

value5+

+

value5+

number

+

number

当前slider的进度值。

+

当前slider的进度值。

mode5+

+

mode5+

string

+

string

当前change事件的类型，可选值为：

-
  • start：slider的值开始改变。
  • move：slider的值跟随手指拖动中。
  • end：slider的值结束改变。
+

当前change事件的类型，可选值为：

+
  • start：slider的值开始改变。
  • move：slider的值跟随手指拖动中。
  • end：slider的值结束改变。

名称

+ - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - diff --git a/zh-cn/application-dev/reference/arkui-js/js-components-basic-switch.md b/zh-cn/application-dev/reference/arkui-js/js-components-basic-switch.md index 5636ddd9d08676e828e5db8a3403c18cbb5e8eaa..95d5c8319bc71ac78ac0127e31aaecd63f476f35 100644 --- a/zh-cn/application-dev/reference/arkui-js/js-components-basic-switch.md +++ b/zh-cn/application-dev/reference/arkui-js/js-components-basic-switch.md @@ -14,61 +14,60 @@ 除支持[通用属性](js-components-common-attributes.md)外，还支持如下属性： - -

名称

类型

+

类型

默认值

+

默认值

必填

+

必填

描述

+

描述

color

+

color

<color>

+

<color>

-

+

-

否

+

否

设置文本段落的文本颜色。

+

设置文本段落的文本颜色。

font-size

+

font-size

<length>

+

<length>

30px

+

30px

否

+

否

设置文本段落的文本尺寸。

+

设置文本段落的文本尺寸。

allow-scale

+

allow-scale

boolean

+

boolean

true

+

true

否

+

否

设置文本段落的文本尺寸是否跟随系统设置字体缩放尺寸进行放大缩小。

-
说明：

如果在config描述文件中针对ability配置了fontSize的config-changes标签，则应用不会重启而直接生效。

+

设置文本段落的文本尺寸是否跟随系统设置字体缩放尺寸进行放大缩小。

+
说明：

如果在config描述文件中针对ability配置了fontSize的config-changes标签，则应用不会重启而直接生效。

font-style

+

font-style

string

+

string

normal

+

normal

否

+

否

设置文本段落的字体样式，见text组件font-style的样式属性。

+

设置文本段落的字体样式，见text组件font-style的样式属性。

font-weight

+

font-weight

number | string

+

number | string

normal

+

normal

否

+

否

设置文本段落的字体粗细，见text组件font-weight的样式属性。

+

设置文本段落的字体粗细，见text组件font-weight的样式属性。

text-decoration

+

text-decoration

string

+

string

none

+

none

否

+

否

设置文本段落的文本修饰，见text组件text-decoration样式属性。

+

设置文本段落的文本修饰，见text组件text-decoration样式属性。

font-family

+

font-family

string

+

string

sans-serif

+

sans-serif

否

+

否

设置文本段落的字体列表，用逗号分隔，每个字体用字体名或者字体族名设置。列表中第一个系统中存在的或者通过自定义字体指定的字体，会被选中作为文本的字体。

+

设置文本段落的字体列表，用逗号分隔，每个字体用字体名或者字体族名设置。列表中第一个系统中存在的或者通过自定义字体指定的字体，会被选中作为文本的字体。

名称

+ - - - - - - - - - - - - - - - - - - - - - - - - @@ -78,107 +77,106 @@ 除支持[通用样式](js-components-common-styles.md)外，还支持如下样式： - -

名称

类型

+

类型

默认值

+

默认值

必填

+

必填

描述

+

描述

checked

+

checked

boolean

+

boolean

false

+

false

否

+

否

是否选中。

+

是否选中。

showtext

+

showtext

boolean

+

boolean

false

+

false

否

+

否

是否显示文本。

+

是否显示文本。

texton

+

texton

string

+

string

"On"

+

"On"

否

+

否

选中时显示的文本。

+

选中时显示的文本。

textoff

+

textoff

string

+

string

"Off"

+

"Off"

否

+

否

未选中时显示的文本。

+

未选中时显示的文本。

名称

+ - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - @@ -188,20 +186,19 @@ 除支持[通用事件](js-components-common-events.md)外，还支持如下事件： - -

名称

类型

+

类型

默认值

+

默认值

必填

+

必填

描述

+

描述

texton-color(Rich)

+

texton-color(Rich)

<color>

+

<color>

#000000

+

#000000

否

+

否

选中时显示的文本颜色。

+

选中时显示的文本颜色。

textoff-color(Rich)

+

textoff-color(Rich)

<color>

+

<color>

#000000

+

#000000

否

+

否

未选中时显示的文本颜色。

+

未选中时显示的文本颜色。

text-padding(Rich)

+

text-padding(Rich)

number

+

number

0px

+

0px

否

+

否

texton/textoff中最长文本两侧距离滑块边界的距离。

+

texton/textoff中最长文本两侧距离滑块边界的距离。

font-size(Rich)

+

font-size(Rich)

<length>

+

<length>

-

+

-

否

+

否

文本尺寸，仅设置texton和textoff生效。

+

文本尺寸，仅设置texton和textoff生效。

allow-scale(Rich)

+

allow-scale(Rich)

boolean

+

boolean

true

+

true

否

+

否

文本尺寸是否跟随系统设置字体缩放尺寸进行放大缩小。

-
说明：

如果在config描述文件中针对ability配置了fontSize的config-changes标签，则应用不会重启而直接生效。

+

文本尺寸是否跟随系统设置字体缩放尺寸进行放大缩小。

+
说明：

如果在config描述文件中针对ability配置了fontSize的config-changes标签，则应用不会重启而直接生效。

font-style(Rich)

+

font-style(Rich)

string

+

string

normal

+

normal

否

+

否

字体样式，仅设置texton和textoff生效。见text组件font-style的样式属性。

+

字体样式，仅设置texton和textoff生效。见text组件font-style的样式属性。

font-weight(Rich)

+

font-weight(Rich)

number | string

+

number | string

normal

+

normal

否

+

否

字体粗细，仅设置texton和textoff生效。见text组件的font-weight的样式属性。

+

字体粗细，仅设置texton和textoff生效。见text组件的font-weight的样式属性。

font-family(Rich)

+

font-family(Rich)

string

+

string

sans-serif

+

sans-serif

否

+

否

字体列表，用逗号分隔，每个字体用字体名或者字体族名设置。列表中第一个系统中存在的或者通过自定义字体指定的字体，会被选中作为文本的字体。仅设置texton和textoff生效。

+

字体列表，用逗号分隔，每个字体用字体名或者字体族名设置。列表中第一个系统中存在的或者通过自定义字体指定的字体，会被选中作为文本的字体。仅设置texton和textoff生效。

名称

+ - - - - - diff --git a/zh-cn/application-dev/reference/arkui-js/js-components-basic-text.md b/zh-cn/application-dev/reference/arkui-js/js-components-basic-text.md index c42b1298864e73d64944515f59de0585f1a60994..ffb96e5c30d14007417d421e196ab8e9458c6d25 100644 --- a/zh-cn/application-dev/reference/arkui-js/js-components-basic-text.md +++ b/zh-cn/application-dev/reference/arkui-js/js-components-basic-text.md @@ -3,7 +3,7 @@ 文本，用于呈现一段信息。 >![](../../public_sys-resources/icon-note.gif) **说明：** ->文本的展示内容需要写在元素标签内。 +>- 文本的展示内容需要写在元素标签内。 ## 权限列表 @@ -21,278 +21,277 @@ 除支持[通用样式](js-components-common-styles.md)外，还支持如下样式： - -

名称

参数

+

参数

描述

+

描述

change

+

change

{ checked: checkedValue }

+

{ checked: checkedValue }

选中状态改变时触发该事件。

+

选中状态改变时触发该事件。

名称

+ - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - diff --git a/zh-cn/application-dev/reference/arkui-js/js-components-basic-textarea.md b/zh-cn/application-dev/reference/arkui-js/js-components-basic-textarea.md index 62211cb9153f11f00033c73dc581621264eec623..0d9ee4508e1055600a489648c8642b4801bb0309 100644 --- a/zh-cn/application-dev/reference/arkui-js/js-components-basic-textarea.md +++ b/zh-cn/application-dev/reference/arkui-js/js-components-basic-textarea.md @@ -14,138 +14,137 @@ 除支持[通用属性](js-components-common-attributes.md)外，还支持如下属性： - -

名称

类型

+

类型

默认值

+

默认值

必填

+

必填

描述

+

描述

color

+

color

<color>

+

<color>

#e5000000

+

#e5000000

否

+

否

设置文本的颜色。

+

设置文本的颜色。

font-size

+

font-size

<length>

+

<length>

30px

+

30px

否

+

否

设置文本的尺寸。

+

设置文本的尺寸。

allow-scale

+

allow-scale

boolean

+

boolean

true

+

true

否

+

否

文本尺寸是否跟随系统设置字体缩放尺寸进行放大缩小。

-
说明：

如果需要支持动态生效，请参看config描述文件中config-changes标签。

+

文本尺寸是否跟随系统设置字体缩放尺寸进行放大缩小。

+
说明：

如果需要支持动态生效，请参看config描述文件中config-changes标签。

letter-spacing

+

letter-spacing

<length>

+

<length>

0px

+

0px

否

+

否

设置文本的字符间距。

+

设置文本的字符间距。

word-spacing7+

+

word-spacing7+

<length> | <percentage> | string

+

<length> | <percentage> | string

normal

+

normal

否

+

否

设置文本之间的间距，string可选值为：

-

normal：默认的字间距。

+

设置文本之间的间距，string可选值为：

+

normal：默认的字间距。

font-style

+

font-style

string

+

string

normal

+

normal

否

+

否

设置文本的字体样式，可选值为：

-
  • normal：标准的字体样式；
  • italic：斜体的字体样式。
+

设置文本的字体样式，可选值为：

+
  • normal：标准的字体样式；
  • italic：斜体的字体样式。

font-weight

+

font-weight

number | string

+

number | string

normal

+

normal

否

+

否

设置文本的字体粗细，number类型取值[100, 900]，默认为400，取值越大，字体越粗。

-
说明：

number取值必须为100的整数倍。

+

设置文本的字体粗细，number类型取值[100, 900]，默认为400，取值越大，字体越粗。

+
说明：

number取值必须为100的整数倍。

-

string类型取值支持如下四个值：lighter、normal、bold、bolder。

+

string类型取值支持如下四个值：lighter、normal、bold、bolder。

text-decoration

+

text-decoration

string

+

string

none

+

none

否

+

否

设置文本的文本修饰，可选值为：

-
  • underline：文字下划线修饰；
  • line-through：穿过文本的修饰线n
  • none：标准文本。
+

设置文本的文本修饰，可选值为：

+
  • underline：文字下划线修饰；
  • line-through：穿过文本的修饰线n
  • none：标准文本。

text-decoration-color7+

+

text-decoration-color7+

<color>

+

<color>

-

+

-

否

+

否

设置文本修饰线的颜色。

+

设置文本修饰线的颜色。

text-align

+

text-align

string

+

string

start

+

start

否

+

否

设置文本的文本对齐方式，可选值为：

-
  • left：文本左对齐；
  • center：文本居中对齐；
  • right：文本右对齐；
  • start：根据文字书写相同的方向对齐；
  • end：根据文字书写相反的方向对齐。
-
说明：

如文本宽度未指定大小，文本的宽度和父容器的宽度大小相等的情况下，对齐效果可能会不明显。

+

设置文本的文本对齐方式，可选值为：

+
  • left：文本左对齐；
  • center：文本居中对齐；
  • right：文本右对齐；
  • start：根据文字书写相同的方向对齐；
  • end：根据文字书写相反的方向对齐。
+
说明：

如文本宽度未指定大小，文本的宽度和父容器的宽度大小相等的情况下，对齐效果可能会不明显。

line-height

+

line-height

<length> | <percentage>7+ | string7+

+

<length> | <percentage>7+ | string7+

0px1-6

-

normal7+

+

0px1-6

+

normal7+

否

+

否

设置文本的文本行高，设置为0px时，不限制文本行高，自适应字体大小。string可选值为：

-

normal7+：默认的行高。

+

设置文本的文本行高，设置为0px时，不限制文本行高，自适应字体大小。string可选值为：

+

normal7+：默认的行高。

text-overflow

+

text-overflow

string

+

string

clip

+

clip

否

+

否

在设置了最大行数的情况下生效，可选值为：

-
  • clip：将文本根据父容器大小进行裁剪显示；
  • ellipsis：根据父容器大小显示，显示不下的文本用省略号代替。需配合max-lines使用。
+

在设置了最大行数的情况下生效，可选值为：

+
  • clip：将文本根据父容器大小进行裁剪显示；
  • ellipsis：根据父容器大小显示，显示不下的文本用省略号代替。需配合max-lines使用。

font-family

+

font-family

string

+

string

sans-serif

+

sans-serif

否

+

否

设置文本的字体列表，用逗号分隔，每个字体用字体名或者字体族名设置。列表中第一个系统中存在的或者通过自定义字体指定的字体，会被选中作为文本的字体。

+

设置文本的字体列表，用逗号分隔，每个字体用字体名或者字体族名设置。列表中第一个系统中存在的或者通过自定义字体指定的字体，会被选中作为文本的字体。

max-lines

+

max-lines

number | string7+

+

number | string7+

-

+

-

否

+

否

设置文本的最大行数，string类型可选值为：

-
  • auto7+：文本行数自适应容器高度。
+

设置文本的最大行数，string类型可选值为：

+
  • auto7+：文本行数自适应容器高度。

min-font-size

+

min-font-size

<length>

+

<length>

-

+

-

否

+

否

文本最小字号，需要和文本最大字号同时设置，支持文本字号动态变化。设置最大最小字体样式后，font-size不生效。

+

文本最小字号，需要和文本最大字号同时设置，支持文本字号动态变化。设置最大最小字体样式后，font-size不生效。

max-font-size

+

max-font-size

<length>

+

<length>

-

+

-

否

+

否

文本最大字号，需要和文本最小字号同时设置，支持文本字号动态变化。设置最大最小字体样式后，font-size不生效。

+

文本最大字号，需要和文本最小字号同时设置，支持文本字号动态变化。设置最大最小字体样式后，font-size不生效。

font-size-step

+

font-size-step

<length>

+

<length>

1px

+

1px

否

+

否

文本动态调整字号时的步长，需要设置最小，最大字号样式生效。

+

文本动态调整字号时的步长，需要设置最小，最大字号样式生效。

prefer-font-sizes

+

prefer-font-sizes

<array>

+

<array>

-

+

-

否

+

否

预设的字号集合，在动态尺寸调整时，优先使用预设字号集合中的字号匹配设置的最大行数，如果预设字号集合未设置，则使用最大最小和步长调整字号。针对仍然无法满足最大行数要求的情况，使用text-overflow设置项进行截断，设置预设尺寸集后，font-size、max-font-size、min-font-size和font-size-step不生效。

-

如：prefer-font-sizes: 12px,14px,16px

+

预设的字号集合，在动态尺寸调整时，优先使用预设字号集合中的字号匹配设置的最大行数，如果预设字号集合未设置，则使用最大最小和步长调整字号。针对仍然无法满足最大行数要求的情况，使用text-overflow设置项进行截断，设置预设尺寸集后，font-size、max-font-size、min-font-size和font-size-step不生效。

+

如：prefer-font-sizes: 12px,14px,16px

word-break6+

+

word-break6+

string

+

string

normal

+

normal

否

+

否

设置文本折行模式，可选值为：

-
  • normal：默认换行规则，依据各自语言的规则，允许在字间发生换行。
  • break-all：对于非中文/日文/韩文的文本，可在任意字符间断行。
  • break-word：与break-all相同，不同的地方在于它要求一个没有断行破发点的词必须保持为一个整体单位。
+

设置文本折行模式，可选值为：

+
  • normal：默认换行规则，依据各自语言的规则，允许在字间发生换行。
  • break-all：对于非中文/日文/韩文的文本，可在任意字符间断行。
  • break-word：与break-all相同，不同的地方在于它要求一个没有断行破发点的词必须保持为一个整体单位。

text-indent7+

+

text-indent7+

<length>

+

<length>

-

+

-

否

+

否

设置首行缩进量。

+

设置首行缩进量。

white-space7+

+

white-space7+

string

+

string

pre

+

pre

否

+

否

设置处理元素中空白的模式，可选值为：

-
  • normal：所有空格、回车、制表符都合并成一个空格，文本自动换行；
  • nowrap：所有空格、回车、制表符都合并成一个空格，文本不换行；
  • pre：所有东西原样输出，文本不换行；
  • pre-wrap：所有东西原样输出，文本换行；
  • pre-line：所有空格、制表符合并成一个空格，回车不变，文本换行。
+

设置处理元素中空白的模式，可选值为：

+
  • normal：所有空格、回车、制表符都合并成一个空格，文本自动换行；
  • nowrap：所有空格、回车、制表符都合并成一个空格，文本不换行；
  • pre：所有东西原样输出；
  • pre-wrap：所有东西原样输出，文本换行；
  • pre-line：所有空格、制表符合并成一个空格，回车不变，文本换行。

adapt-height7+

+

adapt-height7+

boolean

+

boolean

false

+

false

否

+

否

文本大小是否自适应容器高度。

-
说明：

设置字体大小自适应相关样式后生效。

+

文本大小是否自适应容器高度。

+
说明：

设置字体大小自适应相关样式后生效。

名称

+ - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - @@ -154,26 +153,26 @@ **表 1** MenuOption5+ -

名称

类型

+

类型

默认值

+

默认值

必填

+

必填

描述

+

描述

placeholder

+

placeholder

string

+

string

-

+

-

否

+

否

多行文本框的提示文本内容。

+

多行文本框的提示文本内容。

maxlength

+

maxlength

number

+

number

-

+

-

否

+

否

多行文本框可输入的最多字符数量。

+

多行文本框可输入的最多字符数量。

headericon

+

headericon

string

+

string

-

+

-

否

+

否

在文本输入前的图标展示，该图标不支持点击事件，图标格式为jpg，png和svg。

+

在文本输入前的图标展示，该图标不支持点击事件，图标格式为jpg，png和svg。

extend

+

extend

boolean

+

boolean

false

+

false

否

+

否

文本框是否支持可扩展，设置可扩展属性后文本框高度可以跟随文字自适应。

+

文本框是否支持可扩展，设置可扩展属性后文本框高度可以跟随文字自适应。

value5+

+

value5+

string

+

string

-

+

-

否

+

否

多行文本框的内容。

+

多行文本框的内容。

showcounter5+

+

showcounter5+

boolean

+

boolean

false

+

false

否

+

否

文本框是否需要开启计数下标功能，需要配合maxlength一起使用。

+

文本框是否需要开启计数下标功能，需要配合maxlength一起使用。

menuoptions5+

+

menuoptions5+

Array<MenuOption>

+

Array<MenuOption>

-

+

-

否

+

否

设置文本选择弹框点击更多按钮之后显示的菜单项。

+

设置文本选择弹框点击更多按钮之后显示的菜单项。

autofocus6+

+

autofocus6+

boolean

+

boolean

false

+

false

否

+

否

是否自动获焦。

+

是否自动获焦。

selectedstart6+

+

selectedstart6+

number

+

number

-1

+

-1

否

+

否

开始选择文本时初始选择位置。

+

开始选择文本时初始选择位置。

selectedend6+

+

selectedend6+

number

+

number

-1

+

-1

否

+

否

开始选择文本时结尾选择位置。

+

开始选择文本时结尾选择位置。

softkeyboardenabled6+

+

softkeyboardenabled6+

boolean

+

boolean

true

+

true

否

+

否

编辑时是否弹出系统软键盘。

+

编辑时是否弹出系统软键盘。

名称

+ - - - - - - - - @@ -183,96 +182,95 @@ 除支持[通用样式](js-components-common-styles.md)外，还支持如下样式： - -

名称

类型

+

类型

描述

+

描述

icon

+

icon

string

+

string

菜单选项中的图标路径。

+

菜单选项中的图标路径。

content

+

content

string

+

string

菜单选项中的文本内容。

+

菜单选项中的文本内容。

名称

+ - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - @@ -282,57 +280,56 @@ 除支持[通用事件](js-components-common-events.md)外，还支持如下事件： - -

名称

类型

+

类型

默认值

+

默认值

必填

+

必填

描述

+

描述

color

+

color

<color>

+

<color>

#e6000000

+

#e6000000

否

+

否

多行文本框的文本颜色。

+

多行文本框的文本颜色。

font-size

+

font-size

<length>

+

<length>

16px

+

16px

否

+

否

多行文本框的文本尺寸。

+

多行文本框的文本尺寸。

allow-scale

+

allow-scale

boolean

+

boolean

true

+

true

否

+

否

多行文本框的文本尺寸是否跟随系统设置字体缩放尺寸进行放大缩小。

-
说明：

如果在config描述文件中针对ability配置了fontSize的config-changes标签，则应用不会重启而直接生效。

+

多行文本框的文本尺寸是否跟随系统设置字体缩放尺寸进行放大缩小。

+
说明：

如果在config描述文件中针对ability配置了fontSize的config-changes标签，则应用不会重启而直接生效。

placeholder-color

+

placeholder-color

<color>

+

<color>

#99000000

+

#99000000

否

+

否

多行文本框的提示文本颜色，type为text|email|date|time|number|password时生效。

+

多行文本框的提示文本颜色，type为text|email|date|time|number|password时生效。

font-weight

+

font-weight

number | string

+

number | string

normal

+

normal

否

+

否

多行文本框的字体粗细，见text组件font-weight的样式属性。

+

多行文本框的字体粗细，见text组件font-weight的样式属性。

font-family

+

font-family

string

+

string

sans-serif

+

sans-serif

否

+

否

多行文本框的字体列表，用逗号分隔，每个字体用字体名或者字体族名设置。列表中第一个系统中存在的或者通过自定义字体指定的字体，会被选中作为文本的字体。

+

多行文本框的字体列表，用逗号分隔，每个字体用字体名或者字体族名设置。列表中第一个系统中存在的或者通过自定义字体指定的字体，会被选中作为文本的字体。

caret-color6+

+

caret-color6+

<color>

+

<color>

-

+

-

否

+

否

设置输入光标的颜色。

+

设置输入光标的颜色。

名称

+ - - - - - - - - - - - - - - - - - - - - @@ -361,12 +358,15 @@ ``` // xxx.js +import prompt from '@system.prompt'; +export default { change(e){ prompt.showToast({ message: 'value: ' + e.text + ', lines: ' + e.lines + ', height: ' + e.height, duration: 3000, }); } +} ``` ![](figures/zh-cn_image_0000001127125124.png) diff --git a/zh-cn/application-dev/reference/arkui-js/js-components-basic-toggle.md b/zh-cn/application-dev/reference/arkui-js/js-components-basic-toggle.md index 25877f04d68ccbb76a7191a307ba2fb9611e5304..300959e89d4aa8d5d816479a9353580b4efd0fa1 100644 --- a/zh-cn/application-dev/reference/arkui-js/js-components-basic-toggle.md +++ b/zh-cn/application-dev/reference/arkui-js/js-components-basic-toggle.md @@ -2,9 +2,6 @@ 状态按钮用于从一组选项中进行选择，并可能在界面上实时显示选择后的结果。通常这一组选项都是由状态按钮构成。 ->![](../../public_sys-resources/icon-note.gif) **说明：** ->从 API Version 5 开始支持。 - ## 权限列表 无 @@ -17,39 +14,38 @@ 除支持[通用属性](js-components-common-attributes.md)外，还支持如下属性： - -

名称

参数

+

参数

描述

+

描述

change

+

change

{ text: newText, lines: textLines, height: textHeight }

+

{ text: newText, lines: textLines, height: textHeight }

输入内容发生变化时触发该事件，通过参数获取输入内容、行数和行高。

-
说明：

改变value属性值不会触发该回调。5+

+

输入内容发生变化时触发该事件，通过参数获取输入内容、行数和行高。

+
说明：

改变value属性值不会触发该回调。5+

translate5+

+

translate5+

{ value: selectedText }

+

{ value: selectedText }

设置此事件后，进行文本选择操作后文本选择弹窗会出现翻译按钮，点击翻译按钮之后，触发该回调，返回选中的文本内容。

+

设置此事件后，进行文本选择操作后文本选择弹窗会出现翻译按钮，点击翻译按钮之后，触发该回调，返回选中的文本内容。

share5+

+

share5+

{ value: selectedText }

+

{ value: selectedText }

设置此事件后，进行文本选择操作后文本选择弹窗会出现分享按钮，点击分享按钮之后，触发该回调，返回选中的文本内容。

+

设置此事件后，进行文本选择操作后文本选择弹窗会出现分享按钮，点击分享按钮之后，触发该回调，返回选中的文本内容。

search5+

+

search5+

{ value: selectedText }

+

{ value: selectedText }

设置此事件后，进行文本选择操作后文本选择弹窗会出现搜索按钮，点击搜索按钮之后，触发该回调，返回选中的文本内容。

+

设置此事件后，进行文本选择操作后文本选择弹窗会出现搜索按钮，点击搜索按钮之后，触发该回调，返回选中的文本内容。

optionselect5+

+

optionselect5+

{ index:optionIndex, value: selectedText }

+

{ index:optionIndex, value: selectedText }

文本选择弹窗中设置menuoptions属性后，用户在文本选择操作后，点击菜单项后触发该回调，返回点击的菜单项序号和选中的文本内容。

+

文本选择弹窗中设置menuoptions属性后，用户在文本选择操作后，点击菜单项后触发该回调，返回点击的菜单项序号和选中的文本内容。

selectchange6+

+

selectchange6+

{ start: number，end: number }

+

{ start: number，end: number }

文本选择变化时触发事件。

+

文本选择变化时触发事件。

名称

+ - - - - - - - - - - - - - - @@ -59,85 +55,84 @@ 除支持[通用样式](js-components-common-styles.md)外，还支持如下样式： - -

名称

类型

+

类型

默认值

+

默认值

必填

+

必填

描述

+

描述

value

+

value

string

+

string

-

+

-

是

+

是

状态按钮的文本值。

+

状态按钮的文本值。

checked

+

checked

boolean

+

boolean

false

+

false

否

+

否

状态按钮是否被选中。

+

状态按钮是否被选中。

名称

+ - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - @@ -147,20 +142,19 @@ 除支持[通用事件](js-components-common-events.md)外，还支持如下事件： - -

名称

类型

+

类型

默认值

+

默认值

必填

+

必填

描述

+

描述

color

+

text-color

<color>

+

<color>

#E5000000

+

#E5000000

否

+

否

状态按钮的文本颜色。

+

状态按钮的文本颜色。

font-size

+

font-size

<length>

+

<length>

16px

+

16px

否

+

否

状态按钮的文本尺寸。

+

状态按钮的文本尺寸。

allow-scale

+

allow-scale

boolean

+

boolean

true

+

true

否

+

否

状态按钮的文本尺寸是否跟随系统设置字体缩放尺寸进行放大缩小。

-
说明：

如果在config描述文件中针对ability配置了fontSize的config-changes标签，则应用不会重启而直接生效。

+

状态按钮的文本尺寸是否跟随系统设置字体缩放尺寸进行放大缩小。

+
说明：

如果在config描述文件中针对ability配置了fontSize的config-changes标签，则应用不会重启而直接生效。

font-style

+

font-style

string

+

string

normal

+

normal

否

+

否

状态按钮的字体样式。

+

状态按钮的字体样式。

font-weight

+

font-weight

number | string

+

number | string

normal

+

normal

否

+

否

状态按钮的字体粗细。见text组件font-weight的样式属性。

+

状态按钮的字体粗细。见text组件font-weight的样式属性。

font-family

+

font-family

<string>

+

<string>

sans-serif

+

sans-serif

否

+

否

状态按钮的字体列表，用逗号分隔，每个字体用字体名或者字体族名设置。列表中第一个系统中存在的或者通过自定义字体指定的字体，会被选中作为文本的字体。

+

状态按钮的字体列表，用逗号分隔，每个字体用字体名或者字体族名设置。列表中第一个系统中存在的或者通过自定义字体指定的字体，会被选中作为文本的字体。

名称

+ - - - - - diff --git a/zh-cn/application-dev/reference/arkui-js/js-components-basic-toolbar-item.md b/zh-cn/application-dev/reference/arkui-js/js-components-basic-toolbar-item.md index eb1811c893e962eddaad9a13753102b838f529af..a67f201a7272846c658cdaf283e99aadda90d370 100644 --- a/zh-cn/application-dev/reference/arkui-js/js-components-basic-toolbar-item.md +++ b/zh-cn/application-dev/reference/arkui-js/js-components-basic-toolbar-item.md @@ -2,9 +2,6 @@ 工具栏子组件。作为工具栏组件的子组件，用于展示工具栏上的一个操作选项。 ->![](../../public_sys-resources/icon-note.gif) **说明：** ->从API Version 5 开始支持。 - ## 子组件 无 @@ -13,39 +10,38 @@ 除支持[通用属性](js-components-common-attributes.md)外，还支持如下属性： - -

名称

参数

+

参数

描述

+

描述

change

+

change

{ checked：isChecked }

+

{ checked：isChecked }

组件选中状态发生变化时触发。

+

组件选中状态发生变化时触发。

名称

+ - - - - - - - - - - - - - - @@ -55,207 +51,206 @@ 仅支持如下样式： - -

名称

类型

+

类型

默认值

+

默认值

必填

+

必填

描述

+

描述

value

+

value

string

+

string

-

+

-

是

+

是

该操作项文本内容。

+

该操作项文本内容。

icon

+

icon

string

+

string

-

+

-

是

+

是

该操作项图标资源路径，该图标展示在选项文本上，支持本地路径，格式为png，jpg和svg。

+

该操作项图标资源路径，该图标展示在选项文本上，支持本地路径，格式为png，jpg和svg。

名称

+ - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - @@ -273,6 +268,7 @@ ## 示例 ``` + diff --git a/zh-cn/application-dev/reference/arkui-js/js-components-basic-toolbar.md b/zh-cn/application-dev/reference/arkui-js/js-components-basic-toolbar.md index 7a18cab1fe44638d0dbfc7c6b642f007bdb1e894..f2c03a3ac53bd29a4ce661314ebf2d73f981b6bb 100644 --- a/zh-cn/application-dev/reference/arkui-js/js-components-basic-toolbar.md +++ b/zh-cn/application-dev/reference/arkui-js/js-components-basic-toolbar.md @@ -2,9 +2,6 @@ 工具栏。放在界面底部，用于展示针对当前界面的操作选项。 ->![](../../public_sys-resources/icon-note.gif) **说明：** ->从API Version 5 开始支持。 - ## 权限列表 无 @@ -25,7 +22,7 @@ 支持[通用样式](js-components-common-styles.md)。 >![](../../public_sys-resources/icon-note.gif) **说明：** ->- 不支持height样式，高度固定为56px。 +>不支持height样式，高度固定为56px。 ## 事件 diff --git a/zh-cn/application-dev/reference/arkui-js/js-components-canvas-canvas.md b/zh-cn/application-dev/reference/arkui-js/js-components-canvas-canvas.md index 7a063a973f1d278383d2693f82285c96ece1d7b1..2282db3ba563c2f0f6605a8e32f2fd7b09989579 100644 --- a/zh-cn/application-dev/reference/arkui-js/js-components-canvas-canvas.md +++ b/zh-cn/application-dev/reference/arkui-js/js-components-canvas-canvas.md @@ -26,41 +26,40 @@ 除支持[通用方法](js-components-common-methods.md)外，还支持如下方法： -### getContext\(type: '2d', options?: ContextAttrOptions\) +### getContext -getContext \(type: '2d', options?: ContextAttrOptions\): CanvasRendering2dContext +getContext\(type: '2d', options?: ContextAttrOptions\): CanvasRendering2dContext 获取canvas绘图上下文。不支持在onInit和onReady中进行调用。 - 参数 - -

名称

类型

+

类型

默认值

+

默认值

必填

+

必填

描述

+

描述

color

+

color

<color>

+

<color>

#e6000000

+

#e6000000

否

+

否

文本颜色。

+

文本颜色。

font-size

+

font-size

<length>

+

<length>

16px

+

16px

否

+

否

文本大小。

+

文本大小。

allow-scale

+

allow-scale

boolean

+

boolean

true

+

true

否

+

否

文本尺寸是否跟随系统设置字体缩放尺寸进行放大缩小。

+

文本尺寸是否跟随系统设置字体缩放尺寸进行放大缩小。

font-style

+

font-style

string

+

string

normal

+

normal

否

+

否

文本字体样式，可选值为：

-
  1. normal: 标准的字体样式；
  2. italic: 斜体的字体样式。
+

文本字体样式，可选值为：

+
  1. normal: 标准的字体样式；
  2. italic: 斜体的字体样式。

font-weight

+

font-weight

number|string

+

number|string

normal

+

normal

否

+

否

文本字体粗细，number类型取值[100, 900]的整数（被100整除），默认为400，取值越大，字体越粗。string类型取值为：lighter、normal、bold、bolder。

+

文本字体粗细，number类型取值[100, 900]的整数（被100整除），默认为400，取值越大，字体越粗。string类型取值为：lighter、normal、bold、bolder。

text-decoration

+

text-decoration

string

+

string

none

+

none

否

+

否

文本修饰，可选值为：

-
  1. underline: 文本下划线修饰；
  2. line-through: 穿过文本的修饰线；
  3. none: 标准文本。
+

文本修饰，可选值为：

+
  1. underline: 文本下划线修饰；
  2. line-through: 穿过文本的修饰线；
  3. none: 标准文本。

font-family

+

font-family

string

+

string

sans-serif

+

sans-serif

否

+

否

字体列表，用逗号分隔，每个字体用字体名或者字体族名设置。列表中第一个系统中存在的或者通过自定义字体指定的字体，会被选中作为文本的字体。

+

字体列表，用逗号分隔，每个字体用字体名或者字体族名设置。列表中第一个系统中存在的或者通过自定义字体指定的字体，会被选中作为文本的字体。

background

+

background

<linear-gradient>

+

<linear-gradient>

-

+

-

否

+

否

仅支持设置渐变样式，与background-color、background-image不兼容。

+

仅支持设置渐变样式，与background-color、background-image不兼容。

background-color

+

background-color

<color>

+

<color>

-

+

-

否

+

否

设置背景颜色。

+

设置背景颜色。

background-image

+

background-image

string

+

string

-

+

-

否

+

否

设置背景图片。与background-color、background不兼容；支持网络图片资源和本地图片资源地址。

+

设置背景图片。与background-color、background不兼容；支持网络图片资源和本地图片资源地址。

background-size

+

background-size

  • string
  • <length> <length>
  • <percentage> <percentage>
+
  • string
  • <length> <length>
  • <percentage> <percentage>

auto

+

auto

否

+

否

设置背景图片的大小。

-
  • string可选值：
    • contain：把图像扩展至最大尺寸，以使其高度和宽度完全适用内容区域。
    • cover：把背景图像扩展至足够大，以使背景图像完全覆盖背景区域；背景图像的某些部分也许无法显示在背景定位区域中。
    • auto：保持原图的比例不变。
    -
  • length值参数方式：

    设置背景图像的高度和宽度。第一个值设置宽度，第二个值设置高度。如果只设置一个值，则第二个值会被设置为 "auto"。

    -
  • 百分比参数方式：

    以父元素的百分比来设置背景图像的宽度和高度。第一个值设置宽度，第二个值设置高度。如果只设置一个值，则第二个值会被设置为 "auto"。

    +

设置背景图片的大小。

+
  • string可选值：
    • contain：把图像扩展至最大尺寸，以使其高度和宽度完全适用内容区域。
    • cover：把背景图像扩展至足够大，以使背景图像完全覆盖背景区域；背景图像的某些部分也许无法显示在背景定位区域中。
    • auto：保持原图的比例不变。
    +
  • length值参数方式：

    设置背景图像的高度和宽度。第一个值设置宽度，第二个值设置高度。如果只设置一个值，则第二个值会被设置为 "auto"。

    +
  • 百分比参数方式：

    以父元素的百分比来设置背景图像的宽度和高度。第一个值设置宽度，第二个值设置高度。如果只设置一个值，则第二个值会被设置为 "auto"。

background-repeat

+

background-repeat

string

+

string

repeat

+

repeat

否

+

否

针对重复背景图像样式进行设置，背景图像默认在水平和垂直方向上重复。

-
  • repeat：在水平轴和竖直轴上同时重复绘制图片。
  • repeat-x：只在水平轴上重复绘制图片。
  • repeat-y：只在竖直轴上重复绘制图片。
  • no-repeat：不会重复绘制图片。
+

针对重复背景图像样式进行设置，背景图像默认在水平和垂直方向上重复。

+
  • repeat：在水平轴和竖直轴上同时重复绘制图片。
  • repeat-x：只在水平轴上重复绘制图片。
  • repeat-y：只在竖直轴上重复绘制图片。
  • no-repeat：不会重复绘制图片。

background-position

+

background-position

  • string string
  • <length> <length>
  • <percentage> <percentage>
+
  • string string
  • <length> <length>
  • <percentage> <percentage>

0px 0px

+

0px 0px

否

+

否

  • 关键词方式：如果仅规定了一个关键词，那么第二个值为"center"。两个值分别定义水平方向位置和竖直方向位置。
    • left：水平方向上最左侧。
    • right：水平方向上最右侧。
    • top：竖直方向上最顶部。
    • bottom：竖直方向上最底部。
    • center：水平方向或竖直方向上中间位置。
    +
  • 关键词方式：如果仅规定了一个关键词，那么第二个值为"center"。两个值分别定义水平方向位置和竖直方向位置。
    • left：水平方向上最左侧。
    • right：水平方向上最右侧。
    • top：竖直方向上最顶部。
    • bottom：竖直方向上最底部。
    • center：水平方向或竖直方向上中间位置。
-
  • length值参数方式：第一个值是水平位置，第二个值是垂直位置。 左上角是 0 0。单位是像素 (0px 0px) 。如果仅规定了一个值，另外一个值将是50%。
  • 百分比参数方式：第一个值是水平位置，第二个值是垂直位置。左上角是 0% 0%。右下角是 100% 100%。如果仅规定了一个值，另外一个值为50%。
  • 可以混合使用<percentage>和<length>。
+
  • length值参数方式：第一个值是水平位置，第二个值是垂直位置。 左上角是 0 0。单位是像素 (0px 0px) 。如果仅规定了一个值，另外一个值将是50%。
  • 百分比参数方式：第一个值是水平位置，第二个值是垂直位置。左上角是 0% 0%。右下角是 100% 100%。如果仅规定了一个值，另外一个值为50%。
  • 可以混合使用<percentage>和<length>。

opacity

+

opacity

number

+

number

1

+

1

否

+

否

元素的透明度，取值范围为0到1，1表示为不透明，0表示为完全透明。

+

元素的透明度，取值范围为0到1，1表示为不透明，0表示为完全透明。

display

+

display

string

-

+

string

+

flex

+

flex

否

+

否

确定一个元素所产生的框的类型，可选值为：

-
  • flex：弹性布局。
  • none：不渲染此元素。
+

确定一个元素所产生的框的类型，可选值为：

+
  • flex：弹性布局。
  • none：不渲染此元素。

visibility

+

visibility

string

-

+

string

+

visible

+

visible

否

+

否

是否显示元素所产生的框。不可见的框会占用布局（将'display'属性设置为'none'来完全去除框），可选值为：

-
  • visible：元素正常显示。
  • hidden：隐藏元素，但是其他元素的布局不改变，相当于此元素变成透明。
-
说明：

visibility和display样式都设置时，仅display生效。

+

是否显示元素所产生的框。不可见的框会占用布局（将'display'属性设置为'none'来完全去除框），可选值为：

+
  • visible：元素正常显示。
  • hidden：隐藏元素，但是其他元素的布局不改变，相当于此元素变成透明。
+
说明：

visibility和display样式都设置时，仅display生效。

参数名

+ - - - - - - - - - - - @@ -69,19 +68,19 @@ getContext \(type: '2d', options?: ContextAttrOptions\): CanvasRendering2dCont **表 1** ContextAttrOptions -

参数名

参数类型

+

参数类型

必填

+

必填

描述

+

描述

type

+

type

string

+

string

是

+

是

可选值为'2d'，返回值为2D绘制对象，该对象提供具体的2D绘制操作。

+

设置为'2d'，返回值为2D绘制对象，该对象可用于在画布组件上绘制矩形、文本、图片等。

options6+

+

options6+

ContextAttrOptions

+

ContextAttrOptions

否

+

否

具体表现为当前仅支持配置是否开启抗锯齿功能，默认为关闭。

+

当前仅支持配置是否开启抗锯齿功能，默认为关闭。

参数名

+ - - - - - @@ -89,16 +88,15 @@ getContext \(type: '2d', options?: ContextAttrOptions\): CanvasRendering2dCont - 返回值 - -

参数名

类型

+

类型

说明

+

说明

antialias

+

antialias

boolean

+

boolean

是否开启抗锯齿功能，默认为false。

+

是否开启抗锯齿功能，默认为false。

类型

+ - - - @@ -113,33 +111,32 @@ toDataURL\(type?: string, quality?: number\): string - 参数 - -

类型

说明

+

说明

CanvasRenderingContext2D

+

CanvasRenderingContext2D

用于在画布组件上绘制矩形、文本、图片等。

+

用于在画布组件上绘制矩形、文本、图片等。

参数名

+ - - - - - - - - - - - @@ -147,16 +144,15 @@ toDataURL\(type?: string, quality?: number\): string - 返回值 - -

参数名

参数类型

+

参数类型

必填

+

必填

描述

+

描述

type

+

type

string

+

string

否

+

否

可选参数，用于指定图像格式，默认格式为image/png。

+

可选参数，用于指定图像格式，默认格式为image/png。

quality

+

quality

number

+

number

否

+

否

在指定图片格式为image/jpeg或image/webp的情况下，可以从0到1的区间内选择图片的质量。如果超出取值范围，将会使用默认值0.92。

+

在指定图片格式为image/jpeg或image/webp的情况下，可以从0到1的区间内选择图片的质量。如果超出取值范围，将会使用默认值0.92。

类型

+ - - - diff --git a/zh-cn/application-dev/reference/arkui-js/js-components-canvas-canvasgradient.md b/zh-cn/application-dev/reference/arkui-js/js-components-canvas-canvasgradient.md index bb63e0672dc942df9a3757871a9f08fc174f2c27..11b339ea2de42b9b26fa00dfdce4fff2144f088f 100644 --- a/zh-cn/application-dev/reference/arkui-js/js-components-canvas-canvasgradient.md +++ b/zh-cn/application-dev/reference/arkui-js/js-components-canvas-canvasgradient.md @@ -10,27 +10,26 @@ addColorStop\(offset: number, color: string\): void - 参数 - -

类型

说明

+

说明

string

+

string

图像的URL地址。

+

图像的URL地址。

参数

+ - - - - - - - - @@ -39,9 +38,24 @@ addColorStop\(offset: number, color: string\): void - 示例 ``` - const gradient = ctx.createLinearGradient(0,0,100,0); - gradient.addColorStop(0,'#00ffff'); - gradient.addColorStop(1,'#ffff00'); + +
+ + +
+ ``` + + ``` + // xxx.js + export default { + handleClick() { + const el =this.$refs.canvas; + const ctx =el.getContext('2d'); + const gradient = ctx.createLinearGradient(0,0,100,0); + gradient.addColorStop(0,'#00ffff'); + gradient.addColorStop(1,'#ffff00'); + } + } ``` ![](figures/zh-cn_image_0000001152610806.png) diff --git a/zh-cn/application-dev/reference/arkui-js/js-components-canvas-canvasrenderingcontext2d.md b/zh-cn/application-dev/reference/arkui-js/js-components-canvas-canvasrenderingcontext2d.md index ab70e8675217afd2664686023193df33b40d4369..0a80d1c92e4c2ebc2f9ecc1c056f861ba375746a 100644 --- a/zh-cn/application-dev/reference/arkui-js/js-components-canvas-canvasrenderingcontext2d.md +++ b/zh-cn/application-dev/reference/arkui-js/js-components-canvas-canvasrenderingcontext2d.md @@ -45,178 +45,177 @@ ## 属性 - -

参数

类型

+

类型

描述

+

描述

offset

+

offset

number

+

number

设置渐变点距离起点的位置占总体长度的比例，范围为0到1。

+

设置渐变点距离起点的位置占总体长度的比例，范围为0到1。

color

+

color

string

+

string

设置渐变的颜色。

+

设置渐变的颜色。

名称

+ - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - @@ -225,8 +224,22 @@ ### fillStyle ``` -ctx.fillStyle = '#0000ff'; -ctx.fillRect(20, 20, 150, 100); + +
+ +
+``` + +``` +//xxx.js +export default { + onShow() { + const el =this.$refs.canvas; + const ctx = el.getContext('2d'); + ctx.fillStyle = '#0000ff'; + ctx.fillRect(20, 20, 150, 100); + } +} ``` ![](figures/zh-cn_image_0000001166962736.png) @@ -234,8 +247,22 @@ ctx.fillRect(20, 20, 150, 100); ### lineWidth ``` -ctx.lineWidth = 5; -ctx.strokeRect(25, 25, 85, 105); + +
+ +
+``` + +``` +//xxx.js +export default { + onShow() { + const el =this.$refs.canvas; + const ctx = el.getContext('2d'); + ctx.lineWidth = 5; + ctx.strokeRect(25, 25, 85, 105); + } +} ``` ![](figures/zh-cn_image_0000001166484430.png) @@ -243,9 +270,23 @@ ctx.strokeRect(25, 25, 85, 105); ### strokeStyle ``` -ctx.lineWidth = 10; -ctx.strokeStyle = '#0000ff'; -ctx.strokeRect(25, 25, 155, 105); + +
+ +
+``` + +``` +//xxx.js +export default { + onShow() { + const el =this.$refs.canvas; + const ctx = el.getContext('2d'); + ctx.lineWidth = 10; + ctx.strokeStyle = '#0000ff'; + ctx.strokeRect(25, 25, 155, 105); + } +} ``` ![](figures/zh-cn_image_0000001212124299.png) @@ -253,12 +294,26 @@ ctx.strokeRect(25, 25, 155, 105); ### lineCap ``` -ctx.lineWidth = 8; -ctx.beginPath(); -ctx.lineCap = 'round'; -ctx.moveTo(30, 50); -ctx.lineTo(220, 50); -ctx.stroke(); + +
+ +
+``` + +``` +//xxx.js +export default { + onShow() { + const el =this.$refs.canvas; + const ctx = el.getContext('2d'); + ctx.lineWidth = 8; + ctx.beginPath(); + ctx.lineCap = 'round'; + ctx.moveTo(30, 50); + ctx.lineTo(220, 50); + ctx.stroke(); + } +} ``` ![](figures/zh-cn_image_0000001214837127.png) @@ -266,13 +321,27 @@ ctx.stroke(); ### lineJoin ``` -ctx.beginPath(); -ctx.lineWidth = 8; -ctx.lineJoin = 'miter'; -ctx.moveTo(30, 30); -ctx.lineTo(120, 60); -ctx.lineTo(30, 110); -ctx.stroke(); + +
+ +
+``` + +``` +//xxx.js +export default { + onShow() { + const el =this.$refs.canvas; + const ctx = el.getContext('2d'); + ctx.beginPath(); + ctx.lineWidth = 8; + ctx.lineJoin = 'miter'; + ctx.moveTo(30, 30); + ctx.lineTo(120, 60); + ctx.lineTo(30, 110); + ctx.stroke(); + } +} ``` ![](figures/zh-cn_image_0000001214717247.png) @@ -280,13 +349,27 @@ ctx.stroke(); ### miterLimit ``` -ctx.lineWidth = 8; -ctx.lineJoin = 'miter'; -ctx.miterLimit = 3; -ctx.moveTo(30, 30); -ctx.lineTo(60, 35); -ctx.lineTo(30, 37); -ctx.stroke(); + +
+ +
+``` + +``` +//xxx.js +export default { + onShow() { + const el =this.$refs.canvas; + const ctx = el.getContext('2d'); + ctx.lineWidth =14; + ctx.lineJoin = 'miter'; + ctx.miterLimit = 3; + ctx.moveTo(30, 30); + ctx.lineTo(120, 60); + ctx.lineTo(30, 70); + ctx.stroke(); + } +} ``` ![](figures/zh-cn_image_0000001167001464.png) @@ -294,8 +377,22 @@ ctx.stroke(); ### font ``` -ctx.font = '30px sans-serif'; -ctx.fillText("Hello World", 20, 60); + +
+ +
+``` + +``` +//xxx.js +export default { + onShow() { + const el =this.$refs.canvas; + const ctx = el.getContext('2d'); + ctx.font = '30px sans-serif'; + ctx.fillText("Hello World", 20, 60); + } +} ``` ![](figures/zh-cn_image_0000001167046832.png) @@ -303,24 +400,38 @@ ctx.fillText("Hello World", 20, 60); ### textAlign ``` -ctx.strokeStyle = '#0000ff'; -ctx.moveTo(140, 10); -ctx.lineTo(140, 160); -ctx.stroke(); + +
+ +
+``` -ctx.font = '18px sans-serif'; +``` +//xxx.js +export default { + onShow() { + const el =this.$refs.canvas; + const ctx = el.getContext('2d'); + ctx.strokeStyle = '#0000ff'; + ctx.moveTo(140, 10); + ctx.lineTo(140, 160); + ctx.stroke(); -// Show the different textAlign values -ctx.textAlign = 'start'; -ctx.fillText('textAlign=start', 140, 60); -ctx.textAlign = 'end'; -ctx.fillText('textAlign=end', 140, 80); -ctx.textAlign = 'left'; -ctx.fillText('textAlign=left', 140, 100); -ctx.textAlign = 'center'; -ctx.fillText('textAlign=center',140, 120); -ctx.textAlign = 'right'; -ctx.fillText('textAlign=right',140, 140); + ctx.font = '18px sans-serif'; + + // Show the different textAlign values + ctx.textAlign = 'start'; + ctx.fillText('textAlign=start', 140, 60); + ctx.textAlign = 'end'; + ctx.fillText('textAlign=end', 140, 80); + ctx.textAlign = 'left'; + ctx.fillText('textAlign=left', 140, 100); + ctx.textAlign = 'center'; + ctx.fillText('textAlign=center',140, 120); + ctx.textAlign = 'right'; + ctx.fillText('textAlign=right',140, 140); + } +} ``` ![](figures/zh-cn_image_0000001167472798.png) @@ -328,23 +439,37 @@ ctx.fillText('textAlign=right',140, 140); ### textBaseline ``` -ctx.strokeStyle = '#0000ff'; -ctx.moveTo(0, 120); -ctx.lineTo(400, 120); -ctx.stroke(); + +
+ +
+``` -ctx.font = '20px sans-serif'; +``` +//xxx.js +export default { + onShow() { + const el =this.$refs.canvas; + const ctx = el.getContext('2d'); + ctx.strokeStyle = '#0000ff'; + ctx.moveTo(0, 120); + ctx.lineTo(400, 120); + ctx.stroke(); -ctx.textBaseline = 'top'; -ctx.fillText('Top', 10, 120); -ctx.textBaseline = 'bottom'; -ctx.fillText('Bottom', 55, 120); -ctx.textBaseline = 'middle'; -ctx.fillText('Middle', 125, 120); -ctx.textBaseline = 'alphabetic'; -ctx.fillText('Alphabetic', 195, 120); -ctx.textBaseline = 'hanging'; -ctx.fillText('Hanging', 295, 120); + ctx.font = '20px sans-serif'; + + ctx.textBaseline = 'top'; + ctx.fillText('Top', 10, 120); + ctx.textBaseline = 'bottom'; + ctx.fillText('Bottom', 55, 120); + ctx.textBaseline = 'middle'; + ctx.fillText('Middle', 125, 120); + ctx.textBaseline = 'alphabetic'; + ctx.fillText('Alphabetic', 195, 120); + ctx.textBaseline = 'hanging'; + ctx.fillText('Hanging', 295, 120); + } +} ``` ![](figures/zh-cn_image_0000001169315920.png) @@ -352,11 +477,26 @@ ctx.fillText('Hanging', 295, 120); ### globalAlpha ``` -ctx.fillStyle = 'rgb(255,0,0)'; -ctx.fillRect(0, 0, 50, 50); -ctx.globalAlpha = 0.4; -ctx.fillStyle = 'rgb(0,0,255)'; -ctx.fillRect(50, 50, 50, 50); + +
+ +
+``` + +``` +//xxx.js +export default { + onShow() { + const el =this.$refs.canvas; + const ctx = el.getContext('2d'); + ctx.fillStyle = 'rgb(255,0,0)'; + ctx.fillRect(0, 0, 50, 50); + ctx.globalAlpha = 0.4; + ctx.fillStyle = 'rgb(0,0,255)'; + ctx.fillRect(50, 50, 50, 50); + + } +} ``` ![](figures/zh-cn_image_0000001167953648.png) @@ -364,10 +504,24 @@ ctx.fillRect(50, 50, 50, 50); ### lineDashOffset ``` -ctx.arc(100, 75, 50, 0, 6.28); -ctx.setLineDash([10,20]); -ctx.lineDashOffset = 10.0; -ctx.stroke(); + +
+ +
+``` + +``` +//xxx.js +export default { + onShow() { + const el =this.$refs.canvas; + const ctx = el.getContext('2d'); + ctx.arc(100, 75, 50, 0, 6.28); + ctx.setLineDash([10,20]); + ctx.lineDashOffset = 10.0; + ctx.stroke(); + } +} ``` ![](figures/zh-cn_image_0000001167950468.png) @@ -376,66 +530,65 @@ ctx.stroke(); - 类型字段说明 - -

名称

类型

+

类型

默认值

+

默认值

描述

+

描述

fillStyle

+

fillStyle

<color> | CanvasGradient | CanvasPattern

+

<color> | CanvasGradient | CanvasPattern

-

+

-

指定绘制的填充色。

-
  • 类型为<color>时，表示设置填充区域的颜色。
  • 类型为CanvasGradient时，表示渐变对象，使用 createLinearGradient()方法创建。
  • 类型为CanvasPattern时，使用 createPattern()方法创建。
+

指定绘制的填充色。

+
  • 类型为<color>时，表示设置填充区域的颜色。
  • 类型为CanvasGradient时，表示渐变对象，使用 createLinearGradient()方法创建。
  • 类型为CanvasPattern时，使用 createPattern()方法创建。

lineWidth

+

lineWidth

number

+

number

-

+

-

设置绘制线条的宽度。

+

设置绘制线条的宽度。

strokeStyle

+

strokeStyle

<color> | CanvasGradient | CanvasPattern

+

<color> | CanvasGradient | CanvasPattern

-

+

-

设置描边的颜色。

-
  • 类型为<color>时，表示设置描边使用的颜色。
  • 类型为CanvasGradient时，表示渐变对象，使用 createLinearGradient()方法创建。
  • 类型为CanvasPattern时，使用 createPattern()方法创建。
+

设置描边的颜色。

+
  • 类型为<color>时，表示设置描边使用的颜色。
  • 类型为CanvasGradient时，表示渐变对象，使用 createLinearGradient()方法创建。
  • 类型为CanvasPattern时，使用 createPattern()方法创建。

lineCap

+

lineCap

string

+

string

butt

+

butt

指定线端点的样式，可选值为：

-
  • butt：线端点以方形结束。
  • round：线端点以圆形结束。
  • square：线端点以方形结束，该样式下会增加一个长度和线段厚度相同，宽度是线段厚度一半的矩形。
+

指定线端点的样式，可选值为：

+
  • butt：线端点以方形结束。
  • round：线端点以圆形结束。
  • square：线端点以方形结束，该样式下会增加一个长度和线段厚度相同，宽度是线段厚度一半的矩形。

lineJoin

+

lineJoin

string

+

string

miter

+

miter

指定线段间相交的交点样式，可选值为：

-
  • round：在线段相连处绘制一个扇形，扇形的圆角半径是线段的宽度。
  • bevel：在线段相连处使用三角形为底填充， 每个部分矩形拐角独立。
  • miter：在相连部分的外边缘处进行延伸，使其相交于一点，形成一个菱形区域，该属性可以通过设置miterLimit属性展现效果。
+

指定线段间相交的交点样式，可选值为：

+
  • round：在线段相连处绘制一个扇形，扇形的圆角半径是线段的宽度。
  • bevel：在线段相连处使用三角形为底填充， 每个部分矩形拐角独立。
  • miter：在相连部分的外边缘处进行延伸，使其相交于一点，形成一个菱形区域，该属性可以通过设置miterLimit属性展现效果。

miterLimit

+

miterLimit

number

+

number

10

+

10

设置斜接面限制值，该值指定了线条相交处内角和外角的距离。

+

设置斜接面限制值，该值指定了线条相交处内角和外角的距离。

font

+

font

string

+

string

"normal normal 14px sans-serif"

+

"normal normal 14px sans-serif"

设置文本绘制中的字体样式。

-

语法：ctx.font="font-style font-weight font-size font-family"5+

-
  • font-style(可选)，用于指定字体样式，支持如下几种样式：normal, italic。
  • font-weight(可选)，用于指定字体的粗细，支持如下几种类型：normal, bold, bolder, lighter, 100, 200, 300, 400, 500, 600, 700, 800, 900。
  • font-size(可选)，指定字号和行高，单位只支持px。
  • font-family(可选)，指定字体系列，支持如下几种类型：sans-serif, serif, monospace。
+

设置文本绘制中的字体样式。

+

语法：ctx.font="font-style font-weight font-size font-family"5+

+
  • font-style(可选)，用于指定字体样式，支持如下几种样式：normal, italic。
  • font-weight(可选)，用于指定字体的粗细，支持如下几种类型：normal, bold, bolder, lighter, 100, 200, 300, 400, 500, 600, 700, 800, 900。
  • font-size(可选)，指定字号和行高，单位只支持px。
  • font-family(可选)，指定字体系列，支持如下几种类型：sans-serif, serif, monospace。

textAlign

+

textAlign

string

+

string

left

+

left

设置文本绘制中的文本对齐方式，可选值为：

-
  • left：文本左对齐。
  • right：文本右对齐。
  • center：文本居中对齐。
  • start：文本对齐界线开始的地方。
  • end：文本对齐界线结束的地方。
-
说明：

ltr布局模式下start和left一致，rtl布局模式下start和right一致·。

+

设置文本绘制中的文本对齐方式，可选值为：

+
  • left：文本左对齐。
  • right：文本右对齐。
  • center：文本居中对齐。
  • start：文本对齐界线开始的地方。
  • end：文本对齐界线结束的地方。
+
说明：

ltr布局模式下start和left一致，rtl布局模式下start和right一致·。

textBaseline

+

textBaseline

string

+

string

alphabetic

+

alphabetic

设置文本绘制中的水平对齐方式，可选值为：

-
  • alphabetic：文本基线是标准的字母基线。
  • top：文本基线在文本块的顶部。
  • hanging：文本基线是悬挂基线。
  • middle：文本基线在文本块的中间。
  • ideographic：文字基线是表意字基线；如果字符本身超出了alphabetic 基线，那么ideograhpic基线位置在字符本身的底部。
  • bottom：文本基线在文本块的底部。 与 ideographic 基线的区别在于 ideographic 基线不需要考虑下行字母。
+

设置文本绘制中的水平对齐方式，可选值为：

+
  • alphabetic：文本基线是标准的字母基线。
  • top：文本基线在文本块的顶部。
  • hanging：文本基线是悬挂基线。
  • middle：文本基线在文本块的中间。
  • ideographic：文字基线是表意字基线；如果字符本身超出了alphabetic 基线，那么ideographic基线位置在字符本身的底部。
  • bottom：文本基线在文本块的底部。 与 ideographic 基线的区别在于 ideographic 基线不需要考虑下行字母。

globalAlpha

+

globalAlpha

number

+

number

-

+

-

设置透明度，0.0为完全透明，1.0为完全不透明。

+

设置透明度，0.0为完全透明，1.0为完全不透明。

lineDashOffset

+

lineDashOffset

number

+

number

0.0

+

0.0

设置画布的虚线偏移量，精度为float。

+

设置画布的虚线偏移量，精度为float。

globalCompositeOperation

+

globalCompositeOperation

string

+

string

source-over

+

source-over

设置合成操作的方式。类型字段可选值有source-over，source-atop，source-in，source-out，destination-over，destination-atop，destination-in，destination-out，lighter，copy，xor。具体请参考类型字段说明。

+

设置合成操作的方式。类型字段可选值有source-over，source-atop，source-in，source-out，destination-over，destination-atop，destination-in，destination-out，lighter，copy，xor。具体请参考类型字段说明。

shadowBlur

+

shadowBlur

number

+

number

0.0

+

0.0

设置绘制阴影时的模糊级别，值越大越模糊，精度为float。

+

设置绘制阴影时的模糊级别，值越大越模糊，精度为float。

shadowColor

+

shadowColor

<color>

+

<color>

-

+

-

设置绘制阴影时的阴影颜色。

+

设置绘制阴影时的阴影颜色。

shadowOffsetX

+

shadowOffsetX

number

+

number

-

+

-

设置绘制阴影时和原有对象的水平偏移值。

+

设置绘制阴影时和原有对象的水平偏移值。

shadowOffsetY

+

shadowOffsetY

number

+

number

-

+

-

设置绘制阴影时和原有对象的垂直偏移值。

+

设置绘制阴影时和原有对象的垂直偏移值。

imageSmoothingEnabled6+

+

imageSmoothingEnabled6+

boolean

+

boolean

true

+

true

用于设置绘制图片时是否进行图像平滑度调整，true为启用，false为不启用。

+

用于设置绘制图片时是否进行图像平滑度调整，true为启用，false为不启用。

值

+ - - - - - - - - - - - - - - - - - - - - - - - @@ -445,17 +598,31 @@ ctx.stroke(); - 示例 ``` - ctx.fillStyle = 'rgb(255,0,0)'; - ctx.fillRect(20, 20, 50, 50); - ctx.globalCompositeOperation = 'source-over'; - ctx.fillStyle = 'rgb(0,0,255)'; - ctx.fillRect(50, 50, 50, 50); - // Start drawing second example - ctx.fillStyle = 'rgb(255,0,0)'; - ctx.fillRect(120, 20, 50, 50); - ctx.globalCompositeOperation = 'destination-over'; - ctx.fillStyle = 'rgb(0,0,255)'; - ctx.fillRect(150, 50, 50, 50); + +
+ +
+ ``` + + ``` + //xxx.js + export default { + onShow() { + const el =this.$refs.canvas; + const ctx = el.getContext('2d'); + ctx.fillStyle = 'rgb(255,0,0)'; + ctx.fillRect(20, 20, 50, 50); + ctx.globalCompositeOperation = 'source-over'; + ctx.fillStyle = 'rgb(0,0,255)'; + ctx.fillRect(50, 50, 50, 50); + // Start drawing second example + ctx.fillStyle = 'rgb(255,0,0)'; + ctx.fillRect(120, 20, 50, 50); + ctx.globalCompositeOperation = 'destination-over'; + ctx.fillStyle = 'rgb(0,0,255)'; + ctx.fillRect(150, 50, 50, 50); + } + } ``` ![](figures/zh-cn_image_0000001213192781.png) @@ -466,10 +633,24 @@ ctx.stroke(); ### shadowBlur ``` -ctx.shadowBlur = 30; -ctx.shadowColor = 'rgb(0,0,0)'; -ctx.fillStyle = 'rgb(255,0,0)'; -ctx.fillRect(20, 20, 100, 80); + +
+ +
+``` + +``` +//xxx.js +export default { + onShow() { + const el =this.$refs.canvas; + const ctx = el.getContext('2d'); + ctx.shadowBlur = 30; + ctx.shadowColor = 'rgb(0,0,0)'; + ctx.fillStyle = 'rgb(255,0,0)'; + ctx.fillRect(20, 20, 100, 80); + } +} ``` ![](figures/zh-cn_image_0000001168111514.png) @@ -477,10 +658,24 @@ ctx.fillRect(20, 20, 100, 80); ### shadowColor ``` -ctx.shadowBlur = 30; -ctx.shadowColor = 'rgb(0,0,255)'; -ctx.fillStyle = 'rgb(255,0,0)'; -ctx.fillRect(30, 30, 100, 100); + +
+ +
+``` + +``` +//xxx.js +export default { + onShow() { + const el =this.$refs.canvas; + const ctx = el.getContext('2d'); + ctx.shadowBlur = 30; + ctx.shadowColor = 'rgb(0,0,255)'; + ctx.fillStyle = 'rgb(255,0,0)'; + ctx.fillRect(30, 30, 100, 100); + } +} ``` ![](figures/zh-cn_image_0000001168111610.png) @@ -488,11 +683,25 @@ ctx.fillRect(30, 30, 100, 100); ### shadowOffsetX ``` -ctx.shadowBlur = 10; -ctx.shadowOffsetX = 20; -ctx.shadowColor = 'rgb(0,0,0)'; -ctx.fillStyle = 'rgb(255,0,0)'; -ctx.fillRect(20, 20, 100, 80); + +
+ +
+``` + +``` +//xxx.js +export default { + onShow() { + const el =this.$refs.canvas; + const ctx = el.getContext('2d'); + ctx.shadowBlur = 10; + ctx.shadowOffsetX = 20; + ctx.shadowColor = 'rgb(0,0,0)'; + ctx.fillStyle = 'rgb(255,0,0)'; + ctx.fillRect(20, 20, 100, 80); + } +} ``` ![](figures/zh-cn_image_0000001167631876.png) @@ -500,11 +709,25 @@ ctx.fillRect(20, 20, 100, 80); ### shadowOffsetY ``` -ctx.shadowBlur = 10; -ctx.shadowOffsetY = 20; -ctx.shadowColor = 'rgb(0,0,0)'; -ctx.fillStyle = 'rgb(255,0,0)'; -ctx.fillRect(30, 30, 100, 100); + +
+ +
+``` + +``` +//xxx.js +export default { + onShow() { + const el =this.$refs.canvas; + const ctx = el.getContext('2d'); + ctx.shadowBlur = 10; + ctx.shadowOffsetY = 20; + ctx.shadowColor = 'rgb(0,0,0)'; + ctx.fillStyle = 'rgb(255,0,0)'; + ctx.fillRect(30, 30, 100, 100); + } +} ``` ![](figures/zh-cn_image_0000001213193285.png) @@ -512,12 +735,26 @@ ctx.fillRect(30, 30, 100, 100); ### imageSmoothingEnabled6+ ``` -var img = new Image(); -img.src = 'common/image/example.jpg'; -img.onload = function() { - ctx.imageSmoothingEnabled = false; - ctx.drawImage(img, 0, 0, 400, 200); -}; + +
+ +
+``` + +``` +//xxx.js +export default { + onShow() { + const el =this.$refs.canvas; + const ctx = el.getContext('2d'); + var img = new Image(); + img.src = 'common/image/example.jpg'; + img.onload = function() { + ctx.imageSmoothingEnabled = false; + ctx.drawImage(img, 0, 0, 400, 200); + }; + } +} ``` ![](figures/smoothOff.png) @@ -532,41 +769,40 @@ fillRect\(x: number, y: number, width:number, height: number\): void - 参数 - -

值

描述

+

描述

source-over

+

source-over

在现有绘制内容上显示新绘制内容，属于默认值。

+

在现有绘制内容上显示新绘制内容，属于默认值。

source-atop

+

source-atop

在现有绘制内容顶部显示新绘制内容。

+

在现有绘制内容顶部显示新绘制内容。

source-in

+

source-in

在现有绘制内容中显示新绘制内容。

+

在现有绘制内容中显示新绘制内容。

source-out

+

source-out

在现有绘制内容之外显示新绘制内容。

+

在现有绘制内容之外显示新绘制内容。

destination-over

+

destination-over

在新绘制内容上方显示现有绘制内容。

+

在新绘制内容上方显示现有绘制内容。

destination-atop

+

destination-atop

在新绘制内容顶部显示现有绘制内容。

+

在新绘制内容顶部显示现有绘制内容。

destination-in

+

destination-in

在新绘制内容中显示现有绘制内容。

+

在新绘制内容中显示现有绘制内容。

destination-out

+

destination-out

在新绘制内容外显示现有绘制内容。

+

在新绘制内容外显示现有绘制内容。

lighter

+

lighter

显示新绘制内容和现有绘制内容。

+

显示新绘制内容和现有绘制内容。

copy

+

copy

显示新绘制内容而忽略现有绘制内容。

+

显示新绘制内容而忽略现有绘制内容。

xor

+

xor

使用异或操作对新绘制内容与现有绘制内容进行融合。

+

使用异或操作对新绘制内容与现有绘制内容进行融合。

参数

+ - - - - - - - - - - - - - - @@ -575,7 +811,21 @@ fillRect\(x: number, y: number, width:number, height: number\): void - 示例 ``` - ctx.fillRect(20, 20, 200, 150); + +
+ +
+ ``` + + ``` + //xxx.js + export default { + onShow() { + const el =this.$refs.canvas; + const ctx = el.getContext('2d'); + ctx.fillRect(20, 20, 200, 150); + } + } ``` ![](figures/zh-cn_image_0000001214811029.png) @@ -589,41 +839,40 @@ clearRect\(x: number, y: number, width:number, height: number\): void - 参数 - -

参数

类型

+

类型

描述

+

描述

x

+

x

number

+

number

指定矩形左上角点的x坐标。

+

指定矩形左上角点的x坐标。

y

+

y

number

+

number

指定矩形左上角点的y坐标。

+

指定矩形左上角点的y坐标。

width

+

width

number

+

number

指定矩形的宽度。

+

指定矩形的宽度。

height

+

height

number

+

number

指定矩形的高度。

+

指定矩形的高度。

参数

+ - - - - - - - - - - - - - - @@ -632,9 +881,23 @@ clearRect\(x: number, y: number, width:number, height: number\): void - 示例 ``` - ctx.fillStyle = 'rgb(0,0,255)'; - ctx.fillRect(0, 0, 400, 200); - ctx.clearRect(20, 20, 150, 100); + +
+ +
+ ``` + + ``` + //xxx.js + export default { + onShow() { + const el =this.$refs.canvas; + const ctx = el.getContext('2d'); + ctx.fillStyle = 'rgb(0,0,255)'; + ctx.fillRect(0, 0, 400, 200); + ctx.clearRect(20, 20, 150, 100); + } + } ``` ![](figures/zh-cn_image_0000001214619417.png) @@ -648,41 +911,40 @@ strokeRect\(x: number, y: number, width:number, height: number\): void - 参数 - -

参数

类型

+

类型

描述

+

描述

x

+

x

number

+

number

指定矩形上的左上角x坐标。

+

指定矩形上的左上角x坐标。

y

+

y

number

+

number

指定矩形上的左上角y坐标。

+

指定矩形上的左上角y坐标。

width

+

width

number

+

number

指定矩形的宽度。

+

指定矩形的宽度。

height

+

height

number

+

number

指定矩形的高度。

+

指定矩形的高度。

参数

+ - - - - - - - - - - - - - - @@ -691,7 +953,21 @@ strokeRect\(x: number, y: number, width:number, height: number\): void - 示例 ``` - ctx.strokeRect(30, 30, 200, 150); + +
+ +
+ ``` + + ``` + //xxx.js + export default { + onShow() { + const el =this.$refs.canvas; + const ctx = el.getContext('2d'); + ctx.strokeRect(30, 30, 200, 150); + } + } ``` ![](figures/zh-cn_image_0000001214822091.png) @@ -705,34 +981,33 @@ fillText\(text: string, x: number, y: number\): void - 参数 - -

参数

类型

+

类型

描述

+

描述

x

+

x

number

+

number

指定矩形的左上角x坐标。

+

指定矩形的左上角x坐标。

y

+

y

number

+

number

指定矩形的左上角y坐标。

+

指定矩形的左上角y坐标。

width

+

width

number

+

number

指定矩形的宽度。

+

指定矩形的宽度。

height

+

height

number

+

number

指定矩形的高度。

+

指定矩形的高度。

参数

+ - - - - - - - - - - - @@ -741,8 +1016,22 @@ fillText\(text: string, x: number, y: number\): void - 示例 ``` - ctx.font = '35px sans-serif'; - ctx.fillText("Hello World!", 20, 60); + +
+ +
+ ``` + + ``` + //xxx.js + export default { + onShow() { + const el =this.$refs.canvas; + const ctx = el.getContext('2d'); + ctx.font = '35px sans-serif'; + ctx.fillText("Hello World!", 10, 60); + } + } ``` ![](figures/zh-cn_image_0000001214469787.png) @@ -756,34 +1045,33 @@ strokeText\(text: string, x: number, y: number\): void - 参数 - -

参数

类型

+

类型

描述

+

描述

text

+

text

string

+

string

需要绘制的文本内容。

+

需要绘制的文本内容。

x

+

x

number

+

number

需要绘制的文本的左下角x坐标。

+

需要绘制的文本的左下角x坐标。

y

+

y

number

+

number

需要绘制的文本的左下角y坐标。

+

需要绘制的文本的左下角y坐标。

参数

+ - - - - - - - - - - - @@ -792,8 +1080,22 @@ strokeText\(text: string, x: number, y: number\): void - 示例 ``` - ctx.font = '25px sans-serif'; - ctx.strokeText("Hello World!", 20, 60); + +
+ +
+ ``` + + ``` + //xxx.js + export default { + onShow() { + const el =this.$refs.canvas; + const ctx = el.getContext('2d'); + ctx.font = '25px sans-serif'; + ctx.strokeText("Hello World!", 10, 60); + } + } ``` ![](figures/zh-cn_image_0000001214460669.png) @@ -807,20 +1109,19 @@ measureText\(text: string\): TextMetrics - 参数 - -

参数

类型

+

类型

描述

+

描述

text

+

text

string

+

string

需要绘制的文本内容。

+

需要绘制的文本内容。

x

+

x

number

+

number

需要绘制的文本的左下角x坐标。

+

需要绘制的文本的左下角x坐标。

y

+

y

number

+

number

需要绘制的文本的左下角y坐标。

+

需要绘制的文本的左下角y坐标。

参数

+ - - - - - @@ -828,16 +1129,15 @@ measureText\(text: string\): TextMetrics - 返回值 - -

参数

类型

+

类型

描述

+

描述

text

+

text

string

+

string

需要进行测量的文本。

+

需要进行测量的文本。

类型

+ - - - @@ -846,10 +1146,24 @@ measureText\(text: string\): TextMetrics - 示例 ``` - ctx.font = '25px sans-serif'; - var txt = 'Hello World'; - ctx.fillText("width:" + ctx.measureText(txt).width, 20, 60); - ctx.fillText(txt, 20, 110); + +
+ +
+ ``` + + ``` + //xxx.js + export default { + onShow() { + const el =this.$refs.canvas; + const ctx = el.getContext('2d'); + ctx.font = '20px sans-serif'; + var txt = 'Hello World'; + ctx.fillText("width:" + ctx.measureText(txt).width, 20, 60); + ctx.fillText(txt, 20, 110); + } + } ``` ![](figures/zh-cn_image_0000001169142476.png) @@ -864,13 +1178,28 @@ stroke\(\): void - 示例 ``` - ctx.moveTo(25, 25); - ctx.lineTo(25, 105); - ctx.strokeStyle = 'rgb(0,0,255)'; - ctx.stroke(); + +
+ +
+ ``` + + ``` + //xxx.js + export default { + onShow() { + const el =this.$refs.canvas; + const ctx = el.getContext('2d'); + ctx.moveTo(25, 25); + ctx.lineTo(25, 250); + ctx.lineWidth = '6'; + ctx.strokeStyle = 'rgb(0,0,255)'; + ctx.stroke(); + } + } ``` - ![](figures/zh-cn_image_0000001169309930.png) + ![](figures/zh-cn_image_0000001236697937.png) ### beginPath @@ -882,12 +1211,26 @@ beginPath\(\): void - 示例 ``` - ctx.beginPath(); - ctx.lineWidth = '6'; - ctx.strokeStyle = '#0000ff'; - ctx.moveTo(15, 80); - ctx.lineTo(280, 160); - ctx.stroke(); + +
+ +
+ ``` + + ``` + //xxx.js + export default { + onShow() { + const el =this.$refs.canvas; + const ctx = el.getContext('2d'); + ctx.beginPath(); + ctx.lineWidth = '6'; + ctx.strokeStyle = '#0000ff'; + ctx.moveTo(15, 80); + ctx.lineTo(280, 80); + ctx.stroke(); + } + } ``` ![](figures/zh-cn_image_0000001214629745.png) @@ -901,27 +1244,26 @@ moveTo\(x: number, y: number\): void - 参数 - -

类型

说明

+

说明

TextMetrics

+

TextMetrics

包含指定字体的宽度，该宽度可以通过TextMetrics.width来获取。

+

包含指定字体的宽度，该宽度可以通过TextMetrics.width来获取。

参数

+ - - - - - - - - @@ -930,10 +1272,24 @@ moveTo\(x: number, y: number\): void - 示例 ``` - ctx.beginPath(); - ctx.moveTo(10, 10); - ctx.lineTo(280, 160); - ctx.stroke(); + +
+ +
+ ``` + + ``` + //xxx.js + export default { + onShow() { + const el =this.$refs.canvas; + const ctx = el.getContext('2d'); + ctx.beginPath(); + ctx.moveTo(10, 10); + ctx.lineTo(280, 160); + ctx.stroke(); + } + } ``` ![](figures/zh-cn_image_0000001169309948.png) @@ -947,27 +1303,26 @@ lineTo\(x: number, y: number\): void - 参数 - -

参数

类型

+

类型

描述

+

描述

x

+

x

number

+

number

指定位置的x坐标。

+

指定位置的x坐标。

y

+

y

number

+

number

指定位置的y坐标。

+

指定位置的y坐标。

参数

+ - - - - - - - - @@ -976,10 +1331,24 @@ lineTo\(x: number, y: number\): void - 示例 ``` - ctx.beginPath(); - ctx.moveTo(10, 10); - ctx.lineTo(280, 160); - ctx.stroke(); + +
+ +
+ ``` + + ``` + //xxx.js + export default { + onShow() { + const el =this.$refs.canvas; + const ctx = el.getContext('2d'); + ctx.beginPath(); + ctx.moveTo(10, 10); + ctx.lineTo(280, 160); + ctx.stroke(); + } + } ``` ![](figures/zh-cn_image_0000001169469914.png) @@ -994,12 +1363,26 @@ closePath\(\): void - 示例 ``` - ctx.beginPath(); - ctx.moveTo(30, 30); - ctx.lineTo(110, 30); - ctx.lineTo(70, 90); - ctx.closePath(); - ctx.stroke(); + +
+ +
+ ``` + + ``` + //xxx.js + export default { + onShow() { + const el =this.$refs.canvas; + const ctx = el.getContext('2d'); + ctx.beginPath(); + ctx.moveTo(30, 30); + ctx.lineTo(110, 30); + ctx.lineTo(70, 90); + ctx.closePath(); + ctx.stroke(); + } + } ``` ![](figures/zh-cn_image_0000001169151508.png) @@ -1013,27 +1396,26 @@ createPattern\(image: Image, repetition: string\): Object - 参数 - -

参数

类型

+

类型

描述

+

描述

x

+

x

number

+

number

指定位置的x坐标。

+

指定位置的x坐标。

y

+

y

number

+

number

指定位置的y坐标。

+

指定位置的y坐标。

参数

+ - - - - - - - - @@ -1041,16 +1423,15 @@ createPattern\(image: Image, repetition: string\): Object - 返回值 - -

参数

类型

+

类型

描述

+

描述

image

+

image

Image

+

Image

图源对象，具体参考Image对象。

+

图源对象，具体参考Image对象。

repetition

+

repetition

string

+

string

设置图像重复的方式，取值为：'repeat'、'repeat-x'、 'repeat-y'、'no-repeat'。

+

设置图像重复的方式，取值为：'repeat'、'repeat-x'、 'repeat-y'、'no-repeat'。

类型

+ - - - @@ -1059,9 +1440,25 @@ createPattern\(image: Image, repetition: string\): Object - 示例 ``` - var pat = ctx.createPattern(img, 'repeat'); - ctx.fillStyle = pat; - ctx.fillRect(0, 0, 20, 20); + +
+ +
+ ``` + + ``` + //xxx.js + export default { + onShow() { + const el =this.$refs.canvas; + const ctx = el.getContext('2d'); + var img = new Image(); + img.src = 'common/images/example.jpg'; + var pat = ctx.createPattern(img, 'repeat'); + ctx.fillStyle = pat; + ctx.fillRect(0, 0, 20, 20); + } + } ``` ![](figures/zh-cn_image_0000001169301188.png) @@ -1075,55 +1472,54 @@ bezierCurveTo\(cp1x: number, cp1y: number, cp2x: number, cp2y: number, x: number - 参数 - -

类型

说明

+

说明

Object

+

Object

指定图像填充的Pattern对象。

+

指定图像填充的Pattern对象。

参数

+ - - - - - - - - - - - - - - - - - - - - @@ -1132,10 +1528,24 @@ bezierCurveTo\(cp1x: number, cp1y: number, cp2x: number, cp2y: number, x: number - 示例 ``` - ctx.beginPath(); - ctx.moveTo(10, 10); - ctx.bezierCurveTo(20, 100, 200, 100, 200, 20); - ctx.stroke(); + +
+ +
+ ``` + + ``` + //xxx.js + export default { + onShow() { + const el =this.$refs.canvas; + const ctx = el.getContext('2d'); + ctx.beginPath(); + ctx.moveTo(10, 10); + ctx.bezierCurveTo(20, 100, 200, 100, 200, 20); + ctx.stroke(); + } + } ``` ![](figures/zh-cn_image_0000001214621177.png) @@ -1149,41 +1559,40 @@ quadraticCurveTo\(cpx: number, cpy: number, x: number, y: number\): void - 参数 - -

参数

类型

+

类型

描述

+

描述

cp1x

+

cp1x

number

+

number

第一个贝塞尔参数的x坐标值。

+

第一个贝塞尔参数的x坐标值。

cp1y

+

cp1y

number

+

number

第一个贝塞尔参数的y坐标值。

+

第一个贝塞尔参数的y坐标值。

cp2x

+

cp2x

number

+

number

第二个贝塞尔参数的x坐标值。

+

第二个贝塞尔参数的x坐标值。

cp2y

+

cp2y

number

+

number

第二个贝塞尔参数的y坐标值。

+

第二个贝塞尔参数的y坐标值。

x

+

x

number

+

number

路径结束时的x坐标值。

+

路径结束时的x坐标值。

y

+

y

number

+

number

路径结束时的y坐标值。

+

路径结束时的y坐标值。

参数

+ - - - - - - - - - - - - - - @@ -1192,10 +1601,24 @@ quadraticCurveTo\(cpx: number, cpy: number, x: number, y: number\): void - 示例 ``` - ctx.beginPath(); - ctx.moveTo(20, 20); - ctx.quadraticCurveTo(100, 100, 200, 20); - ctx.stroke(); + +
+ +
+ ``` + + ``` + //xxx.js + export default { + onShow() { + const el =this.$refs.canvas; + const ctx = el.getContext('2d'); + ctx.beginPath(); + ctx.moveTo(20, 20); + ctx.quadraticCurveTo(100, 100, 200, 20); + ctx.stroke(); + } + } ``` ![](figures/zh-cn_image_0000001169461910.png) @@ -1209,55 +1632,54 @@ arc\(x: number, y: number, radius: number, startAngle: number, endAngle: number, - 参数 - -

参数

类型

+

类型

描述

+

描述

cpx

+

cpx

number

+

number

贝塞尔参数的x坐标值。

+

贝塞尔参数的x坐标值。

cpy

+

cpy

number

+

number

贝塞尔参数的y坐标值。

+

贝塞尔参数的y坐标值。

x

+

x

number

+

number

路径结束时的x坐标值。

+

路径结束时的x坐标值。

y

+

y

number

+

number

路径结束时的y坐标值。

+

路径结束时的y坐标值。

参数

+ - - - - - - - - - - - - - - - - - - - - @@ -1266,9 +1688,23 @@ arc\(x: number, y: number, radius: number, startAngle: number, endAngle: number, - 示例 ``` - ctx.beginPath(); - ctx.arc(100, 75, 50, 0, 6.28); - ctx.stroke(); + +
+ +
+ ``` + + ``` + //xxx.js + export default { + onShow() { + const el =this.$refs.canvas; + const ctx = el.getContext('2d'); + ctx.beginPath(); + ctx.arc(100, 75, 50, 0, 6.28); + ctx.stroke(); + } + } ``` ![](figures/zh-cn_image_0000001169470288.png) @@ -1282,48 +1718,47 @@ arcTo\(x1: number, y1: number, x2: number, y2: number, radius: number\): void - 参数 - -

参数

类型

+

类型

描述

+

描述

x

+

x

number

+

number

弧线圆心的x坐标值。

+

弧线圆心的x坐标值。

y

+

y

number

+

number

弧线圆心的y坐标值。

+

弧线圆心的y坐标值。

radius

+

radius

number

+

number

弧线的圆半径。

+

弧线的圆半径。

startAngle

+

startAngle

number

+

number

弧线的起始弧度。

+

弧线的起始弧度。

endAngle

+

endAngle

number

+

number

弧线的终止弧度。

+

弧线的终止弧度。

anticlockwise

+

anticlockwise

boolean

+

boolean

是否逆时针绘制圆弧。

+

是否逆时针绘制圆弧。

参数

+ - - - - - - - - - - - - - - - - - @@ -1332,9 +1767,23 @@ arcTo\(x1: number, y1: number, x2: number, y2: number, radius: number\): void - 示例 ``` - ctx.moveTo(100, 20); - ctx.arcTo(150, 20, 150, 70, 50); // Create an arc - ctx.stroke(); + +
+ +
+ ``` + + ``` + //xxx.js + export default { + onShow() { + const el =this.$refs.canvas; + const ctx = el.getContext('2d'); + ctx.moveTo(100, 20); + ctx.arcTo(150, 20, 150, 70, 50); // Create an arc + ctx.stroke(); + } + } ``` ![](figures/zh-cn_image_0000001169143586.png) @@ -1348,69 +1797,68 @@ ellipse\(x: number, y: number, radiusX: number, radiusY: number, rotation: numbe - 参数 - -

参数

类型

+

类型

描述

+

描述

x1

+

x1

number

+

number

圆弧经过的第一个点的x坐标值。

+

圆弧经过的第一个点的x坐标值。

y1

+

y1

number

+

number

圆弧经过的第一个点的y坐标值。

+

圆弧经过的第一个点的y坐标值。

x2

+

x2

number

+

number

圆弧经过的第二个点的x坐标值。

+

圆弧经过的第二个点的x坐标值。

y2

+

y2

number

+

number

圆弧经过的第二个点的y坐标值。

+

圆弧经过的第二个点的y坐标值。

radius

+

radius

number

+

number

圆弧的圆半径值。

+

圆弧的圆半径值。

参数

+ - - - - - - - - - - - - - - - - - - - - - - - - - - @@ -1419,9 +1867,23 @@ ellipse\(x: number, y: number, radiusX: number, radiusY: number, rotation: numbe - 示例 ``` - ctx.beginPath(); - ctx.ellipse(200, 200, 50, 100, Math.PI * 0.25, Math.PI * 0.5, Math.PI, 1); - ctx.stroke(); + +
+ +
+ ``` + + ``` + //xxx.js + export default { + onShow() { + const el =this.$refs.canvas; + const ctx = el.getContext('2d'); + ctx.beginPath(); + ctx.ellipse(200, 200, 50, 100, Math.PI * 0.25, Math.PI * 0.5, Math.PI, 1); + ctx.stroke(); + } + } ``` ![](figures/ellipse.png) @@ -1435,41 +1897,40 @@ rect\(x: number, y: number, width: number, height: number\): void - 参数 - -

参数

类型

+

类型

描述

+

描述

x

+

x

number

+

number

椭圆圆心的x轴坐标。

+

椭圆圆心的x轴坐标。

y

+

y

number

+

number

椭圆圆心的y轴坐标。

+

椭圆圆心的y轴坐标。

radiusX

+

radiusX

number

+

number

椭圆x轴的半径长度。

+

椭圆x轴的半径长度。

radiusY

+

radiusY

number

+

number

椭圆y轴的半径长度。

+

椭圆y轴的半径长度。

rotation

+

rotation

number

+

number

椭圆的旋转角度，单位为弧度。

+

椭圆的旋转角度，单位为弧度。

startAngle

+

startAngle

number

+

number

椭圆绘制的起始点角度，以弧度表示。

+

椭圆绘制的起始点角度，以弧度表示。

endAngle

+

endAngle

number

+

number

椭圆绘制的结束点角度，以弧度表示。

+

椭圆绘制的结束点角度，以弧度表示。

anticlockwise

+

anticlockwise

number

+

number

是否以逆时针方向绘制椭圆，0为顺时针，1为逆时针。(可选参数，默认为0)

+

是否以逆时针方向绘制椭圆，0为顺时针，1为逆时针。(可选参数，默认为0)

参数

+ - - - - - - - - - - - - - - @@ -1478,8 +1939,22 @@ rect\(x: number, y: number, width: number, height: number\): void - 示例 ``` - ctx.rect(20, 20, 100, 100); // Create a 100*100 rectangle at (20, 20) - ctx.stroke(); // Draw it + +
+ +
+ ``` + + ``` + //xxx.js + export default { + onShow() { + const el =this.$refs.canvas; + const ctx = el.getContext('2d'); + ctx.rect(20, 20, 100, 100); // Create a 100*100 rectangle at (20, 20) + ctx.stroke(); // Draw it + } + } ``` ![](figures/zh-cn_image_0000001214630783.png) @@ -1494,8 +1969,22 @@ fill\(\): void - 示例 ``` - ctx.rect(20, 20, 100, 100); // Create a 100*100 rectangle at (20, 20) - ctx.fill(); // Draw it in default setting + +
+ +
+ ``` + + ``` + //xxx.js + export default { + onShow() { + const el =this.$refs.canvas; + const ctx = el.getContext('2d'); + ctx.rect(20, 20, 100, 100); // Create a 100*100 rectangle at (20, 20) + ctx.fill(); // Draw it in default setting + } + } ``` ![](figures/zh-cn_image_0000001214703717.png) @@ -1510,12 +1999,26 @@ clip\(\): void - 示例 ``` - ctx.rect(0, 0, 200, 200); - ctx.stroke(); - ctx.clip(); - // Draw red rectangle after clip - ctx.fillStyle = "rgb(255,0,0)"; - ctx.fillRect(0, 0, 150, 150); + +
+ +
+ ``` + + ``` + //xxx.js + export default { + onShow() { + const el =this.$refs.canvas; + const ctx = el.getContext('2d'); + ctx.rect(0, 0, 200, 200); + ctx.stroke(); + ctx.clip(); + // Draw red rectangle after clip + ctx.fillStyle = "rgb(255,0,0)"; + ctx.fillRect(0, 0, 150, 150); + } + } ``` ![](figures/zh-cn_image_0000001169303414.png) @@ -1529,20 +2032,19 @@ rotate\(rotate: number\): void - 参数 - -

参数

类型

+

类型

描述

+

描述

x

+

x

number

+

number

指定矩形的左上角x坐标值。

+

指定矩形的左上角x坐标值。

y

+

y

number

+

number

指定矩形的左上角y坐标值。

+

指定矩形的左上角y坐标值。

width

+

width

number

+

number

指定矩形的宽度。

+

指定矩形的宽度。

height

+

height

number

+

number

指定矩形的高度。

+

指定矩形的高度。

参数

+ - - - - - @@ -1551,8 +2053,22 @@ rotate\(rotate: number\): void - 示例 ``` - ctx.rotate(45 * Math.PI / 180); // Rotate the rectangle 45 degrees - ctx.fillRect(70, 20, 50, 50); + +
+ +
+ ``` + + ``` + //xxx.js + export default { + onShow() { + const el =this.$refs.canvas; + const ctx = el.getContext('2d'); + ctx.rotate(45 * Math.PI / 180); // Rotate the rectangle 45 degrees + ctx.fillRect(70, 20, 50, 50); + } + } ``` ![](figures/zh-cn_image_0000001169463368.png) @@ -1566,27 +2082,26 @@ scale\(x: number, y: number\): void - 参数 - -

参数

类型

+

类型

描述

+

描述

rotate

+

rotate

number

+

number

设置顺时针旋转的弧度值，可以通过Math.PI / 180将角度转换为弧度值。

+

设置顺时针旋转的弧度值，可以通过Math.PI / 180将角度转换为弧度值。

参数

+ - - - - - - - - @@ -1595,9 +2110,23 @@ scale\(x: number, y: number\): void - 示例 ``` - ctx.strokeRect(10, 10, 25, 25); - ctx.scale(2, 2);// Scale to 200% - ctx.strokeRect(10, 10, 25, 25); + +
+ +
+ ``` + + ``` + //xxx.js + export default { + onShow() { + const el =this.$refs.canvas; + const ctx = el.getContext('2d'); + ctx.strokeRect(10, 10, 25, 25); + ctx.scale(2, 2);// Scale to 200% + ctx.strokeRect(10, 10, 25, 25); + } + } ``` ![](figures/zh-cn_image_0000001214463281.png) @@ -1616,55 +2145,54 @@ transform方法对应一个变换矩阵，想对一个图形进行变化的时 - 参数 - -

参数

类型

+

类型

描述

+

描述

x

+

x

number

+

number

设置水平方向的缩放值。

+

设置水平方向的缩放值。

y

+

y

number

+

number

设置垂直方向的缩放值。

+

设置垂直方向的缩放值。

参数

+ - - - - - - - - - - - - - - - - - - - - @@ -1673,14 +2201,28 @@ transform方法对应一个变换矩阵，想对一个图形进行变化的时 - 示例 ``` - ctx.fillStyle = 'rgb(0,0,0)'; - ctx.fillRect(0, 0, 100, 100) - ctx.transform(1, 0.5, -0.5, 1, 10, 10); - ctx.fillStyle = 'rgb(255,0,0)'; - ctx.fillRect(0, 0, 100, 100); - ctx.transform(1, 0.5, -0.5, 1, 10, 10); - ctx.fillStyle = 'rgb(0,0,255)'; - ctx.fillRect(0, 0, 100, 100); + +
+ +
+ ``` + + ``` + //xxx.js + export default { + onShow() { + const el =this.$refs.canvas; + const ctx = el.getContext('2d'); + ctx.fillStyle = 'rgb(0,0,0)'; + ctx.fillRect(0, 0, 100, 100) + ctx.transform(1, 0.5, -0.5, 1, 10, 10); + ctx.fillStyle = 'rgb(255,0,0)'; + ctx.fillRect(0, 0, 100, 100); + ctx.transform(1, 0.5, -0.5, 1, 10, 10); + ctx.fillStyle = 'rgb(0,0,255)'; + ctx.fillRect(0, 0, 100, 100); + } + } ``` ![](figures/zh-cn_image_0000001214623227.png) @@ -1694,55 +2236,54 @@ setTransfrom方法使用的参数和transform\(\)方法相同，但setTransform\ - 参数 - -

参数

类型

+

类型

描述

+

描述

scaleX

+

scaleX

number

+

number

指定水平缩放值。

+

指定水平缩放值。

skewX

+

skewX

number

+

number

指定水平倾斜值。

+

指定水平倾斜值。

skewY

+

skewY

number

+

number

指定垂直倾斜值。

+

指定垂直倾斜值。

scaleY

+

scaleY

number

+

number

指定垂直缩放值。

+

指定垂直缩放值。

translateX

+

translateX

number

+

number

指定水平移动值。

+

指定水平移动值。

translateY

+

translateY

number

+

number

指定垂直移动值。

+

指定垂直移动值。

参数

+ - - - - - - - - - - - - - - - - - - - - @@ -1751,11 +2292,25 @@ setTransfrom方法使用的参数和transform\(\)方法相同，但setTransform\ - 示例 ``` - ctx.fillStyle = 'rgb(255,0,0)'; - ctx.fillRect(0, 0, 100, 100) - ctx.setTransform(1,0.5, -0.5, 1, 10, 10); - ctx.fillStyle = 'rgb(0,0,255)'; - ctx.fillRect(0, 0, 100, 100); + +
+ +
+ ``` + + ``` + //xxx.js + export default { + onShow() { + const el =this.$refs.canvas; + const ctx = el.getContext('2d'); + ctx.fillStyle = 'rgb(255,0,0)'; + ctx.fillRect(0, 0, 100, 100) + ctx.setTransform(1,0.5, -0.5, 1, 10, 10); + ctx.fillStyle = 'rgb(0,0,255)'; + ctx.fillRect(0, 0, 100, 100); + } + } ``` ![](figures/zh-cn_image_0000001168984880.png) @@ -1769,27 +2324,26 @@ translate\(x: number, y: number\): void - 参数 - -

参数

类型

+

类型

描述

+

描述

scaleX

+

scaleX

number

+

number

指定水平缩放值。

+

指定水平缩放值。

skewX

+

skewX

number

+

number

指定水平倾斜值。

+

指定水平倾斜值。

skewY

+

skewY

number

+

number

指定垂直倾斜值。

+

指定垂直倾斜值。

scaleY

+

scaleY

number

+

number

指定垂直缩放值。

+

指定垂直缩放值。

translateX

+

translateX

number

+

number

指定水平移动值。

+

指定水平移动值。

translateY

+

translateY

number

+

number

指定垂直移动值。

+

指定垂直移动值。

参数

+ - - - - - - - - @@ -1798,9 +2352,23 @@ translate\(x: number, y: number\): void - 示例 ``` - ctx.fillRect(10, 10, 50, 50); - ctx.translate(70, 70); - ctx.fillRect(10, 10, 50, 50); + +
+ +
+ ``` + + ``` + //xxx.js + export default { + onShow() { + const el =this.$refs.canvas; + const ctx = el.getContext('2d'); + ctx.fillRect(10, 10, 50, 50); + ctx.translate(70, 70); + ctx.fillRect(10, 10, 50, 50); + } + } ``` ![](figures/zh-cn_image_0000001169144864.png) @@ -1814,27 +2382,26 @@ createPath2D\(path: Path2D, cmds: string\): Path2D - 参数 - -

参数

类型

+

类型

描述

+

描述

x

+

x

number

+

number

设置水平平移量。

+

设置水平平移量。

y

+

y

number

+

number

设置竖直平移量。

+

设置竖直平移量。

参数

+ - - - - - - - - @@ -1847,16 +2414,30 @@ createPath2D\(path: Path2D, cmds: string\): Path2D - 示例 ``` - var path1 = ctx.createPath2D(); - path1.moveTo(100, 100); - path1.lineTo(200, 100); - path1.lineTo(100, 200); - path1.closePath(); - ctx.stroke(path1); - var path2 = ctx.createPath2D("M150 150 L50 250 L250 250 Z"); - ctx.stroke(path2); - var path3 = ctx.createPath2D(path2); - ctx.stroke(path3); + +
+ +
+ ``` + + ``` + //xxx.js + export default { + onShow() { + const el =this.$refs.canvas; + const ctx = el.getContext('2d'); + var path1 = ctx.createPath2D(); + path1.moveTo(100, 100); + path1.lineTo(200, 100); + path1.lineTo(100, 200); + path1.closePath(); + ctx.stroke(path1); + var path2 = ctx.createPath2D("M150 150 L50 250 L250 250 Z"); + ctx.stroke(path2); + var path3 = ctx.createPath2D(path2); + ctx.stroke(path3); + } + } ``` ![](figures/zh-cn_image_0000001214824709.png) @@ -1870,76 +2451,75 @@ drawImage\(image: Image, sx: number, sy: number, sWidth: number, sHeight: number - 参数 - -

参数

类型

+

类型

描述

+

描述

path

+

path

Path2D

+

Path2D

Path2D对象。

+

Path2D对象。

cmds

+

cmds

string

+

string

SVG的Path描述字符串。

+

SVG的Path描述字符串。

参数

+ - - - - - - - - - - - - - - - - - - - - - - - - - - - - - @@ -1948,11 +2528,23 @@ drawImage\(image: Image, sx: number, sy: number, sWidth: number, sHeight: number - 示例 ``` - var test = this.$element('drawImage'); - var ctx = test.getContext('2d'); - var img = new Image(); - img.src = 'common/image/test.jpg'; - ctx.drawImage(img, 50, 80, 80, 80); + +
+ +
+ ``` + + ``` + //xxx.js + export default { + onShow() { + var test = this.$element('drawImage'); + var ctx = test.getContext('2d'); + var img = new Image(); + img.src = 'common/image/test.jpg'; + ctx.drawImage(img, 50, 80, 80, 80); + } + } ``` ![](figures/zh-cn_image_0000001214704759.png) @@ -1967,7 +2559,21 @@ restore\(\): void - 示例 ``` - ctx.restore(); + +
+ +
+ ``` + + ``` + //xxx.js + export default { + onShow() { + const el =this.$refs.canvas; + const ctx = el.getContext('2d'); + ctx.restore(); + } + } ``` @@ -1980,7 +2586,21 @@ save\(\): void - 示例 ``` - ctx.save(); + +
+ +
+ ``` + + ``` + //xxx.js + export default { + onShow() { + const el =this.$refs.canvas; + const ctx = el.getContext('2d'); + ctx.save(); + } + } ``` @@ -1992,41 +2612,40 @@ createLinearGradient\(x0: number, y0: number, x1: number, y1: number\): Object - 参数 - -

参数

类型

+

类型

描述

+

描述

image

+

image

Image

+

Image

图片资源，请参考Image对象。

+

图片资源，请参考Image对象。

sx

+

sx

number

+

number

裁切源图像时距离源图像左上角的x坐标值。

+

裁切源图像时距离源图像左上角的x坐标值。

sy

+

sy

number

+

number

裁切源图像时距离源图像左上角的y坐标值。

+

裁切源图像时距离源图像左上角的y坐标值。

sWidth

+

sWidth

number

+

number

裁切源图像时需要裁切的宽度。

+

裁切源图像时需要裁切的宽度。

sHeight

+

sHeight

number

+

number

裁切源图像时需要裁切的高度。

+

裁切源图像时需要裁切的高度。

dx

+

dx

number

+

number

绘制区域左上角在x轴的位置。

+

绘制区域左上角在x轴的位置。

dy

+

dy

number

+

number

绘制区域左上角在y 轴的位置。

+

绘制区域左上角在y 轴的位置。

dWidth

+

dWidth

number

+

number

绘制区域的宽度。

+

绘制区域的宽度。

dHeight

+

dHeight

number

+

number

绘制区域的高度。

+

绘制区域的高度。

参数

+ - - - - - - - - - - - - - - @@ -2034,16 +2653,15 @@ createLinearGradient\(x0: number, y0: number, x1: number, y1: number\): Object - 返回值 - -

参数

类型

+

类型

描述

+

描述

x0

+

x0

number

+

number

起点的x轴坐标。

+

起点的x轴坐标。

y0

+

y0

number

+

number

起点的y轴坐标。

+

起点的y轴坐标。

x1

+

x1

number

+

number

终点的x轴坐标。

+

终点的x轴坐标。

y1

+

y1

number

+

number

终点的y轴坐标。

+

终点的y轴坐标。

类型

+ - - - @@ -2053,8 +2671,10 @@ createLinearGradient\(x0: number, y0: number, x1: number, y1: number\): Object ``` - - +
+ + +
``` ``` @@ -2087,55 +2707,54 @@ createRadialGradient\(x0: number, y0: number, r0: number, x1: number, y1: number - 参数 - -

类型

说明

+

说明

Object

+

Object

返回创建的CanvasGradient对象。

+

返回创建的CanvasGradient对象。

参数

+ - - - - - - - - - - - - - - - - - - - - @@ -2143,16 +2762,15 @@ createRadialGradient\(x0: number, y0: number, r0: number, x1: number, y1: number - 返回值 - -

参数

类型

+

类型

描述

+

描述

x0

+

x0

number

+

number

起始圆的x轴坐标。

+

起始圆的x轴坐标。

y0

+

y0

number

+

number

起始圆的y轴坐标。

+

起始圆的y轴坐标。

r0

+

r0

number

+

number

起始圆的半径。必须是非负且有限的。

+

起始圆的半径。必须是非负且有限的。

x1

+

x1

number

+

number

终点圆的x轴坐标。

+

终点圆的x轴坐标。

y1

+

y1

number

+

number

终点圆的y轴坐标。

+

终点圆的y轴坐标。

r1

+

r1

number

+

number

终点圆的半径。必须为非负且有限的。

+

终点圆的半径。必须为非负且有限的。

类型

+ - - - @@ -2162,8 +2780,10 @@ createRadialGradient\(x0: number, y0: number, r0: number, x1: number, y1: number ``` - - +
+ + +
``` ``` @@ -2196,34 +2816,33 @@ createImageData\(width: number, height: number, imageData: Object\): Object - 参数 - -

类型

说明

+

说明

Object

+

Object

返回创建的CanvasGradient对象。

+

返回创建的CanvasGradient对象。

参数

+ - - - - - - - - - - - @@ -2231,16 +2850,15 @@ createImageData\(width: number, height: number, imageData: Object\): Object - 返回值 - -

参数

类型

+

类型

描述

+

描述

width

+

width

number

+

number

ImageData的宽度。

+

ImageData的宽度。

height

+

height

number

+

number

ImageData的高度。

+

ImageData的高度。

imagedata

+

imagedata

Object

+

Object

复制现有的ImageData对象。

+

复制现有的ImageData对象。

类型

+ - - - @@ -2249,8 +2867,22 @@ createImageData\(width: number, height: number, imageData: Object\): Object - 示例 ``` - imageData = ctx.createImageData(50, 100); // Create ImageData with 50px width and 100px height - newImageData = ctx.createImageData(imageData); // Create ImageData using the input imageData + +
+ +
+ ``` + + ``` + //xxx.js + export default { + onShow() { + const el =this.$refs.canvas; + const ctx = el.getContext('2d'); + imageData = ctx.createImageData(50, 100); // Create ImageData with 50px width and 100px height + newImageData = ctx.createImageData(imageData); // Create ImageData using the input imageData + } + } ``` @@ -2262,41 +2894,40 @@ getImageData\(sx: number, sy: number, sw: number, sh: number\): Object - 参数 - -

类型

说明

+

说明

Object

+

Object

返回创建的ImageData对象。

+

返回创建的ImageData对象。

参数

+ - - - - - - - - - - - - - - @@ -2304,16 +2935,15 @@ getImageData\(sx: number, sy: number, sw: number, sh: number\): Object - 返回值 - -

参数

类型

+

类型

描述

+

描述

sx

+

sx

number

+

number

需要输出的区域的左上角x坐标。

+

需要输出的区域的左上角x坐标。

sy

+

sy

number

+

number

需要输出的区域的左上角y坐标。

+

需要输出的区域的左上角y坐标。

sw

+

sw

number

+

number

需要输出的区域的宽度。

+

需要输出的区域的宽度。

sh

+

sh

number

+

number

需要输出的区域的高度。

+

需要输出的区域的高度。

类型

+ - - - @@ -2322,9 +2952,21 @@ getImageData\(sx: number, sy: number, sw: number, sh: number\): Object - 示例 ``` - var test = this.$element('getImageData'); - var ctx = test.getContext('2d'); - var imageData = ctx.getImageData(0, 0, 280, 300); + +
+ +
+ ``` + + ``` + //xxx.js + export default { + onShow() { + var test = this.$element('getImageData') + var ctx = test.getContext('2d'); + var imageData = ctx.getImageData(0, 0, 280, 300); + } + } ``` @@ -2336,62 +2978,61 @@ putImageData\(imageData: Object, dx: number, dy: number, dirtyX: number, dirtyY: - 参数 - -

类型

说明

+

说明

Object

+

Object

返回包含指定区域像素的ImageData对象。

+

返回包含指定区域像素的ImageData对象。

参数

+ - - - - - - - - - - - - - - - - - - - - - - - @@ -2400,16 +3041,28 @@ putImageData\(imageData: Object, dx: number, dy: number, dirtyX: number, dirtyY: - 示例 ``` - var test = this.$element('putImageData'); - var ctx = test.getContext('2d'); - var imgData = ctx.createImageData(100, 100); - for (var i = 0; i < imgData.data.length; i += 4) { - imgData.data[i + 0] = 255; - imgData.data[i + 1] = 0; - imgData.data[i + 2] = 0; - imgData.data[i + 3] = 255; + +
+ +
+ ``` + + ``` + //xxx.js + export default { + onShow() { + var test = this.$element('getImageData') + var ctx = test.getContext('2d'); + var imgData = ctx.createImageData(100, 100); + for (var i = 0; i < imgData.data.length; i += 4) { + imgData.data[i + 0] = 255; + imgData.data[i + 1] = 0; + imgData.data[i + 2] = 0; + imgData.data[i + 3] = 255; + } + ctx.putImageData(imgData, 10, 10); + } } - ctx.putImageData(imgData, 10, 10); ``` ![](figures/zh-cn_image_0000001214463283.png) @@ -2423,20 +3076,19 @@ setLineDash\(segments: Array\): void - 参数 - -

参数

类型

+

类型

描述

+

描述

imagedata

+

imagedata

Object

+

Object

包含像素值的ImageData对象。

+

包含像素值的ImageData对象。

dx

+

dx

number

+

number

填充区域在x轴方向的偏移量。

+

填充区域在x轴方向的偏移量。

dy

+

dy

number

+

number

填充区域在y轴方向的偏移量。

+

填充区域在y轴方向的偏移量。

dirtyX

+

dirtyX

number

+

number

源图像数据矩形裁切范围左上角距离源图像左上角的x轴偏移量。

+

源图像数据矩形裁切范围左上角距离源图像左上角的x轴偏移量。

dirtyY

+

dirtyY

number

+

number

源图像数据矩形裁切范围左上角距离源图像左上角的y轴偏移量。

+

源图像数据矩形裁切范围左上角距离源图像左上角的y轴偏移量。

dirtyWidth

+

dirtyWidth

number

+

number

源图像数据矩形裁切范围的宽度。

+

源图像数据矩形裁切范围的宽度。

dirtyHeight

+

dirtyHeight

number

+

number

源图像数据矩形裁切范围的高度。

+

源图像数据矩形裁切范围的高度。

参数

+ - - - - - @@ -2445,9 +3097,23 @@ setLineDash\(segments: Array\): void - 示例 ``` - ctx.arc(100, 75, 50, 0, 6.28); - ctx.setLineDash([10,20]); - ctx.stroke(); + +
+ +
+ ``` + + ``` + //xxx.js + export default { + onShow() { + const el =this.$refs.canvas; + const ctx = el.getContext('2d'); + ctx.arc(100, 75, 50, 0, 6.28); + ctx.setLineDash([10,20]); + ctx.stroke(); + } + } ``` ![](figures/zh-cn_image_0000001214623229.png) @@ -2461,16 +3127,15 @@ getLineDash\(\): Array - 返回值 - -

参数

类型

+

类型

描述

+

描述

segments

+

segments

Array

+

Array

作为数组用来描述线段如何交替和间距长度。

+

作为数组用来描述线段如何交替和间距长度。

类型

+ - - - @@ -2479,7 +3144,21 @@ getLineDash\(\): Array - 示例 ``` - var info = ctx.getLineDash(); + +
+ +
+ ``` + + ``` + //xxx.js + export default { + onShow() { + const el =this.$refs.canvas; + const ctx = el.getContext('2d'); + var info = ctx.getLineDash(); + } + } ``` @@ -2491,20 +3170,19 @@ transferFromImageBitmap\(bitmap: ImageBitmap\): void - 参数 - -

类型

说明

+

说明

Array

+

Array

返回数组，该数组用来描述线段如何交替和间距长度。。

+

返回数组，该数组用来描述线段如何交替和间距长度。

参数

+ - - - - - @@ -2513,13 +3191,27 @@ transferFromImageBitmap\(bitmap: ImageBitmap\): void - 示例 ``` - var canvas = this.$refs.canvasId.getContext('2d'); - var offscreen = new OffscreenCanvas(500,500); - var offscreenCanvasCtx = offscreen.getContext("2d"); - offscreenCanvasCtx.fillRect(0, 0, 200, 200); + +
+ +
+ ``` + + ``` + //xxx.js + export default { + onShow() { + const el =this.$refs.canvas; + const ctx = el.getContext('2d'); + var canvas = this.$refs.canvas.getContext('2d'); + var offscreen = new OffscreenCanvas(500,500); + var offscreenCanvasCtx = offscreen.getContext("2d"); + offscreenCanvasCtx.fillRect(0, 0, 200, 200); - var bitmap = offscreen.transferToImageBitmap(); - canvas.transferFromImageBitmap(bitmap); + var bitmap = offscreen.transferToImageBitmap(); + canvas.transferFromImageBitmap(bitmap); + } + } ``` ![](figures/zh-cn_image_0000001168984882.png) diff --git a/zh-cn/application-dev/reference/arkui-js/js-components-canvas-image.md b/zh-cn/application-dev/reference/arkui-js/js-components-canvas-image.md index 283448a511b235f9a1437532d847135f5ac2f047..e8e298c434398e2d87411bc0e1adc68d514a5b4d 100644 --- a/zh-cn/application-dev/reference/arkui-js/js-components-canvas-image.md +++ b/zh-cn/application-dev/reference/arkui-js/js-components-canvas-image.md @@ -4,72 +4,71 @@ ## 属性 - -

参数

类型

+

类型

描述

+

描述

bitmap

+

bitmap

ImageBitmap

+

ImageBitmap

待显示的ImageBitmap对象。

+

待显示的ImageBitmap对象。

属性

+ - - - - - - - - - - - - - - - - - - - - - - - - - - - - - @@ -78,16 +77,29 @@ ## 示例 ``` -var ctx = this.$element('drawImage').getContext('2d'); -var img = new Image(); -img.src = 'common/images/example.jpg'; -img.onload = function() { - console.log('Image load success'); - ctx.drawImage(img, 0, 0, 360, 250); -}; -img.onerror = function() { - console.log('Image load fail'); -}; + +
+ +
+``` + +``` +//xxx.js +export default { + onShow(){ + const el =this.$refs.canvas + var ctx = this.$element('drawImage').getContext('2d'); + var img = new Image(); + img.src = 'common/images/example.jpg'; + img.onload = function() { + console.log('Image load success'); + ctx.drawImage(img, 0, 0, 360, 250); + }; + img.onerror = function() { + console.log('Image load fail'); + }; + } +} ``` ![](figures/1-2.png) diff --git a/zh-cn/application-dev/reference/arkui-js/js-components-canvas-imagebitmap.md b/zh-cn/application-dev/reference/arkui-js/js-components-canvas-imagebitmap.md index 5ae5ef24c488991fa66e16f9bb332918653cd78a..66e8c36f5edfe09b2b34108c4ac118f9caa09d18 100644 --- a/zh-cn/application-dev/reference/arkui-js/js-components-canvas-imagebitmap.md +++ b/zh-cn/application-dev/reference/arkui-js/js-components-canvas-imagebitmap.md @@ -1,33 +1,32 @@ # ImageBitmap对象 >![](../../public_sys-resources/icon-note.gif) **说明：** ->从API Version 7 开始支持。 +>从API version 7开始支持。后续版本如有新增内容，则采用上角标单独标记该内容的起始版本。 ImageBitmap对象由OffscreenCanvas对象的transferToImageBitmap\(\)方法生成，存储了offscreen canvas渲染的像素数据。 ## 属性 - -

属性

类型

+

类型

默认值

+

默认值

必填

+

必填

描述

+

描述

src

+

src

string

+

string

-

+

-

是

+

是

图片资源的路径。。

+

图片资源的路径。

width

+

width

<length>

+

<length>

0px

+

0px

否

+

否

图片的宽度。

+

图片的宽度。

height

+

height

<length>

+

<length>

0px

+

0px

否

+

否

图片的高度。

+

图片的高度。

onload

+

onload

Function

+

Function

-

+

-

否

+

否

图片加载成功后触发该事件，无参数。

+

图片加载成功后触发该事件，无参数。

onerror

+

onerror

Function

+

Function

-

+

-

否

+

否

图片加载失败后触发该事件，无参数。

+

图片加载失败后触发该事件，无参数。

属性

+ - - - - - - - - diff --git a/zh-cn/application-dev/reference/arkui-js/js-components-canvas-imagedata.md b/zh-cn/application-dev/reference/arkui-js/js-components-canvas-imagedata.md index 96184e222adadc239c02f338dfb03e716373603d..382c4ca9c498b4b4c21ed86342a812ab056c4c93 100644 --- a/zh-cn/application-dev/reference/arkui-js/js-components-canvas-imagedata.md +++ b/zh-cn/application-dev/reference/arkui-js/js-components-canvas-imagedata.md @@ -4,36 +4,61 @@ ImageData对象可以存储canvas渲染的像素数据。 ## 属性 - -

属性

类型

+

类型

描述

+

描述

width

+

width

number

+

number

ImageBitmap的像素宽度。

+

ImageBitmap的像素宽度。

height

+

height

number

+

number

ImageBitmap的像素高度。

+

ImageBitmap的像素高度。

属性

+ - - - - - - - - - - -

属性

类型

+

类型

描述

+

描述

width

+

width

number

+

number

矩形区域实际像素宽度。

+

矩形区域实际像素宽度。

height

+

height

number

+

number

矩形区域实际像素高度。

+

矩形区域实际像素高度。

data

+

data

<Uint8ClampedArray>

+

<Uint8ClampedArray>

一维数组，保存了相应的颜色数据，数据值范围为0到255。

+

一维数组，保存了相应的颜色数据，数据值范围为0到255。
+## 示例 + +``` + +
+ +
+``` + +``` +//xxx.js +import prompt from '@system.prompt'; +export default { + onShow() { + const el =this.$refs.canvas; + const ctx = el.getContext('2d'); + ctx.fillRect(0,0,200,200) + var imageData = ctx.createImageData(1,1) + prompt.showToast({ + message:imageData, + duration:5000 + }) + } +} +``` + diff --git a/zh-cn/application-dev/reference/arkui-js/js-components-canvas-offscreencanvas.md b/zh-cn/application-dev/reference/arkui-js/js-components-canvas-offscreencanvas.md index 4839d31b10459cfdf5299d80619ebec09b42fcfe..0b3f7f221330dda9bdd1b550f1ca3099816bd4e2 100644 --- a/zh-cn/application-dev/reference/arkui-js/js-components-canvas-offscreencanvas.md +++ b/zh-cn/application-dev/reference/arkui-js/js-components-canvas-offscreencanvas.md @@ -1,33 +1,32 @@ # OffscreenCanvas对象 >![](../../public_sys-resources/icon-note.gif) **说明：** ->从API Version 7 开始支持。 +>从API version 7开始支持。后续版本如有新增内容，则采用上角标单独标记该内容的起始版本。 可以离屏渲染的canvas对象。 ## 属性 - -

属性

+ - - - - - - - - @@ -43,33 +42,32 @@ getContext\(type: string, options?: CanvasRenderingContext2DSettings\): Offscree - 参数 - -

属性

类型

+

类型

描述

+

描述

width

+

width

number

+

number

offscreen canvas对象的宽度。

+

offscreen canvas对象的宽度。

height

+

height

number

+

number

offscreen canvas对象的高度。

+

offscreen canvas对象的高度。

参数名

+ - - - - - - - - - - - @@ -77,16 +75,15 @@ getContext\(type: string, options?: CanvasRenderingContext2DSettings\): Offscree - 返回值 - -

参数名

参数类型

+

参数类型

必填

+

必填

描述

+

描述

contextId

+

contextId

string

+

string

是

+

是

仅支持"2d"。

+

仅支持 '2d'。

options

+

options

CanvasRenderingContext2DSettings

+

CanvasRenderingContext2DSettings

否

+

否

用于在离屏画布上进行绘制矩形、文本、图片等。

+

用于在离屏画布上进行绘制矩形、文本、图片等。

类型

+ - - - @@ -101,33 +98,32 @@ toDataURL\(type?: string, quality?:number\): - 参数 - -

类型

说明

+

说明

OffscreenCanvasRenderingContext2D

+

OffscreenCanvasRenderingContext2D

用于在画布组件上绘制矩形、文本、图片等。

+

2D绘制对象，用于在画布组件上绘制矩形、文本、图片等。

参数名

+ - - - - - - - - - - - @@ -135,16 +131,15 @@ toDataURL\(type?: string, quality?:number\): - 返回值 - -

参数名

参数类型

+

参数类型

必填

+

必填

描述

+

描述

type

+

type

string

+

string

否

+

否

可选参数，用于指定图像格式，默认格式为image/png。

+

可选参数，用于指定图像格式，默认格式为image/png。

quality

+

quality

number

+

number

否

+

否

在指定图片格式为image/jpeg或image/webp的情况下，可以从0到1的区间内选择图片的质量。如果超出取值范围，将会使用默认值0.92。

+

在指定图片格式为image/jpeg或image/webp的情况下，可以从0到1的区间内选择图片的质量。如果超出取值范围，将会使用默认值0.92。

类型

+ - - - @@ -159,16 +154,15 @@ transferToImageBitmap\(\): ImageBitmap - 返回值 - -

类型

说明

+

说明

string

+

string

图像的URL地址。

+

图像的URL地址。

类型

+ - - - @@ -178,16 +172,28 @@ transferToImageBitmap\(\): ImageBitmap ## 示例 ``` -var canvas = this.$refs.canvasId.getContext('2d'); -var offscreen = new OffscreenCanvas(500,500); -var offscreenCanvasCtx = offscreen.getContext("2d"); - -// ... some drawing for the canvas using the offscreenCanvasCtx ... - -var dataURL = offscreen.toDataURL(); -console.log(dataURL); //data:image/png;base64,xxxxxx + +
+ +
+``` -var bitmap = offscreen.transferToImageBitmap(); -canvas.transferFromImageBitmap(bitmap); +``` +//xxx.js +export default { + onShow() { + var canvas = this.$refs.canvasId.getContext('2d'); + var offscreen = new OffscreenCanvas(500,500); + var offscreenCanvasCtx = offscreen.getContext("2d"); + + // ... some drawing for the canvas using the offscreenCanvasCtx ... + + var dataURL = offscreen.toDataURL(); + console.log(dataURL); //data:image/png;base64,xxxxxx + + var bitmap = offscreen.transferToImageBitmap(); + canvas.transferFromImageBitmap(bitmap); + } +} ``` diff --git a/zh-cn/application-dev/reference/arkui-js/js-components-canvas-path2d.md b/zh-cn/application-dev/reference/arkui-js/js-components-canvas-path2d.md index 5d3b6d7dab5d310464cf787fcdf3a82c1bff4141..c2a05294bdca936607247241c14c5ae79c0926f8 100644 --- a/zh-cn/application-dev/reference/arkui-js/js-components-canvas-path2d.md +++ b/zh-cn/application-dev/reference/arkui-js/js-components-canvas-path2d.md @@ -2,9 +2,6 @@ 路径对象，支持通过对象的接口进行路径的描述，并通过Canvas的stroke接口进行绘制。 ->![](../../public_sys-resources/icon-note.gif) **说明：** ->从 API Version 6 开始支持。 - ## addPath addPath\(path: Object\): void @@ -13,20 +10,19 @@ addPath\(path: Object\): void - 参数 - -

类型

说明

+

说明

ImageBitmap

+

ImageBitmap

存储离屏画布上渲染的像素数据。

+

存储离屏画布上渲染的像素数据。

参数

+ - - - - - @@ -34,74 +30,86 @@ addPath\(path: Object\): void - 示例 - ![](figures/zh-cn_image_0000001173164873.png) + ``` + +
+ +
+ ``` ``` - const ctx = canvas.getContext('2d'); - var path1 = ctx.createPath2D("M250 150 L150 350 L350 350 Z"); - var path2 = ctx.createPath2D(); - path2.addPath(path1); - ctx.stroke(path2); + //xxx.js + export default { + onShow() { + const el =this.$refs.canvas; + const ctx = el.getContext('2d'); + var path1 = ctx.createPath2D("M250 150 L150 350 L350 350 Z"); + var path2 = ctx.createPath2D(); + path2.addPath(path1); + ctx.stroke(path2); + } + } ``` + ![](figures/zh-cn_image_0000001173164873.png) + ## setTransform setTransform\(scaleX: number, skewX: number, skewY: number, scaleY: number, translateX: number, translateY: number\): void -依据圆弧经过的点和圆弧半径创建圆弧路径。 +设置路径变换矩阵。 - 参数 - -

参数

类型

+

类型

描述

+

描述

path

+

path

Object

+

Object

需要添加到当前路径的路径对象

+

需要添加到当前路径的路径对象

参数

+ - - - - - - - - - - - - - - - - - - - - @@ -109,15 +117,28 @@ setTransform\(scaleX: number, skewX: number, skewY: number, scaleY: number, tran - 示例 - ![](figures/zh-cn_image_0000001127125208.png) + ``` + +
+ +
+ ``` ``` - const ctx = canvas.getContext('2d'); - var path = ctx.createPath2D("M250 150 L150 350 L350 350 Z"); - path.setTransform(0.8, 0, 0, 0.4, 0, 0); - ctx.stroke(path); + //xxx.js + export default { + onShow() { + const el =this.$refs.canvas; + const ctx = el.getContext('2d'); + var path = ctx.createPath2D("M250 150 L150 350 L350 350 Z"); + path.setTransform(0.8, 0, 0, 0.4, 0, 0); + ctx.stroke(path); + } + } ``` + ![](figures/zh-cn_image_0000001127125208.png) + ## closePath @@ -127,18 +148,31 @@ closePath\(\): void - 示例 - ![](figures/zh-cn_image_0000001127125202.png) + ``` + +
+ +
+ ``` ``` - const ctx = canvas.getContext('2d'); - var path = ctx.createPath2D(); - path.moveTo(200, 100); - path.lineTo(300, 100); - path.lineTo(200, 200); - path.closePath(); - ctx.stroke(path); + //xxx.js + export default { + onShow() { + const el =this.$refs.canvas; + const ctx = el.getContext('2d'); + var path = ctx.createPath2D(); + path.moveTo(200, 100); + path.lineTo(300, 100); + path.lineTo(200, 200); + path.closePath(); + ctx.stroke(path); + } + } ``` + ![](figures/zh-cn_image_0000001127125202.png) + ## moveTo @@ -148,27 +182,26 @@ moveTo\(x: number, y: number\): void - 参数 - -

参数

类型

+

类型

描述

+

描述

scaleX

+

scaleX

number

+

number

x轴的缩放比例

+

x轴的缩放比例

skewX

+

skewX

number

+

number

x轴的倾斜角度

+

x轴的倾斜角度

skewY

+

skewY

number

+

number

y轴的倾斜角度

+

y轴的倾斜角度

scaleY

+

scaleY

number

+

number

y轴的缩放比例

+

y轴的缩放比例

translateX

+

translateX

number

+

number

x轴的平移距离

+

x轴的平移距离

translateY

+

translateY

number

+

number

y轴的平移距离

+

y轴的平移距离

参数

+ - - - - - - - - @@ -176,18 +209,31 @@ moveTo\(x: number, y: number\): void - 示例 - ![](figures/zh-cn_image_0000001173164869.png) + ``` + +
+ +
+ ``` ``` - const ctx = canvas.getContext('2d'); - var path = ctx.createPath2D(); - path.moveTo(50, 100); - path.lineTo(250, 100); - path.lineTo(150, 200); - path.closePath(); - ctx.stroke(path); + //xxx.js + export default { + onShow() { + const el =this.$refs.canvas; + const ctx = el.getContext('2d'); + var path = ctx.createPath2D(); + path.moveTo(50, 100); + path.lineTo(250, 100); + path.lineTo(150, 200); + path.closePath(); + ctx.stroke(path); + } + } ``` + ![](figures/zh-cn_image_0000001173164869.png) + ## lineTo @@ -197,27 +243,26 @@ lineTo\(x: number, y: number\): void - 参数 - -

参数

类型

+

类型

描述

+

描述

x

+

x

number

+

number

目标点X轴坐标

+

目标点X轴坐标

y

+

y

number

+

number

目标点Y轴坐标

+

目标点Y轴坐标

参数

+ - - - - - - - - @@ -225,19 +270,32 @@ lineTo\(x: number, y: number\): void - 示例 - ![](figures/zh-cn_image_0000001127285024.png) + ``` + +
+ +
+ ``` ``` - const ctx = canvas.getContext('2d'); - var path = ctx.createPath2D(); - path.moveTo(100, 100); - path.lineTo(100, 200); - path.lineTo(200, 200); - path.lineTo(200, 100); - path.closePath(); - ctx.stroke(path); + //xxx.js + export default { + onShow() { + const el =this.$refs.canvas; + const ctx = el.getContext('2d'); + var path = ctx.createPath2D(); + path.moveTo(100, 100); + path.lineTo(100, 200); + path.lineTo(200, 200); + path.lineTo(200, 100); + path.closePath(); + ctx.stroke(path); + } + } ``` + ![](figures/zh-cn_image_0000001127285024.png) + ## bezierCurveTo @@ -247,55 +305,54 @@ bezierCurveTo\(cp1x: number, cp1y: number, cp2x: number, cp2y: number, x: number - 参数 - -

参数

类型

+

类型

描述

+

描述

x

+

x

number

+

number

目标点X轴坐标

+

目标点X轴坐标

y

+

y

number

+

number

目标点Y轴坐标

+

目标点Y轴坐标

参数

+ - - - - - - - - - - - - - - - - - - - - @@ -303,60 +360,72 @@ bezierCurveTo\(cp1x: number, cp1y: number, cp2x: number, cp2y: number, x: number - 示例 - ![](figures/zh-cn_image_0000001173324783.png) + ``` + +
+ +
+ ``` ``` - const ctx = canvas.getContext('2d'); - var path = ctx.createPath2D(); - path.moveTo(10, 10); - path.bezierCurveTo(20, 100, 200, 100, 200, 20); - ctx.stroke(path); + //xxx.js + export default { + onShow() { + const el =this.$refs.canvas; + const ctx = el.getContext('2d'); + var path = ctx.createPath2D(); + path.moveTo(10, 10); + path.bezierCurveTo(20, 100, 200, 100, 200, 20); + ctx.stroke(path); + } + } ``` + ![](figures/zh-cn_image_0000001173324783.png) + ## quadraticCurveTo -quadraticCurveTo\(cpx: number, cpy: number, x: number ,y: number\): void +quadraticCurveTo\(cpx: number, cpy: number, x: number, y: number\): void 创建二次贝赛尔曲线的路径。 - 参数 - -

参数

类型

+

类型

描述

+

描述

cp1x

+

cp1x

number

+

number

第一个贝塞尔参数的x坐标值。

+

第一个贝塞尔参数的x坐标值。

cp1y

+

cp1y

number

+

number

第一个贝塞尔参数的y坐标值。

+

第一个贝塞尔参数的y坐标值。

cp2x

+

cp2x

number

+

number

第二个贝塞尔参数的x坐标值。

+

第二个贝塞尔参数的x坐标值。

cp2y

+

cp2y

number

+

number

第二个贝塞尔参数的y坐标值。

+

第二个贝塞尔参数的y坐标值。

x

+

x

number

+

number

路径结束时的x坐标值。

+

路径结束时的x坐标值。

y

+

y

number

+

number

路径结束时的y坐标值。

+

路径结束时的y坐标值。

参数

+ - - - - - - - - - - - - - - @@ -364,16 +433,29 @@ quadraticCurveTo\(cpx: number, cpy: number, x: number ,y: number\): void - 示例 - ![](figures/zh-cn_image_0000001173164871.png) + ``` + +
+ +
+ ``` ``` - const ctx = canvas.getContext('2d'); - var path = ctx.createPath2D(); - path.moveTo(10, 10); - path.quadraticCurveTo(100, 100, 200, 20); - ctx.stroke(path); + //xxx.js + export default { + onShow() { + const el =this.$refs.canvas; + const ctx = el.getContext('2d'); + var path = ctx.createPath2D(); + path.moveTo(10, 10); + path.quadraticCurveTo(100, 100, 200, 20); + ctx.stroke(path); + } + } ``` + ![](figures/zh-cn_image_0000001173164871.png) + ## arc @@ -383,55 +465,54 @@ arc\(x: number, y: number, radius: number, startAngle: number, endAngle: number, - 参数 - -

参数

类型

+

类型

描述

+

描述

cpx

+

cpx

number

+

number

贝塞尔参数的x坐标值。

+

贝塞尔参数的x坐标值。

cpy

+

cpy

number

+

number

贝塞尔参数的y坐标值。

+

贝塞尔参数的y坐标值。

x

+

x

number

+

number

路径结束时的x坐标值。

+

路径结束时的x坐标值。

y

+

y

number

+

number

路径结束时的y坐标值。

+

路径结束时的y坐标值。

参数

+ - - - - - - - - - - - - - - - - - - - - @@ -439,15 +520,28 @@ arc\(x: number, y: number, radius: number, startAngle: number, endAngle: number, - 示例 - ![](figures/zh-cn_image_0000001173164867.png) + ``` + +
+ +
+ ``` ``` - const ctx = canvas.getContext('2d'); - var path = ctx.createPath2D(); - path.arc(100, 75, 50, 0, 6.28); - ctx.stroke(path); + //xxx.js + export default { + onShow() { + const el =this.$refs.canvas; + const ctx = el.getContext('2d'); + var path = ctx.createPath2D(); + path.arc(100, 75, 50, 0, 6.28); + ctx.stroke(path); + } + } ``` + ![](figures/zh-cn_image_0000001173164867.png) + ## arcTo @@ -457,48 +551,47 @@ arcTo\(x1: number, y1: number, x2: number, y2: number, radius: number\): void - 参数 - -

参数

类型

+

类型

描述

+

描述

x

+

x

number

+

number

弧线圆心的x坐标值。

+

弧线圆心的x坐标值。

y

+

y

number

+

number

弧线圆心的y坐标值。

+

弧线圆心的y坐标值。

radius

+

radius

number

+

number

弧线的圆半径。

+

弧线的圆半径。

startAngle

+

startAngle

number

+

number

弧线的起始弧度。

+

弧线的起始弧度。

endAngle

+

endAngle

number

+

number

弧线的终止弧度。

+

弧线的终止弧度。

anticlockwise

+

anticlockwise

boolean

+

boolean

是否逆时针绘制圆弧。

+

是否逆时针绘制圆弧。

参数

+ - - - - - - - - - - - - - - - - - @@ -506,15 +599,28 @@ arcTo\(x1: number, y1: number, x2: number, y2: number, radius: number\): void - 示例 - ![](figures/zh-cn_image_0000001127125204.png) + ``` + +
+ +
+ ``` ``` - const ctx = canvas.getContext('2d'); - var path = ctx.createPath2D(); - path.arcTo(150, 20, 150, 70, 50); - ctx.stroke(path); + //xxx.js + export default { + onShow() { + const el =this.$refs.canvas; + const ctx = el.getContext('2d'); + var path = ctx.createPath2D(); + path.arcTo(150, 20, 150, 70, 50); + ctx.stroke(path); + } + } ``` + ![](figures/zh-cn_image_0000001127125204.png) + ## ellipse @@ -524,69 +630,68 @@ ellipse\(x: number, y: number, radiusX: number, radiusY: number, rotation: numbe - 参数 - -

参数

类型

+

类型

描述

+

描述

x1

+

x1

number

+

number

圆弧经过的第一个点的x坐标值。

+

圆弧经过的第一个点的x坐标值。

y1

+

y1

number

+

number

圆弧经过的第一个点的y坐标值。

+

圆弧经过的第一个点的y坐标值。

x2

+

x2

number

+

number

圆弧经过的第二个点的x坐标值。

+

圆弧经过的第二个点的x坐标值。

y2

+

y2

number

+

number

圆弧经过的第二个点的y坐标值。

+

圆弧经过的第二个点的y坐标值。

radius

+

radius

number

+

number

圆弧的圆半径值。

+

圆弧的圆半径值。

参数

+ - - - - - - - - - - - - - - - - - - - - - - - - - - @@ -594,15 +699,28 @@ ellipse\(x: number, y: number, radiusX: number, radiusY: number, rotation: numbe - 示例 - ![](figures/zh-cn_image_0000001173324787.png) + ``` + +
+ +
+ ``` ``` - const ctx = canvas.getContext('2d'); - var path = ctx.createPath2D(); - path.ellipse(200, 200, 50, 100, Math.PI * 0.25, Math.PI * 0.5, Math.PI, 1); - ctx.stroke(path); + //xxx.js + export default { + onShow() { + const el =this.$refs.canvas; + const ctx =el.getContext('2d'); + var path = ctx.createPath2D(); + path.ellipse(200, 200, 50, 100, Math.PI * 0.25, Math.PI * 0.5, Math.PI, 1); + ctx.stroke(path); + } + } ``` + ![](figures/zh-cn_image_0000001173324787.png) + ## rect @@ -612,41 +730,40 @@ rect\(x: number, y: number, width: number, height: number\): void - 参数 - -

参数

类型

+

类型

描述

+

描述

x

+

x

number

+

number

椭圆圆心的x轴坐标。

+

椭圆圆心的x轴坐标。

y

+

y

number

+

number

椭圆圆心的y轴坐标。

+

椭圆圆心的y轴坐标。

radiusX

+

radiusX

number

+

number

椭圆x轴的半径长度。

+

椭圆x轴的半径长度。

radiusY

+

radiusY

number

+

number

椭圆y轴的半径长度。

+

椭圆y轴的半径长度。

rotation

+

rotation

number

+

number

椭圆的旋转角度，单位为弧度。

+

椭圆的旋转角度，单位为弧度。

startAngle

+

startAngle

number

+

number

椭圆绘制的起始点角度，以弧度表示。

+

椭圆绘制的起始点角度，以弧度表示。

endAngle

+

endAngle

number

+

number

椭圆绘制的结束点角度，以弧度表示。

+

椭圆绘制的结束点角度，以弧度表示。

anticlockwise

+

anticlockwise

number

+

number

是否以逆时针方向绘制椭圆，0为顺时针，1为逆时针。(可选参数，默认为0)

+

是否以逆时针方向绘制椭圆，0为顺时针，1为逆时针。(可选参数，默认为0)

参数

+ - - - - - - - - - - - - - - @@ -654,13 +771,26 @@ rect\(x: number, y: number, width: number, height: number\): void - 示例 - ![](figures/zh-cn_image_0000001127125212.png) + ``` + +
+ +
+ ``` ``` - const ctx = canvas.getContext('2d'); - var path = ctx.createPath2D(); - path.rect(20, 20, 100, 100); - ctx.stroke(path); + //xxx.js + export default { + onShow() { + const el =this.$refs.canvas; + const ctx = el.getContext('2d'); + var path = ctx.createPath2D(); + path.rect(20, 20, 100, 100); + ctx.stroke(path); + } + } ``` + ![](figures/zh-cn_image_0000001127125212.png) + diff --git a/zh-cn/application-dev/reference/arkui-js/js-components-common-animation.md b/zh-cn/application-dev/reference/arkui-js/js-components-common-animation.md index f5140639774bc14361d40e42387961fda7d7bfe9..b9cc5bcd41a999b9d0746e19727f5915306022ac 100644 --- a/zh-cn/application-dev/reference/arkui-js/js-components-common-animation.md +++ b/zh-cn/application-dev/reference/arkui-js/js-components-common-animation.md @@ -2,136 +2,135 @@ 组件支持动态的旋转、平移、缩放效果，可在style或css中设置。 - -

参数

类型

+

类型

描述

+

描述

x

+

x

number

+

number

指定矩形的左上角x坐标值。

+

指定矩形的左上角x坐标值。

y

+

y

number

+

number

指定矩形的左上角y坐标值。

+

指定矩形的左上角y坐标值。

width

+

width

number

+

number

指定矩形的宽度。

+

指定矩形的宽度。

height

+

height

number

+

number

指定矩形的高度。

+

指定矩形的高度。

名称

+ - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - @@ -140,166 +139,166 @@ **表 1** transform操作说明 -

名称

类型

+

类型

默认值

+

默认值

描述

+

描述

transform-origin

+

transform-origin

string6+ | <percentage> | <length> string6+ | <percentage> | <length>

+

string6+ | <percentage> | <length> string6+ | <percentage> | <length>

center center

+

center center

变换对象的原点位置，支持px和百分比(相对于动画目标组件)，如果仅设置一个值，另一个值为50%，第一个string的可选值为：left | center | right ，第二个string的可选值为：top | center | bottom。

-

示例：

-

transform-origin: 200px 30%。

-

transform-origin: 100px top。

-

transform-origin: center center。

+

变换对象的原点位置，支持px和百分比(相对于动画目标组件)，如果仅设置一个值，另一个值为50%，第一个string的可选值为：left | center | right ，第二个string的可选值为：top | center | bottom。

+

示例：

+

transform-origin: 200px 30%。

+

transform-origin: 100px top。

+

transform-origin: center center。

transform

+

transform

string

+

string

-

+

-

支持同时设置平移/旋转/缩放的属性。

-

详见表1。

+

支持同时设置平移/旋转/缩放的属性。

+

详见表1。

animation6+

+

animation6+

string

+

string

0s ease 0s 1 normal none running none

+

0s ease 0s 1 normal none running none

格式：duration | timing-function | delay | iteration-count | direction | fill-mode | play-state | name，每个字段不区分先后，但是 duration / delay 按照出现的先后顺序解析。

+

格式：duration | timing-function | delay | iteration-count | direction | fill-mode | play-state | name，每个字段不区分先后，但是 duration / delay 按照出现的先后顺序解析。

animation-name

+

animation-name

string

+

string

-

+

-

指定@keyframes，详见表2。

+

指定@keyframes，详见表2。

animation-delay

+

animation-delay

<time>

+

<time>

0

+

0

定义动画播放的延迟时间。支持的单位为[s(秒)|ms(毫秒) ]，默认单位为ms，格式为：1000ms或1s。

+

定义动画播放的延迟时间。支持的单位为[s(秒)|ms(毫秒) ]，默认单位为ms，格式为：1000ms或1s。

animation-duration

+

animation-duration

<time>

+

<time>

0

+

0

定义一个动画周期。支持的单位为[s(秒)|ms(毫秒) ]，默认单位为ms，格式为：1000ms或1s。

-
说明：

animation-duration 样式必须设置，否则时长为 0，则不会播放动画。

+

定义一个动画周期。支持的单位为[s(秒)|ms(毫秒) ]，默认单位为ms，格式为：1000ms或1s。

+
说明：

animation-duration 样式必须设置，否则时长为 0，则不会播放动画。

animation-iteration-count

+

animation-iteration-count

number | infinite

+

number | infinite

1

+

1

定义动画播放的次数，默认播放一次，可通过设置为infinite无限次播放。

+

定义动画播放的次数，默认播放一次，可通过设置为infinite无限次播放。

animation-timing-function

+

animation-timing-function

string

+

string

ease

+

ease

描述动画执行的速度曲线，用于使动画更为平滑。

-

可选项有：

-
  • linear：表示动画从头到尾的速度都是相同的。
  • ease：表示动画以低速开始，然后加快，在结束前变慢，cubic-bezier(0.25, 0.1, 0.25, 1.0)。
  • ease-in：表示动画以低速开始，cubic-bezier(0.42, 0.0, 1.0, 1.0)。
  • ease-out：表示动画以低速结束，cubic-bezier(0.0, 0.0, 0.58, 1.0)。
  • ease-in-out：表示动画以低速开始和结束，cubic-bezier(0.42, 0.0, 0.58, 1.0)。
  • friction：阻尼曲线，cubic-bezier(0.2, 0.0, 0.2, 1.0)。
  • extreme-deceleration：急缓曲线，cubic-bezier(0.0, 0.0, 0.0, 1.0)。
  • sharp：锐利曲线，cubic-bezier(0.33, 0.0, 0.67, 1.0)。
  • rhythm：节奏曲线，cubic-bezier(0.7, 0.0, 0.2, 1.0)。
  • smooth：平滑曲线，cubic-bezier(0.4, 0.0, 0.4, 1.0)。
  • cubic-bezier：在三次贝塞尔函数中定义动画变化过程，入参的x和y值必须处于0-1之间。
  • steps: 阶梯曲线6+。语法：steps(number[, end|start])；number必须设置，支持的类型为正整数。第二个参数可选，表示在每个间隔的起点或是终点发生阶跃变化，支持设置end或start，默认值为end。
+

描述动画执行的速度曲线，用于使动画更为平滑。

+

可选项有：

+
  • linear：表示动画从头到尾的速度都是相同的。
  • ease：表示动画以低速开始，然后加快，在结束前变慢，cubic-bezier(0.25, 0.1, 0.25, 1.0)。
  • ease-in：表示动画以低速开始，cubic-bezier(0.42, 0.0, 1.0, 1.0)。
  • ease-out：表示动画以低速结束，cubic-bezier(0.0, 0.0, 0.58, 1.0)。
  • ease-in-out：表示动画以低速开始和结束，cubic-bezier(0.42, 0.0, 0.58, 1.0)。
  • friction：阻尼曲线，cubic-bezier(0.2, 0.0, 0.2, 1.0)。
  • extreme-deceleration：急缓曲线，cubic-bezier(0.0, 0.0, 0.0, 1.0)。
  • sharp：锐利曲线，cubic-bezier(0.33, 0.0, 0.67, 1.0)。
  • rhythm：节奏曲线，cubic-bezier(0.7, 0.0, 0.2, 1.0)。
  • smooth：平滑曲线，cubic-bezier(0.4, 0.0, 0.4, 1.0)。
  • cubic-bezier：在三次贝塞尔函数中定义动画变化过程，入参的x和y值必须处于0-1之间。
  • steps: 阶梯曲线6+。语法：steps(number[, end|start])；number必须设置，支持的类型为正整数。第二个参数可选，表示在每个间隔的起点或是终点发生阶跃变化，支持设置end或start，默认值为end。

animation-direction6+

+

animation-direction6+

string

+

string

normal

+

normal

指定动画的播放模式：

-
  • normal： 动画正向循环播放。
  • reverse： 动画反向循环播放。
  • alternate：动画交替循环播放，奇数次正向播放，偶数次反向播放。
  • alternate-reverse：动画反向交替循环播放，奇数次反向播放，偶数次正向播放。
+

指定动画的播放模式：

+
  • normal： 动画正向循环播放。
  • reverse： 动画反向循环播放。
  • alternate：动画交替循环播放，奇数次正向播放，偶数次反向播放。
  • alternate-reverse：动画反向交替循环播放，奇数次反向播放，偶数次正向播放。

animation-fill-mode

+

animation-fill-mode

string

+

string

none

+

none

指定动画开始和结束的状态：

-
  • none：在动画执行之前和之后都不会应用任何样式到目标上。
  • forwards：在动画结束后，目标将保留动画结束时的状态（在最后一个关键帧中定义）。
  • backwards6+：动画将在animation-delay期间应用第一个关键帧中定义的值。当animation-direction为"normal"或"alternate"时应用from关键帧中的值，当animation-direction为"reverse"或"alternate-reverse"时应用to关键帧中的值。
  • both6+：动画将遵循forwards和backwards的规则，从而在两个方向上扩展动画属性。
+

指定动画开始和结束的状态：

+
  • none：在动画执行之前和之后都不会应用任何样式到目标上。
  • forwards：在动画结束后，目标将保留动画结束时的状态（在最后一个关键帧中定义）。
  • backwards6+：动画将在animation-delay期间应用第一个关键帧中定义的值。当animation-direction为"normal"或"alternate"时应用from关键帧中的值，当animation-direction为"reverse"或"alternate-reverse"时应用to关键帧中的值。
  • both6+：动画将遵循forwards和backwards的规则，从而在两个方向上扩展动画属性。

animation-play-state6+

+

animation-play-state6+

string

+

string

running

+

running

指定动画的当前状态：

-
  • paused：动画状态为暂停。
  • running：动画状态为播放。
+

指定动画的当前状态：

+
  • paused：动画状态为暂停。
  • running：动画状态为播放。

transition6+

+

transition6+

string

+

string

all 0 ease 0

+

all 0 ease 0

指定组件状态切换时的过渡效果，可以通过transition属性设置如下四个属性：

-
  • transition-property：规定设置过渡效果的 CSS 属性的名称，目前支持宽、高、背景色。
  • transition-duration：规定完成过渡效果需要的时间，单位秒。
  • transition-timing-function：规定过渡效果的时间曲线，支持样式动画提供的曲线。
  • transition-delay：规定过渡效果延时启动时间，单位秒。
+

指定组件状态切换时的过渡效果，可以通过transition属性设置如下四个属性：

+
  • transition-property：规定设置过渡效果的 CSS 属性的名称，目前支持宽、高、背景色。
  • transition-duration：规定完成过渡效果需要的时间，单位秒。
  • transition-timing-function：规定过渡效果的时间曲线，支持样式动画提供的曲线。
  • transition-delay：规定过渡效果延时启动时间，单位秒。

名称

+ - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - @@ -308,70 +307,70 @@ **表 2** @keyframes属性说明 -

名称

类型

+

类型

描述

+

描述

none6+

+

none6+

-

+

-

不进行任何转换。

+

不进行任何转换。

matrix6+

+

matrix6+

<number>

+

<number>

入参为六个值的矩阵，6个值分别代表：scaleX, skewY, skewX, scaleY, translateX, translateY。

+

入参为六个值的矩阵，6个值分别代表：scaleX, skewY, skewX, scaleY, translateX, translateY。

matrix3d6+

+

matrix3d6+

<number>

+

<number>

入参为十六个值的4X4矩阵。

+

入参为十六个值的4X4矩阵。

translate

+

translate

<length>| <percent>

+

<length>| <percent>

平移动画属性，支持设置x轴和y轴两个维度的平移参数。

+

平移动画属性，支持设置x轴和y轴两个维度的平移参数。

translate3d6+

+

translate3d6+

<length>| <percent>

+

<length>| <percent>

三个入参，分别代表X轴、Y轴、Z轴的平移距离。

+

三个入参，分别代表X轴、Y轴、Z轴的平移距离。

translateX

+

translateX

<length>| <percent>

+

<length>| <percent>

X轴方向平移动画属性。

+

X轴方向平移动画属性。

translateY

+

translateY

<length>| <percent>

+

<length>| <percent>

Y轴方向平移动画属性。

+

Y轴方向平移动画属性。

translateZ6+

+

translateZ6+

<length>| <percent>

+

<length>| <percent>

Z轴的平移距离。

+

Z轴的平移距离。

scale

+

scale

<number>

+

<number>

缩放动画属性，支持设置x轴和y轴两个维度的缩放参数。

+

缩放动画属性，支持设置x轴和y轴两个维度的缩放参数。

scale3d6+

+

scale3d6+

<number>

+

<number>

三个入参，分别代表X轴、Y轴、Z轴的缩放参数。

+

三个入参，分别代表X轴、Y轴、Z轴的缩放参数。

scaleX

+

scaleX

<number>

+

<number>

X轴方向缩放动画属性。

+

X轴方向缩放动画属性。

scaleY

+

scaleY

<number>

+

<number>

Y轴方向缩放动画属性。

+

Y轴方向缩放动画属性。

scaleZ6+

+

scaleZ6+

<number>

+

<number>

Z轴的缩放参数。

+

Z轴的缩放参数。

rotate

+

rotate

<deg> | <rad> | <grad>6+ | <turn>6+

+

<deg> | <rad> | <grad>6+ | <turn>6+

旋转动画属性，支持设置x轴和y轴两个维度的选中参数。

+

旋转动画属性，支持设置x轴和y轴两个维度的选中参数。

rotate3d6+

+

rotate3d6+

<deg> | <rad> | <grad> | <turn>

+

<deg> | <rad> | <grad> | <turn>

四个入参，前三个分别为X轴、Y轴、Z轴的旋转向量，第四个是旋转角度。

+

四个入参，前三个分别为X轴、Y轴、Z轴的旋转向量，第四个是旋转角度。

rotateX

+

rotateX

<deg> | <rad> | <grad>6+ | <turn>6+

+

<deg> | <rad> | <grad>6+ | <turn>6+

X轴方向旋转动画属性。

+

X轴方向旋转动画属性。

rotateY

+

rotateY

<deg> | <rad> | <grad>6+ | <turn>6+

+

<deg> | <rad> | <grad>6+ | <turn>6+

Y轴方向旋转动画属性。

+

Y轴方向旋转动画属性。

rotateZ6+

+

rotateZ6+

<deg> | <rad> | <grad> | <turn>

+

<deg> | <rad> | <grad> | <turn>

Z轴方向的旋转角度。

+

Z轴方向的旋转角度。

skew6+

+

skew6+

<deg> | <rad> | <grad> | <turn>

+

<deg> | <rad> | <grad> | <turn>

两个入参，分别为X轴和Y轴的2D倾斜角度。

+

两个入参，分别为X轴和Y轴的2D倾斜角度。

skewX6+

+

skewX6+

<deg> | <rad> | <grad> | <turn>

+

<deg> | <rad> | <grad> | <turn>

X轴的2D倾斜角度。

+

X轴的2D倾斜角度。

skewY6+

+

skewY6+

<deg> | <rad> | <grad> | <turn>

+

<deg> | <rad> | <grad> | <turn>

Y轴的2D倾斜角度。

+

Y轴的2D倾斜角度。

perspective6+

+

perspective6+

<number>

+

<number>

3D透视场景下镜头距离元素表面的距离。

+

3D透视场景下镜头距离元素表面的距离。

名称

+ - - - - - - - - - - - - - - - - - - - - - - - - - - - diff --git a/zh-cn/application-dev/reference/arkui-js/js-components-common-atomic-layout.md b/zh-cn/application-dev/reference/arkui-js/js-components-common-atomic-layout.md index 232f04c32e699dbc787a5c843a37463bb28fe74a..2e943c6b5d3e59aedefa2411a635905a4125c806 100644 --- a/zh-cn/application-dev/reference/arkui-js/js-components-common-atomic-layout.md +++ b/zh-cn/application-dev/reference/arkui-js/js-components-common-atomic-layout.md @@ -2,31 +2,27 @@ 在屏幕形态和规格不同等情况下，布局效果需要实现自适应，因此系统提供了面向不同屏幕尺寸界面自适应适配的布局能力，称为原子布局。设计师可以考虑使用原子能力，定义元素在不同形态的尺寸界面上体现的自适应规则。开发者可以使用原子布局能力，快速实现让应用在多形态屏幕上有与设计效果相匹配的自适应效果。 ->![](../../public_sys-resources/icon-note.gif) **说明：** ->从API Version 5 开始支持。 - ## 隐藏能力 在非折行flex布局基础上，增加了显示优先级标记，可以调整组件内元素水平/垂直方向的显示优先级，根据当前组件容器的可用空间来显示内容。 - -

名称

类型

+

类型

默认值

+

默认值

描述

+

描述

background-color

+

background-color

<color>

+

<color>

-

+

-

动画执行后应用到组件上的背景颜色。

+

动画执行后应用到组件上的背景颜色。

opacity

+

opacity

number

+

number

1

+

1

动画执行后应用到组件上的不透明度值，为介于0到1间的数值，默认为1。

+

动画执行后应用到组件上的不透明度值，为介于0到1间的数值，默认为1。

width

+

width

<length>

+

<length>

-

+

-

动画执行后应用到组件上的宽度值。

+

动画执行后应用到组件上的宽度值。

height

+

height

<length>

+

<length>

-

+

-

动画执行后应用到组件上的高度值。

+

动画执行后应用到组件上的高度值。

transform

+

transform

string

+

string

-

+

-

定义应用在组件上的变换类型，见表1。

+

定义应用在组件上的变换类型，见表1。

background-position6+

+

background-position6+

string | <percentage> | <length> string | <percentage> | <length>

+

string | <percentage> | <length> string | <percentage> | <length>

50% 50%

+

50% 50%

背景图位置。单位支持百分比和px，第一个值是水平位置，第二个值是垂直位置。如果仅设置一个值，另一个值为50%。第一个string的可选值为：left | center | right ，第二个string的可选值为：top | center | bottom。

-

示例：

-
  • background-position: 200px 30%
  • background-position: 100px top
  • background-position: center center
+

背景图位置。单位支持百分比和px，第一个值是水平位置，第二个值是垂直位置。如果仅设置一个值，另一个值为50%。第一个string的可选值为：left | center | right ，第二个string的可选值为：top | center | bottom。

+

示例：

+
  • background-position: 200px 30%
  • background-position: 100px top
  • background-position: center center

样式

+ - - - - - - - @@ -36,24 +32,23 @@ 在非折行的flex布局中，定义了占比能力的组件，保证指定元素始终在容器的某一个比例空间中进行布局。 - -

样式

类型

+

类型

默认值

+

默认值

说明

+

说明

display-index

+

display-index

number

+

number

0

+

0

适用于div等支持flex布局的容器组件中的子组件上，当容器组件在flex主轴上尺寸不足以显示全部内容时，按照display-index值从小到大的顺序进行隐藏，具有相同display-index值的组件同时隐藏，默认值为0，表示隐藏。

+

适用于div等支持flex布局的容器组件中的子组件上，当容器组件在flex主轴上尺寸不足以显示全部内容时，按照display-index值从小到大的顺序进行隐藏，具有相同display-index值的组件同时隐藏，默认值为0，表示隐藏。

样式

+ - - - - - - - @@ -63,26 +58,25 @@ 定义了组件固定比例调整尺寸的能力。 - -

样式

类型

+

类型

默认值

+

默认值

说明

+

说明

flex-weight

+

flex-weight

number

+

number

-

+

-

指明当前元素在flex主轴方向上尺寸权值，当且仅当容器组件中所有节点均设置此属性时生效，当前元素尺寸为： 容器主轴尺寸 * 当前权值 / 所有子元素权值和。

+

指明当前元素在flex主轴方向上尺寸权值，当且仅当容器组件中所有节点均设置此属性时生效，当前元素尺寸为： 容器主轴尺寸 * 当前权值 / 所有子元素权值和。

样式

+ - - - - - - - diff --git a/zh-cn/application-dev/reference/arkui-js/js-components-common-attributes.md b/zh-cn/application-dev/reference/arkui-js/js-components-common-attributes.md index 3d73f5c0caaa18e1b307e1e0810da1f44cba3e15..b5f1d04e26d2ebae7568c57049ea7260a78b2c7f 100644 --- a/zh-cn/application-dev/reference/arkui-js/js-components-common-attributes.md +++ b/zh-cn/application-dev/reference/arkui-js/js-components-common-attributes.md @@ -4,133 +4,121 @@ 常规属性指的是组件普遍支持的用来设置组件基本标识和外观显示特征的属性。 - -

样式

类型

+

类型

默认值

+

默认值

说明

+

说明

aspect-ratio

+

aspect-ratio

number

+

number

-

+

-

1. 接受任意大于0的浮点值，定义为该节点的宽度与高度比，设置该属性后，该元素尺寸宽高比按照此属性值进行调整。

-

2. 遵守最大值与最小值的限制。

-

3. 在flex布局中，主轴尺寸先进行调整，后根据该尺寸调整交叉轴。

+

1. 接受任意大于0的浮点值，定义为该节点的宽度与高度比，设置该属性后，该元素尺寸宽高比按照此属性值进行调整。

+

2. 遵守最大值与最小值的限制。

+

3. 在flex布局中，主轴尺寸先进行调整，后根据该尺寸调整交叉轴。

名称

+ - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - @@ -140,42 +128,41 @@ 组件普遍支持的用来设置组件是否渲染的属性。 - -

名称

类型

+

类型

默认值

+

默认值

必填

+

必填

描述

+

描述

id

+

id

string

+

string

-

+

-

否

+

否

组件的唯一标识。

+

组件的唯一标识。

style

+

style

string

+

string

-

+

-

否

+

否

组件的样式声明。

+

组件的样式声明。

class

+

class

string

+

string

-

+

-

否

+

否

组件的样式类，用于引用样式表。

+

组件的样式类，用于引用样式表。

ref

+

ref

string

+

string

-

+

-

否

+

否

用来指定指向子元素或子组件的引用信息，该引用将注册到父组件的$refs 属性对象上。

+

用来指定指向子元素或子组件的引用信息，该引用将注册到父组件的$refs 属性对象上。

disabled

+

disabled

boolean

+

boolean

false

+

false

否

+

否

当前组件是否被禁用，在禁用场景下，组件将无法响应用户交互。

+

当前组件是否被禁用，在禁用场景下，组件将无法响应用户交互。

focusable

+

data

boolean

+

string

false

+

-

否

+

否

当前组件是否可以获取焦点。 当focusable设置为true时，组件可以响应焦点事件和按键事件。当组件额外设置了按键事件或者点击事件时，框架会设置该属性为true。

-

data

-

string

-

-

-

否

-

给当前组件设置data属性，进行相应的数据存储和读取。JS文件中：

-
  • 在事件回调中使用 e.target.attr.data 读取数据，e为事件回调函数入参。
  • 使用$element或者$refs获取DOM元素后，通过attr.data 进行访问。
-
说明：

从API Version 6 开始，建议使用data-*。

+

给当前组件设置data属性，进行相应的数据存储和读取。JS文件中：

+
  • 在事件回调中使用 e.target.attr.data 读取数据，e为事件回调函数入参。
  • 使用$element或者$refs获取DOM元素后，通过attr.data 进行访问。
+
说明：

从API Version 6 开始，建议使用data-*。

data-*6+

+

data-*6+

string

+

string

-

+

-

否

+

否

给当前组件设置data-*属性，进行相应的数据存储和读取。大小写不敏感，如data-A和data-a默认相同。JS文件中：

-
  • 在事件回调中使用 e.target.dataSet.a读取数据，e为事件回调函数入参。
  • 使用$element或者$refs获取DOM元素后，通过dataSet.a进行访问。
+

给当前组件设置data-*属性，进行相应的数据存储和读取。大小写不敏感，如data-A和data-a默认相同。JS文件中：

+
  • 在事件回调中使用 e.target.dataSet.a读取数据，e为事件回调函数入参。
  • 使用$element或者$refs获取DOM元素后，通过dataSet.a进行访问。

click-effect5+

+

click-effect5+

string

+

string

-

+

-

否

+

否

通过这个属性可以设置组件的弹性点击效果，当前支持如下三种效果：

-
  • spring-small：建议小面积组件设置，缩放(90%)。
  • spring-medium：建议中面积组件设置，缩放(95%)。
  • spring-large：建议大面积组件设置，缩放(95%)。
+

通过这个属性可以设置组件的弹性点击效果，当前支持如下三种效果：

+
  • spring-small：建议小面积组件设置，缩放(90%)。
  • spring-medium：建议中面积组件设置，缩放(95%)。
  • spring-large：建议大面积组件设置，缩放(95%)。

dir6+

+

dir6+

string

+

string

auto

+

auto

否

+

否

设置元素布局模式，支持设置rtl、ltr和auto三种属性值：

-
  • rtl：使用从右往左布局模式。
  • ltr：使用从左往右布局模式。
  • auto：跟随系统语言环境。
+

设置元素布局模式，支持设置rtl、ltr和auto三种属性值：

+
  • rtl：使用从右往左布局模式。
  • ltr：使用从左往右布局模式。
  • auto：跟随系统语言环境。

名称

+ - - - - - - - - - - - - - - - diff --git a/zh-cn/application-dev/reference/arkui-js/js-components-common-customizing-font.md b/zh-cn/application-dev/reference/arkui-js/js-components-common-customizing-font.md index a8d8cb2d8e441f581974c47d2cc8b4b544a9d7bd..1c8e89bc24595236acfa859c7e8abe19d00a6c57 100644 --- a/zh-cn/application-dev/reference/arkui-js/js-components-common-customizing-font.md +++ b/zh-cn/application-dev/reference/arkui-js/js-components-common-customizing-font.md @@ -2,10 +2,7 @@ font-face用于定义字体样式。应用可以在style中定义font-face来指定相应的字体名和字体资源，然后在font-family样式中引用该字体。 -自定义字体可以是从项目中的字体文件中加载的字体。 - ->![](../../public_sys-resources/icon-note.gif) **说明：** ->字体格式支持ttf和otf。 +自定义字体可以是从项目中的字体文件中加载的字体，字体格式支持ttf和otf。 ## 定义font-face @@ -24,7 +21,7 @@ font-face用于定义字体样式。应用可以在style中定义font-face来指 自定义字体的来源，支持如下类别： -- 项目中的字体文件：通过url指定项目中的字体文件路径\(只支持绝对路径，详见[资源和文件访问规则](js-framework-file.md#section6620355202117)章节\)。 +- 项目中的字体文件：通过url指定项目中的字体文件路径\(只支持绝对路径，详见[资源和文件访问规则](../../ui/js-framework-file.md)章节\)。 - 不支持设置多个src。 diff --git a/zh-cn/application-dev/reference/arkui-js/js-components-common-events.md b/zh-cn/application-dev/reference/arkui-js/js-components-common-events.md index 10f52594e1d6290e65c522e7a08e5c5778933798..f9785b87538b334c871545af7739257f363d2671 100644 --- a/zh-cn/application-dev/reference/arkui-js/js-components-common-events.md +++ b/zh-cn/application-dev/reference/arkui-js/js-components-common-events.md @@ -7,234 +7,232 @@ 相对于私有事件，大部分组件都可以绑定如下事件。 - -

名称

类型

+

类型

默认值

+

默认值

描述

+

描述

for

+

for

Array

+

Array

-

+

-

根据设置的数据列表，展开当前元素。

+

根据设置的数据列表，展开当前元素。

if

+

if

boolean

+

boolean

-

+

-

根据设置的boolean值，添加或移除当前元素。

+

根据设置的boolean值，添加或移除当前元素。

show

+

show

boolean

+

boolean

-

+

-

根据设置的boolean值，显示或隐藏当前元素。

+

根据设置的boolean值，显示或隐藏当前元素。

名称

+ - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - -

名称

参数

+

参数

描述

+

描述

是否支持冒泡

+

是否支持冒泡

touchstart

+

touchstart

TouchEvent

+

TouchEvent

手指刚触摸屏幕时触发该事件。

+

手指刚触摸屏幕时触发该事件。

是5+

+

是5+

touchmove

+

touchmove

TouchEvent

+

TouchEvent

手指触摸屏幕后移动时触发该事件。

+

手指触摸屏幕后移动时触发该事件。

是5+

+

是5+

touchcancel

+

touchcancel

TouchEvent

+

TouchEvent

手指触摸屏幕中动作被打断时触发该事件。

+

手指触摸屏幕中动作被打断时触发该事件。

是5+

+

是5+

touchend

+

touchend

TouchEvent

+

TouchEvent

手指触摸结束离开屏幕时触发该事件。

+

手指触摸结束离开屏幕时触发该事件。

是5+

+

是5+

click

+

click

-

+

-

点击动作触发该事件。

+

点击动作触发该事件。

是6+

+

是6+

doubleclick7+

+

doubleclick7+

   

双击动作触发该事件

+

双击动作触发该事件

否

+

否

longpress

+

longpress

-

+

-

长按动作触发该事件。

+

长按动作触发该事件。

否

+

否

swipe5+

+

swipe5+

SwipeEvent

+

SwipeEvent

组件上快速滑动后触发该事件。

+

组件上快速滑动后触发该事件。

否

+

否

attached6+

+

attached6+

-

+

-

当前组件节点挂载在渲染树后触发。

+

当前组件节点挂载在渲染树后触发。

否

+

否

detached6+

+

detached6+

-

+

-

当前组件节点从渲染树中移除后触发。

+

当前组件节点从渲染树中移除后触发。

否

+

否

pinchstart7+

+

pinchstart7+

PinchEvent

+

PinchEvent

手指开始执行捏合操作时触发该事件。

+

手指开始执行捏合操作时触发该事件。

否

+

否

pinchupdate7+

+

pinchupdate7+

PinchEvent

+

PinchEvent

手指执行捏合操作过程中触发该事件。

+

手指执行捏合操作过程中触发该事件。

否

+

否

pinchend7+

+

pinchend7+

PinchEvent

+

PinchEvent

手指捏合操作结束离开屏幕时触发该事件。

+

手指捏合操作结束离开屏幕时触发该事件。

否

+

否

pinchcancel7+

+

pinchcancel7+

PinchEvent

+

PinchEvent

手指捏合操作被打断时触发该事件。

+

手指捏合操作被打断时触发该事件。

否

+

否

dragstart7+

+

dragstart7+

DragEvent

+

DragEvent

用户开始拖拽时触发该事件。

+

用户开始拖拽时触发该事件。

否

+

否

drag7+

+

drag7+

DragEvent

+

DragEvent

拖拽过程中触发该事件。

+

拖拽过程中触发该事件。

否

+

否

dragend7+

+

dragend7+

DragEvent

+

DragEvent

用户拖拽完成后触发。

+

用户拖拽完成后触发。

否

+

否

dragenter7+

+

dragenter7+

DragEvent

+

DragEvent

进入释放目标时触发该事件。

+

进入释放目标时触发该事件。

否

+

否

dragover7+

+

dragover7+

DragEvent

+

DragEvent

在释放目标内拖动时触发。

+

在释放目标内拖动时触发。

否

+

否

dragleave7+

+

dragleave7+

DragEvent

+

DragEvent

离开释放目标区域时触发。

+

离开释放目标区域时触发。

否

+

否

drop7+

+

drop7+

DragEvent

+

DragEvent

在可释放目标区域内释放时触发。

+

在可释放目标区域内释放时触发。

否

+

否
>![](../../public_sys-resources/icon-note.gif) **说明：** ->- 除上述事件外，其他事件均为非冒泡事件，如[input的change事件](js-components-basic-input.md#section1721512551218)，详见各个组件。 +>除上述事件外，其他事件均为非冒泡事件，如[input的change事件](js-components-basic-input.md#section1721512551218)，详见各个组件。 **表 1** BaseEvent对象属性列表 - -

属性

+ - - - - - - - - @@ -243,26 +241,26 @@ **表 2** TouchEvent对象属性列表\(继承BaseEvent\) -

属性

类型

+

类型

说明

+

说明

type

+

type

string

+

string

当前事件的类型，比如click、longpress等。

+

当前事件的类型，比如click、longpress等。

timestamp

+

timestamp

number

+

number

该事件触发时的时间戳。

+

该事件触发时的时间戳。

属性

+ - - - - - - - - @@ -270,55 +268,54 @@ **表 3** TouchInfo - -

属性

类型

+

类型

说明

+

说明

touches

+

touches

Array<TouchInfo>

+

Array<TouchInfo>

触摸事件时的属性集合，包含屏幕触摸点的信息数组。

+

触摸事件时的属性集合，包含屏幕触摸点的信息数组。

changedTouches

+

changedTouches

Array<TouchInfo>

+

Array<TouchInfo>

触摸事件时的属性集合，包括产生变化的屏幕触摸点的信息数组。数据格式和touches一样。该属性表示有变化的触摸点，如从无变有，位置变化，从有变无。例如用户手指刚接触屏幕时，touches数组中有数据，但changedTouches无数据。

+

触摸事件时的属性集合，包括产生变化的屏幕触摸点的信息数组。数据格式和touches一样。该属性表示有变化的触摸点，如从无变有，位置变化，从有变无。例如用户手指刚接触屏幕时，touches数组中有数据，但changedTouches无数据。

属性

+ - - - - - - - - - - - - - - - - - - - - @@ -327,27 +324,27 @@ **表 4** SwipeEvent 基础事件对象属性列表（继承BaseEvent） -

属性

类型

+

类型

说明

+

说明

globalX

+

globalX

number

+

number

距离屏幕左上角（不包括状态栏）横向距离。屏幕的左上角为原点。

+

距离屏幕左上角（不包括状态栏）横向距离。屏幕的左上角为原点。

globalY

+

globalY

number

+

number

距离屏幕左上角（不包括状态栏）纵向距离。屏幕的左上角为原点。

+

距离屏幕左上角（不包括状态栏）纵向距离。屏幕的左上角为原点。

localX

+

localX

number

+

number

距离被触摸组件左上角横向距离。组件的左上角为原点。

+

距离被触摸组件左上角横向距离。组件的左上角为原点。

localY

+

localY

number

+

number

距离被触摸组件左上角纵向距离。组件的左上角为原点。

+

距离被触摸组件左上角纵向距离。组件的左上角为原点。

size

+

size

number

+

number

触摸接触面积。

+

触摸接触面积。

force6+

+

force6+

number

+

number

接触力信息。

+

接触力信息。

属性

+ - - - - - - - - @@ -356,33 +353,33 @@ **表 5** PinchEvent 对象属性列表7+ -

属性

类型

+

类型

说明

+

说明

direction

+

direction

string

+

string

滑动方向，可能值有：

-
  1. left：向左滑动；
  2. right：向右滑动；
  3. up：向上滑动；
  4. down：向下滑动。
+

滑动方向，可能值有：

+
  1. left：向左滑动；
  2. right：向右滑动；
  3. up：向上滑动；
  4. down：向下滑动。

distance6+

+

distance6+

number

+

number

在滑动方向上的滑动距离。

+

在滑动方向上的滑动距离。

属性

+ - - - - - - - - - - - @@ -391,40 +388,40 @@ **表 6** DragEvent对象属性列表\(继承BaseEvent\)7+ -

属性

类型

+

类型

说明

+

说明

scale

+

scale

number

+

number

缩放比例

+

缩放比例

pinchCenterX

+

pinchCenterX

number

+

number

捏合中心点X轴坐标，单位px

+

捏合中心点X轴坐标，单位px

pinchCenterY

+

pinchCenterY

number

+

number

捏合中心点Y轴坐标，单位px

+

捏合中心点Y轴坐标，单位px

属性

+ - - - - - - - - - - - - - - @@ -436,20 +433,19 @@ **target对象：** - -

属性

类型

+

类型

说明

+

说明

type

+

type

string

+

string

事件名称。

+

事件名称。

globalX

+

globalX

number

+

number

距离屏幕左上角坐标原点横向距离。

+

距离屏幕左上角坐标原点横向距离。

globalY

+

globalY

number

+

number

距离屏幕左上角坐标原点纵向距离。

+

距离屏幕左上角坐标原点纵向距离。

timestamp

+

timestamp

number

+

number

时间戳。

+

时间戳。

属性

+ - - - - - diff --git a/zh-cn/application-dev/reference/arkui-js/js-components-common-gradient.md b/zh-cn/application-dev/reference/arkui-js/js-components-common-gradient.md index d93a609f0a40140cba95c6d42c965f009304648d..9be8919e811899dbd404787581793fba45824400 100644 --- a/zh-cn/application-dev/reference/arkui-js/js-components-common-gradient.md +++ b/zh-cn/application-dev/reference/arkui-js/js-components-common-gradient.md @@ -8,65 +8,68 @@ 使用渐变样式，需要定义过渡方向和过渡颜色。 -1. 过渡方向：通过direction或者angle指定： +### 过渡方向 - - direction：进行方向渐变。 - - angle：进行角度渐变。 +通过direction或者angle指定过渡方向。 - ``` - background: linear-gradient(direction/angle, color, color, ...); - background: repeating-linear-gradient(direction/angle, color, color, ...); - ``` +- direction：进行方向渐变。 +- angle：进行角度渐变。 + +``` +background: linear-gradient(direction/angle, color, color, ...); +background: repeating-linear-gradient(direction/angle, color, color, ...); +``` -2. 过渡颜色：支持以下四种方式：\#ff0000、\#ffff0000、rgb\(255, 0, 0\)、rgba\(255, 0, 0, 1\)。需要指定至少两种颜色。 +### 过渡颜色 + +支持以下四种方式：\#ff0000、\#ffff0000、rgb\(255, 0, 0\)、rgba\(255, 0, 0, 1\)，需要指定至少两种颜色。 - 参数 - -

属性

类型

+

类型

说明

+

说明

dataSet6+

+

dataSet6+

Object

+

Object

组件上通过通用属性设置的data-*的自定义属性组成的集合。

+

组件上通过通用属性设置的data-*的自定义属性组成的集合。

名称

+ - - - - - - - - - - - - - - - - - - - @@ -74,43 +77,44 @@ - 示例 + 1. 默认渐变方向为从上向下渐变 + ``` #gradient { height: 300px; width: 600px; + /* 从顶部开始向底部由红色向绿色渐变 */ + background: linear-gradient(red, #00ff00); } ``` - **图 1** 默认渐变方向为从上向下渐变 - ![](figures/默认渐变方向为从上向下渐变.png "默认渐变方向为从上向下渐变") + ![](figures/111.png) - ``` - /* 从顶部开始向底部由红色向绿色渐变 */ - background: linear-gradient(red, #00ff00); - ``` - - **图 2** 45度夹角渐变 - ![](figures/45度夹角渐变.png "45度夹角渐变") + 2. 45度夹角渐变 ``` - /* 45度夹角，从红色渐变到绿色 */ - background: linear-gradient(45deg, rgb(255,0,0),rgb(0, 255, 0)); + /* 45度夹角，从红色渐变到绿色 */ + background: linear-gradient(45deg, rgb(255,0,0),rgb(0, 255, 0)); ``` - **图 3** 设置方向为to right为从左向右渐变 - ![](figures/设置方向为to-right为从左向右渐变.png "设置方向为to-right为从左向右渐变") + ![](figures/222.png) + + 3. 设置方向从左向右渐变 ``` /* 从左向右渐变，在距离左边90px和距离左边360px (600*0.6) 之间270px宽度形成渐变 */ background: linear-gradient(to right, rgb(255,0,0) 90px, rgb(0, 255, 0) 60%); ``` - **图 4** 从左向右渐变，重复渐变 - ![](figures/从左向右渐变-重复渐变.png "从左向右渐变-重复渐变") + ![](figures/333.png) + + 4. 重复渐变 ``` /* 从左向右重复渐变，重复渐变区域30px（60-30）透明度0.5 */ background: repeating-linear-gradient(to right, rgba(255, 255, 0, 1) 30px,rgba(0, 0, 255, .5) 60px); ``` + ![](figures/444.png) + diff --git a/zh-cn/application-dev/reference/arkui-js/js-components-common-mediaquery.md b/zh-cn/application-dev/reference/arkui-js/js-components-common-mediaquery.md index 1deb5c073a56773141af25ce672b8cee61b6c0bc..03af94ebe404f762f9ce9adff1b99df492ac9aa0 100644 --- a/zh-cn/application-dev/reference/arkui-js/js-components-common-mediaquery.md +++ b/zh-cn/application-dev/reference/arkui-js/js-components-common-mediaquery.md @@ -1,13 +1,13 @@ # 媒体查询 +>![](../../public_sys-resources/icon-note.gif) **说明：** +>- media属性值默认为设备的真实尺寸大小、物理像素和真实的屏幕分辨率。请勿与以720px为基准的项目配置宽度px混淆。 + 媒体查询（Media Query）在移动设备上应用十分广泛，开发者经常需要根据设备的大致类型或者特定的特征和设备参数（例如屏幕分辨率）来修改应用的样式。为此媒体查询提供了如下功能： 1. 针对设备和应用的属性信息，可以设计出相匹配的布局样式。 2. 当屏幕发生动态改变时（比如分屏、横竖屏切换），应用页面布局同步更新。 ->![](../../public_sys-resources/icon-note.gif) **说明：** ->media属性值默认为设备的真实尺寸大小、物理像素和真实的屏幕分辨率。请勿与以720px为基准的项目配置宽度px混淆。 - ## CSS语法规则 使用@media来引入查询语句，具体规则如下： @@ -44,16 +44,15 @@ ## 媒体类型 - -

名称

类型

+

类型

默认值

+

默认值

必填

+

必填

描述

+

描述

direction

+

direction

to <side-or-corner> <side-or-corner> = [left | right] || [top | bottom]

+

to <side-or-corner> <side-or-corner> = [left | right] || [top | bottom]

to bottom (由上到下渐变)

+

to bottom (由上到下渐变)

否

+

否

指定过渡方向，如：to left (从右向左渐变) ；或者

-

to bottom right (从左上角到右下角)。

+

指定过渡方向，如：to left (从右向左渐变) ；或者

+

to bottom right (从左上角到右下角)。

angle

+

angle

<deg>

+

<deg>

180deg

+

180deg

否

+

否

指定过渡方向，以元素几何中心为坐标原点，水平方向为X轴，angle指定了渐变线与Y轴的夹角(顺时针方向)。

+

指定过渡方向，以元素几何中心为坐标原点，水平方向为X轴，angle指定了渐变线与Y轴的夹角(顺时针方向)。

color

+

color

<color> [<length>|<percentage>]

+

<color> [<length>|<percentage>]

-

+

-

是

+

是

定义使用渐变样式区域内颜色的渐变效果。

+

定义使用渐变样式区域内颜色的渐变效果。

类型

+ - - - @@ -65,46 +64,45 @@ **表 1** 媒体逻辑操作符 - -

类型

说明

+

说明

screen

+

screen

按屏幕相关参数进行媒体查询。

+

按屏幕相关参数进行媒体查询。

类型

+ - - - - - - - - - - - @@ -114,31 +112,30 @@ **表 2** 媒体逻辑范围操作符 - -

类型

说明

+

说明

and

+

and

将多个媒体特征（Media Feature）以“与”的方式连接成一个媒体查询，只有当所有媒体特征都为true，查询条件成立。另外，它还可以将媒体类型和媒体功能结合起来。

-

例如：screen and (device-type: wearable) and (max-height: 600) 表示当设备类型是智能穿戴同时应用的最大高度小于等于600个像素单位时成立。

+

将多个媒体特征（Media Feature）以“与”的方式连接成一个媒体查询，只有当所有媒体特征都为true，查询条件成立。另外，它还可以将媒体类型和媒体功能结合起来。

+

例如：screen and (device-type: wearable) and (max-height: 600) 表示当设备类型是智能穿戴同时应用的最大高度小于等于600个像素单位时成立。

not

+

not

取反媒体查询结果，媒体查询结果不成立时返回true，否则返回false。在媒体查询列表中应用not，则not仅取反应用它的媒体查询。

-

例如：not screen and (min-height: 50) and (max-height: 600) 表示当应用高度小于50个像素单位或者大于600个像素单位时成立。

-
说明：

使用not运算符时必须指定媒体类型。

+

取反媒体查询结果，媒体查询结果不成立时返回true，否则返回false。在媒体查询列表中应用not，则not仅取反应用它的媒体查询。

+

例如：not screen and (min-height: 50) and (max-height: 600) 表示当应用高度小于50个像素单位或者大于600个像素单位时成立。

+
说明：

使用not运算符时必须指定媒体类型。

only

+

only

当整个表达式都匹配时，才会应用选择的样式，可以应用在防止某些较早的版本的浏览器上产生歧义的场景。一些较早版本的浏览器对于同时包含了媒体类型和媒体特征的语句会产生歧义，比如：

-

screen and (min-height: 50)

-

老版本浏览器会将这句话理解成screen，从而导致仅仅匹配到媒体类型（screen），就应用了指定样式，使用only可以很好地规避这种情况。

-
说明：

使用only时必须指定媒体类型。

+

当整个表达式都匹配时，才会应用选择的样式，可以应用在防止某些较早的版本的浏览器上产生歧义的场景。一些较早版本的浏览器对于同时包含了媒体类型和媒体特征的语句会产生歧义，比如：

+

screen and (min-height: 50)

+

老版本浏览器会将这句话理解成screen，从而导致仅仅匹配到媒体类型（screen），就应用了指定样式，使用only可以很好地规避这种情况。

+
说明：

使用only时必须指定媒体类型。

,(comma)

+

,(comma)

将多个媒体特征以“或”的方式连接成一个媒体查询，如果存在结果为true的媒体特征，则查询条件成立。其效果等同于or运算符。

-

例如：screen and (min-height: 1000), （round-screen：true） 表示当应用高度大于等于1000个像素单位或者设备屏幕是圆形时，条件成立。

+

将多个媒体特征以“或”的方式连接成一个媒体查询，如果存在结果为true的媒体特征，则查询条件成立。其效果等同于or运算符。

+

例如：screen and (min-height: 1000), （round-screen：true） 表示当应用高度大于等于1000个像素单位或者设备屏幕是圆形时，条件成立。

or

+

or

将多个媒体特征以“或”的方式连接成一个媒体查询，如果存在结果为true的媒体特征，则查询条件成立。

-

例如：screen and (max-height: 1000) or （round-screen：true）表示当应用高度小于等于1000个像素单位或者设备屏幕是圆形时，条件成立。

+

将多个媒体特征以“或”的方式连接成一个媒体查询，如果存在结果为true的媒体特征，则查询条件成立。

+

例如：screen and (max-height: 1000) or （round-screen：true）表示当应用高度小于等于1000个像素单位或者设备屏幕是圆形时，条件成立。

类型

+ - - - - - - - - - @@ -146,120 +143,119 @@ ## 媒体特征 - -

类型

说明

+

说明

<=

+

<=

小于等于，例如：screen and (50 <= height)。

+

小于等于，例如：screen and (height <= 50)。

>=

+

>=

大于等于，例如：screen and (600 >= height)。

+

大于等于，例如：screen and (height >= 600)。

<

+

<

小于，例如：screen and (50 < height)。

+

小于，例如：screen and (height < 50)。

>

+

>

大于，例如：screen and (600 > height)。

+

大于，例如：screen and (height > 600)。

类型

+ - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - diff --git a/zh-cn/application-dev/reference/arkui-js/js-components-common-methods.md b/zh-cn/application-dev/reference/arkui-js/js-components-common-methods.md index 39d327372ca8ef7061b30055bae26988fc1e409c..5f952ef01d0d64bcd74c069f53eeb800b9ce28dc 100644 --- a/zh-cn/application-dev/reference/arkui-js/js-components-common-methods.md +++ b/zh-cn/application-dev/reference/arkui-js/js-components-common-methods.md @@ -2,537 +2,427 @@ 当组件通过id属性标识后，可以使用该id获取组件对象并调用相关组件方法。 - -

类型

说明

+

说明

height

+

height

应用页面显示区域的高度。

+

应用页面显示区域的高度。

min-height

+

min-height

应用页面显示区域的最小高度。

+

应用页面显示区域的最小高度。

max-height

+

max-height

应用页面显示区域的最大高度。

+

应用页面显示区域的最大高度。

width

+

width

应用页面显示区域的宽度。

+

应用页面显示区域的宽度。

min-width

+

min-width

应用页面显示区域的最小宽度。

+

应用页面显示区域的最小宽度。

max-width

+

max-width

应用页面显示区域的最大宽度。

+

应用页面显示区域的最大宽度。

resolution

+

resolution

设备的分辨率，支持dpi，dppx和dpcm单位。其中：

-
  • dpi表示每英寸中物理像素个数，1dpi≈0.39dpcm；
  • dpcm表示每厘米上的物理像素个数，1dpcm ≈ 2.54dpi；
  • dppx表示每个px中的物理像素数（此单位按96px=1英寸为基准，与页面中的px单位计算方式不同），1dppx = 96dpi。
+

设备的分辨率，支持dpi，dppx和dpcm单位。其中：

+
  • dpi表示每英寸中物理像素个数，1dpi≈0.39dpcm；
  • dpcm表示每厘米上的物理像素个数，1dpcm ≈ 2.54dpi；
  • dppx表示每个px中的物理像素数（此单位按96px=1英寸为基准，与页面中的px单位计算方式不同），1dppx = 96dpi。

min-resolution

+

min-resolution

设备的最小分辨率。

+

设备的最小分辨率。

max-resolution

+

max-resolution

设备的最大分辨率。

+

设备的最大分辨率。

orientation

+

orientation

屏幕的方向。

-

可选值：

-
  • orientation: portrait（设备竖屏）
  • orientation: landscape（设备横屏）
+

屏幕的方向。

+

可选值：

+
  • orientation: portrait（设备竖屏）
  • orientation: landscape（设备横屏）

aspect-ratio

+

aspect-ratio

应用页面显示区域的宽度与高度的比值。

-

例如：aspect-ratio:1/2

+

应用页面显示区域的宽度与高度的比值。

+

例如：aspect-ratio:1/2

min-aspect-ratio

+

min-aspect-ratio

应用页面显示区域的宽度与高度的最小比值。

+

应用页面显示区域的宽度与高度的最小比值。

max-aspect-ratio

+

max-aspect-ratio

应用页面显示区域的宽度与高度的最大比值。

+

应用页面显示区域的宽度与高度的最大比值。

device-height

+

device-height

设备的高度。

+

设备的高度。

min-device-height

+

min-device-height

设备的最小高度。

+

设备的最小高度。

max-device-height

+

max-device-height

设备的最大高度。

+

设备的最大高度。

device-width

+

device-width

设备的宽度。

+

设备的宽度。

min-device-width

+

min-device-width

设备的最小宽度。

+

设备的最小宽度。

max-device-width

+

max-device-width

设备的最大宽度。

+

设备的最大宽度。

round-screen

+

round-screen

屏幕类型，圆形屏幕为true， 非圆形屏幕为 false。

+

屏幕类型，圆形屏幕为true， 非圆形屏幕为 false。

dark-mode6+

+

dark-mode6+

系统为深色模式时为true，否则为false。

+

系统为深色模式时为true，否则为false。
- - - - - - - - - - - - - - - - - - - - - - - - - -

名称

-

参数

-

必填

-

返回值

-

描述

-

animate

-

-

keyframes: Keyframes, options: Options

-

是

-

-

-

在组件上创建和运行动画的快捷方式。输入动画所需的keyframes和options，返回animation对象实例。

-

getBoundingClientRect6+

-

-

-

-

-

Rect

-

获取元素的大小及其相对于窗口的位置。

-

createIntersectionObserver6+

-

ObserverParam

-		  

Observer

-

返回Observer对象，用于监听组件在当前页面的变化。

-
- -**表 1** Rect对象说明6+ - - - - - - - - - - - - - - - - - - - - - - - - -

属性

-

类型

-

描述

-

width

-

number

-

该元素的宽度。

-

height

-

number

-

该元素的高度。

-

left

-

number

-

该元素左边界距离窗口的偏移。

-

top

-

number

-

该元素上边界距离窗口的偏移。

-
- -**表 2** ObserverParam对象说明6+ - - - - - - - - - - - - -

属性

-

类型

-

描述

-

ratios

-

Array<number>

-

组件超出或小于范围时触发observer的回调。

-
- -**表 3** Observer对象支持的方法6+ - - - - - - - - - - - - - - - - -

方法

-

参数

-

描述

-

observe

-

callback: function

-

开启observer的订阅方法。超出或小于阈值时触发callback。

-

unobserve

-		  

取消observer的订阅方法。

-
- -## this.$element\('_id_'\).animate\(Object, Object\) - -通过animate\(keyframes: Keyframes, options: Options\)方法获得animation对象。该对象支持动画属性，动画方法和动画事件。重复多次调用animate方法时，采用replace策略，最后一次调用时传入的参数生效。 - -**表 4** Keyframes - - - - - - - - - - - - -

参数

-

类型

-

说明

-

frames

-

Array<Style>

-

用于设置动画样式属性的对象列表。Style类型说明请见表1 Style类型说明。

-
- -**表 5** Style类型说明 - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - -

参数

-

类型

-

默认值

-

说明

-

width

-

number

-

-

-

动画执行过程中设置到组件上的宽度值。

-

height

-

number

-

-

-

动画执行过程中设置到组件上的高度值。

-

backgroundColor

-

<color>

-

none

-

动画执行过程中设置到组件上的背景颜色。

-

opacity

-

number

-

1

-

设置到组件上的透明度（介于0到1之间）。

-

backgroundPosition

-

string

-

-

-

格式为"x y"，单位为百分号或者px。

-

第一个值是水平位置，第二个值是垂直位置。

-

如果仅规定了一个值，另一个值为 50%。

-

transformOrigin

-

string

-

'center center'

-

变换对象的中心点。

-

第一个参数表示x轴的值，可以设置为left、center、right、长度值或百分比值。

-

第二个参数表示y轴的值，可以设置为top、center、bottom、长度值或百分比值。

-

transform

-

Transform

-

-

-

设置到变换对象上的类型。

-

offset

-

number

-

-

-
  • offset值（如果提供）必须在0.0到1.0（含）之间，并以升序排列。
  • 若只有两帧，可以不填offset。
  • 若超过两帧，offset必填。
-
- -**表 6** Options - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - -

参数

-

类型

-

默认值

-

说明

-

duration

-

number

-

0

-

指定当前动画的运行时长（单位毫秒）。

-

easing

-

string

-

linear

-

描述动画的时间曲线，支持类型见表3 easing有效值说明。

-

delay

-

number

-

0

-

设置动画执行的延迟时间（默认值表示无延迟）。

-

iterations

-

number | string

-

1

-

设置动画执行的次数。number表示固定次数，Infinity枚举表示无限次数播放。

-

direction6+

-

string

-

normal

-

指定动画的播放模式：

-

normal： 动画正向循环播放；

-

reverse： 动画反向循环播放；

-

alternate：动画交替循环播放，奇数次正向播放，偶数次反向播放；

-

alternate-reverse：动画反向交替循环播放，奇数次反向播放，偶数次正向播放。

-

fill

-

string

-

none

-

指定动画开始和结束的状态：

-

none：在动画执行之前和之后都不会应用任何样式到目标上。

-

forwards：在动画结束后，目标将保留动画结束时的状态（在最后一个关键帧中定义）。

-

backwards6+：动画将在animation-delay期间应用第一个关键帧中定义的值。当animation-direction为"normal"或"alternate"时应用from关键帧中的值，当animation-direction为"reverse"或"alternate-reverse"时应用to关键帧中的值。

-

both6+：动画将遵循forwards和backwards的规则，从而在两个方向上扩展动画属性。

-
- -**表 7** easing有效值说明 - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - -

值

-

描述

-

linear

-

动画线性变化。

-

ease-in

-

动画速度先慢后快，cubic-bezier(0.42, 0.0, 1.0, 1.0)。

-

ease-out

-

动画速度先快后慢，cubic-bezier(0.0, 0.0, 0.58, 1.0)。

-

ease-in-out

-

动画先加速后减速，cubic-bezier(0.42, 0.0, 0.58, 1.0)。

-

friction

-

阻尼曲线，cubic-bezier(0.2, 0.0, 0.2, 1.0)。

-

extreme-deceleration

-

急缓曲线，cubic-bezier(0.0, 0.0, 0.0, 1.0)。

-

sharp

-

锐利曲线，cubic-bezier(0.33, 0.0, 0.67, 1.0)。

-

rhythm

-

节奏曲线，cubic-bezier(0.7, 0.0, 0.2, 1.0)。

-

smooth

-

平滑曲线，cubic-bezier(0.4, 0.0, 0.4, 1.0)。

-

cubic-bezier(x1, y1, x2, y2)

-

在三次贝塞尔函数中定义动画变化过程，入参的x和y值必须处于0-1之间。

-

steps(number, step-position)6+

-

Step曲线。

-

number必须设置，支持的类型为int。

-

step-position参数可选，支持设置start或end，默认值为end。

-
- -- 返回值说明 - - animation对象支持的属性： - - - - -

属性

-

类型

-

说明

+## animate + +animate\( keyframes: Keyframes, options: Options\)：void + +- 参数 + + + + + - + + - - + + + + - +

参数名

+

参数类型

+

必填

+

描述

finished

+

keyframes

+

keyframes

+

是

boolean

+

设置动画样式

只读，用于表示当前动画是否已播放完成。

+

options

+

Options

+

是

+

用于设置动画属性的对象列表。options请见Options说明

pending

+
+ + **表 1** keyframes + + + + + + + + + + + + +

属性

+

类型

+

说明

+

frames

+

Array<Style>

+

用于设置动画样式的对象列表。Style类型说明请见Style类型说明

+
+ + **表 2** Style类型说明 + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + - - - - - + - + - -

参数

+

类型

+

默认值

+

说明

+

width

+

number

+

-

+

动画执行过程中设置到组件上的宽度值。

+

height

+

number

+

-

+

动画执行过程中设置到组件上的高度值。

+

backgroundColor

+

<color>

+

none

+

动画执行过程中设置到组件上的背景颜色。

+

opacity

+

number

+

1

+

设置到组件上的透明度（介于0到1之间）。

+

backgroundPosition

+

string

+

-

+

格式为"x y"，单位为百分号或者px。

+

第一个值是水平位置，第二个值是垂直位置。

+

如果仅规定了一个值，另一个值为 50%。

+

transformOrigin

+

string

boolean

+

'center center'

只读，用于表示当前动画是否处于等待其他异步操作完成的等待状态（例如启动一个延时播放的动画）。

+

变换对象的中心点。

+

第一个参数表示x轴的值，可以设置为left、center、right、长度值或百分比值。

+

第二个参数表示y轴的值，可以设置为top、center、bottom、长度值或百分比值。

playState

+

transform

string

+

Transform

可读可写，动画的执行状态：

-
  • idle：未执行状态，包括已结束或未开始。
  • running：动画正在运行。
  • paused：动画暂停。
  • finished：动画播放完成。
+

-

+

设置到变换对象上的类型。

startTime

+

offset

+

number

number

+

-

可读可写，动画播放开始的预定时间，用途类似于options参数中的delay。

+
  • offset值（如果提供）必须在0.0到1.0（含）之间，并以升序排列。
  • 若只有两帧，可以不填offset。
  • 若超过两帧，offset必填。
- animation对象支持的方法： + **表 3** Options说明 - -

方法

+ + - - + - + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + +

参数

参数

+

类型

说明

+

默认值

+

说明

play

+

duration

+

number

+

0

+

指定当前动画的运行时长（单位毫秒）。

+

easing

+

string

+

linear

+

描述动画的时间曲线，支持类型见easing有效值说明。

+

delay

+

number

+

0

+

设置动画执行的延迟时间（默认值表示无延迟）。

+

iterations

+

number | string

+

1

+

设置动画执行的次数。number表示固定次数，Infinity枚举表示无限次数播放。

+

direction6+

+

string

+

normal

+

指定动画的播放模式：

+

normal： 动画正向循环播放；

+

reverse： 动画反向循环播放；

+

alternate：动画交替循环播放，奇数次正向播放，偶数次反向播放；

+

alternate-reverse：动画反向交替循环播放，奇数次反向播放，偶数次正向播放。

+

fill

+

string

+

none

+

指定动画开始和结束的状态：

+

none：在动画执行之前和之后都不会应用任何样式到目标上。

+

forwards：在动画结束后，目标将保留动画结束时的状态（在最后一个关键帧中定义）。

+

backwards6+：动画将在animation-delay期间应用第一个关键帧中定义的值。当animation-direction为"normal"或"alternate"时应用from关键帧中的值，当animation-direction为"reverse"或"alternate-reverse"时应用to关键帧中的值。

+

both6+：动画将遵循forwards和backwards的规则，从而在两个方向上扩展动画属性。

+
+ + **表 4** easing有效值说明 + + + + + + + + + + + + + + + + + + + + + + + + + + + + + - + - - + - + - - +

值

+

描述

+

linear

+

动画线性变化。

+

ease-in

+

动画速度先慢后快，cubic-bezier(0.42, 0.0, 1.0, 1.0)。

+

ease-out

+

动画速度先快后慢，cubic-bezier(0.0, 0.0, 0.58, 1.0)。

+

ease-in-out

+

动画先加速后减速，cubic-bezier(0.42, 0.0, 0.58, 1.0)。

+

friction

+

阻尼曲线，cubic-bezier(0.2, 0.0, 0.2, 1.0)。

+

extreme-deceleration

+

急缓曲线，cubic-bezier(0.0, 0.0, 0.0, 1.0)。

+

sharp

+

锐利曲线，cubic-bezier(0.33, 0.0, 0.67, 1.0)。

+

rhythm

+

节奏曲线，cubic-bezier(0.7, 0.0, 0.2, 1.0)。

-

+

smooth

组件播放动画。

+

平滑曲线，cubic-bezier(0.4, 0.0, 0.4, 1.0)。

finish

+

cubic-bezier(x1, y1, x2, y2)

+

在三次贝塞尔函数中定义动画变化过程，入参的x和y值必须处于0-1之间。

-

+

steps(number, step-position)6+

组件完成动画。

+

Step曲线。

+

number必须设置，支持的类型为int。

+

step-position参数可选，支持设置start或end，默认值为end。

pause

+
+ +- 返回值 + + animation对象属性： + + + + + + + - - - - - - - - + + + +

属性

+

类型

+

说明

+

finished

-

+

boolean

组件暂停动画。

+

只读，用于表示当前动画是否已播放完成。

cancel

+

pending

-

+

boolean

组件取消动画。

+

只读，用于表示当前动画是否处于等待其他异步操作完成的等待状态（例如启动一个延时播放的动画）。

reverse

+

playState

-

+

string

组件倒播动画。

+

可读可写，动画的执行状态：

+
  • idle：未执行状态，包括已结束或未开始。
  • running：动画正在运行。
  • paused：动画暂停。
  • finished：动画播放完成。
+

startTime

+

number

+

可读可写，动画播放开始的预定时间，用途类似于options参数中的delay。
- animation对象支持的事件： + animation对象方法： - -

事件

+ + - - - + - + - - - + - + - + + + +

方法

+

参数

说明

+

说明

start6+

+

play

动画开始事件。

+

-

+

组件播放动画。

cancel

+

finish

+

-

动画被强制取消。

+

组件完成动画。

finish

+

pause

动画播放完成。

+

-

+

组件暂停动画。

repeat

+

cancel

+

-

动画重播事件。

+

组件取消动画。

+

reverse

+

-

+

组件倒播动画。
+ animation对象事件： -- 示例代码： + + + + + + + + + + + + + + + + + +

事件

+

说明

+

start6+

+

动画开始事件。

+

cancel

+

动画被强制取消。

+

finish

+

动画播放完成。

+

repeat

+

动画重播事件。

+
+ +- 示例 ``` @@ -631,10 +521,56 @@ ![](figures/AnimationAPI裁剪.gif) -## this.$element\('_id_'\).getBoundingClientRect\(\)6+ +## getBoundingClientRect + +getBoundingClientRect\(\): [ ](#table1650917111414) 获取元素的大小及其相对于窗口的位置。 +- 返回值 + + **表 5** Rect对象说明6+ + + + + + + + + + + + + + + + + + + + + + + + + +

属性

+

类型

+

描述

+

width

+

number

+

该元素的宽度。

+

height

+

number

+

该元素的高度。

+

left

+

number

+

该元素左边界距离窗口的偏移。

+

top

+

number

+

该元素上边界距离窗口的偏移。

+
+ - 示例 ``` @@ -644,10 +580,87 @@ ``` -## this.$element\('_id_'\).createIntersectionObserver\(\)6+ +## createIntersectionObserver + +createIntersectionObserver\(param?：[ObserverParam](#table143341035121917)\):[Observer](#table4506633141711) 监听元素在当前页面的可见范围。 +- 参数 + + + + + + + + + + + + + +

参数名

+

参数类型

+

必填

+

描述

+

param

+

ObserverParam

+

-

+

获取observer的回调。

+
+ + **表 6** ObserverParam对象说明6+ + + + + + + + + + + + + +

属性

+

类型

+

描述

+

ratios

+

Array<number>

+

组件超出或小于范围时触发observer的回调。

+
+ +- 返回值 + + **表 7** Observer对象支持的方法6+ + + + + + + + + + + + + + + + + +

方法

+

参数

+

描述

+

observe

+

callback: function

+

开启observer的订阅方法。超出或小于阈值时触发callback。

+

unobserve

+

-

+

取消observer的订阅方法。

+
+ - 示例 ``` diff --git a/zh-cn/application-dev/reference/arkui-js/js-components-common-styles.md b/zh-cn/application-dev/reference/arkui-js/js-components-common-styles.md index 735f5fdeab6cb607f95ca2b1fa32cf5817b6a5fc..2cc5ed4fc8b0c660bb6caee345ab9a394b472837 100644 --- a/zh-cn/application-dev/reference/arkui-js/js-components-common-styles.md +++ b/zh-cn/application-dev/reference/arkui-js/js-components-common-styles.md @@ -2,620 +2,609 @@ 组件普遍支持的可以在style或css中设置组件外观样式。 - -

名称

+ - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - diff --git a/zh-cn/application-dev/reference/arkui-js/js-components-common-transition.md b/zh-cn/application-dev/reference/arkui-js/js-components-common-transition.md index 890c098562d8cc1b8d501c388f6cd6255f697943..79e69a10709c3e76fb8e710b944060e5504f5f87 100644 --- a/zh-cn/application-dev/reference/arkui-js/js-components-common-transition.md +++ b/zh-cn/application-dev/reference/arkui-js/js-components-common-transition.md @@ -2,93 +2,89 @@ ## 共享元素转场 -**表 1** 共享元素转场属性 +### 属性 - -

名称

类型

+

类型

默认值

+

默认值

描述

+

描述

width

+

width

<length> | <percentage>

+

<length> | <percentage>

-

+

-

设置组件自身的宽度。

-

缺省时使用元素自身内容需要的宽度。

+

设置组件自身的宽度。

+

缺省时使用元素自身内容需要的宽度。

height

+

height

<length> | <percentage>

+

<length> | <percentage>

-

+

-

设置组件自身的高度。

-

缺省时使用元素自身内容需要的高度。

+

设置组件自身的高度。

+

缺省时使用元素自身内容需要的高度。

min-width5+

+

min-width5+

<length> | <percentage>6+

+

<length> | <percentage>6+

0

+

0

设置元素的最小宽度。

+

设置元素的最小宽度。

min-height5+

+

min-height5+

<length> | <percentage>6+

+

<length> | <percentage>6+

0

+

0

设置元素的最小高度。

+

设置元素的最小高度。

max-width5+

+

max-width5+

<length> | <percentage>6+

+

<length> | <percentage>6+

-

+

-

设置元素的最大宽度。默认无限制。

+

设置元素的最大宽度。默认无限制。

max-height5+

+

max-height5+

<length> | <percentage>6+

+

<length> | <percentage>6+

-

+

-

设置元素的最大高度。默认无限制。

+

设置元素的最大高度。默认无限制。

padding

+

padding

<length> | <percentage>5+

+

<length> | <percentage>5+

0

+

0

使用简写属性设置所有的内边距属性。

-
该属性可以有1到4个值：

  • 指定一个值时，该值指定四个边的内边距。

    -

  • 指定两个值时，第一个值指定上下两边的内边距，第二个指定左右两边的内边距。

    -

  • 指定三个值时，第一个指定上边的内边距，第二个指定左右两边的内边距，第三个指定下边的内边距。

    -

  • 指定四个值时分别为上、右、下、左边的内边距（顺时针顺序）。

    +

使用简写属性设置所有的内边距属性。

+
该属性可以有1到4个值：

  • 指定一个值时，该值指定四个边的内边距。

    +

  • 指定两个值时，第一个值指定上下两边的内边距，第二个指定左右两边的内边距。

    +

  • 指定三个值时，第一个指定上边的内边距，第二个指定左右两边的内边距，第三个指定下边的内边距。

    +

  • 指定四个值时分别为上、右、下、左边的内边距（顺时针顺序）。

padding-[left|top|right|bottom]

+

padding-[left|top|right|bottom]

<length> | <percentage>5+

+

<length> | <percentage>5+

0

+

0

设置左、上、右、下内边距属性。

+

设置左、上、右、下内边距属性。

padding-[start|end]

+

padding-[start|end]

<length> | <percentage>5+

+

<length> | <percentage>5+

0

+

0

设置起始和末端内边距属性。

+

设置起始和末端内边距属性。

margin

+

margin

<length> | <percentage>5+

+

<length> | <percentage>5+

0

+

0

使用简写属性设置所有的外边距属性，该属性可以有1到4个值。

-

  • 只有一个值时，这个值会被指定给全部的四个边。

    -

  • 两个值时，第一个值被匹配给上和下，第二个值被匹配给左和右。

    -

  • 三个值时，第一个值被匹配给上, 第二个值被匹配给左和右，第三个值被匹配给下。

    -

  • 四个值时，会依次按上、右、下、左的顺序匹配 (即顺时针顺序)。

    +

使用简写属性设置所有的外边距属性，该属性可以有1到4个值。

+

  • 只有一个值时，这个值会被指定给全部的四个边。

    +

  • 两个值时，第一个值被匹配给上和下，第二个值被匹配给左和右。

    +

  • 三个值时，第一个值被匹配给上, 第二个值被匹配给左和右，第三个值被匹配给下。

    +

  • 四个值时，会依次按上、右、下、左的顺序匹配 (即顺时针顺序)。

margin-[left|top|right|bottom]

+

margin-[left|top|right|bottom]

<length> | <percentage>5+

+

<length> | <percentage>5+

0

+

0

设置左、上、右、下外边距属性。

+

设置左、上、右、下外边距属性。

margin-[start|end]

+

margin-[start|end]

<length> | <percentage>5+

+

<length> | <percentage>5+

0

+

0

设置起始和末端外边距属性。

+

设置起始和末端外边距属性。

border

+

border

-

+

-

0

+

0

使用简写属性设置所有的边框属性，包含边框的宽度，样式，颜色属性，顺序设置为border-width、border-style、border-color，不设置时，各属性值为默认值。

+

使用简写属性设置所有的边框属性，包含边框的宽度，样式，颜色属性，顺序设置为border-width、border-style、border-color，不设置时，各属性值为默认值。

border-style

+

border-style

string

+

string

solid

+

solid

使用简写属性设置所有边框的样式，可选值为：

-
  • dotted：显示为一系列圆点，圆点半径为border-width的一半。
  • dashed：显示为一系列短的方形虚线。
-
  • solid：显示为一条实线。
+

使用简写属性设置所有边框的样式，可选值为：

+
  • dotted：显示为一系列圆点，圆点半径为border-width的一半。
  • dashed：显示为一系列短的方形虚线。
+
  • solid：显示为一条实线。

border-[left|top|right|bottom]-style

+

border-[left|top|right|bottom]-style

string

+

string

solid

+

solid

分别设置左、上、右、下四个边框的样式，可选值为dotted、dashed、solid。

+

分别设置左、上、右、下四个边框的样式，可选值为dotted、dashed、solid。

border-[left|top|right|bottom]

+

border-[left|top|right|bottom]

-

+

-

-

+

-

使用简写属性设置对应位置的边框属性，包含边框的宽度，样式，颜色属性，顺序设置为border-width、border-style、border-color，不设置的值为默认值。

+

使用简写属性设置对应位置的边框属性，包含边框的宽度，样式，颜色属性，顺序设置为border-width、border-style、border-color，不设置的值为默认值。

border-width

+

border-width

<length>

+

<length>

0

+

0

使用简写属性设置元素的所有边框宽度，或者单独为各边边框设置宽度。

+

使用简写属性设置元素的所有边框宽度，或者单独为各边边框设置宽度。

border-[left|top|right|bottom]-width

+

border-[left|top|right|bottom]-width

<length>

+

<length>

0

+

0

分别设置左、上、右、下四个边框的宽度。

+

分别设置左、上、右、下四个边框的宽度。

border-color

+

border-color

<color>

+

<color>

black

+

black

使用简写属性设置元素的所有边框颜色，或者单独为各边边框设置颜色。

+

使用简写属性设置元素的所有边框颜色，或者单独为各边边框设置颜色。

border-[left|top|right|bottom]-color

+

border-[left|top|right|bottom]-color

<color>

+

<color>

black

+

black

分别设置左、上、右、下四个边框的颜色。

+

分别设置左、上、右、下四个边框的颜色。

border-radius

+

border-radius

<length>

+

<length>

-

+

-

border-radius属性是设置元素的外边框圆角半径。设置border-radius时不能单独设置某一个方向的border-[left|top|right|bottom]-width，border-[left|top|right|bottom]-color ，border-[left|top|right|bottom]-style，如果要设置color、width和style，需要将四个方向一起设置（border-width、border-color、border-style）。

+

border-radius属性设置元素的外边框圆角半径。设置border-radius时不能单独设置某一个方向的border-[left|top|right|bottom]-width，border-[left|top|right|bottom]-color ，border-[left|top|right|bottom]-style，如果要设置color、width和style，需要将四个方向一起设置（border-width、border-color、border-style）。

+
说明：

顺序为左下、右下、左上和右上。

+

border-[top|bottom]-[left|right]-radius

+

border-[top|bottom]-[left|right]-radius

<length>

+

<length>

-

+

-

分别设置左上，右上，右下和左下四个角的圆角半径。

+

分别设置左上，右上，右下和左下四个角的圆角半径。

background

+

background

<linear-gradient>

+

<linear-gradient>

-

+

-

仅支持设置渐变样式，与background-color、background-image不兼容。

+

仅支持设置渐变样式，与background-color、background-image不兼容。

background-color

+

background-color

<color>

+

<color>

-

+

-

设置背景颜色。

+

设置背景颜色。

background-image

+

background-image

string

+

string

-

+

-

设置背景图片。与background-color、background不兼容，支持网络图片资源和本地图片资源地址。

-

示例：

-
  • background-image: url("/common/background.png")
+

设置背景图片。与background-color、background不兼容，支持本地图片资源地址。

+

示例：

+
  • background-image: url("/common/background.png")
    说明：

    不支持svg格式图片。

    +
    +

background-size

+

background-size

  • string
  • <length> <length>
  • <percentage> <percentage>
+
  • string
  • <length> <length>
  • <percentage> <percentage>

auto

+

auto

设置背景图片的大小。

-
  • string可选值：
    • contain：把图片扩展至最大尺寸，以使其高度和宽度完全适用内容区域。
    • cover：把背景图片扩展至足够大，以使背景图片完全覆盖背景区域；背景图片的某些部分也许无法显示在背景定位区域中。
    • auto：保持原图的比例不变。
    -
  • length值参数方式：

    设置背景图片的高度和宽度。第一个值设置宽度，第二个值设置高度。如果只设置一个值，则第二个值会被设置为 "auto"。

    -
  • 百分比参数方式：

    以父元素的百分比来设置背景图片的宽度和高度。第一个值设置宽度，第二个值设置高度。如果只设置一个值，则第二个值会被设置为 "auto"。

    +

设置背景图片的大小。

+
  • string可选值：
    • contain：把图片扩展至最大尺寸，以使其高度和宽度完全适用内容区域。
    • cover：把背景图片扩展至足够大，以使背景图片完全覆盖背景区域；背景图片的某些部分也许无法显示在背景定位区域中。
    • auto：保持原图的比例不变。
    +
  • length值参数方式：

    设置背景图片的高度和宽度。第一个值设置宽度，第二个值设置高度。如果只设置一个值，则第二个值会被设置为 "auto"。

    +
  • 百分比参数方式：

    以父元素的百分比来设置背景图片的宽度和高度。第一个值设置宽度，第二个值设置高度。如果只设置一个值，则第二个值会被设置为 "auto"。

background-repeat

+

background-repeat

string

+

string

repeat

+

repeat

针对重复背景图片样式进行设置，背景图片默认在水平和垂直方向上重复。

-
  • repeat：在水平轴和竖直轴上同时重复绘制图片。
  • repeat-x：只在水平轴上重复绘制图片。
  • repeat-y：只在竖直轴上重复绘制图片。
  • no-repeat：不会重复绘制图片。
+

针对重复背景图片样式进行设置，背景图片默认在水平和垂直方向上重复。

+
  • repeat：在水平轴和竖直轴上同时重复绘制图片。
  • repeat-x：只在水平轴上重复绘制图片。
  • repeat-y：只在竖直轴上重复绘制图片。
  • no-repeat：不会重复绘制图片。

background-position

+

background-position

  • string string
  • <length> <length>
  • <percentage> <percentage>
+
  • string string
  • <length> <length>
  • <percentage> <percentage>

0px 0px

+

0px 0px

  • 关键词方式：如果仅规定了一个关键词，那么第二个值为"center"。两个值分别定义水平方向位置和竖直方向位置。
    • left：水平方向上最左侧。
    • right：水平方向上最右侧。
    • top：竖直方向上最顶部。
    • bottom：竖直方向上最底部。
    • center：水平方向或竖直方向上中间位置。
    +
  • 关键词方式：如果仅规定了一个关键词，那么第二个值为"center"。两个值分别定义水平方向位置和竖直方向位置。
    • left：水平方向上最左侧。
    • right：水平方向上最右侧。
    • top：竖直方向上最顶部。
    • bottom：竖直方向上最底部。
    • center：水平方向或竖直方向上中间位置。
-
  • length值参数方式：第一个值是水平位置，第二个值是垂直位置。 左上角是 0 0。单位是像素 (0px 0px) 。如果仅规定了一个值，另外一个值将是50%。
  • 百分比参数方式：第一个值是水平位置，第二个值是垂直位置。左上角是 0% 0%。右下角是 100% 100%。如果仅规定了一个值，另外一个值为50%。
  • 可以混合使用<percentage>和<length>。
+
  • length值参数方式：第一个值是水平位置，第二个值是垂直位置。 左上角是 0 0。单位是像素 (0px 0px) 。如果仅规定了一个值，另外一个值将是50%。
  • 百分比参数方式：第一个值是水平位置，第二个值是垂直位置。左上角是 0% 0%。右下角是 100% 100%。如果仅规定了一个值，另外一个值为50%。
  • 可以混合使用<percentage>和<length>。

box-shadow5+

+

box-shadow5+

string

+

string

0

+

0

语法：box-shadow: h-shadow v-shadow blur spread color

-

通过这个样式可以设置当前组件的阴影样式，包括水平位置(必填)、垂直位置(必填)、模糊半径(可选，默认值为0)、阴影延展距离(可选，默认值为0)、阴影颜色(可选，默认值为黑色)。

-

示例：

-
  • box-shadow :10px 20px 5px 10px #888888
  • box-shadow :100px 100px 30px red
  • box-shadow :-100px -100px 0px 40px
+

语法：box-shadow: h-shadow v-shadow blur spread color

+

通过这个样式可以设置当前组件的阴影样式，包括水平位置(必填)、垂直位置(必填)、模糊半径(可选，默认值为0)、阴影延展距离(可选，默认值为0)、阴影颜色(可选，默认值为黑色)。

+

示例：

+
  • box-shadow :10px 20px 5px 10px #888888
  • box-shadow :100px 100px 30px red
  • box-shadow :-100px -100px 0px 40px

filter5+

+

filter5+

string

+

string

-

+

-

语法：filter: blur(px)

-

通过这个样式可以设置当前组件布局范围的内容模糊，参数用于指定模糊半径，如果没有设置值，则默认是0(不模糊)，不支持百分比。

-

示例：

-
  • filter: blur(10px)
+

语法：filter: blur(px)

+

通过这个样式可以设置当前组件布局范围的内容模糊，参数用于指定模糊半径，如果没有设置值，则默认是0(不模糊)，不支持百分比。

+

示例：

+
  • filter: blur(10px)

backdrop-filter5+

+

backdrop-filter5+

string

+

string

-

+

-

语法：backdrop-filter: blur(px)

-

通过这个样式可以设置当前组件布局范围的背景模糊，参数用于指定模糊半径，如果没有设置值，则默认是0(不模糊)，不支持百分比。

-

示例：

-
  • backdrop-filter: blur(10px)
-

window-filter5+

-

string

-

-

-

语法：window-filter: blur(percent), style5+

-

通过这个样式可以设置当前组件布局范围的窗口模糊程度和模糊样式，如果没有设置值，则默认是0%(不模糊)，多块模糊区域时不支持设置不同的模糊值和模糊样式。style可选值：small_light(默认值), medium_light, large_light, xlarge_light, small_dark, medium_dark, large_dark, xlarge_dark。

-

示例：

-
  • window-filter: blur(50%)
  • window-filter: blur(10%), large_light
-
说明：

仅手机和平板设备支持。

-
+

语法：backdrop-filter: blur(px)

+

通过这个样式可以设置当前组件布局范围的背景模糊，参数用于指定模糊半径，如果没有设置值，则默认是0(不模糊)，不支持百分比。

+

示例：

+
  • backdrop-filter: blur(10px)

opacity

+

opacity

number

+

number

1

+

1

元素的透明度，取值范围为0到1，1表示为不透明，0表示为完全透明。

+

元素的透明度，取值范围为0到1，1表示为不透明，0表示为完全透明。

display

+

display

string

-

+

string

+

flex

+

flex

确定一个元素所产生的框的类型，可选值为：

-
  • flex：弹性布局。
  • none：不渲染此元素。
+

确定一个元素所产生的框的类型，可选值为：

+
  • flex：弹性布局。
  • none：不渲染此元素。

visibility

+

visibility

string

-

+

string

+

visible

+

visible

是否显示元素所产生的框。不可见的框会占用布局（将'display'属性设置为'none'来完全去除框），可选值为：

-
  • visible：元素正常显示。
  • hidden：隐藏元素，但是其他元素的布局不改变，相当于此元素变成透明。
-
说明：

visibility和display样式都设置时，仅display生效。

+

是否显示元素所产生的框。不可见的框会占用布局（将'display'属性设置为'none'来完全去除框），可选值为：

+
  • visible：元素正常显示。
  • hidden：隐藏元素，但是其他元素的布局不改变，相当于此元素变成透明。
+
说明：

visibility和display样式都设置时，仅display生效。

flex

+

flex

number | string

+

number | string

-

+

-

规定当前组件如何适应父组件中的可用空间。

-

flex可以指定1个、2个5+或3个5+值。

-

单值语法：

-
  • 一个无单位数：用来设置组件的flex-grow。
  • 一个有效的宽度值5+：用来设置组件的flex-basis。
-

双值语法5+：

-

第一个值必须是无单位数，用来设置组件的flex-grow。第二个值是以下之一：

-
  • 一个无单位数：用来设置组件的flex-shrink。
  • 一个有效的宽度值：用来设置组件的flex-basis。
-

三值语法5+：

-

第一个值必须是无单位数，用来设置组件的flex-grow；第二个值必须是无单位数，用来设置组件的flex-shrink；第三个值必须是一个有效的宽度值，用来设置组件的flex-basis。

-
说明：

仅父容器为<div>、<list-item>、<tabs>、<refresh>、<stepper-item>5+时生效。

+

规定当前组件如何适应父组件中的可用空间。

+

flex可以指定1个、2个5+或3个5+值。

+

单值语法：

+
  • 一个无单位数：用来设置组件的flex-grow。
  • 一个有效的宽度值5+：用来设置组件的flex-basis。
+

双值语法5+：

+

第一个值必须是无单位数，用来设置组件的flex-grow。第二个值是以下之一：

+
  • 一个无单位数：用来设置组件的flex-shrink。
  • 一个有效的宽度值：用来设置组件的flex-basis。
+

三值语法5+：

+

第一个值必须是无单位数，用来设置组件的flex-grow；第二个值必须是无单位数，用来设置组件的flex-shrink；第三个值必须是一个有效的宽度值，用来设置组件的flex-basis。

+
说明：

仅父容器为<div>、<list-item>、<tabs>、<refresh>、<stepper-item>5+时生效。

flex-grow

+

flex-grow

number

+

number

0

+

0

设置组件的拉伸样式，指定父组件容器主轴方向上剩余空间（容器本身大小减去所有flex子元素占用的大小）的分配权重。0为不伸展。

-
说明：

仅父容器为<div>、<list-item>、<tabs>、<refresh>、<stepper-item>5+时生效。

+

设置组件的拉伸样式，指定父组件容器主轴方向上剩余空间（容器本身大小减去所有flex子元素占用的大小）的分配权重。0为不伸展。

+
说明：

仅父容器为<div>、<list-item>、<tabs>、<refresh>、<stepper-item>5+时生效。

flex-shrink

+

flex-shrink

number

+

number

1

+

1

设置组件的收缩样式，元素仅在默认宽度之和大于容器的时候才会发生收缩，0为不收缩。

-
说明：

仅父容器为<div>、<list-item>、<tabs>、<refresh>、<stepper-item>5+时生效。

+

设置组件的收缩样式，元素仅在默认宽度之和大于容器的时候才会发生收缩，0为不收缩。

+
说明：

仅父容器为<div>、<list-item>、<tabs>、<refresh>、<stepper-item>5+时生效。

flex-basis

+

flex-basis

<length>

-

+

<length>

+

-

+

-

设置组件在主轴方向上的初始大小。

-
说明：

仅父容器为<div>、<list-item>、<tabs>、<refresh>、<stepper-item>5+时生效。

+

设置组件在主轴方向上的初始大小。

+
说明：

仅父容器为<div>、<list-item>、<tabs>、<refresh>、<stepper-item>5+时生效。

align-self6+

+

align-self6+

string

+

string

-

+

-

设置自身在父元素交叉轴上的对齐方式，该样式会覆盖父元素的align-items样式，仅在父容器为div、list。可选值为：

-
  • stretch 弹性元素被在交叉轴方向被拉伸到与容器相同的高度或宽度。
  • flex-start 元素向交叉轴起点对齐。
  • flex-end 元素向交叉轴终点对齐。
  • center 元素在交叉轴居中。
  • baseline 元素在交叉轴基线对齐。
+

设置自身在父元素交叉轴上的对齐方式，该样式会覆盖父元素的align-items样式，仅在父容器为div、list。可选值为：

+
  • stretch 弹性元素被在交叉轴方向被拉伸到与容器相同的高度或宽度。
  • flex-start 元素向交叉轴起点对齐。
  • flex-end 元素向交叉轴终点对齐。
  • center 元素在交叉轴居中。
  • baseline 元素在交叉轴基线对齐。

position

+

position

string

+

string

relative

+

relative

设置元素的定位类型，不支持动态变更。

-
  • fixed：相对与整个界面进行定位。
  • absolute：相对于父元素进行定位。
  • relative：相对于其正常位置进行定位。
-
说明：

absolute属性仅在父容器为<div>、<stack>时生效。

+

设置元素的定位类型，不支持动态变更。

+
  • fixed：相对与整个界面进行定位。
  • absolute：相对于父元素进行定位。
  • relative：相对于其正常位置进行定位。
+
说明：

absolute属性仅在父容器为<div>、<stack>时生效。

[left|top|right|bottom]

+

[left|top|right|bottom]

<length> | <percentage>6+

+

<length> | <percentage>6+

-

+

-

left|top|right|bottom需要配合position样式使用，来确定元素的偏移位置。

-
  • left属性规定元素的左边缘。该属性定义了定位元素左外边距边界与其包含块左边界之间的偏移。
  • top属性规定元素的顶部边缘。该属性定义了一个定位元素的上外边距边界与其包含块上边界之间的偏移。
  • right属性规定元素的右边缘。该属性定义了定位元素右外边距边界与其包含块右边界之间的偏移。
  • bottom属性规定元素的底部边缘。该属性定义了一个定位元素的下外边距边界与其包含块下边界之间的偏移。
+

left|top|right|bottom需要配合position样式使用，来确定元素的偏移位置。

+
  • left属性规定元素的左边缘。该属性定义了定位元素左外边距边界与其包含块左边界之间的偏移。
  • top属性规定元素的顶部边缘。该属性定义了一个定位元素的上外边距边界与其包含块上边界之间的偏移。
  • right属性规定元素的右边缘。该属性定义了定位元素右外边距边界与其包含块右边界之间的偏移。
  • bottom属性规定元素的底部边缘。该属性定义了一个定位元素的下外边距边界与其包含块下边界之间的偏移。

[start | end]6+

+

[start | end]6+

<length> | <percentage>

+

<length> | <percentage>

-

+

-

start | end需要配合position样式使用，来确定元素的偏移位置。

-
  • start属性规定元素的起始边缘。该属性定义了定位元素起始外边距边界与其包含块起始边界之间的偏移。
  • end属性规定元素的结尾边缘。该属性定义了一个定位元素的结尾边距边界与其包含块结尾边界之间的偏移。
+

start | end需要配合position样式使用，来确定元素的偏移位置。

+
  • start属性规定元素的起始边缘。该属性定义了定位元素起始外边距边界与其包含块起始边界之间的偏移。
  • end属性规定元素的结尾边缘。该属性定义了一个定位元素的结尾边距边界与其包含块结尾边界之间的偏移。

z-index6+

+

z-index6+

number

+

number

-

+

-

表示对于同一父节点其子节点的渲染顺序。数值越大，渲染数据越靠后。

-
说明：

z-index不支持auto，并且opacity等其他样式不会影响z-index的渲染顺序。

+

表示对于同一父节点其子节点的渲染顺序。数值越大，渲染数据越靠后。

+
说明：

z-index不支持auto，并且opacity等其他样式不会影响z-index的渲染顺序。

image-fill6+

+

image-fill6+

<color>

+

<color>

-

+

-

为svg图片填充颜色，支持组件范围（与设置图片资源的属性）：button（icon属性）、piece（icon属性）、search（icon属性）、input（headericon属性）、textarea（headericon属性）、image（src属性）、toolbar-item(icon属性)。

-

svg图片文件内的fill属性颜色值在渲染时将被替换为image-fill所配的颜色值，且仅对svg图片内显示声明的fill属性生效。

+

为svg图片填充颜色，支持组件范围（与设置图片资源的属性）：button（icon属性）、piece（icon属性）、search（icon属性）、input（headericon属性）、textarea（headericon属性）、image（src属性）、toolbar-item(icon属性)。

+

svg图片文件内的fill属性颜色值在渲染时将被替换为image-fill所配的颜色值，且仅对svg图片内显示声明的fill属性生效。

clip-path6+

+

clip-path6+

[ <geometry-box> || <basic-shape> ] | none

+

[ <geometry-box> || <basic-shape> ] | none

-

+

-

设置组件的裁剪区域。区域内的部分显示，区域外的不显示。

-

<geometry-box>：表示裁剪区域的作用范围，默认为border-box。可选值为：

-
  • margin-box：margin计算入长宽尺寸内。
  • border-box：border计算入长宽尺寸内。
  • padding-box：padding计算入长宽尺寸内。
  • content-box：margin/border/padding不计算入长宽尺寸内。
-

<basic-shape>：表示裁剪的形状。包含以下类型：

-
  • inset，格式为：inset( <percentage>{1,4} [ round <'border-radius'> ]? )。
  • circle，格式为：circle( [ <percentage> ]? [ at <percentage> <percentage> ]? )。
  • ellipse，格式为：ellipse( [ <percentage>{2} ]? [ at <percentage> <percentage> ]? )。
  • polygon，格式为：polygon( [ <percentage> <percentage> ]# )
  • path，格式为：path( <string> )。
+

设置组件的裁剪区域。区域内的部分显示，区域外的不显示。

+

<geometry-box>：表示裁剪区域的作用范围，默认为border-box。可选值为：

+
  • margin-box：margin计算入长宽尺寸内。
  • border-box：border计算入长宽尺寸内。
  • padding-box：padding计算入长宽尺寸内。
  • content-box：margin/border/padding不计算入长宽尺寸内。
+

<basic-shape>：表示裁剪的形状。包含以下类型：

+
  • inset，格式为：inset( <percentage>{1,4} [ round <'border-radius'> ]? )。
  • circle，格式为：circle( [ <percentage> ]? [ at <percentage> <percentage> ]? )。
  • ellipse，格式为：ellipse( [ <percentage>{2} ]? [ at <percentage> <percentage> ]? )。
  • polygon，格式为：polygon( [ <percentage> <percentage> ]# )
  • path，格式为：path( <string> )。

mask-image6+

+

mask-image6+

  • <linear-gradient>
  • string
+
  • <linear-gradient>
  • string

-

+

-

设置渐变色遮罩或本地图片设置。

-

设置渐变色遮罩，示例：

-

linear-gradient(to left, black, white)

-

设置纯色遮罩，示例：

-

linear-gradient(to right, grey , grey)

-

设置本地svg图片为遮罩，示例：url(common/mask.svg)

+

设置渐变色遮罩或本地图片设置。

+

设置渐变色遮罩，示例：

+

linear-gradient(to left, black, white)

+

设置纯色遮罩，示例：

+

linear-gradient(to right, grey , grey)

+

设置本地svg图片为遮罩，示例：url(common/mask.svg)

mask-size6+

+

mask-size6+

  • string
  • <length><length>
  • <percentage> <percentage>
+
  • string
  • <length><length>
  • <percentage> <percentage>

auto

+

auto

设置遮罩图片显示大小，仅当mask-image为图片资源时有效。

-

string可选值：

-
  • contain：把图像扩展至最大尺寸，以使其高度和宽度完全适用内容区域。
  • cover：把图像扩展至足够大，以使背景图像完全覆盖背景区域；背景图像的某些部分也许无法显示在背景定位区域中。
  • auto：保持原图的比例不变。
-

length值参数方式：设置图像的高度和宽度。第一个值设置宽度，第二个值设置高度。如果只设置一个值，则第二个值会被设置为 "auto"。

-

百分比参数方式：以原图宽高的百分比来设置图像的宽度和高度。第一个值设置宽度，第二个值设置高度。如果只设置一个值，则第二个值会被设置为 "auto"。

+

设置遮罩图片显示大小，仅当mask-image为图片资源时有效。

+

string可选值：

+
  • contain：把图像扩展至最大尺寸，以使其高度和宽度完全适用内容区域。
  • cover：把图像扩展至足够大，以使背景图像完全覆盖背景区域；背景图像的某些部分也许无法显示在背景定位区域中。
  • auto：保持原图的比例不变。
+

length值参数方式：设置图像的高度和宽度。第一个值设置宽度，第二个值设置高度。如果只设置一个值，则第二个值会被设置为 "auto"。

+

百分比参数方式：以原图宽高的百分比来设置图像的宽度和高度。第一个值设置宽度，第二个值设置高度。如果只设置一个值，则第二个值会被设置为 "auto"。

mask-position6+

+

mask-position6+

  • string string
  • <length> <length>
  • <percentage> <percentage>
+
  • string string
  • <length> <length>
  • <percentage> <percentage>

0px 0px

+

0px 0px

设置遮罩图片显示位置，仅当mask-image为图片资源时有效。关键词方式：如果仅规定了一个关键词，那么第二个值为"center"。两个值分别定义水平方向位置和竖直方向位置。

-

string可选值：

-
  • left：水平方向上最左侧。
  • right：水平方向上最右侧。
  • top：竖直方向上最顶部。
  • bottom：竖直方向上最底部。
  • center：水平方向或竖直方向上中间位置。
-

length值参数方式：第一个值是水平位置，第二个值是垂直位置。 左上角是 0 0。单位是像素 (0px 0px) 。如果仅规定了一个值，另外一个值将是50%。

-

百分比参数方式：第一个值是水平位置，第二个值是垂直位置。左上角是 0% 0%。右下角是 100% 100%。如果仅规定了一个值，另外一个值为50%。

-

可以混合使用<percentage>和<length>。

+

设置遮罩图片显示位置，仅当mask-image为图片资源时有效。关键词方式：如果仅规定了一个关键词，那么第二个值为"center"。两个值分别定义水平方向位置和竖直方向位置。

+

string可选值：

+
  • left：水平方向上最左侧。
  • right：水平方向上最右侧。
  • top：竖直方向上最顶部。
  • bottom：竖直方向上最底部。
  • center：水平方向或竖直方向上中间位置。
+

length值参数方式：第一个值是水平位置，第二个值是垂直位置。 左上角是 0 0。单位是像素 (0px 0px) 。如果仅规定了一个值，另外一个值将是50%。

+

百分比参数方式：第一个值是水平位置，第二个值是垂直位置。左上角是 0% 0%。右下角是 100% 100%。如果仅规定了一个值，另外一个值为50%。

+

可以混合使用<percentage>和<length>。

border-image-source7+

+

border-image-source7+

string

+

string

-

+

-

指定元素的边框图片。

-

示例：

-

border-image-source: url("/common/images/border.png")

+

指定元素的边框图片。

+

示例：

+

border-image-source: url("/common/images/border.png")

border-image-slice7+

+

border-image-slice7+

<length> | <percentage>

+

<length> | <percentage>

0

+

0

指定图片的边界内向偏移。

-

该属性可以有1到4个值：

-

指定一个值时，该值指定四个边的内偏移。

-

指定两个值时，第一个值指定上下两边的内偏移，第二个指定左右两边的内偏移。

-

指定三个值时，第一个指定上边的内偏移，第二个指定左右两边的内偏移，第三个指定下边的内偏移。

-

指定四个值时分别为上、右、下、左边的内偏移（顺时针顺序）。

+

指定图片的边界内向偏移。

+

该属性可以有1到4个值：

+

指定一个值时，该值指定四个边的内偏移。

+

指定两个值时，第一个值指定上下两边的内偏移，第二个指定左右两边的内偏移。

+

指定三个值时，第一个指定上边的内偏移，第二个指定左右两边的内偏移，第三个指定下边的内偏移。

+

指定四个值时分别为上、右、下、左边的内偏移（顺时针顺序）。

border-image-width7+

+

border-image-width7+

<length> | <percentage>

+

<length> | <percentage>

0

+

0

指定图片边界的宽度。

-

指定一个值时，该值指定四个边的宽度。

-

指定两个值时，第一个值指定上下两边的宽度 ，第二个指定左右两边的宽度。

-

指定三个值时，第一个指定上边的宽度 ，第二个指定左右两边的宽度 ，第三个指定下边的宽度。

-

指定四个值时分别为上、右、下、左边的宽度 （顺时针顺序）。

+

指定图片边界的宽度。

+

指定一个值时，该值指定四个边的宽度。

+

指定两个值时，第一个值指定上下两边的宽度 ，第二个指定左右两边的宽度。

+

指定三个值时，第一个指定上边的宽度 ，第二个指定左右两边的宽度 ，第三个指定下边的宽度。

+

指定四个值时分别为上、右、下、左边的宽度 （顺时针顺序）。

border-image-outset7+

+

border-image-outset7+

<length> | <percentage>

+

<length> | <percentage>

0

+

0

指定边框图像可超出边框的大小。

-

指定一个值时，边框图像在四个方向超出边框的距离。

-

指定两个值时，第一个值指定上下两边的边框图像超出边框的距离，第二个指定左右两边的 。

-

指定三个值时，第一个指定上边的边框图像超出边框的距离 ，第二个指定左右两边的边框图像超出边框的距离 ，第三个指定下边的边框图像超出边框的距离 。

-

指定四个值时分别为上、右、下、左边的边框图像超出边框的距离 （顺时针顺序）。

+

指定边框图像可超出边框的大小。

+

指定一个值时，边框图像在四个方向超出边框的距离。

+

指定两个值时，第一个值指定上下两边的边框图像超出边框的距离，第二个指定左右两边的 。

+

指定三个值时，第一个指定上边的边框图像超出边框的距离 ，第二个指定左右两边的边框图像超出边框的距离 ，第三个指定下边的边框图像超出边框的距离 。

+

指定四个值时分别为上、右、下、左边的边框图像超出边框的距离 （顺时针顺序）。

border-image-repeat7+

+

border-image-repeat7+

string

+

string

stretch

+

stretch

定义图片如何填充边框。

-

stretch: 拉伸图片以填充边框。

-

repeat：平铺图片以填充边框。

-

round：平铺图像。当不能整数次平铺时，根据情况放大或缩小图像。

+

定义图片如何填充边框。

+

stretch: 拉伸图片以填充边框。

+

repeat：平铺图片以填充边框。

+

round：平铺图像。当不能整数次平铺时，根据情况放大或缩小图像。

border-image7+

+

border-image7+

string

+

string

-

+

-

简写属性，可以选择以下两种设置方式：

-

简写属性，可以选择以下两种设置方式：

+ -
  • 渐变色边框

    示例:

    -

    border-image: linear-gradient(red, yellow) 10px

    +
    • 渐变色边框

      示例:

      +

      border-image: linear-gradient(red, yellow) 10px

名称

+ - - - - - - -

名称

类型

+

类型

默认值

+

默认值

描述

+

描述

shareid

+

shareid

string

+

string

无

+

无

进行共享元素转场时使用，若不配置，则转场样式不生效。共享元素转场当前支持的组件：list-item、image、text、button、label。

+

进行共享元素转场时使用，若不配置，则转场样式不生效。共享元素转场当前支持的组件：list-item、image、text、button、label。
-**表 2** 共享元素转场样式 +### 样式 - -

名称

+ - - - - - - - - - - - - - - -

名称

类型

+

类型

默认值

+

默认值

描述

+

描述

shared-transition-effect

+

shared-transition-effect

string

+

string

exchange

+

exchange

配置共享元素转场时的入场样式。

-

当前支持：exchange或static，默认为exchange。

-

转场时，目的页配置的样式优先生效。

-
  • exchange表示源页面元素移动到目的页元素位置，并进行适当缩放。
  • static表示目的页元素位置不变，用户可配置透明度动画。当前仅跳转目标页配置的static效果生效。
+

配置共享元素转场时的入场样式。

+
  • exchange（默认值）：源页面元素移动到目的页元素位置，并进行适当缩放。
  • static：目的页元素位置不变，用户可配置透明度动画。当前仅跳转目标页配置的static效果生效。

shared-transition-name

+

shared-transition-name

string

+

string

-

+

-

转场时，目的页配置的样式优先生效。该样式用于配置共享元素的动画效果，一个由@keyframes定义的动画序列，支持transform和透明度动画。若共享元素效果与自定义的动画冲突，以自定义动画为准。

+

转场时，目的页配置的样式优先生效。该样式用于配置共享元素的动画效果，一个由@keyframes定义的动画序列，支持transform和透明度动画。若共享元素效果与自定义的动画冲突，以自定义动画为准。

shared-transition-timing-function

+

shared-transition-timing-function

string

+

string

friction

+

friction

转场时，目的页配置的样式优先生效。该属性定义了共享元素转场时的差值曲线。若不配置，默认使用friction曲线。

+

转场时，目的页配置的样式优先生效。该属性定义了共享元素转场时的差值曲线。若不配置，默认使用friction曲线。
-## 共享元素注意事项 +### 注意事项 -1. 若同时配置了共享元素转场和自定义页面转场样式，页面转场效果以自定义效果为准； +1. 若同时配置了共享元素转场和自定义页面转场样式，页面转场效果以自定义效果为准。 -2. 共享元素的exchange效果类似下图： +2. 共享元素的exchange效果类似下图。 -**图 1** 共享元素转场默认效果 +**图 1** 共享元素转场默认效果 ![](figures/共享元素转场默认效果.png "共享元素转场默认效果") 3. 共享元素动画对元素的边框、背景色不生效。 4. 共享元素转场时，由于页面元素会被隐藏，故页面元素配置的动画样式/动画方法失效。 -5. 动态修改shareid：组件A的shareid被组件B的shareid覆盖，则组件A的共享元素效果失效，即使组件B的shareid被修改，此时组件A的共享元素效果也不会恢复。5+ +5. 动态修改shareid5+：组件A的shareid被组件B的shareid覆盖，则组件A的共享元素效果失效，即使组件B的shareid被修改，此时组件A的共享元素效果也不会恢复。 -## 共享元素示例代码 +### 示例 PageA跳转到PageB，跳转的共享元素为image， shareid为“shareImage”。 @@ -161,34 +157,35 @@ export default { ## 卡片转场样式 - -

名称

+>![](../../public_sys-resources/icon-note.gif) **说明：** +>卡片转场无法和其他转场\(包括共享元素转场和自定义转场\)共同使用。 + +### 样式 + + - - - - - - -

名称

类型

+

类型

默认值

+

默认值

描述

+

描述

transition-effect

+

transition-effect

string

+

string

-

+

-

用于配置当前页面中的某个组件在卡片转场过程中是否进行转场动效，当前支持如下配置：

-
  • unfold：配置这个属性的组件，如在卡片的上方，则向上移动一个卡片的高度，如在卡片的下方，则向下移动一个卡片的高度。
  • none：转场过程中没有动效。
+

用于配置当前页面中的某个组件在卡片转场过程中是否进行转场动效，当前支持如下配置：

+
  • unfold：配置这个属性的组件，如在卡片的上方，则向上移动一个卡片的高度，如在卡片的下方，则向下移动一个卡片的高度。
  • none：转场过程中没有动效。
->![](../../public_sys-resources/icon-note.gif) **说明：** ->卡片转场无法和其他转场\(包括共享元素转场和自定义转场\)共同使用。 - -## 示例 +### 示例 source\_page包含顶部内容以及卡片列表，点击卡片可以跳转到target\_page。 @@ -275,71 +272,69 @@ export default { ## 页面转场样式 -**表 3** 页面转场样式 +### 样式 - -

名称

+ - - - - - - - - - - - - - - - - - - -

名称

类型

+

类型

默认值

+

默认值

描述

+

描述

transition-enter

+

transition-enter

string

+

string

-

+

-

与@keyframes配套使用，支持transform和透明度动画，详见表2。

+

与@keyframes配套使用，支持transform和透明度动画，详见表2。

transition-exit

+

transition-exit

string

+

string

-

+

-

与@keyframes配套使用，支持transform和透明度动画，详见表2。

+

与@keyframes配套使用，支持transform和透明度动画，详见表2。

transition-duration

+

transition-duration

string

+

string

跟随设备默认的页面转场时间

+

跟随设备默认的页面转场时间

支持的单位为[s(秒)|ms(毫秒) ]，默认单位为ms。

+

支持的单位为[s(秒)|ms(毫秒) ]，默认单位为ms，未配置时使用系统默认值。

transition-timing-function

+

transition-timing-function

string

+

string

friction

+

friction

描述转场动画执行的速度曲线，用于使转场更为平滑。详细参数见动画样式中“animation-timing-function”有效值说明。

+

描述转场动画执行的速度曲线，用于使转场更为平滑。详细参数见动画样式中“animation-timing-function”有效值说明。
-## 页面转场注意事项 +### 注意事项 1. 配置自定义转场时，建议配置页面背景色为不透明颜色，否则在转场过程中可能会出现衔接不自然的现象。 -2. transition-enter和transition-exit可单独配置，没有配置时使用系统默认的参数； -3. transition-duration没有配置的时候使用系统默认值； -4. transition-enter/transition-exit说明如下： - 1. push场景下：进入页面栈的Page2.js应用transition-enter描述的动画配置；进入页面栈第二位置的Page1.js应用transition-exit描述的动画配置； +2. transition-enter和transition-exit可单独配置，没有配置时使用系统默认的参数。 +3. transition-enter/transition-exit说明如下： + 1. push场景下：进入页面栈的Page2.js应用transition-enter描述的动画配置；进入页面栈第二位置的Page1.js应用transition-exit描述的动画配置。 - ![](figures/zh-cn_image_0000001173324847.png) + ![](figures/zh-cn_image_0000001193704354.png) 2. back场景下：退出页面栈的Page2.js应用transition-enter描述的动画配置，并进行倒播；从页面栈第二位置进入栈顶位置的Page1.js应用transition-exit描述的动画配置，并进行倒播。 - ![](figures/zh-cn_image_0000001127125268.png) + ![](figures/zh-cn_image_0000001238184345.png) diff --git a/zh-cn/application-dev/reference/arkui-js/js-components-container-badge.md b/zh-cn/application-dev/reference/arkui-js/js-components-container-badge.md index ad2e7f024dd439cd6f8e01db896a56094521cc10..0087e65fdafdcf31230dce9ae353877ef4399570 100644 --- a/zh-cn/application-dev/reference/arkui-js/js-components-container-badge.md +++ b/zh-cn/application-dev/reference/arkui-js/js-components-container-badge.md @@ -2,9 +2,6 @@ 应用中如果有需用户关注的新事件提醒，可以采用新事件标记来标识。 ->![](../../public_sys-resources/icon-note.gif) **说明：** ->从API Version 5 开始支持。 - ## 权限列表 无 @@ -20,90 +17,89 @@ 除支持[通用属性](js-components-common-attributes.md)外，还支持如下属性： - -

名称

+ - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - @@ -112,61 +108,60 @@ **表 1** BadgeConfig - -

名称

类型

+

类型

默认值

+

默认值

必填

+

必填

描述

+

描述

placement

+

placement

string

+

string

rightTop

+

rightTop

否

+

否

事件提醒的数字标记或者圆点标记的位置，可选值为：

-
  • right：位于组件右边框。
  • rightTop：位于组件边框右上角。
  • left：位于组件左边框。
+

事件提醒的数字标记或者圆点标记的位置，可选值为：

+
  • right：位于组件右边框。
  • rightTop：位于组件边框右上角。
  • left：位于组件左边框。

count

+

count

number

+

number

0

+

0

否

+

否

设置提醒的消息数，默认为0。当设置相应的提醒消息数大于0时，消息提醒会变成数字标记类型，未设置消息数或者消息数不大于0时，消息提醒将采用圆点标记。

-
说明：

当数字设置为大于maxcount时，将使用maxcount显示。

-

count属性最大支持整数值为2147483647。

+

设置提醒的消息数，默认为0。当设置相应的提醒消息数大于0时，消息提醒会变成数字标记类型，未设置消息数或者消息数不大于0时，消息提醒将采用圆点标记。

+
说明：

当数字设置为大于maxcount时，将使用maxcount显示。

+

count属性最大支持整数值为2147483647。

visible

+

visible

boolean

+

boolean

false

+

false

否

+

否

是否显示消息提醒，当收到新信息提醒时可以设置该属性为true，显示相应的消息提醒，如果需要使用数字标记类型，同时需要设置相应的count属性。

+

是否显示消息提醒，当收到新信息提醒时可以设置该属性为true，显示相应的消息提醒，如果需要使用数字标记类型，同时需要设置相应的count属性。

maxcount

+

maxcount

number

+

number

99

+

99

否

+

否

最大消息数限制，当收到新信息提醒大于该限制时，标识数字会进行省略，仅显示maxcount+。

-
说明：

maxcount属性最大支持整数值为2147483647。

+

最大消息数限制，当收到新信息提醒大于该限制时，标识数字会进行省略，仅显示maxcount+。

+
说明：

maxcount属性最大支持整数值为2147483647。

config

+

config

BadgeConfig

+

BadgeConfig

-

+

-

否

+

否

设置新事件标记相关配置属性。

+

设置新事件标记相关配置属性。

label6+

+

label6+

string

+

string

-

+

-

否

+

否

设置新事件提醒的文本值。

-
说明：

使用该属性时，count和maxcount属性不生效。

+

设置新事件提醒的文本值。

+
说明：

使用该属性时，count和maxcount属性不生效。

名称

+ - - - - - - - - - - - - - - - - - - - - - - - - diff --git a/zh-cn/application-dev/reference/arkui-js/js-components-container-dialog.md b/zh-cn/application-dev/reference/arkui-js/js-components-container-dialog.md index 2f8377c7a3f86896846fcf7143f9f05b97d2a14f..8a50995941162a98688c554f8b9340b764f3ba3d 100644 --- a/zh-cn/application-dev/reference/arkui-js/js-components-container-dialog.md +++ b/zh-cn/application-dev/reference/arkui-js/js-components-container-dialog.md @@ -14,28 +14,27 @@ 除支持[通用属性](js-components-common-attributes.md)外，支持如下属性： - -

名称

类型

+

类型

默认值

+

默认值

必填

+

必填

描述

+

描述

badgeColor

+

badgeColor

<color>

+

<color>

#fa2a2d

+

#fa2a2d

否

+

否

新事件标记背景色。

+

新事件标记背景色。

textColor

+

textColor

<color>

+

<color>

#ffffff

+

#ffffff

否

+

否

数字标记的数字文本颜色。

+

数字标记的数字文本颜色。

textSize

+

textSize

<length>

+

<length>

10px

+

10px

否

+

否

数字标记的数字文本大小。

+

数字标记的数字文本大小。

badgeSize

+

badgeSize

<length>

+

<length>

6px

+

6px

否

+

否

圆点标记的默认大小

+

圆点标记的默认大小

名称

+ - - - - - - - - - @@ -52,34 +51,33 @@ 不支持[通用事件](js-components-common-events.md)，仅支持如下事件： - -

名称

类型

+

类型

默认值

+

默认值

必填

+

必填

描述

+

描述

dragable7+

+

dragable7+

boolean

+

boolean

false

+

false

否

+

否

设置对话框是否支持拖拽。

+

设置对话框是否支持拖拽。

名称

+ - - - - - - - - - - - @@ -89,27 +87,26 @@ 不支持[通用方法](js-components-common-methods.md)，仅支持如下方法。 - -

名称

参数

+

参数

描述

+

描述

cancel

+

cancel

-

+

-

用户点击非dialog区域触发取消弹窗时触发的事件。

+

用户点击非dialog区域触发取消弹窗时触发的事件。

show7+

+

show7+

-

+

-

对话框弹出时触发该事件。

+

对话框弹出时触发该事件。

close7+

+

close7+

-

+

-

对话框关闭时触发该事件。

+

对话框关闭时触发该事件。

名称

+ - - - - - - - - diff --git a/zh-cn/application-dev/reference/arkui-js/js-components-container-div.md b/zh-cn/application-dev/reference/arkui-js/js-components-container-div.md index 5abe97635374263ec4a1f6b99a42aedd5a60e3c3..63a626f9d7dd24147c7863071cbb37933d8a3fd1 100644 --- a/zh-cn/application-dev/reference/arkui-js/js-components-container-div.md +++ b/zh-cn/application-dev/reference/arkui-js/js-components-container-div.md @@ -18,207 +18,206 @@ 除支持[组件通用样式](js-components-common-styles.md)外，还支持如下样式： - -

名称

参数

+

参数

描述

+

描述

show

+

show

-

+

-

弹出对话框。

+

弹出对话框。

close

+

close

-

+

-

关闭对话框。

+

关闭对话框。

名称

+ - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - @@ -228,41 +227,40 @@ 除支持[通用事件](js-components-common-events.md)外，还支持如下事件： - -

名称

类型

+

类型

默认值

+

默认值

必填

+

必填

描述

+

描述

flex-direction

+

flex-direction

string

+

string

row

+

row

否

+

否

flex容器主轴方向。可选项有：

-
  • column：垂直方向从上到下。
  • row：水平方向从左到右。
+

flex容器主轴方向。可选项有：

+
  • column：垂直方向从上到下。
  • row：水平方向从左到右。

flex-wrap

+

flex-wrap

string

+

string

nowrap

+

nowrap

否

+

否

flex容器是单行还是多行显示，该值暂不支持动态修改。可选项有：

-
  • nowrap：不换行，单行显示。
  • wrap：换行，多行显示。
+

flex容器是单行还是多行显示，该值暂不支持动态修改。可选项有：

+
  • nowrap：不换行，单行显示。
  • wrap：换行，多行显示。

justify-content

+

justify-content

string

+

string

flex-start

+

flex-start

否

+

否

flex容器当前行的主轴对齐格式。可选项有：

-
  • flex-start：项目位于容器的开头。
  • flex-end：项目位于容器的结尾。
  • center：项目位于容器的中心。
  • space-between：项目位于各行之间留有空白的容器内。
  • space-around：项目位于各行之前、之间、之后都留有空白的容器内。
  • space-evenly5+: 均匀排列每个元素，每个元素之间的间隔相等。
+

flex容器当前行的主轴对齐格式。可选项有：

+
  • flex-start：项目位于容器的开头。
  • flex-end：项目位于容器的结尾。
  • center：项目位于容器的中心。
  • space-between：项目位于各行之间留有空白的容器内。
  • space-around：项目位于各行之前、之间、之后都留有空白的容器内。
  • space-evenly5+: 均匀排列每个元素，每个元素之间的间隔相等。

align-items

+

align-items

string

+

string

stretch

+

stretch

否

+

否

flex容器当前行的交叉轴对齐格式，可选值为：

-
  • stretch：弹性元素在交叉轴方向被拉伸到与容器相同的高度或宽度。
  • flex-start：元素向交叉轴起点对齐。
  • flex-end：元素向交叉轴终点对齐。
  • center：元素在交叉轴居中。
+

flex容器当前行的交叉轴对齐格式，可选值为：

+
  • stretch：弹性元素在交叉轴方向被拉伸到与容器相同的高度或宽度。
  • flex-start：元素向交叉轴起点对齐。
  • flex-end：元素向交叉轴终点对齐。
  • center：元素在交叉轴居中。

align-content

+

align-content

string

+

string

flex-start

+

flex-start

否

+

否

交叉轴中有额外的空间时，多行内容对齐格式，可选值为：

-
  • flex-start：所有行从交叉轴起点开始填充。第一行的交叉轴起点边和容器的交叉轴起点边对齐。接下来的每一行紧跟前一行。
  • flex-end：所有行从交叉轴末尾开始填充。最后一行的交叉轴终点和容器的交叉轴终点对齐。同时所有后续行与前一个对齐。
  • center：所有行朝向容器的中心填充。每行互相紧挨，相对于容器居中对齐。容器的交叉轴起点边和第一行的距离相等于容器的交叉轴终点边和最后一行的距离。
  • space-between：所有行在容器中平均分布。相邻两行间距相等。容器的交叉轴起点边和终点边分别与第一行和最后一行的边对齐。
  • space-around：所有行在容器中平均分布，相邻两行间距相等。容器的交叉轴起点边和终点边分别与第一行和最后一行的距离是相邻两行间距的一半。
+

交叉轴中有额外的空间时，多行内容对齐格式，可选值为：

+
  • flex-start：所有行从交叉轴起点开始填充。第一行的交叉轴起点边和容器的交叉轴起点边对齐。接下来的每一行紧跟前一行。
  • flex-end：所有行从交叉轴末尾开始填充。最后一行的交叉轴终点和容器的交叉轴终点对齐。同时所有后续行与前一个对齐。
  • center：所有行朝向容器的中心填充。每行互相紧挨，相对于容器居中对齐。容器的交叉轴起点边和第一行的距离相等于容器的交叉轴终点边和最后一行的距离。
  • space-between：所有行在容器中平均分布。相邻两行间距相等。容器的交叉轴起点边和终点边分别与第一行和最后一行的边对齐。
  • space-around：所有行在容器中平均分布，相邻两行间距相等。容器的交叉轴起点边和终点边分别与第一行和最后一行的距离是相邻两行间距的一半。

display

+

display

string

+

string

flex

+

flex

否

+

否

确定该元素视图框的类型，该值暂不支持动态修改。可选值为：

-
  • flex：弹性布局
  • grid：网格布局
  • none：不渲染此元素
+

确定该元素视图框的类型，该值暂不支持动态修改。可选值为：

+
  • flex：弹性布局
  • grid：网格布局
  • none：不渲染此元素

grid-template-[columns|rows]

+

grid-template-[columns|rows]

string

+

string

1行1列

+

1行1列

否

+

否

用于设置当前网格布局行和列的数量，不设置时默认1行1列，仅当display为grid时生效。

-

示例：如设置grid-template-columns为：

-
  • 50px 100px 60px：分三列，第一列50px，第二列100px，第三列60px；
  • 1fr 1fr 2fr：分三列，将父组件允许的宽分为4等份，第一列占1份，第二列占一份，第三列占2份；
  • 30% 20% 50%：分三列，将父组件允许的宽为基准，第一列占30%，第二列占20%，第三列占50%；
  • repeat(2,100px)：分两列，第一列100px，第二列100px；
  • repeat(auto-fill,100px)5+：按照每列100px的大小和交叉轴大小计算最大正整数重复次数，按照该重复次数布满交叉轴；
  • auto 1fr 1fr：分三列，第一列自适应内部子组件所需宽度，剩余空间分为两等份，第二列占一份，第三列占一份。
+

用于设置当前网格布局行和列的数量，不设置时默认1行1列，仅当display为grid时生效。

+

示例：如设置grid-template-columns为：

+
  • 50px 100px 60px：分三列，第一列50px，第二列100px，第三列60px；
  • 1fr 1fr 2fr：分三列，将父组件允许的宽分为4等份，第一列占1份，第二列占一份，第三列占2份；
  • 30% 20% 50%：分三列，将父组件允许的宽为基准，第一列占30%，第二列占20%，第三列占50%；
  • repeat(2,100px)：分两列，第一列100px，第二列100px；
  • repeat(auto-fill,100px)5+：按照每列100px的大小和交叉轴大小计算最大正整数重复次数，按照该重复次数布满交叉轴；
  • auto 1fr 1fr：分三列，第一列自适应内部子组件所需宽度，剩余空间分为两等份，第二列占一份，第三列占一份。

grid-[columns|rows]-gap

+

grid-[columns|rows]-gap

<length>

+

<length>

0

+

0

否

+

否

用于设置行与行的间距或者列与列的间距，也可以支持通过grid-gap设置相同的行列间距，仅当display为grid时生效。

+

用于设置行与行的间距或者列与列的间距，也可以支持通过grid-gap设置相同的行列间距，仅当display为grid时生效。

grid-row-[start|end]

+

grid-row-[start|end]

number

+

number

-

+

-

否

+

否

用于设置当前元素在网格布局中的起止行号，仅当父组件display样式为grid时生效（仅div支持display样式设置为grid）。

+

用于设置当前元素在网格布局中的起止行号，仅当父组件display样式为grid时生效（仅div支持display样式设置为grid）。

grid-column-[start|end]

+

grid-column-[start|end]

number

+

number

-

+

-

否

+

否

用于设置当前元素在网格布局中的起止列号，仅当父组件display样式为grid时生效（仅div支持display样式设置为grid）。

+

用于设置当前元素在网格布局中的起止列号，仅当父组件display样式为grid时生效（仅div支持display样式设置为grid）。

grid-auto-flow5+

+

grid-auto-flow5+

string

+

string

-

+

-

否

+

否

使用框架自动布局算法进行网格的布局，可选值为：

-
  • row：逐行填充元素，如果行空间不够，则新增行；
  • column：逐列填充元素，如果列空间不够，则新增列。
+

使用框架自动布局算法进行网格的布局，可选值为：

+
  • row：逐行填充元素，如果行空间不够，则新增行；
  • column：逐列填充元素，如果列空间不够，则新增列。

overflow6+

+

overflow6+

string

+

string

visible

+

visible

否

+

否

设置元素内容区超过元素本身大小时的表现形式。

-
  • visible：多个子元素内容超过元素大小时，显示在元素外面；
  • hidden：元素内容超过元素大小时，进行裁切显示；
  • scroll：元素内容超过元素大小时，进行滚动显示并展示滚动条（当前只支持纵向）。
-
说明：
  • overflow: scroll样式需要元素设置固定的大小。
+

设置元素内容区超过元素本身大小时的表现形式。

+
  • visible：多个子元素内容超过元素大小时，显示在元素外面；
  • hidden：元素内容超过元素大小时，进行裁切显示；
  • scroll：元素内容超过元素大小时，进行滚动显示并展示滚动条（当前只支持纵向）。
+
说明：
  • overflow: scroll样式需要元素设置固定的大小。

align-items6+

+

align-items6+

string

+

string

-

+

-

否

+

否

设置容器中元素交叉轴上的对齐方式：

-
  • stretch：Flex容器内容在交叉轴方向被拉伸到与容器相同的高度或宽度；
  • flex-start：Flex布局容器内元素向交叉轴起点对齐；
  • flex-end：Flex布局容器内元素向交叉轴终点对齐；
  • center：Flex布局容器内元素在交叉轴居中对齐；
  • baseline：如Flex布局纵向排列，则该值与'flex-start'等效。横向布局时，内容元素存在文本时按照文本基线对齐，否则底部对齐。
+

设置容器中元素交叉轴上的对齐方式：

+
  • stretch：Flex容器内容在交叉轴方向被拉伸到与容器相同的高度或宽度；
  • flex-start：Flex布局容器内元素向交叉轴起点对齐；
  • flex-end：Flex布局容器内元素向交叉轴终点对齐；
  • center：Flex布局容器内元素在交叉轴居中对齐；
  • baseline：如Flex布局纵向排列，则该值与'flex-start'等效。横向布局时，内容元素存在文本时按照文本基线对齐，否则底部对齐。

scrollbar-color6+

+

scrollbar-color6+

<color>

+

<color>

-

+

-

否

+

否

设置滚动条的颜色。

+

设置滚动条的颜色。

scrollbar-width6+

+

scrollbar-width6+

<length>

+

<length>

-

+

-

否

+

否

设置滚动条的宽度。

+

设置滚动条的宽度。

overscroll-effect6+

+

overscroll-effect6+

string

+

string

-

+

-

否

+

否

设置滚动边缘效果，可选值为：

-
  • spring：弹性物理动效，滑动到边缘后可以根据初始速度或通过触摸事件继续滑动一段距离，松手后回弹；
  • fade：渐隐物理动效，滑动到边缘后展示一个波浪形的渐隐，根据速度和滑动距离的变化渐隐也会发送一定的变化；
  • none：滑动到边缘后无效果
+

设置滚动边缘效果，可选值为：

+
  • spring：弹性物理动效，滑动到边缘后可以根据初始速度或通过触摸事件继续滑动一段距离，松手后回弹；
  • fade：渐隐物理动效，滑动到边缘后展示一个波浪形的渐隐，根据速度和滑动距离的变化渐隐也会发送一定的变化；
  • none：滑动到边缘后无效果

名称

+ - - - - - - - - - - - - - - @@ -272,36 +270,35 @@ 除支持[通用方法](js-components-common-methods.md)外，还支持如下方法： - -

名称

参数

+

参数

描述

+

描述

reachstart6+

+

reachstart6+

-

+

-

当页面滑动到最开始的点时触发的事件回调，当flex-direction: row时才会触发。

+

当页面滑动到最开始的点时触发的事件回调，当flex-direction: row时才会触发。

reachend6+

+

reachend6+

-

+

-

当页面滑动到最末尾的点时触发的事件回调，当flex-direction: row时才会触发。

+

当页面滑动到最末尾的点时触发的事件回调，当flex-direction: row时才会触发。

reachtop6+

+

reachtop6+

-

+

-

当页面滑动到最上部的点时触发的事件回调，当flex-direction: column时才会触发。

+

当页面滑动到最上部的点时触发的事件回调，当flex-direction: column时才会触发。

reachbottom6+

+

reachbottom6+

-

+

-

当页面滑动到最下部的点时触发的事件回调，当flex-direction: column时才会触发。

+

当页面滑动到最下部的点时触发的事件回调，当flex-direction: column时才会触发。

名称

+ - - - - - - - - - - - @@ -311,26 +308,26 @@ **表 1** ScrollOffset6+ -

名称

参数

+

参数

返回值

+

返回值

描述

+

描述

getScrollOffset6+

+

getScrollOffset6+

-

+

-

ScrollOffset

+

ScrollOffset

获取元素内容的滚动偏移。

-
说明：
  • 需要设置overflow样式为scroll。
+

获取元素内容的滚动偏移。

+
说明：
  • 需要设置overflow样式为scroll。

scrollBy6+

+

scrollBy6+

ScrollParam

+

ScrollParam

-

+

-

指定元素内容的滚动偏移。

-
说明：
  • 需要设置overflow样式为scroll。
+

指定元素内容的滚动偏移。

+
说明：
  • 需要设置overflow样式为scroll。

名称

+ - - - - - - - - @@ -339,33 +336,33 @@ **表 2** ScrollParam6+ -

名称

类型

+

类型

描述

+

描述

x

+

x

number

+

number

在x轴方向的偏移，单位为px。

+

在x轴方向的偏移，单位为px。

y

+

y

number

+

number

在y轴方向的偏移，单位为px。

+

在y轴方向的偏移，单位为px。

名称

+ - - - - - - - - - - - @@ -570,8 +567,8 @@ }) }, drag(e){ - this.left = e.dragevent.globalX; - this.top = e.dragevent.globalY; + this.left = e.globalX; + this.top = e.globalY; }, dragend(e){ prompt.showToast({ @@ -618,8 +615,8 @@ top:0, }, drag(e){ - this.left = e.dragevent.globalX; - this.top = e.dragevent.globalY; + this.left = e.globalX; + this.top = e.globalY; }, dragenter(e){ prompt.showToast({ diff --git a/zh-cn/application-dev/reference/arkui-js/js-components-container-form.md b/zh-cn/application-dev/reference/arkui-js/js-components-container-form.md index 2e5ba7d9ef3d92dadefcc6608870039da0e305a4..a8923bd74431a19768d72bf54fa5fa90a55d794b 100644 --- a/zh-cn/application-dev/reference/arkui-js/js-components-container-form.md +++ b/zh-cn/application-dev/reference/arkui-js/js-components-container-form.md @@ -2,9 +2,6 @@ 表单容器，支持容器内input元素的内容提交和重置。 ->![](../../public_sys-resources/icon-note.gif) **说明：** ->从 API Version 6 开始支持。 - ## 权限列表 无 @@ -25,27 +22,26 @@ 处支持[通用事件](js-components-common-events.md)外，还支持如下事件： - -

名称

类型

+

类型

描述

+

描述

dx

+

dx

number

+

number

水平方向滑动的偏移量，单位px。

+

水平方向滑动的偏移量，单位px。

dy

+

dy

number

+

number

垂直方向滑动的偏移量，单位px。

+

垂直方向滑动的偏移量，单位px。

smooth

+

smooth

boolean

+

boolean

是否平滑处理。

+

是否平滑处理。

名称

+ - - - - - - - - @@ -54,19 +50,19 @@ **表 1** FormResult -

名称

参数

+

参数

描述

+

描述

submit

+

submit

FormResult

+

FormResult

点击提交按钮，进行表单提交时，触发该事件。

+

点击提交按钮，进行表单提交时，触发该事件。

reset

+

reset

-

+

-

点击重置按钮后，触发该事件。

+

点击重置按钮后，触发该事件。

名称

+ - - - - - @@ -81,14 +77,18 @@ ``` - - - - - 输入文本 +
+ + + + +
+ 输入文本 - Submit - Reset +
+ Submit + Reset +
``` @@ -105,3 +105,5 @@ export default{ } ``` +![](figures/001.gif) + diff --git a/zh-cn/application-dev/reference/arkui-js/js-components-container-list-item-group.md b/zh-cn/application-dev/reference/arkui-js/js-components-container-list-item-group.md index 49414c243c0814628f62c16a42017efddc4d3930..ec3bb6aca1c56ac99a0831a20d279fcad1f8ed65 100644 --- a/zh-cn/application-dev/reference/arkui-js/js-components-container-list-item-group.md +++ b/zh-cn/application-dev/reference/arkui-js/js-components-container-list-item-group.md @@ -2,9 +2,8 @@ <[list](js-components-container-list.md)\>的子组件，用来展示分组，宽度默认充满list组件。 ->![](../../public_sys-resources/icon-note.gif) **说明：** ->- 使用该组件时父元素list组件的样式columns必须为1，否则功能异常。 ->- 由于父元素list组件的align-items默认样式为stretch，该组件宽度默认充满list组件。设置父元素list组件的align-items样式为非stretch来生效自定义宽度。 +- 使用该组件时父元素list组件的样式columns必须为1，否则功能异常。 +- 由于父元素list组件的align-items默认样式为stretch，该组件宽度默认充满list组件。设置父元素list组件的align-items样式为非stretch来生效自定义宽度。 ## 权限列表 @@ -18,28 +17,27 @@ 除支持[通用属性](js-components-common-attributes.md)外，还支持如下属性： - -

名称

类型

+

类型

描述

+

描述

value

+

value

Object

+

Object

input元素的name和value的值。

+

input元素的name和value的值。

名称

+ - - - - - - - - - @@ -52,41 +50,40 @@ 除支持[通用样式](js-components-common-styles.md)外，还支持如下样式： - -

名称

类型

+

类型

默认值

+

默认值

必填

+

必填

描述

+

描述

type

+

type

string

+

string

default

+

default

否

+

否

list-item-group类型，同一list支持多种type的list-item-group，相同type的list-item-group需要确保渲染后的视图布局也完全相同，当type固定时，使用show属性代替if属性，确保视图布局不变。

+

list-item-group类型，同一list支持多种type的list-item-group，相同type的list-item-group需要确保渲染后的视图布局也完全相同，当type固定时，使用show属性代替if属性，确保视图布局不变。

名称

+ - - - - - - - - - - - - - - @@ -96,39 +93,38 @@ 除支持[通用事件](js-components-common-events.md)外，还支持如下事件： - -

名称

类型

+

类型

默认值

+

默认值

必填

+

必填

描述

+

描述

flex-direction

+

flex-direction

string

+

string

row

+

row

否

+

否

flex容器主轴方向。可选项有：

-
  • column：垂直方向从上到下
  • row：水平方向从左到右
+

flex容器主轴方向。可选项有：

+
  • column：垂直方向从上到下
  • row：水平方向从左到右

justify-content

+

justify-content

string

+

string

flex-start

+

flex-start

否

+

否

flex容器当前行的主轴对齐格式。可选项有：

-
  • flex-start：项目位于容器的开头。
  • flex-end：项目位于容器的结尾。
  • center：项目位于容器的中心。
  • space-between：项目位于各行之间留有空白的容器内。
  • space-around：项目位于各行之前、之间、之后都留有空白的容器内。
  • space-evenly5+: 均匀排列每个元素，每个元素之间的间隔相等。
+

flex容器当前行的主轴对齐格式。可选项有：

+
  • flex-start：项目位于容器的开头。
  • flex-end：项目位于容器的结尾。
  • center：项目位于容器的中心。
  • space-between：项目位于各行之间留有空白的容器内。
  • space-around：项目位于各行之前、之间、之后都留有空白的容器内。
  • space-evenly5+: 均匀排列每个元素，每个元素之间的间隔相等。

名称

+ - - - - - - - - - - - diff --git a/zh-cn/application-dev/reference/arkui-js/js-components-container-list-item.md b/zh-cn/application-dev/reference/arkui-js/js-components-container-list-item.md index 8a46fbcb110f025cbfe80a0ddf6876e98a82d6b5..45606b6518929c62f927c6b73da7784c972ef461 100644 --- a/zh-cn/application-dev/reference/arkui-js/js-components-container-list-item.md +++ b/zh-cn/application-dev/reference/arkui-js/js-components-container-list-item.md @@ -1,9 +1,6 @@ # list-item -<[list](js-components-container-list.md)\>的子组件，用来展示列表具体item。 - ->![](../../public_sys-resources/icon-note.gif) **说明：** ->由于父元素list组件的align-items默认样式为stretch，该组件宽度默认充满list组件。设置父元素list组件的align-items样式为非stretch来生效自定义宽度。 +<[list](js-components-container-list.md)\>的子组件，用来展示列表具体item。由于父元素list组件的align-items默认样式为stretch，该组件宽度默认充满list组件。设置父元素list组件的align-items样式为非stretch来生效自定义宽度。 ## 权限列表 @@ -17,85 +14,73 @@ 除支持[通用属性](js-components-common-attributes.md)外，还支持如下属性： - -

名称

参数

+

参数

描述

+

描述

groupclick

+

groupclick

{ groupid: string }

+

{ groupid: string }

group点击事件。

-

groupid：被点击的group的id。

+

group点击事件。

+

groupid：被点击的group的id。

groupcollapse

+

groupcollapse

{ groupid: string }

+

{ groupid: string }

group收拢事件。

-

groupid：收拢的group的id。

-

当不输入参数或者groupid为空时收拢所有分组。

+

group收拢事件。

+

groupid：收拢的group的id。

+

当不输入参数或者groupid为空时收拢所有分组。

groupexpand

+

groupexpand

{ groupid: string }

+

{ groupid: string }

group展开事件。

-

groupid：展开的group的id。

-

当不输入参数或者groupid为空时展开所有分组。

+

group展开事件。

+

groupid：展开的group的id。

+

当不输入参数或者groupid为空时展开所有分组。

名称

+ - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - @@ -105,28 +90,27 @@ 除支持[通用样式](js-components-common-styles.md)外，还支持如下样式： - -

名称

类型

+

类型

默认值

+

默认值

必填

+

必填

描述

+

描述

type

-

string

-

default

-

否

-

list-item类型，默认值为default，同一list中可以包含多种type的list-item，相同type的list-item需要确保渲染后的视图布局也相同，如果type固定，则使用show属性代替if属性，确保视图布局不变。

-

primary

+

type

boolean

+

string

false

+

default

否

+

否

设置为true表示该item是group中的主item，即收拢时显示的item。如果有多个primary，以第一个为准。如果没有标记为primary的item，则以第一个item为主item。

+

list-item类型，默认值为default，同一list中可以包含多种type的list-item，相同type的list-item需要确保渲染后的视图布局也相同，如果type固定，则使用show属性代替if属性，确保视图布局不变。

section

+

primary

string

+

boolean

-

+

false

否

+

否

当前item的匹配字符串，如不设置则为空。不支持动态修改。group内只有主item设置有效。

+

设置为true表示该item是group中的主item，即收拢时显示的item。如果有多个primary，以第一个为准。如果没有标记为primary的item，则以第一个item为主item。

sticky

+

section

string

+

string

none

+

-

否

+

否

设置当前item是否为吸顶item以及其吸顶消失的效果，当前仅支持纵向list，group内部的item不可吸顶，设置该属性无效。

-
  • none：当前item不吸顶。
  • normal：当前item吸顶，消失效果滑动消失。
  • opacity：当前item吸顶，消失效果渐隐消失，仅在智能穿戴上支持。
+

当前item的匹配字符串，如不设置则为空。不支持动态修改。group内只有主item设置有效。

stickyradius

+

sticky

<length>

+

string

1000px

+

none

否

+

否

设置智能穿戴上吸顶item的圆弧效果半径，未设置时使用默认半径。sticky属性为none时，设置该属性无效。

+

设置当前item是否为吸顶item以及其吸顶消失的效果，当前仅支持纵向list，group内部的item不可吸顶，设置该属性无效。

+
  • none：当前item不吸顶。
  • normal：当前item吸顶，消失效果滑动消失。
  • opacity：当前item吸顶，消失效果渐隐消失，仅在智能穿戴上支持。

clickeffect5+

+

clickeffect5+

boolean

+

boolean

true

+

true

否

+

否

设置当前item是否有点击动效。

-
  • false：item点击时无点击动效。
  • true：item点击时有点击动效。
+

设置当前item是否有点击动效。

+
  • false：item点击时无点击动效。
  • true：item点击时有点击动效。

名称

+ - - - - - - - - - @@ -136,23 +120,22 @@ 除支持[通用事件](js-components-common-events.md)外，还支持如下事件： - -

名称

类型

+

类型

默认值

+

默认值

必填

+

必填

描述

+

描述

column-span

+

column-span

<number>

+

<number>

1

+

1

否

+

否

当前的list-item需要在list中占据的列的数量，默认占一列，仅在list为多列时生效。

+

当前的list-item需要在list中占据的列的数量，默认占一列，仅在list为多列时生效。

名称

+ - - - - - @@ -164,5 +147,5 @@ ## 示例 -详见[List示例](js-components-container-list.md#section24931424488)。 +详见[List示例](js-components-container-list.md#示例)。 diff --git a/zh-cn/application-dev/reference/arkui-js/js-components-container-list.md b/zh-cn/application-dev/reference/arkui-js/js-components-container-list.md index 80d741abdccda0bb6293dd758b898d249ae7ca42..620ba233854166ba77682590d43ffcab6bc0cc4e 100644 --- a/zh-cn/application-dev/reference/arkui-js/js-components-container-list.md +++ b/zh-cn/application-dev/reference/arkui-js/js-components-container-list.md @@ -14,235 +14,198 @@ 除支持[通用属性](js-components-common-attributes.md)外，还支持如下属性： - -

名称

参数

+

参数

描述

+

描述

sticky

+

sticky

{ state: boolean }

+

{ state: boolean }

吸顶组件回调事件。

-

value: false表示当前item处于非吸顶状态；

-

value: true表示当前item处于吸顶状态；

-

说明：仅当item设置sticky属性时支持注册此事件。

+

吸顶组件回调事件。

+

value: false表示当前item处于非吸顶状态；

+

value: true表示当前item处于吸顶状态；

+

说明：仅当item设置sticky属性时支持注册此事件。

名称

+ - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - @@ -252,157 +215,156 @@ 除支持[通用样式](js-components-common-styles.md)外，还支持如下样式： - -

名称

类型

+

类型

默认值

+

默认值

必填

+

必填

描述

+

描述

scrollpage

+

scrollpage

boolean

+

boolean

false

+

false

否

+

否

设置为true时，将 list 顶部页面中非 list 部分随 list 一起滑出可视区域，当list方向为row时，不支持此属性。

+

设置为true时，将 list 顶部页面中非 list 部分随 list 一起滑出可视区域，当list方向为row时，不支持此属性。

cachedcount

+

cachedcount

number

+

number

0

+

0

否

+

否

长列表延迟加载时list-item最少缓存数量。

-

可视区域外缓存的list-item数量少于该值时，会触发requestitem事件。

+

长列表延迟加载时list-item最少缓存数量。

+

可视区域外缓存的list-item数量少于该值时，会触发requestitem事件。

scrollbar

+

scrollbar

string

+

string

off

+

off

否

+

否

侧边滑动栏的显示模式（当前只支持纵向）：

-
  • off：不显示。
  • auto：按需显示(触摸时显示，2s后消失)。
  • on：常驻显示。
+

侧边滑动栏的显示模式（当前只支持纵向）：

+
  • off：不显示。
  • auto：按需显示(触摸时显示，2s后消失)。
  • on：常驻显示。

scrolleffect

+

scrolleffect

string

+

string

spring

+

spring

否

+

否

滑动效果，目前支持如下滑动效果：

-
  • spring：弹性物理动效，滑动到边缘后可以根据初始速度或通过触摸事件继续滑动一段距离，松手后回弹。
  • fade：渐隐物理动效，滑动到边缘后展示一个波浪形的渐隐，根据速度和滑动距离的变化渐隐也会发送一定的变化。
  • no：滑动到边缘后无效果。
+

滑动效果，目前支持如下滑动效果：

+
  • spring：弹性物理动效，滑动到边缘后可以根据初始速度或通过触摸事件继续滑动一段距离，松手后回弹。
  • fade：渐隐物理动效，滑动到边缘后展示一个波浪形的渐隐，根据速度和滑动距离的变化渐隐也会发送一定的变化。
  • no：滑动到边缘后无效果。

indexer

+

indexer

boolean | Array<string>

+

boolean | Array<string>

false

+

false

否

+

否

是否展示侧边栏快速字母索引栏。设置为true或者自定义索引时，索引栏会显示在列表右边界处。示例：

-

"indexer" : "true"表示使用默认字母索引表。

-

"indexer" : "false"表示无索引。

-

"indexer" : ['#',‘1’,'2',‘3’,'4',‘5’,'6',‘7’,'8']表示自定义索引表。自定义时"#"必须要存在。

-
说明：
  • indexer属性生效需要flex-direction属性配合设置为column，且columns属性设置为1。
  • 点击索引条进行列表项索引需要list-item子组件配合设置相应的section属性。
+

是否展示侧边栏快速字母索引栏。设置为true或者自定义索引时，索引栏会显示在列表右边界处。示例：

+

"indexer" : "true"表示使用默认字母索引表。

+

"indexer" : "false"表示无索引。

+

"indexer" : ['#',‘1’,'2',‘3’,'4',‘5’,'6',‘7’,'8']表示自定义索引表。自定义时"#"必须要存在。

+
说明：
  • indexer属性生效需要flex-direction属性配合设置为column，且columns属性设置为1。
  • 点击索引条进行列表项索引需要list-item子组件配合设置相应的section属性。

indexercircle5+

+

indexercircle5+

boolean

+

boolean

-

+

-

否

+

否

是否为环形索引。

-

穿戴设备默认为true，其他为false。indexer为false时不生效。

+

是否为环形索引。

+

穿戴设备默认为true，其他为false。indexer为false时不生效。

indexermulti5+

+

indexermulti5+

boolean

+

boolean

false

+

false

否

+

否

是否开启索引条多语言功能。

-

indexer为false时不生效。

+

是否开启索引条多语言功能。

+

indexer为false时不生效。

indexerbubble5+

+

indexerbubble5+

boolean

+

boolean

true

+

true

否

+

否

是否开启索引切换的气泡提示。

-

indexer为false时不生效。

+

是否开启索引切换的气泡提示。

+

indexer为false时不生效。

divider5+

+

divider5+

boolean

+

boolean

false

+

false

否

+

否

item是否自带分隔线。

-

其样式参考样式列表的divider-color、divider-height、divider-length、divider-origin。

+

item是否自带分隔线。

+

其样式参考样式列表的divider-color、divider-height、divider-length、divider-origin。

shapemode

+

shapemode

string

+

string

default

+

default

否

+

否

侧边滑动栏的形状类型。

-
  • default：不指定，跟随主题；
  • rect：矩形；
  • round：圆形。
+

侧边滑动栏的形状类型。

+
  • default：不指定，跟随主题；
  • rect：矩形；
  • round：圆形。

itemscale

+

updateeffect

boolean

+

boolean

true

+

false

否

+

否

焦点处理时，可以通过这个属性取消焦点进出的放大缩小效果。该效果仅在智能穿戴和智慧屏上生效。

-
说明：

仅在columns样式为1的时候生效。

-
-

itemcenter

-

boolean

-

false

-

否

-

初始化页面和滑动后页面总是有一个item处于视口交叉轴的中心位置。该效果仅在智能穿戴上生效。

-

updateeffect

-

boolean

-

false

-

否

-

用于设置当list内部的item发生删除或新增时是否支持动效。

-
  • false：新增删除item时无过渡动效。
  • true：新增删除item时播放过程动效。
+

用于设置当list内部的item发生删除或新增时是否支持动效。

+
  • false：新增删除item时无过渡动效。
  • true：新增删除item时播放过程动效。

chainanimation5+

+

chainanimation5+

boolean

+

boolean

false

+

false

否

+

否

用于设置当前list是否启用链式联动动效，开启后列表滑动以及顶部和底部拖拽时会有链式联动的效果。链式联动效果：list内的list-item间隔一定距离，在基本的滑动交互行为下，主动对象驱动从动对象进行联动，驱动效果遵循弹簧物理动效。

-
  • false：不启用链式联动
  • true：启用链式联动
    说明：
    • 不支持动态修改。
    • 如同时配置了indexer，链式动效不生效。
    • 如配置了链式动效，list-item的sticky不生效。
    +

用于设置当前list是否启用链式联动动效，开启后列表滑动以及顶部和底部拖拽时会有链式联动的效果。链式联动效果：list内的list-item间隔一定距离，在基本的滑动交互行为下，主动对象驱动从动对象进行联动，驱动效果遵循弹簧物理动效。

+
  • false：不启用链式联动
  • true：启用链式联动
    说明：
    • 不支持动态修改。
    • 如同时配置了indexer，链式动效不生效。
    • 如配置了链式动效，list-item的sticky不生效。

scrollvibrate

-

boolean

-

true

-

否

-

用于设置当list滑动时是否有振动效果，仅在智能穿戴场景生效，其他场景滑动无振动效果。

-
  • true：列表滑动时有振动效果。
  • false：列表滑动时无振动效果。
-

initialindex

+

initialindex

number

+

number

0

+

0

否

+

否

用于设置当前List初次加载时视口起始位置显示的item，默认为0，即显示第一个item，如设置的序号超过了最后一个item的序号，则设置不生效，当同时设置了initialoffset属性时，当前属性不生效。当indexer为true或者scrollpage为true时，不生效。

+

用于设置当前List初次加载时视口起始位置显示的item，默认为0，即显示第一个item，如设置的序号超过了最后一个item的序号，则设置不生效，当同时设置了initialoffset属性时，当前属性不生效。当indexer为true或者scrollpage为true时，不生效。

initialoffset

+

initialoffset

<length>

+

<length>

0

+

0

否

+

否

用于设置当前List初次加载时视口的起始偏移量，偏移量无法超过当前List可滑动的范围，如果超过会被截断为可滑动范围的极限值。当indexer为true或者scrollpage为true时，不生效。

+

用于设置当前List初次加载时视口的起始偏移量，偏移量无法超过当前List可滑动的范围，如果超过会被截断为可滑动范围的极限值。当indexer为true或者scrollpage为true时，不生效。

selected5+

+

selected5+

string

+

string

-

+

-

否

+

否

指定当前列表中被选中激活的项，可选值为list-item的section属性值。

+

指定当前列表中被选中激活的项，可选值为list-item的section属性值。

名称

+ - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - @@ -412,74 +374,73 @@ 除支持[通用事件](js-components-common-events.md)外，还支持如下事件： - -

名称

类型

+

类型

默认值

+

默认值

必填

+

必填

描述

+

描述

divider-color5+

+

divider-color5+

<color>

+

<color>

transparent

+

transparent

否

+

否

item分隔线颜色，仅当list的divider属性为true时生效。

+

item分隔线颜色，仅当list的divider属性为true时生效。

divider-height5+

+

divider-height5+

<length>

+

<length>

1

+

1

否

+

否

item分隔线高度，仅当list的divider属性为true时生效。

+

item分隔线高度，仅当list的divider属性为true时生效。

divider-length5+

+

divider-length5+

<length>

+

<length>

主轴宽度

+

主轴宽度

否

+

否

item分隔线长度，不设置时最大长度为主轴宽度，具体长度取决于divider-origin，仅当list的divider属性为true时生效。

+

item分隔线长度，不设置时最大长度为主轴宽度，具体长度取决于divider-origin，仅当list的divider属性为true时生效。

divider-origin5+

+

divider-origin5+

<length>

+

<length>

0

+

0

否

+

否

item分隔线相对于item主轴起点位置的偏移量，仅当list的divider属性为true时生效。

+

item分隔线相对于item主轴起点位置的偏移量，仅当list的divider属性为true时生效。

flex-direction

+

flex-direction

string

-

+

string

+

column

+

column

否

+

否

设置flex容器主轴的方向，指定flex项如何放置在flex容器中，可选值为：

-
  • column：主轴为纵向。
  • row：主轴为横向。
-

其他组件默认值为row，在list组件中默认值为column。

+

设置flex容器主轴的方向，指定flex项如何放置在flex容器中，可选值为：

+
  • column：主轴为纵向。
  • row：主轴为横向。
+

其他组件默认值为row，在list组件中默认值为column。

columns

+

columns

number

+

number

1

+

1

否

+

否

list交叉轴方向的显示列数，默认为1列。

-
说明：

设置多列时，在list交叉轴上进行均分，每一列大小相同。

+

list交叉轴方向的显示列数，默认为1列。

+
说明：

设置多列时，在list交叉轴上进行均分，每一列大小相同。

align-items

+

align-items

string

+

string

stretch

+

stretch

否

+

否

list每一列交叉轴上的对齐格式，可选值为：

-
  • stretch：弹性元素被在交叉轴方向被拉伸到与容器相同的高度或宽度。
  • flex-start：元素向交叉轴起点对齐。
  • flex-end：元素向交叉轴终点对齐。
  • center：元素在交叉轴居中。
    说明：

    align-items样式作用在每一列的子元素上，列与列之间采用均分方式布局。

    +

list每一列交叉轴上的对齐格式，可选值为：

+
  • stretch：弹性元素被在交叉轴方向被拉伸到与容器相同的高度或宽度。
  • flex-start：元素向交叉轴起点对齐。
  • flex-end：元素向交叉轴终点对齐。
  • center：元素在交叉轴居中。
    说明：

    align-items样式作用在每一列的子元素上，列与列之间采用均分方式布局。

item-extent

+

item-extent

<length> | <percentage>

+

<length> | <percentage>

-

+

-

否

+

否

设置内部item为固定大小，设置为百分比格式时，指相对于list的视口主轴方向长度的百分比。

+

设置内部item为固定大小，设置为百分比格式时，指相对于list的视口主轴方向长度的百分比。

fade-color

+

fade-color

<color>

+

<color>

grey

+

grey

否

+

否

设置渐隐物理动效的颜色。当滑动效果设置为渐隐物理动效时生效。

+

设置渐隐物理动效的颜色。当滑动效果设置为渐隐物理动效时生效。

scrollbar-color6+

+

scrollbar-color6+

<color>

+

<color>

-

+

-

否

+

否

设置滚动条的颜色。

+

设置滚动条的颜色。

scrollbar-width6+

+

scrollbar-width6+

<length>

+

<length>

-

+

-

否

+

否

设置滚动条的宽度。

+

设置滚动条的宽度。

scrollbar-offset6+

+

scrollbar-offset6+

<length>

+

<length>

0

+

0

否

+

否

设置滚动条距离List默认位置的偏移量，只支持正数，默认位置在List右边缘，可以通过这个偏移量调整滚动条的水平位置，如果滚动条绘制在list外部，而list父组件有裁剪，会导致滚动条被裁剪。

+

设置滚动条距离List默认位置的偏移量，只支持正数，默认位置在List右边缘，可以通过这个偏移量调整滚动条的水平位置，如果滚动条绘制在list外部，而list父组件有裁剪，会导致滚动条被裁剪。

名称

+ - - - - - - - - - - - - - - - - - - - - - - - - - - @@ -489,89 +450,88 @@ 支持[通用方法](js-components-common-methods.md)外，还支持如下方法： - -

名称

参数

+

参数

描述

+

描述

indexerchange5+

+

indexerchange5+

{ local: booleanValue }

+

{ local: booleanValue }

多语言索引条切换事件，仅当indexer属性为true，indexermulti为true时生效。booleanValue可能值为true或者false：

-
  • true: 当前展示本地索引。
  • false: 当前展示字母索引。
+

多语言索引条切换事件，仅当indexer属性为true，indexermulti为true时生效。booleanValue可能值为true或者false：

+
  • true: 当前展示本地索引。
  • false: 当前展示字母索引。

scroll

+

scroll

{ scrollX: scrollXValue, scrollY: scrollYValue, scrollState: stateValue }

+

{ scrollX: scrollXValue, scrollY: scrollYValue, scrollState: stateValue }

列表滑动的偏移量和状态回调。

-

stateValue: 0表示列表滑动已经停止。

-

stateValue: 1表示列表正在用户触摸状态下滑动。

-

stateValue: 2表示列表正在用户松手状态下滑动。

+

列表滑动的偏移量和状态回调。

+

stateValue: 0表示列表滑动已经停止。

+

stateValue: 1表示列表正在用户触摸状态下滑动。

+

stateValue: 2表示列表正在用户松手状态下滑动。

scrollbottom

+

scrollbottom

-

+

-

当前列表已滑动到底部位置。

+

当前列表已滑动到底部位置。

scrolltop

+

scrolltop

-

+

-

当前列表已滑动到顶部位置。

+

当前列表已滑动到顶部位置。

scrollend

+

scrollend

-

+

-

列表滑动已经结束。

+

列表滑动已经结束。

scrolltouchup

+

scrolltouchup

-

+

-

手指已经抬起且列表仍在惯性滑动。

+

手指已经抬起且列表仍在惯性滑动。

requestitem

+

requestitem

-

+

-

请求创建新的list-item。

-

长列表延迟加载时，可视区域外缓存的list-item数量少于cachedcount时，会触发该事件。

+

请求创建新的list-item。

+

长列表延迟加载时，可视区域外缓存的list-item数量少于cachedcount时，会触发该事件。

rotate7+

+

rotate7+

{ rotateValue: number }

+

{ rotateValue: number }

返回表冠旋转角度增量值，仅智能穿戴支持。

+

返回表冠旋转角度增量值，仅智能穿戴支持。

名称

+ - - - - - - - - - - - - - - - - - - - - - - - - - - - - - @@ -580,49 +540,49 @@ **表 1** ScrollParam -

名称

参数

+

参数

描述

+

描述

scrollTo

+

scrollTo

{ index: number(指定位置) }

+

{ index: number(指定位置) }

list滑动到指定index的item位置。

+

list滑动到指定index的item位置。

scrollBy

+

scrollBy

ScrollParam

+

ScrollParam

触发list滑动一段距离。

-

智慧屏特有方法。

+

触发list滑动一段距离。

+

智慧屏特有方法。

scrollTop

+

scrollTop

{ smooth: boolean }

+

{ smooth: boolean }

smooth缺省为false，表示直接滚动到顶部。

-

smooth为true，表示平滑滚动到顶部。

+

smooth缺省为false，表示直接滚动到顶部。

+

smooth为true，表示平滑滚动到顶部。

scrollBottom

+

scrollBottom

{ smooth: boolean }

+

{ smooth: boolean }

smooth缺省为false，表示直接滚动到底部。

-

smooth为true，表示平滑滚动到底部。

+

smooth缺省为false，表示直接滚动到底部。

+

smooth为true，表示平滑滚动到底部。

scrollPage

+

scrollPage

{ reverse: boolean, smooth: boolean }

+

{ reverse: boolean, smooth: boolean }

reverse缺省值为false，表示下一页，无完整页则滚动到底部。

-

reverse为true，表示上一页，无完整页则滚动到顶部。

-

smooth缺省值为false，表示直接滚动一页。

-

smooth为true，表示平滑滚动一页。

+

reverse缺省值为false，表示下一页，无完整页则滚动到底部。

+

reverse为true，表示上一页，无完整页则滚动到顶部。

+

smooth缺省值为false，表示直接滚动一页。

+

smooth为true，表示平滑滚动一页。

scrollArrow

+

scrollArrow

{ reverse: boolean, smooth: boolean }

+

{ reverse: boolean, smooth: boolean }

reverse缺省值为false，表示向底部方向滑动一段距离，无足够距离则滚动到底部。

-

reverse为true，表示向顶部方向滑动一段距离，无足够距离则滚动到顶部。

-

smooth缺省值为false，表示直接滚动。

-

smooth为true，表示平滑滚动。

+

reverse缺省值为false，表示向底部方向滑动一段距离，无足够距离则滚动到底部。

+

reverse为true，表示向顶部方向滑动一段距离，无足够距离则滚动到顶部。

+

smooth缺省值为false，表示直接滚动。

+

smooth为true，表示平滑滚动。

collapseGroup

+

collapseGroup

{ groupid: string }

+

{ groupid: string }

收拢指定的group。

-

groupid：需要收拢的group的id。

-

当groupid未指定时收拢所有的group。

+

收拢指定的group。

+

groupid：需要收拢的group的id。

+

当groupid未指定时收拢所有的group。

expandGroup

+

expandGroup

{ groupid: string }

+

{ groupid: string }

展开指定的group。

-

groupid：需要展开的group的id。

-

当groupid未指定时展开所有的group。

+

展开指定的group。

+

groupid：需要展开的group的id。

+

当groupid未指定时展开所有的group。

currentOffset

+

currentOffset

-

+

-

返回当前滑动的偏移量。返回值类型是Object，返回值说明请见表2。

+

返回当前滑动的偏移量。返回值类型是Object，返回值说明请见表2。

名称

+ - - - - - - - - - - - - - - - - - - - @@ -631,86 +591,84 @@ **表 2** currentOffset返回对象属性说明 -

名称

类型

+

类型

是否必选

+

是否必选

默认值

+

默认值

备注

+

备注

dx

+

dx

number

+

number

否

+

否

0

+

0

水平方向滑动的偏移量，单位为px。

+

水平方向滑动的偏移量，单位为px。

dy

+

dy

number

+

number

否

+

否

0

+

0

垂直方向滑动的偏移量，单位为px。

+

垂直方向滑动的偏移量，单位为px。

smooth

+

smooth

boolean

+

boolean

否

+

否

true

+

true

列表位置跳转时是否有滑动动画。

+

列表位置跳转时是否有滑动动画。

名称

+ - - - - - - - -

名称

类型

+

类型

备注

+

备注

x

+

x

number

+

number

当前x轴滑动偏移量，单位为px。

+

当前x轴滑动偏移量，单位为px。

y

+

y

number

+

number

当前y轴滑动偏移量，单位为px。

+

当前y轴滑动偏移量，单位为px。
- -## 示例 +## 示例 ``` - -
- - - {{$item.title}} - {{$item.date}} - - -
+!-- index.hml --> +
+ + +
+ {{$item.title}} + {{$item.date}} +
+ +
``` ``` // index.js export default { - data: { - todolist: [{ - title: '刷题', - date: '2021-12-31 10:00:00', - }, { - title: '看电影', - date: '2021-12-31 20:00:00', - }], + data: { + todolist: [{ + title: '刷题', + date: '2021-12-31 10:00:00', + }, { + title: '看电影', + date: '2021-12-31 20:00:00', + }], }, } ``` ``` /* index.css */ -.container { - display: flex; - justify-content: center; - align-items: center; - left: 0px; - top: 0px; - width: 454px; - height: 454px; +.container { + display: flex; + justify-content: center; + align-items: center; + width: 100%; + height: 100%; } -.todo-wrapper { - width: 454px; +.todo-wrapper { + width: 100%; height: 300px; } -.todo-item { - width: 454px; - height: 80px; - flex-direction: column; +.todo-item { + width: 100%; + height: 120px; + justify-content:center; } -.todo-title { - width: 454px; - height: 40px; +.todo-title { + width: 100%; + height: 80px; text-align: center; } ``` -![](figures/33.png) +![](figures/list.png) diff --git a/zh-cn/application-dev/reference/arkui-js/js-components-container-panel.md b/zh-cn/application-dev/reference/arkui-js/js-components-container-panel.md index e09678bd0879165203687d03cbe730966f3b4a3f..c961452d696b142b659a519dcb391d0e6519d569 100644 --- a/zh-cn/application-dev/reference/arkui-js/js-components-container-panel.md +++ b/zh-cn/application-dev/reference/arkui-js/js-components-container-panel.md @@ -2,9 +2,6 @@ 可滑动面板。提供一种轻量的内容展示的窗口，可方便的在不同尺寸中切换。属于弹出式组件。 ->![](../../public_sys-resources/icon-note.gif) **说明：** ->从API Version 5 开始支持。 - ## 子组件 支持 @@ -13,91 +10,90 @@ 除支持[通用属性](js-components-common-attributes.md)外，还支持如下属性： - -

名称

+ - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - @@ -111,289 +107,288 @@ 仅支持如下样式： - -

名称

类型

+

类型

默认值

+

默认值

必填

+

必填

描述

+

描述

type

+

type

string

+

string

foldable

+

foldable

是

+

是

设置可滑动面板类型，不可动态变更，可选值有：

-

  • minibar：提供minibar和类全屏展示切换效果。

    -

  • foldable：内容永久展示类，提供大（类全屏）、中（类半屏）、小三种尺寸展示切换效果。

    -

  • temporary：内容临时展示区，提供大（类全屏）、中（类半屏）两种尺寸展示切换效果。

    +

设置可滑动面板类型，不可动态变更，可选值有：

+

  • minibar：提供minibar和类全屏展示切换效果。

    +

  • foldable：内容永久展示类，提供大（类全屏）、中（类半屏）、小三种尺寸展示切换效果。

    +

  • temporary：内容临时展示区，提供大（类全屏）、中（类半屏）两种尺寸展示切换效果。

mode

+

mode

string

+

string

full

+

full

否

+

否

设置初始状态，mode参数可选值为：

-

  1. mini：类型为minibar和foldable时，为最小状态；类型为temporary，则不生效。

    -

  2. half: 类型为foldable和temporary时，为类半屏状态；类型为minibar，则不生效。

    -

  3. full: 类全屏状态。

    +

设置初始状态，mode参数可选值为：

+

  1. mini：类型为minibar和foldable时，为最小状态；类型为temporary，则不生效。

    +

  2. half: 类型为foldable和temporary时，为类半屏状态；类型为minibar，则不生效。

    +

  3. full: 类全屏状态。

dragbar

+

dragbar

boolean

+

boolean

true

+

true

否

+

否

设置是否存在dragbar，true表示存在，false表示不存在。

+

设置是否存在dragbar，true表示存在，false表示不存在。

fullheight

+

fullheight

<length>

+

<length>

-

+

-

否

+

否

指定full状态下的高度，默认为屏幕尺寸 - 8px。

+

指定full状态下的高度，默认为屏幕尺寸 - 8px。

halfheight

+

halfheight

<length>

+

<length>

-

+

-

否

+

否

指定half状态下的高度，默认为屏幕尺寸的一半。

+

指定half状态下的高度，默认为屏幕尺寸的一半。

miniheight

+

miniheight

<length>

+

<length>

-

+

-

否

+

否

指定mini状态下的高度，默认为48px。

+

指定mini状态下的高度，默认为48px。

名称

+ - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - @@ -403,24 +398,23 @@ 仅支持如下事件： - -

名称

类型

+

类型

默认值

+

默认值

必填

+

必填

描述

+

描述

padding

+

padding

<length>

+

<length>

0

+

0

否

+

否

该属性可以有1到4个值：

  • 指定一个值时，该值指定四个边的内边距。

    -

  • 指定两个值时，第一个值指定上下两边的内边距，第二个指定左右两边的内边距。

    -

  • 指定三个值时，第一个指定上边的内边距，第二个指定左右两边的内边距，第三个指定下边的内边距。

    -

  • 指定四个值时分别为上、右、下、左边的内边距（顺时针顺序）。

    +
该属性可以有1到4个值：

  • 指定一个值时，该值指定四个边的内边距。

    +

  • 指定两个值时，第一个值指定上下两边的内边距，第二个指定左右两边的内边距。

    +

  • 指定三个值时，第一个指定上边的内边距，第二个指定左右两边的内边距，第三个指定下边的内边距。

    +

  • 指定四个值时分别为上、右、下、左边的内边距（顺时针顺序）。

padding-[left|top|right|bottom]

+

padding-[left|top|right|bottom]

<length>

+

<length>

0

+

0

否

+

否

设置左、上、右、下内边距属性。

+

设置左、上、右、下内边距属性。

padding-[start|end]

+

padding-[start|end]

<length>

+

<length>

0

+

0

否

+

否

设置起始和末端内边距属性。

+

设置起始和末端内边距属性。

margin

+

margin

<length>

+

<length>

0

+

0

否

+

否

使用简写属性设置所有的外边距属性，该属性可以有1到4个值。

-

  • 只有一个值时，这个值会被指定给全部的四个边。

    -

  • 两个值时，第一个值被匹配给上和下，第二个值被匹配给左和右。

    -

  • 三个值时，第一个值被匹配给上, 第二个值被匹配给左和右，第三个值被匹配给下。

    -

  • 四个值时，会依次按上、右、下、左的顺序匹配 (即顺时针顺序)。

    +

使用简写属性设置所有的外边距属性，该属性可以有1到4个值。

+

  • 只有一个值时，这个值会被指定给全部的四个边。

    +

  • 两个值时，第一个值被匹配给上和下，第二个值被匹配给左和右。

    +

  • 三个值时，第一个值被匹配给上, 第二个值被匹配给左和右，第三个值被匹配给下。

    +

  • 四个值时，会依次按上、右、下、左的顺序匹配 (即顺时针顺序)。

margin-[left|top|right|bottom]

+

margin-[left|top|right|bottom]

<length>

+

<length>

0

+

0

否

+

否

设置左、上、右、下外边距属性。

+

设置左、上、右、下外边距属性。

margin-[start|end]

+

margin-[start|end]

<length>

+

<length>

0

+

0

否

+

否

设置起始和末端外边距属性。

+

设置起始和末端外边距属性。

border

+

border

-

+

-

0

+

0

否

+

否

使用简写属性设置所有的边框属性，包含边框的宽度，样式，颜色属性，顺序设置为border-width、border-style、border-color，不设置时，各属性值为默认值。

+

使用简写属性设置所有的边框属性，包含边框的宽度，样式，颜色属性，顺序设置为border-width、border-style、border-color，不设置时，各属性值为默认值。

border-style

+

border-style

string

+

string

solid

+

solid

否

+

否

使用简写属性设置所有边框的样式，可选值为：

-
  • dotted：显示为一系列圆点，圆点半径为border-width的一半。
  • dashed：显示为一系列短的方形虚线。
-
  • solid：显示为一条实线。
+

使用简写属性设置所有边框的样式，可选值为：

+
  • dotted：显示为一系列圆点，圆点半径为border-width的一半。
  • dashed：显示为一系列短的方形虚线。
+
  • solid：显示为一条实线。

border-[left|top|right|bottom]-style

+

border-[left|top|right|bottom]-style

string

+

string

solid

+

solid

否

+

否

分别设置左、上、右、下四个边框的样式，可选值为dotted、dashed、solid。

+

分别设置左、上、右、下四个边框的样式，可选值为dotted、dashed、solid。

border-[left|top|right|bottom]

+

border-[left|top|right|bottom]

-

+

-

-

+

-

否

+

否

使用简写属性设置对应位置的边框属性，包含边框的宽度，样式，颜色属性，顺序设置为border-width、border-style、border-color，不设置的值为默认值。

+

使用简写属性设置对应位置的边框属性，包含边框的宽度，样式，颜色属性，顺序设置为border-width、border-style、border-color，不设置的值为默认值。

border-width

+

border-width

<length>

+

<length>

0

+

0

否

+

否

使用简写属性设置元素的所有边框宽度，或者单独为各边边框设置宽度。

+

使用简写属性设置元素的所有边框宽度，或者单独为各边边框设置宽度。

border-[left|top|right|bottom]-width

+

border-[left|top|right|bottom]-width

<length>

+

<length>

0

+

0

否

+

否

分别设置左、上、右、下四个边框的宽度。

+

分别设置左、上、右、下四个边框的宽度。

border-color

+

border-color

<color>

+

<color>

black

+

black

否

+

否

使用简写属性设置元素的所有边框颜色，或者单独为各边边框设置颜色。

+

使用简写属性设置元素的所有边框颜色，或者单独为各边边框设置颜色。

border-[left|top|right|bottom]-color

+

border-[left|top|right|bottom]-color

<color>

+

<color>

black

+

black

否

+

否

分别设置左、上、右、下四个边框的颜色。

+

分别设置左、上、右、下四个边框的颜色。

border-radius

+

border-radius

<length>

+

<length>

-

+

-

否

+

否

border-radius属性是设置元素的外边框圆角半径。设置border-radius时不能单独设置某一个方向的border-[left|top|right|bottom]-width，border-[left|top|right|bottom]-color ，如果要设置color和width，需要将四个方向一起设置（border-width、border-color）。

+

border-radius属性是设置元素的外边框圆角半径。设置border-radius时不能单独设置某一个方向的border-[left|top|right|bottom]-width，border-[left|top|right|bottom]-color ，如果要设置color和width，需要将四个方向一起设置（border-width、border-color）。

border-[top|bottom]-[left|right]-radius

+

border-[top|bottom]-[left|right]-radius

<length>

+

<length>

-

+

-

否

+

否

分别设置左上，右上，右下和左下四个角的圆角半径。

+

分别设置左上，右上，右下和左下四个角的圆角半径。

background

+

background

<linear-gradient>

+

<linear-gradient>

-

+

-

否

+

否

仅支持设置渐变样式，与background-color、background-image不兼容。

+

仅支持设置渐变样式，与background-color、background-image不兼容。

background-color

+

background-color

<color>

+

<color>

-

+

-

否

+

否

设置背景颜色。

+

设置背景颜色。

background-image

+

background-image

string

+

string

-

+

-

否

+

否

设置背景图片。与background-color、background不兼容；支持本地图片资源地址。

+

设置背景图片。与background-color、background不兼容；支持本地图片资源地址。

background-size

+

background-size

  • string
  • <length> <length>
  • <percentage> <percentage>
+
  • string
  • <length> <length>
  • <percentage> <percentage>

auto

+

auto

否

+

否

设置背景图片的大小。

-
  • string可选值：
    • contain：把图像扩展至最大尺寸，以使其高度和宽度完全适用内容区域。
    • cover：把背景图像扩展至足够大，以使背景图像完全覆盖背景区域；背景图像的某些部分也许无法显示在背景定位区域中。
    • auto：保持原图的比例不变。
    -
  • length值参数方式：

    设置背景图像的高度和宽度。第一个值设置宽度，第二个值设置高度。如果只设置一个值，则第二个值会被设置为 "auto"。

    -
  • 百分比参数方式：

    以父元素的百分比来设置背景图像的宽度和高度。第一个值设置宽度，第二个值设置高度。如果只设置一个值，则第二个值会被设置为 "auto"。

    +

设置背景图片的大小。

+
  • string可选值：
    • contain：把图像扩展至最大尺寸，以使其高度和宽度完全适用内容区域。
    • cover：把背景图像扩展至足够大，以使背景图像完全覆盖背景区域；背景图像的某些部分也许无法显示在背景定位区域中。
    • auto：保持原图的比例不变。
    +
  • length值参数方式：

    设置背景图像的高度和宽度。第一个值设置宽度，第二个值设置高度。如果只设置一个值，则第二个值会被设置为 "auto"。

    +
  • 百分比参数方式：

    以父元素的百分比来设置背景图像的宽度和高度。第一个值设置宽度，第二个值设置高度。如果只设置一个值，则第二个值会被设置为 "auto"。

background-repeat

+

background-repeat

string

+

string

repeat

+

repeat

否

+

否

针对重复背景图像样式进行设置，背景图像默认在水平和垂直方向上重复。

-
  • repeat：在水平轴和竖直轴上同时重复绘制图片。
  • repeat-x：只在水平轴上重复绘制图片。
  • repeat-y：只在竖直轴上重复绘制图片。
  • no-repeat：不会重复绘制图片。
+

针对重复背景图像样式进行设置，背景图像默认在水平和垂直方向上重复。

+
  • repeat：在水平轴和竖直轴上同时重复绘制图片。
  • repeat-x：只在水平轴上重复绘制图片。
  • repeat-y：只在竖直轴上重复绘制图片。
  • no-repeat：不会重复绘制图片。

background-position

+

background-position

  • string string
  • <length> <length>
  • <percentage> <percentage>
+
  • string string
  • <length> <length>
  • <percentage> <percentage>

0px 0px

+

0px 0px

否

+

否

  • 关键词方式：如果仅规定了一个关键词，那么第二个值为"center"。两个值分别定义水平方向位置和竖直方向位置。
    • left：水平方向上最左侧。
    • right：水平方向上最右侧。
    • top：竖直方向上最顶部。
    • bottom：竖直方向上最底部。
    • center：水平方向或竖直方向上中间位置。
    +
  • 关键词方式：如果仅规定了一个关键词，那么第二个值为"center"。两个值分别定义水平方向位置和竖直方向位置。
    • left：水平方向上最左侧。
    • right：水平方向上最右侧。
    • top：竖直方向上最顶部。
    • bottom：竖直方向上最底部。
    • center：水平方向或竖直方向上中间位置。
-
  • length值参数方式：第一个值是水平位置，第二个值是垂直位置。 左上角是 0 0。单位是像素 (0px 0px) 。如果仅规定了一个值，另外一个值将是50%。
  • 百分比参数方式：第一个值是水平位置，第二个值是垂直位置。左上角是 0% 0%。右下角是 100% 100%。如果仅规定了一个值，另外一个值为50%。
  • 可以混合使用<percentage>和<length>
+
  • length值参数方式：第一个值是水平位置，第二个值是垂直位置。 左上角是 0 0。单位是像素 (0px 0px) 。如果仅规定了一个值，另外一个值将是50%。
  • 百分比参数方式：第一个值是水平位置，第二个值是垂直位置。左上角是 0% 0%。右下角是 100% 100%。如果仅规定了一个值，另外一个值为50%。
  • 可以混合使用<percentage>和<length>

opacity

+

opacity

number

+

number

1

+

1

否

+

否

元素的透明度，取值范围为0到1，1表示为不透明，0表示为完全透明。

+

元素的透明度，取值范围为0到1，1表示为不透明，0表示为完全透明。

名称

+ - - - - - @@ -432,27 +426,26 @@ 仅支持如下方法： - -

名称

参数

+

参数

描述

+

描述

sizechange

+

sizechange

{ size: { height: heightLength, width: widthLength }, mode: modeStr }

+

{ size: { height: heightLength, width: widthLength }, mode: modeStr }

当可滑动面板发生状态变化时触发，mode参数可选值为：

-

  1. mini：类型为minibar和foldable时，处于最小状态；

    -

  2. half: 类型为foldable时，处于类半屏状态；

    -

  3. full: 类全屏状态。

    -
    说明：

    返回的height值为内容区高度值，当dragbar属性为true时，panel本身的高度值为dragbar高度加上内容区高度。

    +

当可滑动面板发生状态变化时触发，mode参数可选值为：

+

  1. mini：类型为minibar和foldable时，处于最小状态；

    +

  2. half: 类型为foldable时，处于类半屏状态；

    +

  3. full: 类全屏状态。

    +
    说明：

    返回的height值为内容区高度值，当dragbar属性为true时，panel本身的高度值为dragbar高度加上内容区高度。

名称

+ - - - - - - - - diff --git a/zh-cn/application-dev/reference/arkui-js/js-components-container-popup.md b/zh-cn/application-dev/reference/arkui-js/js-components-container-popup.md index f4ccffc48d6297ec280e84f4ca5868ae3402bf5d..f38f0c4908afea5d258dad4856b5cb5eb117a4fd 100644 --- a/zh-cn/application-dev/reference/arkui-js/js-components-container-popup.md +++ b/zh-cn/application-dev/reference/arkui-js/js-components-container-popup.md @@ -14,73 +14,72 @@ 除支持[通用属性](js-components-common-attributes.md)外，还支持如下属性：↵ - -

名称

参数

+

参数

描述

+

描述

show

+

show

-

+

-

弹出panel可滑动面板。

+

弹出panel可滑动面板。

close

+

close

-

+

-

关闭panel可滑动面板。

+

关闭panel可滑动面板。

名称

+ - - - - - - - - - - - - - - - - - - - - - - - - - - - - - @@ -93,28 +92,27 @@ 除支持[通用样式](js-components-common-styles.md)外，还支持如下样式： - -

名称

类型

+

类型

默认值

+

默认值

必填

+

必填

描述

+

描述

target

+

target

string

+

string

-

+

-

是

+

是

目标元素的id属性值，不支持动态切换。

+

目标元素的id属性值，不支持动态切换。

placement

+

placement

string

+

string

bottom

+

bottom

否

+

否

弹出窗口位置。可选值为：

-
  • left：位于目标元素左边；
  • right：位于目标元素右边；
  • top：位于目标元素上边；
  • bottom：位于目标元素下边；
  • topLeft：位于目标元素左上角；
  • topRight：位于目标元素右上角；
  • bottomLeft：位于目标元素左下角；
  • bottomRight：位于目标元素右下角。
+

弹出窗口位置。可选值为：

+
  • left：位于目标元素左边；
  • right：位于目标元素右边；
  • top：位于目标元素上边；
  • bottom：位于目标元素下边；
  • topLeft：位于目标元素左上角；
  • topRight：位于目标元素右上角；
  • bottomLeft：位于目标元素左下角；
  • bottomRight：位于目标元素右下角。

keepalive5+

+

keepalive5+

boolean

+

boolean

false

+

false

否

+

否

设置当前popup是否需要保留。设置为true时，点击屏幕区域或者页面切换气泡不会消失，需调用气泡组件的hide方法才可让气泡消失；设置为false时，点击屏幕区域或者页面切换气泡会自动消失。

+

设置当前popup是否需要保留。设置为true时，点击屏幕区域或者页面切换气泡不会消失，需调用气泡组件的hide方法才可让气泡消失；设置为false时，点击屏幕区域或者页面切换气泡会自动消失。

clickable5+

+

clickable5+

boolean

+

boolean

true

+

true

否

+

否

popup是否使用点击弹窗，当设置为false时，只支持方法调用显示。

+

popup是否使用点击弹窗，当设置为false时，只支持方法调用显示。

arrowoffset5+

+

arrowoffset5+

<length>

+

<length>

0

+

0

否

+

否

popup箭头在弹窗处的偏移，默认居中，正值按照语言方向进行偏移，负值相反。

+

popup箭头在弹窗处的偏移，默认居中，正值按照语言方向进行偏移，负值相反。

名称

+ - - - - - - - - - @@ -127,20 +125,19 @@ 除支持[通用事件](js-components-common-events.md)外，还支持如下事件： - -

名称

类型

+

类型

默认值

+

默认值

必填

+

必填

描述

+

描述

mask-color

+

mask-color

<color>

+

<color>

-

+

-

否

+

否

遮罩层的颜色，默认值为全透明。

+

遮罩层的颜色，默认值为全透明。

名称

+ - - - - - @@ -150,27 +147,26 @@ 仅支持如下方法： - -

名称

参数

+

参数

描述

+

描述

visibilitychange

+

visibilitychange

{ visibility: boolean }

+

{ visibility: boolean }

当气泡弹出和消失时会触发该回调函数。

+

当气泡弹出和消失时会触发该回调函数。

名称

+ - - - - - - - - diff --git a/zh-cn/application-dev/reference/arkui-js/js-components-container-refresh.md b/zh-cn/application-dev/reference/arkui-js/js-components-container-refresh.md index f8946083336227633bb55603a896119c2e5f690c..c026bdcaead2a1a83e35fb552b52a58344cac98e 100644 --- a/zh-cn/application-dev/reference/arkui-js/js-components-container-refresh.md +++ b/zh-cn/application-dev/reference/arkui-js/js-components-container-refresh.md @@ -14,85 +14,84 @@ 除支持[通用属性](js-components-common-attributes.md)外，还支持如下属性： - -

名称

参数

+

参数

描述

+

描述

show5+

+

show5+

-

+

-

弹出气泡提示。

+

弹出气泡提示。

hide5+

+

hide5+

-

+

-

取消气泡提示。

+

取消气泡提示。

名称

+ - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - @@ -103,39 +102,38 @@ 除支持[通用样式](js-components-common-styles.md)外，还支持如下样式： - -

名称

类型

+

类型

默认值

+

默认值

必填

+

必填

描述

+

描述

offset

+

offset

<length>

+

<length>

-

+

-

否

+

否

刷新组件静止时距离父组件顶部的距离。

+

刷新组件静止时距离父组件顶部的距离。

refreshing

+

refreshing

boolean

+

boolean

false

+

false

否

+

否

用于标识刷新组件当前是否正在刷新。

+

用于标识刷新组件当前是否正在刷新。

type

+

type

string

+

string

auto

+

auto

否

+

否

设置组件刷新时的动效。两个可选值，不支持动态修改。

-
  • auto: 默认效果，列表界面拉到顶后，列表不移动，下拉后有转圈弹出。
  • pulldown: 列表界面拉到顶后，可以继续往下滑动一段距离触发刷新，刷新完成后有回弹效果（如果子组件含有list，防止下拉效果冲突，需将list的scrolleffect设置为no）。
+

设置组件刷新时的动效。两个可选值，不支持动态修改。

+
  • auto: 默认效果，列表界面拉到顶后，列表不移动，下拉后有转圈弹出。
  • pulldown: 列表界面拉到顶后，可以继续往下滑动一段距离触发刷新，刷新完成后有回弹效果（如果子组件含有list，防止下拉效果冲突，需将list的scrolleffect设置为no）。

lasttime

+

lasttime

boolean

+

boolean

false

+

false

否

+

否

是否显示上次更新时间，字符串格式为：“上次更新时间：XXXX ”，XXXX 按照时间日期显示规范显示，不可动态修改（建议type为pulldown时使用，固定距离位于内容下拉区域底部，使用时注意offset属性设置，防止出现重叠）。

+

是否显示上次更新时间，字符串格式为：“上次更新时间：XXXX ”，XXXX 按照时间日期显示规范显示，不可动态修改（建议type为pulldown时使用，固定距离位于内容下拉区域底部，使用时注意offset属性设置，防止出现重叠）。

timeoffset6+

+

timeoffset6+

<length>

+

<length>

-

+

-

否

+

否

设置更新时间距离父组件顶部的距离。

+

设置更新时间距离父组件顶部的距离。

friction

+

friction

number

+

number

42

+

42

否

+

否

下拉摩擦系数，取值范围：0-100，数值越大refresh组件跟手性高，数值越小refresh跟手性低。

-
说明：

仅手机、平板和智能穿戴设备支持。

+

下拉摩擦系数，取值范围：0-100，数值越大refresh组件跟手性高，数值越小refresh跟手性低。

+
说明：

仅手机、平板和智能穿戴设备支持。

名称

+ - - - - - - - - - - - - - - @@ -145,29 +143,28 @@ 仅支持如下事件： - -

名称

类型

+

类型

默认值

+

默认值

必填

+

必填

描述

+

描述

background-color

+

background-color

<color>

+

<color>

white

+

white

否

+

否

用于设置刷新组件的背景颜色。

+

用于设置刷新组件的背景颜色。

progress-color

+

progress-color

<color>

+

<color>

black

+

black

否

+

否

用于设置刷新组件的loading颜色。

+

用于设置刷新组件的loading颜色。

名称

+ - - - - - - - - diff --git a/zh-cn/application-dev/reference/arkui-js/js-components-container-stepper-item.md b/zh-cn/application-dev/reference/arkui-js/js-components-container-stepper-item.md index 17dc2bc46733112867a8ae249c468f037cad9942..be9790a514403b09fde99a0c55258a4bc5bff300 100644 --- a/zh-cn/application-dev/reference/arkui-js/js-components-container-stepper-item.md +++ b/zh-cn/application-dev/reference/arkui-js/js-components-container-stepper-item.md @@ -2,9 +2,6 @@ 步骤导航器子组件，作为步骤导航器某一个步骤的内容展示组件。 ->![](../../public_sys-resources/icon-note.gif) **说明：** ->从API Version 5 开始支持。 - ## 权限列表 无 @@ -17,28 +14,27 @@ 除支持[通用属性](js-components-common-attributes.md)外，还支持如下属性： - -

名称

参数

+

参数

描述

+

描述

refresh

+

refresh

{ refreshing: refreshingValue }

+

{ refreshing: refreshingValue }

下拉刷新状态变化时触发。可能值：

-
  • false：当前处于下拉刷新过程中。
  • true：当前未处于下拉刷新过程中。
+

下拉刷新状态变化时触发。可能值：

+
  • false：当前处于下拉刷新过程中。
  • true：当前未处于下拉刷新过程中。

pulldown

+

pulldown

{ state: string }

+

{ state: string }

下拉开始和松手时触发。可能值：

-
  • start：表示开始下拉。
  • end：表示结束下拉。
+

下拉开始和松手时触发。可能值：

+
  • start：表示开始下拉。
  • end：表示结束下拉。

名称

+ - - - - - - - - - @@ -47,44 +43,44 @@ **表 1** Label对象定义 -

名称

类型

+

类型

默认值

+

默认值

必填

+

必填

描述

+

描述

label

+

label

Label

+

Label

-

+

-

否

+

否

自定义步骤导航器底部步骤提示文本按钮属性，不支持动态修改。如果没有定义该属性，步骤导航器在中文语言环境下，使用“返回”和“下一步”文本按钮，在非中文语言环境下，使用“BACK”和“NEXT”文本按钮。针对第一个步骤，没有回退文本按钮，针对最后一个步骤，下一步文本按钮文本使用“开始”（中文语言）或者“START”（非中文语言）。

+

自定义步骤导航器底部步骤提示文本按钮属性，不支持动态修改。如果没有定义该属性，步骤导航器在中文语言环境下，使用“返回”和“下一步”文本按钮，在非中文语言环境下，使用“BACK”和“NEXT”文本按钮。针对第一个步骤，没有回退文本按钮，针对最后一个步骤，下一步文本按钮文本使用“开始”（中文语言）或者“START”（非中文语言）。

名称

+ - - - - - - - - - - - - - - - @@ -94,96 +90,95 @@ 除支持[通用样式](js-components-common-styles.md)外，还支持如下样式： - -

名称

类型

+

类型

默认值

+

默认值

描述

+

描述

prevLabel

+

prevLabel

string

+

string

-

+

-

步骤导航器底部回退文本按钮的描述文本。

+

步骤导航器底部回退文本按钮的描述文本。

nextLabel

+

nextLabel

string

+

string

-

+

-

步骤导航器底部下一步文本按钮的描述文本。

+

步骤导航器底部下一步文本按钮的描述文本。

status

+

status

string

+

string

normal

+

normal

步骤导航器当前步骤的初始状态，可选值为：

-
  • normal：正常状态，右侧文本按钮正常显示，可点击进入下一个步骤。
-
  • disabled：不可用状态，右侧文本按钮灰度显示，不可点击进入下一个步骤。
-
  • waiting：等待状态，右侧文本按钮不显示，使用等待进度条，不可点击进入下一个步骤。
+

步骤导航器当前步骤的初始状态，可选值为：

+
  • normal：正常状态，右侧文本按钮正常显示，可点击进入下一个步骤。
+
  • disabled：不可用状态，右侧文本按钮灰度显示，不可点击进入下一个步骤。
+
  • waiting：等待状态，右侧文本按钮不显示，使用等待进度条，不可点击进入下一个步骤。

名称

+ - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - @@ -197,27 +192,26 @@ 除支持[通用事件](js-components-common-events.md)外，还支持如下事件： - -

名称

类型

+

类型

默认值

+

默认值

必填

+

必填

描述

+

描述

color

+

color

<color>

+

<color>

-

+

-

否

+

否

文本颜色。

+

文本颜色。

font-size

+

font-size

<length>

+

<length>

-

+

-

否

+

否

文本大小。

+

文本大小。

allow-scale

+

allow-scale

boolean

+

boolean

true

+

true

否

+

否

文本尺寸是否跟随系统设置字体缩放尺寸进行放大缩小。

+

文本尺寸是否跟随系统设置字体缩放尺寸进行放大缩小。

font-style

+

font-style

string

+

string

normal

+

normal

否

+

否

文本字体样式，可选值为：

-
  • normal: 标准的字体样式；
  • italic: 斜体的字体样式。
+

文本字体样式，可选值为：

+
  • normal: 标准的字体样式；
  • italic: 斜体的字体样式。

font-weight

+

font-weight

number|string

+

number|string

normal

+

normal

否

+

否

文本字体粗细，number类型取值[100, 900]的整数（被100整除），默认为400，取值越大，字体越粗。string类型取值为：lighter、normal、bold、bolder。

+

文本字体粗细，number类型取值[100, 900]的整数（被100整除），默认为400，取值越大，字体越粗。string类型取值为：lighter、normal、bold、bolder。

text-decoration

+

text-decoration

string

+

string

none

+

none

否

+

否

文本修饰，可选值为：

-
  • underline: 文本下划线修饰。
  • line-through: 穿过文本的修饰线。
  • none: 标准文本。
+

文本修饰，可选值为：

+
  • underline: 文本下划线修饰。
  • line-through: 穿过文本的修饰线。
  • none: 标准文本。

font-family

+

font-family

string

+

string

sans-serif

+

sans-serif

否

+

否

字体列表，用逗号分隔，每个字体用字体名或者字体族名设置。列表中第一个系统中存在的或者通过自定义字体指定的字体，会被选中作为文本的字体。

+

字体列表，用逗号分隔，每个字体用字体名或者字体族名设置。列表中第一个系统中存在的或者通过自定义字体指定的字体，会被选中作为文本的字体。

名称

+ - - - - - - - - diff --git a/zh-cn/application-dev/reference/arkui-js/js-components-container-stepper.md b/zh-cn/application-dev/reference/arkui-js/js-components-container-stepper.md index 75be6aec15a52048d66958618c34a781e8aebcbe..b41c50933e92d8cc97bc7527cc79defa6a8e5532 100644 --- a/zh-cn/application-dev/reference/arkui-js/js-components-container-stepper.md +++ b/zh-cn/application-dev/reference/arkui-js/js-components-container-stepper.md @@ -2,9 +2,6 @@ 步骤导航器。当完成一个任务需要多个步骤时，可以使用步骤导航器展示当前进展。 ->![](../../public_sys-resources/icon-note.gif) **说明：** ->从API Version 5 开始支持。 - ## 权限列表 无 @@ -20,24 +17,23 @@ 除支持[通用属性](js-components-common-attributes.md)外，还支持如下属性： - -

名称

参数

+

参数

描述

+

描述

appear

+

appear

-

+

-

当该步骤出现时触发。

+

当该步骤出现时触发。

disappear

+

disappear

-

+

-

当该步骤消失时触发。

+

当该步骤消失时触发。

名称

+ - - - - - - - @@ -54,48 +50,47 @@ 除支持[通用事件](js-components-common-events.md)外，还支持如下事件： - -

名称

类型

+

类型

默认值

+

默认值

描述

+

描述

index

+

index

number

+

number

-

+

-

设置步骤导航器步骤显示第几个stepper-item子组件。

+

设置步骤导航器步骤显示第几个stepper-item子组件。

名称

+ - - - - - - - - - - - - - - - - - @@ -105,21 +100,20 @@ 除支持[通用方法](js-components-common-methods.md)外，支持如下方法： - -

名称

参数

+

参数

描述

+

描述

finish

+

finish

无

+

无

当步骤导航器最后一个步骤完成时触发该事件。

+

当步骤导航器最后一个步骤完成时触发该事件。

skip

+

skip

无

+

无

当通过setNextButtonStatus方法设置当前步骤导航器可跳过时，点击右侧跳过按钮触发该事件。

+

当通过setNextButtonStatus方法设置当前步骤导航器可跳过时，点击右侧跳过按钮触发该事件。

change

+

change

{ prevIndex：prevIndex, index: index}

+

{ prevIndex：prevIndex, index: index}

当步骤导航器点击左边或者右边文本按钮进行步骤切换时触发该事件，prevIndex表示老步骤的序号，index表示新步骤的序号。

+

当步骤导航器点击左边或者右边文本按钮进行步骤切换时触发该事件，prevIndex表示老步骤的序号，index表示新步骤的序号。

next

+

next

{ index：index, pendingIndex: pendingIndex }

+

{ index：index, pendingIndex: pendingIndex }

当用户点击下一步按钮时触发该事件，index表示当前步骤序号，pendingIndex表示将于跳转的序号，该事件有返回值，返回值格式为：{ pendingIndex：pendingIndex }，可以通过指定pendingIndex来修改下一个步骤使用哪个stepper-item子组件。

+

当用户点击下一步按钮时触发该事件，index表示当前步骤序号，pendingIndex表示将于跳转的序号，该事件有返回值，返回值格式为：{ pendingIndex：pendingIndex }，可以通过指定pendingIndex来修改下一个步骤使用哪个stepper-item子组件。

back

+

back

{ index：index, pendingIndex: pendingIndex }

+

{ index：index, pendingIndex: pendingIndex }

当用户点击上一步按钮时触发该事件，index表示当前步骤序号，pendingIndex表示将于跳转的序号，该事件有返回值，返回值格式为Object：{ pendingIndex：pendingIndex }，可以通过指定pendingIndex来修改上一个步骤使用哪个stepper-item子组件。

+

当用户点击上一步按钮时触发该事件，index表示当前步骤序号，pendingIndex表示将于跳转的序号，该事件有返回值，返回值格式为Object：{ pendingIndex：pendingIndex }，可以通过指定pendingIndex来修改上一个步骤使用哪个stepper-item子组件。

名称

+ - - - - - diff --git a/zh-cn/application-dev/reference/arkui-js/js-components-container-swiper.md b/zh-cn/application-dev/reference/arkui-js/js-components-container-swiper.md index 314fc8d970a22187ee2e3c9b1123353c580d07f9..cfa71c0ab71af766d8068b4dd5eb3493b1867c71 100644 --- a/zh-cn/application-dev/reference/arkui-js/js-components-container-swiper.md +++ b/zh-cn/application-dev/reference/arkui-js/js-components-container-swiper.md @@ -14,154 +14,140 @@ 除支持[通用属性](js-components-common-attributes.md)外，还支持如下属性： - -

名称

参数

+

参数

描述

+

描述

setNextButtonStatus

+

setNextButtonStatus

{ status: string, label: label }

+

{ status: string, label: label }

设置当前步骤导航器下一步文本按钮的状态，参数中status类型为string，可选值为：

-
  1. normal：正常状态，下一步文本按钮正常显示，可点击进入下一个步骤；
  2. disabled：不可用状态，下一步文本按钮灰度显示，不可点击进入下一个步骤；
  3. waiting：等待状态，下一步文本按钮不显示，使用等待进度条，不可点击进入下一个步骤。
  4. skip：跳过状态，下一步文本按钮显示跳过按钮，点击时会跳过剩下步骤。
+

设置当前步骤导航器下一步文本按钮的状态，参数中status类型为string，可选值为：

+
  1. normal：正常状态，下一步文本按钮正常显示，可点击进入下一个步骤；
  2. disabled：不可用状态，下一步文本按钮灰度显示，不可点击进入下一个步骤；
  3. waiting：等待状态，下一步文本按钮不显示，使用等待进度条，不可点击进入下一个步骤。
  4. skip：跳过状态，下一步文本按钮显示跳过按钮，点击时会跳过剩下步骤。

名称

+ - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - @@ -173,83 +159,82 @@ 除支持[通用样式](js-components-common-styles.md)外，还支持如下样式： - -

名称

类型

+

类型

默认值

+

默认值

必填

+

必填

描述

+

描述

index

+

index

number

+

number

0

+

0

否

+

否

当前在容器中显示的子组件的索引值。

+

当前在容器中显示的子组件的索引值。

autoplay

+

autoplay

boolean

+

boolean

false

+

false

否

+

否

子组件是否自动播放，自动播放状态下，导航点不可操作5+。

+

子组件是否自动播放，自动播放状态下，导航点不可操作5+。

interval

+

interval

number

+

number

3000

+

3000

否

+

否

使用自动播放时播放的时间间隔，单位为ms。

+

使用自动播放时播放的时间间隔，单位为ms。

indicator

+

indicator

boolean

+

boolean

true

+

true

否

+

否

是否启用导航点指示器，默认true。

+

是否启用导航点指示器，默认true。

digital5+

+

digital5+

boolean

+

boolean

false

+

false

否

+

否

是否启用数字导航点，默认为false。

-
说明：

必须设置indicator时才能生效数字导航点。

+

是否启用数字导航点，默认为false。

+
说明：

必须设置indicator时才能生效数字导航点。

indicatormask

+

indicatordisabled5+

boolean

+

boolean

false

+

false

否

+

否

是否采用指示器蒙版，设置为true时，指示器会有渐变蒙版出现。

-
说明：

手机上不生效5+。

-
-

indicatordisabled5+

-

boolean

-

false

-

否

-

指示器是否禁止用户手势操作，设置为true时，指示器不会响应用户的点击拖拽。

+

指示器是否禁止用户手势操作，设置为true时，指示器不会响应用户的点击拖拽。

loop

+

loop

boolean

+

boolean

true

+

true

否

+

否

是否开启循环滑动。

+

是否开启循环滑动。

duration

+

duration

number

+

number

-

+

-

否

+

否

子组件切换的动画时长。

+

子组件切换的动画时长。

vertical

+

vertical

boolean

+

boolean

false

+

false

否

+

否

是否为纵向滑动，纵向滑动时采用纵向的指示器。

+

是否为纵向滑动，纵向滑动时采用纵向的指示器。

cachedsize7+

+

cachedsize7+

number

+

number

-1

+

-1

否

+

否

swiper延迟加载时item最少缓存数量。-1表示全部缓存。

+

swiper延迟加载时item最少缓存数量。-1表示全部缓存。

scrolleffect7+

+

scrolleffect7+

string

+

string

spring

+

spring

否

+

否

滑动效果。目前支持如下：

-
  • spring：弹性物理动效，滑动到边缘后可以根据初始速度或通过触摸事件继续滑动一段距离，松手后回弹。
  • fade：渐隐物理动效，滑动到边缘后展示一个波浪形的渐隐，根据速度和滑动距离的变化渐隐也会发送一定的变化
  • none：滑动到边缘后无效果。
    说明：

    该属性仅在loop属性为false时生效。

    +

滑动效果。目前支持如下：

+
  • spring：弹性物理动效，滑动到边缘后可以根据初始速度或通过触摸事件继续滑动一段距离，松手后回弹。
  • fade：渐隐物理动效，滑动到边缘后展示一个波浪形的渐隐，根据速度和滑动距离的变化渐隐也会发送一定的变化
  • none：滑动到边缘后无效果。
    说明：

    该属性仅在loop属性为false时生效。

名称

+ - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - @@ -259,34 +244,33 @@ 除支持[通用事件](js-components-common-events.md)外，还支持如下事件： - -

名称

类型

+

类型

默认值

+

默认值

必填

+

必填

描述

+

描述

indicator-color

+

indicator-color

<color>

+

<color>

-

+

-

否

+

否

导航点指示器的填充颜色。

+

导航点指示器的填充颜色。

indicator-selected-color

+

indicator-selected-color

<color>

+

<color>

#ff007dff

+

#ff007dff

否

+

否

导航点指示器选中的颜色。

+

导航点指示器选中的颜色。

indicator-size

+

indicator-size

<length>

+

<length>

4px

+

4px

否

+

否

导航点指示器的直径大小。

+

导航点指示器的直径大小。

indicator-top|left|right|bottom

+

indicator-top|left|right|bottom

<length> | <percentage>

+

<length> | <percentage>

-

+

-

否

+

否

导航点指示器在swiper中的相对位置。

+

导航点指示器在swiper中的相对位置。

next-margin7+

+

next-margin7+

<length> | <percentage>

+

<length> | <percentage>

-

+

-

否

+

否

后边距，用于露出后一项的一小部分。

+

后边距，用于露出后一项的一小部分。

previous-margin7+

+

previous-margin7+

<length> | <percentage>

+

<length> | <percentage>

-

+

-

否

+

否

前边距，用于露出前一项的一小部分。

+

前边距，用于露出前一项的一小部分。

名称

+ - - - - - - - - - - - @@ -296,34 +280,33 @@ 除支持[通用方法](js-components-common-methods.md)外，还支持如下方法： - -

名称

参数

+

参数

描述

+

描述

change

+

change

{ index: currentIndex }

+

{ index: currentIndex }

当前显示的组件索引变化时触发该事件。

+

当前显示的组件索引变化时触发该事件。

rotation

+

rotation

{ value: rotationValue }

+

{ value: rotationValue }

智能穿戴表冠旋转事件触发时的回调。

+

智能穿戴表冠旋转事件触发时的回调。

animationfinish7+

+

animationfinish7+

-

+

-

动画结束时触发该事件。

+

动画结束时触发该事件。

名称

+ - - - - - - - - - - - diff --git a/zh-cn/application-dev/reference/arkui-js/js-components-container-tab-bar.md b/zh-cn/application-dev/reference/arkui-js/js-components-container-tab-bar.md index fd3a81385a3f9bd0848351e5a8cf91c40c4076ba..6234c0678915521727aa08dbf301aeaf5d1057db 100644 --- a/zh-cn/application-dev/reference/arkui-js/js-components-container-tab-bar.md +++ b/zh-cn/application-dev/reference/arkui-js/js-components-container-tab-bar.md @@ -14,29 +14,28 @@ 除支持[通用属性](js-components-common-attributes.md)外，还支持如下属性： - -

名称

参数

+

参数

描述

+

描述

swipeTo

+

swipeTo

{ index: number(指定位置) }

+

{ index: number(指定位置) }

切换到index位置的子组件。

+

切换到index位置的子组件。

showNext

+

showNext

无

+

无

显示下一个子组件。

+

显示下一个子组件。

showPrevious

+

showPrevious

无

+

无

显示上一个子组件。

+

显示上一个子组件。

名称

+ - - - - - - - - - diff --git a/zh-cn/application-dev/reference/arkui-js/js-components-container-tab-content.md b/zh-cn/application-dev/reference/arkui-js/js-components-container-tab-content.md index 825ba2c74ed23998c4b245b4cdeeff67f64b0ef1..0fc30eb91f185f8feac2191e068dcd32324bf753 100644 --- a/zh-cn/application-dev/reference/arkui-js/js-components-container-tab-content.md +++ b/zh-cn/application-dev/reference/arkui-js/js-components-container-tab-content.md @@ -14,28 +14,27 @@ 除支持[通用属性](js-components-common-attributes.md)外，还支持如下属性： - -

名称

类型

+

类型

默认值

+

默认值

必填

+

必填

描述

+

描述

mode

+

mode

string

+

string

scrollable

+

scrollable

否

+

否

设置组件宽度的可延展性。可选值为：

-
  • scrollable：子组件宽度为实际设置的宽度，当宽度之和（包括margin边距）大于tab-bar的宽度时，子组件可以横向滑动。
  • fixed：子组件宽度均分tab-bar的宽度。
+

设置组件宽度的可延展性。可选值为：

+
  • scrollable：子组件宽度为实际设置的宽度，当宽度之和（包括margin边距）大于tab-bar的宽度时，子组件可以横向滑动。
  • fixed：子组件宽度均分tab-bar的宽度。

名称

+ - - - - - - - - - diff --git a/zh-cn/application-dev/reference/arkui-js/js-components-container-tabs.md b/zh-cn/application-dev/reference/arkui-js/js-components-container-tabs.md index 4878075de0d04afb977a8ef54511b4d9254c8547..73d2d2daaaf7fe72e81e184feb2795bfdc5d1beb 100644 --- a/zh-cn/application-dev/reference/arkui-js/js-components-container-tabs.md +++ b/zh-cn/application-dev/reference/arkui-js/js-components-container-tabs.md @@ -14,40 +14,39 @@ tab页签容器。 除支持[通用属性](js-components-common-attributes.md)外，还支持如下属性： - -

名称

类型

+

类型

默认值

+

默认值

必填

+

必填

描述

+

描述

scrollable

+

scrollable

boolean

+

boolean

true

+

true

否

+

否

是否可以通过左右滑动进行页面切换。默认为true，设置为false后，页面的切换只能通过tab-bar的点击实现。

+

是否可以通过左右滑动进行页面切换。默认为true，设置为false后，页面的切换只能通过tab-bar的点击实现。

名称

+ - - - - - - - - - - - - - - @@ -61,21 +60,20 @@ tab页签容器。 除支持[通用事件](js-components-common-events.md)外，还支持如下事件： - -

名称

类型

+

类型

默认值

+

默认值

必填

+

必填

描述

+

描述

index

+

index

number

+

number

0

+

0

否

+

否

当前处于激活态的tab索引。

+

当前处于激活态的tab索引。

vertical

+

vertical

boolean

+

boolean

false

+

false

否

+

否

是否为纵向的tab，默认为false，可选值为：

-
  • false：tabbar和tabcontent上下排列。
  • true：tabbar和tabcontent左右排列。
+

是否为纵向的tab，默认为false，可选值为：

+
  • false：tabbar和tabcontent上下排列。
  • true：tabbar和tabcontent左右排列。

名称

+ - - - - - diff --git a/zh-cn/application-dev/reference/arkui-js/js-components-custom-basic-usage.md b/zh-cn/application-dev/reference/arkui-js/js-components-custom-basic-usage.md index 95755c164980d45f3f566b72b8153a76fd890feb..8ac685f138c7c4b31388b86a69814b67dae1769c 100644 --- a/zh-cn/application-dev/reference/arkui-js/js-components-custom-basic-usage.md +++ b/zh-cn/application-dev/reference/arkui-js/js-components-custom-basic-usage.md @@ -27,37 +27,36 @@ >子组件中使用驼峰命名法命名的事件，在父组件中绑定时需要使用短横线分隔命名形式，例如：@children-event表示绑定子组件的childrenEvent事件，如 @children-event="bindParentVmMethod"。 -## 对象 +**表 1** 对象 - -

名称

参数

+

参数

描述

+

描述

change

+

change

{ index: indexValue }

+

{ index: indexValue }

tab页签切换后触发。

-
说明：

动态修改index值不会触发该回调。

+

tab页签切换后触发。

+
说明：

动态修改index值不会触发该回调。

属性

+ - - - - - - - - - - - diff --git a/zh-cn/application-dev/reference/arkui-js/js-components-custom-lifecycle.md b/zh-cn/application-dev/reference/arkui-js/js-components-custom-lifecycle.md index 0b4c5afdf8f0d00e595a21ba7587e28ee081ce24..e4f6ad79419a23bf61e5dfbc7df524224ae47bf4 100644 --- a/zh-cn/application-dev/reference/arkui-js/js-components-custom-lifecycle.md +++ b/zh-cn/application-dev/reference/arkui-js/js-components-custom-lifecycle.md @@ -1,82 +1,81 @@ # 生命周期定义 >![](../../public_sys-resources/icon-note.gif) **说明：** ->从API Version 5 开始支持。 +>从API Version 5 开始支持。后续版本如有新增内容，则采用上角标单独标记该内容的起始版本。 我们为自定义组件提供了一系列生命周期回调方法，便于开发者管理自定义组件的内部逻辑。生命周期主要包括：onInit，onAttached，onDetached，onLayoutReady，onDestroy，onPageShow和onPageHide。下面我们依次介绍一下各个生命周期回调的时机。 - -

属性

类型

+

类型

描述

+

描述

data

+

data

Object/Function

+

Object/Function

页面的数据模型，类型是对象或者函数，如果类型是函数，返回值必须是对象。属性名不能以$或_开头，不要使用保留字for, if, show, tid。

-

data与private和public不能重合使用。

+

页面的数据模型，类型是对象或者函数，如果类型是函数，返回值必须是对象。属性名不能以$或_开头，不要使用保留字for, if, show, tid。

+

data与private和public不能重合使用。(Rich)

props

+

props

Array/Object

+

Array/Object

props用于组件之间的通信，可以通过<tag xxxx='value'>方式传递给组件；props名称必须用小写，不能以$或_开头，不要使用保留字for, if, show, tid。目前props的数据类型不支持Function。

+

props用于组件之间的通信，可以通过<tag xxxx='value'>方式传递给组件；props名称必须用小写，不能以$或_开头，不要使用保留字for, if, show, tid。目前props的数据类型不支持Function。

computed

+

computed

Object

+

Object

用于在读取或设置进行预先处理，计算属性的结果会被缓存。计算属性名不能以$或_开头，不要使用保留字。

+

计算属性，用于在读取或设置时，进行预先处理，其结果会被缓存。计算属性名不能以$或_开头，不要使用保留字。

属性

+ - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - diff --git a/zh-cn/application-dev/reference/arkui-js/js-components-custom-slot.md b/zh-cn/application-dev/reference/arkui-js/js-components-custom-slot.md index d4310dd129fdec030edb69675c13398376195e1e..2a8c3934e4996dda2caa395e5270e1abfe917937 100644 --- a/zh-cn/application-dev/reference/arkui-js/js-components-custom-slot.md +++ b/zh-cn/application-dev/reference/arkui-js/js-components-custom-slot.md @@ -1,7 +1,7 @@ # slot插槽 >![](../../public_sys-resources/icon-note.gif) **说明：** ->从API Version 7 开始支持。 +>从API Version 7 开始支持。后续版本如有新增内容，则采用上角标单独标记该内容的起始版本。 ## 默认插槽 diff --git a/zh-cn/application-dev/reference/arkui-js/js-components-grid-basic-concepts.md b/zh-cn/application-dev/reference/arkui-js/js-components-grid-basic-concepts.md index cb05b4d883a5b1ff2853d8caaa4633970837b9f0..ae70830fb1c0f98cf1e8e910e839cf067daf4aa8 100644 --- a/zh-cn/application-dev/reference/arkui-js/js-components-grid-basic-concepts.md +++ b/zh-cn/application-dev/reference/arkui-js/js-components-grid-basic-concepts.md @@ -11,9 +11,6 @@ 3. 给应用提供一种灵活的间距调整方法，满足特殊场景布局调整的可能性。 ->![](../../public_sys-resources/icon-note.gif) **说明：** ->从API Version 5 开始支持。 - ## 栅格系统的概念 栅格系统有Margins、Gutters、Columns三个属性。 diff --git a/zh-cn/application-dev/reference/arkui-js/js-components-grid-col.md b/zh-cn/application-dev/reference/arkui-js/js-components-grid-col.md index 11f862e5d95e8ed2492fdea16d6af5597646dfa8..76a19eae4f7615deab2bd5c4551cf6fcd87af18e 100644 --- a/zh-cn/application-dev/reference/arkui-js/js-components-grid-col.md +++ b/zh-cn/application-dev/reference/arkui-js/js-components-grid-col.md @@ -1,4 +1,4 @@ -# grid-col +# grid-col grid-col是栅格布局容器grid-row的子容器组件。 @@ -14,83 +14,82 @@ grid-col是栅格布局容器grid-row的子容器组件。 除支持[通用属性](js-components-common-attributes.md)外，还支持如下属性： - -

属性

类型

+

类型

描述

+

描述

触发时机

+

触发时机

onInit

+

onInit

Function

+

Function

初始化自定义组件

+

初始化自定义组件

自定义组件初始化生命周期回调，当自定义组件创建时，触发该回调，主要用于自定义组件中必须使用的数据初始化，该回调只会触发一次调用。

+

自定义组件初始化生命周期回调，当自定义组件创建时，触发该回调，主要用于自定义组件中必须使用的数据初始化，该回调只会触发一次调用。

onAttached

+

onAttached

Function

+

Function

自定义组件装载

+

自定义组件装载

自定义组件被创建后，加入到Page组件树时，触发该回调，该回调触发时，表示组件将被进行显示，该声明周期可用于初始化显示相关数据，通常用于加载图片资源、开始执行动画等场景。。

+

自定义组件被创建后，加入到Page组件树时，触发该回调，该回调触发时，表示组件将被进行显示，该生命周期可用于初始化显示相关数据，通常用于加载图片资源、开始执行动画等场景。

onLayoutReady

+

onLayoutReady

Function

+

Function

自定义组件布局完成

+

自定义组件布局完成

自定义组件插入Page组件树后，将会对自定义组件进行布局计算，调整其内容元素尺寸与位置，当布局计算结束后触发该回调。

+

自定义组件插入Page组件树后，将会对自定义组件进行布局计算，调整其内容元素尺寸与位置，当布局计算结束后触发该回调。

onDetached

+

onDetached

Function

+

Function

自定义组件摘除

+

自定义组件摘除

自定义组件摘除时，触发该回调，常用于停止动画或异步逻辑停止执行的场景。

+

自定义组件摘除时，触发该回调，常用于停止动画或异步逻辑停止执行的场景。

onDestroy

+

onDestroy

Function

+

Function

自定义组件销毁

+

自定义组件销毁

自定义组件销毁时，触发该回调，常用于资源释放。

+

自定义组件销毁时，触发该回调，常用于资源释放。

onPageShow

+

onPageShow

Function

+

Function

自定义组件Page显示

+

自定义组件Page显示

自定义组件所在Page显示后，触发该回调。

+

自定义组件所在Page显示后，触发该回调。

onPageHide

+

onPageHide

Function

+

Function

自定义组件Page隐藏

+

自定义组件Page隐藏

自定义组件所在Page隐藏后，触发该回调。

+

自定义组件所在Page隐藏后，触发该回调。

名称

+ - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - @@ -100,146 +99,145 @@ grid-col是栅格布局容器grid-row的子容器组件。 除支持[通用样式](js-components-common-styles.md)外，还支持如下样式： - -

名称

类型

+

类型

默认值

+

默认值

必填

+

必填

描述

+

描述

xs

+

xs

number|object

+

number|object

-

+

-

否

+

否

在分辨率为xs模式下，设置该项占用列数与偏移列数，当值为number类型时，仅设置列数，也可通过object同时设置占用列数与偏移列数，如{"span": 1, "offset": 0}

+

在分辨率为xs模式下，设置该项占用列数与偏移列数，当值为number类型时，仅设置列数，也可通过object同时设置占用列数与偏移列数，如{"span": 1, "offset": 0}

sm

+

sm

number|object

+

number|object

-

+

-

否

+

否

在分辨率为sm模式下，该项占用列数与偏移列数，当值为number类型时，仅设置列数，也可通过object同时设置占用列数与偏移列数，如{"span": 1, "offset": 0}

+

在分辨率为sm模式下，该项占用列数与偏移列数，当值为number类型时，仅设置列数，也可通过object同时设置占用列数与偏移列数，如{"span": 1, "offset": 0}

md

+

md

number|object

+

number|object

-

+

-

否

+

否

在分辨率为md模式下，该项占用列数与偏移列数，当值为number类型时，仅设置列数，也可通过object同时设置占用列数与偏移列数，如{"span": 1, "offset": 0}

+

在分辨率为md模式下，该项占用列数与偏移列数，当值为number类型时，仅设置列数，也可通过object同时设置占用列数与偏移列数，如{"span": 1, "offset": 0}

lg

+

lg

number|object

+

number|object

-

+

-

否

+

否

在分辨率为lg模式下，该项占用列数与偏移列数，当值为number类型时，仅设置列数，也可通过object同时设置占用列数与偏移列数，如{"span": 1, "offset": 0}

+

在分辨率为lg模式下，该项占用列数与偏移列数，当值为number类型时，仅设置列数，也可通过object同时设置占用列数与偏移列数，如{"span": 1, "offset": 0}

span

+

span

number

+

number

1

+

1

否

+

否

在未设置明确断点时，默认占用列数

+

在未设置明确断点时，默认占用列数

offset

+

offset

number

+

number

0

+

0

否

+

否

未设置具体分辨率模式下偏移时，当前元素延容器布局方向，默认偏移的列数

+

未设置具体分辨率模式下偏移时，当前元素延容器布局方向，默认偏移的列数

名称

+ - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - -

名称

类型

+

类型

默认值

+

默认值

必填

+

必填

描述

+

描述

flex-direction

+

flex-direction

string

+

string

row

+

row

否

+

否

flex容器主轴方向。可选项有：

-
  • column：垂直方向从上到下
  • row：水平方向从左到右
+

flex容器主轴方向。可选项有：

+
  • column：垂直方向从上到下
  • row：水平方向从左到右

flex-wrap

+

flex-wrap

string

+

string

nowrap

+

nowrap

否

+

否

flex容器是单行还是多行显示，该值暂不支持动态修改。可选项有：

-
  • nowrap：不换行，单行显示。
  • wrap：换行，多行显示。
+

flex容器是单行还是多行显示，该值暂不支持动态修改。可选项有：

+
  • nowrap：不换行，单行显示。
  • wrap：换行，多行显示。

justify-content

+

justify-content

string

+

string

flex-start

+

flex-start

否

+

否

flex容器当前行的主轴对齐格式。可选项有：

-
  • flex-start：项目位于容器的开头。
  • flex-end：项目位于容器的结尾。
  • center：项目位于容器的中心。
  • space-between：项目位于各行之间留有空白的容器内。
  • space-around：项目位于各行之前、之间、之后都留有空白的容器内。
+

flex容器当前行的主轴对齐格式。可选项有：

+
  • flex-start：项目位于容器的开头。
  • flex-end：项目位于容器的结尾。
  • center：项目位于容器的中心。
  • space-between：项目位于各行之间留有空白的容器内。
  • space-around：项目位于各行之前、之间、之后都留有空白的容器内。

align-items

+

align-items

string

+

string

stretch

+

stretch

否

+

否

flex容器当前行的交叉轴对齐格式，可选值为：

-
  • stretch：弹性元素被在交叉轴方向被拉伸到与容器相同的高度或宽度。
  • flex-start：元素向交叉轴起点对齐。
  • flex-end：元素向交叉轴终点对齐。
  • center：元素在交叉轴居中。
+

flex容器当前行的交叉轴对齐格式，可选值为：

+
  • stretch：弹性元素被在交叉轴方向被拉伸到与容器相同的高度或宽度。
  • flex-start：元素向交叉轴起点对齐。
  • flex-end：元素向交叉轴终点对齐。
  • center：元素在交叉轴居中。

align-content

+

align-content

string

+

string

flex-start

+

flex-start

否

+

否

交叉轴中有额外的空间时，多行内容对齐格式，可选值为：

-
  • flex-start：所有行从交叉轴起点开始填充。第一行的交叉轴起点边和容器的交叉轴起点边对齐。接下来的每一行紧跟前一行。
  • flex-end：所有行从交叉轴末尾开始填充。最后一行的交叉轴终点和容器的交叉轴终点对齐。同时所有后续行与前一个对齐。
  • center：所有行朝向容器的中心填充。每行互相紧挨，相对于容器居中对齐。容器的交叉轴起点边和第一行的距离相等于容器的交叉轴终点边和最后一行的距离。
  • space-between：所有行在容器中平均分布。相邻两行间距相等。容器的交叉轴起点边和终点边分别与第一行和最后一行的边对齐。
  • space-around：所有行在容器中平均分布，相邻两行间距相等。容器的交叉轴起点边和终点边分别与第一行和最后一行的距离是相邻两行间距的一半。
+

交叉轴中有额外的空间时，多行内容对齐格式，可选值为：

+
  • flex-start：所有行从交叉轴起点开始填充。第一行的交叉轴起点边和容器的交叉轴起点边对齐。接下来的每一行紧跟前一行。
  • flex-end：所有行从交叉轴末尾开始填充。最后一行的交叉轴终点和容器的交叉轴终点对齐。同时所有后续行与前一个对齐。
  • center：所有行朝向容器的中心填充。每行互相紧挨，相对于容器居中对齐。容器的交叉轴起点边和第一行的距离相等于容器的交叉轴终点边和最后一行的距离。
  • space-between：所有行在容器中平均分布。相邻两行间距相等。容器的交叉轴起点边和终点边分别与第一行和最后一行的边对齐。
  • space-around：所有行在容器中平均分布，相邻两行间距相等。容器的交叉轴起点边和终点边分别与第一行和最后一行的距离是相邻两行间距的一半。

display

+

display

string

+

string

flex

+

flex

否

+

否

确定该元素视图框的类型，该值暂不支持动态修改。可选值为：

-
  • flex：弹性布局
  • grid：网格布局
  • none：不渲染此元素
+

确定该元素视图框的类型，该值暂不支持动态修改。可选值为：

+
  • flex：弹性布局
  • grid：网格布局
  • none：不渲染此元素

grid-template-[columns|rows]

+

grid-template-[columns|rows]

string

+

string

1行1列

+

1行1列

否

+

否

用于设置当前网格布局行和列的数量，不设置时默认1行1列，仅当display为grid时生效。

-

示例：如设置grid-template-columns为：

-

(1) 50px 100px 60px：分三列，第一列50px，第二列100px，第三列60px；

-

(2) 1fr 1fr 2fr：分三列，将父组件允许的宽分为4等份，第一列占1份，第二列占一份，第三列占2份；

-

(3) 30% 20% 50%：分三列，将父组件允许的宽为基准，第一列占30%，第二列占20%，第三列占50%；

-

(4) repeat(2,100px)：分两列，第一列100px，第二列100px；

-

(5) auto 1fr 1fr：分三列，第一列自适应内部子组件所需宽度，剩余空间分为两等份，第二列占一份，第三列占一份。

+

用于设置当前网格布局行和列的数量，不设置时默认1行1列，仅当display为grid时生效。

+

示例：如设置grid-template-columns为：

+

(1) 50px 100px 60px：分三列，第一列50px，第二列100px，第三列60px；

+

(2) 1fr 1fr 2fr：分三列，将父组件允许的宽分为4等份，第一列占1份，第二列占一份，第三列占2份；

+

(3) 30% 20% 50%：分三列，将父组件允许的宽为基准，第一列占30%，第二列占20%，第三列占50%；

+

(4) repeat(2,100px)：分两列，第一列100px，第二列100px；

+

(5) auto 1fr 1fr：分三列，第一列自适应内部子组件所需宽度，剩余空间分为两等份，第二列占一份，第三列占一份。

grid-[columns|rows]-gap

+

grid-[columns|rows]-gap

<length>

+

<length>

0

+

0

否

+

否

用于设置行与行的间距或者列与列的间距，也可以支持通过grid-gap设置相同的行列间距，仅当display为grid时生效。

+

用于设置行与行的间距或者列与列的间距，也可以支持通过grid-gap设置相同的行列间距，仅当display为grid时生效。

grid-row-[start|end]

+

grid-row-[start|end]

number

+

number

-

+

-

否

+

否

用于设置当前元素在网格布局中的起止行号，仅当父组件display样式为grid时生效（仅div支持display样式设置为grid）。

+

用于设置当前元素在网格布局中的起止行号，仅当父组件display样式为grid时生效（仅div支持display样式设置为grid）。

grid-column-[start|end]

+

grid-column-[start|end]

number

+

number

-

+

-

否

+

否

用于设置当前元素在网格布局中的起止列号，仅当父组件display样式为grid时生效（仅div支持display样式设置为grid）。

+

用于设置当前元素在网格布局中的起止列号，仅当父组件display样式为grid时生效（仅div支持display样式设置为grid）。
>![](../../public_sys-resources/icon-note.gif) **说明：** ->- 不支持宽度相关样式。 +>不支持宽度相关样式。 ## 事件 @@ -256,14 +254,14 @@ grid-col是栅格布局容器grid-row的子容器组件。
- +
- 內容元素 + Element text
- +
- 內容元素 + Element text
@@ -302,5 +300,5 @@ export default { } ``` -![](figures/44.gif) +![](figures/grid.gif) diff --git a/zh-cn/application-dev/reference/arkui-js/js-components-grid-container.md b/zh-cn/application-dev/reference/arkui-js/js-components-grid-container.md index cf008a31ce856b34085dfe85ff47b1c8a94cadfb..3e76f756fc28f489f9623b63933e5795942a15b4 100644 --- a/zh-cn/application-dev/reference/arkui-js/js-components-grid-container.md +++ b/zh-cn/application-dev/reference/arkui-js/js-components-grid-container.md @@ -14,62 +14,61 @@ 除支持[通用属性](js-components-common-attributes.md)外，还支持如下属性： - -

名称

+ - - - - - - - - - - - - - - - - - - - - - - - - @@ -78,88 +77,88 @@ **表 1** gridtemplate可选值说明6+ -

名称

类型

+

类型

默认值

+

默认值

必填

+

必填

描述

+

描述

columns

+

columns

string | number

+

string | number

auto

+

auto

否

+

否

设置当前布局总列数，使用string类型时仅支持auto，配置为auto时按照当前的sizetype决定总列数：

-
  • xs：2列
  • sm：4列
  • md：8列
  • lg：12列
+

设置当前布局总列数，使用string类型时仅支持auto，配置为auto时按照当前的sizetype决定总列数：

+
  • xs：2列
  • sm：4列
  • md：8列
  • lg：12列

sizetype

+

sizetype

string

+

string

auto

+

auto

否

+

否

设置当前栅格使用的响应尺寸类型，支持xs, sm, md, lg类型，使用auto时按照当前容器大小自动选择xs, sm, md, lg类型。

+

设置当前栅格使用的响应尺寸类型，支持xs, sm, md, lg类型，使用auto时按照当前容器大小自动选择xs, sm, md, lg类型。

gutter

+

gutter

<length>

+

<length>

24px

+

24px

否

+

否

设置Gutter宽度

+

设置Gutter宽度

gridtemplate6+

+

gridtemplate6+

string

+

string

default

+

default

否

+

否

当设置了columns和sizetype属性为auto时，可以设置栅格容器的布局模板，通过布局模块设置不同响应尺寸下的Columns、Gutters和Margins，详见可选值说明。

+

当设置了columns和sizetype属性为auto时，可以设置栅格容器的布局模板，通过布局模块设置不同响应尺寸下的Columns、Gutters和Margins，详见可选值说明。
-
  

模板值

+ + - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - @@ -172,53 +171,52 @@ 除支持[通用样式](js-components-common-styles.md)外，还支持如下样式： - -
  

模板值

可响应的栅格断点系统

+

可响应的栅格断点系统

Columns

+

Columns

Margins(px)

+

Margins(px)

Gutters(px)

+

Gutters(px)

默认栅格

+

默认栅格

default

+

default

xs

+

xs

2

+

2

12

+

12

12

+

12

sm

+

sm

4

+

4

24

+

24

24

+

24

md

+

md

8

+

8

32

+

32

24

+

24

lg

+

lg

12

+

12

48

+

48

24

+

24

宫格布局栅格

+

宫格布局栅格

grid

+

grid

sm(0<设备水平分辨率<600px)

+

sm(0<设备水平分辨率<600px)

4

+

4

24

+

24

12

+

12

md

+

md

8

+

8

32

+

32

12

+

12

lg

+

lg

12

+

12

48

+

48

12

+

12

名称

+ - - - - - - - - - - - - - - - - - - - @@ -232,41 +230,40 @@ 除支持[通用方法](js-components-common-methods.md)外，还支持如下方法： - -

名称

类型

+

类型

默认值

+

默认值

必填

+

必填

描述

+

描述

justify-content

+

justify-content

string

+

string

flex-start

+

flex-start

否

+

否

flex容器当前行的主轴对齐格式。可选项有：

-
  • flex-start：项目位于容器的开头。
  • flex-end：项目位于容器的结尾。
  • center：项目位于容器的中心。
  • space-between：项目位于各行之间留有空白的容器内。
  • space-around：项目位于各行之前、之间、之后都留有空白的容器内。
+

flex容器当前行的主轴对齐格式。可选项有：

+
  • flex-start：项目位于容器的开头。
  • flex-end：项目位于容器的结尾。
  • center：项目位于容器的中心。
  • space-between：项目位于各行之间留有空白的容器内。
  • space-around：项目位于各行之前、之间、之后都留有空白的容器内。

align-items

+

align-items

string

+

string

stretch

+

stretch

否

+

否

flex容器当前行的交叉轴对齐格式，可选值为：

-
  • stretch：弹性元素被在交叉轴方向被拉伸到与容器相同的高度或宽度。
  • flex-start：元素向交叉轴起点对齐。
  • flex-end：元素向交叉轴终点对齐。
  • center：元素在交叉轴居中。
+

flex容器当前行的交叉轴对齐格式，可选值为：

+
  • stretch：弹性元素被在交叉轴方向被拉伸到与容器相同的高度或宽度。
  • flex-start：元素向交叉轴起点对齐。
  • flex-end：元素向交叉轴终点对齐。
  • center：元素在交叉轴居中。

align-content

+

align-content

string

+

string

flex-start

+

flex-start

否

+

否

交叉轴中有额外的空间时，多行内容对齐格式，可选值为：

-
  • flex-start：所有行从交叉轴起点开始填充。第一行的交叉轴起点边和容器的交叉轴起点边对齐。接下来的每一行紧跟前一行。
  • flex-end：所有行从交叉轴末尾开始填充。最后一行的交叉轴终点和容器的交叉轴终点对齐。同时所有后续行与前一个对齐。
  • center：所有行朝向容器的中心填充。每行互相紧挨，相对于容器居中对齐。容器的交叉轴起点边和第一行的距离相等于容器的交叉轴终点边和最后一行的距离。
  • space-between：所有行在容器中平均分布。相邻两行间距相等。容器的交叉轴起点边和终点边分别与第一行和最后一行的边对齐。
  • space-around：所有行在容器中平均分布，相邻两行间距相等。容器的交叉轴起点边和终点边分别与第一行和最后一行的距离是相邻两行间距的一半。
+

交叉轴中有额外的空间时，多行内容对齐格式，可选值为：

+
  • flex-start：所有行从交叉轴起点开始填充。第一行的交叉轴起点边和容器的交叉轴起点边对齐。接下来的每一行紧跟前一行。
  • flex-end：所有行从交叉轴末尾开始填充。最后一行的交叉轴终点和容器的交叉轴终点对齐。同时所有后续行与前一个对齐。
  • center：所有行朝向容器的中心填充。每行互相紧挨，相对于容器居中对齐。容器的交叉轴起点边和第一行的距离相等于容器的交叉轴终点边和最后一行的距离。
  • space-between：所有行在容器中平均分布。相邻两行间距相等。容器的交叉轴起点边和终点边分别与第一行和最后一行的边对齐。
  • space-around：所有行在容器中平均分布，相邻两行间距相等。容器的交叉轴起点边和终点边分别与第一行和最后一行的距离是相邻两行间距的一半。

名称

+ - - - - - - - - - - - - - - diff --git a/zh-cn/application-dev/reference/arkui-js/js-components-grid-row.md b/zh-cn/application-dev/reference/arkui-js/js-components-grid-row.md index f6b490ecdb4d82889fb3ce39d7726e7d060be375..8e83bc573eec1279ca838f14a77762408b2d9b21 100644 --- a/zh-cn/application-dev/reference/arkui-js/js-components-grid-row.md +++ b/zh-cn/application-dev/reference/arkui-js/js-components-grid-row.md @@ -18,72 +18,71 @@ grid-row是栅格布局容器grid-container的子容器组件，使用flex横向 除支持[通用样式](js-components-common-styles.md)外，还支持如下样式： - -

名称

参数

+

参数

描述

+

描述

getColumns

+

getColumns

-

+

-

返回栅格容器列数

+

返回栅格容器列数

getColumnWidth

+

getColumnWidth

-

+

-

返回栅格容器column宽度

+

返回栅格容器column宽度

getGutterWidth

+

getGutterWidth

-

+

-

返回栅格容器gutter宽度

+

返回栅格容器gutter宽度

getSizeType

+

getSizeType

-

+

-

返回当前容器响应尺寸类型（xs|sm|md|lg）

+

返回当前容器响应尺寸类型（xs|sm|md|lg）

名称

+ - - - - - - - - - - - - - - - - - - - - - - - -

名称

类型

+

类型

默认值

+

默认值

必填

+

必填

描述

+

描述

flex-wrap

+

flex-wrap

string

+

string

nowrap

+

nowrap

否

+

否

flex容器是单行还是多行显示，该值暂不支持动态修改。可选项有：

-
  • nowrap：不换行，单行显示。
  • wrap：换行，多行显示。
+

flex容器是单行还是多行显示，该值暂不支持动态修改。可选项有：

+
  • nowrap：不换行，单行显示。
  • wrap：换行，多行显示。

justify-content

+

justify-content

string

+

string

flex-start

+

flex-start

否

+

否

flex容器当前行的主轴对齐格式。可选项有：

-
  • flex-start：项目位于容器的开头。
  • flex-end：项目位于容器的结尾。
  • center：项目位于容器的中心。
  • space-between：项目位于各行之间留有空白的容器内。
  • space-around：项目位于各行之前、之间、之后都留有空白的容器内。
+

flex容器当前行的主轴对齐格式。可选项有：

+
  • flex-start：项目位于容器的开头。
  • flex-end：项目位于容器的结尾。
  • center：项目位于容器的中心。
  • space-between：项目位于各行之间留有空白的容器内。
  • space-around：项目位于各行之前、之间、之后都留有空白的容器内。

align-items

+

align-items

string

+

string

flex-start

+

flex-start

否

+

否

flex容器当前行的交叉轴对齐格式，可选值为：

-
  • stretch：弹性元素被在交叉轴方向被拉伸到与容器相同的高度或宽度。
  • flex-start：元素向交叉轴起点对齐。
  • flex-end：元素向交叉轴终点对齐。
  • center：元素在交叉轴居中。
+

flex容器当前行的交叉轴对齐格式，可选值为：

+
  • stretch：弹性元素被在交叉轴方向被拉伸到与容器相同的高度或宽度。
  • flex-start：元素向交叉轴起点对齐。
  • flex-end：元素向交叉轴终点对齐。
  • center：元素在交叉轴居中。

align-content

+

align-content

string

+

string

flex-start

+

flex-start

否

+

否

交叉轴中有额外的空间时，多行内容对齐格式，可选值为：

-
  • flex-start：所有行从交叉轴起点开始填充。第一行的交叉轴起点边和容器的交叉轴起点边对齐。接下来的每一行紧跟前一行。
  • flex-end：所有行从交叉轴末尾开始填充。最后一行的交叉轴终点和容器的交叉轴终点对齐。同时所有后续行与前一个对齐。
  • center：所有行朝向容器的中心填充。每行互相紧挨，相对于容器居中对齐。容器的交叉轴起点边和第一行的距离相等于容器的交叉轴终点边和最后一行的距离。
  • space-between：所有行在容器中平均分布。相邻两行间距相等。容器的交叉轴起点边和终点边分别与第一行和最后一行的边对齐。
  • space-around：所有行在容器中平均分布，相邻两行间距相等。容器的交叉轴起点边和终点边分别与第一行和最后一行的距离是相邻两行间距的一半。
+

交叉轴中有额外的空间时，多行内容对齐格式，可选值为：

+
  • flex-start：所有行从交叉轴起点开始填充。第一行的交叉轴起点边和容器的交叉轴起点边对齐。接下来的每一行紧跟前一行。
  • flex-end：所有行从交叉轴末尾开始填充。最后一行的交叉轴终点和容器的交叉轴终点对齐。同时所有后续行与前一个对齐。
  • center：所有行朝向容器的中心填充。每行互相紧挨，相对于容器居中对齐。容器的交叉轴起点边和第一行的距离相等于容器的交叉轴终点边和最后一行的距离。
  • space-between：所有行在容器中平均分布。相邻两行间距相等。容器的交叉轴起点边和终点边分别与第一行和最后一行的边对齐。
  • space-around：所有行在容器中平均分布，相邻两行间距相等。容器的交叉轴起点边和终点边分别与第一行和最后一行的距离是相邻两行间距的一半。
>![](../../public_sys-resources/icon-note.gif) **说明：** ->- 不支持宽度相关样式。 +>不支持宽度相关样式。 ## 事件 diff --git a/zh-cn/application-dev/reference/arkui-js/js-components-media-video.md b/zh-cn/application-dev/reference/arkui-js/js-components-media-video.md index 932a679a158baa5a183a34fb125d4fc127f84120..d026b711485c8e93fa21e8e315979ced3528b210 100644 --- a/zh-cn/application-dev/reference/arkui-js/js-components-media-video.md +++ b/zh-cn/application-dev/reference/arkui-js/js-components-media-video.md @@ -18,61 +18,60 @@ 除支持[通用属性](js-components-common-attributes.md)外，还支持如下样式： - -

名称

+ - - - - - - - - - - - - - - - - - - - - - - - - @@ -82,28 +81,27 @@ 除支持[通用样式](js-components-common-styles.md)外，还支持如下样式： - -

名称

类型

+

类型

默认值

+

默认值

必填

+

必填

描述

+

描述

muted

+

muted

boolean

+

boolean

false

+

false

否

+

否

视频是否静音播放。

+

视频是否静音播放。

src

+

src

string

+

string

-

+

-

否

+

否

播放视频内容的路径。

+

播放视频内容的路径。

autoplay

+

autoplay

boolean

+

boolean

false

+

false

否

+

否

视频是否自动播放。

+

视频是否自动播放。

controls

+

controls

boolean

+

boolean

true

+

true

否

+

否

控制视频播放的控制栏是否显示，如果设置为false，则不显示控制栏。默认为true，由系统决定显示或隐藏控制栏。

+

控制视频播放的控制栏是否显示，如果设置为false，则不显示控制栏。默认为true，由系统决定显示或隐藏控制栏。

名称

+ - - - - - - - - - @@ -112,15 +110,15 @@ **表 1** object-fit 类型说明 -

名称

类型

+

类型

默认值

+

默认值

必填

+

必填

描述

+

描述

object-fit

+

object-fit

string

+

string

contain

+

contain

否

+

否

视频源的缩放类型，如果poster设置了值，那么此配置还会影响视频海报的缩放类型，可选值参考表1。

+

视频源的缩放类型，如果poster设置了值，那么此配置还会影响视频海报的缩放类型，可选值参考表1。

类型

+ - - - @@ -130,69 +128,68 @@ 除支持[通用事件](js-components-common-events.md)外，还支持如下事件： - -

类型

描述

+

描述

fill

+

fill

不保持宽高比进行放大缩小，使得图片填充满显示边界。

+

不保持宽高比进行放大缩小，使得图片填充满显示边界。

名称

+ - - - - - - - - - - - - - - - - - - - - - - - - - - @@ -202,36 +199,38 @@ 除支持[通用方法](js-components-common-methods.md)外，还支持如下方法： - -

名称

参数

+

参数

描述

+

描述

prepared

+

prepared

{ duration: value }5+

+

{ duration: value }5+

视频准备完成时触发该事件，通过duration可以获取视频时长，单位为s。

+

视频准备完成时触发该事件，通过duration可以获取视频时长，单位为s。

start

+

start

-

+

-

播放时触发该事件。

+

播放时触发该事件。

pause

+

pause

-

+

-

暂停时触发该事件。

+

暂停时触发该事件。

finish

+

finish

-

+

-

播放结束时触发该事件。

+

播放结束时触发该事件。

error

+

error

-

+

-

播放失败时触发该事件。

+

播放失败时触发该事件。

seeking

+

seeking

{ currenttime: value }

+

{ currenttime: value }

操作进度条过程时上报时间信息，单位为s。

+

操作进度条过程时上报时间信息，单位为s。

seeked

+

seeked

{ currenttime: value }

+

{ currenttime: value }

操作进度条完成后，上报播放时间信息，单位为s。

+

操作进度条完成后，上报播放时间信息，单位为s。

timeupdate

+

timeupdate

{ currenttime: value }

+

{ currenttime: value }

播放进度变化时触发该事件，单位为s，更新时间间隔为250ms。

+

播放进度变化时触发该事件，单位为s，更新时间间隔为250ms。

名称

+ - - - - - - - - - - -

名称

参数

+

参数

描述

+

描述

start

+

start

-

+

-

请求播放视频。

+

请求播放视频。

pause

+

pause

-

+

-

请求暂停播放视频。

+

请求暂停播放视频。

setCurrentTime

+

setCurrentTime

{ currenttime: value }

+

{ currenttime: value }

指定视频播放的进度位置，单位为s。

+

指定视频播放的进度位置，单位为s。
+>![](../../public_sys-resources/icon-note.gif) **说明：** +>在attached组件生命周期回调后，可以调用上述组件方法。 + diff --git a/zh-cn/application-dev/reference/arkui-js/js-components-svg-animate.md b/zh-cn/application-dev/reference/arkui-js/js-components-svg-animate.md index 687a36b170036531020910428e5fb7016ad0bf96..b0d01e9f97f8139c573318340e9ac73ab03a3cea 100644 --- a/zh-cn/application-dev/reference/arkui-js/js-components-svg-animate.md +++ b/zh-cn/application-dev/reference/arkui-js/js-components-svg-animate.md @@ -3,7 +3,7 @@ 设置svg组件的属性动画。 >![](../../public_sys-resources/icon-note.gif) **说明：** ->从API Version 7 开始支持。 +>该组件从API version 7开始支持。后续版本如有新增内容，则采用上角标单独标记该内容的起始版本。 ## 权限列表 @@ -15,179 +15,178 @@ ## 属性 - -

名称

+ - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - diff --git a/zh-cn/application-dev/reference/arkui-js/js-components-svg-animatemotion.md b/zh-cn/application-dev/reference/arkui-js/js-components-svg-animatemotion.md index d5d209d73694846ae56733bd558a9d1bcd479580..ddb8f30d57873b357fcd5034c0f8839ec3ac21be 100644 --- a/zh-cn/application-dev/reference/arkui-js/js-components-svg-animatemotion.md +++ b/zh-cn/application-dev/reference/arkui-js/js-components-svg-animatemotion.md @@ -3,7 +3,7 @@ 路径动效。 >![](../../public_sys-resources/icon-note.gif) **说明：** ->从API Version 7 开始支持。 +>该组件从API version 7开始支持。后续版本如有新增内容，则采用上角标单独标记该内容的起始版本。 ## 权限列表 @@ -17,50 +17,49 @@ 支持animate属性\(values不生效\)和以下表格中的属性。 - -

名称

类型

+

类型

默认值

+

默认值

必填

+

必填

描述

+

描述

id

+

id

string

+

string

-

+

-

否

+

否

组件的唯一标识。

+

组件的唯一标识。

attributeName

+

attributeName

string

+

string

-

+

-

否

+

否

设置需要进行动效的属性名。

+

设置需要进行动效的属性名。

begin

+

begin

<time>

+

<time>

0

+

0

否

+

否

设置动效的延迟时间。

-

支持输入ms(毫秒)、s（秒）、m（分），默认为s(秒)，其他格式不支持

+

设置动效的延迟时间。

+

支持输入ms(毫秒)、s（秒）、m（分），默认为s(秒)，其他格式不支持

dur

+

dur

<time>

+

<time>

0

+

0

否

+

否

设置动效持续时间，如果dur没设置，按照end-begin的结果作为持续时间，小于等于0时，动效不触发。

-

支持输入ms(毫秒)、s（秒）、m（分），默认为s(秒)，其他格式不支持

+

设置动效持续时间，如果dur没设置，按照end-begin的结果作为持续时间，小于等于0时，动效不触发。

+

支持输入ms(毫秒)、s（秒）、m（分），默认为s(秒)，其他格式不支持

end

+

end

<time>

+

<time>

0

+

0

否

+

否

设置动效多久时间后结束。支持输入ms(毫秒)、s（秒）、m（分），默认为s(秒)，其他格式不支持

+

设置动效多久时间后结束。支持输入ms(毫秒)、s（秒）、m（分），默认为s(秒)，其他格式不支持

repeatCount

+

repeatCount

<number | indefinite>

+

<number | indefinite>

1

+

1

否

+

否

设置动画播放的次数，默认无限次播放(indefinite)，可通过设置为数值1仅播放一次。

+

设置动画播放的次数，默认无限次播放(indefinite)，可通过设置为数值1仅播放一次。

fill

+

fill

<freeze | remove>

+

<freeze | remove>

remove

+

remove

否

+

否

设置动画结束时的状态。

+

设置动画结束时的状态。

calcMode

+

calcMode

<discrete | linear | paced | spline>

+

<discrete | linear | paced | spline>

linear

+

linear

否

+

否

设置动画的插值模式。

-

discrete：阶跃，from值直接跳转到to的值；

-

linear：线性；

-

paced：线性，设置此项后keyTimes和keyPoints值无效

-

spline：自定义贝塞尔曲线，spline点定义在keyTimes属性中，每个时间间隔控制点由keySplines定义

+

设置动画的插值模式。

+

discrete：阶跃，from值直接跳转到to的值；

+

linear：线性；

+

paced：线性，设置此项后keyTimes和keyPoints值无效

+

spline：自定义贝塞尔曲线，spline点定义在keyTimes属性中，每个时间间隔控制点由keySplines定义

keyTimes

+

keyTimes

string

+

string

-

+

-

否

+

否

设置关键帧动画的开始时间，值为0~1之间的数值用分号隔开，比如0;0.3;0.8;1。keyTimes、keySplines、values组合设置关键帧动画。keyTimes和values的个数保持一致。keySplines个数为keyTimes个数减一

+

设置关键帧动画的开始时间，值为0~1之间的数值用分号隔开，比如0;0.3;0.8;1。keyTimes、keySplines、values组合设置关键帧动画。keyTimes和values的个数保持一致。keySplines个数为keyTimes个数减一

keySplines

+

keySplines

string

+

string

-

+

-

否

+

否

与keyTimes相关联的一组贝塞尔控制点。定义每个关键帧的贝塞尔曲线，曲线之间用分号隔开。曲线内的两个控制掉格式为x1 y1 x2 y2。比如0.5 0 0.5 1; 0.5 0 0.5 1;0.5 0 0.5 1

+

与keyTimes相关联的一组贝塞尔控制点。定义每个关键帧的贝塞尔曲线，曲线之间用分号隔开。曲线内的两个控制掉格式为x1 y1 x2 y2。比如0.5 0 0.5 1; 0.5 0 0.5 1;0.5 0 0.5 1

by

+

by

number

+

number

-

+

-

否

+

否

在动画中对某一指定属性，添加相对偏移值，from默认为原属性值。

+

在动画中对某一指定属性，添加相对偏移值，from默认为原属性值。

from

+

from

string

+

string

-

+

-

否

+

否

设置需要进行动画的属性的开始值。

-

如果已经设置了values属性，则from失效。

+

设置需要进行动画的属性的开始值。

+

如果已经设置了values属性，则from失效。

to

+

to

string

+

string

-

+

-

否

+

否

设置需要进行动画的属性的结束值。

-

如果已经设置了values属性，则to都失效。

+

设置需要进行动画的属性的结束值。

+

如果已经设置了values属性，则to都失效。

values

+

values

string

+

string

-

+

-

否

+

否

设置一组动画的变化值。格式为value1;value2;value3。

+

设置一组动画的变化值。格式为value1;value2;value3。

名称

+ - - - - - - - - - - - - - - - - - - - diff --git a/zh-cn/application-dev/reference/arkui-js/js-components-svg-animatetransform.md b/zh-cn/application-dev/reference/arkui-js/js-components-svg-animatetransform.md index 4d8138c1ab9d69cb59c5a5bc2593d4efaaaa8156..47f29efe330e6aa6b675c73793b682223b910f31 100644 --- a/zh-cn/application-dev/reference/arkui-js/js-components-svg-animatetransform.md +++ b/zh-cn/application-dev/reference/arkui-js/js-components-svg-animatetransform.md @@ -5,7 +5,7 @@ transform动效，支持的组件范围： , , , , , , , >![](../../public_sys-resources/icon-note.gif) **说明：** ->从API Version 7 开始支持。 +>该组件从API version 7开始支持。后续版本如有新增内容，则采用上角标单独标记该内容的起始版本。 ## 权限列表 @@ -19,28 +19,27 @@ transform动效，支持的组件范围： 支持animate属性和以下表格中的属性。 - -

名称

类型

+

类型

默认值

+

默认值

必填

+

必填

描述

+

描述

keyPoints

+

keyPoints

string

+

string

-

+

-

是

+

是

一组关键帧的点位置，每帧的值为对象沿路径的距离比例。功能与animate属性中的values相同。

+

一组关键帧的点位置，每帧的值为对象沿路径的距离比例。功能与animate属性中的values相同。

path

+

path

string

+

string

-

+

-

是

+

是

定义运动的路径，使用与path组件d属性相同的语法。

+

定义运动的路径，使用与path组件d属性相同的语法。

rotate

+

rotate

[auto | auto-reverse | <number>]

+

[auto | auto-reverse | <number>]

auto

+

auto

-

+

-

设置动画对象的旋转方向

+

设置动画对象的旋转方向

名称

+ - - - - - - - - - diff --git a/zh-cn/application-dev/reference/arkui-js/js-components-svg-circle.md b/zh-cn/application-dev/reference/arkui-js/js-components-svg-circle.md index ccbb050818bc5659094a21a657ef6261d60dc21f..ddbd7afe877068b275c2358e052566f7ead8538d 100644 --- a/zh-cn/application-dev/reference/arkui-js/js-components-svg-circle.md +++ b/zh-cn/application-dev/reference/arkui-js/js-components-svg-circle.md @@ -3,7 +3,7 @@ 圆形形状。 >![](../../public_sys-resources/icon-note.gif) **说明：** ->从API Version 7 开始支持。 +>该组件从API version 7开始支持。后续版本如有新增内容，则采用上角标单独标记该内容的起始版本。 ## 权限列表 @@ -15,63 +15,62 @@ ## 属性 -支持所列的Svg组件通用属性和以下表格的属性。 +支持Svg组件[通用属性](js-components-svg-common-attributes.md)和以下属性。 - -

名称

类型

+

类型

默认值

+

默认值

必填

+

必填

描述

+

描述

type

+

type

[translate | scale | rotate | skewX | skewY]

+

[translate | scale | rotate | skewX | skewY]

-

+

-

是

+

是

设置transform动画的类型

+

设置transform动画的类型

名称

+ - - - - - - - - - - - - - - - - - - - - - - - - diff --git a/zh-cn/application-dev/reference/arkui-js/js-components-svg-common-attributes.md b/zh-cn/application-dev/reference/arkui-js/js-components-svg-common-attributes.md index 802bbae6d67aafe69894790c41c704fc1ae64707..83a90a2823b2153fe91d6950e8e83f525e148a43 100644 --- a/zh-cn/application-dev/reference/arkui-js/js-components-svg-common-attributes.md +++ b/zh-cn/application-dev/reference/arkui-js/js-components-svg-common-attributes.md @@ -1,171 +1,173 @@ # 通用属性 - -

名称

类型

+

类型

默认值

+

默认值

必填

+

必填

描述

+

描述

id

+

id

string

+

string

-

+

-

否

+

否

组件的唯一标识。

+

组件的唯一标识。

cx

+

cx

<length>|<percentage>

+

<length>|<percentage>

0

+

0

否

+

否

设置圆心的x轴坐标。支持属性动画

+

设置圆心的x轴坐标。支持属性动画

cy

+

cy

<length>|<percentage>

+

<length>|<percentage>

0

+

0

否

+

否

设置圆心的y轴坐标。支持属性动画

+

设置圆心的y轴坐标。支持属性动画

r

+

r

<length>|<percentage>

+

<length>|<percentage>

0

+

0

否

+

否

设置圆的半径。支持属性动画

+

设置圆的半径。支持属性动画

名称

+>![](../../public_sys-resources/icon-note.gif) **说明：** +>从API version 7开始支持。后续版本如有新增内容，则采用上角标单独标记该内容的起始版本。 + + - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - diff --git a/zh-cn/application-dev/reference/arkui-js/js-components-svg-ellipse.md b/zh-cn/application-dev/reference/arkui-js/js-components-svg-ellipse.md index 8ce3eff8396a353499a6163cb8947b084a656ee8..46fd26dd93fee920c9c7606af6eab6b98528c9e2 100644 --- a/zh-cn/application-dev/reference/arkui-js/js-components-svg-ellipse.md +++ b/zh-cn/application-dev/reference/arkui-js/js-components-svg-ellipse.md @@ -3,7 +3,7 @@ 椭圆形状。 >![](../../public_sys-resources/icon-note.gif) **说明：** ->从API Version 7 开始支持。 +>该组件从API version 7开始支持。后续版本如有新增内容，则采用上角标单独标记该内容的起始版本。 ## 权限列表 @@ -15,74 +15,73 @@ ## 属性 -支持所列的Svg组件通用属性和以下表格的属性。 +支持Svg组件[通用属性](js-components-svg-common-attributes.md)和以下属性。 - -

名称

类型

+

类型

默认值

+

默认值

必填

+

必填

描述

+

描述

fill

+

fill

<color>

+

<color>

black

+

black

否

+

否

使用简写属性设置元素的填充色。支持属性动画。

+

使用简写属性设置元素的填充色。支持属性动画。

fill-opacity

+

fill-opacity

number

+

number

1

+

1

否

+

否

填充色的透明度，取值范围为0到1，1表示为不透明，0表示为完全透明。支持属性动画。

+

填充色的透明度，取值范围为0到1，1表示为不透明，0表示为完全透明。支持属性动画。

fill-rule

+

fill-rule

nonzero | evenodd

+

nonzero | evenodd

nonzero

+

nonzero

否

+

否

nonzero:非零规则; evenodd:奇偶规则

+

nonzero:非零规则; evenodd:奇偶规则

opacity

+

opacity

number

+

number

1

+

1

否

+

否

元素的透明度，取值范围为0到1，1表示为不透明，0表示为完全透明。支持属性动画。

+

元素的透明度，取值范围为0到1，1表示为不透明，0表示为完全透明。支持属性动画。

stroke

+

stroke

<color>

+

<color>

-

+

-

否

+

否

设置形状轮廓的颜色。支持属性动画。

+

设置形状轮廓的颜色。支持属性动画。

stroke-dasharray

+

stroke-dasharray

<string>

+

<string>

-

+

-

否

+

否

指定短划线和缺口的长度。格式为[length length length length]，短划线和缺口的长度中间空格隔开成对出现。

+

指定短划线和缺口的长度。格式为[length length length length]，短划线和缺口的长度中间空格隔开成对出现。

stroke-dashoffset

+

stroke-dashoffset

<length>

+

<length>

0

+

0

否

+

否

设置关联虚线数组渲染时的偏移量。支持属性动画

+

设置关联虚线数组渲染时的偏移量。支持属性动画

stroke-linejoin

+

stroke-linejoin

[bevel | miter | round]

+

[bevel | miter | round]

miter

+

miter

否

+

否

进行描边时在路径的拐角处使用的形状。

-

bevel：使用斜角连接路径段；

-

miter：使用尖角连接路径段；

-

round：使用圆角连接路径段。

+

进行描边时在路径的拐角处使用的形状。

+

bevel：使用斜角连接路径段；

+

miter：使用尖角连接路径段；

+

round：使用圆角连接路径段。

stroke-linecap

+

stroke-linecap

[butt | round | square]

+

[butt | round | square]

butt

+

butt

否

+

否

路径描边时在它们的结尾处使用的形状。

-

butt：不在路径两端扩展；

-

round：在路径的末端延伸半个圆，直径等于线度。

-

square：在路径的末端延伸半个圆，宽度等于线宽的一半，高度等于线宽。

+

路径描边时在它们的结尾处使用的形状。

+

butt：不在路径两端扩展；

+

round：在路径的末端延伸半个圆，直径等于线度。

+

square：在路径的末端延伸半个圆，宽度等于线宽的一半，高度等于线宽。

stroke-miterlimit

+

stroke-miterlimit

number

+

number

4

+

4

否

+

否

设置将锐角绘制成斜角的极限值。支持属性动画

+

设置将锐角绘制成斜角的极限值。支持属性动画

stroke-opacity

+

stroke-opacity

number

+

number

1

+

1

否

+

否

轮廓线条的透明度，取值范围为0到1，1表示为不透明，0表示为完全透明。支持属性动画

+

轮廓线条的透明度，取值范围为0到1，1表示为不透明，0表示为完全透明。支持属性动画

stroke-width

+

stroke-width

<length>

+

<length>

1px

+

1px

否

+

否

设置轮廓线条的宽度。支持属性动画

+

设置轮廓线条的宽度。支持属性动画

transform

+

transform

<string>

+

<string>

-

+

-

否

+

否

设置组件以及子组件的坐标变换参数。

-

支持以下格式：

-

translate(<x> [<y>]) ：沿x[y]轴方向平移

-

scale(<x> [<y>]) ：沿x[y]轴缩放

-

rotate(<a> [<x> <y>]) ：以(x,y)点进行旋转a度角

-

skewX(<a>) ：沿x轴倾斜a度角的变换

-

skewY(<a>) ：沿y轴倾斜a度角的变换

+

设置组件以及子组件的坐标变换参数。

+

支持以下格式：

+

translate(<x> [<y>]) ：沿x[y]轴方向平移

+

scale(<x> [<y>]) ：沿x[y]轴缩放

+

rotate(<a> [<x> <y>]) ：以(x,y)点进行旋转a度角

+

skewX(<a>) ：沿x轴倾斜a度角的变换

+

skewY(<a>) ：沿y轴倾斜a度角的变换

名称

+ - - - - - - - - - - - - - - - - - - - - - - - - - - - - - diff --git a/zh-cn/application-dev/reference/arkui-js/js-components-svg-line.md b/zh-cn/application-dev/reference/arkui-js/js-components-svg-line.md index 7b824185e4e17c645cdeac384108031aacbf4d17..78b0f4c506ec7fecaa21fbf93196b0c9fe62590c 100644 --- a/zh-cn/application-dev/reference/arkui-js/js-components-svg-line.md +++ b/zh-cn/application-dev/reference/arkui-js/js-components-svg-line.md @@ -3,7 +3,7 @@ 绘制线条。 >![](../../public_sys-resources/icon-note.gif) **说明：** ->从API Version 7 开始支持。 +>该组件从API version 7开始支持。后续版本如有新增内容，则采用上角标单独标记该内容的起始版本。 ## 权限列表 @@ -17,72 +17,71 @@ 支持所列的Svg组件通用属性和以下表格的属性。 - -

名称

类型

+

类型

默认值

+

默认值

必填

+

必填

描述

+

描述

id

+

id

string

+

string

-

+

-

否

+

否

组件的唯一标识。

+

组件的唯一标识。

cx

+

cx

<length>|<percentage>

+

<length>|<percentage>

0

+

0

否

+

否

设置椭圆的x轴坐标。支持属性动画

+

设置椭圆的x轴坐标。支持属性动画

cy

+

cy

<length>|<percentage>

+

<length>|<percentage>

0

+

0

否

+

否

设置椭圆的y轴坐标。支持属性动画

+

设置椭圆的y轴坐标。支持属性动画

rx

+

rx

<length>|<percentage>

+

<length>|<percentage>

0

+

0

否

+

否

设置椭圆x轴的半径。支持属性动画

+

设置椭圆x轴的半径。支持属性动画

ry

+

ry

<length>|<percentage>

+

<length>|<percentage>

0

+

0

否

+

否

设置椭圆y轴的半径。支持属性动画

+

设置椭圆y轴的半径。支持属性动画

名称

+ - - - - - - - - - - - - - - - - - - - - - - - - - - - - - diff --git a/zh-cn/application-dev/reference/arkui-js/js-components-svg-path.md b/zh-cn/application-dev/reference/arkui-js/js-components-svg-path.md index 199d652de93289e7b304df27f587b1beef95f17c..287f8897618ef53411a5b1e9b6ca600dd8a78136 100644 --- a/zh-cn/application-dev/reference/arkui-js/js-components-svg-path.md +++ b/zh-cn/application-dev/reference/arkui-js/js-components-svg-path.md @@ -3,7 +3,7 @@ 绘制路径。 >![](../../public_sys-resources/icon-note.gif) **说明：** ->从API Version 7 开始支持。 +>该组件从API version 7开始支持。后续版本如有新增内容，则采用上角标单独标记该内容的起始版本。 ## 权限列表 @@ -15,43 +15,42 @@ ## 属性 -支持所列的Svg组件通用属性和以下表格的属性，设置的通用属性会传递给子组件。 +支持Svg组件[通用属性](js-components-svg-common-attributes.md)和以下属性，设置的通用属性会传递给子组件。 - -

名称

类型

+

类型

默认值

+

默认值

必填

+

必填

描述

+

描述

id

+

id

string

+

string

-

+

-

否

+

否

组件的唯一标识。

+

组件的唯一标识。

x1

+

x1

<length>|<percentage>

+

<length>|<percentage>

-

+

-

否

+

否

设置线条起点的x轴坐标。支持属性动画

+

设置线条起点的x轴坐标。支持属性动画

y1

+

y1

<length>|<percentage>

+

<length>|<percentage>

-

+

-

否

+

否

设置线条起点的y轴坐标。支持属性动画

+

设置线条起点的y轴坐标。支持属性动画

x2

+

x2

<length>|<percentage>

+

<length>|<percentage>

-

+

-

否

+

否

设置线条终点的x轴坐标。支持属性动画

+

设置线条终点的x轴坐标。支持属性动画

y2

+

y2

<length>|<percentage>

+

<length>|<percentage>

-

+

-

否

+

否

设置线条终点的y轴坐标。支持属性动画

+

设置线条终点的y轴坐标。支持属性动画

名称

+ - - - - - - - - - - - - - - diff --git a/zh-cn/application-dev/reference/arkui-js/js-components-svg-polygon.md b/zh-cn/application-dev/reference/arkui-js/js-components-svg-polygon.md index 217b8cd5dc5fe1f8e418f807120d6f26e73a1a23..edd2d806a4d385c2c9710d13d500164e0d4888db 100644 --- a/zh-cn/application-dev/reference/arkui-js/js-components-svg-polygon.md +++ b/zh-cn/application-dev/reference/arkui-js/js-components-svg-polygon.md @@ -3,7 +3,7 @@ 绘制多边形。 >![](../../public_sys-resources/icon-note.gif) **说明：** ->从API Version 7 开始支持。 +>该组件从API version 7开始支持。后续版本如有新增内容，则采用上角标单独标记该内容的起始版本。 ## 权限列表 @@ -15,43 +15,42 @@ ## 属性 -支持所列的Svg组件通用属性和以下表格的属性。 +支持Svg组件[通用属性](js-components-svg-common-attributes.md)和以下属性。 - -

名称

类型

+

类型

默认值

+

默认值

必填

+

必填

描述

+

描述

id

+

id

string

+

string

-

+

-

否

+

否

组件的唯一标识。

+

组件的唯一标识。

d

+

d

string

+

string

-

+

-

否

+

否

设置路径的形状。包含一组字符指令，大写字母为绝对路径，小写字符为相对路径。

-

字母指令表示的意义如下：

-
  • M/m = moveto
  • L/l = lineto
  • H/h = horizontal lineto
  • V/v = vertical lineto
  • C/c = curveto
  • S/s = smooth curveto
  • Q/q = quadratic Belzier curve
  • T/t = smooth quadratic Belzier curveto
  • A/a = elliptical Arc
  • Z/z = closepath
+

设置路径的形状。包含一组字符指令，大写字母为绝对路径，小写字符为相对路径。

+

字母指令表示的意义如下：

+
  • M/m = moveto
  • L/l = lineto
  • H/h = horizontal lineto
  • V/v = vertical lineto
  • C/c = curveto
  • S/s = smooth curveto
  • Q/q = quadratic Belzier curve
  • T/t = smooth quadratic Belzier curveto
  • A/a = elliptical Arc
  • Z/z = closepath

名称

+ - - - - - - - - - - - - - - diff --git a/zh-cn/application-dev/reference/arkui-js/js-components-svg-polyline.md b/zh-cn/application-dev/reference/arkui-js/js-components-svg-polyline.md index 21b464a7d32c9b28908d589e0a98b7249a8ce719..1d34290e28c8fdbbbf6a6ce227a85922f61a1b24 100644 --- a/zh-cn/application-dev/reference/arkui-js/js-components-svg-polyline.md +++ b/zh-cn/application-dev/reference/arkui-js/js-components-svg-polyline.md @@ -3,7 +3,7 @@ 绘制折线。 >![](../../public_sys-resources/icon-note.gif) **说明：** ->从API Version 7 开始支持。 +>该组件从API version 7开始支持。后续版本如有新增内容，则采用上角标单独标记该内容的起始版本。 ## 权限列表 @@ -17,41 +17,40 @@ 支持所列的Svg组件通用属性和以下表格的属性。 - -

名称

类型

+

类型

默认值

+

默认值

必填

+

必填

描述

+

描述

id

+

id

string

+

string

-

+

-

否

+

否

组件的唯一标识。

+

组件的唯一标识。

points

+

points

string

+

string

-

+

-

否

+

否

设置多边形的多个坐标点

-

格式为[x1,y1 x2,y2 x3,y3]。

-

支持属性动画，如果属性动画里设置的动效变化值的坐标个数与原始points的格式不一样，则无效

+

设置多边形的多个坐标点

+

格式为[x1,y1 x2,y2 x3,y3]。

+

支持属性动画，如果属性动画里设置的动效变化值的坐标个数与原始points的格式不一样，则无效

名称

+ - - - - - - - - - - - - - - diff --git a/zh-cn/application-dev/reference/arkui-js/js-components-svg-rect.md b/zh-cn/application-dev/reference/arkui-js/js-components-svg-rect.md index 7f707a26d93a089ae4dda6ffd5e0f9a5f1663eef..06b2c9bf17b8b55e5d68996e7052c9d600f1a0d6 100644 --- a/zh-cn/application-dev/reference/arkui-js/js-components-svg-rect.md +++ b/zh-cn/application-dev/reference/arkui-js/js-components-svg-rect.md @@ -3,7 +3,7 @@ 用于绘制矩形、圆角矩形。 >![](../../public_sys-resources/icon-note.gif) **说明：** ->从API Version 7 开始支持。 +>该组件从API version 7开始支持。后续版本如有新增内容，则采用上角标单独标记该内容的起始版本。 ## 权限列表 @@ -15,96 +15,95 @@ ## 属性 -支持所列的Svg组件通用属性和以下表格的属性。 +支持Svg组件[通用属性](js-components-svg-common-attributes.md)和以下属性。 - -

名称

类型

+

类型

默认值

+

默认值

必填

+

必填

描述

+

描述

id

+

id

string

+

string

-

+

-

否

+

否

组件的唯一标识。

+

组件的唯一标识。

points

+

points

string

+

string

-

+

-

否

+

否

设置折线的多个坐标点

-

格式为[x1,y1 x2,y2 x3,y3]。

-

支持属性动画，如果属性动画里设置的动效变化值的坐标个数与原始points的格式不一样，则无效

+

设置折线的多个坐标点

+

格式为[x1,y1 x2,y2 x3,y3]。

+

支持属性动画，如果属性动画里设置的动效变化值的坐标个数与原始points的格式不一样，则无效

名称

+ - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - diff --git a/zh-cn/application-dev/reference/arkui-js/js-components-svg-text.md b/zh-cn/application-dev/reference/arkui-js/js-components-svg-text.md index 2c7983941fb30fa4f25f9e8ad2d24f4de095f4e8..778a5a80b4fd16ef350e80fee55a81172fe58d6c 100644 --- a/zh-cn/application-dev/reference/arkui-js/js-components-svg-text.md +++ b/zh-cn/application-dev/reference/arkui-js/js-components-svg-text.md @@ -3,10 +3,10 @@ 文本，用于呈现一段信息。 >![](../../public_sys-resources/icon-note.gif) **说明：** ->- 从API Version 7 开始支持。 +>- 该组件从API version 7开始支持。后续版本如有新增内容，则采用上角标单独标记该内容的起始版本。 >- 文本的展示内容需要写在元素标签内，可嵌套tspan子元素标签分段，可嵌套textPath子元素标签按指定路径绘制。 >- 只支持被父元素标签svg嵌套。 ->- 只支持默认字体sans-serif +>- 只支持默认字体sans-serif。 ## 权限列表 @@ -20,160 +20,159 @@ 支持以下表格中的属性。 - -

名称

类型

+

类型

默认值

+

默认值

必填

+

必填

描述

+

描述

id

+

id

string

+

string

-

+

-

否

+

否

组件的唯一标识。

+

组件的唯一标识。

width

+

width

<length>|<percentage>

+

<length>|<percentage>

0

+

0

否

+

否

设置矩形的宽度。支持属性动画

+

设置矩形的宽度。支持属性动画

height

+

height

<length>|<percentage>

+

<length>|<percentage>

0

+

0

否

+

否

设置矩形的高度。支持属性动画

+

设置矩形的高度。支持属性动画

x

+

x

<length>|<percentage>

+

<length>|<percentage>

0

+

0

否

+

否

设置矩形左上角x轴坐标。支持属性动画

+

设置矩形左上角x轴坐标。支持属性动画

y

+

y

<length>|<percentage>

+

<length>|<percentage>

0

+

0

否

+

否

设置矩形左上角y轴坐标。支持属性动画

+

设置矩形左上角y轴坐标。支持属性动画

rx

+

rx

<length>|<percentage>

+

<length>|<percentage>

0

+

0

否

+

否

设置矩形圆角x方向半径。支持属性动画

+

设置矩形圆角x方向半径。支持属性动画

ry

+

ry

<length>|<percentage>

+

<length>|<percentage>

0

+

0

否

+

否

设置矩形圆角y方向半径。支持属性动画

+

设置矩形圆角y方向半径。支持属性动画

名称

+ - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - diff --git a/zh-cn/application-dev/reference/arkui-js/js-components-svg-textpath.md b/zh-cn/application-dev/reference/arkui-js/js-components-svg-textpath.md index 00d71cf9c5df3432a4d7940d51b0ec3a149f38f5..083819fcf9490f8c4715e01a2905c787dcc4ebaa 100644 --- a/zh-cn/application-dev/reference/arkui-js/js-components-svg-textpath.md +++ b/zh-cn/application-dev/reference/arkui-js/js-components-svg-textpath.md @@ -3,7 +3,7 @@ 沿路径绘制文本。 >![](../../public_sys-resources/icon-note.gif) **说明：** ->- 从API Version 7 开始支持。 +>- 该组件从API version 7开始支持。后续版本如有新增内容，则采用上角标单独标记该内容的起始版本。 >- 按指定的路径绘制文本，可嵌套子标签tspan分段。 >- 只支持被父元素标签text嵌套。 @@ -19,129 +19,139 @@ tspan。 支持以下表格中的属性。 - -

名称

类型

+

类型

默认值

+

默认值

必填

+

必填

描述

+

描述

id

+

id

string

+

string

-

+

-

否

+

否

组件的唯一标识。

+

组件的唯一标识。

x

+

x

<length>|<percentage>

+

<length>|<percentage>

0

+

0

否

+

否

设置组件左上角x轴坐标

+

设置组件左上角x轴坐标

y

+

y

<length>|<percentage>

+

<length>|<percentage>

0

+

0

否

+

否

设置组件左上角y轴坐标

+

设置组件左上角y轴坐标

dx

+

dx

<length>|<percentage>

+

<length>|<percentage>

0

+

0

否

+

否

设置文本x轴偏移

+

设置文本x轴偏移

dy

+

dy

<length>|<percentage>

+

<length>|<percentage>

0

+

0

否

+

否

设置文本y轴偏移

+

设置文本y轴偏移

rotate

+

rotate

number

+

number

0

+

0

否

+

否

字体以左下角为圆心旋转角度，正数顺时针，负数逆时针

+

字体以左下角为圆心旋转角度，正数顺时针，负数逆时针

font-size

+

font-size

<length>

+

<length>

30px

+

30px

否

+

否

设置文本的尺寸。

+

设置文本的尺寸。

fill

+

fill

<color>

+

<color>

black

+

black

否

+

否

字体填充颜色

+

字体填充颜色

fill-opacity

+

fill-opacity

number

+

number

1.0

+

1.0

否

+

否

字体填充透明度

+

字体填充透明度

opacity

+

opacity

number

+

number

1

+

1

否

+

否

元素的透明度，取值范围为0到1，1表示为不透明，0表示为完全透明。支持属性动画。

+

元素的透明度，取值范围为0到1，1表示为不透明，0表示为完全透明。支持属性动画。

stroke

+

stroke

<color>

+

<color>

black

+

black

否

+

否

绘制字体边框并指定颜色

+

绘制字体边框并指定颜色

stroke-width

+

stroke-width

number

+

number

1px

+

1px

否

+

否

字体边框宽度

+

字体边框宽度

stroke-opacity

+

stroke-opacity

number

+

number

1.0

+

1.0

否

+

否

字体边框透明度

+

字体边框透明度

名称

+ - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - + + + + + + @@ -149,7 +159,7 @@ tspan。 ## 示例 -textspan属性示例，textpath文本内容沿着属性path中的路径绘制文本，起点偏移20%的path长度。（绘制的元素曲线仅做参照）。 +textspan属性示例，textpath文本内容沿着属性path中的路径绘制文本，起点偏移20%的path长度。（绘制的元素曲线仅做参照） ``` /* xxx.css */ diff --git a/zh-cn/application-dev/reference/arkui-js/js-components-svg-tspan.md b/zh-cn/application-dev/reference/arkui-js/js-components-svg-tspan.md index 4d820f028dae798118c3c1ff1705d5b38fcdcd71..c89915027092da110534ea95b9a39942eb23c092 100644 --- a/zh-cn/application-dev/reference/arkui-js/js-components-svg-tspan.md +++ b/zh-cn/application-dev/reference/arkui-js/js-components-svg-tspan.md @@ -1,7 +1,7 @@ # tspan >![](../../public_sys-resources/icon-note.gif) **说明：** ->- 从API Version 7 开始支持。 +>- 该组件从API version 7开始支持。后续版本如有新增内容，则采用上角标单独标记该内容的起始版本。 >- 文本的展示内容需要写在元素标签内，可嵌套子元素标签tspan分段。 >- 文本分段，只支持被父元素标签svg嵌套。 @@ -15,160 +15,159 @@ 支持以下表格中的属性。 - -

名称

类型

+

类型

默认值

+

默认值

必填

+

必填

描述

+

描述

id

+

id

string

+

string

-

+

-

否

+

否

组件的唯一标识。

+

组件的唯一标识。

path

+

path

string

+

string

0

+

0

是

+

是

设置路径的形状。

-

字母指令表示的意义如下：

-
  • M = moveto
  • L = lineto
  • H = horizontal lineto
  • V = vertical lineto
  • C = curveto
  • S = smooth curveto
  • Q = quadratic Belzier curve
  • T = smooth quadratic Belzier curveto
  • A = elliptical Arc
  • Z = closepath
+

设置路径的形状。

+

字母指令表示的意义如下：

+
  • M = moveto
  • L = lineto
  • H = horizontal lineto
  • V = vertical lineto
  • C = curveto
  • S = smooth curveto
  • Q = quadratic Belzier curve
  • T = smooth quadratic Belzier curveto
  • A = elliptical Arc
  • Z = closepath

startOffset

+

startOffset

<length>|<percentage>

+

<length>|<percentage>

0

+

0

否

+

否

设置文本沿path绘制的起始偏移。

+

设置文本沿path绘制的起始偏移。

font-size

+

font-size

<length>

+

<length>

30px

+

30px

否

+

否

设置文本的尺寸。

+

设置文本的尺寸。

fill

+

fill

<color>

+

<color>

black

+

black

否

+

否

字体填充颜色

+

字体填充颜色

opacity

+

by

number

+

number

1

+

-

否

+

否

元素的透明度，取值范围为0到1，1表示为不透明，0表示为完全透明。支持属性动画。

+

相对被指定动画的属性偏移值，from默认为原属性值。

fill-opacity

+

opacity

number

+

number

1.0

+

1

否

+

否

字体填充透明度

+

元素的透明度，取值范围为0到1，1表示为不透明，0表示为完全透明。支持属性动画。

stroke

+

fill-opacity

<color>

+

number

black

+

1.0

否

+

否

绘制字体边框并指定颜色

+

字体填充透明度

stroke-width

+

stroke

number

+

<color>

1px

+

black

否

+

否

字体边框宽度

+

绘制字体边框并指定颜色

stroke-opacity

+

stroke-width

number

+

number

1.0

+

1px

否

+

否

字体边框透明度

+

字体边框宽度

+

stroke-opacity

+

number

+

1.0

+

否

+

字体边框透明度

名称

+ - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - diff --git a/zh-cn/application-dev/reference/arkui-js/js-components-svg.md b/zh-cn/application-dev/reference/arkui-js/js-components-svg.md index 2a79e09071500c735e0f611068264f8de1c13f6c..261829752b595e3c5a294a7a285f455786490b13 100644 --- a/zh-cn/application-dev/reference/arkui-js/js-components-svg.md +++ b/zh-cn/application-dev/reference/arkui-js/js-components-svg.md @@ -3,8 +3,8 @@ 基础容器，主要作为svg的根节点使用，也可以在svg中嵌套使用。 >![](../../public_sys-resources/icon-note.gif) **说明：** ->从API Version 7 开始支持。 ->约束条件：svg父组件或者svg组件需要定义宽高值，否则不进行绘制。 +>- 该组件从API version 7开始支持。后续版本如有新增内容，则采用上角标单独标记该内容的起始版本。 +>- svg父组件或者svg组件需要定义宽高值，否则不进行绘制。 ## 权限列表 @@ -16,84 +16,83 @@ ## 属性 -支持所列的Svg组件通用属性和以下表格的属性，设置的通用属性会传递给子组件。 +支持Svg组件[通用属性](js-components-svg-common-attributes.md)和以下属性，设置的通用属性会传递给子组件。 - -

名称

类型

+

类型

默认值

+

默认值

必填

+

必填

描述

+

描述

id

+

id

string

+

string

-

+

-

否

+

否

组件的唯一标识。

+

组件的唯一标识。

x

+

x

<length>|<percentage>

+

<length>|<percentage>

0

+

0

否

+

否

设置组件左上角x轴坐标

+

设置组件左上角x轴坐标

y

+

y

<length>|<percentage>

+

<length>|<percentage>

0

+

0

否

+

否

设置组件左上角y轴坐标。作为textpath子组件时失效。

+

设置组件左上角y轴坐标。作为textpath子组件时失效。

dx

+

dx

<length>|<percentage>

+

<length>|<percentage>

0

+

0

否

+

否

设置文本x轴偏移

+

设置文本x轴偏移

dy

+

dy

<length>|<percentage>

+

<length>|<percentage>

0

+

0

否

+

否

设置文本y轴偏移。作为textpath子组件时失效。

+

设置文本y轴偏移。作为textpath子组件时失效。

rotate

+

rotate

number

+

number

0

+

0

否

+

否

字体以左下角为圆心旋转角度，正数顺时针，负数逆时针

+

字体以左下角为圆心旋转角度，正数顺时针，负数逆时针

font-size

+

font-size

<length>

+

<length>

30px

+

30px

否

+

否

设置文本的尺寸。

+

设置文本的尺寸。

fill

+

fill

<color>

+

<color>

black

+

black

否

+

否

字体填充颜色

+

字体填充颜色

opacity

+

opacity

number

+

number

1

+

1

否

+

否

元素的透明度，取值范围为0到1，1表示为不透明，0表示为完全透明。支持属性动画。

+

元素的透明度，取值范围为0到1，1表示为不透明，0表示为完全透明。支持属性动画。

fill-opacity

+

fill-opacity

number

+

number

1.0

+

1.0

否

+

否

字体填充透明度

+

字体填充透明度

stroke

+

stroke

<color>

+

<color>

black

+

black

否

+

否

绘制字体边框并指定颜色

+

绘制字体边框并指定颜色

stroke-width

+

stroke-width

number

+

number

1px

+

1px

否

+

否

字体边框宽度

+

字体边框宽度

stroke-opacity

+

stroke-opacity

number

+

number

1.0

+

1.0

否

+

否

字体边框透明度

+

字体边框透明度

名称

+ - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - diff --git a/zh-cn/application-dev/reference/arkui-js/js-framework-file.md b/zh-cn/application-dev/reference/arkui-js/js-framework-file.md deleted file mode 100644 index 1e44ae628c629760b5106137a2416e6a4da04166..0000000000000000000000000000000000000000 --- a/zh-cn/application-dev/reference/arkui-js/js-framework-file.md +++ /dev/null @@ -1,123 +0,0 @@ -# 文件组织 - -## 目录结构 - -JS FA应用的JS模块\(entry/src/main/js/module\)的典型开发目录结构如下： - -**图 1** 目录结构 - - -![](figures/unnaming-(1).png) - -**图 2** 多实例资源共享目录结构5+ -![](figures/多实例资源共享目录结构5+.png "多实例资源共享目录结构5+") - -目录结构中文件分类如下： - -- .hml结尾的HML模板文件，这个文件用来描述当前页面的文件布局结构。 -- .css结尾的CSS样式文件，这个文件用于描述页面样式。 -- .js结尾的JS文件，这个文件用于处理页面和用户的交互。 - -各个文件夹的作用： - -- app.js文件用于全局JavaScript逻辑和应用生命周期管理，详见[app.js](js-framework-js-file.md)说明。 -- pages目录用于存放所有组件页面。 -- common目录用于存放公共资源文件，比如：媒体资源，自定义组件和JS文件。 -- resources目录用于存放资源配置文件，比如：多分辨率加载等配置文件，详见[资源限定与访问](js-framework-resource-restriction.md)章节。 -- share目录5+用于配置多个实例共享的资源内容，比如：share中的图片和JSON文件可被default1和default2实例共享。 - ->![](../../public_sys-resources/icon-note.gif) **说明：** ->- i18n和resources是开发保留文件夹，不可重命名。 ->- 如果share目录中的资源和实例\(default\)中的资源文件同名且目录一致时，实例中资源的优先级高于share中资源的优先级。 ->- share目录当前不支持i18n。 ->- 在使用DevEco Studio进行应用开发时，目录结构中的可选文件夹需要开发者根据实际情况自行创建。 - -## 文件访问规则 - -应用资源可通过绝对路径或相对路径的方式进行访问，本开发框架中绝对路径以"/"开头，相对路径以"./"或"../"。具体访问规则如下： - -- 引用代码文件，推荐使用相对路径，比如：../common/utils.js。 -- 引用资源文件，推荐使用绝对路径。比如：/common/xxx.png。 -- 公共代码文件和资源文件推荐放在common下，通过以上两条规则进行访问。 -- CSS样式文件中通过url\(\)函数创建数据类型，如：url\(/common/xxx.png\)。 - ->![](../../public_sys-resources/icon-note.gif) **说明：** ->当代码文件A需要引用代码文件B时： ->- 如果代码文件A和文件B位于同一目录，则代码文件B引用资源文件时可使用相对路径，也可使用绝对路径。 ->- 如果代码文件A和文件B位于不同目录，则代码文件B引用资源文件时必须使用绝对路径。因为Webpack打包时，代码文件B的目录会发生变化。 ->- 在js文件中通过数据绑定的方式指定资源文件路径时，必须使用绝对路径。 - -## 媒体文件格式 - -**表 1** 支持的图片格式 - - -

名称

类型

+

类型

默认值

+

默认值

必填

+

必填

描述

+

描述

id

+

id

string

+

string

-

+

-

否

+

否

组件的唯一标识。

+

组件的唯一标识。

width

+

width

<length>|<percentage>

+

<length>|<percentage>

-

+

-

否

+

否

设置组件的宽度

+

设置组件的宽度

height

+

height

<length>|<percentage>

+

<length>|<percentage>

-

+

-

否

+

否

设置组件的高度

+

设置组件的高度

x

+

x

<length>|<percentage>

+

<length>|<percentage>

-

+

-

否

+

否

设置当前svg的x轴坐标，根svg节点无效

+

设置当前svg的x轴坐标，根svg节点无效

y

+

y

<length>|<percentage>

+

<length>|<percentage>

   

否

+

否

设置当前svg的y轴坐标，根svg节点无效

+

设置当前svg的y轴坐标，根svg节点无效

viewBox

+

viewBox

string

+

string

-

+

-

否

+

否

设置当前svg的视口。支持的格式为<number number number number>，4个参数分别表示min-x, min-y, width and height，viewBox的宽高和svg的宽高不一致，会以中心对齐进行缩放。

+

设置当前svg的视口。支持的格式为<number number number number>，4个参数分别表示min-x, min-y, width and height，viewBox的宽高和svg的宽高不一致，会以中心对齐进行缩放。
- - - - - - - - - - - - - - - - - - - - - - - - - -

格式

-

支持版本

-

支持的文件类型

-

BMP

-

API Version 3+

-

.bmp

-

GIF

-

API Version 3+

-

.gif

-

JPEG

-

API Version 3+

-

.jpg

-

PNG

-

API Version 3+

-

.png

-

WebP

-

API Version 3+

-

.webp

-
- -**表 2** 支持的视频格式 - - - - - - - - - - - - -

格式

-

支持版本

-

支持的文件类型

-

H.264 AVC

-

Baseline Profile (BP)

-

API Version 3+

-

.3gp

-

.mp4

-
- diff --git a/zh-cn/application-dev/reference/arkui-js/js-framework-js-file.md b/zh-cn/application-dev/reference/arkui-js/js-framework-js-file.md deleted file mode 100644 index 3d9f1cd3bbaae8676e86ae80d957de43a88e8fdb..0000000000000000000000000000000000000000 --- a/zh-cn/application-dev/reference/arkui-js/js-framework-js-file.md +++ /dev/null @@ -1,62 +0,0 @@ -# app.js - -## 应用生命周期 - -每个应用可以在app.js自定义应用级[生命周期](js-framework-lifecycle.md)的实现逻辑，以下示例仅在生命周期函数中打印对应日志： - -``` -// app.js -export default { - onCreate() { - console.info('Application onCreate'); - }, - - onDestroy() { - console.info('Application onDestroy'); - }, -} -``` - -## 应用对象6+ - - - - - - - - - - - - -

属性

-

类型

-

描述

-

getApp

-

Function

-

提供getApp()全局方法，可以在自定义js文件中获取app.js中暴露的对象。

-
- -示例如下： - -``` -// app.js -export default { - data: { - test: "by getAPP" - }, - onCreate() { - console.info('AceApplication onCreate'); - }, - onDestroy() { - console.info('AceApplication onDestroy'); - }, -}; -``` - -``` -// test.js 自定义逻辑代码 -export var appData = getApp().data; -``` - diff --git a/zh-cn/application-dev/reference/arkui-js/js-framework-js-tag.md b/zh-cn/application-dev/reference/arkui-js/js-framework-js-tag.md deleted file mode 100644 index 822b3dabfe28418dc7d4b5ceed84887f106812da..0000000000000000000000000000000000000000 --- a/zh-cn/application-dev/reference/arkui-js/js-framework-js-tag.md +++ /dev/null @@ -1,174 +0,0 @@ -# js标签配置 - -js标签中包含了实例名称、页面路由和窗口样式信息。 - - - - - - - - - - - - - - - - - - - - - - - - - - - - -

标签

-

类型

-

默认值

-

必填

-

描述

-

name

-

string

-

default

-

是

-

标识JS实例的名字。

-

pages

-

Array

-

-

-

是

-

路由信息，详见“pages”。

-

window

-

Object

-

-

-

否

-

窗口信息，详见“window”。

-
- ->![](../../public_sys-resources/icon-note.gif) **说明：** ->name、pages和window等标签配置需在配置文件（config.json）中的“js”标签中完成设置。 - -## pages - -定义每个页面的路由信息，每个页面由页面路径和页面名组成，页面的文件名就是页面名。比如： - -``` -{ - ... - "pages": [ - "pages/index/index", - "pages/detail/detail" - ] - ... -} -``` - ->![](../../public_sys-resources/icon-note.gif) **说明：** ->- pages列表中第一个页面是应用的首页，即entry入口。 ->- 页面文件名不能使用组件名称，比如：text.hml、button.hml等。 - -## window - -window用于定义与显示窗口相关的配置。对于屏幕适配问题，有2种配置方法： - -- 指定designWidth（屏幕逻辑宽度），所有与大小相关的样式（例如width、font-size）均以designWidth和实际屏幕宽度的比例进行缩放，例如在designWidth为720时，如果设置width为100px时，在实际宽度为1440物理像素的屏幕上，width实际渲染像素为200物理像素。 -- 设置autoDesignWidth为true，此时designWidth字段将会被忽略，渲染组件和布局时按屏幕密度进行缩放。屏幕逻辑宽度由设备宽度和屏幕密度自动计算得出，在不同设备上可能不同，请使用相对布局来适配多种设备。例如：在466\*466分辨率，320dpi的设备上，屏幕密度为2（以160dpi为基准），1px等于渲染出的2物理像素。 - - >![](../../public_sys-resources/icon-note.gif) **说明：** - >1. 组件样式中类型的默认值，按屏幕密度进行计算和绘制，如：在屏幕密度为2（以160dpi为基准）的设备上，默认为1px时，设备上实际渲染出2物理像素。 - >2. autoDesignWidth、designWidth的设置不影响默认值计算方式和绘制结果。 - - - - - - - - - - - - - - - - - - - - - - - -

属性

-

类型

-

必填

-

缺省值

-

描述

-

designWidth

-

number

-

否

-

720

-

页面显示设计时的参考值，实际显示效果基于设备宽度与参考值之间的比例进行缩放。

-

autoDesignWidth

-

boolean

-

否

-

false

-

页面设计基准宽度是否自动计算，当设为true时，designWidth将会被忽略，设计基准宽度由设备宽度与屏幕密度计算得出。

-
- -示例如下： - -``` -{ - ... - "window": { - "designWidth": 720, - "autoDesignWidth": false - } - ... -} -``` - -## 示例 - -``` -{ - "app": { - "bundleName": "com.example.player", - "version": { - "code": 1, - "name": "1.0" - }, - "vendor": "example" - } - "module": { - ... - "js": [ - { - "name": "default", - "pages": [ - "pages/index/index", - "pages/detail/detail" - ], - "window": { - "designWidth": 720, - "autoDesignWidth": false - } - } - ], - "abilities": [ - { - ... - } - ] - } -} -``` - diff --git a/zh-cn/application-dev/reference/arkui-js/js-framework-lifecycle.md b/zh-cn/application-dev/reference/arkui-js/js-framework-lifecycle.md deleted file mode 100644 index 9defa70e3b623dce493d3d4c734da61bf56c09d8..0000000000000000000000000000000000000000 --- a/zh-cn/application-dev/reference/arkui-js/js-framework-lifecycle.md +++ /dev/null @@ -1,167 +0,0 @@ -# 生命周期 - -## 应用生命周期 - -在app.js中可以定义如下应用生命周期函数： - - - - - - - - - - - - - - - - - - - - - - - - - - - - - -

属性

-

类型

-

描述

-

触发时机

-

onCreate

-

() => void

-

应用创建

-

当应用创建时调用。

-

onShow6+

-

() => void

-

应用处于前台

-

当应用处于前台时触发。

-

onHide6+

-

() => void

-

应用处于后台

-

当应用处于后台时触发。

-

onDestroy

-

() => void

-

应用销毁

-

当应用退出时触发。

-
- -## 页面生命周期 - -在页面JS文件中可以定义如下页面生命周期函数： - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - -

属性

-

类型

-

描述

-

触发时机

-

onInit

-

() => void

-

页面初始化

-

页面数据初始化完成时触发，只触发一次。

-

onReady

-

() => void

-

页面创建完成

-

页面创建完成时触发，只触发一次。

-

onShow

-

() => void

-

页面显示

-

页面显示时触发。

-

onHide

-

() => void

-

页面消失

-

页面消失时触发。

-

onDestroy

-

() => void

-

页面销毁

-

页面销毁时触发。

-

onBackPress

-

() => boolean

-

返回按钮动作

-

当用户点击返回按钮时触发。

-
  • 返回true表示页面自己处理返回逻辑。
  • 返回false表示使用默认的返回逻辑。
  • 不返回值会作为false处理。
-

onActive()5+

-

() => void

-

页面激活

-

页面激活时触发。

-

onInactive()5+

-

() => void

-

页面暂停

-

页面暂停时触发。

-

onNewRequest()5+

-

() => void

-

FA重新请求

-

FA已经启动时收到新的请求后触发。

-
- -页面A的生命周期接口的调用顺序 - -- 打开页面A：onInit\(\) -\> onReady\(\) -\> onShow\(\) -- 在页面A打开页面B：onHide\(\) -- 从页面B返回页面A：onShow\(\) -- 退出页面A：onBackPress\(\) -\> onHide\(\) -\> onDestroy\(\) -- 页面隐藏到后台运行：onInactive\(\) -\> onHide\(\) -- 页面从后台运行恢复到前台：onShow\(\) -\> onActive\(\) - -![](figures/zh-cn_image_0000001147417424.png) - diff --git a/zh-cn/application-dev/reference/arkui-js/js-framework-multiple-languages.md b/zh-cn/application-dev/reference/arkui-js/js-framework-multiple-languages.md deleted file mode 100644 index 3c0dea7ea9270e0a693bdee5ff5a9183e5194487..0000000000000000000000000000000000000000 --- a/zh-cn/application-dev/reference/arkui-js/js-framework-multiple-languages.md +++ /dev/null @@ -1,309 +0,0 @@ -# 多语言支持 - -基于开发框架的应用会覆盖多个国家和地区，开发框架支持多语言能力后，可以让应用开发者无需开发多个不同语言的版本，就可以同时支持多种语言的切换，为项目维护带来便利。 - -开发者仅需要通过[定义资源文件](#section733935013515)和[引用资源](#section522111116527)两个步骤，就可以使用开发框架的多语言能力；如果需要在应用中获取当前系统语言，请参考[获取语言](#section2872192475310)。 - -## 定义资源文件 - -资源文件用于存放应用在多种语言场景下的资源内容，开发框架使用JSON文件保存资源定义。在[文件组织](js-framework-file.md)中指定的i18n文件夹内放置语言资源文件，其中语言资源文件的命名是由语言、文字、国家或地区的限定词通过中划线连接组成，其中文字和国家或地区可以省略，如zh-Hant-HK（中国香港地区使用的繁体中文）、zh-CN（中国使用的简体中文）、zh（中文）。命名规则如下： - -``` -language[-script-region].json -``` - -限定词的取值需符合下表要求。 - -**表 1** 限定词取值要求 - - - - - - - - - - - - - - - - -

限定词类型

-

含义与取值说明

-

语言

-

表示设备使用的语言类型，由2~3个小写字母组成。例如：zh表示中文，en表示英语，mai表示迈蒂利语。

-

详细取值范围，请查阅ISO 639（ISO制定的语言编码标准）。

-

文字

-

表示设备使用的文字类型，由1个大写字母（首字母）和3个小写字母组成。例如：Hans表示简体中文，Hant表示繁体中文。

-

详细取值范围，请查阅ISO 15924（ISO制定的文字编码标准）。

-

国家或地区

-

表示用户所在的国家或地区，由2~3个大写字母或者3个数字组成。例如：CN表示中国，GB表示英国。

-

详细取值范围，请查阅ISO 3166-1（ISO制定的国家和地区编码标准）。

-
- -当开发框架无法在应用中找到系统语言的资源文件时，默认使用en-US.json中的资源内容。 - -资源文件内容格式如下： - -en-US.json - -``` -{ - "strings": { - "hello": "Hello world!", - "object": "Object parameter substitution-{name}", - "array": "Array type parameter substitution-{0}", - "symbol": "@#$%^&*()_+-={}[]\\|:;\"'<>,./?" - }, - - "files": { - "image": "image/en_picture.PNG" - } -} -``` - -由于不同语言针对单复数有不同的匹配规则，在资源文件中使用“zero”“one”“two”“few”“many”“other”定义不同单复数场景下的词条内容。例如中文不区分单复数，仅存在“other”场景；英文存在“one”、“other”场景；阿拉伯语存在上述6种场景。 - -以en-US.json和ar-AE.json为例，资源文件内容格式如下： - -en-US.json - -``` -{ - "strings": { - "people": { - "one": "one person", - "other": "{count} people" - } - } -} -``` - -ar-AE.json - -``` -{ - "strings": { - "people": { - "zero": "لا أحد", - "one": "وحده", - "two": "اثنان", - "few": "ستة اشخاص", - "many": "خمسون شخص", - "other": "مائة شخص" - } - } -} -``` - -## 引用资源 - -在应用开发的页面中使用多语言的语法，包含简单格式化和单复数格式化两种，都可以在hml或js中使用。 - -- 简单格式化方法 - - 在应用中使用$t方法引用资源，$t既可以在hml中使用，也可以在js中使用。系统将根据当前语言环境和指定的资源路径（通过$t的path参数设置），显示对应语言的资源文件中的内容。 - - **表 2** 简单格式化 - - - - - - - - - - - - - - - - -

属性

-

类型

-

参数

-

必填

-

描述

-

$t

-

Function

-

请见表3

-

是

-

根据系统语言完成简单的替换：this.$t('strings.hello')

-
- - **表 3** $t参数说明 - - - - - - - - - - - - - - - - - - - -

参数

-

类型

-

必填

-

描述

-

path

-

string

-

是

-

资源路径

-

params

-

Array|Object

-

否

-

运行时用来替换占位符的实际内容，占位符分为两种：

-
  • 具名占位符，例如{name}。实际内容必须用Object类型指定，例如：$t('strings.object', { name: 'Hello world' })。
  • 数字占位符，例如{0}。实际内容必须用Array类型指定，例如：$t('strings.array', ['Hello world'])。
-
- -- 简单格式化示例代码 - - ``` - -
- - {{ $t('strings.hello') }} - - {{ $t('strings.object', { name: 'Hello world' }) }} - - {{ $t('strings.array', ['Hello world']) }} - - {{ hello }} - - {{ replaceObject }} - - {{ replaceArray }} - - - - - -
- ``` - - ``` - // xxx.js - // 下面为在js文件中的使用方法。 - export default { - data: { - hello: '', - replaceObject: '', - replaceArray: '', - replaceSrc: '', - }, - onInit() { - this.hello = this.$t('strings.hello'); - this.replaceObject = this.$t('strings.object', { name: 'Hello world' }); - this.replaceArray = this.$t('strings.array', ['Hello world']); - this.replaceSrc = this.$t('files.image'); - }, - } - ``` - -- 单复数格式化方法 - - **表 4** 单复数格式化 - - - - - - - - - - - - - - - - -

属性

-

类型

-

参数

-

必填

-

描述

-

$tc

-

Function

-

请见表5

-

是

-

根据系统语言完成单复数替换：this.$tc('strings.people')

-
说明：

定义资源的内容通过json格式的key为“zero”、“one”、“two”、“few”、“many”和“other”区分。

-
-
- - **表 5** $tc参数说明 - - - - - - - - - - - - - - - - - - - -

参数

-

类型

-

必填

-

描述

-

path

-

string

-

是

-

资源路径

-

count

-

number

-

是

-

要表达的值

-
- -- 单复数格式化示例代码 - - ``` - -
- - {{ $tc('strings.people', 0) }} - - {{ $tc('strings.people', 1) }} - - {{ $tc('strings.people', 2) }} - - {{ $tc('strings.people', 6) }} - - {{ $tc('strings.people', 50) }} - - {{ $tc('strings.people', 100) }} -
- ``` - - -## 获取语言 - -获取语言功能请参考[应用配置](../apis/js-apis-basic-features-configuration.md)。 - diff --git a/zh-cn/application-dev/reference/arkui-js/js-framework-resource-restriction.md b/zh-cn/application-dev/reference/arkui-js/js-framework-resource-restriction.md deleted file mode 100644 index 2d3ffa75e12fe5997c892a8e85a1aa66f54d948d..0000000000000000000000000000000000000000 --- a/zh-cn/application-dev/reference/arkui-js/js-framework-resource-restriction.md +++ /dev/null @@ -1,128 +0,0 @@ -# 资源限定与访问 - ->![](../../public_sys-resources/icon-note.gif) **说明：** ->- 屏幕密度从API Version 4 开始支持。 ->- 其余限定词从API Version 6 开始支持。 - -## 资源限定词 - -资源限定词可以由一个或多个表征应用场景或设备特征的限定词组合而成，包括屏幕密度等维度，限定词之间通过中划线（-）连接。开发者在**resources**目录下创建限定词文件时，需要掌握限定词文件的命名要求以及与限定词文件与设备状态的匹配规则。 - -## 资源限定词的命名要求 - -- 限定词的组合顺序：屏幕密度。开发者可以根据应用的使用场景和设备特征，选择其中的一类或几类限定词组成目录名称，顺序不可颠倒。其中MCC和MNC须同时存在。 -- 限定词的连接方式：限定词之间均采用中划线（-）连接。例如：res-dark-ldpi.json 。 -- 限定词的取值范围：每类限定词的取值必须符合下表的条件，否则，将无法匹配目录中的资源文件，限定词大小写敏感。 -- 限定词前缀：**resources**资源文件的资源限定词有前缀res，例如res-ldpi.json。 -- 默认资源限定文件：**resources**资源文件的默认资源限定文件为res-defaults.json。 -- 资源限定文件中不支持使用枚举格式的颜色来设置资源。 - -**表 1** 资源限定词 - - - - - - - - - - - - - - - - - - - -

类型

-

含义与取值说明

-

MCC和MNC6+

-

移动设备国家代码 (MCC)，设备 SIM 卡中的移动设备网络代码 (MNC)，如mcc460-mnc01，mcc460-mnc02。

-

横竖屏6+

-

表示设备的屏幕方向，取值如下：

-
  • vertical：竖屏
  • horizontal：横屏
-

设备类型6+

-

表示设备的类型，取值如下：

-
  • phone：手机
  • tablet：平板
  • tv：智慧屏
  • wearable：智能穿戴
-

屏幕密度

-

表示设备的屏幕密度（单位为dpi），取值如下：

-
  • ldpi：表示低密度屏幕（~120dpi）（0.75基准密度）
  • mdpi：表示中密度屏幕（~160dpi）（基准密度）
  • hdpi：表示高密度屏幕（~240dpi）（1.5基准密度）
  • xhdpi：表示加高密度屏幕（~320dpi）（2.0基准密度）
  • xxhdpi：表示超超高密度屏幕（~480dpi）（3.0基准密度）
  • xxxhdpi：表示超超超高密度屏幕（~640dpi）（4.0基准密度）
-
- -## 限定词与设备状态的匹配规则 - -- 在为设备匹配对应的资源文件时，限定词目录匹配的优先级从高到低依次为：MCC和MNC\> 横竖屏 \> 深色模式 \> 设备类型 \> 屏幕密度。在资源限定词目录均未匹配的情况下，则匹配默认资源限定文件。 -- 如果限定词目录中包含资源限定词，则对应限定词的取值必须与当前的设备状态完全一致，该目录才能够参与设备的资源匹配。例如：资源限定文件res-hdpi.json与当前设备密度xhdpi无法匹配。 - -## 引用JS模块内resources资源 - -在应用开发的hml和js文件中使用$r的语法，可以对JS模块内的resources目录下的json资源进行格式化，获取相应的资源内容。 - - - - - - - - - - - - -

属性

-

类型

-

描述

-

$r

-

(key: string) => string

-

获取资源限定下具体的资源内容。例如：this.$r('strings.hello')。

-

参数说明：

-
  • key：定义在资源限定文件中的键值，如strings.hello。
-

res-defaults.json示例：

-
{
-    strings: {
-        hello: 'hello world'
-    }
-}
-
- -## 示例 - -resources/res-dark.json: - -``` -{ - "image": { - "clockFace": "common/dark_face.png" - }, - "colors": { - "background": "#000000" - } -} -``` - -resources/res-defaults.json: - -``` -{ - "image": { - "clockFace": "common/face.png" - }, - "colors": { - "background": "#ffffff" - } -} -``` - -``` - -
- -
-``` - ->![](../../public_sys-resources/icon-note.gif) **说明：** ->资源限定文件中不支持颜色枚举格式。 - diff --git a/zh-cn/application-dev/reference/arkui-js/js-framework-syntax-css.md b/zh-cn/application-dev/reference/arkui-js/js-framework-syntax-css.md deleted file mode 100644 index 07b89065f28e67c690a5af160fe39ff2d6af9936..0000000000000000000000000000000000000000 --- a/zh-cn/application-dev/reference/arkui-js/js-framework-syntax-css.md +++ /dev/null @@ -1,275 +0,0 @@ -# CSS语法参考 - -CSS是描述HML页面结构的样式语言。所有组件均存在系统默认样式，也可在页面CSS样式文件中对组件、页面自定义不同的样式。 - -## 尺寸单位 - -1. 逻辑像素px（文档中以表示）： - 1. 默认屏幕具有的逻辑宽度为720px（配置见[配置文件](js-framework-js-tag.md)中的window小节），实际显示时会将页面布局缩放至屏幕实际宽度，如100px在实际宽度为1440物理像素的屏幕上，实际渲染为200物理像素（从720px向1440物理像素，所有尺寸放大2倍）。 - 2. 额外配置autoDesignWidth为true时（配置见[配置文件](js-framework-js-tag.md)中的window小节），逻辑像素px将按照屏幕密度进行缩放，如100px在屏幕密度为3的设备上，实际渲染为300物理像素。应用需要适配多种设备时，建议采用此方法。 - -2. 百分比（文档中以表示）：表示该组件占父组件尺寸的百分比，如组件的width设置为50%，代表其宽度为父组件的50%。 - -## 样式导入 - -为了模块化管理和代码复用，CSS样式文件支持 @import 语句，导入css文件。 - -## 声明样式 - -每个页面目录下存在一个与布局hml文件同名的css文件，用来描述该hml页面中组件的样式，决定组件应该如何显示。 - -1. 内部样式，支持使用style、class属性来控制组件的样式。例如： - - ``` - -
- Hello World -
- ``` - - ``` - /* index.css */ - .container { - justify-content: center; - } - ``` - -2. 文件导入，合并外部样式文件。例如，在common目录中定义样式文件style.css，并在index.css文件首行中进行导入： - - ``` - /* style.css */ - .title { - font-size: 50px; - } - ``` - - ``` - /* index.css */ - @import '../../common/style.css'; - .container { - justify-content: center; - } - ``` - - -## 选择器 - -css选择器用于选择需要添加样式的元素，支持的选择器如下表所示： - - - - - - - - - - - - - - - - - - - - - - - - - - - - -

选择器

-

样例

-

样例描述

-

.class

-

.container

-

用于选择class="container"的组件。

-

#id

-

#titleId

-

用于选择id="titleId"的组件。

-

tag

-

text

-

用于选择text组件。

-

,

-

.title, .content

-

用于选择class="title"和class="content"的组件。

-

#id .class tag

-

#containerId .content text

-

非严格父子关系的后代选择器，选择具有id="containerId"作为祖先元素，class="content"作为次级祖先元素的所有text组件。如需使用严格的父子关系，可以使用“>”代替空格，如：#containerId>.content。

-
- -示例： - -``` - -
- 标题 -
- 内容 -
-
-``` - -``` -/* 页面样式xxx.css */ -/* 对所有div组件设置样式 */ -div { - flex-direction: column; -} -/* 对class="title"的组件设置样式 */ -.title { - font-size: 30px; -} -/* 对id="contentId"的组件设置样式 */ -#contentId { - font-size: 20px; -} -/* 对所有class="title"以及class="content"的组件都设置padding为5px */ -.title, .content { - padding: 5px; -} -/* 对class="container"的组件下的所有text设置样式 */ -.container text { - color: #007dff; -} -/* 对class="container"的组件下的直接后代text设置样式 */ -.container > text { - color: #fa2a2d; -} -``` - -以上样式运行效果如下： - -![](figures/sample_css.png) - -其中“.container text”将“标题”和“内容”设置为蓝色，而“.container \> text”直接后代选择器将“标题”设置为红色。2者优先级相同，但直接后代选择器声明顺序靠后，将前者样式覆盖（优先级计算见[选择器优先级](#section1460102134415)）。 - -## 选择器优先级 - -选择器的优先级计算规则与w3c规则保持一致（只支持：内联样式，id，class，tag，后代和直接后代），其中内联样式为在元素style属性中声明的样式。 - -当多条选择器声明匹配到同一元素时，各类选择器优先级由高到低顺序为：内联样式 \> id \> class \> tag。 - -## 伪类 - -css伪类是选择器中的关键字，用于指定要选择元素的特殊状态。例如，:disabled状态可以用来设置元素的disabled属性变为true时的样式。 - -除了单个伪类之外，还支持伪类的组合，例如，:focus:checked状态可以用来设置元素的focus属性和checked属性同时为true时的样式。支持的单个伪类如下表所示，按照优先级降序排列： - - - - - - - - - - - - - - - - - - - - - - - - -

名称

-

支持组件

-

描述

-

:disabled

-

支持disabled属性的组件

-

表示disabled属性变为true时的元素（不支持动画样式的设置）。

-

:active

-

支持click事件的组件

-

表示被用户激活的元素，如：被用户按下的按钮、被激活的tab-bar页签（不支持动画样式的设置）。

-

:waiting

-

button

-

表示waiting属性为true的元素（不支持动画样式的设置）。

-

:checked

-

input[type="checkbox"、type="radio"]、 switch

-

表示checked属性为true的元素（不支持动画样式的设置）。

-
- -伪类示例如下，设置按钮的:active伪类可以控制被用户按下时的样式： - -``` - -
- -
-``` - -``` -/* index.css */ -.button:active { - background-color: #888888;/*按钮被激活时，背景颜色变为#888888 */ -} -``` - ->![](../../public_sys-resources/icon-note.gif) **说明：** ->针对弹窗类组件及其子元素不支持伪类效果，包括popup、dialog、menu、option、picker - -## 样式预编译 - -预编译提供了利用特有语法生成css的程序，可以提供变量、运算等功能，令开发者更便捷地定义组件样式，目前支持less、sass和scss的预编译。使用样式预编译时，需要将原css文件后缀改为less、sass或scss，如index.css改为index.less、index.sass或index.scss。 - -- 当前文件使用样式预编译，例如将原index.css改为index.less： - - ``` - /* index.less */ - /* 定义变量 */ - @colorBackground: #000000; - .container { - background-color: @colorBackground; /* 使用当前less文件中定义的变量 */ - } - ``` - - -- 引用预编译文件，例如common中存在style.scss文件，将原index.css改为index.scss，并引入style.scss： - - ``` - /* style.scss */ - /* 定义变量 */ - $colorBackground: #000000; - ``` - - 在index.scss中引用： - - ``` - /* index.scss */ - /* 引入外部scss文件 */ - @import '../../common/style.scss'; - .container { - background-color: $colorBackground; /* 使用style.scss中定义的变量 */ - } - ``` - - >![](../../public_sys-resources/icon-note.gif) **说明：** - >引用的预编译文件建议放在common目录进行管理。 - - -## CSS样式继承6+ - -css样式继承提供了子节点继承父节点样式的能力，继承下来的样式在多选择器样式匹配的场景下，优先级排最低，当前支持以下样式的继承： - -- font-family -- font-weight -- font-size -- font-style -- text-align -- line-height -- letter-spacing -- color -- visibility - diff --git a/zh-cn/application-dev/reference/arkui-js/js-framework-syntax-hml.md b/zh-cn/application-dev/reference/arkui-js/js-framework-syntax-hml.md deleted file mode 100644 index eed9ce1a45411174e74fe1eae9aa1afa77d9a310..0000000000000000000000000000000000000000 --- a/zh-cn/application-dev/reference/arkui-js/js-framework-syntax-hml.md +++ /dev/null @@ -1,380 +0,0 @@ -# HML语法参考 - -HML（OpenHarmony Markup Language）是一套类HTML的标记语言，通过组件，事件构建出页面的内容。页面具备数据绑定、事件绑定、列表渲染、条件渲染和逻辑控制等高级能力。 - -## 页面结构 - -``` - -
- Image Show -
- -
-
-``` - -## 数据绑定 - -``` - -
- {{content[1]}} -
-``` - -``` -// xxx.js -export default { - data: { - content: ['Hello World!', 'Welcome to my world!'] - }, - changeText: function() { - this.content.splice(1, 1, this.content[0]); - } -} -``` - ->![](../../public_sys-resources/icon-note.gif) **说明：** ->- 针对数组内的数据修改，请使用splice方法生效数据绑定变更。 ->- hml文件中的js表达式不支持ES6语法。 - -## 普通事件绑定 - -事件通过'on'或者'@'绑定在组件上，当组件触发事件时会执行JS文件中对应的事件处理函数。 - -事件支持的写法有： - -- "funcName"：funcName为事件回调函数名（在JS文件中定义相应的函数实现）。 -- "funcName\(a,b\)"：函数参数例如a，b可以是常量，或者是在JS文件中的data中定义的变量（前面不用写this.）。 - -- 示例 - - ``` - -
- {{count}} -
- - - - - - -
-
- ``` - - ``` - /* xxx.js */ - export default { - data: { - count: 0 - }, - increase() { - this.count++; - }, - decrease() { - this.count--; - }, - multiply(multiplier) { - this.count = multiplier * this.count; - } - }; - ``` - - ``` - /* xxx.css */ - .container { - display: flex; - flex-direction: column; - justify-content: center; - align-items: center; - left: 0px; - top: 0px; - width: 454px; - height: 454px; - } - .title { - font-size: 30px; - text-align: center; - width: 200px; - height: 100px; - } - .box { - width: 454px; - height: 200px; - justify-content: center; - align-items: center; - flex-wrap: wrap; - } - .btn { - width: 200px; - border-radius: 0; - margin-top: 10px; - margin-left: 10px; - } - ``` - - -## 冒泡事件绑定5+ - -冒泡事件绑定包括： - -- 绑定冒泡事件：on:\{event\}.bubble。on:\{event\}等价于on:\{event\}.bubble。 -- 绑定并阻止冒泡事件向上冒泡：grab:\{event\}.bubble。grab:\{event\}等价于grab:\{event\}.bubble。 - - >![](../../public_sys-resources/icon-note.gif) **说明：** - >详细冒泡事件说明参见[通用事件](js-components-common-events.md)章节。 - - -- **示例** - - ``` -
- -
-
- -
-
- -
-
- -
-
-
- ``` - - ``` - // xxx.js - export default { - clickfunc: function(e) { - console.log(e); - }, - touchstartfuc: function(e) { - console.log(e); - }, - } - ``` - - ->![](../../public_sys-resources/icon-note.gif) **说明：** ->- 采用旧写法\(onclick\)的事件绑定在最小API版本6以下时采用不冒泡处理，在最小API版本为6及6以上时采用冒泡处理。 - -## 捕获事件绑定5+ - -Touch触摸类事件支持捕获，捕获阶段位于冒泡阶段之前，捕获事件先到达父组件然后达到子组件。 - -捕获事件绑定包括： - -- 绑定捕获事件：on:\{event\}.capture。 -- 绑定并阻止事件向下传递：grab:\{event\}.capture。 - -- 示例 - - ``` -
- -
- -
-
- ``` - - ``` - // xxx.js - export default { - touchstartfuc: function(e) { - console.log(e); - }, - } - ``` - - -## 列表渲染 - -``` - -
- - -
- {{$idx}}.{{$item.name}} -
- -
- {{$idx}}.{{value.name}} -
- -
- {{index}}.{{value.name}} -
-
-``` - -``` -// xxx.js -export default { - data: { - array: [ - {id: 1, name: 'jack', age: 18}, - {id: 2, name: 'tony', age: 18}, - ], - }, - changeText: function() { - if (this.array[1].name === "tony"){ - this.array.splice(1, 1, {id:2, name: 'Isabella', age: 18}); - } else { - this.array.splice(2, 1, {id:3, name: 'Bary', age: 18}); - } - }, -} -``` - -tid属性主要用来加速for循环的重渲染，旨在列表中的数据有变更时，提高重新渲染的效率。tid属性是用来指定数组中每个元素的唯一标识，如果未指定，数组中每个元素的索引为该元素的唯一id。例如上述tid="id"表示数组中的每个元素的id属性为该元素的唯一标识。for循环支持的写法如下： - -- for="array"：其中array为数组对象，array的元素变量默认为$item。 -- for="v in array"：其中v为自定义的元素变量，元素索引默认为$idx。 -- for="\(i, v\) in array"：其中元素索引为i，元素变量为v，遍历数组对象array。 - ->![](../../public_sys-resources/icon-note.gif) **说明：** ->- 数组中的每个元素必须存在tid指定的数据属性，否则运行时可能会导致异常。 ->- 数组中被tid指定的属性要保证唯一性，如果不是则会造成性能损耗。比如，示例中只有id和name可以作为tid字段，因为它们属于唯一字段。 ->- tid不支持表达式。 - -## 条件渲染 - -条件渲染分为2种：if/elif/else和show。两种写法的区别在于：第一种写法里if为false时，组件不会在vdom中构建，也不会渲染，而第二种写法里show为false时虽然也不渲染，但会在vdom中构建；另外，当使用if/elif/else写法时，节点必须是兄弟节点，否则编译无法通过。实例如下： - -``` - -
- - - Hello-TV - Hello-Wearable - Hello-World -
-``` - -``` -// xxx.css -.container{ - flex-direction: column; - align-items: center; -} -.btn{ - width: 280px; - font-size: 26px; - margin: 10px 0; -} -``` - -``` -// xxx.js -export default { - data: { - visible: false, - display: true, - }, - toggleShow: function() { - this.visible = !this.visible; - }, - toggleDisplay: function() { - this.display = !this.display; - } -} -``` - -优化渲染优化：show方法。当show为true时，节点正常渲染；当为false时，仅仅设置display样式为none。 - -``` - -
- - Hello World -
-``` - -``` -// xxx.css -.container{ - flex-direction: column; - align-items: center; -} -.btn{ - width: 280px; - font-size: 26px; - margin: 10px 0; -} -``` - -``` -// xxx.js -export default { - data: { - visible: false, - }, - toggle: function() { - this.visible = !this.visible; - }, -} -``` - ->![](../../public_sys-resources/icon-note.gif) **说明：** ->禁止在同一个元素上同时设置for和if属性。 - -## 逻辑控制块 - -控制块使得循环渲染和条件渲染变得更加灵活；block在构建时不会被当作真实的节点编译。注意block标签只支持for和if属性。 - -``` - - - - - {{$item.name}} - - - - {{$item.color}} - - - - -``` - -``` -// xxx.js -export default { - data: { - glasses: [ - {name:'sunglasses', kinds:[{name:'XXX',color:'XXX'},{name:'XXX',color:'XXX'}]}, - {name:'nearsightedness mirror', kinds:[{name:'XXX',color:'XXX'}]}, - ], - }, -} -``` - -## 模板引用 - -HML可以通过element引用模板文件，详细介绍可参考[自定义组件](js-components-custom-basic-usage.md)章节。 - -``` - -
- Name: {{name}} - Age: {{age}} -
-``` - -``` - - -
- -
-``` - diff --git a/zh-cn/application-dev/reference/arkui-js/js-framework-syntax-js.md b/zh-cn/application-dev/reference/arkui-js/js-framework-syntax-js.md deleted file mode 100644 index 154a0c770e0ef64ea65c5b8159b6ac6a022ed92f..0000000000000000000000000000000000000000 --- a/zh-cn/application-dev/reference/arkui-js/js-framework-syntax-js.md +++ /dev/null @@ -1,522 +0,0 @@ -# JS语法参考 - -JS文件用来定义HML页面的业务逻辑，支持ECMA规范的JavaScript语言。基于JavaScript语言的动态化能力，可以使应用更加富有表现力，具备更加灵活的设计能力。下面讲述JS文件的编译和运行的支持情况。 - -## 语法 - -支持ES6语法。 - -- 模块声明 - - 使用import方法引入功能模块： - - ``` - import router from '@system.router'; - ``` - -- 代码引用 - - 使用import方法导入js代码： - - ``` - import utils from '../../common/utils.js'; - ``` - - -## 对象 - -- 应用对象 - - - - - - - - - - - - -

属性

-

类型

-

描述

-

$def

-

Object

-

使用this.$app.$def获取在app.js中暴露的对象。

-
说明：

应用对象不支持数据绑定，需主动触发UI更新。

-
-
- - 示例代码 - - ``` - // app.js - export default { - onCreate() { - console.info('AceApplication onCreate'); - }, - onDestroy() { - console.info('AceApplication onDestroy'); - }, - globalData: { - appData: 'appData', - appVersion: '2.0', - }, - globalMethod() { - console.info('This is a global method!'); - this.globalData.appVersion = '3.0'; - } - }; - ``` - - ``` - // index.js页面逻辑代码 - export default { - data: { - appData: 'localData', - appVersion:'1.0', - }, - onInit() { - this.appData = this.$app.$def.globalData.appData; - this.appVersion = this.$app.$def.globalData.appVersion; - }, - invokeGlobalMethod() { - this.$app.$def.globalMethod(); - }, - getAppVersion() { - this.appVersion = this.$app.$def.globalData.appVersion; - } - } - ``` - -- 页面对象 - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - -

属性

-

类型

-

描述

-

data

-

Object/Function

-

页面的数据模型，类型是对象或者函数，如果类型是函数，返回值必须是对象。属性名不能以$或_开头，不要使用保留字for, if, show, tid。

-

data与private和public不能重合使用。

-

$refs

-

Object

-

持有注册过ref 属性的DOM元素或子组件实例的对象。示例见获取DOM元素。

-

private

-

Object

-

页面的数据模型，private下的数据属性只能由当前页面修改。

-

public

-

Object

-

页面的数据模型，public下的数据属性的行为与data保持一致。

-

props

-

Array/Object

-

props用于组件之间的通信，可以通过<tag xxxx='value'>方式传递给组件；props名称必须用小写，不能以$或_开头，不要使用保留字for, if, show, tid。目前props的数据类型不支持Function。示例见自定义组件。

-

computed

-

Object

-

用于在读取或设置进行预先处理，计算属性的结果会被缓存。计算属性名不能以$或_开头，不要使用保留字。示例见自定义组件。

-
- - -## 方法 - -- 数据方法 - - - - - - - - - - - - - - - - -

方法

-

参数

-

描述

-

$set

-

key: string, value: any

-

添加新的数据属性或者修改已有数据属性。

-

用法：

-

this.$set('key',value)：添加数据属性。

-

$delete

-

key: string

-

删除数据属性。

-

用法：

-

this.$delete('key')：删除数据属性。

-
- - 示例代码 - - ``` - export default { - data: { - keyMap: { - OS: 'OpenHarmony', - Version: '2.0', - }, - }, - getAppVersion() { - this.$set('keyMap.Version', '3.0'); - console.info("keyMap.Version = " + this.keyMap.Version); // keyMap.Version = 3.0 - - this.$delete('keyMap'); - console.info("keyMap.Version = " + this.keyMap); // log print: keyMap.Version = undefined - } - } - ``` - -- 公共方法 - - - - - - - - - - - - - - - - - - - - - - - - - - - - -

方法

-

参数

-

描述

-

$element

-

id: string

-

获得指定id的组件对象，如果无指定id，则返回根组件对象。示例见获取DOM元素。

-

用法：

-

<div id='xxx'></div>

-
  • this.$element('xxx')：获得id为xxx的组件对象。
  • this.$element()：获得根组件对象。
-

$rootElement

-

无

-

获取根组件对象。

-

用法：this.$rootElement().scrollTo({ duration: 500, position: 300 }), 页面在500ms内滚动300px。

-

$root

-

无

-

获得顶级ViewModel实例。获取ViewModel示例。

-

$parent

-

无

-

获得父级ViewModel实例。获取ViewModel示例。

-

$child

-

id: string

-

获得指定id的子级自定义组件的ViewModel实例。获取ViewModel示例。

-

用法：

-

this.$child('xxx') ：获取id为xxx的子级自定义组件的ViewModel实例。

-
- -- 事件方法 - - - - - - - - - - - - -

方法

-

参数

-

描述

-

$watch

-

data: string, callback: string | Function

-

观察data中的属性变化，如果属性值改变，触发绑定的事件。示例见自定义组件。

-

用法：

-

this.$watch('key', callback)

-
- -- 页面方法 - - - - - - - - - - - - -

方法

-

参数

-

描述

-

scrollTo6+

-

scrollPageParam: ScrollPageParam

-

将页面滚动到目标位置，可以通过ID选择器指定或者滚动距离指定。

-
- - **表 1** ScrollPageParam6+ - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - -

名称

-

类型

-

默认值

-

描述

-

position

-

number

-

-

-

指定滚动位置。

-

id

-

string

-

-

-

指定需要滚动到的元素id。

-

duration

-

number

-

300

-

指定滚动时长，单位为毫秒。

-

timingFunction

-

string

-

ease

-

指定滚动动画曲线，可选值参考

-

animation-timing-function。

-

complete

-

() => void

-

-

-

指定滚动完成后需要执行的回调函数。

-
- - 示例： - - ``` - this.$rootElement.scrollTo({position: 0}) - this.$rootElement.scrollTo({id: 'id', duration: 200, timingFunction: 'ease-in', complete: ()=>void}) - ``` - - -## 获取DOM元素 - -1. 通过$refs获取DOM元素 - - ``` - -
- -
- ``` - - ``` - // index.js - export default { - data: { - images: [ - { src: '/common/frame1.png' }, - { src: '/common/frame2.png' }, - { src: '/common/frame3.png' }, - ], - }, - handleClick() { - const animator = this.$refs.animator; // 获取ref属性为animator的DOM元素 - const state = animator.getState(); - if (state === 'paused') { - animator.resume(); - } else if (state === 'stopped') { - animator.start(); - } else { - animator.pause(); - } - }, - }; - ``` - -2. 通过$element获取DOM元素 - - ``` - -
- -
- ``` - - ``` - // index.js - export default { - data: { - images: [ - { src: '/common/frame1.png' }, - { src: '/common/frame2.png' }, - { src: '/common/frame3.png' }, - ], - }, - handleClick() { - const animator = this.$element('animator'); // 获取id属性为animator的DOM元素 - const state = animator.getState(); - if (state === 'paused') { - animator.resume(); - } else if (state === 'stopped') { - animator.start(); - } else { - animator.pause(); - } - }, - }; - ``` - - -## 获取ViewModel - -根节点所在页面： - -``` - - -
-
- {{text}} - -
-
-``` - -``` -// root.js -export default { - data: { - text: 'I am root!', - }, -} -``` - -自定义parent组件： - -``` - - -
- parent component click - hello parent component! - -
-``` - -``` -// parent.js -export default { - data: { - show: false, - text: 'I am parent component!', - }, - parentClicked () { - this.show = !this.show; - console.info('parent component get parent text'); - console.info(`${this.$parent().text}`); - console.info("parent component get child function"); - console.info(`${this.$child('selfDefineChild').childClicked()}`); - }, -} -``` - -自定义child组件： - -``` - -
- child component clicked - hello child component -
-``` - -``` -// child.js -export default { - data: { - show: false, - text: 'I am child component!', - }, - childClicked () { - this.show = !this.show; - console.info('child component get parent text'); - console.info('${this.$parent().text}'); - console.info('child component get root text'); - console.info('${this.$root().text}'); - }, -} -``` - diff --git a/zh-cn/application-dev/reference/arkui-js/js-framework-syntax.md b/zh-cn/application-dev/reference/arkui-js/js-framework-syntax.md deleted file mode 100644 index dfcfef1c2498872ecb5c595b4d2d83328533412c..0000000000000000000000000000000000000000 --- a/zh-cn/application-dev/reference/arkui-js/js-framework-syntax.md +++ /dev/null @@ -1,9 +0,0 @@ -# 语法 - -- **[HML语法参考](js-framework-syntax-hml.md)** - -- **[CSS语法参考](js-framework-syntax-css.md)** - -- **[JS语法参考](js-framework-syntax-js.md)** - - diff --git a/zh-cn/application-dev/reference/arkui-js/js-framework.md b/zh-cn/application-dev/reference/arkui-js/js-framework.md deleted file mode 100644 index ad12f09171ad5b49d2f64cccffa9338dd31ec6c5..0000000000000000000000000000000000000000 --- a/zh-cn/application-dev/reference/arkui-js/js-framework.md +++ /dev/null @@ -1,17 +0,0 @@ -# 框架说明 - -- **[文件组织](js-framework-file.md)** - -- **[js标签配置](js-framework-js-tag.md)** - -- **[app.js](js-framework-js-file.md)** - -- **[语法](js-framework-syntax.md)** - -- **[生命周期](js-framework-lifecycle.md)** - -- **[资源限定与访问](js-framework-resource-restriction.md)** - -- **[多语言支持](js-framework-multiple-languages.md)** - - diff --git a/zh-cn/application-dev/reference/arkui-js/js-offscreencanvasrenderingcontext2d.md b/zh-cn/application-dev/reference/arkui-js/js-offscreencanvasrenderingcontext2d.md index 6c30391ab3b7e1c35591a641fdc6c00c65f37d43..3839b5cfc0ca3c7efdb5384a16673c5f02a45267 100644 --- a/zh-cn/application-dev/reference/arkui-js/js-offscreencanvasrenderingcontext2d.md +++ b/zh-cn/application-dev/reference/arkui-js/js-offscreencanvasrenderingcontext2d.md @@ -1,7 +1,7 @@ # OffscreenCanvasRenderingContext2D对象 >![](../../public_sys-resources/icon-note.gif) **说明：** ->从API Version 7 开始支持。 +>从API version 7开始支持。后续版本如有新增内容，则采用上角标单独标记该内容的起始版本。 使用OffscreenCanvasRenderingContext2D在offscreen canvas上进行绘制，绘制对象可以是矩形、文本、图片等 @@ -9,22 +9,21 @@ 除支持与CanvasRenderingContext2D对象相同的属性外，还支持如下属性： - -

属性

+ - - - - - @@ -32,47 +31,60 @@ - 示例 -``` -var ctx = this.$refs.canvasid.getContext('2d'); -var offscreen = new OffscreenCanvas(360, 500); -var offCanvas2 = offscreen.getContext("2d"); -var img = new Image(); -img.src = 'common/images/flower.jpg'; -offCanvas2.drawImage(img, 0, 0, 100, 100); -offCanvas2.filter = 'blur(5px)'; -offCanvas2.drawImage(img, 100, 0, 100, 100); - -offCanvas2.filter = 'grayscale(50%)'; -offCanvas2.drawImage(img, 200, 0, 100, 100); - -offCanvas2.filter = 'hue-rotate(90deg)'; -offCanvas2.drawImage(img, 0, 100, 100, 100); - -offCanvas2.filter = 'invert(100%)'; -offCanvas2.drawImage(img, 100, 100, 100, 100); - -offCanvas2.filter = 'drop-shadow(8px 8px 10px green)'; -offCanvas2.drawImage(img, 200, 100, 100, 100); - -offCanvas2.filter = 'brightness(0.4)'; -offCanvas2.drawImage(img, 0, 200, 100, 100); - -offCanvas2.filter = 'opacity(25%)'; -offCanvas2.drawImage(img, 100, 200, 100, 100); - -offCanvas2.filter = 'saturate(30%)'; -offCanvas2.drawImage(img, 200, 200, 100, 100); + ``` + +
+ +
+ ``` -offCanvas2.filter = 'sepia(60%)'; -offCanvas2.drawImage(img, 0, 300, 100, 100); + ``` + //xxx.js + export default { + onShow(){ + var ctx = this.$refs.canvasId.getContext('2d'); + var offscreen = new OffscreenCanvas(360, 500); + var offCanvas2 = offscreen.getContext("2d"); + var img = new Image(); + img.src = 'common/images/flower.jpg'; + offCanvas2.drawImage(img, 0, 0, 100, 100); + offCanvas2.filter = 'blur(5px)'; + offCanvas2.drawImage(img, 100, 0, 100, 100); + + offCanvas2.filter = 'grayscale(50%)'; + offCanvas2.drawImage(img, 200, 0, 100, 100); + + offCanvas2.filter = 'hue-rotate(90deg)'; + offCanvas2.drawImage(img, 0, 100, 100, 100); + + offCanvas2.filter = 'invert(100%)'; + offCanvas2.drawImage(img, 100, 100, 100, 100); + + offCanvas2.filter = 'drop-shadow(8px 8px 10px green)'; + offCanvas2.drawImage(img, 200, 100, 100, 100); + + offCanvas2.filter = 'brightness(0.4)'; + offCanvas2.drawImage(img, 0, 200, 100, 100); + + offCanvas2.filter = 'opacity(25%)'; + offCanvas2.drawImage(img, 100, 200, 100, 100); + + offCanvas2.filter = 'saturate(30%)'; + offCanvas2.drawImage(img, 200, 200, 100, 100); + + offCanvas2.filter = 'sepia(60%)'; + offCanvas2.drawImage(img, 0, 300, 100, 100); + + offCanvas2.filter = 'contrast(200%)'; + offCanvas2.drawImage(img, 100, 300, 100, 100); + var bitmap = offscreen.transferToImageBitmap(); + ctx.transferFromImageBitmap(bitmap); + } + } + ``` -offCanvas2.filter = 'contrast(200%)'; -offCanvas2.drawImage(img, 100, 300, 100, 100); -var bitmap = offscreen.transferToImageBitmap(); -ctx.transferFromImageBitmap(bitmap); -``` + ![](figures/c3.png) -![](figures/c3.png) ## 方法 @@ -86,42 +98,41 @@ isPointInPath\(path?: Path2D, x: number, y: number\): boolean - 参数 - -

属性

类型

+

类型

描述

+

描述

filter

+

filter

string

+

string

设置图像的滤镜。

-

支持的滤镜效果如下：

-
  • blur：给图像设置高斯模糊
  • brightness：给图片应用一种线性乘法，使其看起来更亮或更暗
  • contrast：调整图像的对比度
  • drop-shadow：给图像设置一个阴影效果
  • grayscale：将图像转换为灰度图像
  • hue-rotate：给图像应用色相旋转
  • invert：反转输入图像
  • opacity：转化图像的透明程度
  • saturate：转换图像饱和度
  • sepia：将图像转换为深褐色
+

设置图像的滤镜。

+

支持的滤镜效果如下：

+
  • blur：给图像设置高斯模糊
  • brightness：给图片应用一种线性乘法，使其看起来更亮或更暗
  • contrast：调整图像的对比度
  • drop-shadow：给图像设置一个阴影效果
  • grayscale：将图像转换为灰度图像
  • hue-rotate：给图像应用色相旋转
  • invert：反转输入图像
  • opacity：转化图像的透明程度
  • saturate：转换图像饱和度
  • sepia：将图像转换为深褐色

参数名

+ - - - - - - - - - - - - - - - @@ -129,16 +140,15 @@ isPointInPath\(path?: Path2D, x: number, y: number\): boolean - 返回值 - -

参数名

参数类型

+

参数类型

必填

+

必填

描述

+

描述

path

+

path

Path2D

+

Path2D

否

+

否

可选对象，指定用来判断的路径。若没有设置，则使用当前路径。

+

可选对象，指定用来判断的路径。若没有设置，则使用当前路径。

x

+

x

number

+

number

是

+

是

待判断点的x轴坐标。

+

待判断点的x轴坐标。

y

+

y

number

+

number

是

+

是

待判断点的y轴坐标。

+

待判断点的y轴坐标。

类型

+ - - - @@ -150,8 +160,8 @@ isPointInPath\(path?: Path2D, x: number, y: number\): boolean
In path:{{textValue}} +
- ``` ``` @@ -186,42 +196,41 @@ isPointInStroke\(path?: Path2D, x: number, y: number\): boolean - 参数 - -

类型

说明

+

说明

boolean

+

boolean

指定点是否在路径的区域内。

+

指定点是否在路径的区域内。

参数名

+ - - - - - - - - - - - - - - - @@ -229,16 +238,15 @@ isPointInStroke\(path?: Path2D, x: number, y: number\): boolean - 返回值 - -

参数名

参数类型

+

参数类型

必填

+

必填

描述

+

描述

path

+

path

Path2D

+

Path2D

否

+

否

可选对象，指定用来判断的路径。若没有设置，则使用当前路径。

+

可选对象，指定用来判断的路径。若没有设置，则使用当前路径。

x

+

x

number

+

number

是

+

是

待判断点的x轴坐标。

+

待判断点的x轴坐标。

y

+

y

number

+

number

是

+

是

待判断点的y轴坐标。

+

待判断点的y轴坐标。

类型

+ - - - @@ -250,8 +258,8 @@ isPointInStroke\(path?: Path2D, x: number, y: number\): boolean
In path:{{textValue}} +
- ``` ``` @@ -285,23 +293,39 @@ resetTransform\(\): void - 示例 ``` - var canvas = this.$refs.canvas.getContext('2d'); - var offscreen = new OffscreenCanvas(500,500); - var offscreenCanvasCtx = offscreen.getContext("2d"); + +
+ In path:{{textValue}} + +
+ ``` + + ``` + //xxx.js + export default { + data:{ + textValue:0 + }, + onShow(){ + var canvas = this.$refs.canvas.getContext('2d'); + var offscreen = new OffscreenCanvas(500,500); + var offscreenCanvasCtx = offscreen.getContext("2d"); - offscreenCanvasCtx.transform(1, 0, 1.7, 1, 0, 0); - offscreenCanvasCtx.fillStyle = 'gray'; - offscreenCanvasCtx.fillRect(40, 40, 50, 20); - offscreenCanvasCtx.fillRect(40, 90, 50, 20); + offscreenCanvasCtx.transform(1, 0, 1.7, 1, 0, 0); + offscreenCanvasCtx.fillStyle = 'gray'; + offscreenCanvasCtx.fillRect(40, 40, 50, 20); + offscreenCanvasCtx.fillRect(40, 90, 50, 20); - // Non-skewed rectangles - offscreenCanvasCtx.resetTransform(); - offscreenCanvasCtx.fillStyle = 'red'; - offscreenCanvasCtx.fillRect(40, 40, 50, 20); - offscreenCanvasCtx.fillRect(40, 90, 50, 20); + // Non-skewed rectangles + offscreenCanvasCtx.resetTransform(); + offscreenCanvasCtx.fillStyle = 'red'; + offscreenCanvasCtx.fillRect(40, 40, 50, 20); + offscreenCanvasCtx.fillRect(40, 90, 50, 20); - var bitmap = offscreen.transferToImageBitmap(); - canvas.transferFromImageBitmap(bitmap); + var bitmap = offscreen.transferToImageBitmap(); + canvas.transferFromImageBitmap(bitmap); + } + } ``` ![](figures/zh-cn_image_0000001179035242.png) diff --git a/zh-cn/application-dev/reference/arkui-js/js-web-development-like.md b/zh-cn/application-dev/reference/arkui-js/js-web-development-like.md deleted file mode 100644 index 173e920568d788f45f757d023e9aa7472c3629dc..0000000000000000000000000000000000000000 --- a/zh-cn/application-dev/reference/arkui-js/js-web-development-like.md +++ /dev/null @@ -1,11 +0,0 @@ -# 基于JS扩展的类Web开发范式 - -- **[框架说明](js-framework.md)** - -- **[组件](js-components.md)** - -- **[自定义组件](js-components-custom.md)** - -- **[附录](js-appendix.md)** - - diff --git a/zh-cn/application-dev/reference/arkui-ts/Readme-CN.md b/zh-cn/application-dev/reference/arkui-ts/Readme-CN.md index 7282ed74e5d507e4721af6ec1c2fae2c7eae90ce..ef5825ceb1eedf1962c146f5eaeaff37a2f314b1 100644 --- a/zh-cn/application-dev/reference/arkui-ts/Readme-CN.md +++ b/zh-cn/application-dev/reference/arkui-ts/Readme-CN.md @@ -1,74 +1,4 @@ -# 基于TS扩展的声明式开发范式 - -- [框架说明](ts-framework-framework.md) - - [文件组织](ts-framework-file.md) - - [目录结构](ts-framework-directory.md) - - [应用代码文件访问规则](ts-framework-file-access-rules.md) - - - [js标签配置](ts-framework-js-tag.md) - - [资源访问](ts-resource-access.md) - - [媒体资源类型说明](ts-media-resource-type.md) - - - [像素单位](ts-pixel-units.md) - - [类型定义](ts-types.md) - -- [声明式语法](ts-declarative-syntax.md) - - [描述规范使用说明](ts-syntax-intro.md) - - [通用UI描述规范](ts-general-ui-description-specifications.md) - - [基本概念](ts-general-ui-concepts.md) - - [声明式UI描述规范](ts-declarative-ui-description-specifications.md) - - [无构造参数配置](ts-parameterless-configuration.md) - - [必选参数构造配置](ts-configuration-with-mandatory-parameters.md) - - [属性配置](ts-attribution-configuration.md) - - [事件配置](ts-event-configuration.md) - - [子组件配置](ts-child-component-configuration.md) - - - [组件化](ts-component-based.md) - - [@Component](ts-component-based-component.md) - - [@Entry](ts-component-based-entry.md) - - [@Preview](ts-component-based-preview.md) - - [@Builder](ts-component-based-builder.md) - - [@Extend](ts-component-based-extend.md) - - [@CustomDialog](ts-component-based-customdialog.md) - - - [UI状态管理](ts-ui-state-management.md) - - [基本概念](ts-ui-state-mgmt-concepts.md) - - [管理组件拥有的状态](ts-managing-component-states.md) - - [@State](ts-component-states-state.md) - - [@Prop](ts-component-states-prop.md) - - [@Link](ts-component-states-link.md) - - - [管理应用程序的状态](ts-managing-application-states.md) - - [接口](ts-managing-application-states-apis.md) - - [应用程序的数据存储](ts-application-states-appstorage.md) - - [持久化数据管理](ts-application-states-apis-persistentstorage.md) - - [环境变量](ts-application-states-apis-environment.md) - - - [AppStorage与组件同步](ts-application-states-storagelink-storageprop.md) - - - [其他类目的状态管理](ts-managing-other-states.md) - - [Observed和ObjectLink数据管理](ts-other-states-observed-objectlink.md) - - [@Consume和@Provide数据管理](ts-other-states-consume-provide.md) - - [@Watch](ts-other-states-watch.md) - - - [渲染控制语法](ts-rending-control-syntax.md) - - [条件渲染](ts-rending-control-syntax-if-else.md) - - [循环渲染](ts-rending-control-syntax-foreach.md) - - [数据懒加载](ts-rending-control-syntax-lazyforeach.md) - - - [深入理解组件化](ts-a-deep-dive-into-component.md) - - [build函数](ts-function-build.md) - - [自定义组件初始化](ts-custom-component-initialization.md) - - [自定义组件生命周期回调函数](ts-custom-component-lifecycle-callbacks.md) - - [组件创建和重新初始化示例](ts-component-creation-re-initialization.md) - - - [语法糖](ts-syntactic-sugar.md) - - [装饰器](ts-syntactic-sugar-decorator.md) - - [链式调用](ts-syntactic-sugar-chaining.md) - - [struct对象](ts-syntactic-sugar-struct.md) - - [在实例化过程中省略"new"](ts-instantiating-a-struct-without-new-keyword.md) - - [组件创建使用独立一行](ts-using-a-separate-line-for-new-component.md) - - [生成器函数内使用TS语言的限制](ts-restrictions-for-generators.md) +# 基于TS扩展的声明式开发范式 - [组件](ts-components.md) - [通用](ts-universal-components.md) @@ -77,6 +7,7 @@ - [触摸事件](ts-universal-events-touch.md) - [挂载卸载事件](ts-universal-events-show-hide.md) - [按键事件](ts-universal-events-key.md) + - [组件区域变化事件](ts-universal-events-component-area-change.md) - [通用属性](ts-universal-attributes.md) - [尺寸设置](ts-universal-attributes-size.md) @@ -98,6 +29,8 @@ - [颜色渐变](ts-universal-attributes-gradient-color.md) - [Popup控制](ts-universal-attributes-popup.md) - [Menu控制](ts-universal-attributes-menu.md) + - [点击控制](ts-universal-attributes-touchable.md) + - [触摸热区设置](ts-universal-attributes-response-region.md) - [手势处理](ts-gesture-processing.md) - [绑定手势方法](ts-gesture-settings.md) @@ -107,6 +40,7 @@ - [PanGesture](ts-basic-gestures-pangesture.md) - [PinchGesture](ts-basic-gestures-pinchgesture.md) - [RotationGesture](ts-basic-gestures-rotationgesture.md) + - [SwipeGesture](ts-basic-gestures-swipegesture.md) - [组合手势](ts-combined-gestures.md) @@ -115,14 +49,19 @@ - [Button](ts-basic-components-button.md) - [DataPanel](ts-basic-components-datapanel.md) - [Divider](ts-basic-components-divider.md) + - [Gauge](ts-basic-components-gauge.md) - [Image](ts-basic-components-image.md) - [ImageAnimator](ts-basic-components-imageanimator.md) + - [Marquee](ts-basic-components-marquee.md) - [Progress](ts-basic-components-progress.md) - [QRCode](ts-basic-components-qrcode.md) - [Rating](ts-basic-components-rating.md) - [Span](ts-basic-components-span.md) - [Slider](ts-basic-components-slider.md) - [Text](ts-basic-components-text.md) + - [TextArea](ts-basic-components-textarea.md) + - [TextInput](ts-basic-components-textinput.md) + - [Toggle](ts-basic-components-toggle.md) - [容器组件](ts-components-container.md) - [AlphabetIndexer](ts-container-alphabet-indexer.md) @@ -137,14 +76,18 @@ - [List](ts-container-list.md) - [ListItem](ts-container-listitem.md) - [Navigator](ts-container-navigator.md) + - [Navigation](ts-container-navigation.md) - [Panel](ts-container-panel.md) - [Row](ts-container-row.md) - [RowSplit](ts-container-rowsplit.md) - [Scroll](ts-container-scroll.md) + - [ScrollBar](ts-container-scrollbar.md) - [Stack](ts-container-stack.md) - [Swiper](ts-container-swiper.md) - [Tabs](ts-container-tabs.md) - [TabContent](ts-container-tabcontent.md) + - [Stepper](ts-container-stepper.md) + - [StepperItem](ts-container-stepperitem.md) - [绘制组件](ts-drawing-components.md) - [Circle](ts-drawing-components-circle.md) @@ -156,6 +99,16 @@ - [Rect](ts-drawing-components-rect.md) - [Shape](ts-drawing-components-shape.md) + - [画布组件](ts-components-canvas.md) + - [Canvas](ts-components-canvas-canvas.md) + - [CanvasRenderingContext2D对象](ts-canvasrenderingcontext2d.md) + - [OffscreenCanvasRenderingConxt2D对象](ts-offscreencanvasrenderingcontext2d.md) + - [Lottie](ts-components-canvas-lottie.md) + - [Path2D对象](ts-components-canvas-path2d.md) + - [CanvasGradient对象](ts-components-canvas-canvasgradient.md) + - [ImageBitmap对象](ts-components-canvas-imagebitmap.md) + - [ImageData对象](ts-components-canvas-imagedata.md) + - [动画](ts-animation.md) - [属性动画](ts-animatorproperty.md) - [显式动画](ts-explicit-animation.md) @@ -173,6 +126,8 @@ - [自定义弹窗](ts-methods-custom-dialog-box.md) - [图片缓存](ts-methods-image-cache.md) - [媒体查询](ts-methods-media-query.md) + - [列表选择弹窗](ts-methods-custom-actionsheet.md) - [附录](ts-appendix.md) - - [文档中涉及到的内置枚举值](ts-appendix-enums.md) \ No newline at end of file + - [文档中涉及到的内置枚举值](ts-appendix-enums.md) + diff --git a/zh-cn/application-dev/reference/arkui-ts/Readme-CN.md.md b/zh-cn/application-dev/reference/arkui-ts/Readme-CN.md.md new file mode 100644 index 0000000000000000000000000000000000000000..ef5825ceb1eedf1962c146f5eaeaff37a2f314b1 --- /dev/null +++ b/zh-cn/application-dev/reference/arkui-ts/Readme-CN.md.md @@ -0,0 +1,133 @@ +# 基于TS扩展的声明式开发范式 + +- [组件](ts-components.md) + - [通用](ts-universal-components.md) + - [通用事件](ts-universal-events.md) + - [点击事件](ts-universal-events-click.md) + - [触摸事件](ts-universal-events-touch.md) + - [挂载卸载事件](ts-universal-events-show-hide.md) + - [按键事件](ts-universal-events-key.md) + - [组件区域变化事件](ts-universal-events-component-area-change.md) + + - [通用属性](ts-universal-attributes.md) + - [尺寸设置](ts-universal-attributes-size.md) + - [位置设置](ts-universal-attributes-location.md) + - [布局约束](ts-universal-attributes-layout-constraints.md) + - [Flex布局](ts-universal-attributes-flex-layout.md) + - [边框设置](ts-universal-attributes-border.md) + - [背景设置](ts-universal-attributes-background.md) + - [透明度设置](ts-universal-attributes-opacity.md) + - [显隐控制](ts-universal-attributes-visibility.md) + - [禁用控制](ts-universal-attributes-enable.md) + - [浮层](ts-universal-attributes-overlay.md) + - [Z序控制](ts-universal-attributes-z-order.md) + - [图形变换](ts-universal-attributes-transformation.md) + - [图像效果](ts-universal-attributes-image-effect.md) + - [形状裁剪](ts-universal-attributes-sharp-clipping.md) + - [文本样式设置](ts-universal-attributes-text-style.md) + - [栅格设置](ts-universal-attributes-grid.md) + - [颜色渐变](ts-universal-attributes-gradient-color.md) + - [Popup控制](ts-universal-attributes-popup.md) + - [Menu控制](ts-universal-attributes-menu.md) + - [点击控制](ts-universal-attributes-touchable.md) + - [触摸热区设置](ts-universal-attributes-response-region.md) + + - [手势处理](ts-gesture-processing.md) + - [绑定手势方法](ts-gesture-settings.md) + - [基础手势](ts-basic-gestures.md) + - [TapGesture](ts-basic-gestures-tapgesture.md) + - [LongPressGesture](ts-basic-gestures-longpressgesture.md) + - [PanGesture](ts-basic-gestures-pangesture.md) + - [PinchGesture](ts-basic-gestures-pinchgesture.md) + - [RotationGesture](ts-basic-gestures-rotationgesture.md) + - [SwipeGesture](ts-basic-gestures-swipegesture.md) + + - [组合手势](ts-combined-gestures.md) + + - [基础组件](ts-basic-components.md) + - [Blank](ts-basic-components-blank.md) + - [Button](ts-basic-components-button.md) + - [DataPanel](ts-basic-components-datapanel.md) + - [Divider](ts-basic-components-divider.md) + - [Gauge](ts-basic-components-gauge.md) + - [Image](ts-basic-components-image.md) + - [ImageAnimator](ts-basic-components-imageanimator.md) + - [Marquee](ts-basic-components-marquee.md) + - [Progress](ts-basic-components-progress.md) + - [QRCode](ts-basic-components-qrcode.md) + - [Rating](ts-basic-components-rating.md) + - [Span](ts-basic-components-span.md) + - [Slider](ts-basic-components-slider.md) + - [Text](ts-basic-components-text.md) + - [TextArea](ts-basic-components-textarea.md) + - [TextInput](ts-basic-components-textinput.md) + - [Toggle](ts-basic-components-toggle.md) + + - [容器组件](ts-components-container.md) + - [AlphabetIndexer](ts-container-alphabet-indexer.md) + - [Badge](ts-container-badge.md) + - [Column](ts-container-column.md) + - [ColumnSplit](ts-container-columnsplit.md) + - [Counter](ts-container-counter.md) + - [Flex](ts-container-flex.md) + - [GridContainer](ts-container-gridcontainer.md) + - [Grid](ts-container-grid.md) + - [GridItem](ts-container-griditem.md) + - [List](ts-container-list.md) + - [ListItem](ts-container-listitem.md) + - [Navigator](ts-container-navigator.md) + - [Navigation](ts-container-navigation.md) + - [Panel](ts-container-panel.md) + - [Row](ts-container-row.md) + - [RowSplit](ts-container-rowsplit.md) + - [Scroll](ts-container-scroll.md) + - [ScrollBar](ts-container-scrollbar.md) + - [Stack](ts-container-stack.md) + - [Swiper](ts-container-swiper.md) + - [Tabs](ts-container-tabs.md) + - [TabContent](ts-container-tabcontent.md) + - [Stepper](ts-container-stepper.md) + - [StepperItem](ts-container-stepperitem.md) + + - [绘制组件](ts-drawing-components.md) + - [Circle](ts-drawing-components-circle.md) + - [Ellipse](ts-drawing-components-ellipse.md) + - [Line](ts-drawing-components-line.md) + - [Polyline](ts-drawing-components-polyline.md) + - [Polygon](ts-drawing-components-polygon.md) + - [Path](ts-drawing-components-path.md) + - [Rect](ts-drawing-components-rect.md) + - [Shape](ts-drawing-components-shape.md) + + - [画布组件](ts-components-canvas.md) + - [Canvas](ts-components-canvas-canvas.md) + - [CanvasRenderingContext2D对象](ts-canvasrenderingcontext2d.md) + - [OffscreenCanvasRenderingConxt2D对象](ts-offscreencanvasrenderingcontext2d.md) + - [Lottie](ts-components-canvas-lottie.md) + - [Path2D对象](ts-components-canvas-path2d.md) + - [CanvasGradient对象](ts-components-canvas-canvasgradient.md) + - [ImageBitmap对象](ts-components-canvas-imagebitmap.md) + - [ImageData对象](ts-components-canvas-imagedata.md) + +- [动画](ts-animation.md) + - [属性动画](ts-animatorproperty.md) + - [显式动画](ts-explicit-animation.md) + - [转场动画](ts-transition-animation.md) + - [页面间转场](ts-page-transition-animation.md) + - [组件内转场](ts-transition-animation-component.md) + - [共享元素转场](ts-transition-animation-shared-elements.md) + + - [路径动画](ts-motion-path-animation.md) + - [矩阵变换](ts-matrix-transformation.md) + - [插值计算](ts-interpolation-calculation.md) + +- [全局UI方法](ts-global-ui-methods.md) + - [警告弹窗](ts-methods-alert-dialog-box.md) + - [自定义弹窗](ts-methods-custom-dialog-box.md) + - [图片缓存](ts-methods-image-cache.md) + - [媒体查询](ts-methods-media-query.md) + - [列表选择弹窗](ts-methods-custom-actionsheet.md) + +- [附录](ts-appendix.md) + - [文档中涉及到的内置枚举值](ts-appendix-enums.md) + diff --git a/zh-cn/application-dev/reference/arkui-ts/figures/000000-5.png b/zh-cn/application-dev/reference/arkui-ts/figures/000000-5.png deleted file mode 100644 index 58293d5e874f2aa36ecaf7282ca9e4736318092f..0000000000000000000000000000000000000000 Binary files a/zh-cn/application-dev/reference/arkui-ts/figures/000000-5.png and /dev/null differ diff --git a/zh-cn/application-dev/reference/arkui-ts/figures/1-19.png b/zh-cn/application-dev/reference/arkui-ts/figures/1.png similarity index 100% rename from zh-cn/application-dev/reference/arkui-ts/figures/1-19.png rename to zh-cn/application-dev/reference/arkui-ts/figures/1.png diff --git a/zh-cn/application-dev/reference/arkui-ts/figures/11111-5.png b/zh-cn/application-dev/reference/arkui-ts/figures/11111-5.png new file mode 100644 index 0000000000000000000000000000000000000000..5da42e3e14d601745274cb62d914c6600620bb25 Binary files /dev/null and b/zh-cn/application-dev/reference/arkui-ts/figures/11111-5.png differ diff --git a/zh-cn/application-dev/reference/arkui-ts/figures/11111.png b/zh-cn/application-dev/reference/arkui-ts/figures/11111.png new file mode 100644 index 0000000000000000000000000000000000000000..5da42e3e14d601745274cb62d914c6600620bb25 Binary files /dev/null and b/zh-cn/application-dev/reference/arkui-ts/figures/11111.png differ diff --git a/zh-cn/application-dev/reference/arkui-ts/figures/2-01.png b/zh-cn/application-dev/reference/arkui-ts/figures/2-01.png new file mode 100644 index 0000000000000000000000000000000000000000..e766d36181c3d1fbd96bb0acab1b3eb670e14cd4 Binary files /dev/null and b/zh-cn/application-dev/reference/arkui-ts/figures/2-01.png differ diff --git a/zh-cn/application-dev/reference/arkui-ts/figures/5-20.gif b/zh-cn/application-dev/reference/arkui-ts/figures/5.gif similarity index 100% rename from zh-cn/application-dev/reference/arkui-ts/figures/5-20.gif rename to zh-cn/application-dev/reference/arkui-ts/figures/5.gif diff --git a/zh-cn/application-dev/reference/arkui-ts/figures/66666.gif b/zh-cn/application-dev/reference/arkui-ts/figures/66666.gif new file mode 100644 index 0000000000000000000000000000000000000000..b40f786a2f583af59e9f63d35ab1d503f51525da Binary files /dev/null and b/zh-cn/application-dev/reference/arkui-ts/figures/66666.gif differ diff --git a/zh-cn/application-dev/reference/arkui-ts/figures/Blank1.gif b/zh-cn/application-dev/reference/arkui-ts/figures/Blank1.gif new file mode 100644 index 0000000000000000000000000000000000000000..2547cd4af312ee9a2cfc6c3c61b630fdcd7426f9 Binary files /dev/null and b/zh-cn/application-dev/reference/arkui-ts/figures/Blank1.gif differ diff --git a/zh-cn/application-dev/reference/arkui-ts/figures/Blank2.gif b/zh-cn/application-dev/reference/arkui-ts/figures/Blank2.gif new file mode 100644 index 0000000000000000000000000000000000000000..fe04e9611135b8d8cd4f9ace0acf1d1a5797bf6c Binary files /dev/null and b/zh-cn/application-dev/reference/arkui-ts/figures/Blank2.gif differ diff --git a/zh-cn/application-dev/reference/arkui-ts/figures/Click.gif b/zh-cn/application-dev/reference/arkui-ts/figures/Click.gif deleted file mode 100644 index 20a61f7c3daa0e4225a7421803948c073fb9fe31..0000000000000000000000000000000000000000 Binary files a/zh-cn/application-dev/reference/arkui-ts/figures/Click.gif and /dev/null differ diff --git a/zh-cn/application-dev/reference/arkui-ts/figures/F.gif b/zh-cn/application-dev/reference/arkui-ts/figures/F.gif new file mode 100644 index 0000000000000000000000000000000000000000..070ae9d042d5211b2ccc6c187ec0f87a90d2c963 Binary files /dev/null and b/zh-cn/application-dev/reference/arkui-ts/figures/F.gif differ diff --git a/zh-cn/application-dev/reference/arkui-ts/figures/Flex04-16.gif b/zh-cn/application-dev/reference/arkui-ts/figures/Flex04-2.gif similarity index 100% rename from zh-cn/application-dev/reference/arkui-ts/figures/Flex04-16.gif rename to zh-cn/application-dev/reference/arkui-ts/figures/Flex04-2.gif diff --git a/zh-cn/application-dev/reference/arkui-ts/figures/GIF-0.gif b/zh-cn/application-dev/reference/arkui-ts/figures/GIF-0.gif new file mode 100644 index 0000000000000000000000000000000000000000..23a03cf07feddcb9866e7ab141c212ebf01bf8b2 Binary files /dev/null and b/zh-cn/application-dev/reference/arkui-ts/figures/GIF-0.gif differ diff --git a/zh-cn/application-dev/reference/arkui-ts/figures/GIF-1.gif b/zh-cn/application-dev/reference/arkui-ts/figures/GIF-1.gif new file mode 100644 index 0000000000000000000000000000000000000000..52fed39eeae057043dbd00abce9ff29d2c35a56a Binary files /dev/null and b/zh-cn/application-dev/reference/arkui-ts/figures/GIF-1.gif differ diff --git a/zh-cn/application-dev/reference/arkui-ts/figures/GIF-4.gif b/zh-cn/application-dev/reference/arkui-ts/figures/GIF-4.gif new file mode 100644 index 0000000000000000000000000000000000000000..5bcc79b53b227b6bd0484045d20743d9686c8e08 Binary files /dev/null and b/zh-cn/application-dev/reference/arkui-ts/figures/GIF-4.gif differ diff --git a/zh-cn/application-dev/reference/arkui-ts/figures/GIF.gif b/zh-cn/application-dev/reference/arkui-ts/figures/GIF.gif new file mode 100644 index 0000000000000000000000000000000000000000..8eceb3bf5313485a1fedda5768e70cdb5febc464 Binary files /dev/null and b/zh-cn/application-dev/reference/arkui-ts/figures/GIF.gif differ diff --git a/zh-cn/application-dev/reference/arkui-ts/figures/GIF1.gif b/zh-cn/application-dev/reference/arkui-ts/figures/GIF1.gif new file mode 100644 index 0000000000000000000000000000000000000000..e97b2a2406059ce3af77ade27bb634845d807726 Binary files /dev/null and b/zh-cn/application-dev/reference/arkui-ts/figures/GIF1.gif differ diff --git a/zh-cn/application-dev/reference/arkui-ts/figures/GIF2.gif b/zh-cn/application-dev/reference/arkui-ts/figures/GIF2.gif new file mode 100644 index 0000000000000000000000000000000000000000..b0a6fc0df420fa15f8a0e476da5fa8592bbc751b Binary files /dev/null and b/zh-cn/application-dev/reference/arkui-ts/figures/GIF2.gif differ diff --git a/zh-cn/application-dev/reference/arkui-ts/figures/GIF4.gif b/zh-cn/application-dev/reference/arkui-ts/figures/GIF4.gif new file mode 100644 index 0000000000000000000000000000000000000000..c7532ed87726ac7591901514a7396b617daa10f0 Binary files /dev/null and b/zh-cn/application-dev/reference/arkui-ts/figures/GIF4.gif differ diff --git a/zh-cn/application-dev/reference/arkui-ts/figures/GestureSetting.gif b/zh-cn/application-dev/reference/arkui-ts/figures/GestureSetting.gif deleted file mode 100644 index d8e941ae58c68666c04183756b9549cef9d9d3b0..0000000000000000000000000000000000000000 Binary files a/zh-cn/application-dev/reference/arkui-ts/figures/GestureSetting.gif and /dev/null differ diff --git a/zh-cn/application-dev/reference/arkui-ts/figures/Image3.gif b/zh-cn/application-dev/reference/arkui-ts/figures/Image3.gif deleted file mode 100644 index 209112f1e4c14478df3f44390732d4b2c70755f4..0000000000000000000000000000000000000000 Binary files a/zh-cn/application-dev/reference/arkui-ts/figures/Image3.gif and /dev/null differ diff --git a/zh-cn/application-dev/reference/arkui-ts/figures/Touch.gif b/zh-cn/application-dev/reference/arkui-ts/figures/Touch.gif deleted file mode 100644 index 021c8dfc90ce80c3ee16acbcb4e06c0ddec6e21e..0000000000000000000000000000000000000000 Binary files a/zh-cn/application-dev/reference/arkui-ts/figures/Touch.gif and /dev/null differ diff --git a/zh-cn/application-dev/reference/arkui-ts/figures/actionsheet.gif b/zh-cn/application-dev/reference/arkui-ts/figures/actionsheet.gif new file mode 100644 index 0000000000000000000000000000000000000000..bc2226ea26f489db1badf5749dba5b291ac02820 Binary files /dev/null and b/zh-cn/application-dev/reference/arkui-ts/figures/actionsheet.gif differ diff --git a/zh-cn/application-dev/reference/arkui-ts/figures/blank_h.gif b/zh-cn/application-dev/reference/arkui-ts/figures/blank_h.gif deleted file mode 100644 index 6f3a05c4fa0ac29097cc25d6021fa33f069f6175..0000000000000000000000000000000000000000 Binary files a/zh-cn/application-dev/reference/arkui-ts/figures/blank_h.gif and /dev/null differ diff --git a/zh-cn/application-dev/reference/arkui-ts/figures/blank_v.gif b/zh-cn/application-dev/reference/arkui-ts/figures/blank_v.gif deleted file mode 100644 index 04e09206185deb61233c3bf51a302cc0ccc9c080..0000000000000000000000000000000000000000 Binary files a/zh-cn/application-dev/reference/arkui-ts/figures/blank_v.gif and /dev/null differ diff --git a/zh-cn/application-dev/reference/arkui-ts/figures/blue-6.png b/zh-cn/application-dev/reference/arkui-ts/figures/blue-6.png deleted file mode 100644 index e370a44cf043fc34bd8891f57faad2cd2ca05707..0000000000000000000000000000000000000000 Binary files a/zh-cn/application-dev/reference/arkui-ts/figures/blue-6.png and /dev/null differ diff --git a/zh-cn/application-dev/reference/arkui-ts/figures/brown-7.png b/zh-cn/application-dev/reference/arkui-ts/figures/brown-7.png deleted file mode 100644 index 0d22570503febc7a7dcba0d1e870f49f32fe489a..0000000000000000000000000000000000000000 Binary files a/zh-cn/application-dev/reference/arkui-ts/figures/brown-7.png and /dev/null differ diff --git a/zh-cn/application-dev/reference/arkui-ts/figures/datapanel.jpg b/zh-cn/application-dev/reference/arkui-ts/figures/datapanel.jpg new file mode 100644 index 0000000000000000000000000000000000000000..b12c5fb6563c7ee9d8dfa7e6af1cfe1dcfa1361c Binary files /dev/null and b/zh-cn/application-dev/reference/arkui-ts/figures/datapanel.jpg differ diff --git a/zh-cn/application-dev/reference/arkui-ts/figures/datapanel.png b/zh-cn/application-dev/reference/arkui-ts/figures/datapanel.png deleted file mode 100644 index 6b8ac87fce6a2b4aebc98304db6ed2fd7d14cb82..0000000000000000000000000000000000000000 Binary files a/zh-cn/application-dev/reference/arkui-ts/figures/datapanel.png and /dev/null differ diff --git a/zh-cn/application-dev/reference/arkui-ts/figures/duande.gif b/zh-cn/application-dev/reference/arkui-ts/figures/duande.gif new file mode 100644 index 0000000000000000000000000000000000000000..7ed4e908925042a11312dd27aa1c28e8c91d8d8c Binary files /dev/null and b/zh-cn/application-dev/reference/arkui-ts/figures/duande.gif differ diff --git a/zh-cn/application-dev/reference/arkui-ts/figures/ellipse-18.png b/zh-cn/application-dev/reference/arkui-ts/figures/ellipse.png similarity index 100% rename from zh-cn/application-dev/reference/arkui-ts/figures/ellipse-18.png rename to zh-cn/application-dev/reference/arkui-ts/figures/ellipse.png diff --git a/zh-cn/application-dev/reference/arkui-ts/figures/gauge.png b/zh-cn/application-dev/reference/arkui-ts/figures/gauge.png new file mode 100644 index 0000000000000000000000000000000000000000..2eb96b00f11e597fcc3e3d5ef32701e0a4ef5f5b Binary files /dev/null and b/zh-cn/application-dev/reference/arkui-ts/figures/gauge.png differ diff --git a/zh-cn/application-dev/reference/arkui-ts/figures/green-9.png b/zh-cn/application-dev/reference/arkui-ts/figures/green-9.png deleted file mode 100644 index bc28f5056c679e189543c8ad6fba67fb56db7655..0000000000000000000000000000000000000000 Binary files a/zh-cn/application-dev/reference/arkui-ts/figures/green-9.png and /dev/null differ diff --git a/zh-cn/application-dev/reference/arkui-ts/figures/grey-8.png b/zh-cn/application-dev/reference/arkui-ts/figures/grey-8.png deleted file mode 100644 index dfcb0c5e259b3f8d7375c21712249c1e847edd67..0000000000000000000000000000000000000000 Binary files a/zh-cn/application-dev/reference/arkui-ts/figures/grey-8.png and /dev/null differ diff --git a/zh-cn/application-dev/reference/arkui-ts/figures/grid-17.gif b/zh-cn/application-dev/reference/arkui-ts/figures/grid-3.gif similarity index 100% rename from zh-cn/application-dev/reference/arkui-ts/figures/grid-17.gif rename to zh-cn/application-dev/reference/arkui-ts/figures/grid-3.gif diff --git a/zh-cn/application-dev/reference/arkui-ts/figures/lottie-ark-2-0-canvas-ui-animate.gif b/zh-cn/application-dev/reference/arkui-ts/figures/lottie-ark-2-0-canvas-ui-animate.gif new file mode 100644 index 0000000000000000000000000000000000000000..e22d25b7aa139409766723e4ed0fd6172b85b6cf Binary files /dev/null and b/zh-cn/application-dev/reference/arkui-ts/figures/lottie-ark-2-0-canvas-ui-animate.gif differ diff --git a/zh-cn/application-dev/reference/arkui-ts/figures/orange-10.png b/zh-cn/application-dev/reference/arkui-ts/figures/orange-10.png deleted file mode 100644 index 9c43caf5fdfd466eafc37b793f509a6bde2b885d..0000000000000000000000000000000000000000 Binary files a/zh-cn/application-dev/reference/arkui-ts/figures/orange-10.png and /dev/null differ diff --git a/zh-cn/application-dev/reference/arkui-ts/figures/overlay.gif b/zh-cn/application-dev/reference/arkui-ts/figures/overlay.gif deleted file mode 100644 index 4cce6cb6a529cffef01d5b7d1f6ce5f02d63210e..0000000000000000000000000000000000000000 Binary files a/zh-cn/application-dev/reference/arkui-ts/figures/overlay.gif and /dev/null differ diff --git a/zh-cn/application-dev/reference/arkui-ts/figures/overlay.png b/zh-cn/application-dev/reference/arkui-ts/figures/overlay.png new file mode 100644 index 0000000000000000000000000000000000000000..8c8194c14b5ca1ea743782db95027035370ead7e Binary files /dev/null and b/zh-cn/application-dev/reference/arkui-ts/figures/overlay.png differ diff --git a/zh-cn/application-dev/reference/arkui-ts/figures/pink-11.png b/zh-cn/application-dev/reference/arkui-ts/figures/pink-11.png deleted file mode 100644 index 5c5e360f249a2002ba68ad9b94bd7f66f5d6aab1..0000000000000000000000000000000000000000 Binary files a/zh-cn/application-dev/reference/arkui-ts/figures/pink-11.png and /dev/null differ diff --git a/zh-cn/application-dev/reference/arkui-ts/figures/popup.gif b/zh-cn/application-dev/reference/arkui-ts/figures/popup.gif index 3bbb23f623eb1163af382d30bc32c1c4cbe524dd..7631bb0d995839d59a9d3876f91fd7e688c35758 100644 Binary files a/zh-cn/application-dev/reference/arkui-ts/figures/popup.gif and b/zh-cn/application-dev/reference/arkui-ts/figures/popup.gif differ diff --git a/zh-cn/application-dev/reference/arkui-ts/figures/progress-15.png b/zh-cn/application-dev/reference/arkui-ts/figures/progress.png similarity index 100% rename from zh-cn/application-dev/reference/arkui-ts/figures/progress-15.png rename to zh-cn/application-dev/reference/arkui-ts/figures/progress.png diff --git a/zh-cn/application-dev/reference/arkui-ts/figures/red-12.png b/zh-cn/application-dev/reference/arkui-ts/figures/red-12.png deleted file mode 100644 index 309d1c46f8bc396df5eaed381a5ffa2f0389d602..0000000000000000000000000000000000000000 Binary files a/zh-cn/application-dev/reference/arkui-ts/figures/red-12.png and /dev/null differ diff --git a/zh-cn/application-dev/reference/arkui-ts/figures/shape.gif b/zh-cn/application-dev/reference/arkui-ts/figures/shape.gif deleted file mode 100644 index 467de1302c615f93709c266f3d5a47ecb941fc53..0000000000000000000000000000000000000000 Binary files a/zh-cn/application-dev/reference/arkui-ts/figures/shape.gif and /dev/null differ diff --git a/zh-cn/application-dev/reference/arkui-ts/figures/sider.gif b/zh-cn/application-dev/reference/arkui-ts/figures/sider.gif deleted file mode 100644 index 733585b5ca3cbb4fdf690e596b622f56393700d0..0000000000000000000000000000000000000000 Binary files a/zh-cn/application-dev/reference/arkui-ts/figures/sider.gif and /dev/null differ diff --git a/zh-cn/application-dev/reference/arkui-ts/figures/slider.gif b/zh-cn/application-dev/reference/arkui-ts/figures/slider.gif new file mode 100644 index 0000000000000000000000000000000000000000..b1724791e4acb31d193a0dce267e42c99288c6bd Binary files /dev/null and b/zh-cn/application-dev/reference/arkui-ts/figures/slider.gif differ diff --git a/zh-cn/application-dev/reference/arkui-ts/figures/stepper.gif b/zh-cn/application-dev/reference/arkui-ts/figures/stepper.gif new file mode 100644 index 0000000000000000000000000000000000000000..6b44b6a2adc2528e13e95bc10d2a67874226a63b Binary files /dev/null and b/zh-cn/application-dev/reference/arkui-ts/figures/stepper.gif differ diff --git a/zh-cn/application-dev/reference/arkui-ts/figures/swiper.gif b/zh-cn/application-dev/reference/arkui-ts/figures/swiper.gif index bf8d1335752f51258920d0cfc1b65190e2f53011..5db399f79a02f496aea43ff72e55e29a0bb05a9a 100644 Binary files a/zh-cn/application-dev/reference/arkui-ts/figures/swiper.gif and b/zh-cn/application-dev/reference/arkui-ts/figures/swiper.gif differ diff --git a/zh-cn/application-dev/reference/arkui-ts/figures/textarea1.gif b/zh-cn/application-dev/reference/arkui-ts/figures/textarea1.gif new file mode 100644 index 0000000000000000000000000000000000000000..5c888d43eeb0d0d3ab08e0c2922f136ed0b3d142 Binary files /dev/null and b/zh-cn/application-dev/reference/arkui-ts/figures/textarea1.gif differ diff --git a/zh-cn/application-dev/reference/arkui-ts/figures/textinput1.gif b/zh-cn/application-dev/reference/arkui-ts/figures/textinput1.gif new file mode 100644 index 0000000000000000000000000000000000000000..9fa5c075ecc4f157f1e66316f4b56f28ffa2007d Binary files /dev/null and b/zh-cn/application-dev/reference/arkui-ts/figures/textinput1.gif differ diff --git a/zh-cn/application-dev/reference/arkui-ts/figures/toggle.gif b/zh-cn/application-dev/reference/arkui-ts/figures/toggle.gif new file mode 100644 index 0000000000000000000000000000000000000000..f6b7ae5ac2bf443574de54cd4df472a8f0cd1aba Binary files /dev/null and b/zh-cn/application-dev/reference/arkui-ts/figures/toggle.gif differ diff --git a/zh-cn/application-dev/reference/arkui-ts/figures/unnaming-(3).png b/zh-cn/application-dev/reference/arkui-ts/figures/unnaming-(3).png new file mode 100644 index 0000000000000000000000000000000000000000..293ead152f1cde4757f85101d9c8c96bdec4dee7 Binary files /dev/null and b/zh-cn/application-dev/reference/arkui-ts/figures/unnaming-(3).png differ diff --git a/zh-cn/application-dev/reference/arkui-ts/figures/unnaming-(4).png b/zh-cn/application-dev/reference/arkui-ts/figures/unnaming-(4).png new file mode 100644 index 0000000000000000000000000000000000000000..e2a8cf9cf4fc88e27e7adb0ad9caf2df9ca978c6 Binary files /dev/null and b/zh-cn/application-dev/reference/arkui-ts/figures/unnaming-(4).png differ diff --git a/zh-cn/application-dev/reference/arkui-ts/figures/white-13.png b/zh-cn/application-dev/reference/arkui-ts/figures/white-13.png deleted file mode 100644 index 56d32d4cd371c5374b133cb81c9c077aaf7b110d..0000000000000000000000000000000000000000 Binary files a/zh-cn/application-dev/reference/arkui-ts/figures/white-13.png and /dev/null differ diff --git a/zh-cn/application-dev/reference/arkui-ts/figures/yellow-14.png b/zh-cn/application-dev/reference/arkui-ts/figures/yellow-14.png deleted file mode 100644 index b54dbc2391d1a8f16312dd02dc3d65a35ea2626f..0000000000000000000000000000000000000000 Binary files a/zh-cn/application-dev/reference/arkui-ts/figures/yellow-14.png and /dev/null differ diff --git a/zh-cn/application-dev/reference/arkui-ts/figures/zh-cn_image_0000001192595194.png b/zh-cn/application-dev/reference/arkui-ts/figures/zh-cn_image_0000001192595194.png new file mode 100644 index 0000000000000000000000000000000000000000..348499bc3787a833ab3da5f87500b11c9c93773e Binary files /dev/null and b/zh-cn/application-dev/reference/arkui-ts/figures/zh-cn_image_0000001192595194.png differ diff --git a/zh-cn/application-dev/reference/arkui-ts/figures/zh-cn_image_0000001192595214.png b/zh-cn/application-dev/reference/arkui-ts/figures/zh-cn_image_0000001192595214.png new file mode 100644 index 0000000000000000000000000000000000000000..e544a2958b969018ff6bfe8b44bb8758c2aea61a Binary files /dev/null and b/zh-cn/application-dev/reference/arkui-ts/figures/zh-cn_image_0000001192595214.png differ diff --git a/zh-cn/application-dev/reference/arkui-ts/figures/zh-cn_image_0000001192595216.png b/zh-cn/application-dev/reference/arkui-ts/figures/zh-cn_image_0000001192595216.png new file mode 100644 index 0000000000000000000000000000000000000000..f410f22c1dd0ba7e1c9718eb3995de5f5033c0a6 Binary files /dev/null and b/zh-cn/application-dev/reference/arkui-ts/figures/zh-cn_image_0000001192595216.png differ diff --git a/zh-cn/application-dev/reference/arkui-ts/figures/zh-cn_image_0000001192595220.png b/zh-cn/application-dev/reference/arkui-ts/figures/zh-cn_image_0000001192595220.png new file mode 100644 index 0000000000000000000000000000000000000000..2eed5759714b99dc039faab67acdfe6d67bfc6ac Binary files /dev/null and b/zh-cn/application-dev/reference/arkui-ts/figures/zh-cn_image_0000001192595220.png differ diff --git a/zh-cn/application-dev/reference/arkui-ts/figures/zh-cn_image_0000001192595224.png b/zh-cn/application-dev/reference/arkui-ts/figures/zh-cn_image_0000001192595224.png new file mode 100644 index 0000000000000000000000000000000000000000..72a515c8b425037a4307ef1b16def3e528aab4a0 Binary files /dev/null and b/zh-cn/application-dev/reference/arkui-ts/figures/zh-cn_image_0000001192595224.png differ diff --git a/zh-cn/application-dev/reference/arkui-ts/figures/zh-cn_image_0000001192595226.png b/zh-cn/application-dev/reference/arkui-ts/figures/zh-cn_image_0000001192595226.png new file mode 100644 index 0000000000000000000000000000000000000000..92a309337be0e2f4c49d0484dab0ffd19584b534 Binary files /dev/null and b/zh-cn/application-dev/reference/arkui-ts/figures/zh-cn_image_0000001192595226.png differ diff --git a/zh-cn/application-dev/reference/arkui-ts/figures/zh-cn_image_0000001192595228.png b/zh-cn/application-dev/reference/arkui-ts/figures/zh-cn_image_0000001192595228.png new file mode 100644 index 0000000000000000000000000000000000000000..1f4208ebcf5ffeeda0d1f5c452327c8fd8dcf7ac Binary files /dev/null and b/zh-cn/application-dev/reference/arkui-ts/figures/zh-cn_image_0000001192595228.png differ diff --git a/zh-cn/application-dev/reference/arkui-ts/figures/zh-cn_image_0000001192595230.png b/zh-cn/application-dev/reference/arkui-ts/figures/zh-cn_image_0000001192595230.png new file mode 100644 index 0000000000000000000000000000000000000000..b4fd4aff2fb6b7a32fcb8af41a84fbf57c26d035 Binary files /dev/null and b/zh-cn/application-dev/reference/arkui-ts/figures/zh-cn_image_0000001192595230.png differ diff --git a/zh-cn/application-dev/reference/arkui-ts/figures/zh-cn_image_0000001192595232.png b/zh-cn/application-dev/reference/arkui-ts/figures/zh-cn_image_0000001192595232.png new file mode 100644 index 0000000000000000000000000000000000000000..160278c82fcdf310c796609d5ee29a2a4869af9e Binary files /dev/null and b/zh-cn/application-dev/reference/arkui-ts/figures/zh-cn_image_0000001192595232.png differ diff --git a/zh-cn/application-dev/reference/arkui-ts/figures/zh-cn_image_0000001192595234.png b/zh-cn/application-dev/reference/arkui-ts/figures/zh-cn_image_0000001192595234.png new file mode 100644 index 0000000000000000000000000000000000000000..ec9ddc678b5a74f1e5ae78ba6a9c35618f31a589 Binary files /dev/null and b/zh-cn/application-dev/reference/arkui-ts/figures/zh-cn_image_0000001192595234.png differ diff --git a/zh-cn/application-dev/reference/arkui-ts/figures/zh-cn_image_0000001192595238.png b/zh-cn/application-dev/reference/arkui-ts/figures/zh-cn_image_0000001192595238.png new file mode 100644 index 0000000000000000000000000000000000000000..d3db21e0e3da6d8663f59b2ddabd9e50d6eb1e6a Binary files /dev/null and b/zh-cn/application-dev/reference/arkui-ts/figures/zh-cn_image_0000001192595238.png differ diff --git a/zh-cn/application-dev/reference/arkui-ts/figures/zh-cn_image_0000001192755172.png b/zh-cn/application-dev/reference/arkui-ts/figures/zh-cn_image_0000001192755172.png new file mode 100644 index 0000000000000000000000000000000000000000..5869f7cdc9a81adc7f03d07ab121c6b8433637d9 Binary files /dev/null and b/zh-cn/application-dev/reference/arkui-ts/figures/zh-cn_image_0000001192755172.png differ diff --git a/zh-cn/application-dev/reference/arkui-ts/figures/zh-cn_image_0000001192755174.png b/zh-cn/application-dev/reference/arkui-ts/figures/zh-cn_image_0000001192755174.png new file mode 100644 index 0000000000000000000000000000000000000000..adb4986f7f26047e65e552c570e3f9e62a2037ac Binary files /dev/null and b/zh-cn/application-dev/reference/arkui-ts/figures/zh-cn_image_0000001192755174.png differ diff --git a/zh-cn/application-dev/reference/arkui-ts/figures/zh-cn_image_0000001192755178.png b/zh-cn/application-dev/reference/arkui-ts/figures/zh-cn_image_0000001192755178.png new file mode 100644 index 0000000000000000000000000000000000000000..801bf97495213f41c2b196b2f170af85b156dd5b Binary files /dev/null and b/zh-cn/application-dev/reference/arkui-ts/figures/zh-cn_image_0000001192755178.png differ diff --git a/zh-cn/application-dev/reference/arkui-ts/figures/zh-cn_image_0000001192755180.png b/zh-cn/application-dev/reference/arkui-ts/figures/zh-cn_image_0000001192755180.png new file mode 100644 index 0000000000000000000000000000000000000000..4fb651372a67eca9de3848baa6b66cac0ee9f173 Binary files /dev/null and b/zh-cn/application-dev/reference/arkui-ts/figures/zh-cn_image_0000001192755180.png differ diff --git a/zh-cn/application-dev/reference/arkui-ts/figures/zh-cn_image_0000001192755182.png b/zh-cn/application-dev/reference/arkui-ts/figures/zh-cn_image_0000001192755182.png new file mode 100644 index 0000000000000000000000000000000000000000..0d9cf4d6e06b96da9b93608e7a050af71eaa5032 Binary files /dev/null and b/zh-cn/application-dev/reference/arkui-ts/figures/zh-cn_image_0000001192755182.png differ diff --git a/zh-cn/application-dev/reference/arkui-ts/figures/zh-cn_image_0000001192755188.png b/zh-cn/application-dev/reference/arkui-ts/figures/zh-cn_image_0000001192755188.png new file mode 100644 index 0000000000000000000000000000000000000000..cb250dfc130cc329ae9dc74ddb861e8753d419c3 Binary files /dev/null and b/zh-cn/application-dev/reference/arkui-ts/figures/zh-cn_image_0000001192755188.png differ diff --git a/zh-cn/application-dev/reference/arkui-ts/figures/zh-cn_image_0000001192755194.png b/zh-cn/application-dev/reference/arkui-ts/figures/zh-cn_image_0000001192755194.png new file mode 100644 index 0000000000000000000000000000000000000000..4608132f8e4292a3fe0174a65a9a3f2fc428c0e7 Binary files /dev/null and b/zh-cn/application-dev/reference/arkui-ts/figures/zh-cn_image_0000001192755194.png differ diff --git a/zh-cn/application-dev/reference/arkui-ts/figures/zh-cn_image_0000001192915130.png b/zh-cn/application-dev/reference/arkui-ts/figures/zh-cn_image_0000001192915130.png new file mode 100644 index 0000000000000000000000000000000000000000..1ba89fa119f9a64c74b9353c20ec3d741aaad9be Binary files /dev/null and b/zh-cn/application-dev/reference/arkui-ts/figures/zh-cn_image_0000001192915130.png differ diff --git a/zh-cn/application-dev/reference/arkui-ts/figures/zh-cn_image_0000001192915154.png b/zh-cn/application-dev/reference/arkui-ts/figures/zh-cn_image_0000001192915154.png new file mode 100644 index 0000000000000000000000000000000000000000..f36078d6d832fa757378b72fa0739f66fe781c64 Binary files /dev/null and b/zh-cn/application-dev/reference/arkui-ts/figures/zh-cn_image_0000001192915154.png differ diff --git a/zh-cn/application-dev/reference/arkui-ts/figures/zh-cn_image_0000001192915158.png b/zh-cn/application-dev/reference/arkui-ts/figures/zh-cn_image_0000001192915158.png new file mode 100644 index 0000000000000000000000000000000000000000..d8bdc2d4a59d0b3c5de0f8c020d30ffc5b2ead7a Binary files /dev/null and b/zh-cn/application-dev/reference/arkui-ts/figures/zh-cn_image_0000001192915158.png differ diff --git a/zh-cn/application-dev/reference/arkui-ts/figures/zh-cn_image_0000001192915162.png b/zh-cn/application-dev/reference/arkui-ts/figures/zh-cn_image_0000001192915162.png new file mode 100644 index 0000000000000000000000000000000000000000..1ba89fa119f9a64c74b9353c20ec3d741aaad9be Binary files /dev/null and b/zh-cn/application-dev/reference/arkui-ts/figures/zh-cn_image_0000001192915162.png differ diff --git a/zh-cn/application-dev/reference/arkui-ts/figures/zh-cn_image_0000001192915178.gif b/zh-cn/application-dev/reference/arkui-ts/figures/zh-cn_image_0000001192915178.gif new file mode 100644 index 0000000000000000000000000000000000000000..b1808e80a0e4d055d54b886ecca3ddc8efa64b9a Binary files /dev/null and b/zh-cn/application-dev/reference/arkui-ts/figures/zh-cn_image_0000001192915178.gif differ diff --git a/zh-cn/application-dev/reference/arkui-ts/figures/zh-cn_image_0000001192915180.png b/zh-cn/application-dev/reference/arkui-ts/figures/zh-cn_image_0000001192915180.png new file mode 100644 index 0000000000000000000000000000000000000000..7dafd299b8e48ead7d6f783e5a370e31257e341c Binary files /dev/null and b/zh-cn/application-dev/reference/arkui-ts/figures/zh-cn_image_0000001192915180.png differ diff --git a/zh-cn/application-dev/reference/arkui-ts/figures/zh-cn_image_0000001192915184.png b/zh-cn/application-dev/reference/arkui-ts/figures/zh-cn_image_0000001192915184.png new file mode 100644 index 0000000000000000000000000000000000000000..ee1d5493dd38de810cbfe5e41e54d507b839e9c9 Binary files /dev/null and b/zh-cn/application-dev/reference/arkui-ts/figures/zh-cn_image_0000001192915184.png differ diff --git a/zh-cn/application-dev/reference/arkui-ts/figures/zh-cn_image_0000001193075122.gif b/zh-cn/application-dev/reference/arkui-ts/figures/zh-cn_image_0000001193075122.gif new file mode 100644 index 0000000000000000000000000000000000000000..b26dc8bf409987fa624f6dc0cec1c56043e7b37a Binary files /dev/null and b/zh-cn/application-dev/reference/arkui-ts/figures/zh-cn_image_0000001193075122.gif differ diff --git a/zh-cn/application-dev/reference/arkui-ts/figures/zh-cn_image_0000001193075134.png b/zh-cn/application-dev/reference/arkui-ts/figures/zh-cn_image_0000001193075134.png new file mode 100644 index 0000000000000000000000000000000000000000..241fe8546ea2acfdb7baf2c5e66a8af2f0d7b593 Binary files /dev/null and b/zh-cn/application-dev/reference/arkui-ts/figures/zh-cn_image_0000001193075134.png differ diff --git a/zh-cn/application-dev/reference/arkui-ts/figures/zh-cn_image_0000001193075154.png b/zh-cn/application-dev/reference/arkui-ts/figures/zh-cn_image_0000001193075154.png new file mode 100644 index 0000000000000000000000000000000000000000..8c06945a1790bb0a741b330fe0a9170dd2a3a92d Binary files /dev/null and b/zh-cn/application-dev/reference/arkui-ts/figures/zh-cn_image_0000001193075154.png differ diff --git a/zh-cn/application-dev/reference/arkui-ts/figures/zh-cn_image_0000001193075164.png b/zh-cn/application-dev/reference/arkui-ts/figures/zh-cn_image_0000001193075164.png new file mode 100644 index 0000000000000000000000000000000000000000..45be809bdb14e8badfaac2dc8e2486864d29f763 Binary files /dev/null and b/zh-cn/application-dev/reference/arkui-ts/figures/zh-cn_image_0000001193075164.png differ diff --git a/zh-cn/application-dev/reference/arkui-ts/figures/zh-cn_image_0000001193075166.png b/zh-cn/application-dev/reference/arkui-ts/figures/zh-cn_image_0000001193075166.png new file mode 100644 index 0000000000000000000000000000000000000000..fb7fc25c17990998ba263a8525e6a110794c0d87 Binary files /dev/null and b/zh-cn/application-dev/reference/arkui-ts/figures/zh-cn_image_0000001193075166.png differ diff --git a/zh-cn/application-dev/reference/arkui-ts/figures/zh-cn_image_0000001193075168.png b/zh-cn/application-dev/reference/arkui-ts/figures/zh-cn_image_0000001193075168.png new file mode 100644 index 0000000000000000000000000000000000000000..5eecca641660f12e3ad2ba7b97b97eca253a4acf Binary files /dev/null and b/zh-cn/application-dev/reference/arkui-ts/figures/zh-cn_image_0000001193075168.png differ diff --git a/zh-cn/application-dev/reference/arkui-ts/figures/zh-cn_image_0000001193075170.png b/zh-cn/application-dev/reference/arkui-ts/figures/zh-cn_image_0000001193075170.png new file mode 100644 index 0000000000000000000000000000000000000000..241fe8546ea2acfdb7baf2c5e66a8af2f0d7b593 Binary files /dev/null and b/zh-cn/application-dev/reference/arkui-ts/figures/zh-cn_image_0000001193075170.png differ diff --git a/zh-cn/application-dev/reference/arkui-ts/figures/zh-cn_image_0000001193075172.png b/zh-cn/application-dev/reference/arkui-ts/figures/zh-cn_image_0000001193075172.png new file mode 100644 index 0000000000000000000000000000000000000000..5d649492978121a484c2a7a55d4548384c919149 Binary files /dev/null and b/zh-cn/application-dev/reference/arkui-ts/figures/zh-cn_image_0000001193075172.png differ diff --git a/zh-cn/application-dev/reference/arkui-ts/figures/zh-cn_image_0000001193075178.png b/zh-cn/application-dev/reference/arkui-ts/figures/zh-cn_image_0000001193075178.png new file mode 100644 index 0000000000000000000000000000000000000000..4f115a17e671fa21da2d44cd82bf7b0f3c70c0a6 Binary files /dev/null and b/zh-cn/application-dev/reference/arkui-ts/figures/zh-cn_image_0000001193075178.png differ diff --git a/zh-cn/application-dev/reference/arkui-ts/figures/zh-cn_image_0000001193075180.png b/zh-cn/application-dev/reference/arkui-ts/figures/zh-cn_image_0000001193075180.png new file mode 100644 index 0000000000000000000000000000000000000000..7cbe07731306eff949ff7ced4dd7eb4a374c8310 Binary files /dev/null and b/zh-cn/application-dev/reference/arkui-ts/figures/zh-cn_image_0000001193075180.png differ diff --git a/zh-cn/application-dev/reference/arkui-ts/figures/zh-cn_image_0000001193321136.png b/zh-cn/application-dev/reference/arkui-ts/figures/zh-cn_image_0000001193321136.png new file mode 100644 index 0000000000000000000000000000000000000000..72a515c8b425037a4307ef1b16def3e528aab4a0 Binary files /dev/null and b/zh-cn/application-dev/reference/arkui-ts/figures/zh-cn_image_0000001193321136.png differ diff --git a/zh-cn/application-dev/reference/arkui-ts/figures/zh-cn_image_0000001193321138.png b/zh-cn/application-dev/reference/arkui-ts/figures/zh-cn_image_0000001193321138.png new file mode 100644 index 0000000000000000000000000000000000000000..fb7fc25c17990998ba263a8525e6a110794c0d87 Binary files /dev/null and b/zh-cn/application-dev/reference/arkui-ts/figures/zh-cn_image_0000001193321138.png differ diff --git a/zh-cn/application-dev/reference/arkui-ts/figures/zh-cn_image_0000001193322850.png b/zh-cn/application-dev/reference/arkui-ts/figures/zh-cn_image_0000001193322850.png new file mode 100644 index 0000000000000000000000000000000000000000..657eee10e270eb448fc7f7f4b24b18134a42d5dc Binary files /dev/null and b/zh-cn/application-dev/reference/arkui-ts/figures/zh-cn_image_0000001193322850.png differ diff --git a/zh-cn/application-dev/reference/arkui-ts/figures/zh-cn_image_0000001193322872.png b/zh-cn/application-dev/reference/arkui-ts/figures/zh-cn_image_0000001193322872.png new file mode 100644 index 0000000000000000000000000000000000000000..7cbe07731306eff949ff7ced4dd7eb4a374c8310 Binary files /dev/null and b/zh-cn/application-dev/reference/arkui-ts/figures/zh-cn_image_0000001193322872.png differ diff --git a/zh-cn/application-dev/reference/arkui-ts/figures/zh-cn_image_0000001193322910.png b/zh-cn/application-dev/reference/arkui-ts/figures/zh-cn_image_0000001193322910.png new file mode 100644 index 0000000000000000000000000000000000000000..e764c43599592d821c403aac0d3fa40d9edd22e5 Binary files /dev/null and b/zh-cn/application-dev/reference/arkui-ts/figures/zh-cn_image_0000001193322910.png differ diff --git a/zh-cn/application-dev/reference/arkui-ts/figures/zh-cn_image_0000001193436448.png b/zh-cn/application-dev/reference/arkui-ts/figures/zh-cn_image_0000001193436448.png new file mode 100644 index 0000000000000000000000000000000000000000..2eed5759714b99dc039faab67acdfe6d67bfc6ac Binary files /dev/null and b/zh-cn/application-dev/reference/arkui-ts/figures/zh-cn_image_0000001193436448.png differ diff --git a/zh-cn/application-dev/reference/arkui-ts/figures/zh-cn_image_0000001193481094.png b/zh-cn/application-dev/reference/arkui-ts/figures/zh-cn_image_0000001193481094.png new file mode 100644 index 0000000000000000000000000000000000000000..1f4208ebcf5ffeeda0d1f5c452327c8fd8dcf7ac Binary files /dev/null and b/zh-cn/application-dev/reference/arkui-ts/figures/zh-cn_image_0000001193481094.png differ diff --git a/zh-cn/application-dev/reference/arkui-ts/figures/zh-cn_image_0000001193481096.png b/zh-cn/application-dev/reference/arkui-ts/figures/zh-cn_image_0000001193481096.png new file mode 100644 index 0000000000000000000000000000000000000000..138e011909c2d4738f3cd9671a79ea0c37cb5b87 Binary files /dev/null and b/zh-cn/application-dev/reference/arkui-ts/figures/zh-cn_image_0000001193481096.png differ diff --git a/zh-cn/application-dev/reference/arkui-ts/figures/zh-cn_image_0000001193481098.png b/zh-cn/application-dev/reference/arkui-ts/figures/zh-cn_image_0000001193481098.png new file mode 100644 index 0000000000000000000000000000000000000000..defc3c9eb037c06b894ee2e30563facb8c8375ab Binary files /dev/null and b/zh-cn/application-dev/reference/arkui-ts/figures/zh-cn_image_0000001193481098.png differ diff --git a/zh-cn/application-dev/reference/arkui-ts/figures/zh-cn_image_0000001193482814.png b/zh-cn/application-dev/reference/arkui-ts/figures/zh-cn_image_0000001193482814.png new file mode 100644 index 0000000000000000000000000000000000000000..45be809bdb14e8badfaac2dc8e2486864d29f763 Binary files /dev/null and b/zh-cn/application-dev/reference/arkui-ts/figures/zh-cn_image_0000001193482814.png differ diff --git a/zh-cn/application-dev/reference/arkui-ts/figures/zh-cn_image_0000001193482866.png b/zh-cn/application-dev/reference/arkui-ts/figures/zh-cn_image_0000001193482866.png new file mode 100644 index 0000000000000000000000000000000000000000..5eecca641660f12e3ad2ba7b97b97eca253a4acf Binary files /dev/null and b/zh-cn/application-dev/reference/arkui-ts/figures/zh-cn_image_0000001193482866.png differ diff --git a/zh-cn/application-dev/reference/arkui-ts/figures/zh-cn_image_0000001193641084.png b/zh-cn/application-dev/reference/arkui-ts/figures/zh-cn_image_0000001193641084.png new file mode 100644 index 0000000000000000000000000000000000000000..563ce2878d24a7fa46044f201433d759c3fa9001 Binary files /dev/null and b/zh-cn/application-dev/reference/arkui-ts/figures/zh-cn_image_0000001193641084.png differ diff --git a/zh-cn/application-dev/reference/arkui-ts/figures/zh-cn_image_0000001193641086.png b/zh-cn/application-dev/reference/arkui-ts/figures/zh-cn_image_0000001193641086.png new file mode 100644 index 0000000000000000000000000000000000000000..801bf97495213f41c2b196b2f170af85b156dd5b Binary files /dev/null and b/zh-cn/application-dev/reference/arkui-ts/figures/zh-cn_image_0000001193641086.png differ diff --git a/zh-cn/application-dev/reference/arkui-ts/figures/zh-cn_image_0000001193642802.png b/zh-cn/application-dev/reference/arkui-ts/figures/zh-cn_image_0000001193642802.png new file mode 100644 index 0000000000000000000000000000000000000000..160278c82fcdf310c796609d5ee29a2a4869af9e Binary files /dev/null and b/zh-cn/application-dev/reference/arkui-ts/figures/zh-cn_image_0000001193642802.png differ diff --git a/zh-cn/application-dev/reference/arkui-ts/figures/zh-cn_image_0000001193642848.png b/zh-cn/application-dev/reference/arkui-ts/figures/zh-cn_image_0000001193642848.png new file mode 100644 index 0000000000000000000000000000000000000000..83b7a51accdda21d21a39e5e9d917d75811cb496 Binary files /dev/null and b/zh-cn/application-dev/reference/arkui-ts/figures/zh-cn_image_0000001193642848.png differ diff --git a/zh-cn/application-dev/reference/arkui-ts/figures/zh-cn_image_0000001193737314.png b/zh-cn/application-dev/reference/arkui-ts/figures/zh-cn_image_0000001193737314.png new file mode 100644 index 0000000000000000000000000000000000000000..e3b4b42aecaef72ed4a08b3566a895b3f9b12343 Binary files /dev/null and b/zh-cn/application-dev/reference/arkui-ts/figures/zh-cn_image_0000001193737314.png differ diff --git a/zh-cn/application-dev/reference/arkui-ts/figures/zh-cn_image_0000001193756416.png b/zh-cn/application-dev/reference/arkui-ts/figures/zh-cn_image_0000001193756416.png new file mode 100644 index 0000000000000000000000000000000000000000..b0b8bdc7fc7cd417340bbcda6845fd7de0098930 Binary files /dev/null and b/zh-cn/application-dev/reference/arkui-ts/figures/zh-cn_image_0000001193756416.png differ diff --git a/zh-cn/application-dev/reference/arkui-ts/figures/zh-cn_image_0000001193801070.png b/zh-cn/application-dev/reference/arkui-ts/figures/zh-cn_image_0000001193801070.png new file mode 100644 index 0000000000000000000000000000000000000000..92a309337be0e2f4c49d0484dab0ffd19584b534 Binary files /dev/null and b/zh-cn/application-dev/reference/arkui-ts/figures/zh-cn_image_0000001193801070.png differ diff --git a/zh-cn/application-dev/reference/arkui-ts/figures/zh-cn_image_0000001193801072.png b/zh-cn/application-dev/reference/arkui-ts/figures/zh-cn_image_0000001193801072.png new file mode 100644 index 0000000000000000000000000000000000000000..b4fd4aff2fb6b7a32fcb8af41a84fbf57c26d035 Binary files /dev/null and b/zh-cn/application-dev/reference/arkui-ts/figures/zh-cn_image_0000001193801072.png differ diff --git a/zh-cn/application-dev/reference/arkui-ts/figures/zh-cn_image_0000001193802788.png b/zh-cn/application-dev/reference/arkui-ts/figures/zh-cn_image_0000001193802788.png new file mode 100644 index 0000000000000000000000000000000000000000..c1803b711d45a86552a2be4099424206a1561534 Binary files /dev/null and b/zh-cn/application-dev/reference/arkui-ts/figures/zh-cn_image_0000001193802788.png differ diff --git a/zh-cn/application-dev/reference/arkui-ts/figures/zh-cn_image_0000001193802836.png b/zh-cn/application-dev/reference/arkui-ts/figures/zh-cn_image_0000001193802836.png new file mode 100644 index 0000000000000000000000000000000000000000..ad8582f58ed05f9ac3b8962f82d8565d1f580f6c Binary files /dev/null and b/zh-cn/application-dev/reference/arkui-ts/figures/zh-cn_image_0000001193802836.png differ diff --git a/zh-cn/application-dev/reference/arkui-ts/figures/zh-cn_image_0000001237355087.gif b/zh-cn/application-dev/reference/arkui-ts/figures/zh-cn_image_0000001237355087.gif new file mode 100644 index 0000000000000000000000000000000000000000..38502c83c52aa9229da69d638e4b9b1f5a35009b Binary files /dev/null and b/zh-cn/application-dev/reference/arkui-ts/figures/zh-cn_image_0000001237355087.gif differ diff --git a/zh-cn/application-dev/reference/arkui-ts/figures/zh-cn_image_0000001237355121.png b/zh-cn/application-dev/reference/arkui-ts/figures/zh-cn_image_0000001237355121.png new file mode 100644 index 0000000000000000000000000000000000000000..e764c43599592d821c403aac0d3fa40d9edd22e5 Binary files /dev/null and b/zh-cn/application-dev/reference/arkui-ts/figures/zh-cn_image_0000001237355121.png differ diff --git a/zh-cn/application-dev/reference/arkui-ts/figures/zh-cn_image_0000001237355131.png b/zh-cn/application-dev/reference/arkui-ts/figures/zh-cn_image_0000001237355131.png new file mode 100644 index 0000000000000000000000000000000000000000..138e011909c2d4738f3cd9671a79ea0c37cb5b87 Binary files /dev/null and b/zh-cn/application-dev/reference/arkui-ts/figures/zh-cn_image_0000001237355131.png differ diff --git a/zh-cn/application-dev/reference/arkui-ts/figures/zh-cn_image_0000001237355133.png b/zh-cn/application-dev/reference/arkui-ts/figures/zh-cn_image_0000001237355133.png new file mode 100644 index 0000000000000000000000000000000000000000..088d5a479cc188332bb7295b31aea277897faca8 Binary files /dev/null and b/zh-cn/application-dev/reference/arkui-ts/figures/zh-cn_image_0000001237355133.png differ diff --git a/zh-cn/application-dev/reference/arkui-ts/figures/zh-cn_image_0000001237355135.png b/zh-cn/application-dev/reference/arkui-ts/figures/zh-cn_image_0000001237355135.png new file mode 100644 index 0000000000000000000000000000000000000000..10059591af349daced4bf7abeb009209a3e90f1d Binary files /dev/null and b/zh-cn/application-dev/reference/arkui-ts/figures/zh-cn_image_0000001237355135.png differ diff --git a/zh-cn/application-dev/reference/arkui-ts/figures/zh-cn_image_0000001237355137.png b/zh-cn/application-dev/reference/arkui-ts/figures/zh-cn_image_0000001237355137.png new file mode 100644 index 0000000000000000000000000000000000000000..83b7a51accdda21d21a39e5e9d917d75811cb496 Binary files /dev/null and b/zh-cn/application-dev/reference/arkui-ts/figures/zh-cn_image_0000001237355137.png differ diff --git a/zh-cn/application-dev/reference/arkui-ts/figures/zh-cn_image_0000001237475107.gif b/zh-cn/application-dev/reference/arkui-ts/figures/zh-cn_image_0000001237475107.gif new file mode 100644 index 0000000000000000000000000000000000000000..b3966d0abb39044241ee174a126fcf919f402d98 Binary files /dev/null and b/zh-cn/application-dev/reference/arkui-ts/figures/zh-cn_image_0000001237475107.gif differ diff --git a/zh-cn/application-dev/reference/arkui-ts/figures/zh-cn_image_0000001237475113.png b/zh-cn/application-dev/reference/arkui-ts/figures/zh-cn_image_0000001237475113.png new file mode 100644 index 0000000000000000000000000000000000000000..84d835e7feeac31e42c1a53670ef6c999ea4bfe2 Binary files /dev/null and b/zh-cn/application-dev/reference/arkui-ts/figures/zh-cn_image_0000001237475113.png differ diff --git a/zh-cn/application-dev/reference/arkui-ts/figures/zh-cn_image_0000001237475123.png b/zh-cn/application-dev/reference/arkui-ts/figures/zh-cn_image_0000001237475123.png new file mode 100644 index 0000000000000000000000000000000000000000..e3b4b42aecaef72ed4a08b3566a895b3f9b12343 Binary files /dev/null and b/zh-cn/application-dev/reference/arkui-ts/figures/zh-cn_image_0000001237475123.png differ diff --git a/zh-cn/application-dev/reference/arkui-ts/figures/zh-cn_image_0000001237475133.png b/zh-cn/application-dev/reference/arkui-ts/figures/zh-cn_image_0000001237475133.png new file mode 100644 index 0000000000000000000000000000000000000000..f0e245a5c576e92810baacaa09af99f108a010a9 Binary files /dev/null and b/zh-cn/application-dev/reference/arkui-ts/figures/zh-cn_image_0000001237475133.png differ diff --git a/zh-cn/application-dev/reference/arkui-ts/figures/zh-cn_image_0000001237475137.png b/zh-cn/application-dev/reference/arkui-ts/figures/zh-cn_image_0000001237475137.png new file mode 100644 index 0000000000000000000000000000000000000000..defc3c9eb037c06b894ee2e30563facb8c8375ab Binary files /dev/null and b/zh-cn/application-dev/reference/arkui-ts/figures/zh-cn_image_0000001237475137.png differ diff --git a/zh-cn/application-dev/reference/arkui-ts/figures/zh-cn_image_0000001237475139.png b/zh-cn/application-dev/reference/arkui-ts/figures/zh-cn_image_0000001237475139.png new file mode 100644 index 0000000000000000000000000000000000000000..9cb1361bd9aded6d58d51ae771558989977a0608 Binary files /dev/null and b/zh-cn/application-dev/reference/arkui-ts/figures/zh-cn_image_0000001237475139.png differ diff --git a/zh-cn/application-dev/reference/arkui-ts/figures/zh-cn_image_0000001237555149.png b/zh-cn/application-dev/reference/arkui-ts/figures/zh-cn_image_0000001237555149.png new file mode 100644 index 0000000000000000000000000000000000000000..1ba89fa119f9a64c74b9353c20ec3d741aaad9be Binary files /dev/null and b/zh-cn/application-dev/reference/arkui-ts/figures/zh-cn_image_0000001237555149.png differ diff --git a/zh-cn/application-dev/reference/arkui-ts/figures/zh-cn_image_0000001237555151.png b/zh-cn/application-dev/reference/arkui-ts/figures/zh-cn_image_0000001237555151.png new file mode 100644 index 0000000000000000000000000000000000000000..1330e2e2a6395703f9c3747252c1e0a69ae6f4f0 Binary files /dev/null and b/zh-cn/application-dev/reference/arkui-ts/figures/zh-cn_image_0000001237555151.png differ diff --git a/zh-cn/application-dev/reference/arkui-ts/figures/zh-cn_image_0000001237555155.png b/zh-cn/application-dev/reference/arkui-ts/figures/zh-cn_image_0000001237555155.png new file mode 100644 index 0000000000000000000000000000000000000000..071919ed3a638630f33a337f920ae2e60c9c21bc Binary files /dev/null and b/zh-cn/application-dev/reference/arkui-ts/figures/zh-cn_image_0000001237555155.png differ diff --git a/zh-cn/application-dev/reference/arkui-ts/figures/zh-cn_image_0000001237555163.png b/zh-cn/application-dev/reference/arkui-ts/figures/zh-cn_image_0000001237555163.png new file mode 100644 index 0000000000000000000000000000000000000000..26fb5384338291f3eb372abd526f0727ce759bdc Binary files /dev/null and b/zh-cn/application-dev/reference/arkui-ts/figures/zh-cn_image_0000001237555163.png differ diff --git a/zh-cn/application-dev/reference/arkui-ts/figures/zh-cn_image_0000001237555165.png b/zh-cn/application-dev/reference/arkui-ts/figures/zh-cn_image_0000001237555165.png new file mode 100644 index 0000000000000000000000000000000000000000..50726d3e461d7a5dbfec674899fee603aaf41bee Binary files /dev/null and b/zh-cn/application-dev/reference/arkui-ts/figures/zh-cn_image_0000001237555165.png differ diff --git a/zh-cn/application-dev/reference/arkui-ts/figures/zh-cn_image_0000001237555167.png b/zh-cn/application-dev/reference/arkui-ts/figures/zh-cn_image_0000001237555167.png new file mode 100644 index 0000000000000000000000000000000000000000..af02181de0d07d5311b09c8d05c2a018e6e5b4cf Binary files /dev/null and b/zh-cn/application-dev/reference/arkui-ts/figures/zh-cn_image_0000001237555167.png differ diff --git a/zh-cn/application-dev/reference/arkui-ts/figures/zh-cn_image_0000001237555173.png b/zh-cn/application-dev/reference/arkui-ts/figures/zh-cn_image_0000001237555173.png new file mode 100644 index 0000000000000000000000000000000000000000..657eee10e270eb448fc7f7f4b24b18134a42d5dc Binary files /dev/null and b/zh-cn/application-dev/reference/arkui-ts/figures/zh-cn_image_0000001237555173.png differ diff --git a/zh-cn/application-dev/reference/arkui-ts/figures/zh-cn_image_0000001237555179.png b/zh-cn/application-dev/reference/arkui-ts/figures/zh-cn_image_0000001237555179.png new file mode 100644 index 0000000000000000000000000000000000000000..cb250dfc130cc329ae9dc74ddb861e8753d419c3 Binary files /dev/null and b/zh-cn/application-dev/reference/arkui-ts/figures/zh-cn_image_0000001237555179.png differ diff --git a/zh-cn/application-dev/reference/arkui-ts/figures/zh-cn_image_0000001237555181.png b/zh-cn/application-dev/reference/arkui-ts/figures/zh-cn_image_0000001237555181.png new file mode 100644 index 0000000000000000000000000000000000000000..b2728fd1b4e050edddf499398b44a7e3aa634109 Binary files /dev/null and b/zh-cn/application-dev/reference/arkui-ts/figures/zh-cn_image_0000001237555181.png differ diff --git a/zh-cn/application-dev/reference/arkui-ts/figures/zh-cn_image_0000001237715141.png b/zh-cn/application-dev/reference/arkui-ts/figures/zh-cn_image_0000001237715141.png new file mode 100644 index 0000000000000000000000000000000000000000..c1803b711d45a86552a2be4099424206a1561534 Binary files /dev/null and b/zh-cn/application-dev/reference/arkui-ts/figures/zh-cn_image_0000001237715141.png differ diff --git a/zh-cn/application-dev/reference/arkui-ts/figures/zh-cn_image_0000001237715149.png b/zh-cn/application-dev/reference/arkui-ts/figures/zh-cn_image_0000001237715149.png new file mode 100644 index 0000000000000000000000000000000000000000..b0b8bdc7fc7cd417340bbcda6845fd7de0098930 Binary files /dev/null and b/zh-cn/application-dev/reference/arkui-ts/figures/zh-cn_image_0000001237715149.png differ diff --git a/zh-cn/application-dev/reference/arkui-ts/figures/zh-cn_image_0000001237715151.png b/zh-cn/application-dev/reference/arkui-ts/figures/zh-cn_image_0000001237715151.png new file mode 100644 index 0000000000000000000000000000000000000000..1f4208ebcf5ffeeda0d1f5c452327c8fd8dcf7ac Binary files /dev/null and b/zh-cn/application-dev/reference/arkui-ts/figures/zh-cn_image_0000001237715151.png differ diff --git a/zh-cn/application-dev/reference/arkui-ts/figures/zh-cn_image_0000001237715153.png b/zh-cn/application-dev/reference/arkui-ts/figures/zh-cn_image_0000001237715153.png new file mode 100644 index 0000000000000000000000000000000000000000..22e84d1b8951b163748a079b6d1d302148d3b6bb Binary files /dev/null and b/zh-cn/application-dev/reference/arkui-ts/figures/zh-cn_image_0000001237715153.png differ diff --git a/zh-cn/application-dev/reference/arkui-ts/figures/zh-cn_image_0000001237715155.png b/zh-cn/application-dev/reference/arkui-ts/figures/zh-cn_image_0000001237715155.png new file mode 100644 index 0000000000000000000000000000000000000000..945862898489d8e008e94abbcd691aa307b18d06 Binary files /dev/null and b/zh-cn/application-dev/reference/arkui-ts/figures/zh-cn_image_0000001237715155.png differ diff --git a/zh-cn/application-dev/reference/arkui-ts/figures/zh-cn_image_0000001237715159.png b/zh-cn/application-dev/reference/arkui-ts/figures/zh-cn_image_0000001237715159.png new file mode 100644 index 0000000000000000000000000000000000000000..3e7218eb57566d86457a9fbd4a8ed0f0dd490c3f Binary files /dev/null and b/zh-cn/application-dev/reference/arkui-ts/figures/zh-cn_image_0000001237715159.png differ diff --git a/zh-cn/application-dev/reference/arkui-ts/figures/zh-cn_image_0000001237715165.png b/zh-cn/application-dev/reference/arkui-ts/figures/zh-cn_image_0000001237715165.png new file mode 100644 index 0000000000000000000000000000000000000000..f5cd637e5bf9db13e3334ca00413e3a91412c813 Binary files /dev/null and b/zh-cn/application-dev/reference/arkui-ts/figures/zh-cn_image_0000001237715165.png differ diff --git a/zh-cn/application-dev/reference/arkui-ts/figures/zh-cn_image_0000001238281067.png b/zh-cn/application-dev/reference/arkui-ts/figures/zh-cn_image_0000001238281067.png new file mode 100644 index 0000000000000000000000000000000000000000..22e84d1b8951b163748a079b6d1d302148d3b6bb Binary files /dev/null and b/zh-cn/application-dev/reference/arkui-ts/figures/zh-cn_image_0000001238281067.png differ diff --git a/zh-cn/application-dev/reference/arkui-ts/figures/zh-cn_image_0000001238281069.png b/zh-cn/application-dev/reference/arkui-ts/figures/zh-cn_image_0000001238281069.png new file mode 100644 index 0000000000000000000000000000000000000000..088d5a479cc188332bb7295b31aea277897faca8 Binary files /dev/null and b/zh-cn/application-dev/reference/arkui-ts/figures/zh-cn_image_0000001238281069.png differ diff --git a/zh-cn/application-dev/reference/arkui-ts/figures/zh-cn_image_0000001238282783.png b/zh-cn/application-dev/reference/arkui-ts/figures/zh-cn_image_0000001238282783.png new file mode 100644 index 0000000000000000000000000000000000000000..10059591af349daced4bf7abeb009209a3e90f1d Binary files /dev/null and b/zh-cn/application-dev/reference/arkui-ts/figures/zh-cn_image_0000001238282783.png differ diff --git a/zh-cn/application-dev/reference/arkui-ts/figures/zh-cn_image_0000001238282827.png b/zh-cn/application-dev/reference/arkui-ts/figures/zh-cn_image_0000001238282827.png new file mode 100644 index 0000000000000000000000000000000000000000..b2728fd1b4e050edddf499398b44a7e3aa634109 Binary files /dev/null and b/zh-cn/application-dev/reference/arkui-ts/figures/zh-cn_image_0000001238282827.png differ diff --git a/zh-cn/application-dev/reference/arkui-ts/figures/zh-cn_image_0000001238401029.png b/zh-cn/application-dev/reference/arkui-ts/figures/zh-cn_image_0000001238401029.png new file mode 100644 index 0000000000000000000000000000000000000000..d0e446b213816e4db8d67a9898da1afa7b8226ad Binary files /dev/null and b/zh-cn/application-dev/reference/arkui-ts/figures/zh-cn_image_0000001238401029.png differ diff --git a/zh-cn/application-dev/reference/arkui-ts/figures/zh-cn_image_0000001238401031.png b/zh-cn/application-dev/reference/arkui-ts/figures/zh-cn_image_0000001238401031.png new file mode 100644 index 0000000000000000000000000000000000000000..d3db21e0e3da6d8663f59b2ddabd9e50d6eb1e6a Binary files /dev/null and b/zh-cn/application-dev/reference/arkui-ts/figures/zh-cn_image_0000001238401031.png differ diff --git a/zh-cn/application-dev/reference/arkui-ts/figures/zh-cn_image_0000001238402745.png b/zh-cn/application-dev/reference/arkui-ts/figures/zh-cn_image_0000001238402745.png new file mode 100644 index 0000000000000000000000000000000000000000..4608132f8e4292a3fe0174a65a9a3f2fc428c0e7 Binary files /dev/null and b/zh-cn/application-dev/reference/arkui-ts/figures/zh-cn_image_0000001238402745.png differ diff --git a/zh-cn/application-dev/reference/arkui-ts/figures/zh-cn_image_0000001238402777.png b/zh-cn/application-dev/reference/arkui-ts/figures/zh-cn_image_0000001238402777.png new file mode 100644 index 0000000000000000000000000000000000000000..f5cd637e5bf9db13e3334ca00413e3a91412c813 Binary files /dev/null and b/zh-cn/application-dev/reference/arkui-ts/figures/zh-cn_image_0000001238402777.png differ diff --git a/zh-cn/application-dev/reference/arkui-ts/figures/zh-cn_image_0000001238457271.png b/zh-cn/application-dev/reference/arkui-ts/figures/zh-cn_image_0000001238457271.png new file mode 100644 index 0000000000000000000000000000000000000000..4fb651372a67eca9de3848baa6b66cac0ee9f173 Binary files /dev/null and b/zh-cn/application-dev/reference/arkui-ts/figures/zh-cn_image_0000001238457271.png differ diff --git a/zh-cn/application-dev/reference/arkui-ts/figures/zh-cn_image_0000001238476361.png b/zh-cn/application-dev/reference/arkui-ts/figures/zh-cn_image_0000001238476361.png new file mode 100644 index 0000000000000000000000000000000000000000..5d649492978121a484c2a7a55d4548384c919149 Binary files /dev/null and b/zh-cn/application-dev/reference/arkui-ts/figures/zh-cn_image_0000001238476361.png differ diff --git a/zh-cn/application-dev/reference/arkui-ts/figures/zh-cn_image_0000001238521019.png b/zh-cn/application-dev/reference/arkui-ts/figures/zh-cn_image_0000001238521019.png new file mode 100644 index 0000000000000000000000000000000000000000..af02181de0d07d5311b09c8d05c2a018e6e5b4cf Binary files /dev/null and b/zh-cn/application-dev/reference/arkui-ts/figures/zh-cn_image_0000001238521019.png differ diff --git a/zh-cn/application-dev/reference/arkui-ts/figures/zh-cn_image_0000001238521021.png b/zh-cn/application-dev/reference/arkui-ts/figures/zh-cn_image_0000001238521021.png new file mode 100644 index 0000000000000000000000000000000000000000..3e7218eb57566d86457a9fbd4a8ed0f0dd490c3f Binary files /dev/null and b/zh-cn/application-dev/reference/arkui-ts/figures/zh-cn_image_0000001238521021.png differ diff --git a/zh-cn/application-dev/reference/arkui-ts/figures/zh-cn_image_0000001238522733.png b/zh-cn/application-dev/reference/arkui-ts/figures/zh-cn_image_0000001238522733.png new file mode 100644 index 0000000000000000000000000000000000000000..4f115a17e671fa21da2d44cd82bf7b0f3c70c0a6 Binary files /dev/null and b/zh-cn/application-dev/reference/arkui-ts/figures/zh-cn_image_0000001238522733.png differ diff --git a/zh-cn/application-dev/reference/arkui-ts/figures/zh-cn_image_0000001238522783.png b/zh-cn/application-dev/reference/arkui-ts/figures/zh-cn_image_0000001238522783.png new file mode 100644 index 0000000000000000000000000000000000000000..bc093379e122dcac29c4c8d04560d26bfc23d472 Binary files /dev/null and b/zh-cn/application-dev/reference/arkui-ts/figures/zh-cn_image_0000001238522783.png differ diff --git a/zh-cn/application-dev/reference/arkui-ts/figures/zh-cn_image_0000001238537297.png b/zh-cn/application-dev/reference/arkui-ts/figures/zh-cn_image_0000001238537297.png new file mode 100644 index 0000000000000000000000000000000000000000..50726d3e461d7a5dbfec674899fee603aaf41bee Binary files /dev/null and b/zh-cn/application-dev/reference/arkui-ts/figures/zh-cn_image_0000001238537297.png differ diff --git a/zh-cn/application-dev/reference/arkui-ts/figures/zh-cn_image_0000001238556395.png b/zh-cn/application-dev/reference/arkui-ts/figures/zh-cn_image_0000001238556395.png new file mode 100644 index 0000000000000000000000000000000000000000..294b32cf04462b04243afb828199be9b95e6dd17 Binary files /dev/null and b/zh-cn/application-dev/reference/arkui-ts/figures/zh-cn_image_0000001238556395.png differ diff --git a/zh-cn/application-dev/reference/arkui-ts/figures/zh-cn_image_0000001238601051.png b/zh-cn/application-dev/reference/arkui-ts/figures/zh-cn_image_0000001238601051.png new file mode 100644 index 0000000000000000000000000000000000000000..1f4208ebcf5ffeeda0d1f5c452327c8fd8dcf7ac Binary files /dev/null and b/zh-cn/application-dev/reference/arkui-ts/figures/zh-cn_image_0000001238601051.png differ diff --git a/zh-cn/application-dev/reference/arkui-ts/figures/zh-cn_image_0000001238601053.png b/zh-cn/application-dev/reference/arkui-ts/figures/zh-cn_image_0000001238601053.png new file mode 100644 index 0000000000000000000000000000000000000000..945862898489d8e008e94abbcd691aa307b18d06 Binary files /dev/null and b/zh-cn/application-dev/reference/arkui-ts/figures/zh-cn_image_0000001238601053.png differ diff --git a/zh-cn/application-dev/reference/arkui-ts/figures/zh-cn_image_0000001238602771.png b/zh-cn/application-dev/reference/arkui-ts/figures/zh-cn_image_0000001238602771.png new file mode 100644 index 0000000000000000000000000000000000000000..ec9ddc678b5a74f1e5ae78ba6a9c35618f31a589 Binary files /dev/null and b/zh-cn/application-dev/reference/arkui-ts/figures/zh-cn_image_0000001238602771.png differ diff --git a/zh-cn/application-dev/reference/arkui-ts/figures/zh-cn_image_0000001238602821.png b/zh-cn/application-dev/reference/arkui-ts/figures/zh-cn_image_0000001238602821.png new file mode 100644 index 0000000000000000000000000000000000000000..9cb1361bd9aded6d58d51ae771558989977a0608 Binary files /dev/null and b/zh-cn/application-dev/reference/arkui-ts/figures/zh-cn_image_0000001238602821.png differ diff --git a/zh-cn/application-dev/reference/arkui-ts/ts-a-deep-dive-into-component.md b/zh-cn/application-dev/reference/arkui-ts/ts-a-deep-dive-into-component.md deleted file mode 100644 index 1b3126e6fbe94b76fac6b76b6a3565253f3f23b7..0000000000000000000000000000000000000000 --- a/zh-cn/application-dev/reference/arkui-ts/ts-a-deep-dive-into-component.md +++ /dev/null @@ -1,11 +0,0 @@ -# 深入理解组件化 - -- **[build函数](ts-function-build.md)** - -- **[自定义组件初始化](ts-custom-component-initialization.md)** - -- **[自定义组件生命周期回调函数](ts-custom-component-lifecycle-callbacks.md)** - -- **[组件创建和重新初始化示例](ts-component-creation-re-initialization.md)** - - diff --git a/zh-cn/application-dev/reference/arkui-ts/ts-animation.md b/zh-cn/application-dev/reference/arkui-ts/ts-animation.md index 5157f99b38396f4839cfd38b73cdc7c1e68cba8a..afb4e3bad98d780e7bc4cf7affcc5dd086967b14 100644 --- a/zh-cn/application-dev/reference/arkui-ts/ts-animation.md +++ b/zh-cn/application-dev/reference/arkui-ts/ts-animation.md @@ -1,4 +1,4 @@ -# 动画 +# 动画 - **[属性动画](ts-animatorproperty.md)** diff --git a/zh-cn/application-dev/reference/arkui-ts/ts-animatorproperty.md b/zh-cn/application-dev/reference/arkui-ts/ts-animatorproperty.md index 34d0a5abc86f43f293ec20904b56b0313a3a9802..e7df635a2e955169f52723f9ea7f09116b77cf1a 100644 --- a/zh-cn/application-dev/reference/arkui-ts/ts-animatorproperty.md +++ b/zh-cn/application-dev/reference/arkui-ts/ts-animatorproperty.md @@ -1,61 +1,63 @@ -# 属性动画 +# 属性动画 + +>![](../../public_sys-resources/icon-note.gif) **说明：** +>从API Version 7开始支持。后续版本如有新增内容，则采用上角标单独标记该内容的起始版本。 组件的通用属性发生变化时，可以创建属性动画进行渐变，提升用户体验。 - -

类型

说明

+

说明

boolean

+

boolean

指定点是否在路径的区域内。

+

指定点是否在路径的区域内。

名称

+ - - - - - - - - - - - - - - - - - - - - - - - @@ -64,75 +66,75 @@ - Curve枚举说明 -

名称

参数类型

+

参数类型

默认值

+

默认值

描述

+

描述

duration

+

duration

number

+

number

1000

+

1000

单位为毫秒，默认动画时长为1000毫秒。

+

单位为毫秒，默认动画时长为1000毫秒。

curve

+

curve

Curve

+

Curve

Linear

+

Linear

默认曲线为线性，有效值参见Curve说明。

+

默认曲线为线性，有效值参见Curve说明。

delay

+

delay

number

+

number

0

+

0

单位为毫秒，默认不延时播放。

+

单位为毫秒，默认不延时播放。

iterations

+

iterations

number

+

number

1

+

1

默认播放一次，设置为-1时表示无限次播放。

+

默认播放一次，设置为-1时表示无限次播放。

playMode

+

playMode

PlayMode

+

PlayMode

Normal

+

Normal

设置动画播放模式，默认播放完成后重头开始播放。

+

设置动画播放模式，默认播放完成后重头开始播放。

名称

+ - - - - - - - - - - - - - - - - - - - - - - - - - - - diff --git a/zh-cn/application-dev/reference/arkui-ts/ts-appendix-enums.md b/zh-cn/application-dev/reference/arkui-ts/ts-appendix-enums.md index a49deb322b8e6e4c85838a094e89804cc83cbdf9..4ee8d2499f2bcccb58b1a9d4761536058a3a14b4 100644 --- a/zh-cn/application-dev/reference/arkui-ts/ts-appendix-enums.md +++ b/zh-cn/application-dev/reference/arkui-ts/ts-appendix-enums.md @@ -1,57 +1,77 @@ -# 文档中涉及到的内置枚举值 +# 文档中涉及到的内置枚举值 ## Alignment枚举说明 - -

名称

描述

+

描述

Linear

+

Linear

表示动画从头到尾的速度都是相同的。

+

表示动画从头到尾的速度都是相同的。

Ease

+

Ease

表示动画以低速开始，然后加快，在结束前变慢，CubicBezier(0.25, 0.1, 0.25, 1.0)。

+

表示动画以低速开始，然后加快，在结束前变慢，CubicBezier(0.25, 0.1, 0.25, 1.0)。

EaseIn

+

EaseIn

表示动画以低速开始，CubicBezier(0.42, 0.0, 1.0, 1.0)。

+

表示动画以低速开始，CubicBezier(0.42, 0.0, 1.0, 1.0)。

EaseOut

+

EaseOut

表示动画以低速结束，CubicBezier(0.0, 0.0, 0.58, 1.0)。

+

表示动画以低速结束，CubicBezier(0.0, 0.0, 0.58, 1.0)。

EaseInOut

+

EaseInOut

表示动画以低速开始和结束，CubicBezier(0.42, 0.0, 0.58, 1.0)。

+

表示动画以低速开始和结束，CubicBezier(0.42, 0.0, 0.58, 1.0)。

FastOutSlowIn

+

FastOutSlowIn

标准曲线，cubic-bezier(0.4, 0.0, 0.2, 1.0)。

+

标准曲线，cubic-bezier(0.4, 0.0, 0.2, 1.0)。

LinearOutSlowIn

+

LinearOutSlowIn

减速曲线，cubic-bezier(0.0, 0.0, 0.2, 1.0)。

+

减速曲线，cubic-bezier(0.0, 0.0, 0.2, 1.0)。

FastOutLinearIn

+

FastOutLinearIn

加速曲线，cubic-bezier(0.4, 0.0, 1.0, 1.0)。

+

加速曲线，cubic-bezier(0.4, 0.0, 1.0, 1.0)。

ExtremeDeceleration

+

ExtremeDeceleration

急缓曲线，cubic-bezier(0.0, 0.0, 0.0, 1.0)。

+

急缓曲线，cubic-bezier(0.0, 0.0, 0.0, 1.0)。

Sharp

+

Sharp

锐利曲线，cubic-bezier(0.33, 0.0, 0.67, 1.0)。

+

锐利曲线，cubic-bezier(0.33, 0.0, 0.67, 1.0)。

Rhythm

+

Rhythm

节奏曲线，cubic-bezier(0.7, 0.0, 0.2, 1.0)。

+

节奏曲线，cubic-bezier(0.7, 0.0, 0.2, 1.0)。

Smooth

+

Smooth

平滑曲线，cubic-bezier(0.4, 0.0, 0.4, 1.0)。

+

平滑曲线，cubic-bezier(0.4, 0.0, 0.4, 1.0)。

Friction

+

Friction

阻尼曲线，CubicBezier(0.2, 0.0, 0.2, 1.0)。

+

阻尼曲线，CubicBezier(0.2, 0.0, 0.2, 1.0)。

名称

+ - - - - - - - - - - - - - - - - - - - + + +

名称

描述

+

描述

TopStart

+

TopStart

顶部起始端。

+

顶部起始端。

Top

+

Top

顶部横向居中。

+

顶部横向居中。

TopEnd

+

TopEnd

顶部尾端。

+

顶部尾端。

Start

+

Start

起始端纵向居中。

+

起始端纵向居中。

Center

+

Center

横向和纵向居中。

+

横向和纵向居中。

End

+

End

尾端纵向居中。

+

尾端纵向居中。

BottomStart

+

BottomStart

底部起始端。

+

底部起始端。

Bottom

+

Bottom

底部横向居中。

+

底部横向居中。

BottomEnd

+

BottomEnd

底部尾端。

+

底部尾端。

+
+ +## Axis枚举说明 + + + + + + + + + + @@ -59,41 +79,40 @@ ## ItemAlign枚举说明 - -

名称

+

描述

+

Vertical

+

方向为纵向。

+

Horizontal

+

方向为横向。

名称

+ - - - - - - - - - - - - - @@ -101,26 +120,25 @@ ## LineCapStyle枚举说明 - -

名称

描述

+

描述

Auto

+

Auto

使用Flex容器中默认配置。

+

使用Flex容器中默认配置。

Start

+

Start

元素在Flex容器中，交叉轴方向首部对齐。

+

元素在Flex容器中，交叉轴方向首部对齐。

Center

+

Center

元素在Flex容器中，交叉轴方向居中对齐。

+

元素在Flex容器中，交叉轴方向居中对齐。

End

+

End

元素在Flex容器中，交叉轴方向底部对齐。

+

元素在Flex容器中，交叉轴方向底部对齐。

Stretch

+

Stretch

元素在Flex容器中，交叉轴方向拉伸填充，在未设置尺寸时，拉伸到容器尺寸。

+

元素在Flex容器中，交叉轴方向拉伸填充，在未设置尺寸时，拉伸到容器尺寸。

Baseline

+

Baseline

元素在Flex容器中，交叉轴方向文本基线对齐。

+

元素在Flex容器中，交叉轴方向文本基线对齐。

名称

+ - - - - - - - @@ -128,31 +146,30 @@ ## PlayMode枚举值说明 - -

名称

描述

+

描述

Butt

+

Butt

分割线两端为平行线。

+

分割线两端为平行线。

Round

+

Round

分割线两端为半圆。

+

分割线两端为半圆。

Square

+

Square

分割线两端为平行线。

+

分割线两端为平行线。

名称

+ - - - - - - - - - @@ -160,31 +177,30 @@ ## ImageRepeat枚举说明 - -

名称

描述

+

描述

Normal

+

Normal

动画按正常播放。

+

动画按正常播放。

Reverse

+

Reverse

动画反向播放。

+

动画反向播放。

Alternate

+

Alternate

动画在奇数次（1、3、5...）正向播放，在偶数次（2、4、6...）反向播放。

+

动画在奇数次（1、3、5...）正向播放，在偶数次（2、4、6...）反向播放。

AlternateReverse

+

AlternateReverse

动画在奇数次（1、3、5...）反向播放，在偶数次（2、4、6...）正向播放。

+

动画在奇数次（1、3、5...）反向播放，在偶数次（2、4、6...）正向播放。

名称

+ - - - - - - - - - @@ -192,31 +208,30 @@ ## TextDecorationType枚举说明 - -

名称

描述

+

描述

X

+

X

只在水平轴上重复绘制图片。

+

只在水平轴上重复绘制图片。

Y

+

Y

只在竖直轴上重复绘制图片。

+

只在竖直轴上重复绘制图片。

XY

+

XY

在两个轴上重复绘制图片。

+

在两个轴上重复绘制图片。

NoRepeat

+

NoRepeat

不重复绘制图片。

+

不重复绘制图片。

名称

+ - - - - - - - - - @@ -224,26 +239,25 @@ ## TextCase枚举说明 - -

名称

描述

+

描述

Underline

+

Underline

文字下划线修饰。

+

文字下划线修饰。

LineThrough

+

LineThrough

穿过文本的修饰线。

+

穿过文本的修饰线。

Overline

+

Overline

文字上划线修饰。

+

文字上划线修饰。

None

+

None

不使用文本装饰线。

+

不使用文本装饰线。

名称

+ - - - - - - - @@ -251,26 +265,25 @@ ## BarState枚举说明 - -

名称

描述

+

描述

Normal

+

Normal

保持文本原有大小写。

+

保持文本原有大小写。

LowerCase

+

LowerCase

文本采用全小写。

+

文本采用全小写。

UpperCase

+

UpperCase

文本采用全大写。

+

文本采用全大写。

名称

+ - - - - - - - diff --git a/zh-cn/application-dev/reference/arkui-ts/ts-appendix.md b/zh-cn/application-dev/reference/arkui-ts/ts-appendix.md index f1bebc1efcd4eb9d725e00bbd1e3fcf44578af4a..5eaa9c8adf1ed664d8a880c5a298cb039b0565e3 100644 --- a/zh-cn/application-dev/reference/arkui-ts/ts-appendix.md +++ b/zh-cn/application-dev/reference/arkui-ts/ts-appendix.md @@ -1,4 +1,4 @@ -# 附录 +# 附录 - **[文档中涉及到的内置枚举值](ts-appendix-enums.md)** diff --git a/zh-cn/application-dev/reference/arkui-ts/ts-application-states-apis-environment.md b/zh-cn/application-dev/reference/arkui-ts/ts-application-states-apis-environment.md deleted file mode 100644 index a522af65fa87da26aaaea5615ee270db0ba26446..0000000000000000000000000000000000000000 --- a/zh-cn/application-dev/reference/arkui-ts/ts-application-states-apis-environment.md +++ /dev/null @@ -1,118 +0,0 @@ -# 环境变量 - -**Environment**是框架在应用程序启动时创建的单例对象，它为**AppStorage**提供了一系列应用程序需要的环境状态属性，这些属性描述了应用程序运行的设备环境。**Environment**及其属性是不可变的，所有属性值类型均为简单类型。 - -如下示例展示了从**Environment**获取语音环境： - -``` -Environment.EnvProp("accessibilityEnabled", "default"); -var enable = AppStorageGet("accessibilityEnabled"); -``` - -**accessibilityEnabled**是**Environment**提供默认系统变量识别符。首先需要将对应系统属性绑定到**Appstorage**中，后可以通过AppStorage中的方法或者装饰器，访问对应系统属性数据。 - -## Environment接口 - - -

名称

描述

+

描述

Off

+

Off

不显示。

+

不显示。

On

+

On

常驻显示。

+

常驻显示。

Auto

+

Auto

按需显示(触摸时显示，2s后消失)。

+

按需显示(触摸时显示，2s后消失)。
- - - - - - - - - - - - - - - - - - - - - -

key

-

参数

-

返回值

-

说明

-

EnvProp

-

key : string

-

defaultValue: any

-

boolean

-

关联此系统项到Appstorage中。建议在app启动时使用此Api。如果此属性在Appstorage已经存在则返回false。请勿使用AppStorage中的变量，在调用此方法关联环境变量。

-

EnvProps

-

keys: {

-

key: string,

-

defaultValue: any

-

}[]

-

void

-

关联此系统项数组到Appstorage中。

-

Keys

-

Array<string>

-

number

-

返回关联的系统项。

-
- -## Environment内置的环境变量 - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - -

key

-

类型

-

说明

-

accessibilityEnabled

-

boolean

-

无障碍屏幕朗读是否启用。

-

colorMode

-

ColorMode

-

深浅色模式，选项值为：

-
  • ColorMode.LIGHT：浅色模式；
  • ColorMode.DARK：深色模式。
-

fontScale

-

number

-

字体大小比例，范围为：[0.85, 1.45]。

-

fontWeightScale

-

number

-

字体权重比例，取值范围：[0.6, 1.6]。

-

layoutDirection

-

LayoutDirection

-

布局方向类型，可选值为：

-
  • LayoutDirection.LTR：从左到右；
  • LayoutDirection.RTL：从右到左。
-

languageCode

-

string

-

当前系统语言值，小写字母，例如zh。

-
- diff --git a/zh-cn/application-dev/reference/arkui-ts/ts-application-states-apis-persistentstorage.md b/zh-cn/application-dev/reference/arkui-ts/ts-application-states-apis-persistentstorage.md deleted file mode 100644 index ed86b2870d6f656769fde6bfb2b524a1d8b9feb7..0000000000000000000000000000000000000000 --- a/zh-cn/application-dev/reference/arkui-ts/ts-application-states-apis-persistentstorage.md +++ /dev/null @@ -1,94 +0,0 @@ -# 持久化数据管理 - -**PersistentStorage**用于管理应用持久化数据。此对象可以将特定标记的持久化数据链接到AppStorage中，并由AppStorage接口访问对应持久化数据，或者通过@StorageLink修饰器来访问对应key的变量。 - -## PersistentStorage接口 - - - - - - - - - - - - - - - - - - - - - - - - - - - - - -

方法

-

参数说明

-

返回值

-

定义

-

PersistProp

-

key : string

-

defaultValue: T

-

void

-

关联命名的属性在AppStorage变为持久化数据。赋值覆盖顺序

-

首先 如果此属性在AppStorage中存在，并且将Persistent中的数据复写为AppStorage中的属性值。

-

其次Persistent中有此命名的属性，使用Persistent中的属性值。

-

最后 以上条件不满足使用defaultValue，不支持null和undefined。

-

DeleteProp

-

key: string

-

void

-

取消双向数据绑定，该属性值将从持久存储中删除。

-

PersistProps

-

keys: {

-

key: string,

-

defaultValue: any

-

}[]

-

void

-

关联多个命名的属性绑定。

-

Keys

-

void

-

Array<string>

-

返回所有持久化属性的标记。

-
- ->![](../../public_sys-resources/icon-note.gif) **说明：** ->- PersistProp接口使用时，需要保证输入对应的key应当在Appstorage存在。 ->- DeleteProp接口使用时，只能对本次启动已经link过的数据生效。 - -``` -PersistentStorage.PersistProp("highScore", "0"); - -@Entry -@Component -struct PersistentComponent { - @StorageLink('highScore') highScore: string = '0' - @State currentScore: number = 0 - build() { - Column() { - if (this.currentScore === Number(this.highScore)) { - Text(`new highScore : ${this.highScore}`) - } - Button() { - Text(`goal!, currentScore : ${this.currentScore}`) - .fontSize(10) - }.onClick(() => { - this.currentScore++ - if (this.currentScore > Number(this.highScore)) { - this.highScore = this.currentScore.toString() - } - }) - } - } -} -``` - diff --git a/zh-cn/application-dev/reference/arkui-ts/ts-application-states-appstorage.md b/zh-cn/application-dev/reference/arkui-ts/ts-application-states-appstorage.md deleted file mode 100644 index a6a65f680815d01b82807ec90966cf015fac8db4..0000000000000000000000000000000000000000 --- a/zh-cn/application-dev/reference/arkui-ts/ts-application-states-appstorage.md +++ /dev/null @@ -1,153 +0,0 @@ -# 应用程序的数据存储 - -**AppStorage**是应用程序中的单例对象，由UI框架在应用程序启动时创建。它的目的是为可变应用程序状态属性提供中央存储。**AppStorage**包含整个应用程序中需要访问的所有状态属性。只要应用程序保持运行，**AppStorage**存储就会保留所有属性及其值，属性值可以通过唯一的键值进行访问。 - -UI组件可以通过装饰器将应用程序状态数据与**AppStorage**进行同步。应用业务逻辑的实现也可以通过接口访问**AppStorage**。 - -AppStorage的选择状态属性可以与不同的数据源或数据接收器同步。这些数据源和接收器可以是设备上的本地或远程，并具有不同的功能，如数据持久性。这样的数据源和接收器可以独立于UI在业务逻辑中实现。 - -默认情况下，**AppStorage**中的属性是可变的，**AppStorage**还可使用不可变（只读）属性。 - -## AppStorage接口说明 - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - -

方法

-

参数说明

-

返回值

-

定义

-

Link

-

key: string

-

@Link

-

如果存在具有给定键的数据，则返回到此属性的双向数据绑定，该双向绑定意味着变量或者组件对数据的更改将同步到AppStorage，通过AppStorage对数据的修改将同步到变量或者组件。如果具有此键的属性不存在或属性为只读，则返回undefined。

-

SetAndLink

-

key : String

-

defaultValue: T

-

@Link

-

与Link接口类似。如果当前的key在AppStorage有保存，则返回此key对应的value。如果此key未被创建，则创建一个对应default值的Link返回。

-

Prop

-

key: string

-

@Prop

-

如果存在具有给定键的属性，则返回到此属性的单向数据绑定。该单向绑定意味着只能通过AppStorage将属性的更改同步到变量或者组件。该方法返回的变量为不可变变量，适用于可变和不可变的状态属性，如果具有此键的属性不存在则返回undefined。

-
说明：

prop方法对应的属性值类型为简单类型。

-
-

SetAndProp

-

key : string

-

defaultValue: S

-

@Prop

-

与Prop接口类似。如果当前的key在AppStorage有保存，则返回此key对应的value。如果此key未被创建，则创建一个对应default值的Prop返回。

-

Has

-

key: string

-

boolean

-

判断对应键值的属性是否存在。

-

Keys

-

void

-

array<string>

-

返回包含所有键的字符串数组。

-

Get

-

string

-

T或undefined

-

通过此接口获取对应此key值的value

-

Set

-

string, newValue ：T

-

void

-

对已保存的key值，替换其value值。

-

SetOrCreate

-

string, newValue ：T

-

boolean

-

如果相同名字的属性存在：如果此属性可以被更改返回true，否则返回false

-

如果相同名字的属性不存在：创建第一个赋值为defaultValue的属性，不支持null和undefined

-

Delete

-

key : string

-

boolean

-

删除属性，如果存在返回true，不存在返回false

-

Clear

-

none

-

boolean

-

删除所有的属性，如果当前有状态变量依旧引用此属性，则返回false

-

IsMutable

-

key: string

-		  

返回此属性是否存在并且是否可以改变。

-
- ->![](../../public_sys-resources/icon-note.gif) **说明：** ->当前接口当前仅可以处理基础类型数据，对于修改object中某一个值尚未支持。 - -## 示例 - -``` -let link1 = AppStorage.Link('PropA') -let link2 = AppStorage.Link('PropA') -let prop = AppStorage.Prop('PropA') - -link1 = 47 // causes link1 == link2 == prop == 47 -link2 = link1 + prop // causes link1 == link2 == prop == 94 -prop = 1 // error, prop is immutable -``` - diff --git a/zh-cn/application-dev/reference/arkui-ts/ts-application-states-storagelink-storageprop.md b/zh-cn/application-dev/reference/arkui-ts/ts-application-states-storagelink-storageprop.md deleted file mode 100644 index 381a0550939f77b445bc48db1e4817cdd5f5c77d..0000000000000000000000000000000000000000 --- a/zh-cn/application-dev/reference/arkui-ts/ts-application-states-storagelink-storageprop.md +++ /dev/null @@ -1,54 +0,0 @@ -# AppStorage与组件同步 - -在[管理组件拥有的状态](ts-component-states-state.md)中，我们已经定义了如何将组件的状态变量与父组件或祖先组件中的**@State**装饰的状态变量同步，主要包括**@Prop**、**@Link**、**@Consume**。 - -本章节将定义如何将组件变量与**AppStorage**同步，主要提供**@StorageLink**和**@StorageProp**装饰器。 - -## @StorageLink装饰器 - -组件通过使用**@StorageLink\(key\)**装饰的状态变量，将于**AppStorage**建立双向数据绑定，**key**为**AppStorage**中的属性键值。当创建包含**@StorageLink**的状态变量的组件时，该状态变量的值将使用**AppStorage**中的值进行初始化。在UI组件中对**@StorageLink**的状态变量所做的更改将同步到**AppStorage**，并从**AppStorage**同步到任何其他绑定实例中，如**PersistentStorage**或其他绑定的UI组件。 - -## @StorageProp装饰器 - -组件通过使用**@StorageProp\(key\)**装饰的状态变量，将于**AppStorage**建立单向数据绑定，**key**标识AppStorage中的属性键值。当创建包含**@StoageProp**的状态变量的组件时，该状态变量的值将使用**AppStorage**中的值进行初始化。**AppStorage**中的属性值更改会导致绑定的UI组件进行状态更新。 - -## 示例 - -``` -let varA = AppStorage.Link('varA') -let envLang = AppStorage.Prop('languageCode') - -@Entry -@Component -struct ComponentA { - @StorageLink('varA') varA: number = 2 - @StorageProp('languageCode') lang: string = 'en' - private label: string = 'count' - - private aboutToAppear() { - this.label = (this.lang === 'zh') ? '数' : 'Count' - } - - build() { - Row({ space: 20 }) { - - Button(`${this.label}: ${this.varA}`) - .onClick(() => { - AppStorage.Set('varA', AppStorage.Get('varA') + 1) - }) - Button(`lang: ${this.lang}`) - .onClick(() => { - if (this.lang === 'zh') { - AppStorage.Set('languageCode', 'en') - } else { - AppStorage.Set('languageCode', 'zh') - } - this.label = (this.lang === 'zh') ? '数' : 'Count' - }) - } - } -} -``` - -每次用户单击Count按钮时，this.varA变量值都会增加，此变量与AppStorage中的varA同步。每次用户单击当前语言按钮时，修改AppStorage中的languageCode，此修改会同步给this.lang变量。 - diff --git a/zh-cn/application-dev/reference/arkui-ts/ts-basic-components-blank.md b/zh-cn/application-dev/reference/arkui-ts/ts-basic-components-blank.md index 6abb1a1483067fec2fa265a7dbc42fac0f9c873b..99be5453d987f2edac260c69435ff7f7edd71b3e 100644 --- a/zh-cn/application-dev/reference/arkui-ts/ts-basic-components-blank.md +++ b/zh-cn/application-dev/reference/arkui-ts/ts-basic-components-blank.md @@ -1,9 +1,9 @@ -# Blank - -空白填充组件，在容器主轴方向上，空白填充组件具有自动填充容器空余部分的能力。 +# Blank >![](../../public_sys-resources/icon-note.gif) **说明：** ->- 仅当父组件为Row/Column时生效。 +>该组件从API Version 7开始支持。后续版本如有新增内容，则采用上角标单独标记该内容的起始版本。 + +空白填充组件，在容器主轴方向上，空白填充组件具有自动填充容器空余部分的能力。仅当父组件为Row/Column时生效。 ## 权限列表 @@ -19,28 +19,27 @@ Blank\(min?: Length\) - 参数 - -

参数名

+ - - - - - - - - - @@ -49,24 +48,23 @@ Blank\(min?: Length\) ## 属性 - -

参数名

参数类型

+

参数类型

必填

+

必填

默认值

+

默认值

参数描述

+

参数描述

min

+

min

Length

+

Length

否

+

否

0

+

0

空白填充组件在容器主轴上的最小大小。

+

空白填充组件在容器主轴上的最小大小。

名称

+ - - - - - - - @@ -86,8 +84,8 @@ struct BlankExample { Row() { Text('Bluetooth').fontSize(18) Blank() - Text('on/off').fontSize(18).height(60) - }.width('100%').backgroundColor(0xFFFFFF).borderRadius(15).padding(12) + Toggle({ type: ToggleType.Switch }) + }.width('100%').backgroundColor(0xFFFFFF).borderRadius(15).padding({ left: 12 }) }.backgroundColor(0xEFEFEF).padding(20) } } @@ -95,9 +93,9 @@ struct BlankExample { 竖屏状态 -![](figures/blank_v.gif) +![](figures/Blank1.gif) 横屏状态 -![](figures/blank_h.gif) +![](figures/Blank2.gif) diff --git a/zh-cn/application-dev/reference/arkui-ts/ts-basic-components-button.md b/zh-cn/application-dev/reference/arkui-ts/ts-basic-components-button.md index 956a8ba2ff3cdd4af8837c341e13ff1c59db1871..7d01e7c45afcbbdd538dc24ebed63ab7471c89a1 100644 --- a/zh-cn/application-dev/reference/arkui-ts/ts-basic-components-button.md +++ b/zh-cn/application-dev/reference/arkui-ts/ts-basic-components-button.md @@ -1,4 +1,7 @@ -# Button +# Button + +>![](../../public_sys-resources/icon-note.gif) **说明：** +>该组件从API Version 7开始支持。后续版本如有新增内容，则采用上角标单独标记该内容的起始版本。 提供按钮组件。 @@ -17,38 +20,38 @@ **表 1** options参数说明 -

名称

参数类型

+

参数类型

默认值

+

默认值

描述

+

描述

color

+

color

Color

+

Color

0x00000000

+

0x00000000

设置空白填充的填充颜色。

+

设置空白填充的填充颜色。

参数名

+ - - - - - - - - - - - - - - @@ -61,39 +64,38 @@ **表 2** value参数说明 - -

参数名

参数类型

+

参数类型

必填

+

必填

默认值

+

默认值

参数描述

+

参数描述

type

+

type

ButtonType

+

ButtonType

否

+

否

Capsule

+

Capsule

描述按钮风格。

+

描述按钮风格。

stateEffect

+

stateEffect

boolean

+

boolean

否

+

否

true

+

true

按钮按下时是否开启切换效果，当状态置为false时，点击效果关闭。

+

按钮按下时是否开启切换效果，当状态置为false时，点击效果关闭。

参数名

+ - - - - - - - - - - - - - - @@ -102,33 +104,32 @@ ## 属性 - -

参数名

参数类型

+

参数类型

必填

+

必填

默认值

+

默认值

参数描述

+

参数描述

label

+

label

string

+

string

否

+

否

-

+

-

按钮文本内容。

+

按钮文本内容。

options

+

options

Object

+

Object

否

+

否

-

+

-

见options参数说明。

+

见options参数说明。

名称

+ - - - - - - - - - - - @@ -136,26 +137,25 @@ - ButtonType枚举说明 - -

名称

参数类型

+

参数类型

默认值

+

默认值

描述

+

描述

type

+

type

ButtonType

+

ButtonType

Capsule

+

Capsule

设置Button样式。

+

设置Button样式。

stateEffect

+

stateEffect

boolean

+

boolean

true

+

true

状态切换时是否开启切换效果，当状态置为false时，点击效果关闭。

+

状态切换时是否开启切换效果，当状态置为false时，点击效果关闭。

名称

+ - - - - - - - diff --git a/zh-cn/application-dev/reference/arkui-ts/ts-basic-components-datapanel.md b/zh-cn/application-dev/reference/arkui-ts/ts-basic-components-datapanel.md index 1b887defe01b450f56afb20b8edc32406912d69d..8bd9ccfebf5b90019d43a4adfc46a6a696419d24 100644 --- a/zh-cn/application-dev/reference/arkui-ts/ts-basic-components-datapanel.md +++ b/zh-cn/application-dev/reference/arkui-ts/ts-basic-components-datapanel.md @@ -1,6 +1,10 @@ -# DataPanel +# DataPanel -数据面板组件，用于将多个数据占比情况使用环形占比图进行展示。 +数据面板组件，用于将多个数据占比情况使用占比图进行展示。 + +## 权限列表 + +无 ## 子组件 @@ -8,43 +12,76 @@ ## 接口 -DataPanel\(value:\{values: number\[\], max?: number\}\) +DataPanel\(value:\{values: number\[\], max?: number, type?: DataPanelType\}\) - 参数 - -

名称

描述

+

描述

Capsule

+

Capsule

胶囊型按钮（圆角默认为高度的一半）。

+

胶囊型按钮（圆角默认为高度的一半）。

Circle

+

Circle

圆形按钮。

+

圆形按钮。

Normal

+

Normal

普通按钮（默认不带圆角）。

+

普通按钮（默认不带圆角）。

参数名

+ - - - - - - - - - - - - - - + + + + + + + + +

参数名

参数类型

+

参数类型

必填

+

必填

默认值

+

默认值

参数描述

+

参数描述

values

+

values

number[]

+

number[]

是

+

是

-

+

-

数据值列表，最大支持9个数据。

+

数据值列表，最大支持9个数据。

max

+

max

number

+

number

否

+

否

100

+

100

数据的最大值。

+

1.max大于0，表示数据的最大值。

+

2.max小于等于0，max等于value数组各项的和，按比例显示。

+

type8+

+

DataPanelType

+

否

+

DataPanelType.Circle

+

数据面板的类型。

+
+ + +- DataPanelType枚举说明 + + + + + + + + + + @@ -57,17 +94,19 @@ DataPanel\(value:\{values: number\[\], max?: number\}\) @Entry @Component struct DataPanelExample { - public values1: number[] = [40, 20, 20, 10, 10] + public values1: number[] = [10, 10, 10, 10, 10, 10, 10, 10, 10] build() { Column({ space: 5 }) { - DataPanel({ values: this.values1, max: 100 }) - .width(150) - .height(150) + Text('Circle').fontSize(9).fontColor(0xCCCCCC).margin({ top: 20, right: '80%' }) + DataPanel({ values: this.values1, max: 100, type: DataPanelType.Circle }).width(200).height(200) + + Text('Line').fontSize(9).fontColor(0xCCCCCC).margin({ bottom: 20, right: '80%' }) + DataPanel({ values: this.values1, max: 100, type: DataPanelType.Line }).width(300).height(10) }.width('100%').margin({ top: 5 }) } } ``` -![](figures/datapanel.png) +![](figures/datapanel.jpg) diff --git a/zh-cn/application-dev/reference/arkui-ts/ts-basic-components-divider.md b/zh-cn/application-dev/reference/arkui-ts/ts-basic-components-divider.md index 786b32f943ea9392351c604d9306960dd9777ac4..38aba99c0bc5c8552375bd11bc05376f1b1cf4d7 100644 --- a/zh-cn/application-dev/reference/arkui-ts/ts-basic-components-divider.md +++ b/zh-cn/application-dev/reference/arkui-ts/ts-basic-components-divider.md @@ -1,4 +1,7 @@ -# Divider +# Divider + +>![](../../public_sys-resources/icon-note.gif) **说明：** +>该组件从API Version 7开始支持。后续版本如有新增内容，则采用上角标单独标记该内容的起始版本。 提供分隔器组件，分隔不同内容块/内容元素。 @@ -16,51 +19,50 @@ Divider\(\) ## 属性 - -

名称

+

描述

+

Line

+

线型数据面板。

+

Circle

+

环形数据面板。

名称

+ - - - - - - - - - - - - - - - - - - - diff --git a/zh-cn/application-dev/reference/arkui-ts/ts-basic-components-gauge.md b/zh-cn/application-dev/reference/arkui-ts/ts-basic-components-gauge.md new file mode 100644 index 0000000000000000000000000000000000000000..87c23afdb1dc9515ac702b0ea0cbbeda59ec51e7 --- /dev/null +++ b/zh-cn/application-dev/reference/arkui-ts/ts-basic-components-gauge.md @@ -0,0 +1,150 @@ +# Gauge + +>![](../../public_sys-resources/icon-note.gif) **说明：** +>该组件从API Version 8开始支持。后续版本如有新增内容，则采用上角标单独标记该内容的起始版本。 + +数据量规图表组件，用于将数据展示为环形图表。 + +## 权限列表 + +无 + +## 子组件 + +无 + +## 接口 + +Gauge\(value:\{value: number, min?: number, max?: number\}\) + +- 参数 + +

名称

参数类型

+

参数类型

默认值

+

默认值

描述

+

描述

vertical

+

vertical

boolean

+

boolean

false

+

false

使用水平分割线还是垂直分割线，false: 水平分割线， true:垂直分割线。

+

使用水平分割线还是垂直分割线，false: 水平分割线， true:垂直分割线。

color

+

color

Color

+

Color

-

+

-

设置分割线颜色。

+

设置分割线颜色。

strokeWidth

+

strokeWidth

Length

+

Length

1

+

1

设置分割线宽度。

+

设置分割线宽度。

lineCap

+

lineCap

LineCapStyle

+

LineCapStyle

Butt

+

Butt

设置分割线条的端点样式，默认为Butt。

+

设置分割线条的端点样式，默认为Butt。
+ + + + + + + + + + + + + + + + + + + + + + + + + +

参数名

+

参数类型

+

必填

+

默认值

+

参数描述

+

value

+

number

+

是

+

-

+

当前数据值。

+

min

+

number

+

否

+

0

+

当前数据段最小值。

+

max

+

number

+

否

+

100

+

当前数据段最大值。

+
+ + +## 属性 + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + +

名称

+

参数类型

+

默认值

+

描述

+

value

+

number

+

0

+

设置当前数据图表的值。

+

startAngle

+

Angle

+

-150

+

设置起始角度位置，时钟0点为0度，顺时针方向为正角度。

+

endAngle

+

Angle

+

150

+

设置终止角度位置，时钟0点为0度，顺时针方向为正角度。

+

colors

+

Color | Array<ColorStop>

+

-

+

设置图表的颜色，支持纯色和分段渐变色设置。

+

strokeWidth

+

Length

+

-

+

设置环形图表的环形厚度。

+
+ +## 示例 + +``` +@Entry +@Component +struct GaugeExample { + build() { + Column() { + Gauge({ value: 50, min: 0, max: 100 }) + .startAngle(210).endAngle(150) + .colors([[0x317AF7, 1], [0x5BA854, 1], [0xE08C3A, 1], [0x9C554B, 1], [0xD94838, 1]]) + .strokeWidth(20) + .width(200).height(200) + }.width('100%').margin({ top: 5 }) + } +} +``` + +![](figures/gauge.png) + diff --git a/zh-cn/application-dev/reference/arkui-ts/ts-basic-components-image.md b/zh-cn/application-dev/reference/arkui-ts/ts-basic-components-image.md index f43d3a0fe78fa57edeba8af861397b332774d20f..e3fc1ca1298be5f1c9cded012f685135032890c9 100644 --- a/zh-cn/application-dev/reference/arkui-ts/ts-basic-components-image.md +++ b/zh-cn/application-dev/reference/arkui-ts/ts-basic-components-image.md @@ -1,4 +1,7 @@ -# Image +# Image + +>![](../../public_sys-resources/icon-note.gif) **说明：** +>该组件从API Version 7开始支持。后续版本如有新增内容，则采用上角标单独标记该内容的起始版本。 图片组件，用来渲染展示图片。 @@ -12,32 +15,31 @@ ohos.permission.INTERNET（使用网络图片） ## 接口 -Image\(src: string | PixelMap\) +Image\(value: \{uri: string | PixelMap\}\) - 参数 - -

参数名

+ - - - - - - - - - @@ -46,117 +48,124 @@ Image\(src: string | PixelMap\) ## 属性 - -

参数名

参数类型

+

参数类型

必填

+

必填

默认值

+

默认值

参数描述

+

参数描述

src

+

uri

string

+

string

是

+

是

-

+

-

图片的URI，支持本地图片和网络路径。

+

图片的uri，支持本地图片和网络路径。

名称

+ - - - - - - - - - - - - - - - - - - - - - - - - - - - + + + + +

名称

参数类型

+

参数类型

默认值

+

默认值

描述

+

描述

alt

+

alt

string

+

string

-

+

-

加载时显示的占位图。支持本地图片和网络路径。

+

加载时显示的占位图。支持本地图片和网络路径。

objectFit

+

objectFit

ImageFit

+

ImageFit

Cover

+

Cover

设置图片的缩放类型。

+

设置图片的缩放类型。

objectRepeat

+

objectRepeat

ImageRepeat

+

ImageRepeat

NoRepeat

+

NoRepeat

设置图片的重复样式。

-
说明：
  • SVG类型图源不支持该属性。
+

设置图片的重复样式。

+
说明：
  • SVG类型图源不支持该属性。

interpolation

+

interpolation

ImageInterpolation

+

ImageInterpolation

None

+

None

设置图片的插值效果，仅针对图片放大插值。

-
说明：
  • SVG类型图源不支持该属性。
  • PixelMap资源不支持该属性。
+

设置图片的插值效果，仅针对图片放大插值。

+
说明：
  • SVG类型图源不支持该属性。
  • PixelMap资源不支持该属性。

renderMode

+

renderMode

ImageRenderMode

+

ImageRenderMode

Original

+

Original

设置图片渲染的模式。

-
说明：
  • SVG类型图源不支持该属性。
+

设置图片渲染的模式。

+
说明：
  • SVG类型图源不支持该属性。

sourceSize

+

sourceSize

{

-

width: number,

-

height: number

-

}

+

{

+

width: number,

+

height: number

+

}

-

+

-

设置图片解码尺寸，将原始图片解码成指定尺寸的图片，number类型单位为px。

-
说明：

PixelMap资源不支持该属性。

+

设置图片解码尺寸，将原始图片解码成指定尺寸的图片，number类型单位为px。

+
说明：

PixelMap资源不支持该属性。

syncLoad8+

+

boolean

+

false

+

设置是否同步加载图片，默认是异步加载。同步加载时阻塞UI线程，不会显示占位图。

+
- ImageFit枚举说明 - -

名称

+ - - - - - - - - - - - @@ -165,31 +174,30 @@ Image\(src: string | PixelMap\) - ImageInterpolation枚举说明 - -

名称

描述

+

描述

Cover

+

Cover

保持宽高比进行缩小或者放大，使得图片两边都大于或等于显示边界。

+

保持宽高比进行缩小或者放大，使得图片两边都大于或等于显示边界。

Contain

+

Contain

保持宽高比进行缩小或者放大，使得图片完全显示在显示边界内。

+

保持宽高比进行缩小或者放大，使得图片完全显示在显示边界内。

Fill

+

Fill

不保持宽高比进行放大缩小，使得图片填充满显示边界。

+

不保持宽高比进行放大缩小，使得图片填充满显示边界。

None

+

None

保持原有尺寸显示。通常配合objectRepeat属性一起使用。

+

保持原有尺寸显示。通常配合objectRepeat属性一起使用。

ScaleDown

+

ScaleDown

保持宽高比显示，图片缩小或者保持不变。

+

保持宽高比显示，图片缩小或者保持不变。

名称

+ - - - - - - - - - @@ -198,21 +206,20 @@ Image\(src: string | PixelMap\) - ImageRenderMode枚举说明 - -

名称

描述

+

描述

None

+

None

不使用插值图片数据。

+

不使用插值图片数据。

High

+

High

高度使用插值图片数据，可能会影响图片渲染的速度。

+

高度使用插值图片数据，可能会影响图片渲染的速度。

Medium

+

Medium

中度使用插值图片数据。

+

中度使用插值图片数据。

Low

+

Low

低度使用插值图片数据。

+

低度使用插值图片数据。

名称

+ - - - - - @@ -221,26 +228,25 @@ Image\(src: string | PixelMap\) ## 事件 - -

名称

描述

+

描述

Original

+

Original

按照原图进行渲染，包括颜色。

+

按照原图进行渲染，包括颜色。

Template

+

Template

将图像渲染为模板图像，忽略图片的颜色信息。

+

将图像渲染为模板图像，忽略图片的颜色信息。

名称

+ - - - - - - - @@ -444,5 +450,3 @@ struct ImageExample3 { } ``` -![](figures/Image3.gif) - diff --git a/zh-cn/application-dev/reference/arkui-ts/ts-basic-components-imageanimator.md b/zh-cn/application-dev/reference/arkui-ts/ts-basic-components-imageanimator.md index f59aacefdbca375540ef1bcaa20b212fcd58d7f6..e99ba3230c1baaa67b29f49391c621a3009a1fe5 100644 --- a/zh-cn/application-dev/reference/arkui-ts/ts-basic-components-imageanimator.md +++ b/zh-cn/application-dev/reference/arkui-ts/ts-basic-components-imageanimator.md @@ -1,7 +1,14 @@ -# ImageAnimator +# ImageAnimator + +>![](../../public_sys-resources/icon-note.gif) **说明：** +>该组件从API Version 7开始支持。后续版本如有新增内容，则采用上角标单独标记该内容的起始版本。 提供帧动画组件来实现逐帧播放图片的能力，可以配置需要播放的图片列表，每张图片可以配置时长。 +## 权限列表 + +无 + ## 子组件 无 @@ -12,118 +19,117 @@ ImageAnimator\(\) ## 属性 - -

名称

功能描述

+

功能描述

onComplete(callback: (event?: { width: number, height: number, componentWidth: number, componentHeight: number, loadingStatus: number }) => void)

+

onComplete(callback: (event?: { width: number, height: number, componentWidth: number, componentHeight: number, loadingStatus: number }) => void)

图片成功加载时触发该回调，返回成功加载的图源尺寸。

+

图片成功加载时触发该回调，返回成功加载的图源尺寸。

onError(callback: (event?: { componentWidth: number, componentHeight: number }) => void)

+

onError(callback: (event?: { componentWidth: number, componentHeight: number }) => void)

图片加载出现异常时触发该回调。

+

图片加载出现异常时触发该回调。

onFinish(callback: () => void)

+

onFinish(callback: () => void)

当加载的源文件为带动效的svg图片时，当svg动效播放完成时会触发这个回调，如果动效为无限循环动效，则不会触发这个回调。

+

当加载的源文件为带动效的svg图片时，当svg动效播放完成时会触发这个回调，如果动效为无限循环动效，则不会触发这个回调。

参数名称

+ - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - @@ -131,31 +137,30 @@ ImageAnimator\(\) - AnimationStatus枚举说明 - -

参数名称

参数类型

+

参数类型

默认值

+

默认值

必填

+

必填

参数描述

+

参数描述

images

+

images

Array<{

-

src:string,

-

width?:Length,

-

height?:Length,

-

top?:Length,

-

left?:Length,

-

duration?:number

-

}>

+

Array<{

+

src:string,

+

width?:Length,

+

height?:Length,

+

top?:Length,

+

left?:Length,

+

duration?:number

+

}>

[]

+

[]

是

+

是

设置图片帧信息集合。每一帧的帧信息包含图片路径、图片大小、图片位置和图片播放时长信息。详细说明如下：

-

src：图片路径，图片格式为svg，png和jpg。

-

width：图片宽度。

-

height：图片高度。

-

top：图片相对于组件左上角的纵向坐标。

-

left：图片相对于组件左上角的横向坐标。

-

duration：每一帧图片的播放时长，单位毫秒。

+

设置图片帧信息集合。每一帧的帧信息包含图片路径、图片大小、图片位置和图片播放时长信息。详细说明如下：

+

src：图片路径，图片格式为svg，png和jpg。

+

width：图片宽度。

+

height：图片高度。

+

top：图片相对于组件左上角的纵向坐标。

+

left：图片相对于组件左上角的横向坐标。

+

duration：每一帧图片的播放时长，单位毫秒。

state

+

state

AnimationStatus

+

AnimationStatus

Initial

+

Initial

否

+

否

默认为初始状态，用于控制播放状态。

+

默认为初始状态，用于控制播放状态。

duration

+

duration

number

+

number

1000

+

1000

否

+

否

单位为毫秒，默认时长为1000ms；duration为0时，不播放图片；值的改变只会在下一次循环开始时生效；当images中设置了单独的duration后，该属性设置无效。

+

单位为毫秒，默认时长为1000ms；duration为0时，不播放图片；值的改变只会在下一次循环开始时生效；当images中设置了单独的duration后，该属性设置无效。

reverse

+

reverse

boolean

+

boolean

false

+

false

否

+

否

设置播放顺序。false表示从第1张图片播放到最后1张图片； true表示从最后1张图片播放到第1张图片。

+

设置播放顺序。false表示从第1张图片播放到最后1张图片； true表示从最后1张图片播放到第1张图片。

fixedSize

+

fixedSize

boolean

+

boolean

true

+

true

否

+

否

设置图片大小是否固定为组件大小。 true表示图片大小与组件大小一致，此时设置图片的width 、height 、top 和left属性是无效的。false表示每一张图片的 width 、height 、top和left属性都要单独设置。

+

设置图片大小是否固定为组件大小。 true表示图片大小与组件大小一致，此时设置图片的width 、height 、top 和left属性是无效的。false表示每一张图片的 width 、height 、top和left属性都要单独设置。

preDecode

+

preDecode

number

+

number

0

+

0

否

+

否

是否启用预解码，默认值为0，即不启用预解码，如该值设为2，则播放当前页时会提前加载后面两张图片至缓存以提升性能。

+

是否启用预解码，默认值为0，即不启用预解码，如该值设为2，则播放当前页时会提前加载后面两张图片至缓存以提升性能。

fillMode

+

fillMode

FillMode

+

FillMode

Forwards

+

Forwards

否

+

否

设置动画开始前和结束后的状态，可选值参见FillMode说明。

+

设置动画开始前和结束后的状态，可选值参见FillMode说明。

iterations

+

iterations

number

+

number

1

+

1

否

+

否

默认播放一次，设置为-1时表示无限次播放。

+

默认播放一次，设置为-1时表示无限次播放。

名称

+ - - - - - - - - - @@ -164,31 +169,30 @@ ImageAnimator\(\) - FillMode枚举值说明 - -

名称

描述

+

描述

Initial

+

Initial

动画初始状态。

+

动画初始状态。

Running

+

Running

动画处于播放状态。

+

动画处于播放状态。

Paused

+

Paused

动画处于暂停状态。

+

动画处于暂停状态。

Stopped

+

Stopped

动画处于停止状态。

+

动画处于停止状态。

名称

+ - - - - - - - - - @@ -197,36 +201,35 @@ ImageAnimator\(\) ## 事件 - -

名称

描述

+

描述

None

+

None

播放完成后恢复初始状态。

+

播放完成后恢复初始状态。

Forwards

+

Forwards

播放完成后保持动画结束时的状态。

+

播放完成后保持动画结束时的状态。

Backwards

+

Backwards

在animation-delay所指定的一段时间内，在动画显示之前，应用开始属性值。

+

在animation-delay所指定的一段时间内，在动画显示之前，应用开始属性值。

Both

+

Both

向前和向后填充模式都被应用。

+

向前和向后填充模式都被应用。

名称

+ - - - - - - - - - - - diff --git a/zh-cn/application-dev/reference/arkui-ts/ts-basic-components-marquee.md b/zh-cn/application-dev/reference/arkui-ts/ts-basic-components-marquee.md new file mode 100644 index 0000000000000000000000000000000000000000..e946c18503add3dfaacee6cd62b139532947ed6a --- /dev/null +++ b/zh-cn/application-dev/reference/arkui-ts/ts-basic-components-marquee.md @@ -0,0 +1,170 @@ +# Marquee + +>![](../../public_sys-resources/icon-note.gif) **说明：** +>该组件从API Version 8开始支持。后续版本如有新增内容，则采用上角标单独标记该内容的起始版本。 + +跑马灯组件，用于滚动展示一段单行文本。 + +## 权限列表 + +无 + +## 子组件 + +无 + +## 接口 + +Marquee\(value: \{ start: boolean, step?: number, loop?: number, fromStart?: boolean, src: string \}\) + +- 参数 + +

名称

功能描述

+

功能描述

onStart() => void

+

onStart() => void

状态回调，动画开始播放时触发。

+

状态回调，动画开始播放时触发。

onPause() => void

+

onPause() => void

状态回调，动画暂停播放时触发。

+

状态回调，动画暂停播放时触发。

onRepeat() => void

+

onRepeat() => void

状态回调，动画重新播放时触发。

+

状态回调，动画重新播放时触发。

onCancel() => void

+

onCancel() => void

状态回调，动画取消播放时触发。

+

状态回调，动画取消播放时触发。

onFinish() => void

+

onFinish() => void

状态回调，动画播放完成时触发。

+

状态回调，动画播放完成时触发。
+ + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + +

参数名

+

参数类型

+

必填

+

默认值

+

参数描述

+

start

+

boolean

+

是

+

-

+

控制是否进入播放状态。

+

step

+

number

+

否

+

6

+

滚动动画文本滚动步长。

+

loop

+

number

+

否

+

-1

+

设置重复滚动的次数，小于等于零时无限循环。

+

fromStart

+

boolean

+

否

+

true

+

设置文本从头开始滚动或反向滚动。

+

src

+

string

+

是

+

-

+

需要滚动的文本。

+
+ + +## 事件 + + + + + + + + + + + + + + + +

名称

+

功能描述

+

onStart(callback: () => void)

+

开始滚动时触发回调。

+

onBounce(callback: () => void)

+

滚动到底时触发回调。

+

onFinish(callback: () => void)

+

滚动完成时触发回调。

+
+ +## 示例 + +``` +@Entry +@Component +struct MarqueeExample { + @State start: boolean = false + @State fromStart: boolean = true + @State step: number = 50 + @State loop: number = 3 + @State src: string = "Running Marquee starts rolling" + + build() { + Flex({ direction: FlexDirection.Column, alignItems: ItemAlign.Center, justifyContent: FlexAlign.Center }) { + Marquee({ + start: this.start, + step: this.step, + loop: this.loop, + fromStart: this.fromStart, + src: this.src + }) + .fontColor(Color.White) + .fontSize(50) + .allowScale(false) + .fontWeight(FontWeight.Bold) + .backgroundColor(Color.Black) + .margin({bottom:40}) + .onStart(() => { + console.log('Marquee animation complete onStart') + }) + .onBounce(() => { + console.log('Marquee animation complete onBounce') + }) + .onFinish(() => { + console.log('Marquee animation complete onFinish') + }) + Button('start') + .onClick(() => { + this.start = true + }) + .width(200) + .height(60) + .margin({bottom:20}) + } + .width('100%') + .height('100%') + } +} +``` + +![](figures/GIF-1.gif) + diff --git a/zh-cn/application-dev/reference/arkui-ts/ts-basic-components-progress.md b/zh-cn/application-dev/reference/arkui-ts/ts-basic-components-progress.md index efde2b6fc9dfffb4221555839a26d4c6ab8ee459..3eeff7306216394cb00baaea76a7d6e5f7456138 100644 --- a/zh-cn/application-dev/reference/arkui-ts/ts-basic-components-progress.md +++ b/zh-cn/application-dev/reference/arkui-ts/ts-basic-components-progress.md @@ -1,35 +1,13 @@ -# Progress +# Progress + +>![](../../public_sys-resources/icon-note.gif) **说明：** +>该组件从API Version 7开始支持。后续版本如有新增内容，则采用上角标单独标记该内容的起始版本。 进度条，用于显示内容加载或操作处理进度。 -## 支持设备 +## 权限列表 - - - - - - - - - - - - - - - -

手机

-

平板

-

车机

-

智慧屏

-

智能穿戴

-

支持

-

支持

-

支持

-

不支持

-

不支持

-
+无 ## 子组件 @@ -39,54 +17,53 @@ Progress\(value: \{value: number, total?: number, style?: ProgressStyle\}\) -创建有明确进度的进度条。 +创建指定进度的进度条。 - 参数 - -

参数名

+ - - - - - - - - - - - - - - - - - - - @@ -96,15 +73,15 @@ Progress\(value: \{value: number, total?: number, style?: ProgressStyle\}\) - ProgressStyle枚举说明 -

参数名

参数类型

+

参数类型

必填

+

必填

默认值

+

默认值

参数描述

+

参数描述

value

+

value

number

+

number

是

+

是

-

+

-

指定当前进度值。

+

指定当前进度值。

total

+

total

number

+

number

否

+

否

100

+

100

指定进度总长。

+

指定进度总长。

style

+

style

ProgressStyle

+

ProgressStyle

否

+

否

Linear

+

Linear

指定进度条样式。

+

指定进度条样式。

名称

+ - - - @@ -113,33 +90,32 @@ Progress\(value: \{value: number, total?: number, style?: ProgressStyle\}\) ## 属性 - -

名称

描述

+

描述

Linear

+

Linear

线性进度条样式。

+

线性进度条样式。

名称

+ - - - - - - - - - - - @@ -163,5 +139,5 @@ struct ProgressExample { } ``` -![](figures/progress-15.png) +![](figures/progress.png) diff --git a/zh-cn/application-dev/reference/arkui-ts/ts-basic-components-qrcode.md b/zh-cn/application-dev/reference/arkui-ts/ts-basic-components-qrcode.md index 9a387f1d6fce3941cf9ba80fede01236d65b0079..72456b91c63855e5553b446346c003aca8422df6 100644 --- a/zh-cn/application-dev/reference/arkui-ts/ts-basic-components-qrcode.md +++ b/zh-cn/application-dev/reference/arkui-ts/ts-basic-components-qrcode.md @@ -1,8 +1,11 @@ -# QRCode +# QRCode + +>![](../../public_sys-resources/icon-note.gif) **说明：** +>该组件从API Version 7开始支持。后续版本如有新增内容，则采用上角标单独标记该内容的起始版本。 显示二维码信息。 -## 权限类别 +## 权限列表 无 @@ -16,28 +19,27 @@ QRCode\(value: string\) - 参数 - -

名称

参数类型

+

参数类型

默认值

+

默认值

描述

+

描述

value

+

value

number

+

number

-

+

-

设置当前进度值。

+

设置当前进度值。

color

+

color

Color

+

Color

-

+

-

设置进度条前景色。

+

设置进度条前景色。

参数名

+ - - - - - - - - - @@ -46,24 +48,23 @@ QRCode\(value: string\) ## 属性 - -

参数名

参数类型

+

参数类型

必填

+

必填

默认值

+

默认值

参数描述

+

参数描述

value

+

value

string

+

string

是

+

是

-

+

-

二维码内容字符串。

+

二维码内容字符串。

名称

+ - - - - - - - diff --git a/zh-cn/application-dev/reference/arkui-ts/ts-basic-components-rating.md b/zh-cn/application-dev/reference/arkui-ts/ts-basic-components-rating.md index c1945d5168e597d28d24e381fc6c0096525deb82..c9cfb76932c3741f8f13ed73dfc125ffdde56cd3 100644 --- a/zh-cn/application-dev/reference/arkui-ts/ts-basic-components-rating.md +++ b/zh-cn/application-dev/reference/arkui-ts/ts-basic-components-rating.md @@ -1,7 +1,14 @@ -# Rating +# Rating + +>![](../../public_sys-resources/icon-note.gif) **说明：** +>该组件从API Version 7开始支持。后续版本如有新增内容，则采用上角标单独标记该内容的起始版本。 评分条组件。 +## 权限列表 + +无 + ## 子组件 无 @@ -12,39 +19,38 @@ Rating\(options?: \{ rating: number, indicator?: boolean \}\) - 参数 - -

名称

参数类型

+

参数类型

默认值

+

默认值

描述

+

描述

color

+

color

Color

+

Color

Black

+

Black

设置二维码颜色。

+

设置二维码颜色。

参数名

+ - - - - - - - - - - - - - - @@ -53,48 +59,47 @@ Rating\(options?: \{ rating: number, indicator?: boolean \}\) ## 属性 - -

参数名

参数类型

+

参数类型

必填

+

必填

默认值

+

默认值

参数描述

+

参数描述

rating

+

rating

number

+

number

是

+

是

0

+

0

设置并接收评分值。

+

设置并接收评分值。

indicator

+

indicator

boolean

+

boolean

否

+

否

false

+

false

仅作为指示器使用，不可操作。

+

仅作为指示器使用，不可操作。

名称

+ - - - - - - - - - - - - - - - @@ -102,16 +107,15 @@ Rating\(options?: \{ rating: number, indicator?: boolean \}\) ## 事件 - -

名称

参数类型

+

参数类型

默认值

+

默认值

描述

+

描述

stars

+

stars

number

+

number

5

+

5

设置评星总数。

+

设置评星总数。

stepSize

+

stepSize

number

+

number

0.5

+

0.5

操作评级的步长。

+

操作评级的步长。

starStyle

+

starStyle

{

-

backgroundUri: string,

-

foregroundUri: string,

-

secondaryUri?: string

-

}

+

{

+

backgroundUri: string,

+

foregroundUri: string,

+

secondaryUri?: string

+

}

-

+

-

backgroundSrc：未选中的星级的图片链接，可由用户自定义或使用系统默认图片，仅支持本地。

-

foregroundSrc：选中的星级的图片路径，可由用户自定义或使用系统默认图片，仅支持本地。

-

secondarySrc：部分选中的星级的图片路径，可由用户自定义或使用系统默认图片，仅支持本地。

+

backgroundSrc：未选中的星级的图片链接，可由用户自定义或使用系统默认图片，仅支持本地。

+

foregroundSrc：选中的星级的图片路径，可由用户自定义或使用系统默认图片，仅支持本地。

+

secondarySrc：部分选中的星级的图片路径，可由用户自定义或使用系统默认图片，仅支持本地。

名称

+ - - - diff --git a/zh-cn/application-dev/reference/arkui-ts/ts-basic-components-slider.md b/zh-cn/application-dev/reference/arkui-ts/ts-basic-components-slider.md index 7565735c249d870abfebeb474a5206d4e5c5c200..ca499e7c50458ee8ecda7688e1d3e4cd9ab87644 100644 --- a/zh-cn/application-dev/reference/arkui-ts/ts-basic-components-slider.md +++ b/zh-cn/application-dev/reference/arkui-ts/ts-basic-components-slider.md @@ -1,83 +1,100 @@ -# Slider +# Slider + +>![](../../public_sys-resources/icon-note.gif) **说明：** +>该组件从API Version 7开始支持。后续版本如有新增内容，则采用上角标单独标记该内容的起始版本。 滑动条组件，用来快速调节设置值，如音量、亮度等。 +## 权限列表 + +无 + ## 子组件 无 ## 接口 -Slider\(value:\{value?: number, min?: number, max?: number, step?: number, style?: SliderStyle\}\) +Slider\(value:\{value?: number, min?: number, max?: number, step?: number, style?: SliderStyle, direction?: Axis\}\) - 参数 - -

名称

功能描述

+

功能描述

onChange(callback:(value: number) => void)

+

onChange(callback:(value: number) => void)

操作评分条的评星发生改变时触发该回调。

+

操作评分条的评星发生改变时触发该回调。

参数名

+ - - - - - + + + + - + + - - - - - - - - - - - - - - - - - - - - - - - @@ -85,21 +102,20 @@ Slider\(value:\{value?: number, min?: number, max?: number, step?: number, style - SliderStyle枚举说明 - -

参数名

参数类型

+

参数类型

必填

+

必填

默认值

+

默认值

参数描述

+

参数描述

value

+

value

+

number

+

否

+

0

+

当前进度值。

number

+

min

+

number

否

+

否

0

+

0

当前进度值。

+

设置最小值。

min

+

max

number

+

number

否

+

否

0

+

100

设置最小值。

+

设置最大值。

max

+

step

number

+

number

否

+

否

100

+

1

设置最大值

+

设置Slider滑动跳动值，当设置相应的step时，Slider为间歇滑动。

step

+

style

number

+

SliderStyle

否

+

否

1

+

SliderStyle.OutSet

设置Slider滑动跳动值，当设置相应的step时，Slider为间歇滑动。

+

设置Slider的滑块样式。

style

+

direction8+

SliderStyle

+

Axis

否

+

否

Outset

+

Axis.Horizontal

设置Slider的滑块样式。

+

设置滑动条滑动方向为水平或竖直方向。

名称

+ - - - - - @@ -108,60 +124,61 @@ Slider\(value:\{value?: number, min?: number, max?: number, step?: number, style ## 属性 - -

名称

描述

+

描述

OutSet

+

OutSet

滑块在滑轨上。

+

滑块在滑轨上。

InSet

+

InSet

滑块在滑轨内。

+

滑块在滑轨内。

名称

+不支持触摸热区设置。 + + - - - - - - - - - - - - - - - - - - - - - - - @@ -171,18 +188,17 @@ Slider\(value:\{value?: number, min?: number, max?: number, step?: number, style 通用事件仅支持：OnAppear，OnDisAppear。 - -

名称

参数类型

+

参数类型

默认值

+

默认值

描述

+

描述

blockColor

+

blockColor

Color

+

Color

-

+

-

设置滑块的颜色。

+

设置滑块的颜色。

trackColor

+

trackColor

Color

+

Color

-

+

-

设置滑轨的背景颜色。

+

设置滑轨的背景颜色。

selectedColor

+

selectedColor

Color

+

Color

-

+

-

设置滑轨的已滑动颜色。

+

设置滑轨的已滑动颜色。

showSteps

+

showSteps

boolean

+

boolean

false

+

false

设置当前是否显示步长刻度值。

+

设置当前是否显示步长刻度值。

showTips

+

showTips

boolean

+

boolean

false

+

false

设置滑动时是否显示气泡提示百分比。

+

设置滑动时是否显示气泡提示百分比。

名称

+ - - - @@ -190,26 +206,25 @@ Slider\(value:\{value?: number, min?: number, max?: number, step?: number, style - SliderChangeMode枚举说明 - -

名称

功能描述

+

功能描述

onChange(callback: (value: number, mode: SliderChangeMode) => void）

+

onChange(callback: (value: number, mode: SliderChangeMode) => void）

Slider滑动时触发事件回调。

-

value：当前进度值。

-

mode：拖动状态。

+

Slider滑动时触发事件回调。

+

value：当前进度值。

+

mode：拖动状态。

名称

+ - - - - - - - @@ -224,6 +239,8 @@ Slider\(value:\{value?: number, min?: number, max?: number, step?: number, style struct SliderExample { @State outSetValue: number = 40 @State inSetValue: number = 40 + @State outVerticalSetValue: number = 40 + @State inVerticalSetValue: number = 40 build() { Column({ space: 5 }) { @@ -271,10 +288,57 @@ struct SliderExample { Text(this.inSetValue.toFixed(0)).fontSize(16) } .width('80%') + + Row() { + Column() { + Text('slider out direction set').fontSize(9).fontColor(0xCCCCCC).width('50%') + Slider({ + value: this.outVerticalSetValue, + min: 0, + max: 100, + step: 1, + style: SliderStyle.OutSet, + direction: Axis.Vertical + }) + .blockColor(Color.Blue) + .trackColor(Color.Gray) + .selectedColor(Color.Blue) + .showSteps(true) + .showTips(true) + .onChange((value: number, mode: SliderChangeMode) => { + this.outVerticalSetValue = value + console.info('value:' + value + 'mode:' + mode.toString()) + }) + Text(this.outVerticalSetValue.toFixed(0)).fontSize(16) + }.width('50%').height(300) + + Column() { + Text('slider in direction set').fontSize(9).fontColor(0xCCCCCC).width('50%') + Slider({ + value: this.inVerticalSetValue, + min: 0, + max: 100, + step: 1, + style: SliderStyle.InSet, + direction: Axis.Vertical + }) + .blockColor(0xCCCCCC) + .trackColor(Color.Black) + .selectedColor(0xCCCCCC) + .showSteps(false) + .showTips(false) + .onChange((value: number, mode: SliderChangeMode) => { + this.inVerticalSetValue = value + console.info('value:' + value + 'mode:' + mode.toString()) + }) + Text(this.inVerticalSetValue.toFixed(0)).fontSize(16) + }.width('50%').height(300) + } + }.width('100%').margin({ top: 5 }) } } ``` -![](figures/sider.gif) +![](figures/slider.gif) diff --git a/zh-cn/application-dev/reference/arkui-ts/ts-basic-components-span.md b/zh-cn/application-dev/reference/arkui-ts/ts-basic-components-span.md index 37f9f9b5acbdc86f762fca41c4defe440c3cd3a7..4549c5fb494c524cec0062ae9f9916cade4e6d5f 100644 --- a/zh-cn/application-dev/reference/arkui-ts/ts-basic-components-span.md +++ b/zh-cn/application-dev/reference/arkui-ts/ts-basic-components-span.md @@ -1,4 +1,7 @@ -# Span +# Span + +>![](../../public_sys-resources/icon-note.gif) **说明：** +>该组件从API Version 7开始支持。后续版本如有新增内容，则采用上角标单独标记该内容的起始版本。 文本段落，只能作为Text子组件，呈现一段文本信息。 @@ -16,28 +19,27 @@ Span\(content: string\) - 参数 - -

名称

描述

+

描述

Begin

+

Begin

用户开始拖动滑块。

+

用户开始拖动滑块。

Moving

+

Moving

用户拖动滑块中。

+

用户拖动滑块中。

End

+

End

用户结束拖动滑块。

+

用户结束拖动滑块。

参数名

+ - - - - - - - - - @@ -46,40 +48,39 @@ Span\(content: string\) ## 属性 -通用属性方法仅支持通用文本样式。 +通用属性方法仅支持通用文本样式，不支持触摸热区设置。 - -

参数名

参数类型

+

参数类型

必填

+

必填

默认值

+

默认值

参数描述

+

参数描述

content

+

content

string

+

string

是

+

是

-

+

-

文本内容。

+

文本内容。

名称

+ - - - - - - - - - - - @@ -89,6 +90,9 @@ Span\(content: string\) 通用事件仅支持点击事件。 +>![](../../public_sys-resources/icon-note.gif) **说明：** +>由于Span组件无尺寸信息，因此点击事件返回的ClickEvent对象的target属性无效。 + ## 示例 ``` diff --git a/zh-cn/application-dev/reference/arkui-ts/ts-basic-components-text.md b/zh-cn/application-dev/reference/arkui-ts/ts-basic-components-text.md index 3740bbec0f17203a9ec6da90513200492750c637..69adcaf5dfb8ca1774bf18ae3bc6f0be3bf216b5 100644 --- a/zh-cn/application-dev/reference/arkui-ts/ts-basic-components-text.md +++ b/zh-cn/application-dev/reference/arkui-ts/ts-basic-components-text.md @@ -1,4 +1,7 @@ -# Text +# Text + +>![](../../public_sys-resources/icon-note.gif) **说明：** +>该组件从API Version 7开始支持。后续版本如有新增内容，则采用上角标单独标记该内容的起始版本。 文本，用于呈现一段信息。 @@ -16,28 +19,27 @@ Text\(content?: string\) - 参数 - -

名称

参数类型

+

参数类型

默认值

+

默认值

描述

+

描述

decoration

+

decoration

{

-

type: TextDecorationType,

-

color?: Color

-

}

+

{

+

type: TextDecorationType,

+

color?: Color

+

}

{

-

type: TextDecorationType.None

-

}

+

{

+

type: TextDecorationType.None

+

}

设置文本装饰线样式及其颜色。

+

设置文本装饰线样式及其颜色。

textCase

+

textCase

TextCase

+

TextCase

Normal

+

Normal

设置文本大小写。

+

设置文本大小写。

参数名

+ - - - - - - - - - @@ -46,84 +48,83 @@ Text\(content?: string\) ## 属性 - -

参数名

参数类型

+

参数类型

必填

+

必填

默认值

+

默认值

参数描述

+

参数描述

content

+

content

string

+

string

否

+

否

''

+

''

文本内容，包含子组件Span时不生效，显示Span内容。

+

文本内容，包含子组件Span时不生效，显示Span内容。

名称

+ - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - @@ -131,26 +132,25 @@ Text\(content?: string\) - TextAlign枚举说明 - -

名称

参数类型

+

参数类型

默认值

+

默认值

描述

+

描述

textAlign

+

textAlign

TextAlign

+

TextAlign

Start

+

Start

设置多行文本的文本对齐方式。

+

设置多行文本的文本对齐方式。

textOverflow

+

textOverflow

{overflow: TextOverflow}

+

{overflow: TextOverflow}

{overflow: TextOverflow.Clip}

+

{overflow: TextOverflow.Clip}

设置文本超长时的显示方式。

+

设置文本超长时的显示方式。

maxLines

+

maxLines

number

+

number

Infinity

+

Infinity

设置文本的最大行数。

+

设置文本的最大行数。

lineHeight

+

lineHeight

Length

+

Length

-

+

-

设置文本的文本行高，设置值不大于0时，不限制文本行高，自适应字体大小，Length为number类型时单位为fp。

+

设置文本的文本行高，设置值不大于0时，不限制文本行高，自适应字体大小，Length为number类型时单位为fp。

decoration

+

decoration

{

-

type: TextDecorationType,

-

color?: Color

-

}

+

{

+

type: TextDecorationType,

+

color?: Color

+

}

{

-

type: TextDecorationType.None,

-

color：Color.Black

-

}

+

{

+

type: TextDecorationType.None,

+

color：Color.Black

+

}

设置文本装饰线样式及其颜色。

+

设置文本装饰线样式及其颜色。

baselineOffset

+

baselineOffset

Length

+

Length

-

+

-

设置文本基线的偏移量。

+

设置文本基线的偏移量。

textCase

+

textCase

TextCase

+

TextCase

Normal

+

Normal

设置文本大小写。

+

设置文本大小写。

名称

+ - - - - - - - @@ -159,26 +159,25 @@ Text\(content?: string\) - TextOverflow枚举说明 - -

名称

描述

+

描述

Center

+

Center

文本居中对齐。

+

文本居中对齐。

Start

+

Start

根据文字书写相同的方向对齐。

+

根据文字书写相同的方向对齐。

End

+

End

根据文字书写相反的方向对齐。

+

根据文字书写相反的方向对齐。

名称

+ - - - - - - - @@ -187,31 +186,30 @@ Text\(content?: string\) - TextDecorationType枚举说明 - -

名称

描述

+

描述

Clip

+

Clip

文本超长时进行裁剪显示。

+

文本超长时进行裁剪显示。

Ellipsis

+

Ellipsis

文本超长时显示不下的文本用省略号代替。

+

文本超长时显示不下的文本用省略号代替。

None

+

None

文本超长时不进行裁剪。

+

文本超长时不进行裁剪。

名称

+ - - - - - - - - - @@ -220,26 +218,25 @@ Text\(content?: string\) - TextCase枚举说明 - -

名称

描述

+

描述

Underline

+

Underline

文字下划线修饰。

+

文字下划线修饰。

LineThrough

+

LineThrough

穿过文本的修饰线。

+

穿过文本的修饰线。

Overline

+

Overline

文字上划线修饰。

+

文字上划线修饰。

None

+

None

不使用文本装饰线。

+

不使用文本装饰线。

名称

+ - - - - - - - diff --git a/zh-cn/application-dev/reference/arkui-ts/ts-basic-components-textarea.md b/zh-cn/application-dev/reference/arkui-ts/ts-basic-components-textarea.md new file mode 100644 index 0000000000000000000000000000000000000000..5c03119227bc0987d66791546aa6754913da6f4c --- /dev/null +++ b/zh-cn/application-dev/reference/arkui-ts/ts-basic-components-textarea.md @@ -0,0 +1,183 @@ +# TextArea + +>![](../../public_sys-resources/icon-note.gif) **说明：** +>该组件从API Version 7开始支持。后续版本如有新增内容，则采用上角标单独标记该内容的起始版本。 + +提供多行文本输入组件。 + +## 权限列表 + +无 + +## 子组件 + +无 + +## 接口 + +TextArea\(value?: \{ placeholder?: string \}\) + +- 参数 + +

名称

描述

+

描述

Normal

+

Normal

保持文本原有大小写。

+

保持文本原有大小写。

LowerCase

+

LowerCase

文本采用全小写。

+

文本采用全小写。

UpperCase

+

UpperCase

文本采用全大写。

+

文本采用全大写。
+ + + + + + + + + + + + + +

参数名

+

参数类型

+

必填

+

默认值

+

参数描述

+

placeholder

+

string

+

否

+

-

+

无输入时的提示文本。

+
+ + +## 属性 + +除支持[通用属性](ts-universal-attributes.md)外，还支持以下属性： + + + + + + + + + + + + + + + + + + + + + + + + + + + + +

名称

+

参数类型

+

默认值

+

描述

+

placeholderColor

+

Color

+

-

+

设置placeholder文本颜色。

+

placeholderFont

+

{

+

size?: number,

+

weight?:number | FontWeight,

+

family?: string,

+

style?: FontStyle

+

}

+

-

+

设置placeholder文本样式：

+
  • size: 设置文本尺寸，Length为number类型时，使用fp单位。
  • weight: 设置文本的字体粗细，number类型取值[100, 900]，取值间隔为100，默认为400，取值越大，字体越粗。
  • family: 设置文本的字体列表。使用多个字体，使用','进行分割，优先级按顺序生效。例如：'Arial, sans-serif'。
  • style: 设置文本的字体样式。
+

textAlign

+

TextAlign

+

TextAlign.Start

+

设置文本水平对齐方式。

+

caretColor

+

Color

+

-

+

设置输入框光标颜色。

+
+ +- TextAlign枚举说明 + + + + + + + + + + + + + + + +

名称

+

描述

+

Start

+

水平对齐首部。

+

Center

+

水平居中对齐。

+

End

+

水平对齐尾部。

+
+ + +## 事件 + + + + + + + + + + +

名称

+

功能描述

+

onChange(callback: (value: string) => void)

+

输入发生变化时，触发回调。

+
+ +## 示例 + +``` +@Entry +@Component +struct TextAreaExample { + @State text: string = '' + + build() { + Column() { + TextArea({ placeholder: 'input your word' }) + .placeholderColor("rgb(0,0,225)") + .placeholderFont({ size: 30, weight: 100, family: 'cursive', style: FontStyle.Italic }) + .textAlign(TextAlign.Center) + .caretColor(Color.Blue) + .height(50) + .fontSize(30) + .fontWeight(FontWeight.Bold) + .fontFamily("sans-serif") + .fontStyle(FontStyle.Normal) + .fontColor(Color.Red) + .onChange((value: string) => { + this.text = value + }) + Text(this.text).width('90%') + } + } +} +``` + +![](figures/textarea1.gif) + diff --git a/zh-cn/application-dev/reference/arkui-ts/ts-basic-components-textinput.md b/zh-cn/application-dev/reference/arkui-ts/ts-basic-components-textinput.md new file mode 100644 index 0000000000000000000000000000000000000000..bedd6d3f8ddd86440ef4fe037c6d4961c07637a5 --- /dev/null +++ b/zh-cn/application-dev/reference/arkui-ts/ts-basic-components-textinput.md @@ -0,0 +1,263 @@ +# TextInput + +>![](../../public_sys-resources/icon-note.gif) **说明：** +>该组件从API Version 7开始支持。后续版本如有新增内容，则采用上角标单独标记该内容的起始版本。 + +提供单行文本输入组件。 + +## 权限列表 + +无 + +## 子组件 + +无 + +## 接口 + +TextInput\(value?: \{ placeholder?: string \}\) + +- 参数 + + + + + + + + + + + + + + + +

参数名

+

参数类型

+

必填

+

默认值

+

参数描述

+

placeholder

+

string

+

否

+

-

+

无输入时的提示文本。

+
+ + +## 属性 + +除支持[通用属性](ts-universal-attributes.md)外，还支持以下属性： + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + +

名称

+

参数类型

+

默认值

+

描述

+

type

+

InputType

+

InputType.Normal

+

设置输入框类型。

+

placeholderColor

+

Color

+

-

+

设置placeholder颜色。

+

placeholderFont

+

{

+

size?: Length,

+

weight?: number | FontWeight,

+

family?: string,

+

style?: FontStyle

+

}

+

-

+

设置placeholder文本样式：

+
  • size: 设置文本尺寸，Length为number类型时，使用fp单位。
  • weight: 设置文本的字体粗细，number类型取值[100, 900]，取值间隔为100，默认为400，取值越大，字体越粗。
  • family: 设置文本的字体列表。使用多个字体，使用','进行分割，优先级按顺序生效。例如：'Arial, sans-serif'。
  • style: 设置文本的字体样式。
+

enterKeyType

+

EnterKeyType

+

EnterKeyType.Done

+

设置输入法回车键类型。

+

caretColor

+

Color

+

-

+

设置输入框光标颜色。

+

maxLength

+

number

+

-

+

设置文本的最大输入字符数。

+
+ +- EnterKeyType枚举说明 + + + + + + + + + + + + + + + + + + + + + +

名称

+

描述

+

Go

+

显示Go文本。

+

Search

+

显示为搜索样式。

+

Send

+

显示为发送样式。

+

Next

+

显示为下一个样式。

+

Done

+

标准样式。

+
+ + +- InputType枚举说明 + + + + + + + + + + + + + + + + + + +

名称

+

描述

+

Normal

+

基本输入模式。

+

Password

+

密码输入模式。

+

Email

+

e-mail地址输入模式。

+

Number

+

纯数字输入模式。

+
+ + +## 事件 + + + + + + + + + + + + + + + +

名称

+

功能描述

+

onChange(value: string) => void

+

输入发生变化时，触发回调。

+

onSubmit(callback: (enterKey: EnterKeyType) => void)

+

回车键或者软键盘回车键触发该回调，参数为当前软键盘回车键类型。

+

onEditChanged(callback: (isEditing: boolean) => void)

+

输入状态变化时，触发回调。

+
+ +## 示例 + +``` +@Entry +@Component +struct TextInputTest { + @State text: string = '' + @State text1: string = '' + @State text2: string = '' + build() { + Column() { + TextInput({ placeholder: 'input your word' }) + .type(InputType.Normal) + .placeholderColor(Color.Blue) + .placeholderFont({ size: 40, weight: FontWeight.Normal, family: "sans-serif", style: FontStyle.Normal }) + .enterKeyType(EnterKeyType.Next) + .caretColor(Color.Green) + .height(60) + .fontSize(30) + .fontWeight(FontWeight.Bold) + .fontFamily("cursive") + .fontStyle(FontStyle.Italic) + .fontColor(Color.Red) + .maxLength(20) + .onChange((value: string) => { + this.text = value + }) + .onSubmit((enterKey) => { + this.text1 = 'onSubmit' + }) + .onEditChanged((isEditing) => { + this.text2 = 'onEditChanged' + }) + Text(this.text) + Text(this.text1) + Text(this.text2) + } + } +} +``` + +![](figures/textinput1.gif) + diff --git a/zh-cn/application-dev/reference/arkui-ts/ts-basic-components-toggle.md b/zh-cn/application-dev/reference/arkui-ts/ts-basic-components-toggle.md new file mode 100644 index 0000000000000000000000000000000000000000..5250d9065173652651cc1aa00953d093bd78f6c8 --- /dev/null +++ b/zh-cn/application-dev/reference/arkui-ts/ts-basic-components-toggle.md @@ -0,0 +1,204 @@ +# Toggle + +>![](../../public_sys-resources/icon-note.gif) **说明：** +>该组件从API Version 8开始支持。后续版本如有新增内容，则采用上角标单独标记该内容的起始版本。 + +## 权限列表 + +无 + +## 子组件 + +无 + +## 接口 + +Toggle\(options: \{ type: ToggleType, isOn?: boolean \}\) + +- 参数 + + + + + + + + + + + + + + + + + + + + + +

参数名

+

参数类型

+

必填

+

默认值

+

参数描述

+

type

+

ToggleType

+

是

+

-

+

创建相应的开关状态组件。

+

isOn

+

boolean

+

否

+

false

+

设置开关状态组件初始化状态。

+
说明：

在创建组件时不设置isOn，组件复用时可保持选中状态；如设置isOn初始值，则需要在通过事件方法记录选中状态已达到组件复用时保持选中状态。

+
+
+ + +- ToggleType枚举说明 + + + + + + + + + + + + + + + +

名称

+

描述

+

Checkbox

+

提供单选框样式，子组件设置文本不生效，如需文本设置，可将Text和当前组件放入布局组件中。

+

Button

+

提供状态按钮样式，如果有文本设置，则相应的文本内容会显示在按钮内部。

+

Switch

+

提供开关样式，子组件设置文本不生效，如需文本设置，可将Text和当前组件放入布局组件中。

+
+ + +## 属性 + + + + + + + + + + + + + + + + + + +

名称

+

参数

+

默认值

+

参数描述

+

selectedColor

+

Color

+

-

+

设置组件打开状态的背景颜色。

+

switchPointColor

+

Color

+

-

+

设置Switch类型的圆形滑块颜色。

+
说明：

仅对type为ToggleType.Switch生效。

+
+
+ +## 事件 + + + + + + + + + +

名称

+

功能描述

+

onChange(callback: (isOn: boolean) => void)

+

开关状态切换时触发该事件。

+
+ +## 示例 + +``` +@Entry +@Component +struct ToggleExample { + build() { + Column({ space: 10 }) { + Text('type: Switch').fontSize(12).fontColor(0xcccccc).width('90%') + Flex({ justifyContent: FlexAlign.SpaceEvenly, alignItems: ItemAlign.Center }) { + Toggle({ type: ToggleType.Switch, isOn: false }) + .selectedColor(0xed6f21) + .switchPointColor(0xe5ffffff) + .onChange((isOn: boolean) => { + console.info('Component status:' + isOn) + }) + + Toggle({ type: ToggleType.Switch, isOn: true }) + .selectedColor(0x39a2db) + .switchPointColor(0xe5ffffff) + .onChange((isOn: boolean) => { + console.info('Component status:' + isOn) + }) + } + + Text('type: Checkbox').fontSize(12).fontColor(0xcccccc).width('90%') + Flex({ justifyContent: FlexAlign.SpaceEvenly, alignItems: ItemAlign.Center }) { + Toggle({ type: ToggleType.Checkbox, isOn: false }) + .size({ width: 28, height: 28 }) + .selectedColor(0xed6f21) + .onChange((isOn: boolean) => { + console.info('Component status:' + isOn) + }) + + Toggle({ type: ToggleType.Checkbox, isOn: true }) + .size({ width: 28, height: 28 }) + .selectedColor(0x39a2db) + .onChange((isOn: boolean) => { + console.info('Component status:' + isOn) + }) + } + + Text('type: Button').fontSize(12).fontColor(0xcccccc).width('90%') + Flex({ justifyContent: FlexAlign.SpaceEvenly, alignItems: ItemAlign.Center }) { + Toggle({ type: ToggleType.Button, isOn: false }) { + Text('status button').padding({ left: 12, right: 12 }) + } + .selectedColor(0xed6f21) + .onChange((isOn: boolean) => { + console.info('Component status:' + isOn) + }) + + Toggle({ type: ToggleType.Button, isOn: true }) { + Text('status button').padding({ left: 12, right: 12 }) + } + .selectedColor(0x39a2db) + .onChange((isOn: boolean) => { + console.info('Component status:' + isOn) + }) + } + }.width('100%').padding(24) + } +} +``` + +![](figures/toggle.gif) + diff --git a/zh-cn/application-dev/reference/arkui-ts/ts-basic-components.md b/zh-cn/application-dev/reference/arkui-ts/ts-basic-components.md index 07630c3249e75d41fcac76b8ea174a42f7b5706a..e41757c9660744647ab17a30e88c399f32508b11 100644 --- a/zh-cn/application-dev/reference/arkui-ts/ts-basic-components.md +++ b/zh-cn/application-dev/reference/arkui-ts/ts-basic-components.md @@ -1,4 +1,4 @@ -# 基础组件 +# 基础组件 - **[Blank](ts-basic-components-blank.md)** @@ -8,10 +8,14 @@ - **[Divider](ts-basic-components-divider.md)** +- **[Gauge](ts-basic-components-gauge.md)** + - **[Image](ts-basic-components-image.md)** - **[ImageAnimator](ts-basic-components-imageanimator.md)** +- **[Marquee](ts-basic-components-marquee.md)** + - **[Progress](ts-basic-components-progress.md)** - **[QRCode](ts-basic-components-qrcode.md)** @@ -24,4 +28,10 @@ - **[Text](ts-basic-components-text.md)** +- **[TextArea](ts-basic-components-textarea.md)** + +- **[TextInput](ts-basic-components-textinput.md)** + +- **[Toggle](ts-basic-components-toggle.md)** + diff --git a/zh-cn/application-dev/reference/arkui-ts/ts-basic-gestures-longpressgesture.md b/zh-cn/application-dev/reference/arkui-ts/ts-basic-gestures-longpressgesture.md index 17348946ded3ae8477ebcde4d56a619d68f612f5..7a81e51f43167ccefd770669cda7fcb58b3b014b 100644 --- a/zh-cn/application-dev/reference/arkui-ts/ts-basic-gestures-longpressgesture.md +++ b/zh-cn/application-dev/reference/arkui-ts/ts-basic-gestures-longpressgesture.md @@ -1,4 +1,11 @@ -# LongPressGesture +# LongPressGesture + +>![](../../public_sys-resources/icon-note.gif) **说明：** +>从API Version 7开始支持。后续版本如有新增内容，则采用上角标单独标记该内容的起始版本。 + +## 权限列表 + +无 ## 接口 @@ -6,50 +13,49 @@ LongPressGesture\(options?: \{ fingers?: number, repeat?: boolean, duration?: nu - 参数 - -

参数名称

+ - - - - - - - - - - - - - - - - - - - @@ -58,31 +64,53 @@ LongPressGesture\(options?: \{ fingers?: number, repeat?: boolean, duration?: nu ## 事件 - -

参数名称

参数类型

+

参数类型

必填

+

必填

默认值

+

默认值

参数描述

+

参数描述

fingers

+

fingers

number

+

number

否

+

否

1

+

1

触发长按的最少手指数，最小为1指， 最大取值为10指。

+

触发长按的最少手指数，最小为1指， 最大取值为10指。

repeat

+

repeat

boolean

+

boolean

否

+

否

false

+

false

是否连续触发事件回调。

+

是否连续触发事件回调。

duration

+

duration

number

+

number

否

+

否

500

+

500

最小触发长按的时间，单位为毫秒（ms）。

+

最小触发长按的时间，单位为毫秒（ms）。

名称

+ - - - - - - -

名称

功能描述

+

功能描述

onAction((event?: GestureEvent) => void)

+

onAction((event?: LongPressGestureEvent) => void)

LongPress手势识别成功回调。

+

LongPress手势识别成功回调。

onActionEnd((event?: GestureEvent) => void)

+

onActionEnd((event?: LongPressGestureEvent) => void)

LongPress手势识别成功，手指抬起后触发回调。

+

LongPress手势识别成功，手指抬起后触发回调。

onActionCancel(event: () => void)

+

onActionCancel(event: () => void)

LongPress手势识别成功，接收到触摸取消事件触发回调。

+

LongPress手势识别成功，接收到触摸取消事件触发回调。
+- LongPressGestureEvent类型说明8+ + + 继承自[GestureEvent](ts-gesture-settings.md#table290mcpsimp)类型。 + + + + + + + + + + + +

属性名称

+

属性类型

+

描述

+

repeat

+

boolean

+

事件是否为重复触发事件。

+
+ + ## 示例 ``` @@ -99,7 +127,7 @@ struct LongPressGestureExample { .gesture( LongPressGesture({ repeat: true }) //长按动作存在会连续触发 - .onAction((event: GestureEvent) => { + .onAction((event: LongPressGestureEvent) => { if (event.repeat) { this.count++ } }) //长按动作一结束触发 diff --git a/zh-cn/application-dev/reference/arkui-ts/ts-basic-gestures-pangesture.md b/zh-cn/application-dev/reference/arkui-ts/ts-basic-gestures-pangesture.md index 3570dc7a224ca4514dd2e4e692b3b9a409c6d430..8b37e123129b5da7ea7bfeb6ee4689caa8f53a35 100644 --- a/zh-cn/application-dev/reference/arkui-ts/ts-basic-gestures-pangesture.md +++ b/zh-cn/application-dev/reference/arkui-ts/ts-basic-gestures-pangesture.md @@ -1,4 +1,11 @@ -# PanGesture +# PanGesture + +>![](../../public_sys-resources/icon-note.gif) **说明：** +>从API Version 7开始支持。后续版本如有新增内容，则采用上角标单独标记该内容的起始版本。 + +## 权限列表 + +无 ## 接口 @@ -6,50 +13,49 @@ PanGesture\(options?: \{ fingers?: number, direction?: PanDirection, distance?: - 参数 - -

参数名称

+ - - - - - - - - - - - - - - - - - - - @@ -57,51 +63,50 @@ PanGesture\(options?: \{ fingers?: number, direction?: PanDirection, distance?: - PanDirection枚举说明 - -

参数名称

参数类型

+

参数类型

必填

+

必填

默认值

+

默认值

参数描述

+

参数描述

fingers

+

fingers

number

+

number

否

+

否

1

+

1

触发滑动的最少手指数，最小为1指， 最大取值为10指。

+

触发滑动的最少手指数，最小为1指， 最大取值为10指。

direction

+

direction

PanDirection

+

PanDirection

否

+

否

All

+

All

设置滑动方向，此枚举值支持逻辑与(&)和逻辑或（|）运算。

+

设置滑动方向，此枚举值支持逻辑与(&)和逻辑或（|）运算。

distance

+

distance

number

+

number

否

+

否

5.0

+

5.0

最小滑动识别距离，单位为vp。

+

最小滑动识别距离，单位为vp。

名称

+ - - - - - - - - - - - - - - - - - @@ -121,26 +126,25 @@ PanGestureOption\(options?: \{ fingers?: number, direction?: PanDirection, dista - 接口 - -

名称

描述

+

描述

All

+

All

所有方向可滑动。

+

所有方向可滑动。

Horizontal

+

Horizontal

水平方向可滑动。

+

水平方向可滑动。

Vertical

+

Vertical

竖直方向可滑动。

+

竖直方向可滑动。

Left

+

Left

向左滑动。

+

向左滑动。

Right

+

Right

向右滑动。

+

向右滑动。

Up

+

Up

向上滑动。

+

向上滑动。

Down

+

Down

向下滑动。

+

向下滑动。

None

+

None

任何方向都不可滑动。

+

任何方向都不可滑动。

名称

+ - - - - - - - @@ -149,36 +153,65 @@ PanGestureOption\(options?: \{ fingers?: number, direction?: PanDirection, dista ## 事件 - -

名称

功能描述

+

功能描述

setDirection(value: PanDirection)

+

setDirection(value: PanDirection)

设置direction属性。

+

设置direction属性。

setDistance(value: number)

+

setDistance(value: number)

设置distance属性。

+

设置distance属性。

setFingers(value: number)

+

setFingers(value: number)

设置fingers属性。

+

设置fingers属性。

名称

+ - - - - - - - - -

名称

功能描述

+

功能描述

onActionStart((event?: GestureEvent) => void)

+

onActionStart(callback: (event?: PanGestureEvent) => void)

Pan手势识别成功回调。

+

Pan手势识别成功回调。

onActionUpdate((event?: GestureEvent) => void)

+

onActionUpdate(callback: (event?: PanGestureEvent) => void)

Pan手势移动过程中回调。

+

Pan手势移动过程中回调。

onActionEnd((event?: GestureEvent) => void)

+

onActionEnd(callback: (event?: PanGestureEvent) => void)

Pan手势识别成功，手指抬起后触发回调。

+

Pan手势识别成功，手指抬起后触发回调。

onActionCancel(event: () => void)

+

onActionCancel(callback: () => void)

Pan手势识别成功，接收到触摸取消事件触发回调。

+

Pan手势识别成功，接收到触摸取消事件触发回调。
+- PanGestureEvent类型说明8+ + + 继承自[GestureEvent](ts-gesture-settings.md#table290mcpsimp)类型。 + + + + + + + + + + + + + + + +

属性名称

+

属性类型

+

描述

+

offsetX

+

number

+

手势事件偏移量，单位为vp。

+

offsetY

+

number

+

手势事件偏移量，单位为vp。

+
+ + ## 示例 ``` @@ -196,10 +229,10 @@ struct PanGestureExample { .translate({ x: this.offsetX, y: this.offsetY, z: 5 }) .gesture( PanGesture({}) - .onActionStart((event: GestureEvent) => { + .onActionStart((event: PanGestureEvent) => { console.info('Pan start') }) - .onActionUpdate((event: GestureEvent) => { + .onActionUpdate((event: PanGestureEvent) => { this.offsetX = event.offsetX this.offsetY = event.offsetY }) diff --git a/zh-cn/application-dev/reference/arkui-ts/ts-basic-gestures-pinchgesture.md b/zh-cn/application-dev/reference/arkui-ts/ts-basic-gestures-pinchgesture.md index a12f5f7d4a747aeca5048d703006c51de47d1f29..aa886db055387dd3eace79c46acc898499d3e71e 100644 --- a/zh-cn/application-dev/reference/arkui-ts/ts-basic-gestures-pinchgesture.md +++ b/zh-cn/application-dev/reference/arkui-ts/ts-basic-gestures-pinchgesture.md @@ -1,4 +1,11 @@ -# PinchGesture +# PinchGesture + +>![](../../public_sys-resources/icon-note.gif) **说明：** +>从API Version 7开始支持。后续版本如有新增内容，则采用上角标单独标记该内容的起始版本。 + +## 权限列表 + +无 ## 接口 @@ -6,39 +13,38 @@ PinchGesture\(options?: \{ fingers?: number, distance?: number \}\) - 参数 - -

参数名称

+ - - - - - - - - - - - - - - @@ -47,36 +53,72 @@ PinchGesture\(options?: \{ fingers?: number, distance?: number \}\) ## 事件 - -

参数名称

参数类型

+

参数类型

必填

+

必填

默认值

+

默认值

参数描述

+

参数描述

fingers

+

fingers

number

+

number

否

+

否

2

+

2

触发捏合的最少手指数, 最小为2指，最大为5指。

+

触发捏合的最少手指数, 最小为2指，最大为5指。

distance

+

distance

number

+

number

否

+

否

3.0

+

3.0

最小识别距离，单位为vp。

+

最小识别距离，单位为vp。

名称

+ - - - - - - - - -

名称

功能描述

+

功能描述

onActionStart((event?: GestureEvent) => void)

+

onActionStart((event?: PinchGestureEvent) => void)

Pinch手势识别成功回调。

+

Pinch手势识别成功回调。

onActionUpdate((event?: GestureEvent) => void)

+

onActionUpdate((event?: PinchGestureEvent) => void)

Pinch手势移动过程中回调。

+

Pinch手势移动过程中回调。

onActionEnd((event?: GestureEvent) => void)

+

onActionEnd((event?: PinchGestureEvent) => void)

Pinch手势识别成功，手指抬起后触发回调。

+

Pinch手势识别成功，手指抬起后触发回调。

onActionCancel(event: () => void)

+

onActionCancel(event: () => void)

Pinch手势识别成功，接收到触摸取消事件触发回调。

+

Pinch手势识别成功，接收到触摸取消事件触发回调。
+- PinchGestureEvent类型说明8+ + + 继承自[GestureEvent](ts-gesture-settings.md#table290mcpsimp)类型。 + + + + + + + + + + + + + + + + + + + +

属性名称

+

属性类型

+

描述

+

scale

+

number

+

缩放比例，用于PinchGesture手势触发场景。

+

pinchCenterX

+

number

+

捏合手势中心点X轴坐标，单位为px。

+

pinchCenterY

+

number

+

捏合手势中心点Y轴坐标，单位为px。

+
+ + ## 示例 ``` @@ -93,10 +135,10 @@ struct PinchGestureExample { .scale({ x: this.scale, y: this.scale, z: this.scale }) .gesture( PinchGesture() - .onActionStart((event: GestureEvent) => { + .onActionStart((event: PinchGestureEvent) => { console.info('Pinch start') }) - .onActionUpdate((event: GestureEvent) => { + .onActionUpdate((event: PinchGestureEvent) => { this.scale = event.scale }) .onActionEnd(() => { diff --git a/zh-cn/application-dev/reference/arkui-ts/ts-basic-gestures-rotationgesture.md b/zh-cn/application-dev/reference/arkui-ts/ts-basic-gestures-rotationgesture.md index dc7939977e0948894e77152277e2fe9520729631..e7bd9c07edc4597684e7e8fb7c0aa391e7010630 100644 --- a/zh-cn/application-dev/reference/arkui-ts/ts-basic-gestures-rotationgesture.md +++ b/zh-cn/application-dev/reference/arkui-ts/ts-basic-gestures-rotationgesture.md @@ -1,4 +1,11 @@ -# RotationGesture +# RotationGesture + +>![](../../public_sys-resources/icon-note.gif) **说明：** +>从API Version 7开始支持。后续版本如有新增内容，则采用上角标单独标记该内容的起始版本。 + +## 权限列表 + +无 ## 接口 @@ -6,39 +13,38 @@ RotationGesture\(options?: \{ fingers?: number, angle?: number \}\) - 参数 - -

参数名称

+ - - - - - - - - - - - - - - @@ -47,36 +53,72 @@ RotationGesture\(options?: \{ fingers?: number, angle?: number \}\) ## 事件 - -

参数名称

参数类型

+

参数类型

必填

+

必填

默认值

+

默认值

参数描述

+

参数描述

fingers

+

fingers

number

+

number

否

+

否

2

+

2

触发旋转的最少手指数, 最小为2指，最大为5指。

+

触发旋转的最少手指数, 最小为2指，最大为5指。

angle

+

angle

number

+

number

否

+

否

1.0

+

1.0

触发旋转手势的最小改变度数，单位为度数。

+

触发旋转手势的最小改变度数，单位为度数。

名称

+ - - - - - - - - -

名称

功能描述

+

功能描述

onActionStart((event?: GestureEvent) => void)

+

onActionStart((event?: RotationGestureEvent) => void)

Rotation手势识别成功回调。

+

Rotation手势识别成功回调。

onActionUpdate((event?: GestureEvent) => void)

+

onActionUpdate((event?: RotationGestureEvent) => void)

Rotation手势移动过程中回调。

+

Rotation手势移动过程中回调。

onActionEnd((event?: GestureEvent) => void)

+

onActionEnd((event?: RotationGestureEvent) => void)

Rotation手势识别成功，手指抬起后触发回调。

+

Rotation手势识别成功，手指抬起后触发回调。

onActionCancel(event: () => void)

+

onActionCancel(event: () => void)

Rotation手势识别成功，接收到触摸取消事件触发回调。

+

Rotation手势识别成功，接收到触摸取消事件触发回调。
+- RotationGestureEvent类型说明8+ + + 继承自[GestureEvent](ts-gesture-settings.md#table290mcpsimp)类型。 + + + + + + + + + + + + + + + + + + + +

属性名称

+

属性类型

+

描述

+

angle

+

number

+

旋转角度。

+

pinchCenterX

+

number

+

捏合手势中心点X轴坐标，单位为px。

+

pinchCenterY

+

number

+

捏合手势中心点Y轴坐标，单位为px。

+
+ + ## 示例 ``` @@ -93,10 +135,10 @@ struct RotationGestureExample { .margin(80).rotate({ x:1, y:2, z:3, angle: this.angle }) .gesture( RotationGesture() - .onActionStart((event: GestureEvent) => { + .onActionStart((event: RotationGestureEvent) => { console.log('Rotation start') }) - .onActionUpdate((event: GestureEvent) => { + .onActionUpdate((event: RotationGestureEvent) => { this.angle = event.angle }) .onActionEnd(() => { diff --git a/zh-cn/application-dev/reference/arkui-ts/ts-basic-gestures-swipegesture.md b/zh-cn/application-dev/reference/arkui-ts/ts-basic-gestures-swipegesture.md new file mode 100644 index 0000000000000000000000000000000000000000..edf7217879df56abdef15aefa4d805077b536648 --- /dev/null +++ b/zh-cn/application-dev/reference/arkui-ts/ts-basic-gestures-swipegesture.md @@ -0,0 +1,167 @@ +# SwipeGesture + +>![](../../public_sys-resources/icon-note.gif) **说明：** +>从API Version 8开始支持。后续版本如有新增内容，则采用上角标单独标记该内容的起始版本。 + +## 权限列表 + +无 + +## 接口 + +SwipeGesture\(value?: \{ fingers?: number; direction?: SwipeDirection; speed?: number \}\) + +- 参数 + + + + + + + + + + + + + + + + + + + + + + + + + + + +

参数名称

+

参数类型

+

必填

+

默认值

+

参数描述

+

fingers

+

number

+

否

+

1

+

触发滑动的最少手指数，默认为1，最小为1指，最大为10指。

+

direction

+

SwipeDirection

+

否

+

SwipeDirection.All

+

滑动方向。

+

speed

+

number

+

否

+

100

+

识别滑动的最小速度（100VP/秒）。

+
+ +- SwipeDirection枚举说明 + + + + + + + + + + + + + + + +

名称

+

描述

+

All

+

所有方向。

+

Horizontal

+

水平方向。

+

Vertical

+

竖直方向。

+
+ + +## 事件 + + + + + + + + + +

名称

+

功能描述

+

onAction(callback:(event?: SwipeGestureEvent) => void)

+

滑动手势识别成功回调。

+
+ +- SwipeGestureEvent类型说明 + + 继承自[GestureEvent](ts-gesture-settings.md#table290mcpsimp)类型。 + + + + + + + + + + + + + + + +

参数名

+

类型

+

说明

+

angle

+

number

+

滑动手势的角度。

+

speed

+

number

+

滑动手势的速度。

+
+ + +## 示例 + +``` +@Entry +@Component +struct SwipeGestureExample { + @State rotateAngle : number = 0 + @State speed : number = 1 + + build() { + Column() { + Text("SwipGesture speed ： " + this.speed) + Text("SwipGesture angle ： " + this.rotateAngle) + } + .position({x: 80, y: 200}) + .border({width:2}) + .width(260).height(260) + .rotate({x: 0, y: 0, z: 1, angle: this.rotateAngle}) + .gesture( + SwipeGesture({fingers: 1, direction:SwipeDirection.Vertical}) + .onAction((event: SwipeGestureEvent) => { + this.speed = event.speed + this.rotateAngle = event.angle + }) + ) + } +} +``` + +![](figures/GIF-0.gif) + diff --git a/zh-cn/application-dev/reference/arkui-ts/ts-basic-gestures-tapgesture.md b/zh-cn/application-dev/reference/arkui-ts/ts-basic-gestures-tapgesture.md index 3fd5a5e1ec8fc75e8dc2d5ee6d6aac40bc2abc69..ebf47a07da9db437c2ee1220fc49f7a42f77eafa 100644 --- a/zh-cn/application-dev/reference/arkui-ts/ts-basic-gestures-tapgesture.md +++ b/zh-cn/application-dev/reference/arkui-ts/ts-basic-gestures-tapgesture.md @@ -1,4 +1,11 @@ -# TapGesture +# TapGesture + +>![](../../public_sys-resources/icon-note.gif) **说明：** +>从API Version 7开始支持。后续版本如有新增内容，则采用上角标单独标记该内容的起始版本。 + +## 权限列表 + +无 ## 接口 @@ -6,43 +13,42 @@ TapGesture\(options?: \{ count?: number, fingers?: number \}\) - 参数 - -

参数名称

+ - - - - - - - - - - - - - - @@ -52,21 +58,25 @@ TapGesture\(options?: \{ count?: number, fingers?: number \}\) ## 事件 - -

参数名称

参数类型

+

参数类型

必填

+

必填

默认值

+

默认值

参数描述

+

参数描述

count

+

count

number

+

number

否

+

否

1

+

1

识别的连续点击次数。如果设置小于1，会被转化为默认值。

-
说明：

如配置多击，上一次抬起和下一次按下的超时时间为300毫秒（ms）。

+

识别的连续点击次数。如果设置小于1，会被转化为默认值。

+
说明：

如配置多击，上一次抬起和下一次按下的超时时间为300毫秒（ms）。

fingers

+

fingers

number

+

number

否

+

否

1

+

1

触发点击的最少手指数，最小为1指， 最大为10指。

-
说明：

1. 当配置多指时，第一根手指按下后300毫秒（ms）内未有足够的手指数按下，手势识别失败。

-

2. 实际点击手指数超过配置值，手势识别失败。

+

触发点击的最少手指数，最小为1指， 最大为10指。

+
说明：

1. 当配置多指时，第一根手指按下后300毫秒（ms）内未有足够的手指数按下，手势识别失败。

+

2. 实际点击手指数超过配置值，手势识别失败。

名称

+ - - -

名称

功能描述

+

功能描述

onAction((event?: GestureEvent) => void)

+

onAction((event?: TapGestureEvent) => void)

Tap手势识别成功回调。

+

Tap手势识别成功回调。
+- TapGestureEvent类型说明8+ + + 继承自[GestureEvent](ts-gesture-settings.md#table290mcpsimp)类型。 + + ## 示例 ``` diff --git a/zh-cn/application-dev/reference/arkui-ts/ts-basic-gestures.md b/zh-cn/application-dev/reference/arkui-ts/ts-basic-gestures.md index b3431ee4b61ce7d8425d48ba6d2b60310f02b4d7..82d86fcd235337bd6df9b5ff7608c3012e2d008f 100644 --- a/zh-cn/application-dev/reference/arkui-ts/ts-basic-gestures.md +++ b/zh-cn/application-dev/reference/arkui-ts/ts-basic-gestures.md @@ -1,4 +1,4 @@ -# 基础手势 +# 基础手势 - **[TapGesture](ts-basic-gestures-tapgesture.md)** @@ -10,4 +10,6 @@ - **[RotationGesture](ts-basic-gestures-rotationgesture.md)** +- **[SwipeGesture](ts-basic-gestures-swipegesture.md)** + diff --git a/zh-cn/application-dev/reference/arkui-ts/ts-canvasrenderingcontext2d.md b/zh-cn/application-dev/reference/arkui-ts/ts-canvasrenderingcontext2d.md new file mode 100644 index 0000000000000000000000000000000000000000..2864a2f12e44e889da6d632f2cd9d977e08b6f75 --- /dev/null +++ b/zh-cn/application-dev/reference/arkui-ts/ts-canvasrenderingcontext2d.md @@ -0,0 +1,3784 @@ +# CanvasRenderingContext2D对象 + +>![](../../public_sys-resources/icon-note.gif) **说明：** +>从API Version 8开始支持。后续版本如有新增内容，则采用上角标单独标记该内容的起始版本。 + +使用RenderingContext在Canvas组件上进行绘制，绘制对象可以是矩形、文本、图片等。 + +## 接口 + +CanvasRenderingContext2D\(setting: RenderingContextSetting\) + +- 参数 + + + + + + + + + + + + + + + +

参数名

+

参数类型

+

必填

+

默认值

+

参数描述

+

setting

+

RenderingContextSettings

+

是

+

-

+

见RenderingContextSettings。

+
+ + +### RenderingContextSettings + +RenderingContextSettings\(antialias?: bool, alpha?: bool\) + +用来配置CanvasRenderingContext2D对象的参数，包括是否开启抗锯齿和是否包含一个alpha通道。 + +- 参数 + + + + + + + + + + + + + + + + + + + + + +

参数名

+

参数类型

+

必填

+

默认值

+

参数描述

+

antialias

+

bool

+

否

+

false

+

表明canvas是否开启抗锯齿。

+

alpha

+

bool

+

否

+

false

+

表明canvas包含是否包含一个alpha通道。

+
+ + +## 属性 + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + +

名称

+

类型

+

默认值

+

描述

+

fillStyle

+

<color> | CanvasGradient | CanvasPattern

+

-

+

指定绘制的填充色。

+
  • 类型为<color>时，表示设置填充区域的颜色。
  • 类型为CanvasGradient时，表示渐变对象，使用createLinearGradient方法创建。
  • 类型为CanvasPattern时，使用createPattern方法创建。
+

lineWidth

+

number

+

-

+

设置绘制线条的宽度。

+

strokeStyle

+

<color> | CanvasGradient | CanvasPattern

+

-

+

设置描边的颜色。

+
  • 类型为<color>时，表示设置描边使用的颜色。
  • 类型为CanvasGradient时，表示渐变对象，使用createLinearGradient方法创建。
  • 类型为CanvasPattern时，使用createPattern方法创建。
+

lineCap

+

string

+

'butt'

+

指定线端点的样式，可选值为：

+
  • 'butt'：线端点以方形结束。
  • 'round'：线端点以圆形结束。
  • 'square'：线端点以方形结束，该样式下会增加一个长度和线段厚度相同，宽度是线段厚度一半的矩形。
+

lineJoin

+

string

+

'miter'

+

指定线段间相交的交点样式，可选值为：

+
  • 'round'：在线段相连处绘制一个扇形，扇形的圆角半径是线段的宽度。
  • 'bevel'：在线段相连处使用三角形为底填充， 每个部分矩形拐角独立。
  • 'miter'：在相连部分的外边缘处进行延伸，使其相交于一点，形成一个菱形区域，该属性可以通过设置miterLimit属性展现效果。
+

miterLimit

+

number

+

10

+

设置斜接面限制值，该值指定了线条相交处内角和外角的距离。

+

font

+

string

+

'normal normal 14px sans-serif'

+

设置文本绘制中的字体样式。

+

语法：ctx.font='font-size font-family'

+
  • font-size(可选)，指定字号和行高，单位只支持px。
  • font-family(可选)，指定字体系列。
+

语法：ctx.font='font-style font-weight font-size font-family'

+
  • font-style(可选)，用于指定字体样式，支持如下几种样式：'normal',talic。
  • font-weight(可选)，用于指定字体的粗细，支持如下几种类型：'normal', 'bold', 'bolder', 'lighter', 100, 200, 300, 400, 500, 600, 700, 800, 900。
  • font-size(可选)，指定字号和行高，单位只支持px。
  • font-family(可选)，指定字体系列，支持如下几种类型：'sans-serif', 'serif', 'monospace'。
+

textAlign

+

string

+

'left'

+

设置文本绘制中的文本对齐方式，可选值为：

+
  • 'left'：文本左对齐。
  • 'right'：文本右对齐。
  • 'center'：文本居中对齐。
  • 'start'：文本对齐界线开始的地方。
  • 'end'：文本对齐界线结束的地方。
+
说明：

ltr布局模式下'start'和'left'一致，rtl布局模式下'start'和'right'一致·。

+
+

textBaseline

+

string

+

'alphabetic'

+

设置文本绘制中的水平对齐方式，可选值为：

+
  • 'alphabetic'：文本基线是标准的字母基线。
  • 'top'：文本基线在文本块的顶部。
  • 'hanging'：文本基线是悬挂基线。
  • 'middle'：文本基线在文本块的中间。
  • 'ideographic'：文字基线是表意字基线；如果字符本身超出了alphabetic基线，那么ideograhpic基线位置在字符本身的底部。
  • 'bottom'：文本基线在文本块的底部。 与ideographic基线的区别在于ideographic基线不需要考虑下行字母。
+

globalAlpha

+

number

+

-

+

设置透明度，0.0为完全透明，1.0为完全不透明。

+

lineDashOffset

+

number

+

0.0

+

设置画布的虚线偏移量，精度为float。

+

globalCompositeOperation

+

string

+

'source-over'

+

设置合成操作的方式。类型字段可选值有'source-over'，'source-atop'，'source-in'，'source-out'，'destination-over'，'destination-atop'，'destination-in'，'destination-out'，'lighter'，'copy'，'xor'。

+

shadowBlur

+

number

+

0.0

+

设置绘制阴影时的模糊级别，值越大越模糊，精度为float。

+

shadowColor

+

<color>

+

-

+

设置绘制阴影时的阴影颜色。

+

shadowOffsetX

+

number

+

-

+

设置绘制阴影时和原有对象的水平偏移值。

+

shadowOffsetY

+

number

+

-

+

设置绘制阴影时和原有对象的垂直偏移值。

+

imageSmoothingEnabled

+

boolean

+

true

+

用于设置绘制图片时是否进行图像平滑度调整，true为启用，false为不启用。

+

imageSmoothingQuality

+

string

+

'low'

+

用于设置图像平滑度，支持如下三种类型：'low', 'medium', 'high'。

+
+ +>![](../../public_sys-resources/icon-note.gif) **说明：** +>类型格式为 'rgb\(255, 255, 255\)'，'rgba\(255, 255, 255, 1.0\)'，'\#FFFFFF'。 + +### fillStyle + +``` +@Entry +@Component +struct FillStyleExample { + private settings: RenderingContextSettings = new RenderingContextSettings(true,true) + private context: CanvasRenderingContext2D = new CanvasRenderingContext2D(this.settings) + + build() { + Flex({ direction: FlexDirection.Column, alignItems: ItemAlign.Center, justifyContent: FlexAlign.Center }) { + Canvas(this.context) + .width('100%') + .height('100%') + .backgroundColor('#ffff00') + .onReady(() =>{ + this.context.fillStyle = '#0000ff' + this.context.fillRect(20, 160, 150, 100) + }) + } + .width('100%') + .height('100%') + } +} +``` + +![](figures/zh-cn_image_0000001193322850.png) + +### lineWidth + +``` +@Entry +@Component +struct LineWidthExample { + private settings: RenderingContextSettings = new RenderingContextSettings(true,true) + private context: CanvasRenderingContext2D = new CanvasRenderingContext2D(this.settings) + + build() { + Flex({ direction: FlexDirection.Column, alignItems: ItemAlign.Center, justifyContent: FlexAlign.Center }) { + Canvas(this.context) + .width('100%') + .height('100%') + .backgroundColor('#ffff00') + .onReady(() =>{ + this.context.lineWidth = 5 + this.context.strokeRect(25, 25, 85, 105) + }) + } + .width('100%') + .height('100%') + } +} +``` + +![](figures/zh-cn_image_0000001238402745.png) + +### strokeStyle + +``` +@Entry +@Component +struct StrokeStyleExample { + private settings: RenderingContextSettings = new RenderingContextSettings(true,true) + private context: CanvasRenderingContext2D = new CanvasRenderingContext2D(this.settings) + + build() { + Flex({ direction: FlexDirection.Column, alignItems: ItemAlign.Center, justifyContent: FlexAlign.Center }) { + Canvas(this.context) + .width('100%') + .height('100%') + .backgroundColor('#ffff00') + .onReady(() =>{ + this.context.lineWidth = 10 + this.context.strokeStyle = '#0000ff' + this.context.strokeRect(25, 25, 155, 105) + }) + } + .width('100%') + .height('100%') + } +} +``` + +![](figures/zh-cn_image_0000001238282783.png) + +### lineCap + +``` +@Entry +@Component +struct LineCapExample { + private settings: RenderingContextSettings = new RenderingContextSettings(true,true) + private context: CanvasRenderingContext2D = new CanvasRenderingContext2D(this.settings) + + build() { + Flex({ direction: FlexDirection.Column, alignItems: ItemAlign.Center, justifyContent: FlexAlign.Center }) { + Canvas(this.context) + .width('100%') + .height('100%') + .backgroundColor('#ffff00') + .onReady(() =>{ + this.context.lineWidth = 8 + this.context.beginPath() + this.context.lineCap = 'round' + this.context.moveTo(30, 50) + this.context.lineTo(220, 50) + this.context.stroke() + }) + } + .width('100%') + .height('100%') + } +} +``` + +![](figures/zh-cn_image_0000001193642802.png) + +### lineJoin + +``` +@Entry +@Component +struct LineJoinExample { + private settings: RenderingContextSettings = new RenderingContextSettings(true,true) + private context: CanvasRenderingContext2D = new CanvasRenderingContext2D(this.settings) + + build() { + Flex({ direction: FlexDirection.Column, alignItems: ItemAlign.Center, justifyContent: FlexAlign.Center }) { + Canvas(this.context) + .width('100%') + .height('100%') + .backgroundColor('#ffff00') + .onReady(() =>{ + this.context.beginPath() + this.context.lineWidth = 8 + this.context.lineJoin = 'miter' + this.context.moveTo(30, 30) + this.context.lineTo(120, 60) + this.context.lineTo(30, 110) + this.context.stroke() + }) + } + .width('100%') + .height('100%') + } +} +``` + +![](figures/zh-cn_image_0000001193802788.png) + +### miterLimit + +``` +@Entry +@Component +struct MiterLimit { + private settings: RenderingContextSettings = new RenderingContextSettings(true,true) + private context: CanvasRenderingContext2D = new CanvasRenderingContext2D(this.settings) + + build() { + Flex({ direction: FlexDirection.Column, alignItems: ItemAlign.Center, justifyContent: FlexAlign.Center }) { + Canvas(this.context) + .width('100%') + .height('100%') + .backgroundColor('#ffff00') + .onReady(() =>{ + this.context.lineWidth = 8 + this.context.lineJoin = 'miter' + this.context.miterLimit = 3 + this.context.moveTo(30, 30) + this.context.lineTo(60, 35) + this.context.lineTo(30, 37) + this.context.stroke() + }) + } + .width('100%') + .height('100%') + } +} +``` + +![](figures/zh-cn_image_0000001238522733.png) + +### font + +``` +@Entry +@Component +struct Font { + private settings: RenderingContextSettings = new RenderingContextSettings(true,true) + private context: CanvasRenderingContext2D = new CanvasRenderingContext2D(this.settings) + + build() { + Flex({ direction: FlexDirection.Column, alignItems: ItemAlign.Center, justifyContent: FlexAlign.Center }) { + Canvas(this.context) + .width('100%') + .height('100%') + .backgroundColor('#ffff00') + .onReady(() =>{ + this.context.font = '30px sans-serif' + this.context.fillText("Hello World", 20, 60) + }) + } + .width('100%') + .height('100%') + } +} +``` + +![](figures/zh-cn_image_0000001193482814.png) + +### textAlign + +``` +@Entry +@Component +struct TextAlign { + private settings: RenderingContextSettings = new RenderingContextSettings(true,true) + private context: CanvasRenderingContext2D = new CanvasRenderingContext2D(this.settings) + + build() { + Flex({ direction: FlexDirection.Column, alignItems: ItemAlign.Center, justifyContent: FlexAlign.Center }) { + Canvas(this.context) + .width('100%') + .height('100%') + .backgroundColor('#ffff00') + .onReady(() =>{ + this.context.strokeStyle = '#0000ff' + this.context.moveTo(140, 10) + this.context.lineTo(140, 160) + this.context.stroke() + + this.context.font = '18px sans-serif' + + this.context.textAlign = 'start' + this.context.fillText('textAlign=start', 140, 60) + this.context.textAlign = 'end' + this.context.fillText('textAlign=end', 140, 80) + this.context.textAlign = 'left' + this.context.fillText('textAlign=left', 140, 100) + this.context.textAlign = 'center' + this.context.fillText('textAlign=center',140, 120) + this.context.textAlign = 'right' + this.context.fillText('textAlign=right',140, 140) + }) + } + .width('100%') + .height('100%') + } +} +``` + +![](figures/zh-cn_image_0000001238602771.png) + +### textBaseline + +``` +@Entry +@Component +struct TextBaseline { + private settings: RenderingContextSettings = new RenderingContextSettings(true,true) + private context: CanvasRenderingContext2D = new CanvasRenderingContext2D(this.settings) + + build() { + Flex({ direction: FlexDirection.Column, alignItems: ItemAlign.Center, justifyContent: FlexAlign.Center }) { + Canvas(this.context) + .width('100%') + .height('100%') + .backgroundColor('#ffff00') + .onReady(() =>{ + this.context.strokeStyle = '#0000ff' + this.context.moveTo(0, 120) + this.context.lineTo(400, 120) + this.context.stroke() + + this.context.font = '20px sans-serif' + + this.context.textBaseline = 'top' + this.context.fillText('Top', 10, 120) + this.context.textBaseline = 'bottom' + this.context.fillText('Bottom', 55, 120) + this.context.textBaseline = 'middle' + this.context.fillText('Middle', 125, 120) + this.context.textBaseline = 'alphabetic' + this.context.fillText('Alphabetic', 195, 120) + this.context.textBaseline = 'hanging' + this.context.fillText('Hanging', 295, 120) + }) + } + .width('100%') + .height('100%') + } +} +``` + +![](figures/zh-cn_image_0000001193322872.png) + +### globalAlpha + +``` +@Entry +@Component +struct GlobalAlpha { + private settings: RenderingContextSettings = new RenderingContextSettings(true,true) + private context: CanvasRenderingContext2D = new CanvasRenderingContext2D(this.settings) + + build() { + Flex({ direction: FlexDirection.Column, alignItems: ItemAlign.Center, justifyContent: FlexAlign.Center }) { + Canvas(this.context) + .width('100%') + .height('100%') + .backgroundColor('#ffff00') + .onReady(() =>{ + this.context.fillStyle = 'rgb(255,0,0)' + this.context.fillRect(0, 0, 50, 50) + this.context.globalAlpha = 0.4 + this.context.fillStyle = 'rgb(0,0,255)' + this.context.fillRect(50, 50, 50, 50) + }) + } + .width('100%') + .height('100%') + } +} +``` + +![](figures/zh-cn_image_0000001238402777.png) + +### lineDashOffset + +``` +@Entry +@Component +struct LineDashOffset { + private settings: RenderingContextSettings = new RenderingContextSettings(true,true) + private context: CanvasRenderingContext2D = new CanvasRenderingContext2D(this.settings) + + build() { + Flex({ direction: FlexDirection.Column, alignItems: ItemAlign.Center, justifyContent: FlexAlign.Center }) { + Canvas(this.context) + .width('100%') + .height('100%') + .backgroundColor('#ffff00') + .onReady(() =>{ + this.context.arc(100, 75, 50, 0, 6.28) + this.context.setLineDash([10,20]) + this.context.stroke(); + }) + } + .width('100%') + .height('100%') + } +} +``` + +![](figures/zh-cn_image_0000001238282827.png) + +### globalCompositeOperation + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + +

名称

+

描述

+

source-over

+

在现有绘制内容上显示新绘制内容，属于默认值。

+

source-atop

+

在现有绘制内容顶部显示新绘制内容。

+

source-in

+

在现有绘制内容中显示新绘制内容。

+

source-out

+

在现有绘制内容之外显示新绘制内容。

+

destination-over

+

在新绘制内容上方显示现有绘制内容。

+

destination-atop

+

在新绘制内容顶部显示现有绘制内容。

+

destination-in

+

在新绘制内容中显示现有绘制内容。

+

destination-out

+

在新绘制内容外显示现有绘制内容。

+

lighter

+

显示新绘制内容和现有绘制内容。

+

copy

+

显示新绘制内容而忽略现有绘制内容。

+

xor

+

使用异或操作对新绘制内容与现有绘制内容进行融合。

+
+ +``` +@Entry +@Component +struct GlobalCompositeOperation { + private settings: RenderingContextSettings = new RenderingContextSettings(true,true) + private context: CanvasRenderingContext2D = new CanvasRenderingContext2D(this.settings) + + build() { + Flex({ direction: FlexDirection.Column, alignItems: ItemAlign.Center, justifyContent: FlexAlign.Center }) { + Canvas(this.context) + .width('100%') + .height('100%') + .backgroundColor('#ffff00') + .onReady(() =>{ + this.context.fillStyle = 'rgb(255,0,0)' + this.context.fillRect(20, 20, 50, 50) + this.context.globalCompositeOperation = 'source-over' + this.context.fillStyle = 'rgb(0,0,255)' + this.context.fillRect(50, 50, 50, 50) + this.context.fillStyle = 'rgb(255,0,0)' + this.context.fillRect(120, 20, 50, 50) + this.context.globalCompositeOperation = 'destination-over' + this.context.fillStyle = 'rgb(0,0,255)' + this.context.fillRect(150, 50, 50, 50) + }) + } + .width('100%') + .height('100%') + } +} +``` + +![](figures/zh-cn_image_0000001193642848.png) + +### shadowBlur + +``` +@Entry +@Component +struct ShadowBlur { + private settings: RenderingContextSettings = new RenderingContextSettings(true,true); + private context: CanvasRenderingContext2D = new CanvasRenderingContext2D(this.settings); + + build() { + Flex({ direction: FlexDirection.Column, alignItems: ItemAlign.Center, justifyContent: FlexAlign.Center }) { + Canvas(this.context) + .width('100%') + .height('100%') + .backgroundColor('#ffff00') + .onReady(() =>{ + this.context.shadowBlur = 30 + this.context.shadowColor = 'rgb(0,0,0)' + this.context.fillStyle = 'rgb(255,0,0)' + this.context.fillRect(20, 20, 100, 80) + }) + } + .width('100%') + .height('100%') + } +} +``` + +![](figures/zh-cn_image_0000001193802836.png) + +### shadowColor + +``` +@Entry +@Component +struct ShadowColor { + private settings: RenderingContextSettings = new RenderingContextSettings(true,true) + private context: CanvasRenderingContext2D = new CanvasRenderingContext2D(this.settings) + + build() { + Flex({ direction: FlexDirection.Column, alignItems: ItemAlign.Center, justifyContent: FlexAlign.Center }) { + Canvas(this.context) + .width('100%') + .height('100%') + .backgroundColor('#ffff00') + .onReady(() =>{ + this.context.shadowBlur = 30 + this.context.shadowColor = 'rgb(0,0,255)' + this.context.fillStyle = 'rgb(255,0,0)' + this.context.fillRect(30, 30, 100, 100) + }) + } + .width('100%') + .height('100%') + } +} +``` + +![](figures/zh-cn_image_0000001238522783.png) + +### shadowOffsetX + +``` +@Entry +@Component +struct ShadowOffsetX { + private settings: RenderingContextSettings = new RenderingContextSettings(true,true) + private context: CanvasRenderingContext2D = new CanvasRenderingContext2D(this.settings) + + build() { + Flex({ direction: FlexDirection.Column, alignItems: ItemAlign.Center, justifyContent: FlexAlign.Center }) { + Canvas(this.context) + .width('100%') + .height('100%') + .backgroundColor('#ffff00') + .onReady(() =>{ + this.context.shadowBlur = 10 + this.context.shadowOffsetX = 20 + this.context.shadowColor = 'rgb(0,0,0)' + this.context.fillStyle = 'rgb(255,0,0)' + this.context.fillRect(20, 20, 100, 80) + }) + } + .width('100%') + .height('100%') + } +} +``` + +![](figures/zh-cn_image_0000001193482866.png) + +### shadowOffsetY + +``` +@Entry +@Component +struct ShadowOffsetY { + private settings: RenderingContextSettings = new RenderingContextSettings(true,true) + private context: CanvasRenderingContext2D = new CanvasRenderingContext2D(this.settings) + build() { + Flex({ direction: FlexDirection.Column, alignItems: ItemAlign.Center, justifyContent: FlexAlign.Center }) { + Canvas(this.context) + .width('100%') + .height('100%') + .backgroundColor('#ffff00') + .onReady(() =>{ + this.context.shadowBlur = 10 + this.context.shadowOffsetY = 20 + this.context.shadowColor = 'rgb(0,0,0)' + this.context.fillStyle = 'rgb(255,0,0)' + this.context.fillRect(30, 30, 100, 100) + }) + } + .width('100%') + .height('100%') + } +} +``` + +![](figures/zh-cn_image_0000001238602821.png) + +### imageSmoothingEnabled + +``` +@Entry +@Component +struct ImageSmoothingEnabled { + private settings: RenderingContextSettings = new RenderingContextSettings(true,true) + private context: CanvasRenderingContext2D = new CanvasRenderingContext2D(this.settings) + private img:ImageBitmap = new ImageBitmap("common/images/icon.jpg") + + build() { + Flex({ direction: FlexDirection.Column, alignItems: ItemAlign.Center, justifyContent: FlexAlign.Center }) { + Canvas(this.context) + .width('100%') + .height('100%') + .backgroundColor('#ffff00') + .onReady(() =>{ + this.context.imageSmoothingEnabled = false + this.context.drawImage( this.img,0,0,400,200) + }) + } + .width('100%') + .height('100%') + } +} +``` + +![](figures/zh-cn_image_0000001193322910.png) + +## 方法 + +### fillRect + +fillRect\(x: number, y: number, w: number, h: number\): void + +填充一个矩形。 + +- 参数 + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + +

参数

+

类型

+

必填

+

默认值

+

说明

+

x

+

number

+

是

+

0

+

指定矩形左上角点的x坐标。

+

y

+

number

+

是

+

0

+

指定矩形左上角点的y坐标。

+

width

+

number

+

是

+

0

+

指定矩形的宽度。

+

height

+

number

+

是

+

0

+

指定矩形的高度。

+
+ + +- 示例 + + ``` + @Entry + @Component + struct FillRect { + private settings: RenderingContextSettings = new RenderingContextSettings(true,true) + private context: CanvasRenderingContext2D = new CanvasRenderingContext2D(this.settings) + + build() { + Flex({ direction: FlexDirection.Column, alignItems: ItemAlign.Center, justifyContent: FlexAlign.Center }) { + Canvas(this.context) + .width('100%') + .height('100%') + .backgroundColor('#ffff00') + .onReady(() =>{ + this.context.fillRect(0,30,100,100) + }) + } + .width('100%') + .height('100%') + } + } + ``` + + ![](figures/zh-cn_image_0000001193737314.png) + + +### strokeRect + +strokeRect\(x: number, y: number, w: number, h: number\): void + +绘制具有边框的矩形，矩形内部不填充。 + +- 参数 + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + +

参数

+

类型

+

必填

+

默认值

+

说明

+

x

+

number

+

是

+

0

+

指定矩形的左上角x坐标。

+

y

+

number

+

是

+

0

+

指定矩形的左上角y坐标。

+

width

+

number

+

是

+

0

+

指定矩形的宽度。

+

height

+

number

+

是

+

0

+

指定矩形的高度。

+
+ + +- 示例 + + ``` + @Entry + @Component + struct StrokeRect { + private settings: RenderingContextSettings = new RenderingContextSettings(true,true) + private context: CanvasRenderingContext2D = new CanvasRenderingContext2D(this.settings) + build() { + Flex({ direction: FlexDirection.Column, alignItems: ItemAlign.Center, justifyContent: FlexAlign.Center }) { + Canvas(this.context) + .width('100%') + .height('100%') + .backgroundColor('#ffff00') + .onReady(() =>{ + this.context.strokeRect(30, 30, 200, 150) + }) + } + .width('100%') + .height('100%') + } + } + ``` + + ![](figures/zh-cn_image_0000001238457271.png) + + +### clearRect + +clearRect\(x: number, y: number, w: number, h: number\): void + +删除指定区域内的绘制内容。 + +- 参数 + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + +

参数

+

类型

+

必填

+

默认值

+

描述

+

x

+

number

+

是

+

0

+

指定矩形上的左上角x坐标。

+

y

+

number

+

是

+

0

+

指定矩形上的左上角y坐标。

+

width

+

number

+

是

+

0

+

指定矩形的宽度。

+

height

+

number

+

是

+

0

+

指定矩形的高度。

+
+ + +- 示例 + + ``` + @Entry + @Component + struct ClearRect { + private settings: RenderingContextSettings = new RenderingContextSettings(true,true) + private context: CanvasRenderingContext2D = new CanvasRenderingContext2D(this.settings) + build() { + Flex({ direction: FlexDirection.Column, alignItems: ItemAlign.Center, justifyContent: FlexAlign.Center }) { + Canvas(this.context) + .width('100%') + .height('100%') + .backgroundColor('#ffff00') + .onReady(() =>{ + this.context.fillStyle = 'rgb(0,0,255)' + this.context.fillRect(0,0,500,500) + this.context.clearRect(20,20,150,100) + }) + } + .width('100%') + .height('100%') + } + } + ``` + + ![](figures/11111.png) + + +### fillText + +fillText\(text: string, x: number, y: number\): void + +绘制填充类文本。 + +- 参数 + + + + + + + + + + + + + + + + + + + + + + + + + + + +

参数

+

类型

+

必填

+

默认值

+

说明

+

text

+

string

+

是

+

“”

+

需要绘制的文本内容。

+

x

+

number

+

是

+

0

+

需要绘制的文本的左下角x坐标。

+

y

+

number

+

是

+

0

+

需要绘制的文本的左下角y坐标。

+
+ + +- 示例 + + ``` + @Entry + @Component + struct FillText { + private settings: RenderingContextSettings = new RenderingContextSettings(true,true) + private context: CanvasRenderingContext2D = new CanvasRenderingContext2D(this.settings) + build() { + Flex({ direction: FlexDirection.Column, alignItems: ItemAlign.Center, justifyContent: FlexAlign.Center }) { + Canvas(this.context) + .width('100%') + .height('100%') + .backgroundColor('#ffff00') + .onReady(() =>{ + this.context.font = '30px sans-serif' + this.context.fillText("Hello World!", 20, 100) + }) + } + .width('100%') + .height('100%') + } + } + ``` + + ![](figures/zh-cn_image_0000001238537297.png) + + +### strokeText + +strokeText\(text: string, x: number, y: number\): void + +绘制描边类文本。 + +- 参数 + + + + + + + + + + + + + + + + + + + + + + + + + + + +

参数

+

类型

+

必填

+

默认值

+

描述

+

text

+

string

+

是

+

“”

+

需要绘制的文本内容。

+

x

+

number

+

是

+

0

+

需要绘制的文本的左下角x坐标。

+

y

+

number

+

是

+

0

+

需要绘制的文本的左下角y坐标。

+
+ + +- 示例 + + ``` + @Entry + @Component + struct StrokeText { + private settings: RenderingContextSettings = new RenderingContextSettings(true,true) + private context: CanvasRenderingContext2D = new CanvasRenderingContext2D(this.settings) + build() { + Flex({ direction: FlexDirection.Column, alignItems: ItemAlign.Center, justifyContent: FlexAlign.Center }) { + Canvas(this.context) + .width('100%') + .height('100%') + .backgroundColor('#ffff00') + .onReady(() =>{ + this.context.font = '55px sans-serif' + this.context.strokeText("Hello World!", 20, 60) + }) + } + .width('100%') + .height('100%') + } + } + ``` + + ![](figures/zh-cn_image_0000001193756416.png) + + +### measureText + +measureText\(text: string\): TextMetrics + +该方法返回一个文本测算的对象，通过该对象可以获取指定文本的宽度值。 + +- 参数 + + + + + + + + + + + + + + + +

参数

+

类型

+

必填

+

默认值

+

说明

+

text

+

string

+

是

+

""

+

需要进行测量的文本。

+
+ + +- 返回值 + + + + + + + + + +

类型

+

说明

+

TextMetrics

+

文本的尺寸信息

+
+ +- TextMetrics类型描述 + + + + + + + + + + + +

属性

+

类型

+

描述

+

width

+

number

+

字符串的宽度。

+
+ + +- 示例 + + ``` + @Entry + @Component + struct MeasureText { + private settings: RenderingContextSettings = new RenderingContextSettings(true,true) + private context: CanvasRenderingContext2D = new CanvasRenderingContext2D(this.settings) + build() { + Flex({ direction: FlexDirection.Column, alignItems: ItemAlign.Center, justifyContent: FlexAlign.Center }) { + Canvas(this.context) + .width('100%') + .height('100%') + .backgroundColor('#ffff00') + .onReady(() =>{ + this.context.font = '50px sans-serif' + this.context.fillText("Hello World!", 20, 100) + this.context.fillText("width:" + this.context.measureText("Hello World!").width, 20, 200) + }) + } + .width('100%') + .height('100%') + } + } + ``` + + ![](figures/zh-cn_image_0000001238476361.png) + + +### stroke + +stroke\(path?: Path2D\): void + +进行边框绘制操作。 + +- 参数 + + + + + + + + + + + + + + + +

参数

+

类型

+

必填

+

默认值

+

描述

+

path

+

Path2D

+

否

+

null

+

需要绘制的Path2D。

+
+ + +- 示例 + + ``` + @Entry + @Component + struct Stroke { + private settings: RenderingContextSettings = new RenderingContextSettings(true,true) + private context: CanvasRenderingContext2D = new CanvasRenderingContext2D(this.settings) + + build() { + Flex({ direction: FlexDirection.Column, alignItems: ItemAlign.Center, justifyContent: FlexAlign.Center }) { + Canvas(this.context) + .width('100%') + .height('100%') + .backgroundColor('#ffff00') + .onReady(() =>{ + this.context.moveTo(25, 25) + this.context.lineTo(25, 105) + this.context.strokeStyle = 'rgb(0,0,255)' + this.context.stroke() + }) + } + .width('100%') + .height('100%') + } + } + ``` + + ![](figures/zh-cn_image_0000001193436448.png) + + +### beginPath + +beginPath\(\): void + +创建一个新的绘制路径。 + +- 示例 + + ``` + @Entry + @Component + struct BeginPath { + private settings: RenderingContextSettings = new RenderingContextSettings(true,true) + private context: CanvasRenderingContext2D = new CanvasRenderingContext2D(this.settings) + + build() { + Flex({ direction: FlexDirection.Column, alignItems: ItemAlign.Center, justifyContent: FlexAlign.Center }) { + Canvas(this.context) + .width('100%') + .height('100%') + .backgroundColor('#ffff00') + .onReady(() =>{ + this.context.beginPath() + this.context.lineWidth = 6 + this.context.strokeStyle = '#0000ff' + this.context.moveTo(15, 80) + this.context.lineTo(280, 160) + this.context.stroke() + }) + } + .width('100%') + .height('100%') + } + } + ``` + + ![](figures/zh-cn_image_0000001238556395.png) + + +### moveTo + +moveTo\(x: number, y: number\): void + +路径从当前点移动到指定点。 + +- 参数 + + + + + + + + + + + + + + + + + + + + + +

参数

+

类型

+

必填

+

默认值

+

说明

+

x

+

number

+

是

+

0

+

指定位置的x坐标。

+

y

+

number

+

是

+

0

+

指定位置的y坐标。

+
+ + +- 示例 + + ``` + @Entry + @Component + struct MoveTo { + private settings: RenderingContextSettings = new RenderingContextSettings(true,true) + private context: CanvasRenderingContext2D = new CanvasRenderingContext2D(this.settings) + + build() { + Flex({ direction: FlexDirection.Column, alignItems: ItemAlign.Center, justifyContent: FlexAlign.Center }) { + Canvas(this.context) + .width('100%') + .height('100%') + .backgroundColor('#ffff00') + .onReady(() =>{ + this.context.beginPath() + this.context.moveTo(10, 10) + this.context.lineTo(280, 160) + this.context.stroke() + }) + } + .width('100%') + .height('100%') + } + } + ``` + + ![](figures/zh-cn_image_0000001193481094.png) + + +### lineTo + +lineTo\(x: number, y: number\): void + +从当前点到指定点进行路径连接。 + +- 参数 + + + + + + + + + + + + + + + + + + + + + +

参数

+

类型

+

必填

+

默认值

+

描述

+

x

+

number

+

是

+

0

+

指定位置的x坐标。

+

y

+

number

+

是

+

0

+

指定位置的y坐标。

+
+ + +- 示例 + + ``` + @Entry + @Component + struct LineTo { + private settings: RenderingContextSettings = new RenderingContextSettings(true,true) + private context: CanvasRenderingContext2D = new CanvasRenderingContext2D(this.settings) + + build() { + Flex({ direction: FlexDirection.Column, alignItems: ItemAlign.Center, justifyContent: FlexAlign.Center }) { + Canvas(this.context) + .width('100%') + .height('100%') + .backgroundColor('#ffff00') + .onReady(() =>{ + this.context.beginPath() + this.context.moveTo(10, 10) + this.context.lineTo(280, 160) + this.context.stroke() + }) + } + .width('100%') + .height('100%') + } + } + ``` + + ![](figures/zh-cn_image_0000001238601051.png) + + +### closePath + +closePath\(\): void + +结束当前路径形成一个封闭路径。 + +- 示例 + + ``` + @Entry + @Component + struct ClosePath { + private settings: RenderingContextSettings = new RenderingContextSettings(true,true) + private context: CanvasRenderingContext2D = new CanvasRenderingContext2D(this.settings) + + build() { + Flex({ direction: FlexDirection.Column, alignItems: ItemAlign.Center, justifyContent: FlexAlign.Center }) { + Canvas(this.context) + .width('100%') + .height('100%') + .backgroundColor('#ffff00') + .onReady(() =>{ + this.context.beginPath() + this.context.moveTo(30, 30) + this.context.lineTo(110, 30) + this.context.lineTo(70, 90) + this.context.closePath() + this.context.stroke() + }) + } + .width('100%') + .height('100%') + } + } + ``` + + ![](figures/zh-cn_image_0000001193321136.png) + + +### createPattern + +createPattern\(image: ImageBitmap, repetition: string\): void + +通过指定图像和重复方式创建图片填充的模板。 + +- 参数 + + + + + + + + + + + + + + + + + + + + + +

参数

+

类型

+

必填

+

默认值

+

描述

+

image

+

ImageBitmap

+

是

+

null

+

图源对象，具体参考 ImageBitmap对象。

+

repetition

+

string

+

是

+

“”

+

设置图像重复的方式，取值为：'repeat'、'repeat-x'、 'repeat-y'、'no-repeat'。

+
+ +- 示例 + + ``` + @Entry + @Component + struct CreatePattern { + private settings: RenderingContextSettings = new RenderingContextSettings(true,true) + private context: CanvasRenderingContext2D = new CanvasRenderingContext2D(this.settings) + private img:ImageBitmap = new ImageBitmap("common/images/icon.jpg") + + build() { + Flex({ direction: FlexDirection.Column, alignItems: ItemAlign.Center, justifyContent: FlexAlign.Center }) { + Canvas(this.context) + .width('100%') + .height('100%') + .backgroundColor('#ffff00') + .onReady(() =>{ + var pattern = this.context.createPattern(this.img, 'repeat') + this.context.fillStyle = pattern + this.context.fillRect(0, 0, 200, 200) + }) + } + .width('100%') + .height('100%') + } + } + ``` + + ![](figures/zh-cn_image_0000001238401029.png) + + +### bezierCurveTo + +bezierCurveTo\(cp1x: number, cp1y: number, cp2x: number, cp2y: number, x: number, y: number\): void + +创建三次贝赛尔曲线的路径。 + +- 参数 + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + +

参数

+

类型

+

必填

+

默认值

+

描述

+

cp1x

+

number

+

是

+

0

+

第一个贝塞尔参数的x坐标值。

+

cp1y

+

number

+

是

+

0

+

第一个贝塞尔参数的y坐标值。

+

cp2x

+

number

+

是

+

0

+

第二个贝塞尔参数的x坐标值。

+

cp2y

+

number

+

是

+

0

+

第二个贝塞尔参数的y坐标值。

+

x

+

number

+

是

+

0

+

路径结束时的x坐标值。

+

y

+

number

+

是

+

0

+

路径结束时的y坐标值。

+
+ + +- 示例 + + ``` + @Entry + @Component + struct BezierCurveTo { + private settings: RenderingContextSettings = new RenderingContextSettings(true,true) + private context: CanvasRenderingContext2D = new CanvasRenderingContext2D(this.settings) + + build() { + Flex({ direction: FlexDirection.Column, alignItems: ItemAlign.Center, justifyContent: FlexAlign.Center }) { + Canvas(this.context) + .width('100%') + .height('100%') + .backgroundColor('#ffff00') + .onReady(() =>{ + this.context.beginPath() + this.context.moveTo(10, 10) + this.context.bezierCurveTo(20, 100, 200, 100, 200, 20) + this.context.stroke() + }) + } + .width('100%') + .height('100%') + } + } + ``` + + ![](figures/zh-cn_image_0000001238281067.png) + + +### quadraticCurveTo + +quadraticCurveTo\(cpx: number, cpy: number, x: number, y: number\): void + +创建二次贝赛尔曲线的路径。 + +- 参数 + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + +

参数

+

类型

+

必填

+

默认值

+

描述

+

cpx

+

number

+

是

+

0

+

贝塞尔参数的x坐标值。

+

cpy

+

number

+

是

+

0

+

贝塞尔参数的y坐标值。

+

x

+

number

+

是

+

0

+

路径结束时的x坐标值。

+

y

+

number

+

是

+

0

+

路径结束时的y坐标值。

+
+ + +- 示例 + + ``` + @Entry + @Component + struct QuadraticCurveTo { + private settings: RenderingContextSettings = new RenderingContextSettings(true,true); + private context: CanvasRenderingContext2D = new CanvasRenderingContext2D(this.settings); + build() { + Flex({ direction: FlexDirection.Column, alignItems: ItemAlign.Center, justifyContent: FlexAlign.Center }) { + Canvas(this.context) + .width('100%') + .height('100%') + .backgroundColor('#ffff00') + .onReady(() =>{ + this.context.beginPath(); + this.context.moveTo(20, 20); + this.context.quadraticCurveTo(100, 100, 200, 20); + this.context.stroke(); + }) + } + .width('100%') + .height('100%') + } + } + ``` + + ![](figures/zh-cn_image_0000001193641084.png) + + +### arc + +arc\(x: number, y: number, radius: number, startAngle: number, endAngle: number, anticlockwise?: boolean\): void + +绘制弧线路径。 + +- 参数 + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + +

参数

+

类型

+

必填

+

默认值

+

描述

+

x

+

number

+

是

+

0

+

弧线圆心的x坐标值。

+

y

+

number

+

是

+

0

+

弧线圆心的y坐标值。

+

radius

+

number

+

是

+

0

+

弧线的圆半径。

+

startAngle

+

number

+

是

+

0

+

弧线的起始弧度。

+

endAngle

+

number

+

是

+

0

+

弧线的终止弧度。

+

anticlockwise

+

boolean

+

否

+

false

+

是否逆时针绘制圆弧。

+
+ + +- 示例 + + ``` + @Entry + @Component + struct Arc { + private settings: RenderingContextSettings = new RenderingContextSettings(true,true) + private context: CanvasRenderingContext2D = new CanvasRenderingContext2D(this.settings) + + build() { + Flex({ direction: FlexDirection.Column, alignItems: ItemAlign.Center, justifyContent: FlexAlign.Center }) { + Canvas(this.context) + .width('100%') + .height('100%') + .backgroundColor('#ffff00') + .onReady(() =>{ + this.context.beginPath() + this.context.arc(100, 75, 50, 0, 6.28) + this.context.stroke() + }) + } + .width('100%') + .height('100%') + } + } + ``` + + ![](figures/zh-cn_image_0000001193801070.png) + + +### arcTo + +arcTo\(x1: number, y1: number, x2: number, y2: number, radius: number\): void + +依据圆弧经过的点和圆弧半径创建圆弧路径。 + +- 参数 + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + +

参数

+

类型

+

必填

+

默认值

+

描述

+

x1

+

number

+

是

+

0

+

圆弧经过的第一个点的x坐标值。

+

y1

+

number

+

是

+

0

+

圆弧经过的第一个点的y坐标值。

+

x2

+

number

+

是

+

0

+

圆弧经过的第二个点的x坐标值。

+

y2

+

number

+

是

+

0

+

圆弧经过的第二个点的y坐标值。

+

radius

+

number

+

是

+

0

+

圆弧的圆半径值。

+
+ + +- 示例 + + ``` + @Entry + @Component + struct ArcTo { + private settings: RenderingContextSettings = new RenderingContextSettings(true,true) + private context: CanvasRenderingContext2D = new CanvasRenderingContext2D(this.settings) + + build() { + Flex({ direction: FlexDirection.Column, alignItems: ItemAlign.Center, justifyContent: FlexAlign.Center }) { + Canvas(this.context) + .width('100%') + .height('100%') + .backgroundColor('#ffff00') + .onReady(() =>{ + this.context.moveTo(100, 20); + this.context.arcTo(150, 20, 150, 70, 50); + this.context.stroke(); + }) + } + .width('100%') + .height('100%') + } + } + ``` + + ![](figures/zh-cn_image_0000001238521019.png) + + +### ellipse + +ellipse\(x: number, y: number, radiusX: number, radiusY: number, rotation: number, startAngle: number, endAngle: number, anticlockwise?: boolean\): void + +在规定的矩形区域绘制一个椭圆。 + +- 参数 + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + +

参数

+

类型

+

必填

+

默认值

+

说明

+

x

+

number

+

是

+

0

+

椭圆圆心的x轴坐标。

+

y

+

number

+

是

+

0

+

椭圆圆心的y轴坐标。

+

radiusX

+

number

+

是

+

0

+

椭圆x轴的半径长度。

+

radiusY

+

number

+

是

+

0

+

椭圆y轴的半径长度。

+

rotation

+

number

+

是

+

0

+

椭圆的旋转角度，单位为弧度。

+

startAngle

+

number

+

是

+

0

+

椭圆绘制的起始点角度，以弧度表示。

+

endAngle

+

number

+

是

+

0

+

椭圆绘制的结束点角度，以弧度表示。

+

anticlockwise

+

number

+

否

+

0

+

是否以逆时针方向绘制椭圆，0为顺时针，1为逆时针。(可选参数，默认为0)

+
+ + +- 示例 + + ``` + @Entry + @Component + struct Ellipse { + private settings: RenderingContextSettings = new RenderingContextSettings(true,true) + private context: CanvasRenderingContext2D = new CanvasRenderingContext2D(this.settings) + + build() { + Flex({ direction: FlexDirection.Column, alignItems: ItemAlign.Center, justifyContent: FlexAlign.Center }) { + Canvas(this.context) + .width('100%') + .height('100%') + .backgroundColor('#ffff00') + .onReady(() =>{ + this.context.beginPath() + this.context.ellipse(200, 200, 50, 100, Math.PI * 0.25, Math.PI * 0.5, Math.PI, true) + this.context.stroke() + }) + Button('back') + .onClick(() => { + router.back() + }) + } + .width('100%') + .height('100%') + } + } + ``` + + ![](figures/zh-cn_image_0000001193481096.png) + + +### rect + +rect\(x: number, y: number, width: number, height: number\): void + +创建矩形路径。 + +- 参数 + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + +

参数

+

类型

+

必填

+

默认值

+

描述

+

x

+

number

+

是

+

0

+

指定矩形的左上角x坐标值。

+

y

+

number

+

是

+

0

+

指定矩形的左上角y坐标值。

+

width

+

number

+

是

+

0

+

指定矩形的宽度。

+

height

+

number

+

是

+

0

+

指定矩形的高度。

+
+ + +- 示例 + + ``` + @Entry + @Component + struct Rect { + private settings: RenderingContextSettings = new RenderingContextSettings(true,true) + private context: CanvasRenderingContext2D = new CanvasRenderingContext2D(this.settings) + + build() { + Flex({ direction: FlexDirection.Column, alignItems: ItemAlign.Center, justifyContent: FlexAlign.Center }) { + Canvas(this.context) + .width('100%') + .height('100%') + .backgroundColor('#ffff00') + .onReady(() =>{ + this.context.rect(20, 20, 100, 100) // Create a 100*100 rectangle at (20, 20) + this.context.stroke() + }) + } + .width('100%') + .height('100%') + } + } + ``` + + ![](figures/zh-cn_image_0000001238601053.png) + + +### fill + +fill\(\): void + +对封闭路径进行填充。 + +- 示例 + + ``` + @Entry + @Component + struct Fill { + private settings: RenderingContextSettings = new RenderingContextSettings(true,true) + private context: CanvasRenderingContext2D = new CanvasRenderingContext2D(this.settings) + + build() { + Flex({ direction: FlexDirection.Column, alignItems: ItemAlign.Center, justifyContent: FlexAlign.Center }) { + Canvas(this.context) + .width('100%') + .height('100%') + .backgroundColor('#ffff00') + .onReady(() =>{ + this.context.rect(20, 20, 100, 100) // Create a 100*100 rectangle at (20, 20) + this.context.fill() + }) + } + .width('100%') + .height('100%') + } + } + ``` + + ![](figures/zh-cn_image_0000001193321138.png) + + +### clip + +clip\(\): void + +设置当前路径为剪切路径。 + +- 示例 + + ``` + @Entry + @Component + struct Clip { + private settings: RenderingContextSettings = new RenderingContextSettings(true,true) + private context: CanvasRenderingContext2D = new CanvasRenderingContext2D(this.settings) + + build() { + Flex({ direction: FlexDirection.Column, alignItems: ItemAlign.Center, justifyContent: FlexAlign.Center }) { + Canvas(this.context) + .width('100%') + .height('100%') + .backgroundColor('#ffff00') + .onReady(() =>{ + this.context.rect(0, 0, 200, 200) + this.context.stroke() + this.context.clip() + this.context.fillStyle = "rgb(255,0,0)" + this.context.fillRect(0, 0, 150, 150) + }) + Button('back') + .onClick(() => { + router.back() + }) + } + .width('100%') + .height('100%') + } + } + ``` + + ![](figures/zh-cn_image_0000001238401031.png) + + +### rotate + +rotate\(rotate: number\): void + +针对当前坐标轴进行顺时针旋转。 + +- 参数 + + + + + + + + + + + + + + + +

参数

+

类型

+

必填

+

默认值

+

描述

+

rotate

+

number

+

是

+

0

+

设置顺时针旋转的弧度值，可以通过Math.PI / 180将角度转换为弧度值。

+
+ + +- 示例 + + ``` + @Entry + @Component + struct Rotate { + private settings: RenderingContextSettings = new RenderingContextSettings(true,true) + private context: CanvasRenderingContext2D = new CanvasRenderingContext2D(this.settings) + + build() { + Flex({ direction: FlexDirection.Column, alignItems: ItemAlign.Center, justifyContent: FlexAlign.Center }) { + Canvas(this.context) + .width('100%') + .height('100%') + .backgroundColor('#ffff00') + .onReady(() =>{ + this.context.rotate(45 * Math.PI / 180) // Rotate the rectangle 45 degrees + this.context.fillRect(70, 20, 50, 50) + }) + } + .width('100%') + .height('100%') + } + } + ``` + + ![](figures/zh-cn_image_0000001238281069.png) + + +### scale + +scale\(x: number, y: number\): void + +设置canvas画布的缩放变换属性，后续的绘制操作将按照缩放比例进行缩放。 + +- 参数 + + + + + + + + + + + + + + + + + + + + + +

参数

+

类型

+

必填

+

默认值

+

描述

+

x

+

number

+

是

+

0

+

设置水平方向的缩放值。

+

y

+

number

+

是

+

0

+

设置垂直方向的缩放值。

+
+ + +- 示例 + + ``` + @Entry + @Component + struct Scale { + private settings: RenderingContextSettings = new RenderingContextSettings(true,true) + private context: CanvasRenderingContext2D = new CanvasRenderingContext2D(this.settings) + + build() { + Flex({ direction: FlexDirection.Column, alignItems: ItemAlign.Center, justifyContent: FlexAlign.Center }) { + Canvas(this.context) + .width('100%') + .height('100%') + .backgroundColor('#ffff00') + .onReady(() =>{ + this.context.strokeRect(10, 10, 25, 25) + this.context.scale(2, 2) // Scale to 200% + this.context.strokeRect(10, 10, 25, 25) + }) + } + .width('100%') + .height('100%') + } + } + ``` + + ![](figures/zh-cn_image_0000001193641086.png) + + +### transform + +transform\(scaleX: number, skewX: number, skewY: number, scaleY: number, translateX: number, translateY: number\): void + +transform方法对应一个变换矩阵，想对一个图形进行变化的时候，只要设置此变换矩阵相应的参数，对图形的各个定点的坐标分别乘以这个矩阵，就能得到新的定点的坐标。矩阵变换效果可叠加。 + +>![](../../public_sys-resources/icon-note.gif) **说明：** +>变换后的坐标计算方式（x和y为变换前坐标，x'和y'为变换后坐标）： +>- x' = scaleX \* x + skewY \* y + translateX +>- y' = skewX \* x + scaleY \* y + translateY + +- 参数 + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + +

参数

+

类型

+

必填

+

默认值

+

描述

+

scaleX

+

number

+

是

+

0

+

指定水平缩放值。

+

skewX

+

number

+

是

+

0

+

指定水平倾斜值。

+

skewY

+

number

+

是

+

0

+

指定垂直倾斜值。

+

scaleY

+

number

+

是

+

0

+

指定垂直缩放值。

+

translateX

+

number

+

是

+

0

+

指定水平移动值。

+

translateY

+

number

+

是

+

0

+

指定垂直移动值。

+
+ +- 示例 + + ``` + @Entry + @Component + struct Transform { + private settings: RenderingContextSettings = new RenderingContextSettings(true,true) + private context: RenderingContext = new RenderingContext(this.settings) + + build() { + Flex({ direction: FlexDirection.Column, alignItems: ItemAlign.Center, justifyContent: FlexAlign.Center }) { + Canvas(this.context) + .width('100%') + .height('100%') + .backgroundColor('#ffff00') + .onReady(() =>{ + this.context.fillStyle = 'rgb(0,0,0)' + this.context.fillRect(0, 0, 100, 100) + this.context.transform(1, 0.5, -0.5, 1, 10, 10) + this.context.fillStyle = 'rgb(255,0,0)' + this.context.fillRect(0, 0, 100, 100) + this.context.transform(1, 0.5, -0.5, 1, 10, 10) + this.context.fillStyle = 'rgb(0,0,255)' + this.context.fillRect(0, 0, 100, 100) + }) + } + .width('100%') + .height('100%') + } + } + ``` + + ![](figures/zh-cn_image_0000001193801072.png) + + +### setTransform + +setTransform\(scaleX: number, skewX: number, skewY: number, scale: number, translateX: number, translateY: number\): void + +setTransfrom方法使用的参数和transform\(\)方法相同，但setTransform\(\)方法会重置现有的变换矩阵并创建新的变换矩阵。 + +- 参数 + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + +

参数

+

类型

+

必填

+

默认值

+

描述

+

scaleX

+

number

+

是

+

0

+

指定水平缩放值。

+

skewX

+

number

+

是

+

0

+

指定水平倾斜值。

+

skewY

+

number

+

是

+

0

+

指定垂直倾斜值。

+

scaleY

+

number

+

是

+

0

+

指定垂直缩放值。

+

translateX

+

number

+

是

+

0

+

指定水平移动值。

+

translateY

+

number

+

是

+

0

+

指定垂直移动值。

+
+ +- 示例 + + ``` + @Entry + @Component + struct SetTransform { + private settings: RenderingContextSettings = new RenderingContextSettings(true,true) + private context: CanvasRenderingContext2D = new CanvasRenderingContext2D(this.settings) + + build() { + Flex({ direction: FlexDirection.Column, alignItems: ItemAlign.Center, justifyContent: FlexAlign.Center }) { + Canvas(this.context) + .width('100%') + .height('100%') + .backgroundColor('#ffff00') + .onReady(() =>{ + this.context.fillStyle = 'rgb(255,0,0)' + this.context.fillRect(0, 0, 100, 100) + this.context.setTransform(1,0.5, -0.5, 1, 10, 10) + this.context.fillStyle = 'rgb(0,0,255)' + this.context.fillRect(0, 0, 100, 100) + }) + } + .width('100%') + .height('100%') + } + } + ``` + + ![](figures/zh-cn_image_0000001238521021.png) + + +### translate + +translate\(x: number, y: number\): void + +移动当前坐标系的原点。 + +- 参数 + + + + + + + + + + + + + + + + + + + + + +

参数

+

类型

+

必填

+

默认值

+

描述

+

x

+

number

+

是

+

0

+

设置水平平移量。

+

y

+

number

+

是

+

0

+

设置竖直平移量。

+
+ +- 示例 + + ``` + @Entry + @Component + struct Translate { + private settings: RenderingContextSettings = new RenderingContextSettings(true,true) + private context: CanvasRenderingContext2D = new CanvasRenderingContext2D(this.settings) + + build() { + Flex({ direction: FlexDirection.Column, alignItems: ItemAlign.Center, justifyContent: FlexAlign.Center }) { + Canvas(this.context) + .width('100%') + .height('100%') + .backgroundColor('#ffff00') + .onReady(() =>{ + this.context.fillRect(10, 10, 50, 50) + this.context.translate(70, 70) + this.context.fillRect(10, 10, 50, 50) + }) + } + .width('100%') + .height('100%') + } + } + ``` + + ![](figures/zh-cn_image_0000001193481098.png) + + +### drawImage + +drawImage\(image: ImageBitmap, dx: number, dy: number\): void + +drawImage\(image: ImageBitmap, dx: number, dy: number, dWidth: number, dHeight: number\): void + +drawImage\(image: ImageBitmap, sx: number, sy: number, sWidth: number, sHeight: number, dx: number, dy: number, dWidth: number, dHeight: number\):void + +进行图像绘制。 + +- 参数 + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + +

参数

+

类型

+

必填

+

默认值

+

描述

+

image

+

ImageBitmap

+

是

+

null

+

图片资源，请参考ImageBitmap。

+

sx

+

number

+

否

+

0

+

裁切源图像时距离源图像左上角的x坐标值。

+

sy

+

number

+

否

+

0

+

裁切源图像时距离源图像左上角的y坐标值。

+

sWidth

+

number

+

否

+

0

+

裁切源图像时需要裁切的宽度。

+

sHeight

+

number

+

否

+

0

+

裁切源图像时需要裁切的高度。

+

dx

+

number

+

是

+

0

+

绘制区域左上角在x轴的位置。

+

dy

+

number

+

是

+

0

+

绘制区域左上角在y 轴的位置。

+

dWidth

+

number

+

否

+

0

+

绘制区域的宽度。

+

dHeight

+

number

+

否

+

0

+

绘制区域的高度。

+
+ + +- 示例 + + ``` + @Entry + @Component + struct ImageExample { + private settings: RenderingContextSettings = new RenderingContextSettings(true,true); + private context: CanvasRenderingContext2D = new CanvasRenderingContext2D(this.settings); + private img:ImageBitmap = new ImageBitmap("common/images/example.jpg"); + build() { + Flex({ direction: FlexDirection.Column, alignItems: ItemAlign.Center, justifyContent: FlexAlign.Center }) { + Canvas(this.context) + .width('100%') + .height('100%') + .backgroundColor('#ffff00') + .onReady(() =>{ + this.context.drawImage( this.img,0,0,500,500,0,0,400,200); + }) + } + .width('100%') + .height('100%') + } + } + ``` + + ![](figures/zh-cn_image_0000001192915154.png) + + +### createImageData + +createImageData\(width: number, height: number\): Object + +创建新的ImageData 对象，请参考[ImageData](ts-components-canvas-imagedata.md)。 + +- 参数 + + + + + + + + + + + + + + + + + + + + + +

参数

+

类型

+

必填

+

默认

+

描述

+

width

+

number

+

是

+

0

+

ImageData的宽度。

+

height

+

number

+

是

+

0

+

ImageData的高度。

+
+ + +### createImageData + +createImageData\(imageData: Object\): Object + +创建新的ImageData 对象，请参考[ImageData](ts-components-canvas-imagedata.md)。 + +- 参数 + + + + + + + + + + + + + + + +

参数

+

类型

+

必填

+

默认

+

描述

+

imagedata

+

Object

+

是

+

null

+

复制现有的ImageData对象。

+
+ + +### getImageData + +getImageData\(sx: number, sy: number, sw: number, sh: number\): Object + +以当前canvas指定区域内的像素创建[ImageData](ts-components-canvas-imagedata.md)对象。 + +- 参数 + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + +

参数

+

类型

+

必填

+

默认值

+

描述

+

sx

+

number

+

是

+

0

+

需要输出的区域的左上角x坐标。

+

sy

+

number

+

是

+

0

+

需要输出的区域的左上角y坐标。

+

sw

+

number

+

是

+

0

+

需要输出的区域的宽度。

+

sh

+

number

+

是

+

0

+

需要输出的区域的高度。

+
+ + +### putImageData + +putImageData\(imageData: Object, dx: number, dy: number, dirtyX?: number, dirtyY?: number, dirtyWidth?: number, dirtyHeight?: number\): void + +使用[ImageData](ts-components-canvas-imagedata.md)数据填充新的矩形区域。 + +- 参数 + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + +

参数

+

类型

+

必填

+

默认值

+

描述

+

imagedata

+

Object

+

是

+

null

+

包含像素值的ImageData对象。

+

dx

+

number

+

是

+

0

+

填充区域在x轴方向的偏移量。

+

dy

+

number

+

是

+

0

+

填充区域在y轴方向的偏移量。

+

dirtyX

+

number

+

否

+

0

+

源图像数据矩形裁切范围左上角距离源图像左上角的x轴偏移量。

+

dirtyY

+

number

+

否

+

0

+

源图像数据矩形裁切范围左上角距离源图像左上角的y轴偏移量。

+

dirtyWidth

+

number

+

否

+

imagedata的宽度

+

源图像数据矩形裁切范围的宽度。

+

dirtyHeight

+

number

+

否

+

imagedata的高度

+

源图像数据矩形裁切范围的高度。

+
+ +- 示例 + + ``` + @Entry + @Component + struct PutImageData { + private settings: RenderingContextSettings = new RenderingContextSettings(true,true) + private context: CanvasRenderingContext2D = new CanvasRenderingContext2D(this.settings) + + build() { + Flex({ direction: FlexDirection.Column, alignItems: ItemAlign.Center, justifyContent: FlexAlign.Center }) { + Canvas(this.context) + .width('100%') + .height('100%') + .backgroundColor('#ffff00') + .onReady(() =>{ + var imageData = this.context.createImageData(100, 100) + for (var i = 0; i < imageData.data.length; i += 4) { + imageData.data[i + 0] = 255 + imageData.data[i + 1] = 0 + imageData.data[i + 2] = 255 + imageData.data[i + 3] = 255 + } + this.context.putImageData(imageData, 10, 10) + }) + } + .width('100%') + .height('100%') + } + } + ``` + + ![](figures/zh-cn_image_0000001193075134.png) + + +### restore + +restore\(\): void + +对保存的绘图上下文进行恢复。 + +- 示例 + + ``` + @Entry + @Component + struct Restore { + private settings: RenderingContextSettings = new RenderingContextSettings(true,true) + private context: CanvasRenderingContext2D = new CanvasRenderingContext2D(this.settings) + + build() { + Flex({ direction: FlexDirection.Column, alignItems: ItemAlign.Center, justifyContent: FlexAlign.Center }) { + Canvas(this.context) + .width('100%') + .height('100%') + .backgroundColor('#ffff00') + .onReady(() =>{ + this.controller.restore() + }) + } + .width('100%') + .height('100%') + } + } + ``` + + +### save + +save\(\): void + +对当前的绘图上下文进行保存。 + +- 示例 + + ``` + @Entry + @Component + struct Restore { + private settings: RenderingContextSettings = new RenderingContextSettings(true,true) + private context: CanvasRenderingContext2D = new CanvasRenderingContext2D(this.settings) + + build() { + Flex({ direction: FlexDirection.Column, alignItems: ItemAlign.Center, justifyContent: FlexAlign.Center }) { + Canvas(this.context) + .width('100%') + .height('100%') + .backgroundColor('#ffff00') + .onReady(() =>{ + this.context.save() + }) + } + .width('100%') + .height('100%') + } + } + ``` + + +### createLinearGradient + +createLinearGradient\(x0: number, y0: number, x1: number, y1: number\): void + +创建一个线性渐变色。 + +- 参数 + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + +

参数

+

类型

+

必填

+

默认值

+

描述

+

x0

+

number

+

是

+

0

+

起点的x轴坐标。

+

y0

+

number

+

是

+

0

+

起点的y轴坐标。

+

x1

+

number

+

是

+

0

+

终点的x轴坐标。

+

y1

+

number

+

是

+

0

+

终点的y轴坐标。

+
+ +- 示例 + + ``` + @Entry + @Component + struct CreateLinearGradient { + private settings: RenderingContextSettings = new RenderingContextSettings(true,true) + private context: CanvasRenderingContext2D = new CanvasRenderingContext2D(this.settings) + private gra:CanvasGradient = new CanvasGradient() + + build() { + Flex({ direction: FlexDirection.Column, alignItems: ItemAlign.Center, justifyContent: FlexAlign.Center }) { + Canvas(this.context) + .width('100%') + .height('100%') + .backgroundColor('#ffff00') + .onReady(() =>{ + var grad = this.context.createLinearGradient(50,0, 300,100) + this.gra.addColorStop(0.0, 'red') + this.gra.addColorStop(0.5, 'white') + this.gra.addColorStop(1.0, 'green') + this.context.fillStyle = grad + this.context.fillRect(0, 0, 500, 500) + }) + } + .width('100%') + .height('100%') + } + } + ``` + + ![](figures/zh-cn_image_0000001237555149.png) + + +### createRadialGradient + +createRadialGradient\(x0: number, y0: number, r0: number, x1: number, y1: number, r1: number\): void + +创建一个径向渐变色。 + +- 参数 + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + +

参数

+

类型

+

必填

+

默认值

+

描述

+

x0

+

number

+

是

+

0

+

起始圆的x轴坐标。

+

y0

+

number

+

是

+

0

+

起始圆的y轴坐标。

+

r0

+

number

+

是

+

0

+

起始圆的半径。必须是非负且有限的。

+

x1

+

number

+

是

+

0

+

终点圆的x轴坐标。

+

y1

+

number

+

是

+

0

+

终点圆的y轴坐标。

+

r1

+

number

+

是

+

0

+

终点圆的半径。必须为非负且有限的。

+
+ +- 示例 + + ``` + @Entry + @Component + struct CreateRadialGradient { + private settings: RenderingContextSettings = new RenderingContextSettings(true,true) + private context: CanvasRenderingContext2D = new CanvasRenderingContext2D(this.settings) + private gra:CanvasGradient = new CanvasGradient() + + build() { + Flex({ direction: FlexDirection.Column, alignItems: ItemAlign.Center, justifyContent: FlexAlign.Center }) { + Canvas(this.context) + .width('100%') + .height('100%') + .backgroundColor('#ffff00') + .onReady(() =>{ + var grad = this.context.createRadialGradient(200,200,50, 200,200,200) + this.gra.addColorStop(0.0, 'red') + this.gra.addColorStop(0.5, 'white') + this.gra.addColorStop(1.0, 'green') + this.context.fillStyle = grad + this.context.fillRect(0, 0, 500, 500) + }) + } + .width('100%') + .height('100%') + } + } + ``` + + ![](figures/zh-cn_image_0000001192755188.png) + + +## CanvasPattern + +一个Object对象, 通过[createPattern](#section1643216163371)方法创建。 + diff --git a/zh-cn/application-dev/reference/arkui-ts/ts-combined-gestures.md b/zh-cn/application-dev/reference/arkui-ts/ts-combined-gestures.md index 56172a550ec27fe8e5717b42fbe82cd9ede3f544..17fcb8911b13647951beaa32a8d2b97ccf6130ab 100644 --- a/zh-cn/application-dev/reference/arkui-ts/ts-combined-gestures.md +++ b/zh-cn/application-dev/reference/arkui-ts/ts-combined-gestures.md @@ -1,4 +1,11 @@ -# 组合手势 +# 组合手势 + +>![](../../public_sys-resources/icon-note.gif) **说明：** +>从API Version 7开始支持。后续版本如有新增内容，则采用上角标单独标记该内容的起始版本。 + +## 权限列表 + +无 ## 接口 @@ -6,43 +13,42 @@ GestureGroup\(mode: GestureMode, ...gesture: GestureType\[\]\) - 参数 - -

参数名

+ - - - - - - - - - - - - - - @@ -50,26 +56,25 @@ GestureGroup\(mode: GestureMode, ...gesture: GestureType\[\]\) - GestureMode枚举说明 - -

参数名

参数类型

+

参数类型

必填

+

必填

默认值

+

默认值

参数描述

+

参数描述

mode

+

mode

GestureMode

+

GestureMode

是

+

是

-

+

-

设置组合手势识别模式。

+

设置组合手势识别模式。

gesture

+

gesture

TapGesture

-

| LongPressGesture

-

| PanGesture

-

| PinchGesture

-

| RotationGesture

+

TapGesture

+

| LongPressGesture

+

| PanGesture

+

| PinchGesture

+

| RotationGesture

是

+

是

-

+

-

可变长参数，1个或者多个基础手势类型，这些手势会被组合识别。

+

可变长参数，1个或者多个基础手势类型，这些手势会被组合识别。

名称

+ - - - - - - - @@ -78,16 +83,15 @@ GestureGroup\(mode: GestureMode, ...gesture: GestureType\[\]\) ## 事件 - -

名称

描述

+

描述

Sequence

+

Sequence

顺序识别，按照手势的注册顺序识别手势，直到所有手势识别成功。当有一个手势识别失败时，所有手势识别失败。

+

顺序识别，按照手势的注册顺序识别手势，直到所有手势识别成功。当有一个手势识别失败时，所有手势识别失败。

Parallel

+

Parallel

并发识别，注册的手势同时识别，直到所有手势识别结束，手势识别互相不影响。

+

并发识别，注册的手势同时识别，直到所有手势识别结束，手势识别互相不影响。

Exclusive

+

Exclusive

互斥识别，注册的手势同时识别，若有一个手势识别成功，则结束手势识别。

+

互斥识别，注册的手势同时识别，若有一个手势识别成功，则结束手势识别。

名称

+ - - - diff --git a/zh-cn/application-dev/reference/arkui-ts/ts-component-based.md b/zh-cn/application-dev/reference/arkui-ts/ts-component-based.md deleted file mode 100644 index fec4b7a92e43a9840e697c2aeccd0e25374ad3df..0000000000000000000000000000000000000000 --- a/zh-cn/application-dev/reference/arkui-ts/ts-component-based.md +++ /dev/null @@ -1,15 +0,0 @@ -# 组件化 - -- **[@Component](ts-component-based-component.md)** - -- **[@Entry](ts-component-based-entry.md)** - -- **[@Preview](ts-component-based-preview.md)** - -- **[@Builder](ts-component-based-builder.md)** - -- **[@Extend](ts-component-based-extend.md)** - -- **[@CustomDialog](ts-component-based-customdialog.md)** - - diff --git a/zh-cn/application-dev/reference/arkui-ts/ts-component-creation-re-initialization.md b/zh-cn/application-dev/reference/arkui-ts/ts-component-creation-re-initialization.md deleted file mode 100644 index 36a09e5b7418e00de905f62995682bed3f22ab1c..0000000000000000000000000000000000000000 --- a/zh-cn/application-dev/reference/arkui-ts/ts-component-creation-re-initialization.md +++ /dev/null @@ -1,90 +0,0 @@ -# 组件创建和重新初始化示例 - -``` -@Entry -@Component -struct ParentComp { - @State isCountDown: boolean = true - build() { - Column() { - Text(this.isCountDown ? 'Count Down' : 'Stopwatch') - if (this.isCountDown) { - Image('countdown.png') - TimerComponent({counter: 10, changePerSec: -1, showInColor: Color.Red}) - } else { - Image('stopwatch.png') - TimerComponent({counter: 0, changePerSec: +1, showInColor: Color.Black }) - } - Button(this.isCountDown ? 'Swtich to Stopwatch' : 'Switch to Count Down') - .onClick(() => {this.isCountDown = !this.isCountDown}) - } - } -} - -// Manage and display a count down / stop watch timer -@Component -struct TimerComponent { - @State counter: number = 0 - private changePerSec: number = -1 - private showInColor: Color = Color.Black - private timerId : number = -1 - - build() { - Text(`${this.counter}sec`) - .fontColor(this.showInColor) - } - - aboutToAppear() { - this.timerId = setInterval(() => {this.counter += this.changePerSec}, 1000) - } - - aboutToDisappear() { - if (this.timerId > 0) { - clearTimeout(this.timerId) - this.timerId = -1 - } - } -} -``` - -## 初始创建和渲染 - -1. 创建父组件**ParentComp**； -2. 本地初始化**ParentComp**的状态变量**isCountDown**； -3. 执行**ParentComp**的**build**函数； -4. 创建**Column**内置组件； - 1. 创建**Text**内置组件，设置其文本展示内容，并将**Text**组件实例添加到**Column**中； - 2. 判断if条件，创建**true**分支上的组件； - 1. 创建**Image**内置组件，并设置其图片源地址； - 2. 使用给定的构造函数创建**TimerComponent**； - 1. 创建**TimerComponent**对象； - 2. 本地初始化成员变量初始值； - 3. 使用**TimerComponent**构造函数提供的参数更新成员变量的值； - 4. 执行**TimerComponent**的**aboutToAppear**函数； - 5. 执行**TimerComponent**的**build**函数，创建相应的UI描述结构； - - 3. 创建**Button**内置组件，设置相应的内容。 - - -## 状态更新 - -用户单击按钮时： - -1. **ParentComp**的**isCountDown**状态变量的值更改为false； -2. 执行**ParentComp**的**build**函数； -3. **Column**内置组件会被框架重用并执行重新初始化； -4. **Column**的子组件会重用内存中的对象，但会进行重新初始化； - 1. **Text**内置组件会被重用，但使用新的文本内容进行重新初始化； - 2. 判断if条件，使用false分支上的组件； - 1. 原来true分支上的组件不在使用，这些组件会进行销毁； - 1. 创建的**Image**内置组件实例进行销毁； - 2. **TimerComponent**组件实例进行销毁，**aboutToDisappear**函数被调用； - - 2. 创建false分支上的组件； - 1. 创建**Image**内置组件，并设置其图片源地址； - 2. 使用给定的构造函数重新创建**TimerComponent**； - 3. 新创建的**TimerComponent**进行初始化，并调用**aboutToAppear**函数和**build**函数。 - - 3. **Button**内置组件会被重用，但使用新的图片源地址。 - - diff --git a/zh-cn/application-dev/reference/arkui-ts/ts-component-states-state.md b/zh-cn/application-dev/reference/arkui-ts/ts-component-states-state.md deleted file mode 100644 index 29e286f14e551f1540790124e7539fc58103fffa..0000000000000000000000000000000000000000 --- a/zh-cn/application-dev/reference/arkui-ts/ts-component-states-state.md +++ /dev/null @@ -1,94 +0,0 @@ -# @State - -**@State**装饰的变量是组件内部的状态数据，当这些状态数据被修改时，将会调用所在组件的**build**方法进行UI刷新。 - -**@State**状态数据具有以下特征： - -- **支持多种类型：**允许如下强类型的按值和按引用类型：**class**、**number**、**boolean**、**string**，以及这些类型的数组，即**Array**、**Array**、**Array**、**Array**。不允许**object**和**any。** -- **支持多实例：**组件不同实例的内部状态数据独立。 -- **内部私有：**标记为**@State**的属性不能直接在组件外部修改。它的生命周期取决于它所在的组件。 -- **需要本地初始化：**必须为所有**@State**变量分配初始值，将变量保持未初始化可能导致框架行为未定义。 -- **创建自定义组件时支持通过状态变量名设置初始值：**在创建组件实例时，可以通过变量名显式指定**@State**状态属性的初始值**。** - -## 简单类型的状态属性示例 - -``` -@Entry -@Component -struct MyComponent { - @State count: number = 0 - // MyComponent provides a method for modifying the @State status data member. - private toggleClick() { - this.count += 1 - } - - build() { - Column() { - Button() { - Text(`click times: ${this.count}`) - .fontSize(10) - }.onClick(this.toggleClick.bind(this)) - } - } -} -``` - -## 复杂类型的状态变量示例 - -``` -// Customize the status data class. -class Model { - value: string - constructor(value: string) { - this.value = value - } -} - -@Entry -@Component -struct EntryComponent { - build() { - Column() { - MyComponent({count: 1, increaseBy: 2}) // MyComponent1 in this document - MyComponent({title: {value: 'Hello, World 2'}, count: 7}) //MyComponent2 in this document - } - } -} - -@Component -struct MyComponent { - @State title: Model = {value: 'Hello World'} - @State count: number = 0 - private toggle: string = 'Hello World' - private increaseBy: number = 1 - - build() { - Column() { - Text(`${this.title.value}`) - Button() { - Text(`Click to change title`).fontSize(10) - }.onClick(() => { - this.title.value = this.toggle ? 'Hello World' : 'Hello UI' - }) // Modify the internal state of MyComponent using the anonymous method. - - Button() { - Text(`Click to increase count=${this.count}`).fontSize(10) - }.onClick(() => { - this.count += this.increaseBy - }) // Modify the internal state of MyComponent using the anonymous method. - } - } -} -``` - -在上述示例中： - -- 用户定义的组件**MyComponent**定义了**@State**状态变量**count**和**title**。如果**count**或**title**的值发生变化，则执行**MyComponent**的**build**方法来重新渲染组件； -- **EntryComponent**中有多个**MyComponent**组件实例，第一个**MyComponent**内部状态的更改不会影响第二个**MyComponent**； -- 创建**MyComponent**实例时通过变量名给组件内的变量进行初始化，如： - - ``` - MyComponent({title: {value: 'Hello, World 2'}, count: 7}) - ``` - - diff --git a/zh-cn/application-dev/reference/arkui-ts/ts-components-canvas-canvas.md b/zh-cn/application-dev/reference/arkui-ts/ts-components-canvas-canvas.md new file mode 100644 index 0000000000000000000000000000000000000000..a02c85282338c2af73265fdb24c8182f469674b4 --- /dev/null +++ b/zh-cn/application-dev/reference/arkui-ts/ts-components-canvas-canvas.md @@ -0,0 +1,99 @@ +# Canvas + +>![](../../public_sys-resources/icon-note.gif) **说明：** +>该组件从API Version 8开始支持。后续版本如有新增内容，则采用上角标单独标记该内容的起始版本。 + +提供画布组件，用于自定义绘制图形。 + +## 权限列表 + +无 + +## 子组件 + +不支持。 + +## 接口 + +Canvas\(context: CanvasRenderingContext2D\) + +- 参数 + +

名称

功能描述

+

功能描述

onCancel(event: () => void)

+

onCancel(event: () => void)

顺序组合手势（GestureMode.Sequence）取消后触发回调。

+

顺序组合手势（GestureMode.Sequence）取消后触发回调。
+ + + + + + + + + + + + + +

参数名

+

参数类型

+

必填

+

默认值

+

参数描述

+

context

+

CanvasRenderingContext2D

+

是

+

-

+

见CanvasRenderingContext2D对象。

+
+ + +## 属性 + +支持[通用属性](ts-universal-attributes-size.md)。 + +## 事件 + +除支持[通用事件](ts-universal-events-click.md)外，还支持如下事件： + + + + + + + + + + + +

名称

+

参数

+

描述

+

onReady(callback: () => void)

+

无

+

画布组件的事件回调，可以在此时进行绘制。

+
+ +## 示例 + +``` +@Entry +@Component +struct CanvasExample { + private settings: RenderingContextSettings = new RenderingContextSettings(true,true) + private context: RenderingContext = new RenderingContext(this.settings) + + build() { + Flex({ direction: FlexDirection.Column, alignItems: ItemAlign.Center, justifyContent: FlexAlign.Center }) { + Canvas(this.context) + .width('100%') + .height('100%') + .backgroundColor('#ffff00') + .onReady(() =>{ + this.context.fillRect(0,30,100,100) + }) + } + .width('100%') + .height('100%') + } +} +``` + diff --git a/zh-cn/application-dev/reference/arkui-ts/ts-components-canvas-canvasgradient.md b/zh-cn/application-dev/reference/arkui-ts/ts-components-canvas-canvasgradient.md new file mode 100644 index 0000000000000000000000000000000000000000..30324ac239042e494db9368c7f90e3a5118eb1b1 --- /dev/null +++ b/zh-cn/application-dev/reference/arkui-ts/ts-components-canvas-canvasgradient.md @@ -0,0 +1,86 @@ +# CanvasGradient对象 + +>![](../../public_sys-resources/icon-note.gif) **说明：** +>从 API Version 8 开始支持。后续版本如有新增内容，则采用上角标单独标记该内容的起始版本。 + +渐变对象。 + +## addColorStop + +addColorStop\(offset: number, color: string\): void + +设置渐变断点值，包括偏移和颜色。 + +- 参数 + + + + + + + + + + + + + + + + + + + + + +

参数

+

类型

+

必填

+

默认值

+

描述

+

offset

+

number

+

是

+

0

+

设置渐变点距离起点的位置占总体长度的比例，范围为0到1。

+

color

+

string

+

是

+

'ffffff'

+

设置渐变的颜色。

+
+ +- 示例 + + ``` + @Entry + @Component + struct Page45 { + private settings: RenderingContextSettings = new RenderingContextSettings(true,true) + private context: CanvasRenderingContext2D = new CanvasRenderingContext2D(this.settings) + private gra:CanvasGradient = new CanvasGradient() + + build() { + Flex({ direction: FlexDirection.Column, alignItems: ItemAlign.Center, justifyContent: FlexAlign.Center }) { + Canvas(this.context) + .width('100%') + .height('100%') + .backgroundColor('#ffff00') + .onReady(() =>{ + var grad = this.context.createLinearGradient(50,0, 300,100) + this.gra.addColorStop(0.0, 'red') + this.gra.addColorStop(0.5, 'white') + this.gra.addColorStop(1.0, 'green') + this.context.fillStyle = grad + this.context.fillRect(0, 0, 500, 500) + }) + } + .width('100%') + .height('100%') + } + } + ``` + + ![](figures/zh-cn_image_0000001192915130.png) + + diff --git a/zh-cn/application-dev/reference/arkui-ts/ts-components-canvas-imagebitmap.md b/zh-cn/application-dev/reference/arkui-ts/ts-components-canvas-imagebitmap.md new file mode 100644 index 0000000000000000000000000000000000000000..d4a3609367f5e27349ede2f1f27848edd079a344 --- /dev/null +++ b/zh-cn/application-dev/reference/arkui-ts/ts-components-canvas-imagebitmap.md @@ -0,0 +1,107 @@ +# ImageBitmap对象 + +>![](../../public_sys-resources/icon-note.gif) **说明：** +>从 API Version 8 开始支持。后续版本如有新增内容，则采用上角标单独标记该内容的起始版本。 + +图片对象。 + +## 接口 + +ImageBitmap\(src: string\) + +- 参数 + + + + + + + + + + + + + + + +

参数名

+

参数类型

+

必填

+

默认值

+

参数描述

+

src

+

string

+

是

+

-

+

图片对象所在的路径。

+
+ + +## 属性 + + + + + + + + + + + + + + + + + + + + + +

属性

+

类型

+

默认值

+

必填

+

描述

+

width

+

Length

+

0px

+

否

+

图片的宽度。

+

height

+

Length

+

0px

+

否

+

图片的高度。

+
+ +示例 + +``` +@Entry +@Component +struct DrawImageExample { + private settings:RenderingContextSettings = new RenderingContextSettings(true,true) + private context: CanvasRenderingContext2D = new CanvasRenderingContext2D(this.settings) + private img:ImageBitmap = new ImageBitmap("common/images/example.jpg") + + build() { + Flex({ direction: FlexDirection.Column, alignItems: ItemAlign.Center, justifyContent: FlexAlign.Center }) { + Canvas(this.context) + .width('100%') + .height('100%') + .backgroundColor('#ffff00') + .onReady(() =>{ + this.context.drawImage( this.img,0,0,400,200) + }) + } + .width('100%') + .height('100%') + } +} +``` + +![](figures/zh-cn_image_0000001192595194.png) + diff --git a/zh-cn/application-dev/reference/arkui-ts/ts-components-canvas-imagedata.md b/zh-cn/application-dev/reference/arkui-ts/ts-components-canvas-imagedata.md new file mode 100644 index 0000000000000000000000000000000000000000..3e8f5ba4220845a682b94bf83453d406d755c92f --- /dev/null +++ b/zh-cn/application-dev/reference/arkui-ts/ts-components-canvas-imagedata.md @@ -0,0 +1,41 @@ +# ImageData对象 + +>![](../../public_sys-resources/icon-note.gif) **说明：** +>从 API Version 8 开始支持。后续版本如有新增内容，则采用上角标单独标记该内容的起始版本。 + +CanvasImageData对象可以存储canvas渲染的像素数据。 + +## 属性 + + + + + + + + + + + + + + + + + + + +

属性

+

类型

+

描述

+

width

+

number

+

矩形区域实际像素宽度。

+

height

+

number

+

矩形区域实际像素高度。

+

data

+

<Uint8ClampedArray>

+

一维数组，保存了相应的颜色数据，数据值范围为0到255。

+
+ diff --git a/zh-cn/application-dev/reference/arkui-ts/ts-components-canvas-lottie.md b/zh-cn/application-dev/reference/arkui-ts/ts-components-canvas-lottie.md new file mode 100644 index 0000000000000000000000000000000000000000..3fc7865da9b7e882891fb9d0899b680e129939ea --- /dev/null +++ b/zh-cn/application-dev/reference/arkui-ts/ts-components-canvas-lottie.md @@ -0,0 +1,1318 @@ +# Lottie + +>![](../../public_sys-resources/icon-note.gif) **说明：** +>从 API Version 8 开始支持。后续版本如有新增内容，则采用上角标单独标记该内容的起始版本。 + +Lottie为三方开源库，依赖Canvas与RenderingContext。 + +## 权限列表 + +无 + +## 导入模块 + +``` +import lottie from 'lottie-web' +``` + +>![](../../public_sys-resources/icon-note.gif) **说明：** +>'lottie-web' 名字以实际生态发布后的命名为准。 + +## lottie.loadAnimation + +loadAnimation\( + +path: string, container: object, render: string, loop: boolean, autoplay: boolean, name: string \): AnimationItem + +加载动画，须提前声明Animator\('\_\_lottie\_ets'\)对象，并在Canvas完成布局后调用。可配合Canvas组件生命周期接口使用，比如onAppear\(\)与onPageShow\(\)。 + +- 参数 + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + +

参数

+

类型

+

必填

+

描述

+

path

+

string

+

是

+

hap包内动画资源文件路径，仅支持json格式。示例：path: "common/lottie/data.json"

+

container

+

object

+

是

+

canvas绘图上下文，声明范式需提前声明CanvasRenderingContext2D。

+

render

+

string

+

是

+

渲染类型，仅支持“canvas”。

+

loop

+

boolean | number

+

否

+

动画播放结束后，是否循环播放，默认值true。值类型为number，且大于等于1时为设置的重复播放的次数。

+

autoplay

+

boolean

+

否

+

是否自动播放动画，默认值true。

+

name

+

string

+

否

+

开发者自定义的动画名称，后续支持通过该名称引用控制动画，默认为空。

+

initialSegment

+

[number, number]

+

否

+

指定动画播放的起始帧号，指定动画播放的结束帧号。

+
+ + +## lottie.destroy + +destroy\(name: string\): void + +销毁动画，页面退出时，必须调用。可配合Canvas组件生命周期接口使用，比如onDisappear\(\)与onPageHide\(\)。 + +- 参数 + + + + + + + + + + + + + +

参数

+

类型

+

必填

+

描述

+

name

+

string

+

是

+

被指定的动画名，同loadAnimation接口参数name, 缺省时销毁所有动画。

+
+ +- 示例 + + ``` + import lottie from 'lottie-web' + + @Entry + @Component + struct Index { + private controller: CanvasRenderingContext2D = new CanvasRenderingContext2D() + private animateName: string = "animate" + private animatePath: string = "common/lottie/data.json" + private animateItem: any = null + + private onPageHide(): void { + console.log('onPageHide') + lottie.destroy() + } + + build() { + Flex({ direction: FlexDirection.Column, alignItems: ItemAlign.Center, justifyContent: FlexAlign.Center }) { + Canvas(this.controller) + .width('30%') + .height('20%') + .backgroundColor('#0D9FFB') + .onAppear(() => { + console.log('canvas onAppear'); + this.animateItem = lottie.loadAnimation({ + container: this.controller, + renderer: 'canvas', + loop: true, + autoplay: true, + name: this.animateName, + path: this.animatePath, + }) + }) + + Animator('__lottie_ets') // declare Animator('__lottie_ets') when use lottie + Button('load animation') + .onClick(() => { + if (this.animateItem != null) { + this.animateItem.destroy() + this.animateItem = null + } + this.animateItem = lottie.loadAnimation({ + container: this.controller, + renderer: 'canvas', + loop: true, + autoplay: true, + name: this.animateName, + path: this.animatePath, + initialSegment: [10, 50], + }) + }) + + Button('destroy animation') + .onClick(() => { + lottie.destroy(this.animateName) + this.animateItem = null + }) + } + .width('100%') + .height('100%') + } + } + ``` + + ![](figures/lottie-ark-2-0-canvas-ui-animate.gif) + + +## lottie.play + +play\(name: string\): void + +播放指定动画。 + +- 参数 + + + + + + + + + + + + + +

参数

+

类型

+

必填

+

描述

+

name

+

string

+

是

+

被指定的动画名, 同loadAnimation接口参数name，缺省时播放所有动画。

+
+ +- 示例 + + ``` + lottie.play(this.animateName) + ``` + + +## lottie.pause + +pause\(name: string\): void + +暂停指定动画，下次调用lottie.play\(\)从当前帧开始。 + +- 参数 + + + + + + + + + + + + + +

参数

+

类型

+

必填

+

描述

+

name

+

string

+

是

+

被指定的动画名，同loadAnimation接口入参name，缺省时暂停所有动画。

+
+ +- 示例 + + ``` + lottie.pause(this.animateName) + ``` + + +## lottie.togglePause + +togglePause\(name: string\): void + +暂停或播放指定动画，等效于lottie.play\(\)与lottie.pause\(\)切换调用。 + +- 参数 + + + + + + + + + + + + + +

参数

+

类型

+

必填

+

描述

+

name

+

string

+

是

+

被指定的动画名，同loadAnimation接口参数name，缺省时停止所有动画。

+
+ +- 示例 + + ``` + lottie.togglePause(this.animateName) + ``` + + +## lottie.stop + +stop\(name: string\): void + +停止指定动画，下次调用lottie.play\(\)从第一帧开始。 + +- 参数 + + + + + + + + + + + + + +

参数

+

类型

+

必填

+

描述

+

name

+

string

+

是

+

被指定的动画名，同loadAnimation接口参数name，缺省时停止所有动画。

+
+ +- 示例 + + ``` + lottie.stop(this.animateName) + ``` + + +## lottie.setSpeed + +setSpeed\(speed: number, name: string\): void + +设置指定动画播放速度。 + +- 参数 + + + + + + + + + + + + + + + + + + +

参数

+

类型

+

必填

+

描述

+

speed

+

number

+

是

+

值为浮点类型, speed>0正向播放, speed<0反向播放, speed=0暂停播放, speed=1.0/-1.0正常速度播放。

+

name

+

string

+

是

+

被指定的动画，同loadAnimation接口参数name，缺省时停止所有动画。

+
+ +- 示例 + + ``` + lottie.setSpeed(5, this.animateName) + ``` + + +## lottie.setDirection + +setDirection\(direction: AnimationDirection, name: string\): void + +设置指定动画播放顺序。 + +- 参数 + + + + + + + + + + + + + + + + + + +

参数

+

类型

+

必填

+

描述

+

direction

+

AnimationDirection

+

是

+

1为正向，-1为反向; 当设置为反向时，从当前播放进度开始回播直到首帧，loop值为true时可无限倒放；speed<0叠加时也是倒放。

+

AnimationDirection：1 | -1

+

name

+

string

+

是

+

被指定的动画名，同loadAnimation接口参数name，缺省时设置所有动画方向。

+
+ + +- 示例 + + ``` + lottie.setDirection(-1, this.controlName) + ``` + + +## AnimationItem + +loadAnimation接口的返回对象，具有属性与接口。属性描述如下： + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + +

参数名称

+

参数类型

+

参数描述

+

name

+

string

+

动画名称。

+

isLoaded

+

boolean

+

动画是否已加载。

+

currentFrame

+

number

+

当前播放的帧号, 默认精度为>=0.0的浮点数, 调用setSubframe(false)后精度为去小数点后的正整数。

+

currentRawFrame

+

number

+

当前播放帧数, 精度为>=0.0的浮点数。

+

firstFrame

+

number

+

当前播放片段的第一帧帧号。

+

totalFrames

+

number

+

当前播放片段的总帧数。

+

frameRate

+

number

+

帧率 (frame/s)。

+

frameMult

+

number

+

帧率 (frame/ms)。

+

playSpeed

+

number

+

值为浮点类型, speed>0正向播放, speed<0反向播放, speed=0暂停播放, speed=1.0 | -1.0正常速度播放。

+

playDirection

+

number

+

播放方向, 1为正放, -1为倒放。

+

playCount

+

number

+

动画完成播放的次数。

+

isPaused

+

boolean

+

当前动画是否已暂停, 值为true动画已暂停。

+

autoplay

+

boolean

+

加载动画后是否自动播放, 若值为false需要再调用play()接口开始播放。

+

loop

+

boolean | number

+

类型为boolean时是否循环播放, 类型为number时播放次数。

+

renderer

+

any

+

动画渲染对象, 根据渲染类型而定。

+

animationID

+

string

+

动画ID。

+

timeCompleted

+

number

+

当前动画片段完成单次播放的帧数, 受AnimationSegment设置影响, 与totalFrames属性值相同。

+

segmentPos

+

number

+

当前动画片段序号, 值为>=0的正整数。

+

isSubframeEnabled

+

boolean

+

关联了currentFrame的精度是否为浮点数。

+

segments

+

AnimationSegment | AnimationSegment[]

+

当前动画的播放片段。

+
+ +## AnimationItem.play + +play\(name?: string\): void + +播放动画。 + +- 参数 + + + + + + + + + + + + + +

参数

+

类型

+

必填

+

描述

+

name

+

string

+

否

+

被指定的动画名，缺省默认为空。

+
+ +- 示例 + + ``` + this.anim.play() + ``` + + +## AnimationItem.destroy + +destroy\(name?: string\): void + +销毁动画。 + +- 参数 + + + + + + + + + + + + + +

参数

+

类型

+

必填

+

描述

+

name

+

string

+

否

+

被指定的动画名，缺省默认为空。

+
+ +- 示例 + + ``` + this.anim.destroy() + ``` + + +## AnimationItem.pause + +pause\(name?: string\): void + +暂停动画，下次调用play接口从当前帧开始播放。 + +- 参数 + + + + + + + + + + + + + +

参数

+

类型

+

必填

+

描述

+

name

+

string

+

否

+

被指定的动画名，缺省默认为空。

+
+ +- 示例 + + ``` + this.anim.pause() + ``` + + +## AnimationItem.togglePause + +togglePause\(name?: string\): void + +暂停或播放动画，等效于play接口与pause接口之间轮换调用。 + +- 参数 + + + + + + + + + + + + + +

参数

+

类型

+

必填

+

描述

+

name

+

string

+

否

+

被指定的动画名，缺省默认为空。

+
+ +- 示例 + + ``` + this.anim.togglePause() + ``` + + +## AnimationItem.stop + +stop\(name?: string\): void + +停止动画，下次调用play接口从第一帧开始播放。 + +- 参数 + + + + + + + + + + + + + +

参数

+

类型

+

必填

+

描述

+

name

+

string

+

否

+

被指定的动画名，缺省默认为空。

+
+ +- 示例 + + ``` + this.anim.stop() + ``` + + +## AnimationItem.setSpeed + +setSpeed\(speed: number\): void + +设置动画播放速度。 + +- 参数 + + + + + + + + + + + + + +

参数

+

类型

+

必填

+

描述

+

speed

+

number

+

是

+

值为浮点类型, speed>0正向播放, speed<0反向播放, speed=0暂停播放, speed=1.0 | -1.0正常速度播放。

+
+ +- 示例 + + ``` + this.anim.setSpeed(5); + ``` + + +## AnimationItem.setDirection + +setDirection\(direction: AnimationDirection\): void + +设置动画播放顺序。 + +- 参数 + + + + + + + + + + + + + +

参数

+

类型

+

必填

+

描述

+

direction

+

AnimationDirection

+

是

+

1为正向，-1为反向; 当设置为反向时，从当前播放进度开始回播直到首帧，loop值为true时可无限倒放；speed<0叠加时也是倒放。

+

AnimationDirection：1 | -1。

+
+ + +- 示例 + + ``` + this.anim.setDirection(-1) + ``` + + +## AnimationItem.goToAndStop + +goToAndStop\(value: number, isFrame: boolean\): void + +设置动画停止在指定帧或时间进度。 + +- 参数 + + + + + + + + + + + + + + + + + + + + + + + +

参数

+

类型

+

必填

+

描述

+

value

+

number

+

是

+

帧号(值大于等于0)或时间进度(ms)。

+

isFrame

+

boolean

+

否

+

true: 按指定帧控制，false:按指定时间控制，缺省默认false。

+

name

+

string

+

否

+

被指定的动画名，缺省默认为空。

+
+ + +- 示例 + + ``` + // 按帧号控制 + this.anim.goToAndStop(25, true) + // 按时间进度控制 + this.anim.goToAndStop(300, false, this.animateName) + ``` + + +## AnimationItem.goToAndPlay + +goToAndPlay\(value: number, isFrame: boolean\): void + +设置动画从指定帧或时间进度开始播放。 + +- 参数 + + + + + + + + + + + + + + + + + + + + + + + +

参数

+

类型

+

必填

+

描述

+

value

+

number

+

是

+

帧号(值大于等于0)或时间进度(ms)

+

isFrame

+

boolean

+

是

+

true：按指定帧控制， false：按指定时间控制，缺省默认false。

+

name

+

string

+

否

+

被指定的动画名，缺省默认为空。

+
+ + +- 示例 + + ``` + // 按帧号控制 + this.anim.goToAndPlay(25, true) + // 按时间进度控制 + this.anim.goToAndPlay(300, false, this.animateName) + ``` + + +## AnimationItem.playSegments + +playSegments\(segments: AnimationSegment | AnimationSegment\[\], forceFlag: boolean\): void + +设置动画仅播放指定片段。 + +- 参数 + + + + + + + + + + + + + + + + + + +

参数

+

类型

+

必填

+

描述

+

segments

+

AnimationSegment = [number, number] | AnimationSegment[]

+

是

+

片段或片段列表；

+

如果片段列表全部播放完毕后，下轮循环播放仅播放最后一个片段

+

forceFlag

+

boolean

+

是

+

true：即时生效播放，false：延迟到下轮循环播放再生效

+
+ + +- 示例 + + ``` + // 指定播放片段 + this.anim.playSegments([10, 20], false) + // 指定播放片段列表 + this.anim.playSegments([[0, 5], [20, 30]], true) + ``` + + +## AnimationItem.resetSegments + +resetSegments\(forceFlag: boolean\): void + +重置动画播放片段，播放全帧。 + +- 参数 + + + + + + + + + + + + + +

参数

+

类型

+

必填

+

描述

+

forceFlag

+

boolean

+

是

+

true：即时生效播放，false：延迟到下轮循环播放再生效

+
+ + +- 示例 + + ``` + this.anim.resetSegments(true) + ``` + + +## AnimationItem.resize + +resize\(\): void + +刷新动画布局。 + +- 示例 + + ``` + this.anim.resize() + ``` + + +## AnimationItem.setSubframe + +setSubframe\(useSubFrame: boolean\): void + +设置属性currentFrame的精度显示浮点数。 + +- 参数 + + + + + + + + + + + + + +

参数

+

类型

+

必填

+

描述

+

useSubFrames

+

boolean

+

是

+

currentFrame属性默认显示浮点数，该接口参数将影响currentFrame属性的精度。

+

true：属性currentFrame显示浮点。

+

false：属性currentFrame去浮点数显示整数。

+
+ + +- 示例 + + ``` + this.anim.setSubframe(false) + ``` + + +## AnimationItem.getDuration + +getDuration\(inFrames?: boolean\): void + +获取动画单次完整播放的时间\(与播放速度无关\)或帧数, 与Lottie.loadAnimation接口入参initialSegment有关。 + +- 参数 + + + + + + + + + + + + + +

参数

+

类型

+

必填

+

描述

+

inFrames

+

boolean

+

否

+

true：获取帧数， false：获取时间(单位ms)，缺省默认false。

+
+ + +- 示例 + + ``` + this.anim.setSubframe(true) + ``` + + +## AnimationItem.addEventListener + +addEventListener\(name: AnimationEventName, callback: AnimationEventCallback\): \(\) =\> void + +添加侦听事件, 事件完成后会触发指定回调函数。返回可删除该侦听事件的函数对象。 + +- 参数 + + + + + + + + + + + + + + + + + + +

参数

+

类型

+

必填

+

描述

+

name

+

AnimationEventName

+

是

+

指定动画事件类型，Lottie内置动画事件类型AnimationEventName：

+

'enterFrame'、'loopComplete'、'complete'、'segmentStart'、'destroy'、'config_ready'、'data_ready'、'DOMLoaded'、'error'、'data_failed'、'loaded_images'

+

callback

+

AnimationEventCallback<T>

+

是

+

用户自定义回调函数

+
+ + +- 示例 + + ``` + private callbackItem: any = function() { + console.log("grunt loopComplete") + } + let delFunction = this.animateItem.addEventListener('loopComplete', this.callbackItem) + + // 删除侦听 + delFunction() + ``` + + +## AnimationItem.removeEventListener + +removeEventListener\(name: AnimationEventName, callback?: AnimationEventCallback\): void + +删除侦听事件。 + +- 参数 + + + + + + + + + + + + + + + + + + +

参数

+

类型

+

必填

+

描述

+

name

+

AnimationEventName

+

是

+

指定动画事件类型，Lottie内置动画事件类型AnimationEventName：

+

'enterFrame'、'loopComplete'、'complete'、'segmentStart'、'destroy'、'config_ready'、'data_ready'、'DOMLoaded'、'error'、'data_failed'、'loaded_images'

+

callback

+

AnimationEventCallback<T>

+

是

+

用户自定义回调函数；缺省为空时, 删除此事件的所有回调函数。

+
+ + +- 示例 + + ``` + this.animateItem.removeEventListener('loopComplete', this.callbackItem) + ``` + + +## AnimationItem.triggerEvent + +triggerEvent\(name: AnimationEventName, args: T\): void + +直接触发指定事件的所有已设置的回调函数。 + +- 参数 + + + + + + + + + + + + + + + + + + +

参数

+

类型

+

必填

+

描述

+

name

+

AnimationEventName

+

是

+

指定动画事件类型

+

+

args

+

any

+

是

+

用户自定义回调参数

+
+ + +- 示例 + + ``` + private triggerCallBack: any = function(item) { + console.log("trigger loopComplete, name:" + item.name) + } + + this.animateItem.addEventListener('loopComplete', this.triggerCallBack) + this.animateItem.triggerEvent('loopComplete', this.animateItem) + this.animateItem.removeEventListener('loopComplete', this.triggerCallBack) + ``` + + diff --git a/zh-cn/application-dev/reference/arkui-ts/ts-components-canvas-path2d.md b/zh-cn/application-dev/reference/arkui-ts/ts-components-canvas-path2d.md new file mode 100644 index 0000000000000000000000000000000000000000..e4193e5a512ff0d0321fabcfb62dabf4877f6a7d --- /dev/null +++ b/zh-cn/application-dev/reference/arkui-ts/ts-components-canvas-path2d.md @@ -0,0 +1,950 @@ +# Path2D对象 + +>![](../../public_sys-resources/icon-note.gif) **说明：** +>从 API Version 8 开始支持。后续版本如有新增内容，则采用上角标单独标记该内容的起始版本。 + +路径对象，支持通过对象的接口进行路径的描述，并通过Canvas的stroke接口进行绘制。 + +## addPath + +addPath\(path: Object\): void + +将另一个路径添加到当前的路径对象中。 + +- 参数 + + + + + + + + + + + + + + + +

参数

+

类型

+

必填

+

默认值

+

描述

+

path

+

Object

+

是

+

null

+

需要添加到当前路径的路径对象

+
+ +- 示例 + + ``` + @Entry + @Component + struct AddPath { + private settings: RenderingContextSettings = new RenderingContextSettings(true,true) + private context: CanvasRenderingContext2D = new CanvasRenderingContext2D(this.settings) + + private path2Da: Path2D = new Path2D("M250 150 L150 350 L350 350 Z") + private path2Db: Path2D = new Path2D() + + build() { + Flex({ direction: FlexDirection.Column, alignItems: ItemAlign.Center, justifyContent: FlexAlign.Center }) { + Canvas(this.context) + .width('100%') + .height('100%') + .backgroundColor('#ffff00') + .onReady(() =>{ + this.path2Db.addPath(this.path2Da) + this.context.stroke(this.path2Db) + }) + } + .width('100%') + .height('100%') + } + } + ``` + + ![](figures/zh-cn_image_0000001192595216.png) + + +## closePath + +closePath\(\): void + +将路径的当前点移回到路径的起点，当前点到起点间画一条直线。如果形状已经闭合或只有一个点，则此功能不执行任何操作。 + +- 示例 + + ``` + @Entry + @Component + struct ClosePath { + private settings: RenderingContextSettings = new RenderingContextSettings(true,true) + private context: CanvasRenderingContext2D = new CanvasRenderingContext2D(this.settings) + private path2Db: Path2D = new Path2D() + + build() { + Flex({ direction: FlexDirection.Column, alignItems: ItemAlign.Center, justifyContent: FlexAlign.Center }) { + Canvas(this.context) + .width('100%') + .height('100%') + .backgroundColor('#ffff00') + .onReady(() =>{ + this.path2Db.moveTo(200, 100) + this.path2Db.lineTo(300, 100) + this.path2Db.lineTo(200, 200) + this.path2Db.closePath() + this.context.stroke(this.path2Db) + }) + } + .width('100%') + .height('100%') + } + } + ``` + + ![](figures/unnaming-(4).png) + + +## moveTo + +moveTo\(x: number, y: number\): void + +将路径的当前坐标点移动到目标点，移动过程中不绘制线条。 + +- 参数 + + + + + + + + + + + + + + + + + + + + + +

参数

+

类型

+

必填

+

默认值

+

描述

+

x

+

number

+

是

+

0

+

目标点X轴坐标

+

y

+

number

+

是

+

0

+

目标点Y轴坐标

+
+ +- 示例 + + ``` + @Entry + @Component + struct MoveTo { + private settings: RenderingContextSettings = new RenderingContextSettings(true,true) + private context: CanvasRenderingContext2D = new CanvasRenderingContext2D(this.settings) + private path2Db: Path2D = new Path2D() + + build() { + Flex({ direction: FlexDirection.Column, alignItems: ItemAlign.Center, justifyContent: FlexAlign.Center }) { + Canvas(this.context) + .width('100%') + .height('100%') + .backgroundColor('#ffff00') + .onReady(() =>{ + this.path2Db.moveTo(50, 100) + this.path2Db.lineTo(250, 100) + this.path2Db.lineTo(150, 200) + this.path2Db.closePath() + this.context.stroke(this.path2Db) + }) + } + .width('100%') + .height('100%') + } + } + ``` + + ![](figures/zh-cn_image_0000001237475113.png) + + +## lineTo + +lineTo\(x: number, y: number\): void + +从当前点绘制一条直线到目标点。 + +- 参数 + + + + + + + + + + + + + + + + + + + + + +

参数

+

类型

+

必填

+

默认值

+

描述

+

x

+

number

+

是

+

0

+

目标点X轴坐标

+

y

+

number

+

是

+

0

+

目标点Y轴坐标

+
+ +- 示例 + + ``` + @Entry + @Component + struct LineTo { + private settings: RenderingContextSettings = new RenderingContextSettings(true,true) + private context: CanvasRenderingContext2D = new CanvasRenderingContext2D(this.settings) + private path2Db: Path2D = new Path2D() + + build() { + Flex({ direction: FlexDirection.Column, alignItems: ItemAlign.Center, justifyContent: FlexAlign.Center }) { + Canvas(this.context) + .width('100%') + .height('100%') + .backgroundColor('#ffff00') + .onReady(() =>{ + this.path2Db.moveTo(100, 100) + this.path2Db.lineTo(100, 200) + this.path2Db.lineTo(200, 200) + this.path2Db.lineTo(200, 100) + this.path2Db.closePath() + this.context.stroke(this.path2Db) + }) + } + .width('100%') + .height('100%') + } + } + ``` + + ![](figures/unnaming-(3).png) + + +## bezierCurveTo + +bezierCurveTo\(cp1x: number, cp1y: number, cp2x: number, cp2y: number, x: number, y: number\): void + +创建三次贝赛尔曲线的路径。 + +- 参数 + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + +

参数

+

类型

+

必填

+

默认值

+

描述

+

cp1x

+

number

+

是

+

0

+

第一个贝塞尔参数的x坐标值。

+

cp1y

+

number

+

是

+

0

+

第一个贝塞尔参数的y坐标值。

+

cp2x

+

number

+

是

+

0

+

第二个贝塞尔参数的x坐标值。

+

cp2y

+

number

+

是

+

0

+

第二个贝塞尔参数的y坐标值。

+

x

+

number

+

是

+

0

+

路径结束时的x坐标值。

+

y

+

number

+

是

+

0

+

路径结束时的y坐标值。

+
+ + +- 示例 + + ``` + @Entry + @Component + struct BezierCurveTo { + private settings: RenderingContextSettings = new RenderingContextSettings(true,true) + private context: CanvasRenderingContext2D = new CanvasRenderingContext2D(this.settings) + private path2Db: Path2D = new Path2D() + + build() { + Flex({ direction: FlexDirection.Column, alignItems: ItemAlign.Center, justifyContent: FlexAlign.Center }) { + Canvas(this.context) + .width('100%') + .height('100%') + .backgroundColor('#ffff00') + .onReady(() =>{ + this.path2Db.moveTo(10, 10) + this.path2Db.bezierCurveTo(20, 100, 200, 100, 200, 20);this.context.stroke(this.path2Db) + }) + } + .width('100%') + .height('100%') + } + } + ``` + + ![](figures/zh-cn_image_0000001192915158.png) + + +## quadraticCurveTo + +quadraticCurveTo\(cpx: number, cpy: number, x: number ,y: number\): void + +创建二次贝赛尔曲线的路径。 + +- 参数 + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + +

参数

+

类型

+

必填

+

默认值

+

描述

+

cpx

+

number

+

是

+

0

+

贝塞尔参数的x坐标值。

+

cpy

+

number

+

是

+

0

+

贝塞尔参数的y坐标值。

+

x

+

number

+

是

+

0

+

路径结束时的x坐标值。

+

y

+

number

+

是

+

0

+

路径结束时的y坐标值。

+
+ +- 示例 + + ``` + @Entry + @Component + struct QuadraticCurveTo { + private settings: RenderingContextSettings = new RenderingContextSettings(true,true) + private context: CanvasRenderingContext2D = new CanvasRenderingContext2D(this.settings) + private path2Db: Path2D = new Path2D() + + build() { + Flex({ direction: FlexDirection.Column, alignItems: ItemAlign.Center, justifyContent: FlexAlign.Center }) { + Canvas(this.context) + .width('100%') + .height('100%') + .backgroundColor('#ffff00') + .onReady(() =>{ + this.path2Db.moveTo(10, 10) + this.path2Db.quadraticCurveTo(100, 100, 200, 20) + this.context.stroke(this.path2Db) + }) + } + .width('100%') + .height('100%') + } + } + ``` + + ![](figures/zh-cn_image_0000001237555151.png) + + +## arc + +arc\(x: number, y: number, radius: number, startAngle: number, endAngle: number, anticlockwise?: number\): void + +绘制弧线路径。 + +- 参数 + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + +

参数

+

类型

+

必填

+

默认值

+

描述

+

x

+

number

+

是

+

0

+

弧线圆心的x坐标值。

+

y

+

number

+

是

+

0

+

弧线圆心的y坐标值。

+

radius

+

number

+

是

+

0

+

弧线的圆半径。

+

startAngle

+

number

+

是

+

0

+

弧线的起始弧度。

+

endAngle

+

number

+

是

+

0

+

弧线的终止弧度。

+

anticlockwise

+

boolean

+

否

+

false

+

是否逆时针绘制圆弧。

+
+ +- 示例 + + ``` + @Entry + @Component + struct Arc { + private settings: RenderingContextSettings = new RenderingContextSettings(true,true) + private context: CanvasRenderingContext2D = new CanvasRenderingContext2D(this.settings) + private path2Db: Path2D = new Path2D() + + build() { + Flex({ direction: FlexDirection.Column, alignItems: ItemAlign.Center, justifyContent: FlexAlign.Center }) { + Canvas(this.context) + .width('100%') + .height('100%') + .backgroundColor('#ffff00') + .onReady(() =>{ + this.path2Db.arc(100, 75, 50, 0, 6.28);this.context.stroke(this.path2Db) + }) + } + .width('100%') + .height('100%') + } + } + ``` + + ![](figures/zh-cn_image_0000001192595214.png) + + +## arcTo + +arcTo\(x1: number, y1: number, x2: number, y2: number, radius: number\): void + +依据圆弧经过的点和圆弧半径创建圆弧路径。 + +- 参数 + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + +

参数

+

类型

+

必填

+

默认值

+

描述

+

x1

+

number

+

是

+

0

+

圆弧经过的第一个点的x坐标值。

+

y1

+

number

+

是

+

0

+

圆弧经过的第一个点的y坐标值。

+

x2

+

number

+

是

+

0

+

圆弧经过的第二个点的x坐标值。

+

y2

+

number

+

是

+

0

+

圆弧经过的第二个点的y坐标值。

+

radius

+

number

+

是

+

0

+

圆弧的圆半径值。

+
+ +- 示例 + + ``` + @Entry + @Component + struct ArcTo { + private settings: RenderingContextSettings = new RenderingContextSettings(true,true) + private context: CanvasRenderingContext2D = new CanvasRenderingContext2D(this.settings) + private path2Db: Path2D = new Path2D() + + build() { + Flex({ direction: FlexDirection.Column, alignItems: ItemAlign.Center, justifyContent: FlexAlign.Center }) { + Canvas(this.context) + .width('100%') + .height('100%') + .backgroundColor('#ffff00') + .onReady(() =>{ + this.path2Db.arcTo(150, 20, 150, 70, 50) + this.context.stroke(this.path2Db) + }) + } + .width('100%') + .height('100%') + } + } + ``` + + ![](figures/zh-cn_image_0000001192755172.png) + + +## ellipse + +ellipse\(x: number, y: number, radiusX: number, radiusY: number, rotation: number, startAngle: number, endAngle: number, anticlockwise?: number\): void + +在规定的矩形区域绘制一个椭圆。 + +- 参数 + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + +

参数

+

类型

+

必填

+

默认值

+

描述

+

x

+

number

+

是

+

0

+

椭圆圆心的x轴坐标。

+

y

+

number

+

是

+

0

+

椭圆圆心的y轴坐标。

+

radiusX

+

number

+

是

+

0

+

椭圆x轴的半径长度。

+

radiusY

+

number

+

是

+

0

+

椭圆y轴的半径长度。

+

rotation

+

number

+

是

+

0

+

椭圆的旋转角度，单位为弧度。

+

startAngle

+

number

+

是

+

0

+

椭圆绘制的起始点角度，以弧度表示。

+

endAngle

+

number

+

是

+

0

+

椭圆绘制的结束点角度，以弧度表示。

+

anticlockwise

+

number

+

否

+

0

+

是否以逆时针方向绘制椭圆，0为顺时针，1为逆时针。(可选参数，默认为0)

+
+ +- 示例 + + ``` + @Entry + @Component + struct Ellipse { + private settings: RenderingContextSettings = new RenderingContextSettings(true,true) + private context: CanvasRenderingContext2D = new CanvasRenderingContext2D(this.settings) + private path2Db: Path2D = new Path2D() + + build() { + Flex({ direction: FlexDirection.Column, alignItems: ItemAlign.Center, justifyContent: FlexAlign.Center }) { + Canvas(this.context) + .width('100%') + .height('100%') + .backgroundColor('#ffff00') + .onReady(() =>{ + this.path2Db.ellipse(200, 200, 50, 100, Math.PI * 0.25, Math.PI * 0.5, Math.PI, true) + this.context.stroke(this.path2Db) + }) + } + .width('100%') + .height('100%') + } + } + ``` + + ![](figures/zh-cn_image_0000001193075154.png) + + +## rect + +rect\(x: number, y: number, width: number, height: number\): void + +创建矩形路径。 + +- 参数 + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + +

参数

+

类型

+

必填

+

默认值

+

描述

+

x

+

number

+

是

+

0

+

指定矩形的左上角x坐标值。

+

y

+

number

+

是

+

0

+

指定矩形的左上角y坐标值。

+

width

+

number

+

是

+

0

+

指定矩形的宽度。

+

height

+

number

+

是

+

0

+

指定矩形的高度。

+
+ +- 示例 + + ``` + @Entry + @Component + struct Rect { + private settings: RenderingContextSettings = new RenderingContextSettings(true,true) + private context: CanvasRenderingContext2D = new CanvasRenderingContext2D(this.settings) + private path2Db: Path2D = new Path2D() + + build() { + Flex({ direction: FlexDirection.Column, alignItems: ItemAlign.Center, justifyContent: FlexAlign.Center }) { + Canvas(this.context) + .width('100%') + .height('100%') + .backgroundColor('#ffff00') + .onReady(() =>{ + this.path2Db.rect(20, 20, 100, 100);this.context.stroke(this.path2Db) + }) + } + .width('100%') + .height('100%') + } + } + ``` + + ![](figures/zh-cn_image_0000001192755174.png) + + diff --git a/zh-cn/application-dev/reference/arkui-ts/ts-components-canvas.md b/zh-cn/application-dev/reference/arkui-ts/ts-components-canvas.md new file mode 100644 index 0000000000000000000000000000000000000000..89fdd09811c25897f18deaec5b70104c307b01e4 --- /dev/null +++ b/zh-cn/application-dev/reference/arkui-ts/ts-components-canvas.md @@ -0,0 +1,19 @@ +# 画布组件 + +- **[Canvas](ts-components-canvas-canvas.md)** + +- **[CanvasRenderingContext2D对象](ts-canvasrenderingcontext2d.md)** + +- **[OffscreenCanvasRenderingConxt2D对象](ts-offscreencanvasrenderingcontext2d.md)** + +- **[Lottie](ts-components-canvas-lottie.md)** + +- **[Path2D对象](ts-components-canvas-path2d.md)** + +- **[CanvasGradient对象](ts-components-canvas-canvasgradient.md)** + +- **[ImageBitmap对象](ts-components-canvas-imagebitmap.md)** + +- **[ImageData对象](ts-components-canvas-imagedata.md)** + + diff --git a/zh-cn/application-dev/reference/arkui-ts/ts-components-container.md b/zh-cn/application-dev/reference/arkui-ts/ts-components-container.md index c82dcb2bdfdb787e537368c09da65c29be9c3945..a1494c928804600f68079f0c80f7c179731f1e13 100644 --- a/zh-cn/application-dev/reference/arkui-ts/ts-components-container.md +++ b/zh-cn/application-dev/reference/arkui-ts/ts-components-container.md @@ -1,4 +1,4 @@ -# 容器组件 +# 容器组件 - **[AlphabetIndexer](ts-container-alphabet-indexer.md)** @@ -24,6 +24,8 @@ - **[Navigator](ts-container-navigator.md)** +- **[Navigation](ts-container-navigation.md)** + - **[Panel](ts-container-panel.md)** - **[Row](ts-container-row.md)** @@ -32,6 +34,8 @@ - **[Scroll](ts-container-scroll.md)** +- **[ScrollBar](ts-container-scrollbar.md)** + - **[Stack](ts-container-stack.md)** - **[Swiper](ts-container-swiper.md)** @@ -40,4 +44,8 @@ - **[TabContent](ts-container-tabcontent.md)** +- **[Stepper](ts-container-stepper.md)** + +- **[StepperItem](ts-container-stepperitem.md)** + diff --git a/zh-cn/application-dev/reference/arkui-ts/ts-components.md b/zh-cn/application-dev/reference/arkui-ts/ts-components.md index 6421384c610afe894a075c620d0da64ffb10c74b..622a2b8009f46554adff392a8bf9e233a9a090ac 100644 --- a/zh-cn/application-dev/reference/arkui-ts/ts-components.md +++ b/zh-cn/application-dev/reference/arkui-ts/ts-components.md @@ -1,4 +1,4 @@ -# 组件 +# 组件 - **[通用](ts-universal-components.md)** @@ -8,4 +8,6 @@ - **[绘制组件](ts-drawing-components.md)** +- **[画布组件](ts-components-canvas.md)** + diff --git a/zh-cn/application-dev/reference/arkui-ts/ts-container-alphabet-indexer.md b/zh-cn/application-dev/reference/arkui-ts/ts-container-alphabet-indexer.md index a76b944a7f1fd2340df8d5a9de0cf0b308160fee..678aa0dfc75a63414951dda70bddb5ee8669b10a 100644 --- a/zh-cn/application-dev/reference/arkui-ts/ts-container-alphabet-indexer.md +++ b/zh-cn/application-dev/reference/arkui-ts/ts-container-alphabet-indexer.md @@ -1,36 +1,38 @@ -# AlphabetIndexer +# AlphabetIndexer + +>![](../../public_sys-resources/icon-note.gif) **说明：** +>该组件从API Version 7开始支持。后续版本如有新增内容，则采用上角标单独标记该内容的起始版本。 字母索引条。 ## 支持设备 - - -

手机

-

平板

+ - - - - - - - -

手机

车机

+

平板

智慧屏

+

智慧屏

智能穿戴

+

智能穿戴

支持

-

支持

+

支持

支持

+

支持

不支持

+

不支持

不支持

+

不支持
+## 权限列表 + +无 + ## 子组件 无 @@ -41,39 +43,38 @@ AlphabetIndexer\(value: \{arrayValue : Array, selected : number\}\) - 参数 - -

参数名

+ - - - - - - - - - - - - - - @@ -82,98 +83,97 @@ AlphabetIndexer\(value: \{arrayValue : Array, selected : number\}\) ## 属性 - -

参数名

参数类型

+

参数类型

必填

+

必填

默认值

+

默认值

参数描述

+

参数描述

arrayValue

+

arrayValue

Array<string>

+

Array<string>

是

+

是

-

+

-

字母索引字符串数组。

+

字母索引字符串数组。

selected

+

selected

number

+

number

是

+

是

-

+

-

选中项编号。

+

选中项编号。

名称

+ - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - @@ -181,21 +181,20 @@ AlphabetIndexer\(value: \{arrayValue : Array, selected : number\}\) - IndexerAlign枚举说明 - -

名称

参数类型

+

参数类型

描述

+

描述

selectedColor

+

selectedColor

Color

+

Color

选中文本文字颜色。

+

选中文本文字颜色。

popupColor

+

popupColor

Color

+

Color

弹出提示文本字体颜色。

+

弹出提示文本字体颜色。

selectedBackgroundColor

+

selectedBackgroundColor

Color

+

Color

选中文本背景颜色。

+

选中文本背景颜色。

popupBackground

+

popupBackground

Color

+

Color

弹窗索引背景色。

+

弹窗索引背景色。

usingPopup

+

usingPopup

boolean

+

boolean

是否使用弹出索引提示。

+

是否使用弹出索引提示。

selectedFont

+

selectedFont

{

-

size?: number,

-

weight?: FontWeight,

-

family?: string,

-

style?: FontStyle

-

}

+

{

+

size?: number,

+

weight?: FontWeight,

+

family?: string,

+

style?: FontStyle

+

}

选中文本文字样式。

+

选中文本文字样式。

popupFont

+

popupFont

{

-

size?: number,

-

weight?: FontWeight,

-

family?: string,

-

style?: FontStyle

-

}

+

{

+

size?: number,

+

weight?: FontWeight,

+

family?: string,

+

style?: FontStyle

+

}

弹出提示文本字体样式。

+

弹出提示文本字体样式。

font

+

font

{

-

size?: number,

-

weight?: FontWeight,

-

family?: string,

-

style?: FontStyle

-

}

+

{

+

size?: number,

+

weight?: FontWeight,

+

family?: string,

+

style?: FontStyle

+

}

字母索引条默认文本字体样式。

+

字母索引条默认文本字体样式。

itemSize

+

itemSize

Length

+

Length

字母索引条字母区域大小，字母区域为正方形，设置正方形边长。

+

字母索引条字母区域大小，字母区域为正方形，设置正方形边长。

alignStyle

+

alignStyle

IndexerAlign

+

IndexerAlign

字母索引条对齐样式，支持左侧对齐样式与右侧对齐样式，影响弹窗弹出位置。

+

字母索引条对齐样式，支持左侧对齐样式与右侧对齐样式，影响弹窗弹出位置。

名称

+ - - - - - @@ -204,16 +203,26 @@ AlphabetIndexer\(value: \{arrayValue : Array, selected : number\}\) ## 事件 - -

名称

描述

+

描述

Left

+

Left

弹框显示在索引条右侧。

+

弹框显示在索引条右侧。

Right

+

Right

弹框显示在索引条左侧。

+

弹框显示在索引条左侧。

名称

+ - - + + + + + + - @@ -228,7 +237,7 @@ struct AlphabetIndexerComponent { private value: string[] = ['A', 'B', 'C', 'D', 'E', 'F', 'G', 'H', 'I', 'J', 'K', 'L', 'M', 'N', 'O', 'P', 'Q', 'R', 'S', 'T', 'U', 'V', 'W', 'X', 'Y', 'Z'] build() { - AlphabetIndexer({ ArrayValue: this.value, selected: 0 }) + AlphabetIndexer({ arrayValue: this.value, selected: 0 }) .selectedColor(0xffffff) // 选中颜色 .popupColor(0xFFFAF0) // 弹出框颜色 .selectedBackgroundColor(0xCCCCCC) // 选中背景颜色 diff --git a/zh-cn/application-dev/reference/arkui-ts/ts-container-badge.md b/zh-cn/application-dev/reference/arkui-ts/ts-container-badge.md index a6565770b515c958390b13d65496f61f1fe9afa8..cd7d617398c7a8c2cbbf4f70eccbc984de03c553 100644 --- a/zh-cn/application-dev/reference/arkui-ts/ts-container-badge.md +++ b/zh-cn/application-dev/reference/arkui-ts/ts-container-badge.md @@ -1,7 +1,14 @@ -# Badge +# Badge + +>![](../../public_sys-resources/icon-note.gif) **说明：** +>该组件从API Version 7开始支持。后续版本如有新增内容，则采用上角标单独标记该内容的起始版本。 新事件标记组件，在组件上提供事件信息展示能力。 +## 权限列表 + +无 + ## 子组件 支持单个子组件。 @@ -12,61 +19,60 @@ Badge\(value: \{count: number, position?: BadgePosition, maxCount?: number, styl - 参数 - -

名称

功能描述

+

功能描述

onSelected(index: number) => void

+

onSelected(index: number) => void

+

字母索引条选中回调。

+

onRequestPopupData(callback: (index: number) => Array<string>)8+

+

选中字母索引后，请求索引提示窗口显示内容回调。

+

返回值：索引对应的字符串数组，此字符串数组在弹出窗口中竖排显示，字符串列表最多显示5个，超出部分可以滑动显示。

+

onPopupSelected(callback: (index: number) => void)8+

索引条选中回调。

+

字母索引提示窗口选中回调。

参数名

+ - - - - - - - - - - - - - - - - - - - - - - - - @@ -79,50 +85,49 @@ Badge\(value: \{value: string, position?: BadgePosition, style?: BadgeStyle\}\) - 参数 - -

参数名

参数类型

+

参数类型

必填

+

必填

默认值

+

默认值

参数描述

+

参数描述

count

+

count

number

+

number

是

+

是

-

+

-

设置提醒消息数。

+

设置提醒消息数。

position

+

position

BadgePosition

+

BadgePosition

否

+

否

RightTop

+

RightTop

设置提示点显示位置。

+

设置提示点显示位置。

maxCount

+

maxCount

number

+

number

否

+

否

99

+

99

最大消息数，超过最大消息时仅显示maxCount+。

+

最大消息数，超过最大消息时仅显示maxCount+。

style

+

style

BadgeStyle

+

BadgeStyle

否

+

否

-

+

-

Badge组件可设置样式，支持设置文本颜色、尺寸、圆点颜色和尺寸。

+

Badge组件可设置样式，支持设置文本颜色、尺寸、圆点颜色和尺寸。

参数名

+ - - - - - - - - - - - - - - - - - - - @@ -131,61 +136,60 @@ Badge\(value: \{value: string, position?: BadgePosition, style?: BadgeStyle\}\) - BadgeStyle对象说明 - -

参数名

参数类型

+

参数类型

必填

+

必填

默认值

+

默认值

参数描述

+

参数描述

value

+

value

string

+

string

是

+

是

-

+

-

提示内容的文本字符串。

+

提示内容的文本字符串。

position

+

position

BadgePosition

+

BadgePosition

否

+

否

RightTop

+

RightTop

设置提示点显示位置。

+

设置提示点显示位置。

style

+

style

BadgeStyle

+

BadgeStyle

否

+

否

-

+

-

Badge组件可设置样式，支持设置文本颜色、尺寸、圆点颜色和尺寸。

+

Badge组件可设置样式，支持设置文本颜色、尺寸、圆点颜色和尺寸。

名称

+ - - - - - - - - - - - - - - - - - - - - - - - - @@ -194,26 +198,25 @@ Badge\(value: \{value: string, position?: BadgePosition, style?: BadgeStyle\}\) - BadgePosition枚举说明 - -

名称

类型

+

类型

必填

+

必填

默认值

+

默认值

描述

+

描述

color

+

color

Color

+

Color

否

+

否

White

+

White

文本颜色。

+

文本颜色。

fontSize

+

fontSize

number | string

+

number | string

否

+

否

10

+

10

文本大小。

+

文本大小。

badgeSize

+

badgeSize

number | string

+

number | string

是

+

是

-

+

-

badge的大小。

+

badge的大小。

badgeColor

+

badgeColor

Color

+

Color

否

+

否

Red

+

Red

badge的颜色。

+

badge的颜色。

名称

+ - - - - - - - diff --git a/zh-cn/application-dev/reference/arkui-ts/ts-container-column.md b/zh-cn/application-dev/reference/arkui-ts/ts-container-column.md index 4cd60bd7e59747882a6a90b5ff3be9e479b023f2..edf489e104de3ddba40a09bf2226ef3bd149f352 100644 --- a/zh-cn/application-dev/reference/arkui-ts/ts-container-column.md +++ b/zh-cn/application-dev/reference/arkui-ts/ts-container-column.md @@ -1,4 +1,7 @@ -# Column +# Column + +>![](../../public_sys-resources/icon-note.gif) **说明：** +>该组件从API Version 7开始支持。后续版本如有新增内容，则采用上角标单独标记该内容的起始版本。 沿垂直方向布局的容器。 @@ -12,32 +15,31 @@ ## 接口 -Column\(options?: \{ space?: Length \}\) +Column\(value:\{space?: Length\}\) - 参数 - -

名称

描述

+

描述

Right

+

Right

圆点显示在右侧纵向居中。

+

圆点显示在右侧纵向居中。

RightTop

+

RightTop

圆点显示在右上角。

+

圆点显示在右上角。

Left

+

Left

圆点显示在左侧纵向居中。

+

圆点显示在左侧纵向居中。

参数名

+ - - - - - - - - - @@ -46,24 +48,23 @@ Column\(options?: \{ space?: Length \}\) ## 属性 - -

参数名

参数类型

+

参数类型

必填

+

必填

默认值

+

默认值

参数描述

+

参数描述

space

+

space

Length

+

Length

否

+

否

0

+

0

纵向布局元素间距。

+

纵向布局元素间距。

名称

+ - - - - - - - @@ -71,26 +72,25 @@ Column\(options?: \{ space?: Length \}\) - HorizontalAlign枚举说明 - -

名称

参数类型

+

参数类型

默认值

+

默认值

描述

+

描述

alignItems

+

alignItems

HorizontalAlign

+

HorizontalAlign

Center

+

Center

设置子组件在水平方向上的对齐格式。

+

设置子组件在水平方向上的对齐格式。

名称

+ - - - - - - - diff --git a/zh-cn/application-dev/reference/arkui-ts/ts-container-columnsplit.md b/zh-cn/application-dev/reference/arkui-ts/ts-container-columnsplit.md index 566ba819871205309d0f02841adf4d2fb141f54b..9ff0cfe2b2afb89b944565bab6ce977a6108d354 100644 --- a/zh-cn/application-dev/reference/arkui-ts/ts-container-columnsplit.md +++ b/zh-cn/application-dev/reference/arkui-ts/ts-container-columnsplit.md @@ -1,7 +1,14 @@ -# ColumnSplit +# ColumnSplit + +>![](../../public_sys-resources/icon-note.gif) **说明：** +>该组件从API Version 7开始支持。后续版本如有新增内容，则采用上角标单独标记该内容的起始版本。 将子组件纵向布局，并在每个子组件之间插入一根横向的分割线。 +## 权限列表 + +无 + ## 子组件 可以包含子组件。 @@ -12,20 +19,19 @@ ColumnSplit\(\) ## 属性 - -

名称

描述

+

描述

Start

+

Start

按照语言方向起始端对齐。

+

按照语言方向起始端对齐。

Center

+

Center

居中对齐，默认对齐方式。

+

居中对齐，默认对齐方式。

End

+

End

按照语言方向末端对齐。

+

按照语言方向末端对齐。

名称

+ - - - - - diff --git a/zh-cn/application-dev/reference/arkui-ts/ts-container-counter.md b/zh-cn/application-dev/reference/arkui-ts/ts-container-counter.md index dc87742e9d9406c5b9fc600ea433fd7da77dd9a5..169baa667cd8a747b5fcccfd0ac6ce6827a47e4b 100644 --- a/zh-cn/application-dev/reference/arkui-ts/ts-container-counter.md +++ b/zh-cn/application-dev/reference/arkui-ts/ts-container-counter.md @@ -1,7 +1,14 @@ -# Counter +# Counter + +>![](../../public_sys-resources/icon-note.gif) **说明：** +>该组件从API Version 7开始支持。后续版本如有新增内容，则采用上角标单独标记该内容的起始版本。 计数器组件，提供相应的增加或者减少的计数操作。 +## 权限列表 + +无 + ## 子组件 可以包含子组件。 @@ -14,21 +21,20 @@ Counter\(\) 不支持通用事件和手势， 仅支持如下事件： - -

名称

参数类型

+

参数类型

描述

+

描述

resizeable

+

resizeable

boolean

+

boolean

分割线是否可拖拽，默认为false。

+

分割线是否可拖拽，默认为false。

名称

+ - - - - - diff --git a/zh-cn/application-dev/reference/arkui-ts/ts-container-flex.md b/zh-cn/application-dev/reference/arkui-ts/ts-container-flex.md index d2c019b8f0c350957a493bf4c15af1fe98094caa..7aaf8e65d581ffd0b7db879893e391f73f5003d8 100644 --- a/zh-cn/application-dev/reference/arkui-ts/ts-container-flex.md +++ b/zh-cn/application-dev/reference/arkui-ts/ts-container-flex.md @@ -1,4 +1,7 @@ -# Flex +# Flex + +>![](../../public_sys-resources/icon-note.gif) **说明：** +>该组件从API Version 7开始支持。后续版本如有新增内容，则采用上角标单独标记该内容的起始版本。 弹性布局组件。 @@ -12,78 +15,77 @@ ## 接口 -Flex\(options?: \{ direction?: FlexDirection, wrap?: FlexWrap, justifyContent?: FlexAlign, alignItems?: ItemAlign, alignContent?: FlexAlign \}\) +Flex\(options?: \{ direction?: FlexDirection, wrap?: FlexWrap, justifyContent?: FlexAlign, alignItems?: ItemAlign, alignContent?: FlexAlign \}\) 标准Flex布局容器。 - 参数 - -

名称

功能描述

+

功能描述

onInc(callback: () => void)

+

onInc(event: () => void)

监听数值增加事件。

+

监听数值增加事件。

onDec(callback: () => void)

+

onDec(event: () => void)

监听数值减少事件。

+

监听数值减少事件。

参数名

+ - - - - - - - - - - - - - - - - - - - - - - - - - - - - - @@ -91,31 +93,30 @@ Flex\(options?: \{ direction?: FlexDirection, wrap?: FlexWrap, justifyContent?: - FlexDirection枚举说明 - -

参数名

参数类型

+

参数类型

必填

+

必填

默认值

+

默认值

参数描述

+

参数描述

direction

+

direction

FlexDirection

+

FlexDirection

否

+

否

Row

+

Row

子组件在Flex容器上排列的方向，即主轴的方向。

+

子组件在Flex容器上排列的方向，即主轴的方向。

wrap

+

wrap

FlexWrap

+

FlexWrap

否

+

否

NoWrap

+

NoWrap

Flex容器是单行/列还是多行/列排列。

+

Flex容器是单行/列还是多行/列排列。

justifyContent

+

justifyContent

FlexAlign

+

FlexAlign

否

+

否

Start

+

Start

子组件在Flex容器主轴上的对齐格式。

+

子组件在Flex容器主轴上的对齐格式。

alignItems

+

alignItems

ItemAlign

+

ItemAlign

否

+

否

Stretch

+

Stretch

子组件在Flex容器交叉轴上的对齐格式。

+

子组件在Flex容器交叉轴上的对齐格式。

alignContent

+

alignContent

FlexAlign

+

FlexAlign

否

+

否

Start

+

Start

交叉轴中有额外的空间时，多行内容的对齐方式。仅在wrap为Wrap或WrapReverse下生效。

+

交叉轴中有额外的空间时，多行内容的对齐方式。仅在wrap为Wrap或WrapReverse下生效。

名称

+ - - - - - - - - - @@ -124,26 +125,25 @@ Flex\(options?: \{ direction?: FlexDirection, wrap?: FlexWrap, justifyContent?: - FlexWrap枚举说明 - -

名称

描述

+

描述

Row

+

Row

主轴与行方向一致作为布局模式。

+

主轴与行方向一致作为布局模式。

RowReverse

+

RowReverse

与Row方向相反方向进行布局。

+

与Row方向相反方向进行布局。

Column

+

Column

主轴与列方向一致作为布局模式。

+

主轴与列方向一致作为布局模式。

ColumnReverse

+

ColumnReverse

与Column相反方向进行布局。

+

与Column相反方向进行布局。

名称

+ - - - - - - - @@ -152,41 +152,40 @@ Flex\(options?: \{ direction?: FlexDirection, wrap?: FlexWrap, justifyContent?: - FlexAlign枚举说明 - -

名称

描述

+

描述

NoWrap

+

NoWrap

Flex容器的元素单行/列布局，子项允许超出容器。

+

Flex容器的元素单行/列布局，子项允许超出容器。

Wrap

+

Wrap

Flex容器的元素多行/列排布，子项允许超出容器。

+

Flex容器的元素多行/列排布，子项允许超出容器。

WrapReverse

+

WrapReverse

Flex容器的元素反向多行/列排布，子项允许超出容器。

+

Flex容器的元素反向多行/列排布，子项允许超出容器。

名称

+ - - - - - - - - - - - - - @@ -402,7 +401,7 @@ struct FlexExample4 { ![](figures/Flex04.jpg) -![](figures/Flex04-16.gif) +![](figures/Flex04-2.gif) ``` // Example 05 diff --git a/zh-cn/application-dev/reference/arkui-ts/ts-container-grid.md b/zh-cn/application-dev/reference/arkui-ts/ts-container-grid.md index 5a1014c3aee29078999b85c45566a876067d87b0..35d9a4fb0082b17e6ea924bace9353641db02297 100644 --- a/zh-cn/application-dev/reference/arkui-ts/ts-container-grid.md +++ b/zh-cn/application-dev/reference/arkui-ts/ts-container-grid.md @@ -1,8 +1,11 @@ -# Grid +# Grid + +>![](../../public_sys-resources/icon-note.gif) **说明：** +>该组件从API Version 7开始支持。后续版本如有新增内容，则采用上角标单独标记该内容的起始版本。 网格容器，二维布局，将容器划分成"行"和"列"，产生单元格，然后指定"项目所在"的单元格，可以任意组合不同的网格，做出各种各样的布局。 -## 权限类别 +## 权限列表 无 @@ -16,51 +19,50 @@ Grid\(\) ## 属性 - -

名称

描述

+

描述

Start

+

Start

元素在主轴方向首端对齐, 第一个元素与行首对齐，同时后续的元素与前一个对齐。

+

元素在主轴方向首端对齐, 第一个元素与行首对齐，同时后续的元素与前一个对齐。

Center

+

Center

元素在主轴方向中心对齐，第一个元素与行首的距离与最后一个元素与行尾距离相同。

+

元素在主轴方向中心对齐，第一个元素与行首的距离与最后一个元素与行尾距离相同。

End

+

End

元素在主轴方向尾部对齐, 最后一个元素与行尾对齐，其他元素与后一个对齐。

+

元素在主轴方向尾部对齐, 最后一个元素与行尾对齐，其他元素与后一个对齐。

SpaceBetween

+

SpaceBetween

Flex主轴方向均匀分配弹性元素，相邻元素之间距离相同。 第一个元素与行首对齐，最后一个元素与行尾对齐。

+

Flex主轴方向均匀分配弹性元素，相邻元素之间距离相同。 第一个元素与行首对齐，最后一个元素与行尾对齐。

SpaceAround

+

SpaceAround

Flex主轴方向均匀分配弹性元素，相邻元素之间距离相同。 第一个元素到行首的距离和最后一个元素到行尾的距离时相邻元素之间距离的一半。

+

Flex主轴方向均匀分配弹性元素，相邻元素之间距离相同。 第一个元素到行首的距离和最后一个元素到行尾的距离时相邻元素之间距离的一半。

SpaceEvenly

+

SpaceEvenly

Flex主轴方向元素等间距布局， 相邻元素之间的间距、第一个元素与行首的间距、最后一个元素到行尾的间距都完全一样。

+

Flex主轴方向元素等间距布局， 相邻元素之间的间距、第一个元素与行首的间距、最后一个元素到行尾的间距都完全一样。

名称

+ - - - - - - - - - - - - - - - - - - - @@ -68,16 +70,15 @@ Grid\(\) ## 事件 - -

名称

参数类型

+

参数类型

默认值

+

默认值

描述

+

描述

columnsTemplate

+

columnsTemplate

string

+

string

'1fr'

+

'1fr'

用于设置当前网格布局列的数量，不设置时默认1列 示例, '1fr 1fr 2fr' 分三列，将父组件允许的宽分为4等份，第一列占1份，第二列占一份，第三列占2份。

+

用于设置当前网格布局列的数量，不设置时默认1列 示例, '1fr 1fr 2fr' 分三列，将父组件允许的宽分为4等份，第一列占1份，第二列占一份，第三列占2份。

rowsTemplate

+

rowsTemplate

string

+

string

'1fr'

+

'1fr'

用于设置当前网格布局行的数量，不设置时默认1行 示例, '1fr 1fr 2fr'分三行，将父组件允许的高分为4等份，第一行占1份，第二行占一份，第三行占2份。

+

用于设置当前网格布局行的数量，不设置时默认1行 示例, '1fr 1fr 2fr'分三行，将父组件允许的高分为4等份，第一行占1份，第二行占一份，第三行占2份。

columnsGap

+

columnsGap

Length

+

Length

0

+

0

用于设置列与列的间距。

+

用于设置列与列的间距。

rowsGap

+

rowsGap

Length

+

Length

0

+

0

用于设置行与行的间距。

+

用于设置行与行的间距。

名称

+ - - - @@ -144,5 +145,5 @@ struct GridExample { } ``` -![](figures/grid-17.gif) +![](figures/grid-3.gif) diff --git a/zh-cn/application-dev/reference/arkui-ts/ts-container-gridcontainer.md b/zh-cn/application-dev/reference/arkui-ts/ts-container-gridcontainer.md index 664967ecb0c89583edaa91b5fdc5c360cd923f49..3d7993318646b8c38a5d36d5ae3c8a7981295592 100644 --- a/zh-cn/application-dev/reference/arkui-ts/ts-container-gridcontainer.md +++ b/zh-cn/application-dev/reference/arkui-ts/ts-container-gridcontainer.md @@ -1,72 +1,78 @@ -# GridContainer +# GridContainer + +>![](../../public_sys-resources/icon-note.gif) **说明：** +>该组件从API Version 7开始支持。后续版本如有新增内容，则采用上角标单独标记该内容的起始版本。 纵向排布栅格布局容器，仅在栅格布局场景中使用。 +## 权限列表 + +无 + ## 子组件 可以包含子组件。 ## 接口 -GridContainer\(options? :\{ columns?: number | 'auto', sizeType?: SizeType, gutter?: Length, margin?: Length \}\) +GridContainer\(options?: \{ columns?: number | 'auto', sizeType?: SizeType, gutter?: Length, margin?: Length\}\) - 参数 - -

名称

功能描述

+

功能描述

onScrollIndex(first: number) => void

+

onScrollIndex(first: number) => void

当前列表显示的起始位置item发生变化时触发。

+

当前列表显示的起始位置item发生变化时触发。

参数名

+ - - - - - - - - - - - - - - - - - - - - - - - - @@ -74,36 +80,35 @@ GridContainer\(options? :\{ columns?: number | 'auto', sizeType?: SizeType, gutt - SizeType枚举说明 - -

参数名

类型

+

类型

必填

+

必填

默认值

+

默认值

说明

+

说明

columns

+

columns

number

+

number

否

+

否

'auto'

+

'auto'

设置当前布局总列数。

+

设置当前布局总列数。

sizeType

+

sizeType

SizeType

+

SizeType

否

+

否

Auto

+

Auto

选用设备宽度类型。

+

选用设备宽度类型。

gutter

+

gutter

Length

+

Length

否

+

否

-

+

-

栅格布局列间距。

+

栅格布局列间距。

margin

+

margin

Length

+

Length

否

+

否

-

+

-

栅格布局两侧间距。

+

栅格布局两侧间距。

名称

+ - - - - - - - - - - - diff --git a/zh-cn/application-dev/reference/arkui-ts/ts-container-griditem.md b/zh-cn/application-dev/reference/arkui-ts/ts-container-griditem.md index 861ab99671378ba7b14158a6f12a7a00f1e063a5..cd18a91fe5db299bd205d91968a4ff6e32eb408e 100644 --- a/zh-cn/application-dev/reference/arkui-ts/ts-container-griditem.md +++ b/zh-cn/application-dev/reference/arkui-ts/ts-container-griditem.md @@ -1,4 +1,7 @@ -# GridItem +# GridItem + +>![](../../public_sys-resources/icon-note.gif) **说明：** +>该组件从API Version 7开始支持。后续版本如有新增内容，则采用上角标单独标记该内容的起始版本。 网格容器中单项内容容器。 @@ -16,60 +19,59 @@ GridItem\(\) ## 属性 - -

名称

描述

+

描述

XS

+

XS

最小宽度类型设备。

+

最小宽度类型设备。

SM

+

SM

小宽度类型设备。

+

小宽度类型设备。

MD

+

MD

中等宽度类型设备。

+

中等宽度类型设备。

LG

+

LG

大宽度类型设备。

+

大宽度类型设备。

Auto

+

Auto

根据设备类型进行选择。

+

根据设备类型进行选择。

名称

+ - - - - - - - - - - - - - - - - - - - - - - - diff --git a/zh-cn/application-dev/reference/arkui-ts/ts-container-list.md b/zh-cn/application-dev/reference/arkui-ts/ts-container-list.md index 84d29c074aa9caa2bacb7caac0621fe5e665468b..c6519409a4b4778e9c32e1ff11ec0200cb35cbc5 100644 --- a/zh-cn/application-dev/reference/arkui-ts/ts-container-list.md +++ b/zh-cn/application-dev/reference/arkui-ts/ts-container-list.md @@ -1,4 +1,7 @@ -# List +# List + +>![](../../public_sys-resources/icon-note.gif) **说明：** +>该组件从API Version 7开始支持。后续版本如有新增内容，则采用上角标单独标记该内容的起始版本。 列表包含一系列相同宽度的列表项。适合连续、多行呈现同类数据，例如图片和文本。 @@ -12,43 +15,42 @@ ## 接口 -List\(options?: \{ space?: number, initialIndex?: number \}\) +List\(value:\{space?: number, initialIndex?: number\}\) - 参数 - -

名称

参数类型

+

参数类型

默认值

+

默认值

描述

+

描述

rowStart

+

rowStart

number

+

number

-

+

-

用于指定当前元素起始行号。

+

用于指定当前元素起始行号。

rowEnd

+

rowEnd

number

+

number

-

+

-

用于指定当前元素终点行号。

+

用于指定当前元素终点行号。

columnStart

+

columnStart

number

+

number

-

+

-

用于指定当前元素起始列号。

+

用于指定当前元素起始列号。

columnEnd

+

columnEnd

number

+

number

-

+

-

用于指定当前元素终点列号。

+

用于指定当前元素终点列号。

forceRebuild

+

forceRebuild

boolean

+

boolean

false

+

false

用于设置在触发组件build时是否重新创建此节点。

+

用于设置在触发组件build时是否重新创建此节点。

参数名

+ - - - - - - - - - - - - - - @@ -57,115 +59,90 @@ List\(options?: \{ space?: number, initialIndex?: number \}\) ## 属性 - -

参数名

参数类型

+

参数类型

必填

+

必填

默认值

+

默认值

参数描述

+

参数描述

space

+

space

number

+

number

否

+

否

0

+

0

列表项间距。

+

列表项间距。

initialIndex

+

initialIndex

number

+

number

否

+

否

0

+

0

设置当前List初次加载时视口起始位置显示的item，即显示第一个item，如设置的序号超过了最后一个item的序号，则设置不生效。

+

设置当前List初次加载时视口起始位置显示的item，即显示第一个item，如设置的序号超过了最后一个item的序号，则设置不生效。

名称

+ - - - - - - - - - - - - - - - - - - - - - - -

名称

参数类型

+

参数类型

默认值

+

默认值

描述

+

描述

listDirection

+

listDirection

Axis

+

Axis

Vertical

+

Vertical

设置List组件排列方向参照Axis枚举说明。

+

设置List组件排列方向参照Axis枚举说明。

divider

+

divider

{

-

strokeWidth: Length,

-

color?:Color,

-

startMargin?: Length,

-

endMargin?: Length

-

}

+

{

+

strokeWidth: Length,

+

color?:Color,

+

startMargin?: Length,

+

endMargin?: Length

+

}

-

+

-

用于设置ListItem分割线样式，默认无分割线。

-

strokeWidth: 分割线的线宽。

-

color: 分割线的颜色。

-

startMargin： 分割线距离列表侧边起始端的距离。

-

endMargin: 分割线距离列表侧边结束端的距离。

+

用于设置ListItem分割线样式，默认无分割线。

+

strokeWidth: 分割线的线宽。

+

color: 分割线的颜色。

+

startMargin： 分割线距离列表侧边起始端的距离。

+

endMargin: 分割线距离列表侧边结束端的距离。

editMode

+

editMode

boolean

+

boolean

false

+

false

声明当前List组件是否处于可编辑模式。

+

声明当前List组件是否处于可编辑模式。

edgeEffect

+

edgeEffect

EdgeEffect

+

EdgeEffect

Spring

+

Spring

滑动效果，目前支持的滑动效果参见EdgeEffect的枚举说明。

+

滑动效果，目前支持的滑动效果参见EdgeEffect的枚举说明。

chainAnimation

+

chainAnimation

boolean

+

boolean

false

+

false

用于设置当前list是否启用链式联动动效，开启后列表滑动以及顶部和底部拖拽时会有链式联动的效果。链式联动效果：list内的list-item间隔一定距离，在基本的滑动交互行为下，主动对象驱动从动对象进行联动，驱动效果遵循弹簧物理动效。

-
  • false：不启用链式联动。
  • true：启用链式联动。
+

用于设置当前list是否启用链式联动动效，开启后列表滑动以及顶部和底部拖拽时会有链式联动的效果。链式联动效果：list内的list-item间隔一定距离，在基本的滑动交互行为下，主动对象驱动从动对象进行联动，驱动效果遵循弹簧物理动效。

+
  • false：不启用链式联动。
  • true：启用链式联动。
-- Axis枚举说明 - - - - - - - - - - - - - -

名称

-

描述

-

Vertical

-

纵向排列。

-

Horizontal

-

横向排列。

-
- - - EdgeEffect枚举说明 - -

名称

+ - - - - - @@ -174,31 +151,105 @@ List\(options?: \{ space?: number, initialIndex?: number \}\) ## 事件 - -

名称

描述

+

描述

Spring

+

Spring

弹性物理动效，滑动到边缘后可以根据初始速度或通过触摸事件继续滑动一段距离，松手后回弹。

+

弹性物理动效，滑动到边缘后可以根据初始速度或通过触摸事件继续滑动一段距离，松手后回弹。

None

+

None

滑动到边缘后无效果。

+

滑动到边缘后无效果。

名称

+ - - + + + + + + + + + + + + + + + - - -

名称

功能描述

+

功能描述

onItemDelete(index: number) => boolean

+

onItemDelete(index: number) => boolean

+

列表项删除时触发。

+

onScrollIndex(firstIndex: number, lastIndex: number) => void

+

当前列表显示的起始位置和终止位置发生变化时触发。

+

onItemDragEnter(callback: (event: ItemDragInfo) => void)

+

绑定后，拖拽在可放置组件范围内移动时，触发回调。

+
  • itemIndex: 当前被拖拽的ListItem原本的索引。
  • insertIndex: 拖动当前ListItem插入List后的索引。
+
说明：

当监听了onDrop事件时，此事件才有效。

+
+

onItemDragMove(callback: (event: ItemDragInfo, itemIndex: number, insertIndex: number) => void)

+

+

绑定后，拖拽在可放置组件范围内移动时，触发回调。

+
  • itemIndex: 当前被拖拽的ListItem原本的索引。
  • insertIndex: 拖动当前ListItem插入List后的索引。
+
说明：

当监听了onDrop事件时，此事件才有效。

+
+

onItemDragLeave(callback: (event: ItemDragInfo, itemIndex: number) => void)

+

+

绑定后，拖拽离开组件范围内时，触发回调。

+
  • itemIndex: 当前被拖拽的ListItem原本的索引。
+
说明：

当监听了onDrop事件时，此事件才有效。

+
+

onItemDragStart(callback: (event: ItemDragInfo, itemIndex: number) => CustomBuilder)

+

列表项删除时触发。

+

绑定后，第一次拖拽ListItem时，触发回调。

+
  • itemIndex: 当前被拖拽的ListItem原本的索引。
  • 返回值：被拖拽ListItem的浮动UI布局。
+
说明：

当监听了onDrop事件时，此事件才有效。

+

onScrollIndex(firstIndex: number, lastIndex: number) => void

+

onItemDrop(callback: (event: ItemDragInfo, itemIndex: number, insertIndex: number，isSuccess: boolean) => void)

+

当前列表显示的起始位置和终止位置发生变化时触发。

+

绑定此事件的组件可作为拖拽释放目标，当在本组件范围内停止拖拽行为时，触发此回调。

+
  • itemIndex: 当前被拖拽的ListItem原本的索引。
  • insertIndex: 拖动当前ListItem插入List后的索引。
  • isSuccess: 拖拽释放时插入是否成功。
+
说明：

当监听了onDrop事件时，此事件才有效。

+
>![](../../public_sys-resources/icon-note.gif) **说明：** ->List使能可编辑模式需配合事件方法onItemDelete和ListItem的editable属性，即可编辑模式实现删除列表项功能，需满足下列三个条件： ->- 配置editMode\(true\)； ->- 绑定onItemDelete回调，回调中return true； ->- ListItem属性editable\(true\)。 +>List使能可编辑模式需配合onItemDelete事件和ListItem的editable属性，即可编辑模式实现删除列表项功能，需满足以下条件： +>- editMode属性设置为true。 +>- 绑定onItemDelete事件，且事件回调返回true。 +>- ListItem的editable属性设置为true。 +>实现ListItem拖拽，需满足以下条件： +>- editMode属性设置为true。 +>- 绑定onItemDragStart事件，且事件回调中返回浮动UI布局。 + +- ItemDragInfo对象说明 + + + + + + + + + + + + + + + +

属性名称

+

属性类型

+

描述

+

x

+

number

+

拖拽点的横坐标。

+

y

+

number

+

拖拽点的纵坐标。

+
+ ## 示例 @@ -250,3 +301,121 @@ struct ListExample { ![](figures/list.gif) +``` +@Entry +@Component +struct DragListExample { + @State number1: string[] = ['0', '1', '2'] + @State number2: string[] = ['one', 'two', 'three'] + @State text: string = '' + @State bool1: boolean = false + @State bool2: boolean = false + + @Builder pixelMapBuilder() { + Text('-1') + .width('100%').height(100).fontSize(16) + .textAlign(TextAlign.Center).borderRadius(10).backgroundColor(0xFFFFFF) + } + + build() { + Column() { + List() { + ForEach(this.number1, (item) => { + ListItem() { + Text('' + item) + .width('100%').height(100).fontSize(16) + .textAlign(TextAlign.Center).borderRadius(10).backgroundColor(0xF666FF) + } + }, item => item) + } + .editMode(true) + .width('90%').divider({ strokeWidth: 2, color: 0xFFFFFF, startMargin: 20, endMargin: 20 }) + .onItemDelete((index: number) => { + console.info(this.Number1[index] + 'Delete') + this.Number1.splice(index, 1) + console.info(JSON.stringify(this.Number1)) + return true + }) + .onItemDragStart((event: ItemDragInfo, itemIndex: number) => { + this.bool1 = true + this.text = this.number1[itemIndex] + console.log("List1 onItemDragStart, itemIndex:" + itemIndex + ", ItemDragInfo:"+`${JSON.stringify(event)}`) + return this.pixelMapBuilder + }) + .onItemDragEnter((event: ItemDragInfo) => { + console.log("List1 onItemDragEnter") + }) + .onItemDragMove((event: ItemDragInfo, itemIndex: number, insertIndex: number) => { + console.log("List1 onItemDragMove, itemIndex:" + itemIndex + ", insertIndex:" + insertIndex) + }) + .onItemDragLeave((event: ItemDragInfo, itemIndex: number) => { + console.log("List1 onItemDragLeave, itemIndex:" + itemIndex) + }) + .onItemDrop((event: ItemDragInfo, itemIndex: number, insertIndex: number, isSuccess: boolean) => { + if (isSuccess) { + if (this.bool2) { + this.number2.splice(itemIndex, 1) + this.number1.splice(insertIndex, 0, this.text) + this.bool1 = false + this.bool2 = false + } else if (this.bool1) { + this.number1.splice(itemIndex, 1) + this.number1.splice(insertIndex, 0, this.text) + this.bool1 = false + this.bool2 = false + } + } + console.log("List1 onItemDrop, itemIndex:" + itemIndex + ", insertIndex:" + insertIndex + ", isSuccess:" + isSuccess) + }) + Divider().strokeWidth(5).color(0x2788D9).lineCap(LineCapStyle.Round).margin(20) + List() { + ForEach(this.Number2, (item) => { + ListItem() { + Text('' + item) + .width('100%').height(100).fontSize(16) + .textAlign(TextAlign.Center).borderRadius(10).backgroundColor(0xFFF888) + } + }, item => item) + } + .edgeEffect(EdgeEffect.None) + .width('90%') + .editMode(true) + .divider({ strokeWidth: 2, color: 0xFFFFFF, startMargin: 20, endMargin: 20 }) + .onItemDragStart((event: ItemDragInfo, itemIndex: number) => { + this.bool2 = true + this.text = this.number2[itemIndex] + console.log("List2 onItemDragStart, itemIndex:" + itemIndex) + return this.pixelMapBuilder + }) + .onItemDragEnter((event: ItemDragInfo) => { + console.log("List2 onItemDragEnter") + }) + .onItemDragMove((event: ItemDragInfo, itemIndex: number, insertIndex: number) => { + console.log("List2 onItemDragMove, itemIndex:" + itemIndex + ", insertIndex:" + insertIndex) + }) + .onItemDragLeave((event: ItemDragInfo, itemIndex: number) => { + console.log("List2 onItemDragLeave, itemIndex:" + itemIndex) + }) + .onItemDrop((event: ItemDragInfo, itemIndex: number, insertIndex: number, isSuccess: boolean) => { + if (isSuccess) { + if (this.bool1) { + this.number1.splice(itemIndex, 1) + this.number2.splice(insertIndex, 0, this.text) + this.bool1 = false + this.bool2 = false + } else if (this.bool2) { + this.number2.splice(itemIndex, 1) + this.number2.splice(insertIndex, 0, this.text) + this.bool1 = false + this.bool2 = false + } + } + console.log("List2 onItemDrop, itemIndex:" + itemIndex + ", insertIndex:" + insertIndex + ", isSuccess:" + isSuccess) + }) + }.width('100%').height('100%').backgroundColor(0xE600000).padding({ top: 25 }) + } +} +``` + +![](figures/GIF-4.gif) + diff --git a/zh-cn/application-dev/reference/arkui-ts/ts-container-listitem.md b/zh-cn/application-dev/reference/arkui-ts/ts-container-listitem.md index 907643b092ddb532e44ad1c7c97bfb93f7aafd7d..729d29aee48fd99cb22c6abe97f964eb296972be 100644 --- a/zh-cn/application-dev/reference/arkui-ts/ts-container-listitem.md +++ b/zh-cn/application-dev/reference/arkui-ts/ts-container-listitem.md @@ -1,4 +1,7 @@ -# ListItem +# ListItem + +>![](../../public_sys-resources/icon-note.gif) **说明：** +>该组件从API Version 7开始支持。后续版本如有新增内容，则采用上角标单独标记该内容的起始版本。 用来展示列表具体item，宽度默认充满List组件，必须配合List来使用。 @@ -16,33 +19,32 @@ ListItem\(\) ## 属性 - -

名称

+ - - - - - - - - - - - @@ -50,21 +52,20 @@ ListItem\(\) - Sticky枚举说明 - -

名称

参数类型

+

参数类型

默认值

+

默认值

描述

+

描述

sticky

+

sticky

Sticky

+

Sticky

None

+

None

设置ListItem吸顶效果，参见Sticky枚举描述。

+

设置ListItem吸顶效果，参见Sticky枚举描述。

editable

+

editable

boolean

+

boolean

false

+

false

声明当前ListItem元素是否可编辑，进入编辑模式后可删除。

+

声明当前ListItem元素是否可编辑，进入编辑模式后可删除。

名称

+ - - - - - diff --git a/zh-cn/application-dev/reference/arkui-ts/ts-container-navigation.md b/zh-cn/application-dev/reference/arkui-ts/ts-container-navigation.md new file mode 100644 index 0000000000000000000000000000000000000000..d5fd5e8ca1dbf71323978fded1035c73b675a34f --- /dev/null +++ b/zh-cn/application-dev/reference/arkui-ts/ts-container-navigation.md @@ -0,0 +1,414 @@ +# Navigation + +>![](../../public_sys-resources/icon-note.gif) **说明：** +>该组件从API Version 8开始支持。后续版本如有新增内容，则采用上角标单独标记该内容的起始版本。 + +Navigation组件一般作为Page页面的根容器，通过属性设置来展示页面的标题、工具栏、菜单。 + +## 权限列表 + +无 + +## 子组件 + +可以包含子组件。 + +## 接口 + +Navigation\(\) + +创建可以根据属性设置，自动展示导航栏、标题、工具栏的组件。 + +## 属性 + +

名称

描述

+

描述

None

+

None

无吸顶效果。

+

无吸顶效果。

Normal

+

Normal

当前item吸顶，滑动消失。

+

当前item吸顶，滑动消失。
+ + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + +

名称

+

参数类型

+

默认值

+

描述

+

title

+

string | CustomBuilder

+

-

+

页面标题。

+

subtitle

+

string

+

-

+

页面副标题。

+

menus

+

Array<NavigationMenuItem> | CustomBuilder

+

-

+

页面右上角菜单。

+

+

titleMode

+

NavigationTitleMode

+

NavigationTitleMode.Free

+

页面标题栏显示模式。

+

toolBar

+

{

+

items:[

+

Object

+

] }

+

| CustomBuilder

+

+

-

+

设置工具栏内容。

+

items: 工具栏所有项。

+

hideToolBar

+

boolean

+

false

+

设置隐藏/显示工具栏：

+

true: 隐藏工具栏。

+

false: 显示工具栏。

+

hideTitleBar

+

boolean

+

false

+

隐藏标题栏。

+

hideBackButton

+

boolean

+

false

+

隐藏返回键。

+
+ +- NavigationMenuItem类型接口说明 + + + + + + + + + + + + + + + + + + + + + + + + + + + + +

名称

+

类型

+

必填

+

默认值

+

描述

+

value

+

string

+

是

+

-

+

菜单栏单个选项的显示文本。

+

icon

+

string

+

否

+

-

+

菜单栏单个选项的图标资源路径。

+

action

+

() => void

+

否

+

-

+

当前选项被选中的事件回调。

+
+ + +- Object类型接口说明 + + + + + + + + + + + + + + + + + + + + + + + + + + + +

名称

+

类型

+

必填

+

默认值

+

描述

+

value

+

string

+

是

+

-

+

工具栏单个选项的显示文本。

+

icon

+

string

+

否

+

-

+

工具栏单个选项的图标资源路径。

+

action

+

() => void

+

否

+

-

+

当前选项被选中的事件回调。

+
+ +- NavigationTitleMode枚举说明 + + + + + + + + + + + + + + + +

名称

+

描述

+

Free

+

当内容为可滚动组件时，标题随着内容向上滚动而缩小（子标题的大小不变、淡出）。向下滚动内容到顶时则恢复原样。

+

Mini

+

固定为小标题模式（图标+主副标题）。

+

Full

+

固定为大标题模式（主副标题）。

+
+ + >![](../../public_sys-resources/icon-note.gif) **说明：** + >目前可滚动组件只支持List。 + + +## 事件 + + + + + + + + + +

名称

+

功能描述

+

onTitleModeChanged(callback: (titleMode: NavigationTitleMode) => void)

+

当titleMode为NavigationTitleMode.Free时，随着可滚动组件的滑动标题栏模式发生变化时触发此回调。

+
+ +## 示例 + +``` +/ Example 01 +@Entry +@Component +struct NavigationExample { + private arr: number[] = [0, 1, 2, 3, 4, 5, 6, 7, 8, 9] + @State hideBar: boolean = true + + @Builder NavigationTitle() { + Column() { + Text('title') + .width(80) + .height(60) + .fontColor(Color.Blue) + .fontSize(30) + } + .onClick(() => { + console.log("title") + }) + } + + @Builder NavigationMenus() { + Row() { + Image('images/add.png') + .width(25) + .height(25) + Image('comment/more.png') + .width(25) + .height(25) + .margin({ left: 30 }) + }.width(100) + } + + build() { + Column() { + Navigation() { + Search({ value: '', placeholder: "" }).width('85%').margin(26) + List({ space: 5, initialIndex: 0 }) { + ForEach(this.arr, (item) => { + ListItem() { + Text('' + item) + .width('90%') + .height(80) + .backgroundColor('#3366CC') + .borderRadius(15) + .fontSize(16) + .textAlign(TextAlign.Center) + }.editable(true) + }, item => item) + } + .listDirection(Axis.Vertical) + .height(300) + .margin({ top: 10, left: 18 }) + .width('100%') + + Button(this.hideBar ? "tool bar" : "hide bar") + .onClick(() => { + this.hideBar = !this.hideBar + }) + .margin({ left: 135, top: 60 }) + } + .title(this.NavigationTitle) + .subTitle('subtitle') + .menus(this.NavigationMenus) + .titleMode(NavigationTitleMode.Free) + .hideTitleBar(false) + .hideBackButton(false) + .onTitleModeChanged((titleModel: NavigationTitleMode) => { + console.log('titleMode') + }) + .toolBar({ items: [ + { value: 'app', icon: 'images/grid.svg', action: () => { + console.log("app") + } }, + { value: 'add', icon: 'images/add.svg', action: () => { + console.log("add") + } }, + { value: 'collect', icon: 'images/collect.svg', action: () => { + console.log("collect") + } }] }) + .hideToolBar(this.hideBar) + } + } +} +``` + +![](figures/66666.gif) + +``` +// Example 02 +@Entry +@Component +struct ToolbarBuilderExample { + @State currentIndex: number = 0 + @State Build: Array = [ + { + icon: $r('app.media.ic_public_add'), + icon_after: $r('app.media.ic_public_addcolor'), + text: 'add', + num: 0 + }, + { + icon: $r('app.media.ic_public_app'), + icon_after: $r('app.media.ic_public_appcolor'), + text: 'app', + num: 1 + }, + { + icon: $r('app.media.ic_public_collect'), + icon_after: $r('app.media.ic_public_collectcolor'), + text: 'collect', + num: 2 + } + ] + + @Builder NavigationToolbar() { + Row() { + ForEach(this.Build, item => { + Column() { + Image(this.currentIndex == item.num ? item.icon_after : item.icon) + .width(25) + .height(25) + Text(item.text) + .fontColor(this.currentIndex == item.num ? "#ff7500" : "#000000") + } + .onClick(() => { + this.currentIndex = item.num + }) + .margin({ left: 70 }) + }) + } + } + + build() { + Column() { + Navigation() { + Flex() { + } + } + .toolBar(this.NavigationToolbar) + } + } +} +``` + +![](figures/duande.gif) + diff --git a/zh-cn/application-dev/reference/arkui-ts/ts-container-navigator.md b/zh-cn/application-dev/reference/arkui-ts/ts-container-navigator.md index d9de3e22e0165b94c0e5225c06445f89d4052818..9fe06e2c64b7ba93a752ffe6fd73009380f4bf76 100644 --- a/zh-cn/application-dev/reference/arkui-ts/ts-container-navigator.md +++ b/zh-cn/application-dev/reference/arkui-ts/ts-container-navigator.md @@ -1,4 +1,7 @@ -# Navigator +# Navigator + +>![](../../public_sys-resources/icon-note.gif) **说明：** +>该组件从API Version 7开始支持。后续版本如有新增内容，则采用上角标单独标记该内容的起始版本。 路由容器组件，提供路由跳转能力。 @@ -18,39 +21,38 @@ Navigator\(value?: \{target: string, type?: NavigationType\}\) - 参数 - -

参数名

+ - - - - - - - - - - - - - - @@ -59,25 +61,25 @@ Navigator\(value?: \{target: string, type?: NavigationType\}\) - NavigationType枚举说明 -

参数名

参数类型

+

参数类型

必填

+

必填

默认值

+

默认值

参数描述

+

参数描述

target

+

target

string

+

string

是

+

是

-

+

-

指定跳转目标页面的路径。

+

指定跳转目标页面的路径。

type

+

type

NavigationType

+

NavigationType

否

+

否

Push

+

Push

指定路由方式。

+

指定路由方式。

名称

+ - - - - - - - @@ -86,33 +88,32 @@ Navigator\(value?: \{target: string, type?: NavigationType\}\) ## 属性 - -

名称

描述

+

描述

Push

+

Push

跳转到应用内的指定页面。

+

跳转到应用内的指定页面。

Replace

+

Replace

用应用内的某个页面替换当前页面，并销毁被替换的页面。

+

用应用内的某个页面替换当前页面，并销毁被替换的页面。

Back

+

Back

返回上一页面或指定的页面。

+

返回上一页面或指定的页面。

名称

+ - - - - - - - - - - - diff --git a/zh-cn/application-dev/reference/arkui-ts/ts-container-panel.md b/zh-cn/application-dev/reference/arkui-ts/ts-container-panel.md index f9dec07ce7ec94bde6694ba9623ce45df6da812c..db74389b5089b02a97eb081126d1868ff384d44f 100644 --- a/zh-cn/application-dev/reference/arkui-ts/ts-container-panel.md +++ b/zh-cn/application-dev/reference/arkui-ts/ts-container-panel.md @@ -1,4 +1,7 @@ -# Panel +# Panel + +>![](../../public_sys-resources/icon-note.gif) **说明：** +>该组件从API Version 7开始支持。后续版本如有新增内容，则采用上角标单独标记该内容的起始版本。 可滑动面板。提供一种轻量的内容展示的窗口，可方便的在不同尺寸中切换，属于弹出式组件。 @@ -16,28 +19,27 @@ Panel\(value:\{show：boolean\}\) - 参数 - -

名称

参数

+

参数

默认值

+

默认值

描述

+

描述

active

+

active

boolean

+

boolean

-

+

-

当前路由组件是否处于激活状态，处于激活状态时，会生效相应的路由操作。

+

当前路由组件是否处于激活状态，处于激活状态时，会生效相应的路由操作。

params

+

params

Object

+

Object

undefined

+

undefined

跳转时要同时传递到目标页面的数据，可在目标页面使用router.getParams()获得。

+

跳转时要同时传递到目标页面的数据，可在目标页面使用router.getParams()获得。

参数名

+ - - - - - - - - - @@ -46,69 +48,68 @@ Panel\(value:\{show：boolean\}\) ## 属性 - -

参数名

参数类型

+

参数类型

必填

+

必填

默认值

+

默认值

参数描述

+

参数描述

show

+

show

boolean

+

boolean

是

+

是

-

+

-

控制Panel显示或隐藏。

+

控制Panel显示或隐藏。

名称

+ - - - - - - - - - - - - - - - - - - - - - - - - - - - @@ -116,26 +117,25 @@ Panel\(value:\{show：boolean\}\) - PanelType枚举说明 - -

名称

参数类型

+

参数类型

默认值

+

默认值

描述

+

描述

type

+

type

PanelType

+

PanelType

Foldable

+

Foldable

设置可滑动面板的类型。

+

设置可滑动面板的类型。

mode

+

mode

PanelMode

+

PanelMode

-

+

-

设置可滑动面板的初始状态。

+

设置可滑动面板的初始状态。

dragBar

+

dragBar

boolean

+

boolean

true

+

true

设置是否存在dragbar，true表示存在，false表示不存在。

+

设置是否存在dragbar，true表示存在，false表示不存在。

fullHeight

+

fullHeight

Length

+

Length

-

+

-

指定PanelMode.Full状态下的高度。

+

指定PanelMode.Full状态下的高度。

halfHeight

+

halfHeight

Length

+

Length

-

+

-

指定PanelMode.Half状态下的高度，默认为屏幕尺寸的一半。

+

指定PanelMode.Half状态下的高度，默认为屏幕尺寸的一半。

miniHeight

+

miniHeight

Length

+

Length

-

+

-

指定PanelMode.Mini状态下的高度。

+

指定PanelMode.Mini状态下的高度。

名称

+ - - - - - - - @@ -144,26 +144,25 @@ Panel\(value:\{show：boolean\}\) - PanelMode枚举说明 - -

名称

描述

+

描述

Minibar

+

Minibar

提供minibar和类全屏展示切换效果。

+

提供minibar和类全屏展示切换效果。

Foldable

+

Foldable

内容永久展示类，提供大（类全屏）、中（类半屏）、小三种尺寸展示切换效果。

+

内容永久展示类，提供大（类全屏）、中（类半屏）、小三种尺寸展示切换效果。

Temporary

+

Temporary

内容临时展示区，提供大（类全屏）、中（类半屏）两种尺寸展示切换效果。

+

内容临时展示区，提供大（类全屏）、中（类半屏）两种尺寸展示切换效果。

名称

+ - - - - - - - @@ -172,16 +171,15 @@ Panel\(value:\{show：boolean\}\) ## 事件 - -

名称

描述

+

描述

Mini

+

Mini

类型为minibar和foldable时，为最小状态；类型为temporary，则不生效。

+

类型为minibar和foldable时，为最小状态；类型为temporary，则不生效。

Half

+

Half

类型为foldable和temporary时，为类半屏状态；类型为minibar，则不生效。

+

类型为foldable和temporary时，为类半屏状态；类型为minibar，则不生效。

Full

+

Full

类全屏状态。

+

类全屏状态。

名称

+ - - - diff --git a/zh-cn/application-dev/reference/arkui-ts/ts-container-row.md b/zh-cn/application-dev/reference/arkui-ts/ts-container-row.md index 0db2e12ad42774de1e645380e90b1df5334bb6e7..abfca36c1d7b0816b3a74d86aa4e69fe26143596 100644 --- a/zh-cn/application-dev/reference/arkui-ts/ts-container-row.md +++ b/zh-cn/application-dev/reference/arkui-ts/ts-container-row.md @@ -1,4 +1,7 @@ -# Row +# Row + +>![](../../public_sys-resources/icon-note.gif) **说明：** +>该组件从API Version 7开始支持。后续版本如有新增内容，则采用上角标单独标记该内容的起始版本。 沿水平方向布局容器。 @@ -12,32 +15,31 @@ ## 接口 -Row\(options?: \{ space?: Length \}\) +Row\(value:\{space?: Length\}\) - 参数 - -

名称

功能描述

+

功能描述

onChange(callback: (width: number, height: number, mode: PanelMode) => void)

+

onChange(callback: (width: number, height: number, mode: PanelMode) => void)

当可滑动面板发生状态变化时触发， 返回的height值为内容区高度值，当dragbar属性为true时，panel本身的高度值为dragbar高度加上内容区高度。

+

当可滑动面板发生状态变化时触发， 返回的height值为内容区高度值，当dragbar属性为true时，panel本身的高度值为dragbar高度加上内容区高度。

参数名

+ - - - - - - - - - @@ -46,24 +48,23 @@ Row\(options?: \{ space?: Length \}\) ## 属性 - -

参数名

参数类型

+

参数类型

必填

+

必填

默认值

+

默认值

参数描述

+

参数描述

space

+

space

Length

+

Length

否

+

否

0

+

0

横向布局元素间距。

+

横向布局元素间距。

名称

+ - - - - - - - @@ -72,25 +73,25 @@ Row\(options?: \{ space?: Length \}\) - VerticalAlign枚举说明 -

名称

参数类型

+

参数类型

默认值

+

默认值

描述

+

描述

alignItems

+

alignItems

VerticalAlign

+

VerticalAlign

Center

+

Center

在垂直方向上子组件的对齐格式。

+

在垂直方向上子组件的对齐格式。

名称

+ - - - - - - - diff --git a/zh-cn/application-dev/reference/arkui-ts/ts-container-rowsplit.md b/zh-cn/application-dev/reference/arkui-ts/ts-container-rowsplit.md index 37fd14038b260b072633111b9e6aff5b3c6ccb45..dbd9c1dcc29ad46c262e95b63af448b2b8e88a46 100644 --- a/zh-cn/application-dev/reference/arkui-ts/ts-container-rowsplit.md +++ b/zh-cn/application-dev/reference/arkui-ts/ts-container-rowsplit.md @@ -1,7 +1,14 @@ -# RowSplit +# RowSplit + +>![](../../public_sys-resources/icon-note.gif) **说明：** +>该组件从API Version 7开始支持。后续版本如有新增内容，则采用上角标单独标记该内容的起始版本。 将子组件横向布局，并在每个子组件之间插入一根纵向的分割线。 +## 权限列表 + +无 + ## 子组件 可以包含子组件 @@ -12,20 +19,19 @@ RowSplit\(\) ## 属性 - -

名称

描述

+

描述

Top

+

Top

顶部对齐。

+

顶部对齐。

Center

+

Center

居中对齐，默认对齐方式。

+

居中对齐，默认对齐方式。

Bottom

+

Bottom

底部对齐。

+

底部对齐。

名称

+ - - - - - diff --git a/zh-cn/application-dev/reference/arkui-ts/ts-container-scroll.md b/zh-cn/application-dev/reference/arkui-ts/ts-container-scroll.md index 440edb1163bb7117669fbd4a3d21e5493b2b5839..3952105d3826941241229bf63f4e63e46115a455 100644 --- a/zh-cn/application-dev/reference/arkui-ts/ts-container-scroll.md +++ b/zh-cn/application-dev/reference/arkui-ts/ts-container-scroll.md @@ -1,4 +1,7 @@ -# Scroll +# Scroll + +>![](../../public_sys-resources/icon-note.gif) **说明：** +>该组件从API version 7开始支持。后续版本如有新增内容，则采用上角标单独标记该内容的起始版本。 可滚动的容器组件，当子组件的布局尺寸超过父组件的视口时，内容可以滚动。 @@ -16,51 +19,50 @@ Scroll\(scroller?: Scroller\) ## 属性 - -

名称

参数类型

+

参数类型

描述

+

描述

resizeable

+

resizeable

boolean

+

boolean

分割线是否可拖拽，默认为false。

+

分割线是否可拖拽，默认为false。

名称

+ - - - - - - - - - - - - - - - - - - - @@ -68,26 +70,25 @@ Scroll\(scroller?: Scroller\) - ScrollDirection枚举说明 - -

名称

参数类型

+

参数类型

默认值

+

默认值

描述

+

描述

scrollable

+

scrollable

ScrollDirection

+

ScrollDirection

Vertical

+

Vertical

设置滚动方法。

+

设置滚动方法。

scrollBar

+

scrollBar

BarState

+

BarState

Auto

+

Auto

设置滚动条状态。

+

设置滚动条状态。

scrollBarColor

+

scrollBarColor

Color

+

Color

-

+

-

设置滚动条的颜色。

+

设置滚动条的颜色。

scrollBarWidth

+

scrollBarWidth

Length

+

Length

-

+

-

设置滚动条的宽度。

+

设置滚动条的宽度。

名称

+ - - - - - - - @@ -98,7 +99,7 @@ Scroll\(scroller?: Scroller\) 可滚动容器组件的控制器，可以将此组件绑定至容器组件，然后通过它控制容器组件的滚动，目前支持绑定到List和Scroll组件上。 -### 导入对象 +### 创建对象 ``` scroller: Scroller = new Scroller() @@ -112,53 +113,53 @@ scrollTo\(value: \{ xOffset: number | string, yOffset: number | string, animatio - 参数 - -

名称

描述

+

描述

Horizontal

+

Horizontal

仅支持水平方向滚动。

+

仅支持水平方向滚动。

Vertical

+

Vertical

仅支持竖直方向滚动。

+

仅支持竖直方向滚动。

None

+

None

不可滚动。

+

不可滚动。

参数名

+ - - - - - - - - - - - - - - - + - - - - @@ -173,28 +174,28 @@ scrollEdge\(value: Edge\): void - 参数 - -

参数名

参数类型

+

参数类型

必填

+

必填

默认值

+

默认值

参数描述

+

参数描述

xOffset

+

xOffset

Length

+

Length

是

+

是

-

+

-

水平滑动偏移。

+

水平滑动偏移。

yOffset

+

yOffset

Length

+

Length

是

+

是

-

+

-

竖直滑动偏移。

+

竖直滑动偏移。

animation

+

animation

+

{

+

duration: number,

+

curve: Curve | CubicBezier | SpringCurve

+

}

{

-

duration: number,

-

curve: Curve | CubicBezier | SpringCurve

-

}

+

否

否

+

-

  

动画配置：

-
  • duration: 滚动时长设置。
  • curve: 滚动曲线设置。
+

动画配置：

+
  • duration: 滚动时长设置。
  • curve: 滚动曲线设置。

参数名

+ - - - - - - - - + -

参数名

参数类型

+

参数类型

必填

+

必填

默认值

+

默认值

参数描述

+

参数描述

value

+

value

Edge

+

Edge

是

+

是

-

+

-

+

滚动到的边缘位置。

 
@@ -202,32 +203,33 @@ scrollEdge\(value: Edge\): void ### scroller.scrollPage -scrollPage\(value: \{ next: boolean, direction?: Axis \}\): void +scrollPage\(value: \{ next: boolean \}\): void + +滚动到下一页或者上一页。 - 参数 - -

参数名

+ - - - - - - - - - @@ -242,20 +244,19 @@ scroller.currentOffset\(\): Object - 返回值 - -

参数名

参数类型

+

参数类型

必填

+

必填

默认值

+

默认值

参数描述

+

参数描述

next

+

next

boolean

+

boolean

是

+

是

-

+

-

是否向下翻页。

+

是否向下翻页。true表示向下翻页，false表示向上翻页。

类型

+ - - - @@ -273,28 +274,27 @@ scroller.scrollToIndex\(value: number\): void - 参数 - -

类型

描述

+

描述

{

-

xOffset: number,

-

yOffset: number

-

}

+

{

+

xOffset: number,

+

yOffset: number

+

}

xOffset: 水平滑动偏移;

-

yOffset: 竖直滑动偏移。

+

xOffset: 水平滑动偏移;

+

yOffset: 竖直滑动偏移。

参数名

+ - - - - - - - - - @@ -303,26 +303,25 @@ scroller.scrollToIndex\(value: number\): void ## 事件 - -

参数名

参数类型

+

参数类型

必填

+

必填

默认值

+

默认值

参数描述

+

参数描述

value

+

value

number

+

number

是

+

是

-

+

-

要滑动到的列表项在列表中的索引值。

+

要滑动到的列表项在列表中的索引值。

名称

+ - - - - - - - diff --git a/zh-cn/application-dev/reference/arkui-ts/ts-container-scrollbar.md b/zh-cn/application-dev/reference/arkui-ts/ts-container-scrollbar.md new file mode 100644 index 0000000000000000000000000000000000000000..0345350af373d2213bb47116dd2d32e93d699127 --- /dev/null +++ b/zh-cn/application-dev/reference/arkui-ts/ts-container-scrollbar.md @@ -0,0 +1,166 @@ +# ScrollBar + +>![](../../public_sys-resources/icon-note.gif) **说明：** +>该组件从API Version 8开始支持。后续版本如有新增内容，则采用上角标单独标记该内容的起始版本。 + +滚动条组件ScrollBar，用于配合可滚动组件使用，如List、Grid、Scroll。 + +## 权限列表 + +无 + +## 子组件 + +可以包含单个子组件。 + +## 接口 + +ScrollBar\(value: ScrollBarOption\) + +- ScrollBarOption的参数描述 + +

名称

功能描述

+

功能描述

onScroll(xOffset: number, yOffset: number) => void

+

onScroll(xOffset: number, yOffset: number) => void

滚动事件回调, 返回滚动时水平、竖直方向偏移量。

+

滚动事件回调, 返回滚动时水平、竖直方向偏移量。

onScrollEdge(side: Edge) => void

+

onScrollEdge(side: Edge) => void

滚动到边缘事件回调。

+

滚动到边缘事件回调。

onScrollEnd() => void

+

onScrollEnd() => void

滚动已经停止。

+

滚动停止事件回调。
+ + + + + + + + + + + + + + + + + + + + + + + + + +

参数名

+

参数类型

+

必填

+

默认值

+

参数描述

+

scroller

+

Scroller

+

是

+

-

+

可滚动组件的控制器。用于与可滚动组件进行绑定。

+

direction

+

ScrollBarDirection

+

否

+

ScrollBarDirection.Vertical

+

滚动条的方向，控制可滚动组件对应方向的滚动。

+

state

+

BarState

+

否

+

BarState.Auto

+

滚动条状态。

+
+ + >![](../../public_sys-resources/icon-note.gif) **说明：** + >ScrollBar组件负责定义可滚动区域的行为样式，ScrollBar的子节点负责定义滚动条的行为样式。 + >滚动条组件与可滚动组件通过Scroller进行绑定，且只有当两者方向相同时，才能联动，ScrollBar与可滚动组件仅支持一对一绑定。 + +- ScrollBarDirection枚举说明 + + + + + + + + + + + + +

名称

+

描述

+

Vertical

+

纵向滚动条。

+

Horizontal

+

横向滚动条。

+
+ +- BarState枚举说明 + + + + + + + + + + + + + + + +

名称

+

描述

+

On

+

常驻显示。

+

Off

+

不显示。

+

Auto

+

按需显示(触摸时显示，无操作2s后消失)。

+
+ + +## 示例 + +``` +@Entry +@Component +struct ScrollBarExample { + private scroller: Scroller = new Scroller() + private arr: number[] = [0, 1, 2, 3, 4, 5, 6, 7, 8, 9] + + build() { + Column() { + Stack({ alignContent: Alignment.End }) { + Scroll(this.scroller) { + Flex({ direction: FlexDirection.Column }) { + ForEach(this.arr, (item) => { + Row() { + Text(item.toString()) + .width('90%') + .height(100) + .backgroundColor('#3366CC') + .borderRadius(15) + .fontSize(16) + .textAlign(TextAlign.Center) + .margin({ top: 5 }) + } + }, item => item) + }.margin({ left: 52 }) + } + .scrollBar(BarState.Off) + .scrollable(ScrollDirection.Vertical) + ScrollBar({ scroller: this.scroller, direction: ScrollBarDirection.Vertical,state: BarState.Auto }) { + Text() + .width(30) + .height(100) + .borderRadius(10) + .backgroundColor('#C0C0C0') + }.width(30).backgroundColor('#ededed') + } + } + } +} +``` + +![](figures/F.gif) + diff --git a/zh-cn/application-dev/reference/arkui-ts/ts-container-stack.md b/zh-cn/application-dev/reference/arkui-ts/ts-container-stack.md index fbfd0e7aece08fc15bb60a4ea5234b6e461433a7..96f77458a5289f1118c45427f7a7454322a1bd95 100644 --- a/zh-cn/application-dev/reference/arkui-ts/ts-container-stack.md +++ b/zh-cn/application-dev/reference/arkui-ts/ts-container-stack.md @@ -1,4 +1,7 @@ -# Stack +# Stack + +>![](../../public_sys-resources/icon-note.gif) **说明：** +>该组件从API Version 7开始支持。后续版本如有新增内容，则采用上角标单独标记该内容的起始版本。 堆叠容器，子组件按照顺序依次入栈，后一个子组件覆盖前一个子组件。 @@ -12,32 +15,31 @@ ## 接口 -Stack\(options?: \{ alignContent?: Alignment \}\) +Stack\(value:\{alignContent?: Alignment\}\) - 参数 - -

参数名

+ - - - - - - - - - diff --git a/zh-cn/application-dev/reference/arkui-ts/ts-container-stepper.md b/zh-cn/application-dev/reference/arkui-ts/ts-container-stepper.md new file mode 100644 index 0000000000000000000000000000000000000000..82e6383e8165ca6e0e9d9a8271311d7e6bf4590a --- /dev/null +++ b/zh-cn/application-dev/reference/arkui-ts/ts-container-stepper.md @@ -0,0 +1,184 @@ +# Stepper + +>![](../../public_sys-resources/icon-note.gif) **说明：** +>该组件从API Version 8开始支持。后续版本如有新增内容，则采用上角标单独标记该内容的起始版本。 + +步骤导航器。 + +## 支持设备 + +

参数名

参数类型

+

参数类型

必填

+

必填

默认值

+

默认值

参数描述

+

参数描述

alignContent

+

alignContent

Alignment

+

Alignment

否

+

否

Center

+

Center

设置子组件在容器内的对齐方式。

+

设置子组件在容器内的对齐方式。
+ + + + + + + + + + + +

手机

+

平板

+

智慧屏

+

智能穿戴

+

支持

+

支持

+

不支持

+

不支持

+
+ +## 权限列表 + +无 + +## 子组件 + +仅能包含子组件[StepperItem](ts-container-stepperitem.md)。 + +## 接口 + +Stepper\(value?: \{ index?: number \}\) + +- 参数 + + + + + + + + + + + + + + + +

参数名

+

参数类型

+

必填

+

默认值

+

参数描述

+

index

+

number

+

否

+

0

+

设置步骤导航器显示第几个StepperItem。

+
+ + +## 属性 + +无 + +## 事件 + + + + + + + + + + + + + + + +

名称

+

描述

+

onFinish(callback: () => void)

+

步骤导航器最后一个StepperItem的nextLabel被点击时触发该回调 。

+

onSkip(callback: () => void)

+

当前显示的StepperItem状态为ItemState.Skip时，nextLabel被点击时触发该回调。

+

onChange(callback: (prevIndex?: number, index?: number) => void)

+

点击左边或者右边文本按钮进行步骤切换时触发该事件。

+
  • prevIndex：切换前的步骤页索引值。
  • index：切换后的步骤页（前一页或者下一页）索引值。
+
+ +## 示例 + +``` +@Entry +@Component +struct StepperExample { + @State currentIndex: number = 0 + @State firstState: ItemState = ItemState.Normal + @State secondState: ItemState = ItemState.Normal + + build() { + Stepper({ + index: this.currentIndex + }) { + StepperItem() { + Text('Page One') + .fontSize(35) + .fontColor(Color.Blue) + .width(200) + .lineHeight(50) + .margin({top:250}) + } + .nextLabel('') + .position({x: '35%', y: 0}) + StepperItem() { + Text('Page Two') + .fontSize(35) + .fontColor(Color.Blue) + .width(200) + .lineHeight(50) + .margin({top:250}) + .onClick(()=>{ + this.firstState = this.firstState === ItemState.Skip ? ItemState.Normal : ItemState.Skip + }) + } + .nextLabel('Next') + .prevLabel('Previous') + .status(this.firstState) + .position({x: '35%', y: 0}) + StepperItem() { + Text('Page Three') + .fontSize(35) + .fontColor(Color.Blue) + .width(200) + .lineHeight(50) + .margin({top:250}) + .onClick(()=>{ + this.secondState = this.secondState === ItemState.Waiting ? ItemState.Normal : ItemState.Waiting + }) + } + .position({x: '35%', y: 0}) + .status(this.secondState) + StepperItem() { + Text('Page four') + .fontSize(35) + .fontColor(Color.Blue) + .width(200) + .lineHeight(50) + .margin({top:250}) + } + .position({x: '35%', y: 0}) + .nextLabel('Finish') + } + .onFinish(() => { + console.log('onFinish') + }) + .onSkip(() => { + console.log('onSkip') + }) + .onChange((prevIndex: number, index: number) => { + this.currentIndex = index + }) + .align(Alignment.Center) + } +} +``` + +![](figures/stepper.gif) + + + diff --git a/zh-cn/application-dev/reference/arkui-ts/ts-container-stepperitem.md b/zh-cn/application-dev/reference/arkui-ts/ts-container-stepperitem.md new file mode 100644 index 0000000000000000000000000000000000000000..f097454616429ec34d51ce4e36b673012e8cdf6d --- /dev/null +++ b/zh-cn/application-dev/reference/arkui-ts/ts-container-stepperitem.md @@ -0,0 +1,121 @@ +# StepperItem + +>![](../../public_sys-resources/icon-note.gif) **说明：** +>该组件从API Version 8开始支持。后续版本如有新增内容，则采用上角标单独标记该内容的起始版本。 + +步骤导航器元素。 + +## 支持设备 + + + + + + + + + + + + + +

手机

+

平板

+

智慧屏

+

智能穿戴

+

支持

+

支持

+

不支持

+

不支持

+
+ +## 权限列表 + +无 + +## 子组件 + +支持单个子组件。 + +## 接口 + +StepperItem\(\) + +## 属性 + + + + + + + + + + + + + + + + + + + + + + + +

参数名

+

参数类型

+

默认值

+

参数描述

+

prevLabel

+

string

+

-

+

当步骤导航器大于一页，除第一页默认值都为"返回"。

+

nextLabel

+

string

+

-

+

步骤导航器大于一页时，最后一页默认值为"开始"，其余页默认值为"下一步"。

+

status

+

ItemState

+

ItemState.Normal

+

步骤导航器元素的状态。

+
+ +- ItemState枚举说明 + + + + + + + + + + + + + + + + + + +

名称

+

描述

+

Normal

+

正常状态，右侧文本按钮正常显示，可点击进入下一个StepperItem。

+

Disabled

+

不可用状态，右侧文本按钮灰度显示，不可点击进入下一个StepperItem。

+

Waiting

+

等待状态，右侧文本按钮不显示，使用等待进度条，不可点击进入下一个StepperItem。

+

Skip

+

跳过状态，表示跳过当前步骤, 进入下一个StepperItem。

+
+ + +## 示例 + +见[Stepper](ts-container-stepper.md)。 + diff --git a/zh-cn/application-dev/reference/arkui-ts/ts-container-swiper.md b/zh-cn/application-dev/reference/arkui-ts/ts-container-swiper.md index 3f17b80e4689842a6db810dea2d317c72a84dead..70252b01a59497546355ffdee687a96d92079794 100644 --- a/zh-cn/application-dev/reference/arkui-ts/ts-container-swiper.md +++ b/zh-cn/application-dev/reference/arkui-ts/ts-container-swiper.md @@ -1,4 +1,7 @@ -# Swiper +# Swiper + +>![](../../public_sys-resources/icon-note.gif) **说明：** +>该组件从API Version 7开始支持。后续版本如有新增内容，则采用上角标单独标记该内容的起始版本。 滑动容器，提供切换子组件显示的能力。 @@ -16,28 +19,27 @@ Swiper\(value:\{controller?: SwiperController\}\) - 参数 - -

参数名

+ - - - - - - - - - @@ -46,87 +48,104 @@ Swiper\(value:\{controller?: SwiperController\}\) ## 属性 - -

参数名

参数类型

+

参数类型

必填

+

必填

默认值

+

默认值

参数描述

+

参数描述

controller

+

controller

SwiperController

+

SwiperController

否

+

否

null

+

null

给组件绑定一个控制器，用来控制组件翻页。

+

给组件绑定一个控制器，用来控制组件翻页。

名称

+ - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - + + + + + + + + + + @@ -136,21 +155,20 @@ Swiper\(value:\{controller?: SwiperController\}\) Swiper容器组件的控制器，可以将此对象绑定至Swiper组件，然后通过它控制翻页。 - -

名称

参数类型

+

参数类型

默认值

+

默认值

描述

+

描述

index

+

index

number

+

number

0

+

0

设置当前在容器中显示的子组件的索引值。

+

设置当前在容器中显示的子组件的索引值。

autoPlay

+

autoPlay

boolean

+

boolean

false

+

false

子组件是否自动播放，自动播放状态下，导航点不可操作。

+

子组件是否自动播放，自动播放状态下，导航点不可操作。

interval

+

interval

number

+

number

3000

+

3000

使用自动播放时播放的时间间隔，单位为毫秒。

+

使用自动播放时播放的时间间隔，单位为毫秒。

indicator

+

indicator

boolean

+

boolean

true

+

true

是否启用导航点指示器。

+

是否启用导航点指示器。

loop

+

loop

boolean

+

boolean

true

+

true

是否开启循环。

+

是否开启循环。

duration

+

duration

number

+

number

400

+

400

子组件切换的动画时长，单位为毫秒。

+

子组件切换的动画时长，单位为毫秒。

vertical

+

vertical

boolean

+

boolean

false

+

false

是否为纵向滑动。

+

是否为纵向滑动。

itemSpace

+

itemSpace

Length

+

Length

0

+

0

设置子组件与子组件之间间隙。

+

设置子组件与子组件之间间隙。

+

cachedCount8+

+

number

+

1

+

设置预加载子组件个数。

+

disableSwipe8+

+

boolean

+

false

+

禁用组件滑动切换功能。

接口名称

+ - - - - - @@ -158,16 +176,15 @@ Swiper容器组件的控制器，可以将此对象绑定至Swiper组件，然 ## 事件 - -

接口名称

功能描述

+

功能描述

showNext():void;

+

showNext():void;

翻至下一页。

+

翻至下一页。

showPrevious():void;

+

showPrevious():void;

翻至上一页。

+

翻至上一页。

名称

+ - - - @@ -176,20 +193,52 @@ Swiper容器组件的控制器，可以将此对象绑定至Swiper组件，然 ## 示例 ``` +class MyDataSource implements IDataSource { + private list: number[] = [] + private listener: DataChangeListener + + constructor(list: number[]) { + this.list = list + } + + totalCount(): number { + return this.list.length + } + + getData(index: number): any { + return this.list[index] + } + + registerDataChangeListener(listener: DataChangeListener): void { + this.listener = listener + } + + unregisterDataChangeListener() { + } +} + @Entry @Component struct SwiperExample { private swiperController: SwiperController = new SwiperController() + private data: MyDataSource = new MyDataSource([]) + + private aboutToAppear(): void { + let list = [] + for (var i = 1; i <= 10; i++) { + list.push(i.toString()); + } + this.data = new MyDataSource(list) + } build() { Column({ space: 5 }) { Swiper(this.swiperController) { - Text('1').width('90%').height(160).backgroundColor(0xAFEEEE).textAlign(TextAlign.Center).fontSize(20) - Text('2').width('90%').height(160).backgroundColor(0xAFEEEE).textAlign(TextAlign.Center).fontSize(20) - Text('3').width('90%').height(160).backgroundColor(0xAFEEEE).textAlign(TextAlign.Center).fontSize(20) - Text('4').width('90%').height(160).backgroundColor(0xAFEEEE).textAlign(TextAlign.Center).fontSize(20) - Text('5').width('90%').height(160).backgroundColor(0xAFEEEE).textAlign(TextAlign.Center).fontSize(20) + LazyForEach(this.data, (item: string) => { + Text(item).width('90%').height(160).backgroundColor(0xAFEEEE).textAlign(TextAlign.Center).fontSize(20) + }, item => item) } + .cachedCount(2) .index(1) .autoPlay(true) .interval(4000) diff --git a/zh-cn/application-dev/reference/arkui-ts/ts-container-tabcontent.md b/zh-cn/application-dev/reference/arkui-ts/ts-container-tabcontent.md index d105b121067dfa0e267faf25479b42426fb9fbe4..0fa7211f4834b0f01665bba7914a39dcedd1ecf0 100644 --- a/zh-cn/application-dev/reference/arkui-ts/ts-container-tabcontent.md +++ b/zh-cn/application-dev/reference/arkui-ts/ts-container-tabcontent.md @@ -1,4 +1,7 @@ -# TabContent +# TabContent + +>![](../../public_sys-resources/icon-note.gif) **说明：** +>该组件从API Version 7开始支持。后续版本如有新增内容，则采用上角标单独标记该内容的起始版本。 仅在Tabs中使用，对应一个切换页签的内容视图。 @@ -16,28 +19,31 @@ TabContent\(\) ## 属性 - -

名称

功能描述

+

功能描述

onChange( index: number) => void

+

onChange( index: number) => void

当前显示的组件索引变化时触发该事件。

+

当前显示的组件索引变化时触发该事件。

名称

+不支持触摸热区设置。 + + - - - - - - - @@ -50,5 +56,124 @@ TabContent\(\) ## 示例 -见[Tabs](ts-container-tabs.md#section1131255321814)。 +``` +@Entry +@Component +struct TabContentExample { + @State fontColor: string = 'rgba(0, 0, 0, 0.4)' + @State selectedFontColor: string = 'rgba(10, 30, 255, 1)' + @State currentIndex: number = 0 + private controller: TabsController = new TabsController() + @Builder Tab1Builder() { + Column() { + Image(this.currentIndex === 0 ? '/resources/ic_public_contacts_filled_selected.png' : '/resources/ic_public_contacts_filled.png') + .width(24) + .height(24) + .opacity(this.currentIndex === 0 ? 1 : 0.4) + .objectFit(ImageFit.Contain) + Text("Tab1") + .fontColor(this.currentIndex === 0 ? this.selectedFontColor : this.fontColor) + .fontSize(10) + .margin({top: 2}) + } + } + + @Builder Tab2Builder() { + Column() { + Image(this.currentIndex === 1 ? '/resources/ic_public_contacts_filled_selected.png' : '/resources/ic_public_contacts_filled.png') + .width(24) + .height(24) + .opacity(this.currentIndex === 1 ? 1 : 0.4) + .objectFit(ImageFit.Contain) + Text("Tab2") + .fontColor(this.currentIndex === 1 ? this.selectedFontColor : this.fontColor) + .fontSize(10) + .margin({top: 2}) + } + } + + @Builder Tab3Builder() { + Column() { + Image(this.currentIndex === 3 ? '/resources/ic_public_contacts_filled_selected.png' : '/resources/ic_public_contacts_filled.png') + .width(24) + .height(24) + .opacity(this.currentIndex === 3 ? 1 : 0.4) + .objectFit(ImageFit.Contain) + Text("Tab3") + .fontColor(this.currentIndex === 3 ? this.selectedFontColor : this.fontColor) + .fontSize(10) + .margin({top: 2}) + } + } + + @Builder Tab4Builder() { + Column() { + Image(this.currentIndex === 4 ? '/resources/ic_public_contacts_filled_selected.png' : '/resources/ic_public_contacts_filled.png') + .width(24) + .height(24) + .opacity(this.currentIndex === 4 ? 1 : 0.4) + .objectFit(ImageFit.Contain) + Text("Tab4") + .fontColor(this.currentIndex === 4 ? this.selectedFontColor : this.fontColor) + .fontSize(10) + .margin({top: 2}) + } + } + + @Builder AddBuilder() { + Column() { + Image(this.currentIndex === 2 ? '/resources/ic_public_add_norm_filled_selected.png' : '/resources/ic_public_add_norm_filled.png') + .width(this.currentIndex === 2 ? 26 : 24) + .height(this.currentIndex === 2 ? 26 : 24) + .opacity(this.currentIndex === 2 ? 1 : 0.4) + .objectFit(ImageFit.Contain) + .animation({duration: 200}) + } + } + + build() { + Column() { + Tabs({ barPosition: BarPosition.End, index: 0, controller: this.controller }) { + TabContent() { + Flex({justifyContent: FlexAlign.Center})) { + Text('Tab1').fontSize(32) + } + }.tabBar(this.Tab1Builder) + + TabContent() { + Flex({justifyContent: FlexAlign.Center})) { + Text('Tab2').fontSize(32) + } + }.tabBar(this.Tab2Builder) + + TabContent() { + Flex({justifyContent: FlexAlign.Center})) { + Text('Add').fontSize(32) + } + }.tabBar(this.AddBuilder) + + TabContent() { + Flex({justifyContent: FlexAlign.Center})) { + Text('Tab3').fontSize(32) + } + }.tabBar(this.Tab3Builder) + + TabContent() { + Flex({justifyContent: FlexAlign.Center})) { + Text('Tab4').fontSize(32) + } + }.tabBar(this.Tab4Builder) + } + .vertical(false) + .barWidth(300).barHeight(56) + .onChange((index: number) => { + this.currentIndex = index + }) + .width('90%').backgroundColor('rgba(241, 243, 245, 0.95)') + }.width('100%').height(200).margin({ top: 5 }) + } +} +``` + +![](figures/zh-cn_image_0000001193075122.gif) diff --git a/zh-cn/application-dev/reference/arkui-ts/ts-container-tabs.md b/zh-cn/application-dev/reference/arkui-ts/ts-container-tabs.md index 43b4e2446c2737925a673a45aa38b1bb1eced548..04f8bc2d60857e1ecbf3d4e382c1df87d53f5aba 100644 --- a/zh-cn/application-dev/reference/arkui-ts/ts-container-tabs.md +++ b/zh-cn/application-dev/reference/arkui-ts/ts-container-tabs.md @@ -1,27 +1,29 @@ -# Tabs +# Tabs + +>![](../../public_sys-resources/icon-note.gif) **说明：** +>该组件从API Version 7开始支持。后续版本如有新增内容，则采用上角标单独标记该内容的起始版本。 一种可以通过页签进行内容视图切换的容器组件，每个页签对应一个内容视图。 ## 支持设备 - -

名称

参数类型

+

参数类型

默认值

+

默认值

描述

+

描述

tabBar

+

tabBar

string | {

-

icon?: string,

-

text?: string

-

}

+

string | {

+

icon?: string,

+

text?: string

+

}

+

| CustomBuilder8+

-

+

-

设置TabBar上显示内容。

-
说明：

如果icon采用svg格式图源，则要求svg图源删除其自有宽高属性值。如采用带有自有宽高属性的svg图源，icon大小则是svg本身内置的宽高属性值大小。

+

设置TabBar上显示内容。

+

CustomBuilder: 构造器，内部可以传入组件（API8版本以上适用）。

+
说明：

如果icon采用svg格式图源，则要求svg图源删除其自有宽高属性值。如采用带有自有宽高属性的svg图源，icon大小则是svg本身内置的宽高属性值大小。

手机

+ - - - - - - - @@ -41,49 +43,48 @@ Tabs\(value: \{barPosition?: BarPosition, index?: number, controller?: [TabsCon - 参数 - -

手机

平板

+

平板

智慧屏

+

智慧屏

智能穿戴

+

智能穿戴

支持

+

支持

支持

+

支持

不支持

+

不支持

不支持

+

不支持

参数名

+ - - - - - - - - - - - - - - - - - - @@ -91,21 +92,20 @@ Tabs\(value: \{barPosition?: BarPosition, index?: number, controller?: [TabsCon - BarPosition枚举说明 - -

参数名

参数类型

+

参数类型

必填

+

必填

默认值

+

默认值

参数描述

+

参数描述

barPosition

+

barPosition

BarPosition

+

BarPosition

否

+

否

Start

+

Start

指定页签位置来创建Tabs容器组件。

+

指定页签位置来创建Tabs容器组件。

index

+

index

number

+

number

否

+

否

0

+

0

指定初次初始页签索引。

+

指定初次初始页签索引。

controller

+

controller

TabsController

+

TabsController

否

+

否

   

设置Tabs控制器。

+

设置Tabs控制器。

名称

+ - - - - - @@ -116,16 +116,15 @@ Tabs\(value: \{barPosition?: BarPosition, index?: number, controller?: [TabsCon Tabs组件的控制器，用于控制Tabs组件进行页签切换。 - -

名称

描述

+

描述

Start

+

Start

vertical属性方法设置为true时，页签位于容器左侧；vertical属性方法设置为false时，页签位于容器顶部。

+

vertical属性方法设置为true时，页签位于容器左侧；vertical属性方法设置为false时，页签位于容器顶部。

End

+

End

vertical属性方法设置为true时，页签位于容器右侧；vertical属性方法设置为false时，页签位于容器底部。

+

vertical属性方法设置为true时，页签位于容器右侧；vertical属性方法设置为false时，页签位于容器底部。

接口名称

+ - - - @@ -133,69 +132,70 @@ Tabs组件的控制器，用于控制Tabs组件进行页签切换。 ## 属性 - -

接口名称

功能描述

+

功能描述

changeIndex(value: number): void

+

changeIndex(value: number): void

控制Tabs切换到指定页签，index: 页签在Tabs里的索引值，索引值从0开始。

+

控制Tabs切换到指定页签，index: 页签在Tabs里的索引值，索引值从0开始。

名称

+不支持触摸热区设置。 + + - - - - - - - - - - - - - - - - - - - - - - - - - - - @@ -203,21 +203,20 @@ Tabs组件的控制器，用于控制Tabs组件进行页签切换。 - BarMode枚举说明 - -

名称

参数类型

+

参数类型

默认值

+

默认值

描述

+

描述

vertical

+

vertical

boolean

+

boolean

是否为纵向Tab，默认为false。

+

是否为纵向Tab，默认为false。

是否为纵向Tab，默认为false。

+

是否为纵向Tab，默认为false。

scrollable

+

scrollable

boolean

+

boolean

是否可以通过左右滑动进行页面切换，默认为true。

+

是否可以通过左右滑动进行页面切换，默认为true。

是否可以通过左右滑动进行页面切换，默认为true。

+

是否可以通过左右滑动进行页面切换，默认为true。

barMode

+

barMode

BarMode

+

BarMode

TabBar布局模式。

+

TabBar布局模式。

TabBar布局模式。

+

TabBar布局模式。

barWidth

+

barWidth

number

+

number

TabBar的宽度值，不设置时使用系统主题中的默认值。

+

TabBar的宽度值，不设置时使用系统主题中的默认值。

TabBar的宽度值，不设置时使用系统主题中的默认值。

+

TabBar的宽度值，不设置时使用系统主题中的默认值。

barHeight

+

barHeight

number

+

number

TabBar的高度值，不设置时使用系统主题中的默认值。

+

TabBar的高度值，不设置时使用系统主题中的默认值。

TabBar的高度值，不设置时使用系统主题中的默认值。

+

TabBar的高度值，不设置时使用系统主题中的默认值。

animationDuration

+

animationDuration

number

+

number

200

+

200

TabContent滑动动画时长。

+

TabContent滑动动画时长。

名称

+ - - - - - @@ -226,16 +225,15 @@ Tabs组件的控制器，用于控制Tabs组件进行页签切换。 ## 事件 - -

名称

描述

+

描述

Scrollable

+

Scrollable

TabBar使用实际布局宽度, 超过总长度后可滑动。

+

TabBar使用实际布局宽度, 超过总长度后可滑动。

Fixed

+

Fixed

所有TabBar平均分配宽度。

+

所有TabBar平均分配宽度。

名称

+ - - - diff --git a/zh-cn/application-dev/reference/arkui-ts/ts-custom-component-initialization.md b/zh-cn/application-dev/reference/arkui-ts/ts-custom-component-initialization.md deleted file mode 100644 index 027c5166881c3b522f5c77901c2d4103e3eb0fa9..0000000000000000000000000000000000000000 --- a/zh-cn/application-dev/reference/arkui-ts/ts-custom-component-initialization.md +++ /dev/null @@ -1,237 +0,0 @@ -# 自定义组件初始化 - -本节介绍自定义组件状态变量的初始化规则。 - -组件的成员变量可以通过两种方式初始化： - -- 本地初始化，例如： - - ``` - @State counter: Counterr = new Counter() - ``` - -- 在构造组件时通过构造参数初始化，例如： - - ``` - MyComponent(counter: $myCounter) - ``` - - -具体允许哪种方式取决于状态变量的装饰器： - - -

名称

功能描述

+

功能描述

onChange(callback: (index: number) => void)

+

onChange(callback: (index: number) => void)

Tab页签切换后触发的事件。

+

Tab页签切换后触发的事件。
- - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - -

装饰器类型

-

本地初始化

-

通过构造函数参数初始化

-

@State

-

必须

-

可选

-

@Prop

-

禁止

-

必须

-

@Link

-

禁止

-

必须

-

@StorageLink

-

必须

-

禁止

-

@StorageProp

-

必须

-

禁止

-

@Provide

-

必须

-

可选

-

@Consume

-

禁止

-

禁止

-

@ObjectLink

-

禁止

-

必须

-

常规成员变量

-

推荐

-

可选

-
- -从上表中： - -- **@State**变量需要本地初始化，初始化的值可以被构造参数覆盖； -- **@Prop**和**@Link**变量必须且仅通过构造函数参数进行初始化。 - -通过构造函数方法初始化成员变量，需要遵循如下规则： - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - -

从父组件中的变量（下）到子组件中的变量（右）

-

@state

-

@Link

-

@Prop

-

常规变量

-

@State

-

允许

-

允许

-

允许

-

允许

-

@Link

-

不允许

-

允许

-

不推荐

-

允许

-

@Prop

-

不允许

-

不允许

-

允许

-

允许

-

@StorageLink

-

不允许

-

允许

-

不允许

-

允许

-

@StorageProp

-

不允许

-

不允许

-

不允许

-

允许

-

常规变量

-

允许

-

不允许

-

不允许

-

允许

-
- -从上表中： - -- 父组件的常规变量可以用于初始化子组件的**@State**变量，但不能用于初始化**@Link**或**@Prop**变量； -- 父组件的**@State**变量可以初始化子组件的**@Prop**、**@Link（通过$）**或常规变量，但不能初始化子组件的**@State**变量； -- 父组件的**@Link**变量可以初始化子组件的@Link或常规变量。但是初始化子组件的**@State**成员是语法错误，此外不建议初始化**@prop；** -- 父组件的**@Prop**变量可以初始化子组件的常规变量或**@Prop**变量，但不能初始化子组件的**@State**或**@Link**变量。 -- @StorageLink和@StorageProp不允许由父组件中传递到子组件。 -- 除了上述规则外，还需要遵循TS的强类型规则。 - -## 示例 - -``` -@Entry -@Component -struct Parent { - @State parentState: ClassA = new ClassA() - build() { - Row() { - CompA({aState: new ClassA, aLink: $parentState}) // valid - CompA({aLink: $parentState}) // valid - CompA() // invalid, @Link aLink remains uninitialized - CompA({aLink: new ClassA}) // invalid, @Link aLink must be a reference ($) to either @State or @Link variable - } - } -} - -@Component -struct CompA { - @State aState: boolean = false // must initialize locally - @Link aLink: ClassA // must not initialize locally - - build() { - Row() { - CompB({bLink: $aLink, // valid init a @Link with reference of another @Link, - bProp: this.aState}) // valid init a @Prop with value of a @State - CompB({aLink: $aState, // invalid: type missmatch expected ref to ClassA, provided reference to boolean - bProp: false}) // valid init a @Prop by constants value - } - } -} - -@Component -struct CompB { - @Link bLink: ClassA = new ClassA() // invalid, must not initialize locally - @Prop bProp: boolean = false // invalid must not initialize locally - - build() { - ... - } -} -``` - diff --git a/zh-cn/application-dev/reference/arkui-ts/ts-custom-component-lifecycle-callbacks.md b/zh-cn/application-dev/reference/arkui-ts/ts-custom-component-lifecycle-callbacks.md deleted file mode 100644 index 6ac4fd3581abf3bca796448c42a5ce263bd2c192..0000000000000000000000000000000000000000 --- a/zh-cn/application-dev/reference/arkui-ts/ts-custom-component-lifecycle-callbacks.md +++ /dev/null @@ -1,80 +0,0 @@ -# 自定义组件生命周期回调函数 - -自定义组件的生命周期回调函数用于通知用户该自定义组件的生命周期，这些回调函数是私有的，在运行时由开发框架在特定的时间进行调用，不能从应用程序中手动调用这些回调函数。 - -## 生命周期回调函数定义 - - - - - - - - - - - - - - - - - - - - - - -

函数名

-

描述

-

aboutToAppear

-

函数在创建自定义组件的新实例后，在执行其build函数之前执行。

-

允许在aboutToAppear函数中改变状态变量，这些更改将在后续执行build函数中生效。

-

aboutToDisappear

-

函数在自定义组件析构消耗之前执行。

-

不允许在aboutToDisappear函数中改变状态变量，特别是@Link变量的修改可能会导致应用程序行为不稳定。

-

onPageShow

-

当此页面显示时触发一次。包括路由过程、应用进入前后台等场景，仅@Entry修饰的自定义组件生效。

-

onPageHide

-

当此页面消失时触发一次。包括路由过程、应用进入前后台等场景，仅@Entry修饰的自定义组件生效。

-

onBackPress

-

当用户点击返回按钮时触发，，仅@Entry修饰的自定义组件生效。

-
  • 返回true表示页面自己处理返回逻辑, 不进行页面路由。
  • 返回false表示使用默认的返回逻辑。
  • 不返回值会作为false处理。
-
- -## 示例 - -``` -@Component -struct CountDownTimerComponent { - @State countDownFrom: number = 10 - private timerId: number = -1 - - private aboutToAppear(): void { - this.timerId = setInterval(() => { - if (this.countDownFrom <= 1) { - clearTimeout(this.timerId) - } - this.countDownFrom -= 1 - }, 1000) // decr counter by 1 every second - } - - private aboutToDisappear(): void { - if (this.timerId > 0) { - clearTimeout(this.timerId) - this.timerId = -1 - } - } - - build() { - Text(`${this.countDownFrom} sec left`) - } -} -``` - -上述示例表明，生命周期函数对于允许CountDownTimerComponent管理其计时器资源至关重要，类似的函数也包括异步从网络请求加载资源。 - ->![](../../public_sys-resources/icon-note.gif) **说明：** ->- 允许在生命周期函数中使用**Promise**和异步回调函数，比如网络资源获取，定时器设置等； ->- 不允许在生命周期函数中使用**async await**。 - diff --git a/zh-cn/application-dev/reference/arkui-ts/ts-declarative-syntax.md b/zh-cn/application-dev/reference/arkui-ts/ts-declarative-syntax.md deleted file mode 100644 index 8d62653ef1e808c14c8a06c7fd816221dd0736c0..0000000000000000000000000000000000000000 --- a/zh-cn/application-dev/reference/arkui-ts/ts-declarative-syntax.md +++ /dev/null @@ -1,15 +0,0 @@ -# 声明式语法 - -- **[描述规范使用说明](ts-syntax-intro.md)** - -- **[通用UI描述规范](ts-general-ui-description-specifications.md)** - -- **[UI状态管理](ts-ui-state-management.md)** - -- **[渲染控制语法](ts-rending-control-syntax.md)** - -- **[深入理解组件化](ts-a-deep-dive-into-component.md)** - -- **[语法糖](ts-syntactic-sugar.md)** - - diff --git a/zh-cn/application-dev/reference/arkui-ts/ts-declarative-ui-description-specifications.md b/zh-cn/application-dev/reference/arkui-ts/ts-declarative-ui-description-specifications.md deleted file mode 100644 index ecb6cdf8fa38ff10f34844541fbd2372240db307..0000000000000000000000000000000000000000 --- a/zh-cn/application-dev/reference/arkui-ts/ts-declarative-ui-description-specifications.md +++ /dev/null @@ -1,13 +0,0 @@ -# 声明式UI描述规范 - -- **[无构造参数配置](ts-parameterless-configuration.md)** - -- **[必选参数构造配置](ts-configuration-with-mandatory-parameters.md)** - -- **[属性配置](ts-attribution-configuration.md)** - -- **[事件配置](ts-event-configuration.md)** - -- **[子组件配置](ts-child-component-configuration.md)** - - diff --git a/zh-cn/application-dev/reference/arkui-ts/ts-declarative.md b/zh-cn/application-dev/reference/arkui-ts/ts-declarative.md deleted file mode 100644 index 233c23c5f8646ae33b4eb4d42006d872de459102..0000000000000000000000000000000000000000 --- a/zh-cn/application-dev/reference/arkui-ts/ts-declarative.md +++ /dev/null @@ -1,15 +0,0 @@ -# 基于TS扩展的声明式开发范式 - -- **[框架说明](ts-framework-framework.md)** - -- **[声明式语法](ts-declarative-syntax.md)** - -- **[组件](ts-components.md)** - -- **[动画](ts-animation.md)** - -- **[全局UI方法](ts-global-ui-methods.md)** - -- **[附录](ts-appendix.md)** - - diff --git a/zh-cn/application-dev/reference/arkui-ts/ts-drawing-components-circle.md b/zh-cn/application-dev/reference/arkui-ts/ts-drawing-components-circle.md index 1bb250d3f6cd15a16b61e00763c43e128c6074a3..ee2c7e7917dff2668d67d775cd85fa4e64358f35 100644 --- a/zh-cn/application-dev/reference/arkui-ts/ts-drawing-components-circle.md +++ b/zh-cn/application-dev/reference/arkui-ts/ts-drawing-components-circle.md @@ -1,7 +1,14 @@ -# Circle +# Circle + +>![](../../public_sys-resources/icon-note.gif) **说明：** +>该组件从API Version 7开始支持。后续版本如有新增内容，则采用上角标单独标记该内容的起始版本。 圆形绘制组件。 +## 权限列表 + +无 + ## 子组件 无 @@ -12,28 +19,27 @@ Circle\(options?: \{width: Length, height: Length\}\) - 参数 - -

参数名

+ - - - - - - - - - @@ -41,39 +47,38 @@ Circle\(options?: \{width: Length, height: Length\}\) - options参数说明 - -

参数名

参数类型

+

参数类型

必填

+

必填

默认值

+

默认值

参数描述

+

参数描述

options

+

options

Object

+

Object

否

+

否

-

+

-

见options参数说明。

+

见options参数说明。

参数名

+ - - - - - - - - - - - - - - @@ -82,39 +87,38 @@ Circle\(options?: \{width: Length, height: Length\}\) ## 属性 - -

参数名

参数类型

+

参数类型

必填

+

必填

默认值

+

默认值

参数描述

+

参数描述

width

+

width

Length

+

Length

是

+

是

-

+

-

宽度。

+

宽度。

height

+

height

Length

+

Length

是

+

是

-

+

-

高度。

+

高度。

参数名称

+ - - - - - - - - - - - - - - diff --git a/zh-cn/application-dev/reference/arkui-ts/ts-drawing-components-ellipse.md b/zh-cn/application-dev/reference/arkui-ts/ts-drawing-components-ellipse.md index 9b39ecebd49726358db5414e5ccf3e05d37443df..8439713d7d85793f7c6a07c885ff436d14755f60 100644 --- a/zh-cn/application-dev/reference/arkui-ts/ts-drawing-components-ellipse.md +++ b/zh-cn/application-dev/reference/arkui-ts/ts-drawing-components-ellipse.md @@ -1,7 +1,14 @@ -# Ellipse +# Ellipse + +>![](../../public_sys-resources/icon-note.gif) **说明：** +>该组件从API Version 7开始支持。后续版本如有新增内容，则采用上角标单独标记该内容的起始版本。 椭圆绘制组件。 +## 权限列表 + +无 + ## 子组件 无 @@ -12,28 +19,27 @@ ellipse\(options?: \{width: Lenght, height: Length\}\) - 参数 - -

参数名称

参数类型

+

参数类型

默认值

+

默认值

必填

+

必填

参数描述

+

参数描述

width

+

width

Length

+

Length

0

+

0

否

+

否

圆所在矩形的宽度。

+

圆所在矩形的宽度。

height

+

height

Length

+

Length

0

+

0

否

+

否

圆所在矩形的高度。

+

圆所在矩形的高度。

参数名

+ - - - - - - - - - @@ -41,39 +47,38 @@ ellipse\(options?: \{width: Lenght, height: Length\}\) - options参数说明 - -

参数名

参数类型

+

参数类型

必填

+

必填

默认值

+

默认值

参数描述

+

参数描述

options

+

options

Object

+

Object

否

+

否

-

+

-

见options参数说明。

+

见options参数说明。

参数名

+ - - - - - - - - - - - - - - @@ -82,39 +87,38 @@ ellipse\(options?: \{width: Lenght, height: Length\}\) ## 属性 - -

参数名

参数类型

+

参数类型

必填

+

必填

默认值

+

默认值

参数描述

+

参数描述

width

+

width

Length

+

Length

是

+

是

-

+

-

宽度。

+

宽度。

height

+

height

Length

+

Length

是

+

是

-

+

-

高度。

+

高度。

参数名称

+ - - - - - - - - - - - - - - @@ -137,5 +141,5 @@ struct EllipseExample { } ``` -![](figures/ellipse-18.png) +![](figures/ellipse.png) diff --git a/zh-cn/application-dev/reference/arkui-ts/ts-drawing-components-line.md b/zh-cn/application-dev/reference/arkui-ts/ts-drawing-components-line.md index 116472f467ed6cc04cec66431ba01c6820ca2899..fb71f410877583fca0287a634e313c0d29a36781 100644 --- a/zh-cn/application-dev/reference/arkui-ts/ts-drawing-components-line.md +++ b/zh-cn/application-dev/reference/arkui-ts/ts-drawing-components-line.md @@ -1,7 +1,14 @@ -# Line +# Line + +>![](../../public_sys-resources/icon-note.gif) **说明：** +>该组件从API Version 7开始支持。后续版本如有新增内容，则采用上角标单独标记该内容的起始版本。 直线绘制组件。 +## 权限列表 + +无 + ## 子组件 无 @@ -12,28 +19,27 @@ Line\(options?: \{width: Lenght, height: Length\}\) - 参数 - -

参数名称

参数类型

+

参数类型

默认值

+

默认值

必填

+

必填

参数描述

+

参数描述

width

+

width

Length

+

Length

0

+

0

否

+

否

椭圆所在矩形的宽度。

+

椭圆所在矩形的宽度。

height

+

height

Length

+

Length

0

+

0

否

+

否

椭圆所在矩形的高度。

+

椭圆所在矩形的高度。

参数名

+ - - - - - - - - - @@ -41,39 +47,38 @@ Line\(options?: \{width: Lenght, height: Length\}\) - options参数说明 - -

参数名

参数类型

+

参数类型

必填

+

必填

默认值

+

默认值

参数描述

+

参数描述

options

+

options

Object

+

Object

否

+

否

-

+

-

见options参数说明。

+

见options参数说明。

参数名

+ - - - - - - - - - - - - - - @@ -82,61 +87,60 @@ Line\(options?: \{width: Lenght, height: Length\}\) ## 属性 - -

参数名

参数类型

+

参数类型

必填

+

必填

默认值

+

默认值

参数描述

+

参数描述

width

+

width

Length

+

Length

是

+

是

-

+

-

宽度。

+

宽度。

height

+

height

Length

+

Length

是

+

是

-

+

-

高度。

+

高度。

参数名称

+ - - - - - - - - - - - - - - - - - - - - - - - - diff --git a/zh-cn/application-dev/reference/arkui-ts/ts-drawing-components-path.md b/zh-cn/application-dev/reference/arkui-ts/ts-drawing-components-path.md index cc93b8f56698b094d83169b10994b32ad5df3bf1..e0e179a3ea2bc2d188b1e73d30e95d7d3215304a 100644 --- a/zh-cn/application-dev/reference/arkui-ts/ts-drawing-components-path.md +++ b/zh-cn/application-dev/reference/arkui-ts/ts-drawing-components-path.md @@ -1,57 +1,63 @@ -# Path +# Path + +>![](../../public_sys-resources/icon-note.gif) **说明：** +>该组件从API Version 7开始支持。后续版本如有新增内容，则采用上角标单独标记该内容的起始版本。 路径绘制组件。 +## 权限列表 + +无 + ## 子组件 无 ## 属性 - -

参数名称

参数类型

+

参数类型

默认值

+

默认值

必填

+

必填

参数描述

+

参数描述

width

+

width

Length

+

Length

0

+

0

否

+

否

直线所在矩形的宽度。

+

直线所在矩形的宽度。

height

+

height

Length

+

Length

0

+

0

否

+

否

直线所在矩形的高度。

+

直线所在矩形的高度。

startPoint

+

startPoint

Point

+

Point

[0, 0]

+

[0, 0]

是

+

是

直线起点坐标(相对坐标)。

+

直线起点坐标(相对坐标)。

endPoint

+

endPoint

Point

+

Point

[0, 0]

+

[0, 0]

是

+

是

直线终点坐标(相对坐标)。

+

直线终点坐标(相对坐标)。

参数名称

+ - - - - - - - - - - - - - - - - - - - diff --git a/zh-cn/application-dev/reference/arkui-ts/ts-drawing-components-polygon.md b/zh-cn/application-dev/reference/arkui-ts/ts-drawing-components-polygon.md index b085f3cc582000ba1c57872905b34f1e271c0350..48ea576c3ea4ac6cb18b8c3ec29b4757b2fd1419 100644 --- a/zh-cn/application-dev/reference/arkui-ts/ts-drawing-components-polygon.md +++ b/zh-cn/application-dev/reference/arkui-ts/ts-drawing-components-polygon.md @@ -1,7 +1,14 @@ -# Polygon +# Polygon + +>![](../../public_sys-resources/icon-note.gif) **说明：** +>该组件从API Version 7开始支持。后续版本如有新增内容，则采用上角标单独标记该内容的起始版本。 多边形绘制组件。 +## 权限列表 + +无 + ## 子组件 无 @@ -12,28 +19,27 @@ Polygon\(value:\{options?: \{width: Lenght, height: Length\}\}\) - 参数 - -

参数名称

参数类型

+

参数类型

默认值

+

默认值

必填

+

必填

参数描述

+

参数描述

width

+

width

Length

+

Length

0

+

0

否

+

否

路径所在矩形的宽度。

+

路径所在矩形的宽度。

height

+

height

Length

+

Length

0

+

0

否

+

否

路径所在矩形的高度。

+

路径所在矩形的高度。

commands

+

commands

string

+

string

''

+

''

是

+

是

路径绘制的命令字符串。

+

路径绘制的命令字符串。

参数名

+ - - - - - - - - - @@ -41,39 +47,38 @@ Polygon\(value:\{options?: \{width: Lenght, height: Length\}\}\) - options参数说明 - -

参数名

参数类型

+

参数类型

必填

+

必填

默认值

+

默认值

参数描述

+

参数描述

options

+

options

Object

+

Object

否

+

否

-

+

-

见options参数说明。

+

见options参数说明。

参数名

+ - - - - - - - - - - - - - - @@ -82,50 +87,49 @@ Polygon\(value:\{options?: \{width: Lenght, height: Length\}\}\) ## 属性 - -

参数名

参数类型

+

参数类型

必填

+

必填

默认值

+

默认值

参数描述

+

参数描述

width

+

width

Length

+

Length

是

+

是

-

+

-

宽度。

+

宽度。

height

+

height

Length

+

Length

是

+

是

-

+

-

高度。

+

高度。

参数名称

+ - - - - - - - - - - - - - - - - - - - diff --git a/zh-cn/application-dev/reference/arkui-ts/ts-drawing-components-polyline.md b/zh-cn/application-dev/reference/arkui-ts/ts-drawing-components-polyline.md index 0e689a00c3c8e7291b4d623bf7727539461e6240..6232b9552b101c0fa53ddd8adec3d163d887167c 100644 --- a/zh-cn/application-dev/reference/arkui-ts/ts-drawing-components-polyline.md +++ b/zh-cn/application-dev/reference/arkui-ts/ts-drawing-components-polyline.md @@ -1,7 +1,14 @@ -# Polyline +# Polyline + +>![](../../public_sys-resources/icon-note.gif) **说明：** +>该组件从API Version 7开始支持。后续版本如有新增内容，则采用上角标单独标记该内容的起始版本。 折线绘制组件。 +## 权限列表 + +无 + ## 子组件 无 @@ -12,28 +19,27 @@ Polyline\(options?: \{width: Lenght, height: Length\}\) - 参数 - -

参数名称

参数类型

+

参数类型

默认值

+

默认值

必填

+

必填

参数描述

+

参数描述

width

+

width

Length

+

Length

0

+

0

否

+

否

多边形所在矩形的宽度。

+

多边形所在矩形的宽度。

height

+

height

Length

+

Length

0

+

0

否

+

否

多边形所在矩形的高度。

+

多边形所在矩形的高度。

points

+

points

Array<Point>

+

Array<Point>

-

+

-

是

+

是

多边形的顶点坐标列表。

+

多边形的顶点坐标列表。

参数名

+ - - - - - - - - - @@ -41,39 +47,38 @@ Polyline\(options?: \{width: Lenght, height: Length\}\) - options参数说明 - -

参数名

参数类型

+

参数类型

必填

+

必填

默认值

+

默认值

参数描述

+

参数描述

options

+

options

Object

+

Object

否

+

否

-

+

-

见options参数说明。

+

见options参数说明。

参数名

+ - - - - - - - - - - - - - - @@ -82,50 +87,49 @@ Polyline\(options?: \{width: Lenght, height: Length\}\) ## 属性 - -

参数名

参数类型

+

参数类型

必填

+

必填

默认值

+

默认值

参数描述

+

参数描述

width

+

width

Length

+

Length

是

+

是

-

+

-

宽度。

+

宽度。

height

+

height

Length

+

Length

是

+

是

-

+

-

高度。

+

高度。

参数名称

+ - - - - - - - - - - - - - - - - - - - diff --git a/zh-cn/application-dev/reference/arkui-ts/ts-drawing-components-rect.md b/zh-cn/application-dev/reference/arkui-ts/ts-drawing-components-rect.md index fa70561c54fd53650d9c54c4ed0d7ae677f9940c..2fe97ada0aa9149ea253e642d9a7983f0c841600 100644 --- a/zh-cn/application-dev/reference/arkui-ts/ts-drawing-components-rect.md +++ b/zh-cn/application-dev/reference/arkui-ts/ts-drawing-components-rect.md @@ -1,7 +1,14 @@ -# Rect +# Rect + +>![](../../public_sys-resources/icon-note.gif) **说明：** +>该组件从API Version 7开始支持。后续版本如有新增内容，则采用上角标单独标记该内容的起始版本。 矩形绘制组件。 +## 权限列表 + +无 + ## 子组件 无 @@ -12,28 +19,27 @@ Rect\(value:\{options?: \{width: Length,height: Length,radius?: Length | Array -

参数名称

参数类型

+

参数类型

默认值

+

默认值

必填

+

必填

参数描述

+

参数描述

width

+

width

Length

+

Length

0

+

0

否

+

否

折线所在矩形的宽度。

+

折线所在矩形的宽度。

height

+

height

Length

+

Length

0

+

0

否

+

否

折线所在矩形的高度。

+

折线所在矩形的高度。

points

+

points

Array<Point>

+

Array<Point>

-

+

-

是

+

是

折线经过坐标点列表。

+

折线经过坐标点列表。

参数名

+ - - - - - - - - - @@ -41,72 +47,71 @@ Rect\(value:\{options?: \{width: Length,height: Length,radius?: Length | Arrayoptions参数说明 - -

参数名

参数类型

+

参数类型

必填

+

必填

默认值

+

默认值

参数描述

+

参数描述

options

+

options

Object

+

Object

否

+

否

-

+

-

见options参数说明。

+

见options参数说明。

参数名

+ - - - - - - - - - - - - - - - - - - - - - - - - - - - - - @@ -115,72 +120,71 @@ Rect\(value:\{options?: \{width: Length,height: Length,radius?: Length | Array - -

参数名

参数类型

+

参数类型

必填

+

必填

默认值

+

默认值

参数描述

+

参数描述

width

+

width

Length

+

Length

是

+

是

-

+

-

宽度。

+

宽度。

height

+

height

Length

+

Length

是

+

是

-

+

-

高度。

+

高度。

radius

+

radius

Length | Array<Length>

+

Length | Array<Length>

否

+

否

0

+

0

圆角半径，支持分别设置四个角的圆角度数。

+

圆角半径，支持分别设置四个角的圆角度数。

radiusWidth

+

radiusWidth

Length

+

Length

否

+

否

0

+

0

圆角宽度。

+

圆角宽度。

radiusHeight

+

radiusHeight

Length

+

Length

否

+

否

0

+

0

圆角高度。

+

圆角高度。

参数名称

+ - - - - - - - - - - - - - - - - - - - - - - - - - - - - - diff --git a/zh-cn/application-dev/reference/arkui-ts/ts-drawing-components-shape.md b/zh-cn/application-dev/reference/arkui-ts/ts-drawing-components-shape.md index 1360b77eb9a3ada7608632bb09b9647a385708c1..a6f804c33909e5bbffaa74d7e7ee41fe222016cf 100644 --- a/zh-cn/application-dev/reference/arkui-ts/ts-drawing-components-shape.md +++ b/zh-cn/application-dev/reference/arkui-ts/ts-drawing-components-shape.md @@ -1,4 +1,7 @@ -# Shape +# Shape + +>![](../../public_sys-resources/icon-note.gif) **说明：** +>该组件从API Version 7开始支持。后续版本如有新增内容，则采用上角标单独标记该内容的起始版本。 绘制组件的父组件，父组件中会描述所有绘制组件均支持的通用属性。 @@ -6,38 +9,41 @@ 2、绘制组件单独使用，用于在页面上绘制指定的图形。 +## 权限列表 + +无 + ## 子组件 可以包含子组件。 ## 接口 -Shape\(target?: PixelMap\) +Shape\(value:\{target?: PixelMap\}\) - 参数 - -

参数名称

参数类型

+

参数类型

默认值

+

默认值

必填

+

必填

参数描述

+

参数描述

width

+

width

Length

+

Length

0

+

0

否

+

否

宽度。

+

宽度。

height

+

height

Length

+

Length

0

+

0

否

+

否

高度。

+

高度。

radiusWidth

+

radiusWidth

Length

+

Length

0

+

0

否

+

否

圆角的宽度，仅设置宽时宽高一致。

+

圆角的宽度，仅设置宽时宽高一致。

radiusHeight

+

radiusHeight

Length

+

Length

0

+

0

否

+

否

圆角的高度，仅设置高时宽高一致。

+

圆角的高度，仅设置高时宽高一致。

radius

+

radius

Length | Array<Length>

+

Length | Array<Length>

0

+

0

否

+

否

圆角大小。

+

圆角大小。

参数名

+ - - - - - - - - - @@ -46,143 +52,142 @@ Shape\(target?: PixelMap\) ## 属性 - -

参数名

参数类型

+

参数类型

必填

+

必填

默认值

+

默认值

参数描述

+

参数描述

target

+

target

PixelMap

+

PixelMap

否

+

否

null

+

null

绘制目标，可将图形绘制在指定的PixelMap对象中，若未设置，则在当前绘制目标中进行绘制。

+

绘制目标，可将图形绘制在指定的PixelMap对象中，若未设置，则在当前绘制目标中进行绘制。

参数名称

+ - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - @@ -190,26 +195,25 @@ Shape\(target?: PixelMap\) - LineJoinStyle枚举说明 - -

参数名称

参数类型

+

参数类型

默认值

+

默认值

必填

+

必填

参数描述

+

参数描述

viewPort

+

viewPort

{

-

x: Length,

-

y: Length,

-

width: Length,

-

height: Length

-

}

+

{

+

x: Length,

+

y: Length,

+

width: Length,

+

height: Length

+

}

-

+

-

是

+

是

形状的视口。

+

形状的视口。

fill

+

fill

Color

+

Color

Black

+

Black

否

+

否

填充颜色。

+

填充颜色。

stroke

+

stroke

Color

+

Color

-

+

-

否

+

否

边框颜色。

+

边框颜色。

strokeDashArray

+

strokeDashArray

Array<Length>

+

Array<Length>

[]

+

[]

否

+

否

设置边框的间隙。

+

设置边框的间隙。

strokeDashOffset

+

strokeDashOffset

Length

+

Length

0

+

0

否

+

否

边框绘制起点的偏移量。

+

边框绘制起点的偏移量。

strokeLineCap

+

strokeLineCap

LineCapStyle

+

LineCapStyle

Butt

+

Butt

否

+

否

路径端点绘制样式。

+

路径端点绘制样式。

strokeLineJoin

+

strokeLineJoin

LineJoinStyle

+

LineJoinStyle

Miter

+

Miter

否

+

否

边框拐角绘制样式。

+

边框拐角绘制样式。

strokeMiterLimit

+

strokeMiterLimit

number

+

number

4

+

4

否

+

否

锐角绘制成斜角的极限值。

+

锐角绘制成斜角的极限值。

strokeOpacity

+

strokeOpacity

number

+

number

1

+

1

否

+

否

设置边框的不透明度。

+

设置边框的不透明度。

strokeWidth

+

strokeWidth

Length

+

Length

1

+

1

否

+

否

设置边框的宽度。

+

设置边框的宽度。

antiAlias

+

antiAlias

boolean

+

boolean

true

+

true

否

+

否

是否开启抗锯齿。

+

是否开启抗锯齿。

名称

+ - - - - - - - @@ -224,7 +228,7 @@ Shape\(target?: PixelMap\) struct ShapeExample { build() { Column({ space: 5 }) { - Text('basic').fontSize(9).fontColor(0xCCCCCC).width(320) + Text('basic').fontSize(30).fontColor(0xCCCCCC).width(320) // 在Shape的(-2, -2)点绘制一个 300 * 50 带边框的矩形,颜色0x317Af7,边框颜色黑色,边框宽度4,边框间隙20,向左偏移10,尖端样式圆角,拐角样式圆角,抗锯齿(默认开启) // 在Shape的(-2, 58)点绘制一个 300 * 50 带边框的椭圆,颜色0x317Af7,边框颜色黑色,边框宽度4,边框间隙20,向左偏移10,尖端样式圆角,拐角样式圆角,抗锯齿(默认开启) // 在Shape的(-2, 118)点绘制一个 300 * 10 线段,颜色0x317Af7,边框颜色黑色,宽度4,间隙20,向左偏移10,尖端样式圆角,拐角样式圆角,抗锯齿(默认开启) @@ -233,7 +237,7 @@ struct ShapeExample { Ellipse().width(300).height(50).offset({ x: 0, y: 60 }) Path().width(300).height(10).commands('M0 0 L900 0').offset({ x: 0, y: 120 }) } - .viewPort({ x: -2, y: -2, width: 304, height: 124 }) + .viewPort({ x: -2, y: -2, width: 304, height: 130 }) .fill(0x317Af7).stroke(Color.Black).strokeWidth(4) .strokeDashArray([20]).strokeDashOffset(10).strokeLineCap(LineCapStyle.Round) .strokeLineJoin(LineJoinStyle.Round).antiAlias(true) @@ -242,32 +246,32 @@ struct ShapeExample { Rect().width(300).height(50) }.viewPort({ x: -1, y: -1, width: 302, height: 52 }).fill(0x317Af7).stroke(Color.Black).strokeWidth(2) - Text('border').fontSize(9).fontColor(0xCCCCCC).width(320) + Text('border').fontSize(30).fontColor(0xCCCCCC).width(320).margin({top:30}) // 在Shape的(0, -5)点绘制一个 300 * 10 直线,颜色0xEE8443,边框宽度10,边框间隙20 Shape() { Path().width(300).height(10).commands('M0 0 L900 0') - }.viewPort({ x: 0, y: -5, width: 300, height: 10 }).stroke(0xEE8443).strokeWidth(10).strokeDashArray([20]) + }.viewPort({ x: 0, y: -5, width: 300, height: 20 }).stroke(0xEE8443).strokeWidth(10).strokeDashArray([20]) // 在Shape的(0, -5)点绘制一个 300 * 10 直线,颜色0xEE8443,边框宽度10,边框间隙20,向左偏移10 Shape() { Path().width(300).height(10).commands('M0 0 L900 0') } - .viewPort({ x: 0, y: -5, width: 300, height: 10 }) + .viewPort({ x: 0, y: -5, width: 300, height: 20 }) .stroke(0xEE8443).strokeWidth(10).strokeDashArray([20]).strokeDashOffset(10) // 在Shape的(0, -5)点绘制一个 300 * 10 直线,颜色0xEE8443,边框宽度10,透明度0.5 Shape() { Path().width(300).height(10).commands('M0 0 L900 0') - }.viewPort({ x: 0, y: -5, width: 300, height: 10 }).stroke(0xEE8443).strokeWidth(10).strokeOpacity(0.5) + }.viewPort({ x: 0, y: -5, width: 300, height: 20 }).stroke(0xEE8443).strokeWidth(10).strokeOpacity(0.5) // 在Shape的(0, -5)点绘制一个 300 * 10 直线,颜色0xEE8443,边框宽度10,边框间隙20,向左偏移10,尖端样式圆角 Shape() { Path().width(300).height(10).commands('M0 0 L900 0') } - .viewPort({ x: 0, y: -5, width: 300, height: 10 }) + .viewPort({ x: 0, y: -5, width: 300, height: 20 }) .stroke(0xEE8443).strokeWidth(10).strokeDashArray([20]).strokeLineCap(LineCapStyle.Round) // 在Shape的(-5, -5)点绘制一个 300 * 50 带边框的矩形,颜色0x317Af7,边框宽度10,边框颜色0xEE8443,拐角样式圆角 Shape() { - Rect().width(300).height(50) + Rect().width(300).height(100) } - .viewPort({ x: -5, y: -5, width: 310, height: 60 }) + .viewPort({ x: -5, y: -5, width: 310, height: 120 }) .fill(0x317Af7).stroke(0xEE8443).strokeWidth(10).strokeLineJoin(LineJoinStyle.Round) Shape() { Path().width(300).height(60).commands('M0 0 L400 0 L400 200 Z') @@ -280,5 +284,5 @@ struct ShapeExample { } ``` -![](figures/shape.gif) +![](figures/2-01.png) diff --git a/zh-cn/application-dev/reference/arkui-ts/ts-drawing-components.md b/zh-cn/application-dev/reference/arkui-ts/ts-drawing-components.md index de447a92abe2690386737526da62d743e1bb43e7..cc08580c60e5dbdaed218799a65599ccf53d4197 100644 --- a/zh-cn/application-dev/reference/arkui-ts/ts-drawing-components.md +++ b/zh-cn/application-dev/reference/arkui-ts/ts-drawing-components.md @@ -1,4 +1,4 @@ -# 绘制组件 +# 绘制组件 - **[Circle](ts-drawing-components-circle.md)** diff --git a/zh-cn/application-dev/reference/arkui-ts/ts-event-configuration.md b/zh-cn/application-dev/reference/arkui-ts/ts-event-configuration.md deleted file mode 100644 index 645eaa8fe72eb182fb2dd9765a4b141e6660640d..0000000000000000000000000000000000000000 --- a/zh-cn/application-dev/reference/arkui-ts/ts-event-configuration.md +++ /dev/null @@ -1,42 +0,0 @@ -# 事件配置 - -通过事件方法可以配置组件支持的事件。 - -- 使用lambda表达式配置组件的事件方法： - - ``` - // Counter is a private data variable defined in the component. - Button('add counter') - .onClick(() => { - this.counter += 2 - }) - ``` - - -- 使用匿名函数表达式配置组件的事件方法： - - 此时要求我们使用**bind**，以确保函数体中的this引用包含的组件。 - - ``` - // Counter is a private data variable defined in the component. - Button('add counter') - .onClick(function () { - this.counter += 2 - }.bind(this)) - ``` - - -- 使用组件的成员函数配置组件的事件方法： - - ``` - myClickHandler(): void { - // do something - } - - ... - - Button('add counter') - .onClick(this.myClickHandler) - ``` - - diff --git a/zh-cn/application-dev/reference/arkui-ts/ts-explicit-animation.md b/zh-cn/application-dev/reference/arkui-ts/ts-explicit-animation.md index 87607d1338b53ea25838850a90d52dd873114190..a8c5b137585ea0c52a91b935f288b7accdd60a10 100644 --- a/zh-cn/application-dev/reference/arkui-ts/ts-explicit-animation.md +++ b/zh-cn/application-dev/reference/arkui-ts/ts-explicit-animation.md @@ -1,16 +1,18 @@ -# 显式动画 +# 显式动画 - -

名称

描述

+

描述

Bevel

+

Bevel

使用斜角连接路径段。

+

使用斜角连接路径段。

Miter

+

Miter

使用尖角连接路径段。

+

使用尖角连接路径段。

Round

+

Round

使用圆角连接路径段。

+

使用圆角连接路径段。

接口名称

+>![](../../public_sys-resources/icon-note.gif) **说明：** +>从API Version 7开始支持。后续版本如有新增内容，则采用上角标单独标记该内容的起始版本。 + + - - - @@ -20,69 +22,68 @@ - 属性 - -

接口名称

功能描述

+

功能描述

animateTo(value: AnimationOption, event: ()=> void) : void

+

animateTo(value: AnimationOption, event: ()=> void) : void

提供全局animateTo显式动画接口来指定由于闭包代码导致的状态变化插入过渡动效。

-

event指定显示动效的闭包函数，在闭包函数中导致的状态变化系统会自动插入过渡动画。

+

提供全局animateTo显式动画接口来指定由于闭包代码导致的状态变化插入过渡动效。

+

event指定显示动效的闭包函数，在闭包函数中导致的状态变化系统会自动插入过渡动画。

属性名称

+ - - - - - - - - - - - - - - - - - - - - - - - - - - - @@ -91,16 +92,15 @@ - 接口 - -

属性名称

属性类型

+

属性类型

默认值

+

默认值

描述

+

描述

duration

+

duration

number

+

number

1000

+

1000

动画持续时间，单位为毫秒。

+

动画持续时间，单位为毫秒。

tempo

+

tempo

number

+

number

1.0

+

1.0

动画的播放速度，值越大动画播放越快，值越小播放越慢，为0时无动画效果。

+

动画的播放速度，值越大动画播放越快，值越小播放越慢，为0时无动画效果。

curve

+

curve

Curve | Curves

+

Curve | Curves

Linear

+

Linear

动画曲线。

+

动画曲线。

delay

+

delay

number

+

number

0

+

0

单位为ms(毫秒)，默认不延时播放。

+

单位为ms(毫秒)，默认不延时播放。

iterations

+

iterations

number

+

number

1

+

1

默认播放一次，设置为-1时表示无限次播放。

+

默认播放一次，设置为-1时表示无限次播放。

playMode

+

playMode

PlayMode

+

PlayMode

Normal

+

Normal

设置动画播放模式，默认播放完成后重头开始播放。

+

设置动画播放模式，默认播放完成后重头开始播放。

名称

+ - - - diff --git a/zh-cn/application-dev/reference/arkui-ts/ts-framework-directory.md b/zh-cn/application-dev/reference/arkui-ts/ts-framework-directory.md deleted file mode 100644 index e06ec5e37c99862c71d6087fbd90e170fdcb02ee..0000000000000000000000000000000000000000 --- a/zh-cn/application-dev/reference/arkui-ts/ts-framework-directory.md +++ /dev/null @@ -1,19 +0,0 @@ -# 目录结构 - -FA应用的ets模块\(entry/src/main\)的典型开发目录结构如下： - -![](figures/zh-cn_image_0000001182200571.png) - -**目录结构中文件分类如下：** - -- .ets结尾的ETS（Extended TypeScript）文件，这个文件用于描述UI布局、样式、事件交互和页面逻辑。 - -**各个文件夹和文件的作用：** - -- **app.ets**文件用于全局应用逻辑和应用生命周期管理。 -- **pages**目录用于存放所有组件页面。 -- **common**目录用于存放公共代码文件，比如：自定义组件和公共方法。 - ->![](../../public_sys-resources/icon-note.gif) **说明：** ->- 页面支持导入TypeScript和JavaScript文件。 - diff --git a/zh-cn/application-dev/reference/arkui-ts/ts-framework-file.md b/zh-cn/application-dev/reference/arkui-ts/ts-framework-file.md deleted file mode 100644 index 525caf67e173f4717fb25a4066627ecf7c0dac56..0000000000000000000000000000000000000000 --- a/zh-cn/application-dev/reference/arkui-ts/ts-framework-file.md +++ /dev/null @@ -1,7 +0,0 @@ -# 文件组织 - -- **[目录结构](ts-framework-directory.md)** - -- **[应用代码文件访问规则](ts-framework-file-access-rules.md)** - - diff --git a/zh-cn/application-dev/reference/arkui-ts/ts-framework-framework.md b/zh-cn/application-dev/reference/arkui-ts/ts-framework-framework.md deleted file mode 100644 index 0611691cfe97c4bb1794cfe48b7e9ed68bc8fade..0000000000000000000000000000000000000000 --- a/zh-cn/application-dev/reference/arkui-ts/ts-framework-framework.md +++ /dev/null @@ -1,13 +0,0 @@ -# 框架说明 - -- **[文件组织](ts-framework-file.md)** - -- **[js标签配置](ts-framework-js-tag.md)** - -- **[资源访问](ts-resource-access.md)** - -- **[像素单位](ts-pixel-units.md)** - -- **[类型定义](ts-types.md)** - - diff --git a/zh-cn/application-dev/reference/arkui-ts/ts-framework-js-tag.md b/zh-cn/application-dev/reference/arkui-ts/ts-framework-js-tag.md deleted file mode 100644 index f0ac1329d52723342781f485af314ccf358dc8a2..0000000000000000000000000000000000000000 --- a/zh-cn/application-dev/reference/arkui-ts/ts-framework-js-tag.md +++ /dev/null @@ -1,186 +0,0 @@ -# js标签配置 - -开发框架需要应用的[config.json](https://developer.harmonyos.com/cn/docs/documentation/doc-guides/basic-config-file-overview-0000000000011951)中配置相关的js标签，其中包含了实例名称、页面路由、视图窗口配置信息。 - - -

名称

功能描述

+

功能描述

onFinish() => void

+

onFinish() => void

动效播放完成回调。

+

动效播放完成回调。
- - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - -

标签

-

类型

-

默认值

-

必填

-

描述

-

name

-

string

-

default

-

是

-

标识ETS实例的名字。

-

pages

-

Array

-

-

-

是

-

页面路由信息，详见pages说明。

-

window

-

Object

-

-

-

否

-

视图窗口配置信息，详见window说明。

-

mode

-

Object

-

-

-

否

-

配置Js Component运行类型与语法风格，详见mode说明。

-
- -## pages - -定义每个页面入口组件的路由信息，每个页面由页面路径和页面名组成，页面的文件名就是页面名。比如： - -``` -{ - "pages": [ - "pages/index", - "pages/detail" - ] -} -``` - ->![](../../public_sys-resources/icon-note.gif) **说明：** ->- pages列表中第一个页面为应用的首页入口。 ->- 页面文件名不能使用组件名称，比如：Text.ets、Button.ets等。 ->- 每个页面文件中必须包含[页面入口组件](ts-component-based-entry.md)\(@Entry装饰\)。 - -## window - -window用于配置相关视图显示窗口，支持配置如下属性： - - - - - - - - - - - - -

类型

-

默认值

-

说明

-

designWidth

-

-

-

配置视图显示的逻辑宽度，缺省默认720（智能穿戴默认454）。视图显示的逻辑宽度决定了lpx像素单位大小，如designWidth配置720时，在视图宽度为1440物理像素时，1lpx为2物理像素。详见lpx像素单位说明。

-
- -``` -{ - ... - "window": { - "designWidth": 720 - } - ... -} -``` - -## mode - -mode用于配置JS Component的运行类型与语法风格，支持如下属性： - - - - - - - - - - - - - - - - -

类型

-

默认值

-

说明

-

type

-

-

-

配置该JS Component的运行类型，可选值为：

-
  • pageAbility：以ability的方式运行该JS Component。
  • form：以卡片的方式运行该JS Component。
-

syntax

-

-

-

配置该JS Component的语法风格，可选值为：

-
  • hml：以hml/css/js风格进行编写。
  • ets：以声明式语法风格进行编写。
-
- ->![](../../public_sys-resources/icon-note.gif) **说明：** ->- 不支持同时配置type类型为form，syntax类型为ets。 - -## 示例 - -config.json: - -``` -{ - "app": { - "bundleName": "com.example.player", - "version": { - "code": 1, - "name": "1.0" - }, - "vendor": "example" - }, - "module": { - "js": [{ - "name": "default", - "pages": [ - "pages/index", - "pages/detail" - ], - "window": { - "designWidth": 720 - }, - "mode": { - "type": "pageAbility", - "syntax": "ets" - }, - }], - "abilities": [{ - ... - }] - } -} -``` - diff --git a/zh-cn/application-dev/reference/arkui-ts/ts-general-ui-concepts.md b/zh-cn/application-dev/reference/arkui-ts/ts-general-ui-concepts.md deleted file mode 100644 index 73590b6ae11b1db5dd65f3cfc56fa2bf5f67e262..0000000000000000000000000000000000000000 --- a/zh-cn/application-dev/reference/arkui-ts/ts-general-ui-concepts.md +++ /dev/null @@ -1,43 +0,0 @@ -# 基本概念 - -基于TS扩展的声明式开发范式提供了一系列基本组件，这些组件以声明方式进行组合和扩展来描述应用程序的UI界面，并且还提供了基本的数据绑定和事件处理机制，帮助开发者实现应用交互逻辑。 - -## HelloWorld基本示例 - -``` -// An example of displaying Hello World. After you click the button, Hello UI is displayed. -@Entry -@Component -struct Hello { - @State myText: string = 'World' - build() { - Column() { - Text('Hello') - .fontSize(30) - Text(this.myText) - .fontSize(32) - Divider() - Button() { - Text('Click me') - .fontColor(Color.Red) - }.onClick(() => { - this.myText = 'UI' - }) - .width(500) - .height(200) - } - } -} -``` - -## 基本概念描述 - -上述示例代码描述了简单页面的结构，并介绍了以下基本概念： - -- **装饰器：**装饰类、结构、方法和变量，并为它们赋予特殊含义。例如，上例中的**@Entry**、**@Component**和**@State**都是装饰器； -- **自定义组件：**可重用的UI单元，可以与其他组件组合，如**@Component**装饰的**struct Hello**； -- **UI描述：**声明性描述UI结构，例如**build\(\)**方法中的代码块； -- **内置组件：**框架中默认内置的基本组件和布局组件，开发者可以直接调用，如**Column**、**Text**、**Divider**、**Button**等； -- **属性方法：**用于配置组件属性，如**fontSize\(\)**、**width\(\)**、**height\(\)**、**color\(\)**等； -- **事件方法：**用于将组件响应逻辑添加到事件中。逻辑是通过事件方法设置的。例如，按钮后面的**onClick\(\)**。 - diff --git a/zh-cn/application-dev/reference/arkui-ts/ts-general-ui-description-specifications.md b/zh-cn/application-dev/reference/arkui-ts/ts-general-ui-description-specifications.md deleted file mode 100644 index 664bd7b5c75d5b53f19436a29e5e116b6dbd3008..0000000000000000000000000000000000000000 --- a/zh-cn/application-dev/reference/arkui-ts/ts-general-ui-description-specifications.md +++ /dev/null @@ -1,9 +0,0 @@ -# 通用UI描述规范 - -- **[基本概念](ts-general-ui-concepts.md)** - -- **[声明式UI描述规范](ts-declarative-ui-description-specifications.md)** - -- **[组件化](ts-component-based.md)** - - diff --git a/zh-cn/application-dev/reference/arkui-ts/ts-gesture-processing.md b/zh-cn/application-dev/reference/arkui-ts/ts-gesture-processing.md index a8323a10762d7676f59f1652f2b8b12322b0e08c..0125a056be402199673da324e3c26ad5e10a94fe 100644 --- a/zh-cn/application-dev/reference/arkui-ts/ts-gesture-processing.md +++ b/zh-cn/application-dev/reference/arkui-ts/ts-gesture-processing.md @@ -1,4 +1,4 @@ -# 手势处理 +# 手势处理 - **[绑定手势方法](ts-gesture-settings.md)** diff --git a/zh-cn/application-dev/reference/arkui-ts/ts-gesture-settings.md b/zh-cn/application-dev/reference/arkui-ts/ts-gesture-settings.md index 332b4beb52238776d91f2d23d561377ba2150fd5..7433a1c4e5f9b7e278311aeceaa6e7cd65b71786 100644 --- a/zh-cn/application-dev/reference/arkui-ts/ts-gesture-settings.md +++ b/zh-cn/application-dev/reference/arkui-ts/ts-gesture-settings.md @@ -1,55 +1,63 @@ -# 绑定手势方法 +# 绑定手势方法 -可以通过如下属性给组件绑定手势识别，手势识别成功后可以通过事件回调通知组件。 +>![](../../public_sys-resources/icon-note.gif) **说明：** +>从API Version 7开始支持。后续版本如有新增内容，则采用上角标单独标记该内容的起始版本。 - -

名称

+## 权限列表 + +无 + +## 绑定手势识别 + +通过如下属性给组件绑定手势识别，手势识别成功后可以通过事件回调通知组件。 + + - - - - - - - - - - - - - - - @@ -58,22 +66,21 @@ - GestureMask枚举说明 - -

名称

参数类型

+

参数类型

默认值

+

默认值

描述

+

描述

gesture

+

gesture

gesture: GestureType,

-

mask?: GestureMask

+

gesture: GestureType,

+

mask?: GestureMask

gesture: -，

-

mask: GestureMask.Normal

+

gesture: -，

+

mask: GestureMask.Normal

绑定手势识别。

-

gesture: 绑定的手势类型， mask: 事件响应设置。

+

绑定手势识别。

+

gesture: 绑定的手势类型， mask: 事件响应设置。

priorityGesture

+

priorityGesture

gesture: GestureType,

-

mask?: GestureMask

+

gesture: GestureType,

+

mask?: GestureMask

gesture: -，

-

mask: GestureMask.Normal

+

gesture: -，

+

mask: GestureMask.Normal

绑定优先识别手势。

-

gesture: 绑定的手势类型， mask: 事件响应设置。

-
说明：
  • 默认情况下，子组件优先于父组件识别手势，当父组件配置priorityGesture时，父组件优先于子组件进行识别。
+

绑定优先识别手势。

+

gesture: 绑定的手势类型， mask: 事件响应设置。

+
说明：
  • 默认情况下，子组件优先于父组件识别手势，当父组件配置priorityGesture时，父组件优先于子组件进行识别。

parallelGesture

+

parallelGesture

gesture: GestureType,

-

mask?: GestureMask

+

gesture: GestureType,

+

mask?: GestureMask

gesture: -，

-

mask: GestureMask.Normal

+

gesture: -，

+

mask: GestureMask.Normal

绑定可与子组件手势同时触发的手势。

-

gesture: 绑定的手势类型， mask: 事件响应设置。

-
说明：
  • 手势事件为非冒泡事件。父组件设置parallelGesture时，父子组件相同的手势事件都可以触发，实现类似冒泡效果。
+

绑定可与子组件手势同时触发的手势。

+

gesture: 绑定的手势类型， mask: 事件响应设置。

+
说明：
  • 手势事件为非冒泡事件。父组件设置parallelGesture时，父子组件相同的手势事件都可以触发，实现类似冒泡效果。

名称

+ - - - - - @@ -83,41 +90,40 @@ - 系统提供如下Gesture类型 - -

名称

描述

+

描述

Normal

+

Normal

不屏蔽子组件的手势，按照默认手势识别顺序进行识别。

+

不屏蔽子组件的手势，按照默认手势识别顺序进行识别。

IgnoreInternal

+

IgnoreInternal

屏蔽子组件的手势，仅当前容器的手势进行识别。

-
说明：
  • 子组件上系统内置的手势不会被屏蔽，如子组件为List组件时，内置的滑动手势仍然会触发。
+

屏蔽子组件的手势，仅当前容器的手势进行识别。

+
说明：

子组件上系统内置的手势不会被屏蔽，如子组件为List组件时，内置的滑动手势仍然会触发。

名称

+ - - - - - - - - - - - - - @@ -130,16 +136,15 @@ - TapGesture事件说明 - -

名称

描述

+

描述

TapGesture

+

TapGesture

点击手势，支持单次点击、多次点击识别。

+

点击手势，支持单次点击、多次点击识别。

LongPressGesture

+

LongPressGesture

长按手势。

+

长按手势。

PanGesture

+

PanGesture

平移手势。

+

平移手势。

PinchGesture

+

PinchGesture

捏合手势。

+

捏合手势。

RotationGesture

+

RotationGesture

旋转手势。

+

旋转手势。

GestureGroup

+

GestureGroup

手势识别组，多种手势组合为复合手势，支持连续识别、并行识别和互斥识别。

+

手势识别组，多种手势组合为复合手势，支持连续识别、并行识别和互斥识别。

名称

+ - - - @@ -149,68 +154,26 @@ - GestureEvent对象说明 -

名称

功能描述

+

功能描述

onAction((event?: GestureEvent) => void)

+

onAction((event?: GestureEvent) => void)

Tap手势识别成功回调。

+

Tap手势识别成功回调。

属性名称

+ - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - @@ -226,22 +189,28 @@ struct GestureSettingsExample { @State value: string = '' build() { - Column() { - Text('Click\n' + this.value).gesture(TapGesture() - .onAction(() => { - this.value = 'gesture onAction' - })) - }.height(200).width(300).padding(60).border({ width: 1 }).margin(30) - //设置为priorityGesture时，会优先识别该绑定手势忽略内部gesture手势 - .priorityGesture( + Column(){ + Column() { + Text('Click\n' + this.value) + .gesture( + TapGesture() + .onAction(() => { + this.value = 'gesture onAction' + })) + }.height(200).width(300).padding(60).border({ width: 1 }) + //设置为priorityGesture时，会优先识别该绑定手势忽略内部gesture手势 + .priorityGesture( TapGesture() - .onAction(() => { - this.value = 'priorityGesture onAction' + .onAction((event: GestureEvent) => { + this.value = 'priorityGesture onAction' + '\ncomponent globalPos：（' + + event.target.area.globalPos.x + ',' + event.target.area.globalPos.y + '）\nwidth:' + + event.target.area.width + '\nheight：' + event.target.area.height }), GestureMask.IgnoreInternal - ) + ) + }.padding(60) } } ``` -![](figures/GestureSetting.gif) +![](figures/zh-cn_image_0000001237475107.gif) diff --git a/zh-cn/application-dev/reference/arkui-ts/ts-global-ui-methods.md b/zh-cn/application-dev/reference/arkui-ts/ts-global-ui-methods.md index fd8062a4ae8b5a66f88004d9de2ed86671858706..af6873512f82bbc30fdcaa02e27ef0dcf9197036 100644 --- a/zh-cn/application-dev/reference/arkui-ts/ts-global-ui-methods.md +++ b/zh-cn/application-dev/reference/arkui-ts/ts-global-ui-methods.md @@ -1,4 +1,4 @@ -# 全局UI方法 +# 全局UI方法 - **[警告弹窗](ts-methods-alert-dialog-box.md)** @@ -8,4 +8,6 @@ - **[媒体查询](ts-methods-media-query.md)** +- **[列表选择弹窗](ts-methods-custom-actionsheet.md)** + diff --git a/zh-cn/application-dev/reference/arkui-ts/ts-interpolation-calculation.md b/zh-cn/application-dev/reference/arkui-ts/ts-interpolation-calculation.md index 369194579f0be341f19d145a3492d302fdd17f87..574b5f210e18e4b5f9ae0e0be569d31333a474b1 100644 --- a/zh-cn/application-dev/reference/arkui-ts/ts-interpolation-calculation.md +++ b/zh-cn/application-dev/reference/arkui-ts/ts-interpolation-calculation.md @@ -1,4 +1,7 @@ -# 插值计算 +# 插值计算 + +>![](../../public_sys-resources/icon-note.gif) **说明：** +>从API Version 7开始支持。后续版本如有新增内容，则采用上角标单独标记该内容的起始版本。 ## 导入模块 @@ -18,28 +21,27 @@ init\(curve?: Curve\): Object - 参数 - -

属性名称

属性类型

+

属性类型

描述

+

描述

repeat

-

boolean

-

事件是否为重复触发事件，用于LongPressGesture场景。

-

offsetX

-

number

-

手势事件偏移量，用于PanGesture手势触发场景，单位为vp。

-

offsetY

-

number

-

手势事件偏移量，用于PanGesture手势触发场景，单位为vp。

-

scale

-

number

-

缩放比例，用于PinchGesture手势触发场景。

-

pinchCenterX

-

number

-

捏合手势中心点X轴坐标，用于PinchGesture手势触发场景，单位为px。

-

pinchCenterY

-

number

-

捏合手势中心点Y轴坐标，用于PinchGesture手势触发场景，单位为px。

-

angle

+

timestamp

number

+

number

旋转角度，用于RotationGesture手势触发场景。

+

事件时间戳。

timestamp

+

target8+

number

+

EventTarget

事件时间戳。

+

触发手势事件的元素对象。

参数名

+ - - - - - - - - - @@ -58,39 +60,38 @@ steps\(count: number, end: boolean\): Object - 参数： - -

参数名

类型

+

类型

必填

+

必填

默认值

+

默认值

说明

+

说明

curve

+

curve

Curve

+

Curve

否

+

否

Linear

+

Linear

曲线对象。

+

曲线对象。

参数名

+ - - - - - - - - - - - - - - @@ -109,51 +110,50 @@ cubicBezier\(x1: number, y1: number, x2: number, y2: number\): Object - 参数 - -

参数名

类型

+

类型

必填

+

必填

默认值

+

默认值

说明

+

说明

count

+

count

number

+

number

是

+

是

-

+

-

阶梯的数量，需要为正整数。

+

阶梯的数量，需要为正整数。

end

+

end

boolean

+

boolean

否

+

否

true

+

true

在每个间隔的起点或是终点发生阶跃变化 ，默认值为true，即在终点发生阶跃变化。

+

在每个间隔的起点或是终点发生阶跃变化 ，默认值为true，即在终点发生阶跃变化。

参数名

+ - - - - - - - - - - - - - - - - - - - @@ -172,51 +172,50 @@ spring\(velocity: number, mass: number, stiffness: number, damping: number\): Ob - 参数 - -

参数名

类型

+

类型

必填

+

必填

说明

+

说明

x1

+

x1

number

+

number

是

+

是

确定贝塞尔曲线第一点横坐标。

+

确定贝塞尔曲线第一点横坐标。

y1

+

y1

number

+

number

是

+

是

确定贝塞尔曲线第一点纵坐标。

+

确定贝塞尔曲线第一点纵坐标。

x2

+

x2

number

+

number

是

+

是

确定贝塞尔曲线第二点横坐标。

+

确定贝塞尔曲线第二点横坐标。

y2

+

y2

number

+

number

是

+

是

确定贝塞尔曲线第二点纵坐标。

+

确定贝塞尔曲线第二点纵坐标。

参数名

+ - - - - - - - - - - - - - - - - - - - @@ -239,18 +238,17 @@ let curve3 = Curves.cubicBezier(0.1, 0.0, 0.1, 1.0) // 创建一个三阶贝塞 曲线对象只能通过上面的接口创建。 - -

参数名

类型

+

类型

必填

+

必填

说明

+

说明

velocity

+

velocity

number

+

number

是

+

是

初始速度。

+

初始速度。

mass

+

mass

number

+

number

是

+

是

质量。

+

质量。

stiffness

+

stiffness

number

+

number

是

+

是

刚度。

+

刚度。

damping

+

damping

number

+

number

是

+

是

阻尼。

+

阻尼。

接口名称

+ - - - @@ -292,5 +290,5 @@ struct ImageComponent { } ``` -![](figures/5-20.gif) +![](figures/5.gif) diff --git a/zh-cn/application-dev/reference/arkui-ts/ts-managing-application-states-apis.md b/zh-cn/application-dev/reference/arkui-ts/ts-managing-application-states-apis.md deleted file mode 100644 index 76c840fbbeb71f09b53fa50ed7b91b3bfaefbf2c..0000000000000000000000000000000000000000 --- a/zh-cn/application-dev/reference/arkui-ts/ts-managing-application-states-apis.md +++ /dev/null @@ -1,9 +0,0 @@ -# 接口 - -- **[应用程序的数据存储](ts-application-states-appstorage.md)** - -- **[持久化数据管理](ts-application-states-apis-persistentstorage.md)** - -- **[环境变量](ts-application-states-apis-environment.md)** - - diff --git a/zh-cn/application-dev/reference/arkui-ts/ts-managing-application-states.md b/zh-cn/application-dev/reference/arkui-ts/ts-managing-application-states.md deleted file mode 100644 index 5d1df374e641f880d375c9c8b57f6f0aa6fe490c..0000000000000000000000000000000000000000 --- a/zh-cn/application-dev/reference/arkui-ts/ts-managing-application-states.md +++ /dev/null @@ -1,7 +0,0 @@ -# 管理应用程序的状态 - -- **[接口](ts-managing-application-states-apis.md)** - -- **[AppStorage与组件同步](ts-application-states-storagelink-storageprop.md)** - - diff --git a/zh-cn/application-dev/reference/arkui-ts/ts-managing-component-states.md b/zh-cn/application-dev/reference/arkui-ts/ts-managing-component-states.md deleted file mode 100644 index 3432c79f2d34fe7dda48e8bb9cb83000fd90060e..0000000000000000000000000000000000000000 --- a/zh-cn/application-dev/reference/arkui-ts/ts-managing-component-states.md +++ /dev/null @@ -1,9 +0,0 @@ -# 管理组件拥有的状态 - -- **[@State](ts-component-states-state.md)** - -- **[@Prop](ts-component-states-prop.md)** - -- **[@Link](ts-component-states-link.md)** - - diff --git a/zh-cn/application-dev/reference/arkui-ts/ts-managing-other-states.md b/zh-cn/application-dev/reference/arkui-ts/ts-managing-other-states.md deleted file mode 100644 index a3a2768f1e056fb67ef7b8f3b688a0fd67322c6d..0000000000000000000000000000000000000000 --- a/zh-cn/application-dev/reference/arkui-ts/ts-managing-other-states.md +++ /dev/null @@ -1,9 +0,0 @@ -# 其他类目的状态管理 - -- **[Observed和ObjectLink数据管理](ts-other-states-observed-objectlink.md)** - -- **[@Consume和@Provide数据管理](ts-other-states-consume-provide.md)** - -- **[@Watch](ts-other-states-watch.md)** - - diff --git a/zh-cn/application-dev/reference/arkui-ts/ts-matrix-transformation.md b/zh-cn/application-dev/reference/arkui-ts/ts-matrix-transformation.md index 9174218ba0e41de5428223fe2fa56636ca0ed279..ed935c811ddf45b854ad2dcdade70c34231d5682 100644 --- a/zh-cn/application-dev/reference/arkui-ts/ts-matrix-transformation.md +++ b/zh-cn/application-dev/reference/arkui-ts/ts-matrix-transformation.md @@ -1,4 +1,7 @@ -# 矩阵变换 +# 矩阵变换 + +>![](../../public_sys-resources/icon-note.gif) **说明：** +>从API Version 7开始支持。后续版本如有新增内容，则采用上角标单独标记该内容的起始版本。 ## 导入模块 @@ -6,7 +9,7 @@ import matrix4 from '@ohos.matrix4' ``` -## 权限 +## 权限列表 无 @@ -18,31 +21,30 @@ Matrix的构造函数，可以通过传入的参数创建一个四阶矩阵， - 参数 - -

接口名称

功能描述

+

功能描述

interpolate(time: number): number

+

interpolate(time: number): number

插值曲线的插值计算函数，可以通过传入的归一化时间参数返回当前的插值。

-

time: 当前的归一化时间参数，有效值范围0到1。

-

返回归一化time时间点对应的曲线插值。

+

插值曲线的插值计算函数，可以通过传入的归一化时间参数返回当前的插值。

+

time: 当前的归一化时间参数，有效值范围0到1。

+

返回归一化time时间点对应的曲线插值。

参数名

+ - - - - - - - - - @@ -50,16 +52,15 @@ Matrix的构造函数，可以通过传入的参数创建一个四阶矩阵， - 返回值 - -

参数名

类型

+

类型

必填

+

必填

默认值

+

默认值

说明

+

说明

array

+

array

Array<number>

+

Array<number>

是

+

是

[1, 0, 0, 0,

-

0, 1, 0, 0,

-

0, 0, 1, 0,

-

0, 0, 0, 1]

+

[1, 0, 0, 0,

+

0, 1, 0, 0,

+

0, 0, 1, 0,

+

0, 0, 0, 1]

参数为长度为16（4*4）的number数组, 详情见参数描述。

+

参数为长度为16（4*4）的number数组, 详情见参数描述。

类型

+ - - - @@ -67,159 +68,158 @@ Matrix的构造函数，可以通过传入的参数创建一个四阶矩阵， - 参数描述 - -

类型

说明

+

说明

Object

+

Object

根据入参创建的四阶矩阵对象。

+

根据入参创建的四阶矩阵对象。

参数名

+ - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - @@ -245,16 +245,15 @@ Matrix的初始化函数，可以返回一个单位矩阵对象。 - 返回值 - -

参数名

类型

+

类型

必填

+

必填

说明

+

说明

m00

+

m00

number

+

number

是

+

是

x轴缩放值，单位矩阵默认为1。

+

x轴缩放值，单位矩阵默认为1。

m01

+

m01

number

+

number

是

+

是

第2个值，xyz轴旋转会影响这个值。

+

第2个值，xyz轴旋转会影响这个值。

m02

+

m02

number

+

number

是

+

是

第3个值，xyz轴旋转会影响这个值。

+

第3个值，xyz轴旋转会影响这个值。

m03

+

m03

number

+

number

是

+

是

无实际意义。

+

无实际意义。

m10

+

m10

number

+

number

是

+

是

第5个值，xyz轴旋转会影响这个值。

+

第5个值，xyz轴旋转会影响这个值。

m11

+

m11

number

+

number

是

+

是

y轴缩放值，单位矩阵默认为1。

+

y轴缩放值，单位矩阵默认为1。

m12

+

m12

number

+

number

是

+

是

第7个值，xyz轴旋转会影响这个值。

+

第7个值，xyz轴旋转会影响这个值。

m13

+

m13

number

+

number

是

+

是

无实际意义。

+

无实际意义。

m20

+

m20

number

+

number

是

+

是

第9个值，xyz轴旋转会影响这个值。

+

第9个值，xyz轴旋转会影响这个值。

m21

+

m21

number

+

number

是

+

是

第10个值，xyz轴旋转会影响这个值。

+

第10个值，xyz轴旋转会影响这个值。

m22

+

m22

number

+

number

是

+

是

z轴缩放值，单位矩阵默认为1。

+

z轴缩放值，单位矩阵默认为1。

m23

+

m23

number

+

number

是

+

是

无实际意义。

+

无实际意义。

m30

+

m30

number

+

number

是

+

是

x轴平移值，单位px，单位矩阵默认为0。

+

x轴平移值，单位px，单位矩阵默认为0。

m31

+

m31

number

+

number

是

+

是

y轴平移值，单位px，单位矩阵默认为0。

+

y轴平移值，单位px，单位矩阵默认为0。

m32

+

m32

number

+

number

是

+

是

z轴平移值，单位px，单位矩阵默认为0。

+

z轴平移值，单位px，单位矩阵默认为0。

m33

+

m33

number

+

number

是

+

是

齐次坐标下生效，产生透视投影效果。

+

齐次坐标下生效，产生透视投影效果。

类型

+ - - - @@ -281,16 +280,15 @@ Matrix的拷贝函数，可以拷贝一份当前的矩阵对象。 - 返回值 - -

类型

说明

+

说明

Object

+

Object

单位矩阵对象。

+

单位矩阵对象。

类型

+ - - - @@ -334,28 +332,27 @@ Matrix的叠加函数，可以将两个矩阵的效果叠加起来生成一个 - 参数 - -

类型

说明

+

说明

Object

+

Object

当前矩阵的拷贝对象。

+

当前矩阵的拷贝对象。

参数名

+ - - - - - - - - - @@ -363,16 +360,15 @@ Matrix的叠加函数，可以将两个矩阵的效果叠加起来生成一个 - 返回值 - -

参数名

类型

+

类型

必填

+

必填

默认值

+

默认值

说明

+

说明

matrix

+

matrix

Matrix4

+

Matrix4

是

+

是

-

+

-

待叠加的矩阵对象。

+

待叠加的矩阵对象。

类型

+ - - - @@ -410,16 +406,15 @@ Matrix的逆函数，可以返回一个当前矩阵对象的逆矩阵，即效 - 返回值 - -

类型

说明

+

说明

Object

+

Object

矩阵叠加后的对象。

+

矩阵叠加后的对象。

类型

+ - - - @@ -443,50 +438,49 @@ Matrix的平移函数，可以为当前矩阵增加x轴/Y轴/Z轴平移效果。 - 参数 - -

类型

说明

+

说明

Object

+

Object

当前矩阵的逆矩阵对象。

+

当前矩阵的逆矩阵对象。

参数名

+ - - - - - - - - - - - - - - - - - - - @@ -495,16 +489,15 @@ Matrix的平移函数，可以为当前矩阵增加x轴/Y轴/Z轴平移效果。 - 返回值 - -

参数名

类型

+

类型

必填

+

必填

默认值

+

默认值

说明

+

说明

x

+

x

number

+

number

否

+

否

0

+

0

x轴的平移距离，单位px。

+

x轴的平移距离，单位px。

y

+

y

number

+

number

否

+

否

0

+

0

y轴的平移距离，单位px。

+

y轴的平移距离，单位px。

z

+

z

number

+

number

否

+

否

0

+

0

z轴的平移距离，单位px。

+

z轴的平移距离，单位px。

类型

+ - - - @@ -539,72 +532,71 @@ Matrix的缩放函数，可以为当前矩阵增加x轴/Y轴/Z轴缩放效果。 - 参数 - -

类型

说明

+

说明

Object

+

Object

增加好平移效果后的矩阵对象。

+

增加好平移效果后的矩阵对象。

参数名

+ - - - - - - - - - - - - - - - - - - - - - - - - - - - - - @@ -613,16 +605,15 @@ Matrix的缩放函数，可以为当前矩阵增加x轴/Y轴/Z轴缩放效果。 - 返回值 - -

参数名

类型

+

类型

必填

+

必填

默认值

+

默认值

说明

+

说明

x

+

x

number

+

number

否

+

否

1

+

1

x轴的缩放倍数。

+

x轴的缩放倍数。

y

+

y

number

+

number

否

+

否

1

+

1

y轴的缩放倍数。

+

y轴的缩放倍数。

z

+

z

number

+

number

否

+

否

1

+

1

z轴的缩放倍数。

+

z轴的缩放倍数。

centerX

+

centerX

number

+

number

否

+

否

0

+

0

变换中心点x轴坐标。

+

变换中心点x轴坐标。

centerY

+

centerY

number

+

number

否

+

否

0

+

0

变换中心点y轴坐标。

+

变换中心点y轴坐标。

类型

+ - - - @@ -657,83 +648,82 @@ Matrix的旋转函数，可以为当前矩阵增加x轴/Y轴/Z轴旋转效果。 - 参数 - -

类型

说明

+

说明

Object

+

Object

增加好缩放效果后的矩阵对象。

+

增加好缩放效果后的矩阵对象。

参数名

+ - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - @@ -742,16 +732,15 @@ Matrix的旋转函数，可以为当前矩阵增加x轴/Y轴/Z轴旋转效果。 - 返回值 - -

参数名

类型

+

类型

必填

+

必填

默认值

+

默认值

说明

+

说明

x

+

x

number

+

number

否

+

否

1

+

1

旋转轴向量x坐标。

+

旋转轴向量x坐标。

y

+

y

number

+

number

否

+

否

1

+

1

旋转轴向量y坐标。

+

旋转轴向量y坐标。

z

+

z

number

+

number

否

+

否

1

+

1

旋转轴向量z坐标。

+

旋转轴向量z坐标。

angle

+

angle

number

+

number

否

+

否

0

+

0

旋转角度。

+

旋转角度。

centerX

+

centerX

number

+

number

否

+

否

0

+

0

变换中心点x轴坐标。

+

变换中心点x轴坐标。

centerY

+

centerY

number

+

number

否

+

否

0

+

0

变换中心点y轴坐标。

+

变换中心点y轴坐标。

类型

+ - - - @@ -775,7 +764,7 @@ Matrix的旋转函数，可以为当前矩阵增加x轴/Y轴/Z轴旋转效果。 } ``` - ![](figures/1-19.png) + ![](figures/1.png) ### transformPoint @@ -786,28 +775,27 @@ Matrix的坐标点转换函数，可以将当前的变换效果作用到一个 - 参数 - -

类型

说明

+

说明

Object

+

Object

增加好旋转效果后的矩阵对象。

+

增加好旋转效果后的矩阵对象。

参数名

+ - - - - - - - - - @@ -816,16 +804,15 @@ Matrix的坐标点转换函数，可以将当前的变换效果作用到一个 - 返回值 - -

参数名

类型

+

类型

必填

+

必填

默认值

+

默认值

说明

+

说明

point

+

point

Point

+

Point

是

+

是

-

+

-

需要转换的坐标点。

+

需要转换的坐标点。

类型

+ - - - diff --git a/zh-cn/application-dev/reference/arkui-ts/ts-media-resource-type.md b/zh-cn/application-dev/reference/arkui-ts/ts-media-resource-type.md deleted file mode 100644 index cb772ed7639e3cbe866198d61923bcbffe7be45a..0000000000000000000000000000000000000000 --- a/zh-cn/application-dev/reference/arkui-ts/ts-media-resource-type.md +++ /dev/null @@ -1,45 +0,0 @@ -# 媒体资源类型说明 - -- 开发框架支持的图片资源类型说明 - - -

类型

说明

+

说明

Point

+

Point

返回矩阵变换后的Point对象。

+

返回矩阵变换后的Point对象。
- - - - - - - - - - - - - - - - - - - - - - -

格式

-

文件后缀名

-

JPEG

-

.jpg

-

PNG

-

.png

-

GIF

-

.gif

-

SVG

-

.svg

-

WEBP

-

.webp

-

BMP

-

.bmp

-
- - diff --git a/zh-cn/application-dev/reference/arkui-ts/ts-methods-alert-dialog-box.md b/zh-cn/application-dev/reference/arkui-ts/ts-methods-alert-dialog-box.md index fda03c8acfa5266d76b8a9a3abaa677c14730f7c..661ab762001cd3cddadccb50d312ad00778348f3 100644 --- a/zh-cn/application-dev/reference/arkui-ts/ts-methods-alert-dialog-box.md +++ b/zh-cn/application-dev/reference/arkui-ts/ts-methods-alert-dialog-box.md @@ -1,27 +1,29 @@ -# 警告弹窗 +# 警告弹窗 + +>![](../../public_sys-resources/icon-note.gif) **说明：** +>从API Version 7开始支持。后续版本如有新增内容，则采用上角标单独标记该内容的起始版本。 显示警告弹窗组件，可设置文本内容与响应回调。 ## 属性 - -

名称

+ - - - - - - - @@ -29,113 +31,112 @@ - paramObject1参数 - -

名称

参数类型

+

参数类型

默认值

+

默认值

参数描述

+

参数描述

show

+

show

options: { paramObject1| paramObject2}

+

options: { paramObject1| paramObject2}

-

+

-

定义并显示AlertDialog组件。

+

定义并显示AlertDialog组件。

参数名

+ - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - @@ -144,130 +145,129 @@ - paramObject2参数 - -

参数名

参数类型

+

参数类型

必填

+

必填

默认值

+

默认值

参数描述

+

参数描述

title

+

title

string | Resource

+

string | Resource

否

+

否

-

+

-

弹窗标题。

+

弹窗标题。

message

+

message

string | Resource

+

string | Resource

是

+

是

-

+

-

弹窗内容。

+

弹窗内容。

autoCancel

+

autoCancel

boolean

+

boolean

否

+

否

true

+

true

点击遮障层时，是否关闭弹窗。

+

点击遮障层时，是否关闭弹窗。

confirm

+

confirm

{

-

value: string | Resource,

-

fontColor?: Color | number | string | Resource,

-

backgroundColor?: Color | number | string | Resource,

-

action: () => void

-

}

+

{

+

value: string | Resource,

+

fontColor?: Color | number | string | Resource,

+

backgroundColor?: Color | number | string | Resource,

+

action: () => void

+

}

否

+

否

-

+

-

确认按钮的文本内容、文本色、按钮背景色和点击回调。

+

确认按钮的文本内容、文本色、按钮背景色和点击回调。

cancel

+

cancel

() => void

+

() => void

否

+

否

-

+

-

点击遮障层关闭dialog时的回调。

+

点击遮障层关闭dialog时的回调。

alignment

+

alignment

DialogAlignment

+

DialogAlignment

否

+

否

DialogAlignment.Default

+

DialogAlignment.Default

弹窗在竖直方向上的对齐方式。

+

弹窗在竖直方向上的对齐方式。

offset

+

offset

{

-

dx: Length | Resource,

-

dy: Length | Resource

-

}

+

{

+

dx: Length | Resource,

+

dy: Length | Resource

+

}

否

+

否

-

+

-

弹窗相对alignment所在位置的偏移量。

+

弹窗相对alignment所在位置的偏移量。

gridCount

+

gridCount

number

+

number

否

+

否

-

+

-

弹窗容器宽度所占用栅格数。

+

弹窗容器宽度所占用栅格数。

参数名

+ - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - diff --git a/zh-cn/application-dev/reference/arkui-ts/ts-methods-custom-actionsheet.md b/zh-cn/application-dev/reference/arkui-ts/ts-methods-custom-actionsheet.md new file mode 100644 index 0000000000000000000000000000000000000000..90478697112b3ba0c8c70b30a159938b1f909024 --- /dev/null +++ b/zh-cn/application-dev/reference/arkui-ts/ts-methods-custom-actionsheet.md @@ -0,0 +1,234 @@ +# 列表选择弹窗 + +>![](../../public_sys-resources/icon-note.gif) **说明：** +>从API Version 8开始支持。后续版本如有新增内容，则采用上角标单独标记该内容的起始版本。 + +列表弹窗。 + +## 权限列表 + +无 + +## ActionSheet.show + +show\(options: \{ [paramObject1](#table816913216616)\}\) + +定义列表弹窗并弹出。 + +- paramObject1参数 + + +

参数名

参数类型

+

参数类型

必填

+

必填

默认值

+

默认值

参数描述

+

参数描述

title

+

title

string | Resource

+

string | Resource

否

+

否

-

+

-

弹窗标题。

+

弹窗标题。

message

+

message

string | Resource

+

string | Resource

是

+

是

-

+

-

弹窗内容。

+

弹窗内容。

autoCancel

+

autoCancel

boolean

+

boolean

否

+

否

true

+

true

点击遮障层时，是否关闭弹窗。

+

点击遮障层时，是否关闭弹窗。

primaryButton

+

primaryButton

{

-

value: string | Resource,

-

fontColor?: Color | number | string | Resource,

-

backgroundColor?: Color | number | string | Resource,

-

action: () => void;

-

}

+

{

+

value: string | Resource,

+

fontColor?: Color | number | string | Resource,

+

backgroundColor?: Color | number | string | Resource,

+

action: () => void;

+

}

否

+

否

-

+

-

按钮的文本内容、文本色、按钮背景色和点击回调。

+

按钮的文本内容、文本色、按钮背景色和点击回调。

secondaryButton

+

secondaryButton

-

{

-

value: string | Resource,

-

fontColor?: Color | number | string | Resource,

-

backgroundColor?: Color | number | string | Resource,

-

action: () => void;

-

}

+

+

{

+

value: string | Resource,

+

fontColor?: Color | number | string | Resource,

+

backgroundColor?: Color | number | string | Resource,

+

action: () => void;

+

}

否

+

否

-

+

-

按钮的文本内容、文本色、按钮背景色和点击回调。

+

按钮的文本内容、文本色、按钮背景色和点击回调。

cancel

+

cancel

() => void

+

() => void

否

+

否

-

+

-

点击遮障层关闭dialog时的回调。

+

点击遮障层关闭dialog时的回调。

alignment

+

alignment

DialogAlignment

+

DialogAlignment

否

+

否

DialogAlignment.Default

+

DialogAlignment.Default

弹窗在竖直方向上的对齐方式。

+

弹窗在竖直方向上的对齐方式。

offset

+

offset

{

-

dx: Length | Resource,

-

dy: Length | Resource

-

}

+

{

+

dx: Length | Resource,

+

dy: Length | Resource

+

}

否

+

否

-

+

-

弹窗相对alignment所在位置的偏移量。

+

弹窗相对alignment所在位置的偏移量。

gridCount

+

gridCount

number

+

number

否

+

否

-

+

-

弹窗容器宽度所占用栅格数。

+

弹窗容器宽度所占用栅格数。
+ + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + +

参数名

+

参数类型

+

必填

+

默认值

+

参数描述

+

title

+

string

+

否

+

无标题

+

弹窗标题。

+

message

+

string

+

是

+

-

+

弹窗内容。

+

autoCancel

+

boolean

+

否

+

true

+

点击遮障层时，是否关闭弹窗。

+

confirm

+

{

+

value: string,

+

action: () => void

+

}

+

否

+

-

+

确认按钮的文本内容和点击回调。

+

value：按钮文本内容。

+

action: 按钮选中时的回调。

+

cancel

+

() => void

+

否

+

-

+

点击遮障层关闭dialog时的回调。

+

alignment

+

DialogAlignment

+

否

+

DialogAlignment.Default

+

弹窗在竖直方向上的对齐方式。

+

offset

+

{

+

dx: Length,

+

dy: Length

+

}

+

否

+

{

+

dx: 0,

+

dy: 0

+

}

+

弹窗相对alignment所在位置的偏移量。

+

sheets

+

Array<SheetInfo>

+

是

+

-

+

设置选项内容，每个选择项支持设置图片、文本和选中的回调。

+
+ +- SheetInfo接口说明 + + + + + + + + + + + + + + + + + + + + + + + + + + + +

参数名

+

参数类型

+

必填

+

默认值

+

参数描述

+

title

+

string

+

是

+

-

+

sheet文本。

+

icon

+

string

+

否

+

无

+

sheet图标。

+

action

+

()=>void

+

是

+

-

+

sheet选中的回调。

+
+ + +## 示例 + +``` +@Entry +@Component +struct ActionSheetExapmle { + build() { + Flex({ direction: FlexDirection.Column, alignItems: ItemAlign.Center, justifyContent: FlexAlign.Center }) { + Button('Click to Show ActionSheet') + .onClick(() => { + ActionSheet.show({ + title: 'ActionSheet title', + message: 'message', + confirm: { + value: 'Confirm button', + action: () => { + console.log('Get Alert Dialog handled') + } + }, + sheets: [ + { + title: 'Apples', + action: () => { + console.error('Apples') + } + }, + { + title: 'bananas', + action: () => { + console.error('bananas') + } + }, + { + title: 'pears', + action: () => { + console.error('pears') + } + } + ] + }) + }) + }.width('100%') + .height('100%') + } +} +``` + +![](figures/actionsheet.gif) + diff --git a/zh-cn/application-dev/reference/arkui-ts/ts-methods-custom-dialog-box.md b/zh-cn/application-dev/reference/arkui-ts/ts-methods-custom-dialog-box.md index 9d8a94db3cbf96f35a8729bb26634dc218c13260..2a3af18c66ad41478ef34082c799cc6a39bba643 100644 --- a/zh-cn/application-dev/reference/arkui-ts/ts-methods-custom-dialog-box.md +++ b/zh-cn/application-dev/reference/arkui-ts/ts-methods-custom-dialog-box.md @@ -1,4 +1,7 @@ -# 自定义弹窗 +# 自定义弹窗 + +>![](../../public_sys-resources/icon-note.gif) **说明：** +>从API Version 7开始支持。后续版本如有新增内容，则采用上角标单独标记该内容的起始版本。 通过CustomDialogController类显示自定义弹窗。 @@ -8,86 +11,85 @@ CustomDialogController\(value:\{builder: CustomDialog, cancel?: \(\) =\> void, a - 参数 - -

参数名

+ - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - @@ -95,31 +97,30 @@ CustomDialogController\(value:\{builder: CustomDialog, cancel?: \(\) =\> void, a - DialogAlignment枚举说明 - -

参数名

参数类型

+

参数类型

必填

+

必填

默认值

+

默认值

参数描述

+

参数描述

builder

+

builder

CustomDialog

+

CustomDialog

是

+

是

-

+

-

自定义弹窗内容构造器。

+

自定义弹窗内容构造器。

cancel

+

cancel

() => void

+

() => void

否

+

否

-

+

-

点击遮障层退出时的回调。

+

点击遮障层退出时的回调。

autoCancel

+

autoCancel

boolean

+

boolean

否

+

否

true

+

true

是否允许点击遮障层退出。

+

是否允许点击遮障层退出。

alignment

+

alignment

DialogAlignment

+

DialogAlignment

否

+

否

DialogAlignment.Default

+

DialogAlignment.Default

弹窗在竖直方向上的对齐方式。

+

弹窗在竖直方向上的对齐方式。

offset

+

offset

{

-

dx: Length | Resource,

-

dy: Length | Resource

-

}

+

{

+

dx: Length | Resource,

+

dy: Length | Resource

+

}

否

+

否

-

+

-

弹窗相对alignment所在位置的偏移量。

+

弹窗相对alignment所在位置的偏移量。

customStyle

+

customStyle

boolean

+

boolean

否

+

否

false

+

false

弹窗容器样式是否自定义。

+

弹窗容器样式是否自定义。

名称

+ - - - - - - - - - diff --git a/zh-cn/application-dev/reference/arkui-ts/ts-methods-image-cache.md b/zh-cn/application-dev/reference/arkui-ts/ts-methods-image-cache.md index f91df6cc9f0d65d386e9fa1dd6c93244277a28bc..be0083ee3d604c515630fd72ffc610647fb5a779 100644 --- a/zh-cn/application-dev/reference/arkui-ts/ts-methods-image-cache.md +++ b/zh-cn/application-dev/reference/arkui-ts/ts-methods-image-cache.md @@ -1,4 +1,7 @@ -# 图片缓存 +# 图片缓存 + +>![](../../public_sys-resources/icon-note.gif) **说明：** +>从 API Version 7 开始支持。后续版本如有新增内容，则采用上角标单独标记该内容的起始版本。 ## 导入模块 @@ -18,24 +21,23 @@ setImageCacheCount\(value: number\): void - 参数 - -

名称

描述

+

描述

Top

+

Top

垂直顶部对齐。

+

垂直顶部对齐。

Center

+

Center

垂直居中对齐。

+

垂直居中对齐。

Bottom

+

Bottom

垂直底部对齐。

+

垂直底部对齐。

Default

+

Default

默认对齐。

+

默认对齐。

参数名

+ - - - - - - - @@ -46,7 +48,6 @@ setImageCacheCount\(value: number\): void ``` // app.ets import app from '@system.app'; - export default { onCreate() { app.setImageCacheCount(100) // 设置解码后图片内存缓存上限为100张 @@ -67,24 +68,23 @@ setImageRawDataCacheSize\(value: number\): void - 参数 - -

参数名

类型

+

类型

必填

+

必填

说明

+

说明

value

+

value

number

+

number

是

+

是

内存中解码后图片的缓存数量。

+

内存中解码后图片的缓存数量。

参数名

+ - - - - - - - @@ -116,24 +116,23 @@ setImageFileCacheSize\(value: number\): void - 参数 - -

参数名

类型

+

类型

必填

+

必填

说明

+

说明

value

+

value

number

+

number

是

+

是

内存中解码前图片数据的缓存大小，单位为字节。

+

内存中解码前图片数据的缓存大小，单位为字节。

参数名

+ - - - - - - - diff --git a/zh-cn/application-dev/reference/arkui-ts/ts-methods-media-query.md b/zh-cn/application-dev/reference/arkui-ts/ts-methods-media-query.md index 9c0a408adefacb210f8e604352c2bf42c860c2f2..ee4ff3ccbdd9195b78b643f064eed1cf062587fd 100644 --- a/zh-cn/application-dev/reference/arkui-ts/ts-methods-media-query.md +++ b/zh-cn/application-dev/reference/arkui-ts/ts-methods-media-query.md @@ -1,4 +1,7 @@ -# 媒体查询 +# 媒体查询 + +>![](../../public_sys-resources/icon-note.gif) **说明：** +>从API Version 7开始支持。后续版本如有新增内容，则采用上角标单独标记该内容的起始版本。 ## 导入模块 @@ -18,24 +21,23 @@ matchMediaSync\(condition: string\): MediaQueryListener - 参数 - -

参数名

类型

+

类型

必填

+

必填

说明

+

说明

value

+

value

number

+

number

是

+

是

图片文件的缓存大小，单位为字节。

+

图片文件的缓存大小，单位为字节。

参数名

+ - - - - - - - @@ -43,16 +45,15 @@ matchMediaSync\(condition: string\): MediaQueryListener - 返回值 - -

参数名

类型

+

类型

必填

+

必填

说明

+

说明

condition

+

condition

string

+

string

是

+

是

媒体事件的匹配条件。

+

媒体事件的匹配条件。条件字符串格式: 参考媒体查询。

类型

+ - - - @@ -71,39 +72,38 @@ matchMediaSync\(condition: string\): MediaQueryListener ### 属性 - -

类型

说明

+

说明

MediaQueryListener

+

MediaQueryListener

媒体事件监听句柄，用于注册和去注册监听回调。

+

媒体事件监听句柄，用于注册和去注册监听回调。

名称

+ - - - - - - - - - - - - - - @@ -117,33 +117,32 @@ on\(type: 'change', callback: Callback\): void - 参数 - -

名称

参数类型

+

参数类型

可读

+

可读

可写

+

可写

说明

+

说明

matches

+

matches

boolean

+

boolean

是

+

是

否

+

否

是否符合匹配条件。

+

是否符合匹配条件。

media

+

media

string

+

string

是

+

是

否

+

否

媒体事件的匹配条件。

+

媒体事件的匹配条件。

参数名

+ - - - - - - - - - - - @@ -162,33 +161,32 @@ off\(type: 'change', callback?: Callback\): void - 参数 - -

参数名

类型

+

类型

必填

+

必填

说明

+

说明

type

+

type

boolean

+

string

是

+

是

必须填写字符串'change'。

+

必须填写字符串'change'。

callback

+

callback

Callback<MediaQueryResult>

+

Callback<MediaQueryResult>

是

+

是

向媒体查询注册的回调。

+

向媒体查询注册的回调

参数名

+ - - - - - - - - - - - @@ -214,39 +212,38 @@ off\(type: 'change', callback?: Callback\): void ### 属性 - -

参数名

类型

+

类型

必填

+

必填

说明

+

说明

type

+

type

boolean

+

boolean

是

+

是

必须填写字符串'change'。

+

必须填写字符串'change'。

callback

+

callback

Callback<MediaQueryResult>

+

Callback<MediaQueryResult>

否

+

否

需要去注册的回调，如果参数缺省则去注册该句柄下所有的回调。

+

需要去注册的回调，如果参数缺省则去注册该句柄下所有的回调。

名称

+ - - - - - - - - - - - - - - diff --git a/zh-cn/application-dev/reference/arkui-ts/ts-motion-path-animation.md b/zh-cn/application-dev/reference/arkui-ts/ts-motion-path-animation.md index af57fa6f86ba2e4bfca68161558c15d3040fc5c8..684c361a9e1c59371c1152cc90cedfd0418560b5 100644 --- a/zh-cn/application-dev/reference/arkui-ts/ts-motion-path-animation.md +++ b/zh-cn/application-dev/reference/arkui-ts/ts-motion-path-animation.md @@ -1,41 +1,43 @@ -# 路径动画 +# 路径动画 + +>![](../../public_sys-resources/icon-note.gif) **说明：** +>从API Version 7开始支持。后续版本如有新增内容，则采用上角标单独标记该内容的起始版本。 设置组件进行位移动画时的运动路径。 ## 属性 - -

名称

参数类型

+

参数类型

可读

+

可读

可写

+

可写

说明

+

说明

matches

+

matches

boolean

+

boolean

是

+

是

否

+

否

是否符合匹配条件。

+

是否符合匹配条件。

media

+

media

string

+

string

是

+

是

否

+

否

媒体事件的匹配条件。

+

媒体事件的匹配条件。

名称

+ - - - - - - - diff --git a/zh-cn/application-dev/reference/arkui-ts/ts-offscreencanvasrenderingcontext2d.md b/zh-cn/application-dev/reference/arkui-ts/ts-offscreencanvasrenderingcontext2d.md new file mode 100644 index 0000000000000000000000000000000000000000..b2815c7ef50d1dc34413c5bbde53915d445659ee --- /dev/null +++ b/zh-cn/application-dev/reference/arkui-ts/ts-offscreencanvasrenderingcontext2d.md @@ -0,0 +1,3872 @@ +# OffscreenCanvasRenderingConxt2D对象 + +>![](../../public_sys-resources/icon-note.gif) **说明：** +>从 API Version 8 开始支持。后续版本如有新增内容，则采用上角标单独标记该内容的起始版本。 + +使用OffscreenCanvasRenderingContext2D在Canvas上进行离屏绘制，绘制对象可以是矩形、文本、图片等。离屏绘制是指将需要绘制的内容先绘制在缓存区，然后将其转换成图片，一次性绘制绘制到canvas上，加快了绘制速度。 + +## 接口 + +OffscreenCanvasRenderingContext2D\(width: number, height: number, setting: RenderingContextSettings\) + +- 参数 + +

名称

参数类型

+

参数类型

默认值

+

默认值

描述

+

描述

motionPath

+

motionPath

{

-

path: string,

-

from?: number,

-

to?: number,

-

rotatable?: boolean

-

}

-
说明：

path中支持通过start和end进行起点和终点的替代，如：

-

'Mstart.x start.y L50 50 Lend.x end.y Z'。

+

{

+

path: string,

+

from?: number,

+

to?: number,

+

rotatable?: boolean

+

}

+
说明：

path中支持通过start和end进行起点和终点的替代，如：

+

'Mstart.x start.y L50 50 Lend.x end.y Z'。

{

-

"",

-

0.0,

-

1.0,

-

false

-

}

+

{

+

"",

+

0.0,

+

1.0,

+

false

+

}

设置组件的运动路径，入参说明如下：

-
  • path：位移动画的运动路径，使用svg路径字符串。
  • from：运动路径的起点，默认为0.0。
  • to：运动路径的终点，默认为1.0。
  • rotatable：是否跟随路径进行旋转。
+

设置组件的运动路径，入参说明如下：

+
  • path：位移动画的运动路径，使用svg路径字符串。
  • from：运动路径的起点，默认为0.0。
  • to：运动路径的终点，默认为1.0。
  • rotatable：是否跟随路径进行旋转。
+ + + + + + + + + + + + + + + + + + + + + + + + + +

参数名

+

参数类型

+

必填

+

默认值

+

参数描述

+

width

+

number

+

是

+

-

+

离屏画布的宽度

+

height

+

number

+

是

+

-

+

离屏画布的高度

+

setting

+

RenderingContextSettings

+

是

+

-

+

见RenderingContextSettings接口描述。

+
+ + +## 属性 + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + +

名称

+

类型

+

默认值

+

描述

+

fillStyle

+

<color> | CanvasGradient | CanvasPattern

+

-

+

指定绘制的填充色。

+
  • 类型为<color>时，表示设置填充区域的颜色。
  • 类型为CanvasGradient时，表示渐变对象，使用 createLinearGradient方法创建。
  • 类型为CanvasPattern时，使用createPattern方法创建。
+

lineWidth

+

number

+

-

+

设置绘制线条的宽度。

+

strokeStyle

+

<color> | CanvasGradient | CanvasPattern

+

-

+

设置描边的颜色。

+
  • 类型为<color>时，表示设置描边使用的颜色。
  • 类型为CanvasGradient时，表示渐变对象，使用createLinearGradient方法创建。
  • 类型为CanvasPattern时，使用createPattern方法创建。
+

lineCap

+

string

+

'butt'

+

指定线端点的样式，可选值为：

+
  • 'butt'：线端点以方形结束。
  • 'round'：线端点以圆形结束。
  • 'square'：线端点以方形结束，该样式下会增加一个长度和线段厚度相同，宽度是线段厚度一半的矩形。
+

lineJoin

+

string

+

'miter'

+

指定线段间相交的交点样式，可选值为：

+
  • 'round'：在线段相连处绘制一个扇形，扇形的圆角半径是线段的宽度。
  • 'bevel'：在线段相连处使用三角形为底填充， 每个部分矩形拐角独立。
  • 'miter'：在相连部分的外边缘处进行延伸，使其相交于一点，形成一个菱形区域，该属性可以通过设置miterLimit属性展现效果。
+

miterLimit

+

number

+

10

+

设置斜接面限制值，该值指定了线条相交处内角和外角的距离。

+

font

+

string

+

'normal normal 14px sans-serif'

+

设置文本绘制中的字体样式。

+

语法：ctx.font='font-size font-family'

+
  • font-size(可选)，指定字号和行高，单位只支持px。
  • font-family(可选)，指定字体系列。
+

语法：ctx.font='font-style font-weight font-size font-family'

+
  • font-style(可选)，用于指定字体样式，支持如下几种样式：'normal', 'italic'。
  • font-weight(可选)，用于指定字体的粗细，支持如下几种类型：'normal', 'bold', 'bolder', 'lighter', 100, 200, 300, 400, 500, 600, 700, 800, 900。
  • font-size(可选)，指定字号和行高，单位只支持px。
  • font-family(可选)，指定字体系列，支持如下几种类型：'sans-serif', 'serif', 'monospace'。
+

textAlign

+

string

+

'left'

+

设置文本绘制中的文本对齐方式，可选值为：

+
  • 'left'：文本左对齐。
  • 'right'：文本右对齐。
  • 'center'：文本居中对齐。
  • 'start'：文本对齐界线开始的地方。
  • 'end'：文本对齐界线结束的地方。
+
说明：

ltr布局模式下start和left一致，rtl布局模式下start和right一致·。

+
+

textBaseline

+

string

+

'alphabetic'

+

设置文本绘制中的水平对齐方式，可选值为：

+
  • 'alphabetic'：文本基线是标准的字母基线。
  • 'top'：文本基线在文本块的顶部。
  • 'hanging'：文本基线是悬挂基线。
  • 'middle'：文本基线在文本块的中间。
  • 'ideographic'：文字基线是表意字基线；如果字符本身超出了alphabetic基线，那么ideograhpic基线位置在字符本身的底部。
  • 'bottom'：文本基线在文本块的底部。 与ideographic基线的区别在于ideographic 基线不需要考虑下行字母。
+

globalAlpha

+

number

+

-

+

设置透明度，0.0为完全透明，1.0为完全不透明。

+

lineDashOffset

+

number

+

0.0

+

设置画布的虚线偏移量，精度为float。

+

globalCompositeOperation

+

string

+

'source-over'

+

设置合成操作的方式。类型字段可选值有'source-over'，'source-atop'，'source-in'，'source-out'，'destination-over'，'destination-atop'，'destination-in'，'destination-out'，'lighter'，'copy'，'xor'。

+

shadowBlur

+

number

+

0.0

+

设置绘制阴影时的模糊级别，值越大越模糊，精度为float。

+

shadowColor

+

<color>

+

-

+

设置绘制阴影时的阴影颜色。

+

shadowOffsetX

+

number

+

-

+

设置绘制阴影时和原有对象的水平偏移值。

+

shadowOffsetY

+

number

+

-

+

设置绘制阴影时和原有对象的垂直偏移值。

+

imageSmoothingEnabled

+

boolean

+

true

+

用于设置绘制图片时是否进行图像平滑度调整，true为启用，false为不启用。

+

imageSmoothingQuality

+

string

+

'low'

+

用于设置图像平滑度，支持如下三种类型：'low', 'medium', 'high'。

+
+ +>![](../../public_sys-resources/icon-note.gif) **说明：** +>类型格式为 'rgb\(255, 255, 255\)'，'rgba\(255, 255, 255, 1.0\)'，'\#FFFFFF'。 + +### fillStyle + +``` +@Entry +@Component +struct FillStyleExample { + private settings: RenderingContextSettings = new RenderingContextSettings(true,true) + private context: CanvasRenderingContext2D = new CanvasRenderingContext2D(this.settings) + private offContext: OffscreenCanvasRenderingContext2D = new OffscreenCanvasRenderingContext2D(600, 600, this.settings) + + build() { + Flex({ direction: FlexDirection.Column, alignItems: ItemAlign.Center, justifyContent: FlexAlign.Center }) { + Canvas(this.context) + .width('100%') + .height('100%') + .backgroundColor('#ffff00') + .onReady(() =>{ + this.offContext.fillStyle = '#0000ff' + this.offContext.fillRect(20, 160, 150, 100) + var image = this.offContext.transferToImageBitmap(); + this.context.transferFromImageBitmap(image); + }) + } + .width('100%') + .height('100%') + } +} +``` + +![](figures/zh-cn_image_0000001237555173.png) + +### lineWidth + +``` +@Entry +@Component +struct LineWidthExample { + private settings: RenderingContextSettings = new RenderingContextSettings(true,true) + private context: CanvasRenderingContext2D = new CanvasRenderingContext2D(this.settings) + private offContext: OffscreenCanvasRenderingContext2D = new OffscreenCanvasRenderingContext2D(600, 600, this.settings) + + build() { + Flex({ direction: FlexDirection.Column, alignItems: ItemAlign.Center, justifyContent: FlexAlign.Center }) { + Canvas(this.context) + .width('100%') + .height('100%') + .backgroundColor('#ffff00') + .onReady(() =>{ + this.offContext.lineWidth = 5 + this.offContext.strokeRect(25, 25, 85, 105) + var image = this.offContext.transferToImageBitmap() + this.context.transferFromImageBitmap(image) + }) + } + .width('100%') + .height('100%') + } +} +``` + +![](figures/zh-cn_image_0000001192755194.png) + +### strokeStyle + +``` +@Entry +@Component +struct StrokeStyleExample { + private settings: RenderingContextSettings = new RenderingContextSettings(true,true) + private context: CanvasRenderingContext2D = new CanvasRenderingContext2D(this.settings) + private offContext: OffscreenCanvasRenderingContext2D = new OffscreenCanvasRenderingContext2D(600, 600, this.settings) + + build() { + Flex({ direction: FlexDirection.Column, alignItems: ItemAlign.Center, justifyContent: FlexAlign.Center }) { + Canvas(this.context) + .width('100%') + .height('100%') + .backgroundColor('#ffff00') + .onReady(() =>{ + this.offContext.lineWidth = 10 + this.offContext.strokeStyle = '#0000ff' + this.offContext.strokeRect(25, 25, 155, 105) + var image = this.offContext.transferToImageBitmap() + this.context.transferFromImageBitmap(image) + }) + } + .width('100%') + .height('100%') + } +} +``` + +![](figures/zh-cn_image_0000001237355135.png) + +### lineCap + +``` +@Entry +@Component +struct LineCapExample { + private settings: RenderingContextSettings = new RenderingContextSettings(true,true) + private context: CanvasRenderingContext2D = new CanvasRenderingContext2D(this.settings) + private offContext: OffscreenCanvasRenderingContext2D = new OffscreenCanvasRenderingContext2D(600, 600, this.settings) + + build() { + Flex({ direction: FlexDirection.Column, alignItems: ItemAlign.Center, justifyContent: FlexAlign.Center }) { + Canvas(this.context) + .width('100%') + .height('100%') + .backgroundColor('#ffff00') + .onReady(() =>{ + this.offContext.lineWidth = 8 + this.offContext.beginPath() + this.offContext.lineCap = 'round' + this.offContext.moveTo(30, 50) + this.offContext.lineTo(220, 50) + this.offContext.stroke() + var image = this.offContext.transferToImageBitmap() + this.context.transferFromImageBitmap(image) + }) + } + .width('100%') + .height('100%') + } +} +``` + +![](figures/zh-cn_image_0000001192595232.png) + +### lineJoin + +``` +@Entry +@Component +struct LineJoinExample { + private settings: RenderingContextSettings = new RenderingContextSettings(true,true) + private context: CanvasRenderingContext2D = new CanvasRenderingContext2D(this.settings) + private offContext: OffscreenCanvasRenderingContext2D = new OffscreenCanvasRenderingContext2D(600, 600, this.settings) + + build() { + Flex({ direction: FlexDirection.Column, alignItems: ItemAlign.Center, justifyContent: FlexAlign.Center }) { + Canvas(this.context) + .width('100%') + .height('100%') + .backgroundColor('#ffff00') + .onReady(() =>{ + this.offContext.beginPath() + this.offContext.lineWidth = 8 + this.offContext.lineJoin = 'miter' + this.offContext.moveTo(30, 30) + this.offContext.lineTo(120, 60) + this.offContext.lineTo(30, 110) + this.offContext.stroke() + var image = this.offContext.transferToImageBitmap() + this.context.transferFromImageBitmap(image) + }) + } + .width('100%') + .height('100%') + } +} +``` + +![](figures/zh-cn_image_0000001237715141.png) + +### miterLimit + +``` +@Entry +@Component +struct MiterLimit { + private settings: RenderingContextSettings = new RenderingContextSettings(true,true) + private context: CanvasRenderingContext2D = new CanvasRenderingContext2D(this.settings) + private offContext: OffscreenCanvasRenderingContext2D = new OffscreenCanvasRenderingContext2D(600, 600, this.settings) + + build() { + Flex({ direction: FlexDirection.Column, alignItems: ItemAlign.Center, justifyContent: FlexAlign.Center }) { + Canvas(this.context) + .width('100%') + .height('100%') + .backgroundColor('#ffff00') + .onReady(() =>{ + this.offContext.lineWidth = 8 + this.offContext.lineJoin = 'miter' + this.offContext.miterLimit = 3 + this.offContext.moveTo(30, 30) + this.offContext.lineTo(60, 35) + this.offContext.lineTo(30, 37) + this.offContext.stroke() + var image = this.offContext.transferToImageBitmap() + this.context.transferFromImageBitmap(image) + }) + } + .width('100%') + .height('100%') + } +} +``` + +![](figures/zh-cn_image_0000001193075178.png) + +### font + +``` +@Entry +@Component +struct Font { + private settings: RenderingContextSettings = new RenderingContextSettings(true,true) + private context: CanvasRenderingContext2D = new CanvasRenderingContext2D(this.settings) + private offContext: OffscreenCanvasRenderingContext2D = new OffscreenCanvasRenderingContext2D(600, 600, this.settings) + + build() { + Flex({ direction: FlexDirection.Column, alignItems: ItemAlign.Center, justifyContent: FlexAlign.Center }) { + Canvas(this.context) + .width('100%') + .height('100%') + .backgroundColor('#ffff00') + .onReady(() =>{ + this.offContext.font = '30px sans-serif' + this.offContext.fillText("Hello World", 20, 60) + var image = this.offContext.transferToImageBitmap() + this.context.transferFromImageBitmap(image) + }) + } + .width('100%') + .height('100%') + } +} +``` + +![](figures/zh-cn_image_0000001193075164.png) + +### textAlign + +``` +@Entry +@Component +struct TextAlign { + private settings: RenderingContextSettings = new RenderingContextSettings(true,true) + private context: CanvasRenderingContext2D = new CanvasRenderingContext2D(this.settings) + private offContext: OffscreenCanvasRenderingContext2D = new OffscreenCanvasRenderingContext2D(600, 600, this.settings) + + build() { + Flex({ direction: FlexDirection.Column, alignItems: ItemAlign.Center, justifyContent: FlexAlign.Center }) { + Canvas(this.context) + .width('100%') + .height('100%') + .backgroundColor('#ffff00') + .onReady(() =>{ + this.offContext.strokeStyle = '#0000ff' + this.offContext.moveTo(140, 10) + this.offContext.lineTo(140, 160) + this.offContext.stroke() + + this.offContext.font = '18px sans-serif' + + this.offContext.textAlign = 'start' + this.offContext.fillText('textAlign=start', 140, 60) + this.offContext.textAlign = 'end' + this.offContext.fillText('textAlign=end', 140, 80) + this.offContext.textAlign = 'left' + this.offContext.fillText('textAlign=left', 140, 100) + this.offContext.textAlign = 'center' + this.offContext.fillText('textAlign=center',140, 120) + this.offContext.textAlign = 'right' + this.offContext.fillText('textAlign=right',140, 140) + var image = this.offContext.transferToImageBitmap() + this.context.transferFromImageBitmap(image) + }) + } + .width('100%') + .height('100%') + } +} +``` + +![](figures/zh-cn_image_0000001192595234.png) + +### textBaseline + +``` +@Entry +@Component +struct TextBaseline { + private settings: RenderingContextSettings = new RenderingContextSettings(true,true) + private context: CanvasRenderingContext2D = new CanvasRenderingContext2D(this.settings) + private offContext: OffscreenCanvasRenderingContext2D = new OffscreenCanvasRenderingContext2D(600, 600, this.settings) + + build() { + Flex({ direction: FlexDirection.Column, alignItems: ItemAlign.Center, justifyContent: FlexAlign.Center }) { + Canvas(this.context) + .width('100%') + .height('100%') + .backgroundColor('#ffff00') + .onReady(() =>{ + this.offContext.strokeStyle = '#0000ff' + this.offContext.moveTo(0, 120) + this.offContext.lineTo(400, 120) + this.offContext.stroke() + + this.offContext.font = '20px sans-serif' + + this.offContext.textBaseline = 'top' + this.offContext.fillText('Top', 10, 120) + this.offContext.textBaseline = 'bottom' + this.offContext.fillText('Bottom', 55, 120) + this.offContext.textBaseline = 'middle' + this.offContext.fillText('Middle', 125, 120) + this.offContext.textBaseline = 'alphabetic' + this.offContext.fillText('Alphabetic', 195, 120) + this.offContext.textBaseline = 'hanging' + this.offContext.fillText('Hanging', 295, 120) + var image = this.offContext.transferToImageBitmap() + this.context.transferFromImageBitmap(image) + }) + } + .width('100%') + .height('100%') + } +} +``` + +![](figures/zh-cn_image_0000001193075180.png) + +### globalAlpha + +``` +@Entry +@Component +struct GlobalAlpha { + private settings: RenderingContextSettings = new RenderingContextSettings(true,true) + private context: CanvasRenderingContext2D = new CanvasRenderingContext2D(this.settings) + private offContext: OffscreenCanvasRenderingContext2D = new OffscreenCanvasRenderingContext2D(600, 600, this.settings) + + build() { + Flex({ direction: FlexDirection.Column, alignItems: ItemAlign.Center, justifyContent: FlexAlign.Center }) { + Canvas(this.context) + .width('100%') + .height('100%') + .backgroundColor('#ffff00') + .onReady(() =>{ + this.offContext.fillStyle = 'rgb(255,0,0)' + this.offContext.fillRect(0, 0, 50, 50) + this.offContext.globalAlpha = 0.4 + this.offContext.fillStyle = 'rgb(0,0,255)' + this.offContext.fillRect(50, 50, 50, 50) + var image = this.offContext.transferToImageBitmap() + this.context.transferFromImageBitmap(image) + }) + } + .width('100%') + .height('100%') + } +} +``` + +![](figures/zh-cn_image_0000001237715165.png) + +### lineDashOffset + +``` +@Entry +@Component +struct LineDashOffset { + private settings: RenderingContextSettings = new RenderingContextSettings(true,true) + private context: CanvasRenderingContext2D = new CanvasRenderingContext2D(this.settings) + private offContext: OffscreenCanvasRenderingContext2D = new OffscreenCanvasRenderingContext2D(600, 600, this.settings) + + build() { + Flex({ direction: FlexDirection.Column, alignItems: ItemAlign.Center, justifyContent: FlexAlign.Center }) { + Canvas(this.context) + .width('100%') + .height('100%') + .backgroundColor('#ffff00') + .onReady(() =>{ + this.offContext.arc(100, 75, 50, 0, 6.28) + this.offContext.setLineDash([10,20]) + this.offContext.stroke(); + var image = this.offContext.transferToImageBitmap() + this.context.transferFromImageBitmap(image) + }) + } + .width('100%') + .height('100%') + } +} +``` + +![](figures/zh-cn_image_0000001237555181.png) + +### globalCompositeOperation + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + +

名称

+

描述

+

source-over

+

在现有绘制内容上显示新绘制内容，属于默认值。

+

source-atop

+

在现有绘制内容顶部显示新绘制内容。

+

source-in

+

在现有绘制内容中显示新绘制内容。

+

source-out

+

在现有绘制内容之外显示新绘制内容。

+

destination-over

+

在新绘制内容上方显示现有绘制内容。

+

destination-atop

+

在新绘制内容顶部显示现有绘制内容。

+

destination-in

+

在新绘制内容中显示现有绘制内容。

+

destination-out

+

在新绘制内容外显示现有绘制内容。

+

lighter

+

显示新绘制内容和现有绘制内容。

+

copy

+

显示新绘制内容而忽略现有绘制内容。

+

xor

+

使用异或操作对新绘制内容与现有绘制内容进行融合。

+
+ +``` +@Entry +@Component +struct GlobalCompositeOperation { + private settings: RenderingContextSettings = new RenderingContextSettings(true,true) + private context: CanvasRenderingContext2D = new CanvasRenderingContext2D(this.settings) + private offContext: OffscreenCanvasRenderingContext2D = new OffscreenCanvasRenderingContext2D(600, 600, this.settings) + + build() { + Flex({ direction: FlexDirection.Column, alignItems: ItemAlign.Center, justifyContent: FlexAlign.Center }) { + Canvas(this.context) + .width('100%') + .height('100%') + .backgroundColor('#ffff00') + .onReady(() =>{ + this.offContext.fillStyle = 'rgb(255,0,0)' + this.offContext.fillRect(20, 20, 50, 50) + this.offContext.globalCompositeOperation = 'source-over' + this.offContext.fillStyle = 'rgb(0,0,255)' + this.offContext.fillRect(50, 50, 50, 50) + this.offContext.fillStyle = 'rgb(255,0,0)' + this.offContext.fillRect(120, 20, 50, 50) + this.offContext.globalCompositeOperation = 'destination-over' + this.offContext.fillStyle = 'rgb(0,0,255)' + this.offContext.fillRect(150, 50, 50, 50) + var image = this.offContext.transferToImageBitmap() + this.context.transferFromImageBitmap(image) + }) + } + .width('100%') + .height('100%') + } +} +``` + +![](figures/zh-cn_image_0000001237355137.png) + +### shadowBlur + +``` +@Entry +@Component +struct ShadowBlur { + private settings: RenderingContextSettings = new RenderingContextSettings(true,true) + private context: CanvasRenderingContext2D = new CanvasRenderingContext2D(this.settings) + private offContext: OffscreenCanvasRenderingContext2D = new OffscreenCanvasRenderingContext2D(600, 600, this.settings) + + build() { + Flex({ direction: FlexDirection.Column, alignItems: ItemAlign.Center, justifyContent: FlexAlign.Center }) { + Canvas(this.context) + .width('100%') + .height('100%') + .backgroundColor('#ffff00') + .onReady(() =>{ + this.offContext.shadowBlur = 30 + this.offContext.shadowColor = 'rgb(0,0,0)' + this.offContext.fillStyle = 'rgb(255,0,0)' + this.offContext.fillRect(20, 20, 100, 80) + var image = this.offContext.transferToImageBitmap() + this.context.transferFromImageBitmap(image) + }) + } + .width('100%') + .height('100%') + } +} +``` + +![](figures/zh-cn_image_0000001192755182.png) + +### shadowColor + +``` +@Entry +@Component +struct ShadowColor { + private settings: RenderingContextSettings = new RenderingContextSettings(true,true) + private context: CanvasRenderingContext2D = new CanvasRenderingContext2D(this.settings) + private offContext: OffscreenCanvasRenderingContext2D = new OffscreenCanvasRenderingContext2D(600, 600, this.settings) + + build() { + Flex({ direction: FlexDirection.Column, alignItems: ItemAlign.Center, justifyContent: FlexAlign.Center }) { + Canvas(this.context) + .width('100%') + .height('100%') + .backgroundColor('#ffff00') + .onReady(() =>{ + this.offContext.shadowBlur = 30 + this.offContext.shadowColor = 'rgb(0,0,255)' + this.offContext.fillStyle = 'rgb(255,0,0)' + this.offContext.fillRect(30, 30, 100, 100) + var image = this.offContext.transferToImageBitmap +() + this.context.transferFromImageBitmap(image) + }) + } + .width('100%') + .height('100%') + } +} +``` + +![](figures/zh-cn_image_0000001237555155.png) + +### shadowOffsetX + +``` +@Entry +@Component +struct ShadowOffsetX { + private settings: RenderingContextSettings = new RenderingContextSettings(true,true) + private context: CanvasRenderingContext2D = new CanvasRenderingContext2D(this.settings) + private offContext: OffscreenCanvasRenderingContext2D = new OffscreenCanvasRenderingContext2D(600, 600, this.settings) + + build() { + Flex({ direction: FlexDirection.Column, alignItems: ItemAlign.Center, justifyContent: FlexAlign.Center }) { + Canvas(this.context) + .width('100%') + .height('100%') + .backgroundColor('#ffff00') + .onReady(() =>{ + this.offContext.shadowBlur = 10 + this.offContext.shadowOffsetX = 20 + this.offContext.shadowColor = 'rgb(0,0,0)' + this.offContext.fillStyle = 'rgb(255,0,0)' + this.offContext.fillRect(20, 20, 100, 80) + var image = this.offContext.transferToImageBitmap() + this.context.transferFromImageBitmap(image) + }) + } + .width('100%') + .height('100%') + } +} +``` + +![](figures/zh-cn_image_0000001193075168.png) + +### shadowOffsetY + +``` +@Entry +@Component +struct ShadowOffsetY { + private settings: RenderingContextSettings = new RenderingContextSettings(true,true) + private context: CanvasRenderingContext2D = new CanvasRenderingContext2D(this.settings) + private offContext: OffscreenCanvasRenderingContext2D = new OffscreenCanvasRenderingContext2D(600, 600, this.settings) + + build() { + Flex({ direction: FlexDirection.Column, alignItems: ItemAlign.Center, justifyContent: FlexAlign.Center }) { + Canvas(this.context) + .width('100%') + .height('100%') + .backgroundColor('#ffff00') + .onReady(() =>{ + this.offContext.shadowBlur = 10 + this.offContext.shadowOffsetY = 20 + this.offContext.shadowColor = 'rgb(0,0,0)' + this.offContext.fillStyle = 'rgb(255,0,0)' + this.offContext.fillRect(30, 30, 100, 100) + var image = this.offContext.transferToImageBitmap() + this.context.transferFromImageBitmap(image) + }) + } + .width('100%') + .height('100%') + } +} +``` + +![](figures/zh-cn_image_0000001237475139.png) + +### imageSmoothingEnabled + +``` +@Entry +@Component +struct ImageSmoothingEnabled { + private settings: RenderingContextSettings = new RenderingContextSettings(true,true) + private context: CanvasRenderingContext2D = new CanvasRenderingContext2D(this.settings) + private img:ImageBitmap = new ImageBitmap("common/images/icon.jpg") + private offContext: OffscreenCanvasRenderingContext2D = new OffscreenCanvasRenderingContext2D(600, 600, this.settings) + + build() { + Flex({ direction: FlexDirection.Column, alignItems: ItemAlign.Center, justifyContent: FlexAlign.Center }) { + Canvas(this.context) + .width('100%') + .height('100%') + .backgroundColor('#ffff00') + .onReady(() =>{ + this.offContext.imageSmoothingEnabled = false + this.offContext.drawImage( this.img,0,0,400,200) + var image = this.offContext.transferToImageBitmap() + this.context.transferFromImageBitmap(image) + }) + } + .width('100%') + .height('100%') + } +} +``` + +![](figures/zh-cn_image_0000001237355121.png) + +## 方法 + +### fillRect + +fillRect\(x: number, y: number, w: number, h: number\): void + +填充一个矩形。 + +- 参数 + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + +

参数

+

类型

+

必填

+

默认值

+

说明

+

x

+

number

+

是

+

0

+

指定矩形左上角点的x坐标。

+

y

+

number

+

是

+

0

+

指定矩形左上角点的y坐标。

+

width

+

number

+

是

+

0

+

指定矩形的宽度。

+

height

+

number

+

是

+

0

+

指定矩形的高度。

+
+ +- 示例 + + ``` + @Entry + @Component + struct FillRect { + private settings: RenderingContextSettings = new RenderingContextSettings(true,true) + private context: CanvasRenderingContext2D = new CanvasRenderingContext2D(this.settings) + private offContext: OffscreenCanvasRenderingContext2D = new OffscreenCanvasRenderingContext2D(600, 600, this.settings) + + build() { + Flex({ direction: FlexDirection.Column, alignItems: ItemAlign.Center, justifyContent: FlexAlign.Center }) { + Canvas(this.context) + .width('100%') + .height('100%') + .backgroundColor('#ffff00') + .onReady(() =>{ + this.offContext.fillRect(0,30,100,100) + var image = this.offContext.transferToImageBitmap() + this.context.transferFromImageBitmap(image) + }) + } + .width('100%') + .height('100%') + } + } + ``` + + ![](figures/zh-cn_image_0000001237475123.png) + + +### strokeRect + +strokeRect\(x: number, y: number, w: number, h: number\): void + +绘制具有边框的矩形，矩形内部不填充。 + +- 参数 + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + +

参数

+

类型

+

必填

+

默认值

+

说明

+

x

+

number

+

是

+

0

+

指定矩形的左上角x坐标。

+

y

+

number

+

是

+

0

+

指定矩形的左上角y坐标。

+

width

+

number

+

是

+

0

+

指定矩形的宽度。

+

height

+

number

+

是

+

0

+

指定矩形的高度。

+
+ + +- 示例 + + ``` + @Entry + @Component + struct StrokeRect { + private settings: RenderingContextSettings = new RenderingContextSettings(true,true) + private context: CanvasRenderingContext2D = new CanvasRenderingContext2D(this.settings) + private offContext: OffscreenCanvasRenderingContext2D = new OffscreenCanvasRenderingContext2D(600, 600, this.settings) + build() { + Flex({ direction: FlexDirection.Column, alignItems: ItemAlign.Center, justifyContent: FlexAlign.Center }) { + Canvas(this.context) + .width('100%') + .height('100%') + .backgroundColor('#ffff00') + .onReady(() =>{ + this.offContext.strokeRect(30, 30, 200, 150) + var image = this.offContext.transferToImageBitmap() + this.context.transferFromImageBitmap(image) + }) + } + .width('100%') + .height('100%') + } + } + ``` + + ![](figures/zh-cn_image_0000001192755180.png) + + +### clearRect + +clearRect\(x: number, y: number, w: number, h: number\): void + +删除指定区域内的绘制内容。 + +- 参数 + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + +

参数

+

类型

+

必填

+

默认值

+

描述

+

x

+

number

+

是

+

0

+

指定矩形上的左上角x坐标。

+

y

+

number

+

是

+

0

+

指定矩形上的左上角y坐标。

+

width

+

number

+

是

+

0

+

指定矩形的宽度。

+

height

+

number

+

是

+

0

+

指定矩形的高度。

+
+ + +- 示例 + + ``` + @Entry + @Component + struct ClearRect { + private settings: RenderingContextSettings = new RenderingContextSettings(true,true) + private context: CanvasRenderingContext2D = new CanvasRenderingContext2D(this.settings) + private offContext: OffscreenCanvasRenderingContext2D = new OffscreenCanvasRenderingContext2D(600, 600, this.settings) + build() { + Flex({ direction: FlexDirection.Column, alignItems: ItemAlign.Center, justifyContent: FlexAlign.Center }) { + Canvas(this.context) + .width('100%') + .height('100%') + .backgroundColor('#ffff00') + .onReady(() =>{ + this.offContext.fillStyle = 'rgb(0,0,255)' + this.offContext.fillRect(0,0,500,500) + this.offContext.clearRect(20,20,150,100) + var image = this.offContext.transferToImageBitmap() + this.context.transferFromImageBitmap(image) + }) + } + .width('100%') + .height('100%') + } + } + ``` + + ![](figures/11111-5.png) + + +### fillText + +fillText\(text: string, x: number, y: number\): void + +绘制填充类文本。 + +- 参数 + + + + + + + + + + + + + + + + + + + + + + + + + + + +

参数

+

类型

+

必填

+

默认值

+

说明

+

text

+

string

+

是

+

“”

+

需要绘制的文本内容。

+

x

+

number

+

是

+

0

+

需要绘制的文本的左下角x坐标。

+

y

+

number

+

是

+

0

+

需要绘制的文本的左下角y坐标。

+
+ + +- 示例 + + ``` + @Entry + @Component + struct FillText { + private settings: RenderingContextSettings = new RenderingContextSettings(true,true) + private context: CanvasRenderingContext2D = new CanvasRenderingContext2D(this.settings) + private offContext: OffscreenCanvasRenderingContext2D = new OffscreenCanvasRenderingContext2D(600, 600, this.settings) + build() { + Flex({ direction: FlexDirection.Column, alignItems: ItemAlign.Center, justifyContent: FlexAlign.Center }) { + Canvas(this.context) + .width('100%') + .height('100%') + .backgroundColor('#ffff00') + .onReady(() =>{ + this.offContext.font = '30px sans-serif' + this.offContext.fillText("Hello World!", 20, 100) + var image = this.offContext.transferToImageBitmap() + this.context.transferFromImageBitmap(image) + }) + } + .width('100%') + .height('100%') + } + } + ``` + + ![](figures/zh-cn_image_0000001237555165.png) + + +### strokeText + +strokeText\(text: string, x: number, y: number\): void + +绘制描边类文本。 + +- 参数 + + + + + + + + + + + + + + + + + + + + + + + + + + + +

参数

+

类型

+

必填

+

默认值

+

描述

+

text

+

string

+

是

+

“”

+

需要绘制的文本内容。

+

x

+

number

+

是

+

0

+

需要绘制的文本的左下角x坐标。

+

y

+

number

+

是

+

0

+

需要绘制的文本的左下角y坐标。

+
+ + +- 示例 + + ``` + @Entry + @Component + struct StrokeText { + private settings: RenderingContextSettings = new RenderingContextSettings(true,true) + private context: CanvasRenderingContext2D = new CanvasRenderingContext2D(this.settings) + private offContext: OffscreenCanvasRenderingContext2D = new OffscreenCanvasRenderingContext2D(600, 600, this.settings) + build() { + Flex({ direction: FlexDirection.Column, alignItems: ItemAlign.Center, justifyContent: FlexAlign.Center }) { + Canvas(this.context) + .width('100%') + .height('100%') + .backgroundColor('#ffff00') + .onReady(() =>{ + this.offContext.font = '55px sans-serif' + this.offContext.strokeText("Hello World!", 20, 60) + var image = this.offContext.transferToImageBitmap() + this.context.transferFromImageBitmap(image) + }) + } + .width('100%') + .height('100%') + } + } + ``` + + ![](figures/zh-cn_image_0000001237715149.png) + + +### measureText + +measureText\(text: string\): TextMetrics + +该方法返回一个文本测算的对象，通过该对象可以获取指定文本的宽度值。 + +- 参数 + + + + + + + + + + + + + + + +

参数

+

类型

+

必填

+

默认值

+

说明

+

text

+

string

+

是

+

""

+

需要进行测量的文本。

+
+ +- 返回值 + + + + + + + + + +

类型

+

说明

+

TextMetrics

+

文本的尺寸信息

+
+ +- TextMetrics类型描述 + + + + + + + + + + + +

属性

+

类型

+

描述

+

width

+

number

+

字符串的宽度。

+
+ + +- 示例 + + ``` + @Entry + @Component + struct MeasureText { + private settings: RenderingContextSettings = new RenderingContextSettings(true,true) + private context: CanvasRenderingContext2D = new CanvasRenderingContext2D(this.settings) + private offContext: OffscreenCanvasRenderingContext2D = new OffscreenCanvasRenderingContext2D(600, 600, this.settings) + build() { + Flex({ direction: FlexDirection.Column, alignItems: ItemAlign.Center, justifyContent: FlexAlign.Center }) { + Canvas(this.context) + .width('100%') + .height('100%') + .backgroundColor('#ffff00') + .onReady(() =>{ + this.offContext.font = '50px sans-serif' + this.offContext.fillText("Hello World!", 20, 100) + this.offContext.fillText("width:" + this.context.measureText("Hello World!").width, 20, 200) + var image = this.offContext.transferToImageBitmap() + this.context.transferFromImageBitmap(image) + }) + } + .width('100%') + .height('100%') + } + } + ``` + + ![](figures/zh-cn_image_0000001193075172.png) + + +### stroke + +stroke\(path?: Path2D\): void + +进行边框绘制操作。 + +- 参数 + + + + + + + + + + + + + + + +

参数

+

类型

+

必填

+

默认值

+

描述

+

path

+

Path2D

+

否

+

null

+

需要绘制的Path2D。

+
+ + +- 示例 + + ``` + @Entry + @Component + struct Stroke { + private settings: RenderingContextSettings = new RenderingContextSettings(true,true) + private context: CanvasRenderingContext2D = new CanvasRenderingContext2D(this.settings) + private offContext: OffscreenCanvasRenderingContext2D = new OffscreenRenderingContext(600, 600, this.settings) + build() { + Flex({ direction: FlexDirection.Column, alignItems: ItemAlign.Center, justifyContent: FlexAlign.Center }) { + Canvas(this.context) + .width('100%') + .height('100%') + .backgroundColor('#ffff00') + .onReady(() =>{ + this.offContext.moveTo(25, 25) + this.offContext.lineTo(25, 105) + this.offContext.strokeStyle = 'rgb(0,0,255)' + this.offContext.stroke() + var image = this.offContext.transferToImageBitmap() + this.context.transferFromImageBitmap(image) + }) + } + .width('100%') + .height('100%') + } + } + ``` + + ![](figures/zh-cn_image_0000001192595220.png) + + +### beginPath + +beginPath\(\): void + +创建一个新的绘制路径。 + +- 示例 + + ``` + @Entry + @Component + struct BeginPath { + private settings: RenderingContextSettings = new RenderingContextSettings(true,true) + private context: CanvasRenderingContext2D = new CanvasRenderingContext2D(this.settings) + private offContext: OffscreenCanvasRenderingContext2D = new OffscreenCanvasRenderingContext2D(600, 600, this.settings) + build() { + Flex({ direction: FlexDirection.Column, alignItems: ItemAlign.Center, justifyContent: FlexAlign.Center }) { + Canvas(this.context) + .width('100%') + .height('100%') + .backgroundColor('#ffff00') + .onReady(() =>{ + this.offContext.beginPath() + this.offContext.lineWidth = 6 + this.offContext.strokeStyle = '#0000ff' + this.offContext.moveTo(15, 80) + this.offContext.lineTo(280, 160) + this.offContext.stroke() + var image = this.offContext.transferToImageBitmap() + this.context.transferFromImageBitmap(image) + }) + } + .width('100%') + .height('100%') + } + } + ``` + + ![](figures/zh-cn_image_0000001237555163.png) + + +### moveTo + +moveTo\(x: number, y: number\): void + +路径从当前点移动到指定点。 + +- 参数 + + + + + + + + + + + + + + + + + + + + + +

参数

+

类型

+

必填

+

默认值

+

说明

+

x

+

number

+

是

+

0

+

指定位置的x坐标。

+

y

+

number

+

是

+

0

+

指定位置的y坐标。

+
+ + +- 示例 + + ``` + @Entry + @Component + struct MoveTo { + private settings: RenderingContextSettings = new RenderingContextSettings(true,true) + private context: CanvasRenderingContext2D = new CanvasRenderingContext2D(this.settings) + private offContext: OffscreenCanvasRenderingContext2D = new OffscreenCanvasRenderingContext2D(600, 600, this.settings) + build() { + Flex({ direction: FlexDirection.Column, alignItems: ItemAlign.Center, justifyContent: FlexAlign.Center }) { + Canvas(this.context) + .width('100%') + .height('100%') + .backgroundColor('#ffff00') + .onReady(() =>{ + this.offContext.beginPath() + this.offContext.moveTo(10, 10) + this.offContext.lineTo(280, 160) + this.offContext.stroke() + var image = this.offContext.transferToImageBitmap() + this.context.transferFromImageBitmap(image) + }) + } + .width('100%') + .height('100%') + } + } + ``` + + ![](figures/zh-cn_image_0000001192595228.png) + + +### lineTo + +lineTo\(x: number, y: number\): void + +从当前点到指定点进行路径连接。 + +- 参数 + + + + + + + + + + + + + + + + + + + + + +

参数

+

类型

+

必填

+

默认值

+

描述

+

x

+

number

+

是

+

0

+

指定位置的x坐标。

+

y

+

number

+

是

+

0

+

指定位置的y坐标。

+
+ + +- 示例 + + ``` + @Entry + @Component + struct LineTo { + private settings: RenderingContextSettings = new RenderingContextSettings(true,true) + private context: CanvasRenderingContext2D = new CanvasRenderingContext2D(this.settings) + private offContext: OffscreenCanvasRenderingContext2D = new OffscreenCanvasRenderingContext2D(600, 600, this.settings) + build() { + Flex({ direction: FlexDirection.Column, alignItems: ItemAlign.Center, justifyContent: FlexAlign.Center }) { + Canvas(this.context) + .width('100%') + .height('100%') + .backgroundColor('#ffff00') + .onReady(() =>{ + this.offContext.beginPath() + this.offContext.moveTo(10, 10) + this.offContext.lineTo(280, 160) + this.offContext.stroke() + var image = this.offContext.transferToImageBitmap() + this.context.transferFromImageBitmap(image) + }) + } + .width('100%') + .height('100%') + } + } + ``` + + ![](figures/zh-cn_image_0000001237715151.png) + + +### closePath + +closePath\(\): void + +结束当前路径形成一个封闭路径。 + +- 示例 + + ``` + @Entry + @Component + struct ClosePath { + private settings: RenderingContextSettings = new RenderingContextSettings(true,true) + private context: CanvasRenderingContext2D = new CanvasRenderingContext2D(this.settings) + private offContext: OffscreenCanvasRenderingContext2D = new OffscreenCanvasRenderingContext2D(600, 600, this.settings) + build() { + Flex({ direction: FlexDirection.Column, alignItems: ItemAlign.Center, justifyContent: FlexAlign.Center }) { + Canvas(this.context) + .width('100%') + .height('100%') + .backgroundColor('#ffff00') + .onReady(() =>{ + this.offContext.beginPath() + this.offContext.moveTo(30, 30) + this.offContext.lineTo(110, 30) + this.offContext.lineTo(70, 90) + this.offContext.closePath() + this.offContext.stroke() + var image = this.offContext.transferToImageBitmap() + this.context.transferFromImageBitmap(image) + }) + } + .width('100%') + .height('100%') + } + } + ``` + + ![](figures/zh-cn_image_0000001192595224.png) + + +### createPattern + +createPattern\(image: ImageBitmap, repetition: string\): CanvasPattern + +通过指定图像和重复方式创建图片填充的模板。 + +- 参数 + + + + + + + + + + + + + + + + + + + + + +

参数

+

类型

+

必填

+

默认值

+

描述

+

image

+

ImageBitmap

+

是

+

null

+

图源对象，具体参考 ImageBitmap对象。

+

repetition

+

string

+

是

+

“”

+

设置图像重复的方式，取值为：'repeat'、'repeat-x'、 'repeat-y'、'no-repeat'。

+
+ +- 示例 + + ``` + @Entry + @Component + struct CreatePattern { + private settings: RenderingContextSettings = new RenderingContextSettings(true,true) + private context: CanvasRenderingContext2D = new CanvasRenderingContext2D(this.settings) + private img:ImageBitmap = new ImageBitmap("common/images/icon.jpg") + private offContext: OffscreenCanvasRenderingContext2D = new OffscreenCanvasRenderingContext2D(600, 600, this.settings) + build() { + Flex({ direction: FlexDirection.Column, alignItems: ItemAlign.Center, justifyContent: FlexAlign.Center }) { + Canvas(this.context) + .width('100%') + .height('100%') + .backgroundColor('#ffff00') + .onReady(() =>{ + var pattern = this.offContext.createPattern(this.img, 'repeat') + this.offContext.fillStyle = pattern + this.offContext.fillRect(0, 0, 200, 200) + var image = this.offContext.transferToImageBitmap() + this.context.transferFromImageBitmap(image) + }) + } + .width('100%') + .height('100%') + } + } + ``` + + ![](figures/zh-cn_image_0000001237475133.png) + + +### bezierCurveTo + +bezierCurveTo\(cp1x: number, cp1y: number, cp2x: number, cp2y: number, x: number, y: number\): void + +创建三次贝赛尔曲线的路径。 + +- 参数 + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + +

参数

+

类型

+

必填

+

默认值

+

描述

+

cp1x

+

number

+

是

+

0

+

第一个贝塞尔参数的x坐标值。

+

cp1y

+

number

+

是

+

0

+

第一个贝塞尔参数的y坐标值。

+

cp2x

+

number

+

是

+

0

+

第二个贝塞尔参数的x坐标值。

+

cp2y

+

number

+

是

+

0

+

第二个贝塞尔参数的y坐标值。

+

x

+

number

+

是

+

0

+

路径结束时的x坐标值。

+

y

+

number

+

是

+

0

+

路径结束时的y坐标值。

+
+ + +- 示例 + + ``` + @Entry + @Component + struct BezierCurveTo { + private settings: RenderingContextSettings = new RenderingContextSettings(true,true) + private context: CanvasRenderingContext2D = new CanvasRenderingContext2D(this.settings) + private offContext: OffscreenCanvasRenderingContext2D = new OffscreenCanvasRenderingContext2D(600, 600, this.settings) + build() { + Flex({ direction: FlexDirection.Column, alignItems: ItemAlign.Center, justifyContent: FlexAlign.Center }) { + Canvas(this.context) + .width('100%') + .height('100%') + .backgroundColor('#ffff00') + .onReady(() =>{ + this.offContext.beginPath() + this.offContext.moveTo(10, 10) + this.offContext.bezierCurveTo(20, 100, 200, 100, 200, 20) + this.offContext.stroke() + var image = this.offContext.transferToImageBitmap() + this.context.transferFromImageBitmap(image) + }) + } + .width('100%') + .height('100%') + } + } + ``` + + ![](figures/zh-cn_image_0000001237715153.png) + + +### quadraticCurveTo + +quadraticCurveTo\(cpx: number, cpy: number, x: number, y: number\): void + +创建二次贝赛尔曲线的路径。 + +- 参数 + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + +

参数

+

类型

+

必填

+

默认值

+

描述

+

cpx

+

number

+

是

+

0

+

贝塞尔参数的x坐标值。

+

cpy

+

number

+

是

+

0

+

贝塞尔参数的y坐标值。

+

x

+

number

+

是

+

0

+

路径结束时的x坐标值。

+

y

+

number

+

是

+

0

+

路径结束时的y坐标值。

+
+ + +- 示例 + + ``` + @Entry + @Component + struct QuadraticCurveTo { + private settings: RenderingContextSettings = new RenderingContextSettings(true,true) + private context: CanvasRenderingContext2D = new CanvasRenderingContext2D(this.settings) + private offContext: OffscreenCanvasRenderingContext2D = new OffscreenCanvasRenderingContext2D(600, 600, this.settings) + build() { + Flex({ direction: FlexDirection.Column, alignItems: ItemAlign.Center, justifyContent: FlexAlign.Center }) { + Canvas(this.context) + .width('100%') + .height('100%') + .backgroundColor('#ffff00') + .onReady(() =>{ + this.offContext.beginPath(); + this.offContext.moveTo(20, 20); + this.offContext.quadraticCurveTo(100, 100, 200, 20); + this.offContext.stroke(); + var image = this.offContext.transferToImageBitmap() + this.context.transferFromImageBitmap(image) + }) + } + .width('100%') + .height('100%') + } + } + ``` + + ![](figures/zh-cn_image_0000001192915184.png) + + +### arc + +arc\(x: number, y: number, radius: number, startAngle: number, endAngle: number, anticlockwise?: boolean\): void + +绘制弧线路径。 + +- 参数 + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + +

参数

+

类型

+

必填

+

默认值

+

描述

+

x

+

number

+

是

+

0

+

弧线圆心的x坐标值。

+

y

+

number

+

是

+

0

+

弧线圆心的y坐标值。

+

radius

+

number

+

是

+

0

+

弧线的圆半径。

+

startAngle

+

number

+

是

+

0

+

弧线的起始弧度。

+

endAngle

+

number

+

是

+

0

+

弧线的终止弧度。

+

anticlockwise

+

boolean

+

否

+

false

+

是否逆时针绘制圆弧。

+
+ +- 示例 + + ``` + @Entry + @Component + struct Arc { + private settings: RenderingContextSettings = new RenderingContextSettings(true,true) + private context: CanvasRenderingContext2D = new CanvasRenderingContext2D(this.settings) + private offContext: OffscreenCanvasRenderingContext2D = new OffscreenCanvasRenderingContext2D(600, 600, this.settings) + build() { + Flex({ direction: FlexDirection.Column, alignItems: ItemAlign.Center, justifyContent: FlexAlign.Center }) { + Canvas(this.context) + .width('100%') + .height('100%') + .backgroundColor('#ffff00') + .onReady(() =>{ + this.offContext.beginPath() + this.offContext.arc(100, 75, 50, 0, 6.28) + this.offContext.stroke() + var image = this.offContext.transferToImageBitmap() + this.context.transferFromImageBitmap(image) + }) + } + .width('100%') + .height('100%') + } + } + ``` + + ![](figures/zh-cn_image_0000001192595226.png) + + +### arcTo + +arcTo\(x1: number, y1: number, x2: number, y2: number, radius: number\): void + +依据圆弧经过的点和圆弧半径创建圆弧路径。 + +- 参数 + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + +

参数

+

类型

+

必填

+

默认值

+

描述

+

x1

+

number

+

是

+

0

+

圆弧经过的第一个点的x坐标值。

+

y1

+

number

+

是

+

0

+

圆弧经过的第一个点的y坐标值。

+

x2

+

number

+

是

+

0

+

圆弧经过的第二个点的x坐标值。

+

y2

+

number

+

是

+

0

+

圆弧经过的第二个点的y坐标值。

+

radius

+

number

+

是

+

0

+

圆弧的圆半径值。

+
+ + +- 示例 + + ``` + @Entry + @Component + struct ArcTo { + private settings: RenderingContextSettings = new RenderingContextSettings(true,true) + private context: CanvasRenderingContext2D = new CanvasRenderingContext2D(this.settings) + private offContext: OffscreenCanvasRenderingContext2D = new OffscreenCanvasRenderingContext2D(600, 600, this.settings) + build() { + Flex({ direction: FlexDirection.Column, alignItems: ItemAlign.Center, justifyContent: FlexAlign.Center }) { + Canvas(this.context) + .width('100%') + .height('100%') + .backgroundColor('#ffff00') + .onReady(() =>{ + this.offContext.moveTo(100, 20); + this.offContext.arcTo(150, 20, 150, 70, 50); + this.offContext.stroke(); + var image = this.offContext.transferToImageBitmap() + this.context.transferFromImageBitmap(image) + }) + } + .width('100%') + .height('100%') + } + } + ``` + + ![](figures/zh-cn_image_0000001237555167.png) + + +### ellipse + +ellipse\(x: number, y: number, radiusX: number, radiusY: number, rotation: number, startAngle: number, endAngle: number, anticlockwise?: boolean\): void + +在规定的矩形区域绘制一个椭圆。 + +- 参数 + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + +

参数

+

类型

+

必填

+

默认值

+

说明

+

x

+

number

+

是

+

0

+

椭圆圆心的x轴坐标。

+

y

+

number

+

是

+

0

+

椭圆圆心的y轴坐标。

+

radiusX

+

number

+

是

+

0

+

椭圆x轴的半径长度。

+

radiusY

+

number

+

是

+

0

+

椭圆y轴的半径长度。

+

rotation

+

number

+

是

+

0

+

椭圆的旋转角度，单位为弧度。

+

startAngle

+

number

+

是

+

0

+

椭圆绘制的起始点角度，以弧度表示。

+

endAngle

+

number

+

是

+

0

+

椭圆绘制的结束点角度，以弧度表示。

+

anticlockwise

+

boolean

+

否

+

false

+

是否以逆时针方向绘制椭圆，0为顺时针，1为逆时针。(可选参数，默认为0)

+
+ + +- 示例 + + ``` + @Entry + @Component + struct Ellipse { + private settings: RenderingContextSettings = new RenderingContextSettings(true,true) + private context: CanvasRenderingContext2D = new CanvasRenderingContext2D(this.settings) + private offContext: OffscreenCanvasRenderingContext2D = new OffscreenCanvasRenderingContext2D(600, 600, this.settings) + build() { + Flex({ direction: FlexDirection.Column, alignItems: ItemAlign.Center, justifyContent: FlexAlign.Center }) { + Canvas(this.context) + .width('100%') + .height('100%') + .backgroundColor('#ffff00') + .onReady(() =>{ + this.offContext.beginPath() + this.offContext.ellipse(200, 200, 50, 100, Math.PI * 0.25, Math.PI * 0.5, Math.PI, true) + this.offContext.stroke() + var image = this.offContext.transferToImageBitmap() + this.context.transferFromImageBitmap(image) + }) + } + .width('100%') + .height('100%') + } + } + ``` + + ![](figures/zh-cn_image_0000001237355131.png) + + +### rect + +rect\(x: number, y: number, width: number, height: number\): void + +创建矩形路径。 + +- 参数 + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + +

参数

+

类型

+

必填

+

默认值

+

描述

+

x

+

number

+

是

+

0

+

指定矩形的左上角x坐标值。

+

y

+

number

+

是

+

0

+

指定矩形的左上角y坐标值。

+

width

+

number

+

是

+

0

+

指定矩形的宽度。

+

height

+

number

+

是

+

0

+

指定矩形的高度。

+
+ + +- 示例 + + ``` + @Entry + @Component + struct Rect { + private settings: RenderingContextSettings = new RenderingContextSettings(true,true) + private context: CanvasRenderingContext2D = new CanvasRenderingContext2D(this.settings) + private offContext: OffscreenCanvasRenderingContext2D = new OffscreenCanvasRenderingContext2D(600, 600, this.settings) + build() { + Flex({ direction: FlexDirection.Column, alignItems: ItemAlign.Center, justifyContent: FlexAlign.Center }) { + Canvas(this.context) + .width('100%') + .height('100%') + .backgroundColor('#ffff00') + .onReady(() =>{ + this.offContext.rect(20, 20, 100, 100) // Create a 100*100 rectangle at (20, 20) + this.offContext.stroke() + var image = this.offContext.transferToImageBitmap() + this.context.transferFromImageBitmap(image) + }) + } + .width('100%') + .height('100%') + } + } + ``` + + ![](figures/zh-cn_image_0000001237715155.png) + + +### fill + +fill\(\): void + +对封闭路径进行填充。 + +- 示例 + + ``` + @Entry + @Component + struct Fill { + private settings: RenderingContextSettings = new RenderingContextSettings(true,true) + private context: CanvasRenderingContext2D = new CanvasRenderingContext2D(this.settings) + private offContext: OffscreenCanvasRenderingContext2D = new OffscreenCanvasRenderingContext2D(600, 600, this.settings) + build() { + Flex({ direction: FlexDirection.Column, alignItems: ItemAlign.Center, justifyContent: FlexAlign.Center }) { + Canvas(this.context) + .width('100%') + .height('100%') + .backgroundColor('#ffff00') + .onReady(() =>{ + this.offContext.rect(20, 20, 100, 100) // Create a 100*100 rectangle at (20, 20) + this.offContext.fill() + var image = this.offContext.transferToImageBitmap() + this.context.transferFromImageBitmap(image) + }) + } + .width('100%') + .height('100%') + } + } + ``` + + ![](figures/zh-cn_image_0000001193075166.png) + + +### clip + +clip\(\): void + +设置当前路径为剪切路径。 + +- 示例 + + ``` + @Entry + @Component + struct Clip { + private settings: RenderingContextSettings = new RenderingContextSettings(true,true) + private context: CanvasRenderingContext2D = new CanvasRenderingContext2D(this.settings) + private offContext: OffscreenCanvasRenderingContext2D = new OffscreenCanvasRenderingContext2D(600, 600, this.settings) + build() { + Flex({ direction: FlexDirection.Column, alignItems: ItemAlign.Center, justifyContent: FlexAlign.Center }) { + Canvas(this.context) + .width('100%') + .height('100%') + .backgroundColor('#ffff00') + .onReady(() =>{ + this.offContext.rect(0, 0, 200, 200) + this.offContext.stroke() + this.offContext.clip() + this.offContext.fillStyle = "rgb(255,0,0)" + this.offContext.fillRect(0, 0, 150, 150) + var image = this.offContext.transferToImageBitmap() + this.context.transferFromImageBitmap(image) + }) + } + .width('100%') + .height('100%') + } + } + ``` + + ![](figures/zh-cn_image_0000001192595238.png) + + +### rotate + +rotate\(rotate: number\): void + +针对当前坐标轴进行顺时针旋转。 + +- 参数 + + + + + + + + + + + + + + + +

参数

+

类型

+

必填

+

默认值

+

描述

+

rotate

+

number

+

是

+

0

+

设置顺时针旋转的弧度值，可以通过Math.PI / 180将角度转换为弧度值。

+
+ + +- 示例 + + ``` + @Entry + @Component + struct Rotate { + private settings: RenderingContextSettings = new RenderingContextSettings(true,true) + private context: CanvasRenderingContext2D = new CanvasRenderingContext2D(this.settings) + private offContext: OffscreenCanvasRenderingContext2D = new OffscreenCanvasRenderingContext2D(600, 600, this.settings) + build() { + Flex({ direction: FlexDirection.Column, alignItems: ItemAlign.Center, justifyContent: FlexAlign.Center }) { + Canvas(this.context) + .width('100%') + .height('100%') + .backgroundColor('#ffff00') + .onReady(() =>{ + this.offContext.rotate(45 * Math.PI / 180) // Rotate the rectangle 45 degrees + this.offContext.fillRect(70, 20, 50, 50) + var image = this.offContext.transferToImageBitmap() + this.context.transferFromImageBitmap(image) + }) + } + .width('100%') + .height('100%') + } + } + ``` + + ![](figures/zh-cn_image_0000001237355133.png) + + +### scale + +scale\(x: number, y: number\): void + +设置canvas画布的缩放变换属性，后续的绘制操作将按照缩放比例进行缩放。 + +- 参数 + + + + + + + + + + + + + + + + + + + + + +

参数

+

类型

+

必填

+

默认值

+

描述

+

x

+

number

+

是

+

0

+

设置水平方向的缩放值。

+

y

+

number

+

是

+

0

+

设置垂直方向的缩放值。

+
+ + +- 示例 + + ``` + @Entry + @Component + struct Scale { + private settings: RenderingContextSettings = new RenderingContextSettings(true,true) + private context: CanvasRenderingContext2D = new CanvasRenderingContext2D(this.settings) + private offContext: OffscreenCanvasRenderingContext2D = new OffscreenCanvasRenderingContext2D(600, 600, this.settings) + build() { + Flex({ direction: FlexDirection.Column, alignItems: ItemAlign.Center, justifyContent: FlexAlign.Center }) { + Canvas(this.context) + .width('100%') + .height('100%') + .backgroundColor('#ffff00') + .onReady(() =>{ + this.offContext.strokeRect(10, 10, 25, 25) + this.offContext.scale(2, 2) // Scale to 200% + this.offContext.strokeRect(10, 10, 25, 25) + var image = this.offContext.transferToImageBitmap() + this.context.transferFromImageBitmap(image) + }) + } + .width('100%') + .height('100%') + } + } + ``` + + ![](figures/zh-cn_image_0000001192755178.png) + + +### transform + +transform\(scaleX: number, skewX: number, skewY: number, scaleY: number, translateX: number, translateY: number\): void + +transform方法对应一个变换矩阵，想对一个图形进行变化的时候，只要设置此变换矩阵相应的参数，对图形的各个定点的坐标分别乘以这个矩阵，就能得到新的定点的坐标。矩阵变换效果可叠加。 + +>![](../../public_sys-resources/icon-note.gif) **说明：** +>变换后的坐标计算方式（x和y为变换前坐标，x'和y'为变换后坐标）： +>- x' = scaleX \* x + skewY \* y + translateX +>- y' = skewX \* x + scaleY \* y + translateY + +- 参数 + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + +

参数

+

类型

+

必填

+

默认值

+

描述

+

scaleX

+

number

+

是

+

0

+

指定水平缩放值。

+

skewX

+

number

+

是

+

0

+

指定水平倾斜值。

+

skewY

+

number

+

是

+

0

+

指定垂直倾斜值。

+

scaleY

+

number

+

是

+

0

+

指定垂直缩放值。

+

translateX

+

number

+

是

+

0

+

指定水平移动值。

+

translateY

+

number

+

是

+

0

+

指定垂直移动值。

+
+ +- 示例 + + ``` + @Entry + @Component + struct Transform { + private settings: RenderingContextSettings = new RenderingContextSettings(true,true) + private context: CanvasRenderingContext2D = new CanvasRenderingContext2D(this.settings) + private offContext: OffscreenCanvasRenderingContext2D = new OffscreenCanvasRenderingContext2D(600, 600, this.settings) + build() { + Flex({ direction: FlexDirection.Column, alignItems: ItemAlign.Center, justifyContent: FlexAlign.Center }) { + Canvas(this.context) + .width('100%') + .height('100%') + .backgroundColor('#ffff00') + .onReady(() =>{ + this.offContext.fillStyle = 'rgb(0,0,0)' + this.offContext.fillRect(0, 0, 100, 100) + this.offContext.transform(1, 0.5, -0.5, 1, 10, 10) + this.offContext.fillStyle = 'rgb(255,0,0)' + this.offContext.fillRect(0, 0, 100, 100) + this.offContext.transform(1, 0.5, -0.5, 1, 10, 10) + this.offContext.fillStyle = 'rgb(0,0,255)' + this.offContext.fillRect(0, 0, 100, 100) + var image = this.offContext.transferToImageBitmap() + this.context.transferFromImageBitmap(image) + }) + } + .width('100%') + .height('100%') + } + } + ``` + + ![](figures/zh-cn_image_0000001192595230.png) + + +### setTransform + +setTransform\(scaleX: number, skewX: number, skewY: number, scale: number, translateX: number, translateY: number\): void + +setTransfrom方法使用的参数和transform\(\)方法相同，但setTransform\(\)方法会重置现有的变换矩阵并创建新的变换矩阵。 + +- 参数 + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + +

参数

+

类型

+

必填

+

默认值

+

描述

+

scaleX

+

number

+

是

+

0

+

指定水平缩放值。

+

skewX

+

number

+

是

+

0

+

指定水平倾斜值。

+

skewY

+

number

+

是

+

0

+

指定垂直倾斜值。

+

scaleY

+

number

+

是

+

0

+

指定垂直缩放值。

+

translateX

+

number

+

是

+

0

+

指定水平移动值。

+

translateY

+

number

+

是

+

0

+

指定垂直移动值。

+
+ +- 示例 + + ``` + @Entry + @Component + struct SetTransform { + private settings: RenderingContextSettings = new RenderingContextSettings(true,true) + private context: CanvasRenderingContext2D = new CanvasRenderingContext2D(this.settings) + private offContext: OffscreenCanvasRenderingContext2D = new OffscreenCanvasRenderingContext2D(600, 600, this.settings) + build() { + Flex({ direction: FlexDirection.Column, alignItems: ItemAlign.Center, justifyContent: FlexAlign.Center }) { + Canvas(this.context) + .width('100%') + .height('100%') + .backgroundColor('#ffff00') + .onReady(() =>{ + this.offContext.fillStyle = 'rgb(255,0,0)' + this.offContext.fillRect(0, 0, 100, 100) + this.offContext.setTransform(1,0.5, -0.5, 1, 10, 10) + this.offContext.fillStyle = 'rgb(0,0,255)' + this.offContext.fillRect(0, 0, 100, 100) + var image = this.offContext.transferToImageBitmap() + this.context.transferFromImageBitmap(image) + }) + } + .width('100%') + .height('100%') + } + } + ``` + + ![](figures/zh-cn_image_0000001237715159.png) + + +### translate + +translate\(x: number, y: number\): void + +移动当前坐标系的原点。 + +- 参数 + + + + + + + + + + + + + + + + + + + + + +

参数

+

类型

+

必填

+

默认值

+

描述

+

x

+

number

+

是

+

0

+

设置水平平移量。

+

y

+

number

+

是

+

0

+

设置竖直平移量。

+
+ +- 示例 + + ``` + @Entry + @Component + struct Translate { + private settings: RenderingContextSettings = new RenderingContextSettings(true,true) + private context: CanvasRenderingContext2D = new CanvasRenderingContext2D(this.settings) + private offContext: OffscreenCanvasRenderingContext2D = new OffscreenCanvasRenderingContext2D(600, 600, this.settings) + build() { + Flex({ direction: FlexDirection.Column, alignItems: ItemAlign.Center, justifyContent: FlexAlign.Center }) { + Canvas(this.context) + .width('100%') + .height('100%') + .backgroundColor('#ffff00') + .onReady(() =>{ + this.offContext.fillRect(10, 10, 50, 50) + this.offContext.translate(70, 70) + this.offContext.fillRect(10, 10, 50, 50) + var image = this.offContext.transferToImageBitmap() + this.context.transferFromImageBitmap(image) + }) + } + .width('100%') + .height('100%') + } + } + ``` + + ![](figures/zh-cn_image_0000001237475137.png) + + +### drawImage + +drawImage\(image: ImageBitmap, dx: number, dy: number\): void + +drawImage\(image: ImageBitmap, dx: number, dy: number, dWidth: number, dHeight: number\): void + +drawImage\(image: ImageBitmap, sx: number, sy: number, sWidth: number, sHeight: number, dx: number, dy: number, dWidth: number, dHeight: number\):void + +进行图像绘制。 + +- 参数 + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + +

参数

+

类型

+

必填

+

默认值

+

描述

+

image

+

ImageBitmap

+

是

+

null

+

图片资源，请参考ImageBitmap。

+

sx

+

number

+

否

+

0

+

裁切源图像时距离源图像左上角的x坐标值。

+

sy

+

number

+

否

+

0

+

裁切源图像时距离源图像左上角的y坐标值。

+

sWidth

+

number

+

否

+

0

+

裁切源图像时需要裁切的宽度。

+

sHeight

+

number

+

否

+

0

+

裁切源图像时需要裁切的高度。

+

dx

+

number

+

是

+

0

+

绘制区域左上角在x轴的位置。

+

dy

+

number

+

是

+

0

+

绘制区域左上角在y 轴的位置。

+

dWidth

+

number

+

否

+

0

+

绘制区域的宽度。

+

dHeight

+

number

+

否

+

0

+

绘制区域的高度。

+
+ + +- 示例 + + ``` + @Entry + @Component + struct Index { + private settings: RenderingContextSettings = new RenderingContextSettings(true,true) + private context: CanvasRenderingContext2D = new CanvasRenderingContext2D(this.settings) + private img:ImageBitmap = new ImageBitmap("common/images/icon.jpg") + private offContext: OffscreenCanvasRenderingContext2D = new OffscreenCanvasRenderingContext2D(600, 600, this.settings) + build() { + Flex({ direction: FlexDirection.Column, alignItems: ItemAlign.Center, justifyContent: FlexAlign.Center }) { + Canvas(this.context) + .width('100%') + .height('100%') + .backgroundColor('#ffff00') + .onReady(() => { + this.offContext.drawImage( this.img,0,0,400,200) + var image = this.offContext.transferToImageBitmap() + this.context.transferFromImageBitmap(image) + }) + } + .width('100%') + .height('100%') + } + } + ``` + + ![](figures/zh-cn_image_0000001192915180.png) + + +### createImageData + +createImageData\(width: number, height: number\): Object + +根据宽高创建ImageData对象，请参考[ImageData](ts-components-canvas-imagedata.md)。 + +- 参数 + + + + + + + + + + + + + + + + + + + + + +

参数

+

类型

+

必填

+

默认

+

描述

+

width

+

number

+

是

+

0

+

ImageData的宽度。

+

height

+

number

+

是

+

0

+

ImageData的高度。

+
+ + +### createImageData + +createImageData\(imageData: ImageData\): Object + +根据已创建的ImageData对象创建新的ImageData对象，请参考[ImageData](ts-components-canvas-imagedata.md)。 + +- 参数 + + + + + + + + + + + + + + + +

参数

+

类型

+

必填

+

默认

+

描述

+

imagedata

+

ImageData

+

是

+

null

+

被复制的ImageData对象。

+
+ + +### getImageData + +getImageData\(sx: number, sy: number, sw: number, sh: number\): Object + +以当前canvas指定区域内的像素创建[ImageData](ts-components-canvas-imagedata.md)对象。 + +- 参数 + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + +

参数

+

类型

+

必填

+

默认值

+

描述

+

sx

+

number

+

是

+

0

+

需要输出的区域的左上角x坐标。

+

sy

+

number

+

是

+

0

+

需要输出的区域的左上角y坐标。

+

sw

+

number

+

是

+

0

+

需要输出的区域的宽度。

+

sh

+

number

+

是

+

0

+

需要输出的区域的高度。

+
+ + +### putImageData + +putImageData\(imageData: Object, dx: number, dy: number, dirtyX?: number, dirtyY?: number, dirtyWidth?: number, dirtyHeight?: number\): void + +使用[ImageData](ts-components-canvas-imagedata.md)数据填充新的矩形区域。 + +- 参数 + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + +

参数

+

类型

+

必填

+

默认值

+

描述

+

imagedata

+

Object

+

是

+

null

+

包含像素值的ImageData对象。

+

dx

+

number

+

是

+

0

+

填充区域在x轴方向的偏移量。

+

dy

+

number

+

是

+

0

+

填充区域在y轴方向的偏移量。

+

dirtyX

+

number

+

否

+

0

+

源图像数据矩形裁切范围左上角距离源图像左上角的x轴偏移量。

+

dirtyY

+

number

+

否

+

0

+

源图像数据矩形裁切范围左上角距离源图像左上角的y轴偏移量。

+

dirtyWidth

+

number

+

否

+

imagedata的宽度

+

源图像数据矩形裁切范围的宽度。

+

dirtyHeight

+

number

+

否

+

imagedata的高度

+

源图像数据矩形裁切范围的高度。

+
+ +- 示例 + + ``` + @Entry + @Component + struct PutImageData { + private settings: RenderingContextSettings = new RenderingContextSettings(true,true) + private context: CanvasRenderingContext2D = new CanvasRenderingContext2D(this.settings) + private offContext: OffscreenCanvasRenderingContext2D = new OffscreenCanvasRenderingContext2D(600, 600, this.settings) + build() { + Flex({ direction: FlexDirection.Column, alignItems: ItemAlign.Center, justifyContent: FlexAlign.Center }) { + Canvas(this.context) + .width('100%') + .height('100%') + .backgroundColor('#ffff00') + .onReady(() =>{ + var imageData = this.offContext.createImageData(100, 100) + for (var i = 0; i < imageData.data.length; i += 4) { + imageData.data[i + 0] = 255 + imageData.data[i + 1] = 0 + imageData.data[i + 2] = 255 + imageData.data[i + 3] = 255 + } + this.offContext.putImageData(imageData, 10, 10) + var image = this.offContext.transferToImageBitmap() + this.context.transferFromImageBitmap(image) + }) + } + .width('100%') + .height('100%') + } + } + ``` + + ![](figures/zh-cn_image_0000001193075170.png) + + +### restore + +restore\(\): void + +对保存的绘图上下文进行恢复。 + +- 示例 + + ``` + @Entry + @Component + struct Restore { + private settings: RenderingContextSettings = new RenderingContextSettings(true,true) + private context: CanvasRenderingContext2D = new CanvasRenderingContext2D(this.settings) + private offContext: OffscreenCanvasRenderingContext2D = new OffscreenCanvasRenderingContext2D(600, 600, this.settings) + build() { + Flex({ direction: FlexDirection.Column, alignItems: ItemAlign.Center, justifyContent: FlexAlign.Center }) { + Canvas(this.context) + .width('100%') + .height('100%') + .backgroundColor('#ffff00') + .onReady(() =>{ + this.offContext.restore() + var image = this.offContext.transferToImageBitmap() + this.context.transferFromImageBitmap(image) + }) + } + .width('100%') + .height('100%') + } + } + ``` + + +### save + +save\(\): void + +对当前的绘图上下文进行保存。 + +- 示例 + + ``` + @Entry + @Component + struct Restore { + private settings: RenderingContextSettings = new RenderingContextSettings(true,true) + private context: CanvasRenderingContext2D = new CanvasRenderingContext2D(this.settings) + private offContext: OffscreenCanvasRenderingContext2D = new OffscreenCanvasRenderingContext2D(600, 600, this.settings) + build() { + Flex({ direction: FlexDirection.Column, alignItems: ItemAlign.Center, justifyContent: FlexAlign.Center }) { + Canvas(this.context) + .width('100%') + .height('100%') + .backgroundColor('#ffff00') + .onReady(() =>{ + this.offContext.save() + var image = this.offContext.transferToImageBitmap() + this.context.transferFromImageBitmap(image) + }) + } + .width('100%') + .height('100%') + } + } + ``` + + +### createLinearGradient + +createLinearGradient\(x0: number, y0: number, x1: number, y1: number\): void + +创建一个线性渐变色。 + +- 参数 + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + +

参数

+

类型

+

必填

+

默认值

+

描述

+

x0

+

number

+

是

+

0

+

起点的x轴坐标。

+

y0

+

number

+

是

+

0

+

起点的y轴坐标。

+

x1

+

number

+

是

+

0

+

终点的x轴坐标。

+

y1

+

number

+

是

+

0

+

终点的y轴坐标。

+
+ +- 示例 + + ``` + @Entry + @Component + struct CreateLinearGradient { + private settings: RenderingContextSettings = new RenderingContextSettings(true,true) + private context: CanvasRenderingContext2D = new CanvasRenderingContext2D(this.settings) + private gra:CanvasGradient = new CanvasGradient() + private offContext: OffscreenCanvasRenderingContext2D = new OffscreenCanvasRenderingContext2D(600, 600, this.settings) + build() { + Flex({ direction: FlexDirection.Column, alignItems: ItemAlign.Center, justifyContent: FlexAlign.Center }) { + Canvas(this.context) + .width('100%') + .height('100%') + .backgroundColor('#ffff00') + .onReady(() =>{ + var grad = this.offContext.createLinearGradient(50,0, 300,100) + this.gra.addColorStop(0.0, 'red') + this.gra.addColorStop(0.5, 'white') + this.gra.addColorStop(1.0, 'green') + this.offContext.fillStyle = grad + this.offContext.fillRect(0, 0, 500, 500) + var image = this.offContext.transferToImageBitmap() + this.context.transferFromImageBitmap(image) + }) + } + .width('100%') + .height('100%') + } + } + ``` + + ![](figures/zh-cn_image_0000001192915162.png) + + +### createRadialGradient + +createRadialGradient\(x0: number, y0: number, r0: number, x1: number, y1: number, r1: number\): void + +创建一个径向渐变色。 + +- 参数 + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + +

参数

+

类型

+

必填

+

默认值

+

描述

+

x0

+

number

+

是

+

0

+

起始圆的x轴坐标。

+

y0

+

number

+

是

+

0

+

起始圆的y轴坐标。

+

r0

+

number

+

是

+

0

+

起始圆的半径。必须是非负且有限的。

+

x1

+

number

+

是

+

0

+

终点圆的x轴坐标。

+

y1

+

number

+

是

+

0

+

终点圆的y轴坐标。

+

r1

+

number

+

是

+

0

+

终点圆的半径。必须为非负且有限的。

+
+ +- 示例 + + ``` + @Entry + @Component + struct CreateRadialGradient { + private settings: RenderingContextSettings = new RenderingContextSettings(true,true) + private context: CanvasRenderingContext2D = new CanvasRenderingContext2D(this.settings) + private gra:CanvasGradient = new CanvasGradient() + private offContext: OffscreenCanvasRenderingContext2D = new OffscreenCanvasRenderingContext2D(600, 600, this.settings) + build() { + Flex({ direction: FlexDirection.Column, alignItems: ItemAlign.Center, justifyContent: FlexAlign.Center }) { + Canvas(this.context) + .width('100%') + .height('100%') + .backgroundColor('#ffff00') + .onReady(() =>{ + var grad = this.offContext.createRadialGradient(200,200,50, 200,200,200) + this.gra.addColorStop(0.0, 'red') + this.gra.addColorStop(0.5, 'white') + this.gra.addColorStop(1.0, 'green') + this.offContext.fillStyle = grad + this.offContext.fillRect(0, 0, 500, 500) + var image = this.offContext.transferToImageBitmap() + this.context.transferFromImageBitmap(image) + }) + } + .width('100%') + .height('100%') + } + } + ``` + + ![](figures/zh-cn_image_0000001237555179.png) + + +## CanvasPattern + +一个Object对象, 通过[createPattern](#section660873113512)方法创建。 + diff --git a/zh-cn/application-dev/reference/arkui-ts/ts-other-states-consume-provide.md b/zh-cn/application-dev/reference/arkui-ts/ts-other-states-consume-provide.md deleted file mode 100644 index 655b82f654d556c841e6ea0ab84a9d02a681e3c8..0000000000000000000000000000000000000000 --- a/zh-cn/application-dev/reference/arkui-ts/ts-other-states-consume-provide.md +++ /dev/null @@ -1,106 +0,0 @@ -# @Consume和@Provide数据管理 - -Provide作为数据的提供方，可以更新其子孙节点的数据，并触发页面渲染。Consume在感知到Provide数据的更新后，会触发当前view的重新渲染。 - -**表 1** @Provide - - - - - - - - - - - - - - - - - - - -

类型

-

说明

-

装饰器参数

-

别名：是一个string类型的常量。如果规定别名，则提供对应别名的数据更新。如果没有，则使用变量名作为别名。推荐使用@Provide("alias")这种形式。

-

同步机制

-

@Provide的变量类似@state，可以修改对应变量进行页面重新渲染。也可以修改@Consume装饰的变量，反向修改@State变量。

-

初始值

-

必须制定初始值

-

页面重渲染场景

-

1. 基础类型 boolean，string，number

-

2. observed class，修改其中的属性

-

3. Array：添加，删除，更新数组中的元素

-
- -**表 2** @Consume - - - - - - - - - - -

类型

-

说明

-

初始值

-

不可设置默认值

-
- ->![](../../public_sys-resources/icon-note.gif) **说明：** ->使用@Provide 和@Consume时避免循环引用导致死循环。 - -其他属性说明与Provide一致。 - -``` -@Entry -@Component -struct CompA { - @Provide("reviewVote") reviewVotes : number = 0; - - build() { - Column() { - CompB() - Button() { - Text(`${this.reviewVotes}`) - .fontSize(30) - } - .onClick(() => { - this.reviewVotes += 1; - }) - } - } -} - -@Component -struct CompB { - build() { - Column() { - CompC() - } - } -} - -@Component -struct CompC { - @Consume("reviewVote") reviewVotes : number; - build() { - Column() { - Button() { - Text(`${this.reviewVotes}`) - .fontSize(30) - } - .onClick(() => { - this.reviewVotes += 1; - }) - } - } -} -``` - diff --git a/zh-cn/application-dev/reference/arkui-ts/ts-page-transition-animation.md b/zh-cn/application-dev/reference/arkui-ts/ts-page-transition-animation.md index b50b6ca216d61ef5ce7e23522c95167dda1e4a90..12f099183c808bb99ec47b4859ac0ab8f2908046 100644 --- a/zh-cn/application-dev/reference/arkui-ts/ts-page-transition-animation.md +++ b/zh-cn/application-dev/reference/arkui-ts/ts-page-transition-animation.md @@ -1,28 +1,30 @@ -# 页面间转场 +# 页面间转场 + +>![](../../public_sys-resources/icon-note.gif) **说明：** +>从API Version 7开始支持。后续版本如有新增内容，则采用上角标单独标记该内容的起始版本。 页面转场通过在全局pageTransition方法内配置页面入场组件和页面退场组件来自定义页面转场动效。 - -

组件名称

+ - - - - - - - - @@ -30,61 +32,60 @@ - 动效参数说明 - -

名称

参数

+

参数

参数描述

+

参数描述

PageTransitionEnter

+

PageTransitionEnter

Object

+

Object

页面入场组件，用于自定义当前页面的入场效果，详见动效参数说明。

+

页面入场组件，用于自定义当前页面的入场效果，详见动效参数说明。

PageTransitionExit

+

PageTransitionExit

Object

+

Object

页面退场组件，用于自定义当前页面的退场效果，详见动效参数说明。

+

页面退场组件，用于自定义当前页面的退场效果，详见动效参数说明。

参数名称

+ - - - - - - - - - - - - - - - - - - - - - - - - @@ -93,21 +94,20 @@ - RouteType枚举说明 - -

参数名称

参数类型

+

参数类型

默认值

+

默认值

必填

+

必填

参数描述

+

参数描述

type

+

type

RouteType

+

RouteType

-

+

-

否

+

否

不配置时表明pop为push时效果的逆播。

+

不配置时表明pop为push时效果的逆播。

duration

+

duration

number

+

number

1000

+

1000

否

+

否

动画时长，单位为毫秒。

+

动画时长，单位为毫秒。

curve

+

curve

Curve | Curves

+

Curve | Curves

Linear

+

Linear

否

+

否

动画曲线，有效值参见Curve 说明。

+

动画曲线，有效值参见Curve 说明。

delay

+

delay

number

+

number

0

+

0

否

+

否

动画延迟时长，单位为毫秒，默认不延时播放。

+

动画延迟时长，单位为毫秒，默认不延时播放。

名称

+ - - - - - @@ -118,71 +118,70 @@ PageTransitionEnter和PageTransitionExit组件支持的属性： - -

名称

描述

+

描述

Pop

+

Pop

PageA跳转到PageB时，PageA为Exit+Push，PageB为Enter+Push。

+

PageA跳转到PageB时，PageA为Exit+Push，PageB为Enter+Push。

Push

+

Push

PageB返回至PageA时，PageA为Enter+Pop，PageB为Exit+Pop。

+

PageB返回至PageA时，PageA为Enter+Pop，PageB为Exit+Pop。

参数名称

+ - - - - - - - - - - - - - - - - - - - - - - - - @@ -190,31 +189,30 @@ PageTransitionEnter和PageTransitionExit组件支持的属性： - SlideEffect枚举说明 - -

参数名称

参数类型

+

参数类型

默认值

+

默认值

必填

+

必填

参数描述

+

参数描述

slide

+

slide

SlideEffect

+

SlideEffect

Right

+

Right

否

+

否

设置转场的滑入效果，有效值参见SlideEffect说明。

+

设置转场的滑入效果，有效值参见SlideEffect说明。

translate

+

translate

{

-

x? : number,

-

y? : number,

-

z? : number

-

}

+

{

+

x? : number,

+

y? : number,

+

z? : number

+

}

-

+

-

否

+

否

设置页面转场时的平移效果，为入场时起点和退场时终点的值，和slide同时设置时默认生效slide。

+

设置页面转场时的平移效果，为入场时起点和退场时终点的值，和slide同时设置时默认生效slide。

scale

+

scale

{

-

x? : number,

-

y? : number,

-

z? : number,

-

centerX? : number,

-

centerY? : number

-

}

+

{

+

x? : number,

+

y? : number,

+

z? : number,

+

centerX? : number,

+

centerY? : number

+

}

-

+

-

否

+

否

设置页面转场时的缩放效果，为入场时起点和退场时终点的值。

+

设置页面转场时的缩放效果，为入场时起点和退场时终点的值。

opacity

+

opacity

number

+

number

1

+

1

否

+

否

设置入场的起点透明度值或者退场的终点透明度值。

+

设置入场的起点透明度值或者退场的终点透明度值。

名称

+ - - - - - - - - - @@ -225,21 +223,20 @@ PageTransitionEnter和PageTransitionExit组件支持的属性： PageTransitionEnter和PageTransitionExit组件支持的事件： - -

名称

描述

+

描述

Left

+

Left

设置到入场时表示从左边滑入，出场时表示滑出到左边。

+

设置到入场时表示从左边滑入，出场时表示滑出到左边。

Right

+

Right

设置到入场时表示从右边滑入，出场时表示滑出到右边。

+

设置到入场时表示从右边滑入，出场时表示滑出到右边。

Top

+

Top

设置到入场时表示从上边滑入，出场时表示滑出到上边。

+

设置到入场时表示从上边滑入，出场时表示滑出到上边。

Bottom

+

Bottom

设置到入场时表示从下边滑入，出场时表示滑出到下边。

+

设置到入场时表示从下边滑入，出场时表示滑出到下边。

事件

+ - - - - - diff --git a/zh-cn/application-dev/reference/arkui-ts/ts-pixel-units.md b/zh-cn/application-dev/reference/arkui-ts/ts-pixel-units.md deleted file mode 100644 index e8d75d3b1273ab078f4f79cd7be9fb61dd26dceb..0000000000000000000000000000000000000000 --- a/zh-cn/application-dev/reference/arkui-ts/ts-pixel-units.md +++ /dev/null @@ -1,125 +0,0 @@ -# 像素单位 - -为开发者提供4种像素单位，框架采用vp为基准数据单位。 - - -

事件

功能描述

+

功能描述

onEnter(type: RouteType, progress: number) => void

+

onEnter(type: RouteType, progress: number) => void

回调入参为当前入场动画的归一化进度[0 - 1]。

+

回调入参为当前入场动画的归一化进度[0 - 1]。

onExit(type: RouteType, progress: number) => void

+

onExit(type: RouteType, progress: number) => void

回调入参为当前退场动画的归一化进度[0 - 1]。

+

回调入参为当前退场动画的归一化进度[0 - 1]。
- - - - - - - - - - - - - - - - -

名称

-

描述

-

px

-

屏幕物理像素单位。

-

vp

-

屏幕密度相关像素，根据屏幕像素密度转换为屏幕物理像素。

-

fp

-

字体像素，与vp类似适用屏幕密度变化，随系统字体大小设置变化。

-

lpx

-

视窗逻辑像素单位，lpx单位为实际屏幕宽度与逻辑宽度（通过designWidth配置）的比值。如配置designWidth为720时，在实际宽度为1440物理像素的屏幕上，1lpx为2px大小。

-
- -## 像素单位转换 - -提供其他单位与px单位互相转换的方法。 - - - - - - - - - - - - - - - - - - - - - - - - - -

接口

-

描述

-

vp2px(value : number) : number

-

将vp单位的数值转换为以px为单位的数值。

-

px2vp(value : number) : number

-

将px单位的数值转换为以vp为单位的数值。

-

fp2px(value : number) : number

-

将fp单位的数值转换为以px为单位的数值。

-

px2fp(value : number) : number

-

将px单位的数值转换为以fp为单位的数值。

-

lpx2px(value : number) : number

-

将lpx单位的数值转换为以px为单位的数值。

-

px2lpx(value : number) : number

-

将px单位的数值转换为以lpx为单位的数值。

-
- -## 示例 - -``` -@Entry -@Component -struct Example { - build() { - Column() { - Flex({ wrap: FlexWrap.Wrap }) { - Column() { - Text("width(220)") - .width(220).height(40).backgroundColor(0xF9CF93) - .textAlign(TextAlign.Center).fontColor(Color.White).fontSize('12vp') - }.margin(5) - Column() { - Text("width('220px')") - .width('220px').height(40).backgroundColor(0xF9CF93) - .textAlign(TextAlign.Center).fontColor(Color.White) - }.margin(5) - Column() { - Text("width('220vp')") - .width('220vp').height(40).backgroundColor(0xF9CF93) - .textAlign(TextAlign.Center).fontColor(Color.White).fontSize('12vp') - }.margin(5) - Column() { - Text("width('220lpx') designWidth:720") - .width('220lpx').height(40).backgroundColor(0xF9CF93) - .textAlign(TextAlign.Center).fontColor(Color.White).fontSize('12vp') - }.margin(5) - Column() { - Text("width(vp2px(220) + 'px')") - .width(vp2px(220) + 'px').height(40).backgroundColor(0xF9CF93) - .textAlign(TextAlign.Center).fontColor(Color.White).fontSize('12vp') - }.margin(5) - Column() { - Text("fontSize('12fp')") - .width(220).height(40).backgroundColor(0xF9CF93) - .textAlign(TextAlign.Center).fontColor(Color.White).fontSize('12fp') - }.margin(5) - }.width('100%') - } - } -} -``` - -![](figures/像素单位.gif) - diff --git a/zh-cn/application-dev/reference/arkui-ts/ts-rending-control-syntax-if-else.md b/zh-cn/application-dev/reference/arkui-ts/ts-rending-control-syntax-if-else.md deleted file mode 100644 index adf71a1bc97b7695c87394815e407309a13b748c..0000000000000000000000000000000000000000 --- a/zh-cn/application-dev/reference/arkui-ts/ts-rending-control-syntax-if-else.md +++ /dev/null @@ -1,38 +0,0 @@ -# 条件渲染 - -使用**if/else**进行条件渲染。 - ->![](../../public_sys-resources/icon-note.gif) **说明：** ->- if条件语句可以使用状态变量； ->- 使用if可以使子组件的渲染依赖条件语句； ->- 必须在容器组件内使用。 ->- 某些容器组件限制子组件的类型或数量。当将if放置在这些组件内时，这些限制将应用于if和else语句内创建的组件：如当在Grid组件内使用if时，则仅允许if条件语句内使用GridItem组件，而在List组件内则仅允许ListItem组件。 - -## 示例 - -使用if条件语句： - -``` -Column() { - if (this.count > 0) { - Text('count is positive') - } -} -``` - -使用if、else if、else条件语句： - -``` -Column() { - if (this.count < 0) { - Text('count is negative') - } else if (this.count % 2 === 0) { - Divider() - Text('even') - } else { - Divider() - Text('odd') - } -} -``` - diff --git a/zh-cn/application-dev/reference/arkui-ts/ts-rending-control-syntax.md b/zh-cn/application-dev/reference/arkui-ts/ts-rending-control-syntax.md deleted file mode 100644 index f054d5dbb18d9b4ecd8dfb21ce93c1993d8b8163..0000000000000000000000000000000000000000 --- a/zh-cn/application-dev/reference/arkui-ts/ts-rending-control-syntax.md +++ /dev/null @@ -1,9 +0,0 @@ -# 渲染控制语法 - -- **[条件渲染](ts-rending-control-syntax-if-else.md)** - -- **[循环渲染](ts-rending-control-syntax-foreach.md)** - -- **[数据懒加载](ts-rending-control-syntax-lazyforeach.md)** - - diff --git a/zh-cn/application-dev/reference/arkui-ts/ts-resource-access.md b/zh-cn/application-dev/reference/arkui-ts/ts-resource-access.md deleted file mode 100644 index a929357dad34cd118a7c969502798a89647eebec..0000000000000000000000000000000000000000 --- a/zh-cn/application-dev/reference/arkui-ts/ts-resource-access.md +++ /dev/null @@ -1,5 +0,0 @@ -# 资源访问 - -- **[媒体资源类型说明](ts-media-resource-type.md)** - - diff --git a/zh-cn/application-dev/reference/arkui-ts/ts-syntactic-sugar-decorator.md b/zh-cn/application-dev/reference/arkui-ts/ts-syntactic-sugar-decorator.md deleted file mode 100644 index 7a67e943d2d7b31502323b9f0418195013b05959..0000000000000000000000000000000000000000 --- a/zh-cn/application-dev/reference/arkui-ts/ts-syntactic-sugar-decorator.md +++ /dev/null @@ -1,80 +0,0 @@ -# 装饰器 - -装饰器**@Decorator**，被装饰的元素可以是变量声明，类定义，结构体定义，方法定义等，赋予其特殊的含义。 - -多个装饰器实现可以叠加到目标元素，书写在同一行上或者在多行上，推荐书写在多行上。 - -如下**@Component**和**@State**的使用，被**@Component**装饰的元素具备了组件化的含义，使用**@State**装饰的变量具备了状态数据的含义： - -``` -@Component -struct MyComponent { - @State count: number = 0 -} -``` - -装饰器可以书写在同一行上： - -``` -@Entry @Component struct MyComponent { -} -``` - -但更推荐书写在多行上： - -``` -@Entry -@Component -struct MyComponent { -} -``` - -## 支持的装饰器列表 - - - - - - - - - - - - - - - - - - - - - - - - - - - - -

装饰器

-

装饰内容

-

说明

-

@Component

-

struct

-

结构体在装饰后具有基于组件的能力，需要实现build方法来更新UI。

-

@Entry

-

struct

-

组件被装饰后作为页面的入口，页面加载时将被渲染显示。

-

@State

-

基本数据类型，类，数组

-

修饰的状态数据被修改时会触发组件的build方法进行UI界面更新。

-

@Prop

-

基本数据类型

-

修改后的状态数据用于在父组件和子组件之间建立单向数据依赖关系。修改父组件关联数据时，更新当前组件的UI。

-

@Link

-

基本数据类型，类，数组

-

父子组件之间的双向数据绑定。父组件的内部状态数据作为数据源。任何一方所做的修改都会反映给另一方。

-
- diff --git a/zh-cn/application-dev/reference/arkui-ts/ts-syntactic-sugar.md b/zh-cn/application-dev/reference/arkui-ts/ts-syntactic-sugar.md deleted file mode 100644 index 0eebe6f115bc4d8d7679b584e8721b44c7e1cd0f..0000000000000000000000000000000000000000 --- a/zh-cn/application-dev/reference/arkui-ts/ts-syntactic-sugar.md +++ /dev/null @@ -1,15 +0,0 @@ -# 语法糖 - -- **[装饰器](ts-syntactic-sugar-decorator.md)** - -- **[链式调用](ts-syntactic-sugar-chaining.md)** - -- **[struct对象](ts-syntactic-sugar-struct.md)** - -- **[在实例化过程中省略"new"](ts-instantiating-a-struct-without-new-keyword.md)** - -- **[组件创建使用独立一行](ts-using-a-separate-line-for-new-component.md)** - -- **[生成器函数内使用TS语言的限制](ts-restrictions-for-generators.md)** - - diff --git a/zh-cn/application-dev/reference/arkui-ts/ts-syntax-intro.md b/zh-cn/application-dev/reference/arkui-ts/ts-syntax-intro.md deleted file mode 100644 index c707a3b3b3bc7ddf36101901c6ea33102f96203e..0000000000000000000000000000000000000000 --- a/zh-cn/application-dev/reference/arkui-ts/ts-syntax-intro.md +++ /dev/null @@ -1,11 +0,0 @@ -# 描述规范使用说明 - -本节定义了基于TS扩展的声明式开发范式的核心机制和功能。讲述了声明式UI描述、组件化机制、UI状态管理、渲染控制语法和语法糖。 - -本节为应用开发人员开发UI提供了参考规范。有关组件的详细信息，请参考[组件说明](ts-universal-events-click.md)。 - ->![](../../public_sys-resources/icon-note.gif) **说明：** ->- 所有示例都以TypeScript \(TS\)语言为例，请遵循相应语言的语法要求。 ->- 示例中的**Image**、**Button**、**Text**、**Divider**、**Row**和**Column**等组件是UI框架中预置的组件控件，仅用于解释UI描述规范。 ->- 通用属性方法和事件方法通常支持所有组件，而组件内的属性方法和事件方法仅对当前组件有效。 - diff --git a/zh-cn/application-dev/reference/arkui-ts/ts-transition-animation-component.md b/zh-cn/application-dev/reference/arkui-ts/ts-transition-animation-component.md index f02f406edb8d9897079f8eec785607e6decae0e6..75ef65d87e3860d66091106a9ad649884523b4de 100644 --- a/zh-cn/application-dev/reference/arkui-ts/ts-transition-animation-component.md +++ b/zh-cn/application-dev/reference/arkui-ts/ts-transition-animation-component.md @@ -1,27 +1,29 @@ -# 组件内转场 +# 组件内转场 + +>![](../../public_sys-resources/icon-note.gif) **说明：** +>从API Version 7开始支持。后续版本如有新增内容，则采用上角标单独标记该内容的起始版本。 组件转场主要通过transition属性进行配置转场参数，在组件插入和删除时进行过渡动效，主要用于容器组件子组件插入删除时提升用户体验（需要配合animateTo才能生效，动效时长、曲线、延时跟随animateTo中的配置）。 ## 属性 - -

名称

+ - - - - - - - @@ -29,91 +31,90 @@ - transition入参说明 - -

名称

参数类型

+

参数类型

默认值

+

默认值

参数描述

+

参数描述

transition

+

transition

Object

+

Object

-

+

-

所有参数均为可选参数，详细描述见transition入参说明。

+

所有参数均为可选参数，详细描述见transition入参说明。

参数名称

+ - - - - - - - - - - - - - - - - - - - - - - - - - - - - - @@ -122,26 +123,25 @@ - TransitionType枚举说明 - -

参数名称

参数类型

+

参数类型

默认值

+

默认值

必填

+

必填

参数描述

+

参数描述

type

+

type

TransitionType

+

TransitionType

All

+

All

否

+

否

默认包括组件新增和删除。

-
说明：

不指定Type时说明插入删除使用同一种效果。

+

默认包括组件新增和删除。

+
说明：

不指定Type时说明插入删除使用同一种效果。

opacity

+

opacity

number

+

number

1

+

1

否

+

否

设置组件转场时的透明度效果，为插入时起点和删除时终点的值。

+

设置组件转场时的透明度效果，为插入时起点和删除时终点的值。

translate

+

translate

{

-

x? : number,

-

y? : number,

-

z? : number

-

}

+

{

+

x? : number,

+

y? : number,

+

z? : number

+

}

-

+

-

否

+

否

设置组件转场时的平移效果，为插入时起点和删除时终点的值。

+

设置组件转场时的平移效果，为插入时起点和删除时终点的值。

scale

+

scale

{

-

x? : number,

-

y? : number,

-

z? : number,

-

centerX? : number,

-

centerY? : number

-

}

+

{

+

x? : number,

+

y? : number,

+

z? : number,

+

centerX? : number,

+

centerY? : number

+

}

-

+

-

否

+

否

设置组件转场时的缩放效果，为插入时起点和删除时终点的值。

+

设置组件转场时的缩放效果，为插入时起点和删除时终点的值。

rotate

+

rotate

{

-

x?: number,

-

y?: number,

-

z?: number,

-

angle?: Angle,

-

centerX?: Length,

-

centerY?: Length

-

}

+

{

+

x?: number,

+

y?: number,

+

z?: number,

+

angle?: Angle,

+

centerX?: Length,

+

centerY?: Length

+

}

-

+

-

否

+

否

设置组件转场时的旋转效果，为插入时起点和删除时终点的值。

+

设置组件转场时的旋转效果，为插入时起点和删除时终点的值。

名称

+ - - - - - - - diff --git a/zh-cn/application-dev/reference/arkui-ts/ts-transition-animation-shared-elements.md b/zh-cn/application-dev/reference/arkui-ts/ts-transition-animation-shared-elements.md index ff2c7bf63dd72cb72e0af86349956ed1cc088355..94ca49f08a5c0cff6288418a7f5020b4653b8e9f 100644 --- a/zh-cn/application-dev/reference/arkui-ts/ts-transition-animation-shared-elements.md +++ b/zh-cn/application-dev/reference/arkui-ts/ts-transition-animation-shared-elements.md @@ -1,28 +1,30 @@ -# 共享元素转场 +# 共享元素转场 + +>![](../../public_sys-resources/icon-note.gif) **说明：** +>从API Version 7开始支持。后续版本如有新增内容，则采用上角标单独标记该内容的起始版本。 共享元素转场支持页面间的转场，如当前页面的图片转场至下一页面中。 ## 属性 - -

名称

描述

+

描述

All

+

All

指定当前的Transition动效生效在组件的所有变化场景。

+

指定当前的Transition动效生效在组件的所有变化场景。

Insert

+

Insert

指定当前的Transition动效生效在组件的插入场景。

+

指定当前的Transition动效生效在组件的插入场景。

Delete

+

Delete

指定当前的Transition动效生效在组件的删除场景。

+

指定当前的Transition动效生效在组件的删除场景。

名称

+ - - - - - - - @@ -30,50 +32,49 @@ - options参数说明 - -

名称

参数

+

参数

默认值

+

默认值

参数描述

+

参数描述

sharedTransition

+

sharedTransition

id: string,

-

options?: Object

+

id: string,

+

options?: Object

-

+

-

两个页面的组件配置为同一个id，则转场过程中会进行共享元素转场，配置为空字符串时不会有共享元素转场效果。

+

两个页面的组件配置为同一个id，则转场过程中会进行共享元素转场，配置为空字符串时不会有共享元素转场效果。

参数名称

+ - - - - - - - - - - - - - - - - - - - diff --git a/zh-cn/application-dev/reference/arkui-ts/ts-transition-animation.md b/zh-cn/application-dev/reference/arkui-ts/ts-transition-animation.md index 0f1ae9e6f11c358d5158cdf04fb2400c034c2a10..54febbd3441ee977b93342c05429056c13b1afb5 100644 --- a/zh-cn/application-dev/reference/arkui-ts/ts-transition-animation.md +++ b/zh-cn/application-dev/reference/arkui-ts/ts-transition-animation.md @@ -1,4 +1,4 @@ -# 转场动画 +# 转场动画 - **[页面间转场](ts-page-transition-animation.md)** diff --git a/zh-cn/application-dev/reference/arkui-ts/ts-types.md b/zh-cn/application-dev/reference/arkui-ts/ts-types.md deleted file mode 100644 index 913fca4001b22a7e6140cb8a65e6943a94fcc41e..0000000000000000000000000000000000000000 --- a/zh-cn/application-dev/reference/arkui-ts/ts-types.md +++ /dev/null @@ -1,257 +0,0 @@ -# 类型定义 - -## 长度类型 - - -

参数名称

参数类型

+

参数类型

默认值

+

默认值

必填

+

必填

参数描述

+

参数描述

duration

+

duration

number

+

number

1000

+

1000

否

+

否

单位为毫秒，默认动画时长为1000毫秒。

+

单位为毫秒，默认动画时长为1000毫秒。

curve

+

curve

Curve | Curves

+

Curve | Curves

Linear

+

Linear

否

+

否

默认曲线为线性，有效值参见Curve说明。

+

默认曲线为线性，有效值参见Curve说明。

delay

+

delay

number

+

number

0

+

0

否

+

否

单位为毫秒，默认不延时播放。

+

单位为毫秒，默认不延时播放。
- - - - - - - - - -

名称

-

类型定义

-

描述

-

Length

-

string | number

-

用于描述尺寸单位，输入为number类型时，使用vp单位；输入为string类型时，需要显式指定像素单位，如'10px'，也可设置百分比字符串，如'100%'。

-
- -## 角度类型 - - - - - - - - - - - - -

名称

-

类型定义

-

描述

-

Angle

-

string | number

-

用于角度单位，输入为number类型时，使用deg单位；输入为string类型时需要显示指定角度单位，支持以下两种角度单位：

-
  • deg：如'100deg'。
  • rad：如'3.14rad'。
-
- -## 点类型 - - - - - - - - - - - - -

名称

-

类型定义

-

描述

-

Point

-

[Length, Length]

-

用于描述点坐标，第一个值为x轴坐标，第二个值为y坐标。

-
- -## 颜色类型 - -组件属性方法使用的颜色Color说明如下： - - - - - - - - - - - - -

名称

-

类型定义

-

描述

-

Color

-

string | number | Color

-

用于描述颜色信息，输入为string类型时，使用rgb或者rgba进行描述；输入为number类型是，使用HEX格式颜色；输入类型为Color枚举时，使用颜色枚举值。

-
  • 'rgb(255, 255, 255)'。
  • 'rgba(255, 255, 255, 1.0)'。
  • HEX格式：0xrrggbb，0xaarrggbb，'#FFFFFF'。
  • 枚举格式：Color.Black，Color.White等。
-
- -当前支持的Color颜色枚举： - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - -

颜色名称

-

颜色值

-

颜色示意

-

Black

-

0x000000

-

-

Blue

-

0x0000ff

-

-

Brown

-

0xa52a2a

-

-

Gray

-

0x808080

-

-

Green

-

0x008000

-

-

Orange

-

0xffa500

-

-

Pink

-

0xffc0cb

-

-

Red

-

0xff0000

-

-

White

-

0xffffff

-

-

Yellow

-

0xffff00

-

-
- -## ColorStop类型 - -颜色断点类型，用于描述渐进色颜色断点。 - - - - - - - - - - - - -

名称

-

类型定义

-

描述

-

ColorStop

-

[Color, number]

-

描述渐进色颜色断点类型，第一个参数为颜色值，第二个参数为0~1之间的比例值。

-
- -## 示例 - -``` -@Entry -@Component -struct dataTypeExample { - build() { - Column({ space: 5 }) { - Text('Length').fontColor(0xCCCCCC).fontSize(9).width('90%') - Text('90%').width('90%').height(40).backgroundColor(0xF9CF93) - .textAlign(TextAlign.Center).fontColor(Color.White) - Text('320').width(320).height(40).backgroundColor(0xF9CF93) - .textAlign(TextAlign.Center).fontColor(Color.White) - Text('1000px').width('1000px').height(40).backgroundColor(0xF9CF93) - .textAlign(TextAlign.Center).fontColor(Color.White) - - Text('Angle').fontColor(0xCCCCCC).fontSize(9).width('90%') - Text('45deg') - .width(40).height(40) - .rotate({ x: 0, y: 0, z: 1, angle: 45, centerX: '50%', centerY: '50%' }) - .fontColor(Color.White) - .backgroundColor(0xF9CF93).textAlign(TextAlign.Center) - - Text('45rad') - .width(40).height(40) - .rotate({ x: 0, y: 0, z: 1, angle: '45rad', centerX: '50%', centerY: '50%' }) - .fontColor(Color.White) - .backgroundColor(0xF9CF93).textAlign(TextAlign.Center).margin({ top: 30 }) - - Text('Point').fontColor(0xCCCCCC).fontSize(9).width('90%') - Line().width(300).height(40).startPoint([0, 20]).endPoint([300, 20]) - - Text('Color').fontColor('#CCCCCC').fontSize(9).width('90%') - Text('0xF9CF93') - .fontColor(Color.White).textAlign(TextAlign.Center) - .width('90%').height(40).backgroundColor(0xF9CF93) - - Text('#F9CF93') - .fontColor(Color.White).textAlign(TextAlign.Center) - .width('90%').height(40).backgroundColor('#F9CF93') - - Text('rgb(249, 207, 147)') - .fontColor(Color.White).textAlign(TextAlign.Center) - .width('90%').height(40).backgroundColor('rgb(249, 207, 147)') - - Text('rgba(249, 207, 147, 1.0)') - .fontColor(Color.White).textAlign(TextAlign.Center) - .width('90%').height(40).backgroundColor('rgba(249, 207, 147, 1.0)') - - Text('Color.Yellow') - .textAlign(TextAlign.Center) - .width('90%').height(40).backgroundColor(Color.Yellow) - } - .width('100%').margin({ top: 5 }) - } -} -``` - -![](figures/datatype.png) - diff --git a/zh-cn/application-dev/reference/arkui-ts/ts-ui-state-management.md b/zh-cn/application-dev/reference/arkui-ts/ts-ui-state-management.md deleted file mode 100644 index 98a1b5c20488ebd827e533abbd43df7c3e1115d3..0000000000000000000000000000000000000000 --- a/zh-cn/application-dev/reference/arkui-ts/ts-ui-state-management.md +++ /dev/null @@ -1,11 +0,0 @@ -# UI状态管理 - -- **[基本概念](ts-ui-state-mgmt-concepts.md)** - -- **[管理组件拥有的状态](ts-managing-component-states.md)** - -- **[管理应用程序的状态](ts-managing-application-states.md)** - -- **[其他类目的状态管理](ts-managing-other-states.md)** - - diff --git a/zh-cn/application-dev/reference/arkui-ts/ts-ui-state-mgmt-concepts.md b/zh-cn/application-dev/reference/arkui-ts/ts-ui-state-mgmt-concepts.md deleted file mode 100644 index 129c7dbb095cadb3269907b9da2e7ebcc50f378c..0000000000000000000000000000000000000000 --- a/zh-cn/application-dev/reference/arkui-ts/ts-ui-state-mgmt-concepts.md +++ /dev/null @@ -1,22 +0,0 @@ -# 基本概念 - -在声明式UI编程范式中，UI是应用程序状态的函数，开发人员通过修改当前应用程序状态来更新相应的UI界面。 - -开发框架提供了多种应用程序状态管理的能力。 - -![](figures/CoreSpec_figures_state-mgmt-overview.png) - -## 状态变量装饰器 - -- **@State：**组件拥有的状态属性。每当**@State**装饰的变量更改时，组件会重新渲染更新UI。 -- **@Link：**组件依赖于其父组件拥有的某些状态属性。每当任何一个组件中的数据更新时，另一个组件的状态都会更新，父子组件都会进行重新渲染。 -- **@Prop：**工作原理类似**@Link**，只是子组件所做的更改不会同步到父组件上，属于单向传递。 - -## 应用程序状态数据 - -**AppStorage**是整个UI中使用的应用程序状态的中心“数据库”，UI框架会针对应用程序创建单例**AppStorage**对象，并提供相应的装饰器和接口供应用程序使用。 - -- **@StorageLink：@StorageLink\(name\)**的工作原理类似于**@Consume\(name\)**，不同的是，该给定名称的链接对象是从**AppStorage**中获得的，它在**UI组件**和**AppStorage**之间建立双向绑定同步数据。 -- **@StorageProp：@StorageProp\(name\)**将UI组件属性与**AppStorage**进行单向同步。**AppStorage**中的值更改会更新组件中的属性，但UI组件无法更改**AppStorage**中的属性值。 -- **AppStorage**还提供用于业务逻辑实现的API，用于添加、读取、修改和删除应用程序的状态属性，通过此API所做的更改会导致修改的状态数据同步到UI组件上进行UI更新。 - diff --git a/zh-cn/application-dev/reference/arkui-ts/ts-universal-attributes-background.md b/zh-cn/application-dev/reference/arkui-ts/ts-universal-attributes-background.md index 2c364e5f8534b1211506c2cc996adf1f5e640fc5..aebe77279ae8d4d8e032617d9b8a0554ca099092 100644 --- a/zh-cn/application-dev/reference/arkui-ts/ts-universal-attributes-background.md +++ b/zh-cn/application-dev/reference/arkui-ts/ts-universal-attributes-background.md @@ -1,63 +1,71 @@ -# 背景设置 +# 背景设置 + +>![](../../public_sys-resources/icon-note.gif) **说明：** +>从API Version 7开始支持。后续版本如有新增内容，则采用上角标单独标记该内容的起始版本。 设置组件的背景色。 - -

名称

+## 权限列表 + +无 + +## 属性 + + - - - - - - - - - - - - - - - - - - - @@ -65,26 +73,25 @@ - ImageSize枚举说明 - -

名称

参数类型

+

参数类型

默认值

+

默认值

描述

+

描述

backgroundColor

+

backgroundColor

Color

+

Color

-

+

-

设置组件的背景色。

+

设置组件的背景色。

backgroundImage

+

backgroundImage

src: string,

-

repeat?: ImageRepeat

+

src: string,

+

repeat?: ImageRepeat

-

+

-

src参数：图片地址，支持网络图片资源和本地图片资源地址(不支持svg类型的图片)。

-

repeat参数：设置背景图片的重复样式，默认不重复。

+

src参数：图片地址，支持网络图片资源和本地图片资源地址(不支持svg类型的图片)。

+

repeat参数：设置背景图片的重复样式，默认不重复。

backgroundImageSize

+

backgroundImageSize

{

-

width?: Length,

-

height?: Length

-

} | ImageSize

+

{

+

width?: Length,

+

height?: Length

+

} | ImageSize

Auto

+

Auto

设置背景图像的高度和宽度。当输入为{width: Length, height: Length}对象时，如果只设置一个属性，则第二个属性保持图片原始宽高比进行调整。默认保持原图的比例不变。

+

设置背景图像的高度和宽度。当输入为{width: Length, height: Length}对象时，如果只设置一个属性，则第二个属性保持图片原始宽高比进行调整。默认保持原图的比例不变。

backgroundImagePosition

+

backgroundImagePosition

{

-

x?: Length,

-

y?: Length

-

} | Alignment

+

{

+

x?: Length,

+

y?: Length

+

} | Alignment

{

-

x: 0,

-

y: 0

-

}

+

{

+

x: 0,

+

y: 0

+

}

设置背景图在组件中显示位置。

+

设置背景图在组件中显示位置。

类型

+ - - - - - - - diff --git a/zh-cn/application-dev/reference/arkui-ts/ts-universal-attributes-border.md b/zh-cn/application-dev/reference/arkui-ts/ts-universal-attributes-border.md index 84663e3c502590a5bea3878ac2681f41b4a28c47..6dd4daec6ace01dfea2d7b0f2e6dbb8274c910c1 100644 --- a/zh-cn/application-dev/reference/arkui-ts/ts-universal-attributes-border.md +++ b/zh-cn/application-dev/reference/arkui-ts/ts-universal-attributes-border.md @@ -1,66 +1,74 @@ -# 边框设置 +# 边框设置 + +>![](../../public_sys-resources/icon-note.gif) **说明：** +>从API Version 7开始支持。后续版本如有新增内容，则采用上角标单独标记该内容的起始版本。 设置组件边框样式。 - -

类型

描述

+

描述

Cover

+

Cover

默认值，保持宽高比进行缩小或者放大，使得图片两边都大于或等于显示边界。

+

默认值，保持宽高比进行缩小或者放大，使得图片两边都大于或等于显示边界。

Contain

+

Contain

保持宽高比进行缩小或者放大，使得图片完全显示在显示边界内。

+

保持宽高比进行缩小或者放大，使得图片完全显示在显示边界内。

Auto

+

Auto

保持原图的比例不变。

+

保持原图的比例不变。

名称

+## 权限列表 + +无 + +## 属性 + + - - - - - - - - - - - - - - - - - - - - - - - @@ -68,26 +76,25 @@ - BorderStyle枚举说明 - -

名称

参数类型

+

参数类型

默认值

+

默认值

描述

+

描述

border

+

border

{

-

width?: Length,

-

color?: Color,

-

radius?: Length,

-

style?: BorderStyle

-

}

+

{

+

width?: Length,

+

color?: Color,

+

radius?: Length,

+

style?: BorderStyle

+

}

-

+

-

统一边框样式设置接口。

+

统一边框样式设置接口。

borderStyle

+

borderStyle

BorderStyle

+

BorderStyle

Solid

+

Solid

设置元素的边框样式。

+

设置元素的边框样式。

borderWidth

+

borderWidth

Length

+

Length

0

+

0

设置元素的边框宽度。

+

设置元素的边框宽度。

borderColor

+

borderColor

Color

+

Color

-

+

-

设置元素的边框颜色。

+

设置元素的边框颜色。

borderRadius

+

borderRadius

Length

+

Length

0

+

0

设置元素的边框圆角半径。

+

设置元素的边框圆角半径。

名称

+ - - - - - - - diff --git a/zh-cn/application-dev/reference/arkui-ts/ts-universal-attributes-enable.md b/zh-cn/application-dev/reference/arkui-ts/ts-universal-attributes-enable.md index 161c1a5b34c9353ee5f64780cd0e155a94beec87..1aab03af30f1ea77b3cb594c028a93061d95867b 100644 --- a/zh-cn/application-dev/reference/arkui-ts/ts-universal-attributes-enable.md +++ b/zh-cn/application-dev/reference/arkui-ts/ts-universal-attributes-enable.md @@ -1,23 +1,31 @@ -# 禁用控制 +# 禁用控制 - -

名称

描述

+

描述

Dotted

+

Dotted

显示为一系列圆点，圆点半径为borderWidth的一半。

+

显示为一系列圆点，圆点半径为borderWidth的一半。

Dashed

+

Dashed

显示为一系列短的方形虚线。

+

显示为一系列短的方形虚线。

Solid

+

Solid

显示为一条实线。

+

显示为一条实线。

名称

+>![](../../public_sys-resources/icon-note.gif) **说明：** +>从API Version 7开始支持。后续版本如有新增内容，则采用上角标单独标记该内容的起始版本。 + +## 权限列表 + +无 + +## 属性 + + - - - - - - - diff --git a/zh-cn/application-dev/reference/arkui-ts/ts-universal-attributes-flex-layout.md b/zh-cn/application-dev/reference/arkui-ts/ts-universal-attributes-flex-layout.md index edb397c70fec81531a2efdaedbd31172d52cccbd..9bf95b5d168e5543a0fffca26cad302507849e00 100644 --- a/zh-cn/application-dev/reference/arkui-ts/ts-universal-attributes-flex-layout.md +++ b/zh-cn/application-dev/reference/arkui-ts/ts-universal-attributes-flex-layout.md @@ -1,53 +1,59 @@ -# Flex布局 +# Flex布局 >![](../../public_sys-resources/icon-note.gif) **说明：** +>- 从API Version 7开始支持。后续版本如有新增内容，则采用上角标单独标记该内容的起始版本。 >- 仅当父组件是Flex组件时生效。 - -

名称

参数类型

+

参数类型

默认值

+

默认值

描述

+

描述

enabled

+

enabled

boolean

+

boolean

true

+

true

值为true表示组件可用，可响应点击等操作；值为false时，不响应点击等操作。

+

值为true表示组件可用，可响应点击等操作；值为false时，不响应点击等操作。

名称

+## 权限列表 + +无 + +## 属性 + + - - - - - - - - - - - - - - - - - - - diff --git a/zh-cn/application-dev/reference/arkui-ts/ts-universal-attributes-gradient-color.md b/zh-cn/application-dev/reference/arkui-ts/ts-universal-attributes-gradient-color.md index 9f8221e9f4aca569ad9eefeb3edac6d35f63f0a7..55a249ec57060c262245325206e4db69a6e5afce 100644 --- a/zh-cn/application-dev/reference/arkui-ts/ts-universal-attributes-gradient-color.md +++ b/zh-cn/application-dev/reference/arkui-ts/ts-universal-attributes-gradient-color.md @@ -1,70 +1,78 @@ -# 颜色渐变 +# 颜色渐变 - -

名称

参数说明

+

参数说明

默认值

+

默认值

描述

+

描述

flexBasis

+

flexBasis

'auto' | Length

+

'auto' | Length

'auto'

+

'auto'

此属性所在的组件在Flex容器中主轴方向上基准尺寸。

+

此属性所在的组件在Flex容器中主轴方向上基准尺寸。

flexGrow

+

flexGrow

number

+

number

0

+

0

Flex容器的剩余空间分配给给此属性所在的组件的比例。

+

Flex容器的剩余空间分配给给此属性所在的组件的比例。

flexShrink

+

flexShrink

number

+

number

1

+

1

Flex容器压缩尺寸分配给此属性所在的组件的比例。

+

Flex容器压缩尺寸分配给此属性所在的组件的比例。

alignSelf

+

alignSelf

ItemAlign

+

ItemAlign

Auto

+

Auto

覆盖Flex布局容器中alignItems默认配置。

+

覆盖Flex布局容器中alignItems默认配置。

名称

+>![](../../public_sys-resources/icon-note.gif) **说明：** +>从API Version 7开始支持。后续版本如有新增内容，则采用上角标单独标记该内容的起始版本。 + +## 权限列表 + +无 + +## 属性 + + - - - - - - - - - - - - - - - @@ -74,56 +82,55 @@ GradientDirection用于描述渐变方向。 - -

名称

参数类型

+

参数类型

默认值

+

默认值

描述

+

描述

linearGradient

+

linearGradient

{

-

angle?: Angle,

-

direction?:GradientDirection,

-

colors: Array<ColorStop>

-

repeating?: boolean

-

}

+

{

+

angle?: Angle,

+

direction?:GradientDirection,

+

colors: Array<ColorStop>

+

repeating?: boolean

+

}

-

+

-

线性渐变。

-

angle: 线性渐变的角度。

-

direction: 线性渐变的方向。

-

colors: 为渐变的颜色描述。

-

repeating: 为渐变的颜色重复着色。

+

线性渐变。

+

angle: 线性渐变的角度。

+

direction: 线性渐变的方向。

+

colors: 为渐变的颜色描述。

+

repeating: 为渐变的颜色重复着色。

sweepGradient

+

sweepGradient

{

-

center: Point,

-

start?: angle,

-

end?: angle,

-

colors: Array<ColorStop>

-

repeating?: boolean

-

}

+

{

+

center: Point,

+

start?: angle,

+

end?: angle,

+

colors: Array<ColorStop>

+

repeating?: boolean

+

}

-

+

-

角度渐变。

-

center：为角度渐变的中心点。

-

start：角度渐变的起点。

-

end：角度渐变的终点。

-

colors: 为渐变的颜色描述。

-

repeating: 为渐变的颜色重复着色。

+

角度渐变。

+

center：为角度渐变的中心点。

+

start：角度渐变的起点。

+

end：角度渐变的终点。

+

colors: 为渐变的颜色描述。

+

repeating: 为渐变的颜色重复着色。

radialGradient

+

radialGradient

{

-

center: Point,

-

radius: Length,

-

colors: Array<ColorStop>

-

repeating: boolean

-

}

+

{

+

center: Point,

+

radius: Length,

+

colors: Array<ColorStop>

+

repeating: boolean

+

}

-

+

-

径向渐变。

-

center：径向渐变的中心点。

-

radius：径向渐变的半径。

-

colors: 为渐变的颜色描述。

-

repeating: 为渐变的颜色重复着色。

+

径向渐变。

+

center：径向渐变的中心点。

+

radius：径向渐变的半径。

+

colors: 为渐变的颜色描述。

+

repeating: 为渐变的颜色重复着色。

名称

+ - - - - - - - - - - - - - - - - - - - diff --git a/zh-cn/application-dev/reference/arkui-ts/ts-universal-attributes-grid.md b/zh-cn/application-dev/reference/arkui-ts/ts-universal-attributes-grid.md index 9247770a418457631917b8648cb19b9fec843d3d..f9f4a2a2a288f4f70c92ae643c722e761657954a 100644 --- a/zh-cn/application-dev/reference/arkui-ts/ts-universal-attributes-grid.md +++ b/zh-cn/application-dev/reference/arkui-ts/ts-universal-attributes-grid.md @@ -1,57 +1,63 @@ -# 栅格设置 +# 栅格设置 >![](../../public_sys-resources/icon-note.gif) **说明：** ->栅格布局的列宽、列间距由距离最近的GridContainer父组件决定。使用栅格属性的组件树上至少需要有1个GridContainer容器组件。 +>- 从API Version 7开始支持。后续版本如有新增内容，则采用上角标单独标记该内容的起始版本。 +>- 栅格布局的列宽、列间距由距离最近的GridContainer父组件决定。使用栅格属性的组件树上至少需要有1个GridContainer容器组件。 - -

名称

描述

+

描述

Left

+

Left

从右向左。

+

从右向左。

Top

+

Top

从下向上。

+

从下向上。

Right

+

Right

从左向右。

+

从左向右。

Bottom

+

Bottom

从上向下。

+

从上向下。

LeftTop

+

LeftTop

左上。

+

左上。

LeftBottom

+

LeftBottom

左下。

+

左下。

RightTop

+

RightTop

右上。

+

右上。

RightBottom

+

RightBottom

右下。

+

右下。

None

+

None

无。

+

无。

名称

+## 权限列表 + +无 + +## 属性 + + - - - - - - - - - - - - - - - @@ -103,12 +109,12 @@ struct GridContainerExample1 { } ``` -**图 1** 设备宽度为SM +**图 1** 设备宽度为SM ![](figures/设备宽度为SM.png "设备宽度为SM") -**图 2** 设备宽度为MD +**图 2** 设备宽度为MD ![](figures/设备宽度为MD.png "设备宽度为MD") -**图 3** 设备宽度为LG +**图 3** 设备宽度为LG ![](figures/设备宽度为LG.png "设备宽度为LG") diff --git a/zh-cn/application-dev/reference/arkui-ts/ts-universal-attributes-image-effect.md b/zh-cn/application-dev/reference/arkui-ts/ts-universal-attributes-image-effect.md index aad81a1f89a18bec3b0b37302ba4f4e1295b7804..3e8fcd6469f97c5e4113633474c0cfbb3c18842d 100644 --- a/zh-cn/application-dev/reference/arkui-ts/ts-universal-attributes-image-effect.md +++ b/zh-cn/application-dev/reference/arkui-ts/ts-universal-attributes-image-effect.md @@ -1,109 +1,126 @@ -# 图像效果 +# 图像效果 - -

名称

参数类型

+

参数类型

默认值

+

默认值

描述

+

描述

useSizeType

+

useSizeType

{

-

xs?: number | { span: number, offset: number },

-

sm?: number | { span: number, offset: number },

-

md?: number | { span: number, offset: number },

-

lg?: number | { span: number, offset: number }

-

}

+

{

+

xs?: number | { span: number, offset: number },

+

sm?: number | { span: number, offset: number },

+

md?: number | { span: number, offset: number },

+

lg?: number | { span: number, offset: number }

+

}

-

+

-

设置在特定设备宽度类型下的占用列数和偏移列数，span: 占用列数; offset: 偏移列数。

-

当值为number类型时，仅设置列数， 当格式如{"span": 1, "offset": 0}时，指同时设置占用列数与偏移列数。

-
  • xs: 指设备宽度类型为SizeType.XS时的占用列数和偏移列数。
  • sm: 指设备宽度类型为SizeType.SM时的占用列数和偏移列数。
-
  • md: 指设备宽度类型为SizeType.MD时的占用列数和偏移列数。
  • lg: 指设备宽度类型为SizeType.LG时的占用列数和偏移列数。
+

设置在特定设备宽度类型下的占用列数和偏移列数，span: 占用列数; offset: 偏移列数。

+

当值为number类型时，仅设置列数， 当格式如{"span": 1, "offset": 0}时，指同时设置占用列数与偏移列数。

+
  • xs: 指设备宽度类型为SizeType.XS时的占用列数和偏移列数。
  • sm: 指设备宽度类型为SizeType.SM时的占用列数和偏移列数。
+
  • md: 指设备宽度类型为SizeType.MD时的占用列数和偏移列数。
  • lg: 指设备宽度类型为SizeType.LG时的占用列数和偏移列数。

gridSpan

+

gridSpan

number

+

number

1

+

1

默认占用列数，指useSizeType属性没有设置对应尺寸的列数（span)时，占用的栅格列数。

-
说明：

设置了栅格span属性，组件的宽度由栅格布局决定。

+

默认占用列数，指useSizeType属性没有设置对应尺寸的列数（span)时，占用的栅格列数。

+
说明：

设置了栅格span属性，组件的宽度由栅格布局决定。

gridOffset

+

gridOffset

number

+

number

0

+

0

默认偏移列数，指useSizeType属性没有设置对应尺寸的偏移(offset)时， 当前组件沿着父组件Start方向，偏移的列数，也就是当前组件位于第n列。

-
说明：

1. 配置该属性后，当前组件在父组件水平方向的布局不再跟随父组件原有的布局方式，而是沿着父组件的Start方向偏移一定位移。

-

2. 偏移位移 = （列宽 + 间距）* 列数。

-

3. 设置了偏移(gridOffset)的组件之后的兄弟组件会根据该组件进行相对布局，类似相对布局。

+

默认偏移列数，指useSizeType属性没有设置对应尺寸的偏移(offset)时， 当前组件沿着父组件Start方向，偏移的列数，也就是当前组件位于第n列。

+
说明：

1. 配置该属性后，当前组件在父组件水平方向的布局不再跟随父组件原有的布局方式，而是沿着父组件的Start方向偏移一定位移。

+

2. 偏移位移 = （列宽 + 间距）* 列数。

+

3. 设置了偏移(gridOffset)的组件之后的兄弟组件会根据该组件进行相对布局，类似相对布局。

名称

+>![](../../public_sys-resources/icon-note.gif) **说明：** +>从API Version 7开始支持。后续版本如有新增内容，则采用上角标单独标记该内容的起始版本。 + +## 权限列表 + +无 + +## 属性 + + - - - - + + + + + - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - @@ -116,7 +133,7 @@ @Component struct ImageEffectsExample { build() { - Column({space：10}) { + Column({space: 10}) { // 对字体进行模糊 Text('font blur').fontSize(15).fontColor(0xCCCCCC).width('90%') Text('text').blur(3).width('90%').height(40) diff --git a/zh-cn/application-dev/reference/arkui-ts/ts-universal-attributes-layout-constraints.md b/zh-cn/application-dev/reference/arkui-ts/ts-universal-attributes-layout-constraints.md index 75b0ae3549f3cfc83d2921f2b2cc26befd3a0170..03162caad6af00534dd1e4900c7c333a2b6ec839 100644 --- a/zh-cn/application-dev/reference/arkui-ts/ts-universal-attributes-layout-constraints.md +++ b/zh-cn/application-dev/reference/arkui-ts/ts-universal-attributes-layout-constraints.md @@ -1,33 +1,41 @@ -# 布局约束 +# 布局约束 - -

名称

参数类型

+

参数类型

默认值

+

默认值

描述

+

描述

blur

+

blur

+

number

+

-

+

为当前组件添加内容模糊效果，入参为模糊半径，模糊半径越大越模糊，为0时不模糊。

+

backdropBlur

number

+

number

-

+

-

为当前组件添加内容模糊效果，入参为模糊半径，模糊半径越大越模糊，为0时不模糊。

+

为当前组件添加背景模糊效果，入参为模糊半径，模糊半径越大越模糊，为0时不模糊。

backdropBlur

+

shadow

number

+

{

+

radius: number,

+

color?: Color,

+

offsetX?: number,

+

offsetY?: number

+

}

-

+

-

为当前组件添加背景模糊效果，入参为模糊半径，模糊半径越大越模糊，为0时不模糊。

+

为当前组件添加阴影效果，入参为模糊半径(必填)、阴影的颜色(可选，默认为灰色)、X轴的偏移量(可选，默认为0)，Y轴的偏移量(可选，默认为0)，偏移量单位为px。

shadow

+

grayscale

{

-

radius: number,

-

color?: Color,

-

offsetX?: number,

-

offsetY?: number

-

}

+

number

-

+

0.0

为当前组件添加阴影效果，入参为模糊半径(必填)、阴影的颜色(可选，默认为灰色)、X轴的偏移量(可选，默认为0)，Y轴的偏移量(可选，默认为0)，偏移量单位为px。

+

为当前组件添加灰度效果。值定义为灰度转换的比例，入参1.0则完全转为灰度图像，入参则0.0图像无变化，入参在0.0和1.0之间时，效果呈线性变化。（百分比)

grayscale

+

brightness

number

+

number

0.0

+

1.0

为当前组件添加灰度效果。值定义为灰度转换的比例，入参1.0则完全转为灰度图像，入参则0.0图像无变化，入参在0.0和1.0之间时，效果呈线性变化。（百分比)

+

为当前组件添加高光效果，入参为高光比例，值为1时没有效果，小于1时亮度变暗，0为全黑；大于1时亮度增加，数值越大亮度越大。

brightness

+

saturate

number

+

number

1.0

+

1.0

为当前组件添加高光效果，入参为高光比例，值为1时没有效果，小于1时亮度变暗，0为全黑；大于1时亮度增加，数值越大亮度越大。

+

为当前组件添加饱和度效果，饱和度为颜色中的含色成分和消色成分(灰)的比例，入参为1时，显示原图像，大于1时含色成分越大，饱和度越大；小于1时消色成分越大，饱和度越小。（百分比）

saturate

+

contrast

number

+

number

1.0

+

1.0

为当前组件添加饱和度效果，饱和度为颜色中的含色成分和消色成分(灰)的比例，入参为1时，显示原图像，大于1时含色成分越大，饱和度越大；小于1时消色成分越大，饱和度越小。（百分比）

+

为当前组件添加对比度效果，入参为对比度的值，值为1时，显示原图；大于1时，值越大对比度越高，图像越清晰醒目；小于1时，值越小对比度越低；当对比度为0时，图像变为全灰。（百分比）

contrast

+

invert

number

+

number

1.0

+

0

为当前组件添加对比度效果，入参为对比度的值，值为1时，显示原图；大于1时，值越大对比度越高，图像越清晰醒目；小于1时，值越小对比度越低；当对比度为0时，图像变为全灰。（百分比）

+

反转输入的图像。入参为图像反转的比例。值为1时完全反转。值为0则图像无变化。（百分比）

invert

+

colorBlend 8+

number

+

Color

0

+

-

反转输入的图像。入参为图像反转的比例。值为1时完全反转。值为0则图像无变化。（百分比）

+

为当前组件添加颜色叠加效果，入参为叠加的颜色。

sepia

+

sepia

number

+

number

0

+

0

将图像转换为深褐色。入参为图像反转的比例。值为1则完全是深褐色的，值为0图像无变化。 （百分比）

+

将图像转换为深褐色。入参为图像反转的比例。值为1则完全是深褐色的，值为0图像无变化。 （百分比）

hueRotate

+

hueRotate

Angle

+

Angle

0deg

+

0deg

为当前组件添加色相旋转效果，入参为旋转的角度值。当入参为0deg时图像无变化(默认值是0deg)，入参没有最大值，超过360deg的值相当于又绕一圈。

+

为当前组件添加色相旋转效果，入参为旋转的角度值。当入参为0deg时图像无变化(默认值是0deg)，入参没有最大值，超过360deg的值相当于又绕一圈。

名称

+>![](../../public_sys-resources/icon-note.gif) **说明：** +>从API Version 7开始支持。后续版本如有新增内容，则采用上角标单独标记该内容的起始版本。 + +## 权限列表 + +无 + +## 属性 + + - - - - - - - - - - - @@ -84,10 +92,10 @@ struct AspectRatioExample { } ``` -**图 1** 竖屏显示 +**图 1** 竖屏显示 ![](figures/竖屏显示.gif "竖屏显示") -**图 2** 横屏显示 +**图 2** 横屏显示 ![](figures/横屏显示.gif "横屏显示") ``` diff --git a/zh-cn/application-dev/reference/arkui-ts/ts-universal-attributes-location.md b/zh-cn/application-dev/reference/arkui-ts/ts-universal-attributes-location.md index 6d1f0fd62ebdb6479258b3b0a0a26685624ed432..41fe4a1b1ea0dbe9a7673cc4d1aae1a9aa0dae3b 100644 --- a/zh-cn/application-dev/reference/arkui-ts/ts-universal-attributes-location.md +++ b/zh-cn/application-dev/reference/arkui-ts/ts-universal-attributes-location.md @@ -1,74 +1,82 @@ -# 位置设置 +# 位置设置 - -

名称

参数说明

+

参数说明

默认值

+

默认值

描述

+

描述

aspectRatio

+

aspectRatio

number

+

number

-

+

-

指定当前组件的宽高比。

+

指定当前组件的宽高比。

displayPriority

+

displayPriority

number

+

number

-

+

-

设置当前组件在布局容器中显示的优先级，当父容器空间不足时，低优先级的组件会被隐藏。

-
说明：
  • 仅在Row/Column/Flex(单行)容器组件中生效。
+

设置当前组件在布局容器中显示的优先级，当父容器空间不足时，低优先级的组件会被隐藏。

+
说明：

仅在Row/Column/Flex(单行)容器组件中生效。

名称

+>![](../../public_sys-resources/icon-note.gif) **说明：** +>从API Version 7开始支持。后续版本如有新增内容，则采用上角标单独标记该内容的起始版本。 + +## 权限列表 + +无 + +## 属性 + + - - - - - - - - - - - - - - - - - - - - - - - @@ -76,26 +84,25 @@ - Direction枚举说明 - -

名称

参数类型

+

参数类型

默认值

+

默认值

描述

+

描述

align

+

align

Alignment

+

Alignment

Center

+

Center

设置元素内容的对齐方式，只有当设置的width和height大小超过元素本身内容大小时生效。

+

设置元素内容的对齐方式，只有当设置的width和height大小超过元素本身内容大小时生效。

direction

+

direction

Direction

+

Direction

Auto

+

Auto

设置元素水平方向的布局，可选值参照Direction枚举说明。

+

设置元素水平方向的布局，可选值参照Direction枚举说明。

position

+

position

{

-

x: Length,

-

y: Length

-

}

+

{

+

x: Length,

+

y: Length

+

}

-

+

-

使用绝对定位，设置元素锚点相对于父容器顶部起点偏移位置。在布局容器中，设置该属性不影响父容器布局，仅在绘制时进行位置调整。

+

使用绝对定位，设置元素锚点相对于父容器顶部起点偏移位置。在布局容器中，设置该属性不影响父容器布局，仅在绘制时进行位置调整。

markAnchor

+

markAnchor

{

-

x: Length,

-

y: Length

-

}

+

{

+

x: Length,

+

y: Length

+

}

{

-

x: 0,

-

y: 0

-

}

+

{

+

x: 0,

+

y: 0

+

}

设置元素在位置定位时的锚点，以元素顶部起点作为基准点进行偏移。

+

设置元素在位置定位时的锚点，以元素顶部起点作为基准点进行偏移。

offset

+

offset

{

-

x: Length,

-

y: Length

-

}

+

{

+

x: Length,

+

y: Length

+

}

{

-

x: 0,

-

y: 0

-

}

+

{

+

x: 0,

+

y: 0

+

}

相对布局完成位置坐标偏移量，设置该属性，不影响父容器布局，仅在绘制时进行位置调整。

+

相对布局完成位置坐标偏移量，设置该属性，不影响父容器布局，仅在绘制时进行位置调整。

名称

+ - - - - - - - diff --git a/zh-cn/application-dev/reference/arkui-ts/ts-universal-attributes-menu.md b/zh-cn/application-dev/reference/arkui-ts/ts-universal-attributes-menu.md index 778b429ce710e09cbf025bf17ea98cec264444f5..54c82a37bd93a2e7a779747bc97a0b46925a0d66 100644 --- a/zh-cn/application-dev/reference/arkui-ts/ts-universal-attributes-menu.md +++ b/zh-cn/application-dev/reference/arkui-ts/ts-universal-attributes-menu.md @@ -1,23 +1,31 @@ -# Menu控制 +# Menu控制 - -

名称

描述

+

描述

Ltr

+

Ltr

元素从左到右布局。

+

元素从左到右布局。

Rtl

+

Rtl

元素从右到左布局。

+

元素从右到左布局。

Auto

+

Auto

使用系统默认布局方向。

+

使用系统默认布局方向。

名称

+>![](../../public_sys-resources/icon-note.gif) **说明：** +>从API Version 7开始支持。后续版本如有新增内容，则采用上角标单独标记该内容的起始版本。 + +## 权限列表 + +无 + +## 属性 + + - - - - - - - @@ -25,27 +33,26 @@ - MenuItem - -

名称

参数类型

+

参数类型

默认值

+

默认值

描述

+

描述

bindMenu

+

bindMenu

Array<MenuItem>

+

Array<MenuItem> | CustomBuilder8+

-

+

-

给组件绑定菜单，点击后弹出菜单。

+

给组件绑定菜单，点击后弹出菜单。弹出菜单项支持文本和自定义两种功能。

名称

+ - - - - - - - - @@ -57,7 +64,7 @@ ``` @Entry @Component -struct menuExample { +struct MenuExample { build() { Column() { Text('click for Menu') @@ -84,3 +91,51 @@ struct menuExample { ![](figures/menu.gif) +``` +import router from '@system.router'; + +@Entry +@Component +struct MenuExample { + @Builder MenuBuilder() { + Flex({ direction: FlexDirection.Column, justifyContent: FlexAlign.Center, alignItems: ItemAlign.Center }) { + Text('text1') + .fontSize(20) + .width(100) + .height(50) + .textAlign(TextAlign.Center) + + Divider().height(10) + + Text('text2') + .fontSize(20) + .width(100) + .height(50) + .textAlign(TextAlign.Center) + + Divider().height(10) + + Button('Next') + .fontSize(20) + .width(100) + .height(50) + .onClick(() => { + router.push({ uri: 'pages/details' }) + }) + + }.width(100) + } + + build() { + Column() { + Text('click for menu') + } + .width('100%') + .margin({ top: 5 }) + .bindMenu(this.MenuBuilder) + } +} +``` + +![](figures/GIF.gif) + diff --git a/zh-cn/application-dev/reference/arkui-ts/ts-universal-attributes-opacity.md b/zh-cn/application-dev/reference/arkui-ts/ts-universal-attributes-opacity.md index 167cd5b618dba2deb993a8467333855478244f3b..72eb6cff96e81bd30767a19d67a7373ee87084a2 100644 --- a/zh-cn/application-dev/reference/arkui-ts/ts-universal-attributes-opacity.md +++ b/zh-cn/application-dev/reference/arkui-ts/ts-universal-attributes-opacity.md @@ -1,25 +1,33 @@ -# 透明度设置 +# 透明度设置 + +>![](../../public_sys-resources/icon-note.gif) **说明：** +>从API Version 7开始支持。后续版本如有新增内容，则采用上角标单独标记该内容的起始版本。 设置组件的透明度。 - -

名称

类型

+

类型

描述

+

描述

value

+

value

string

+

string

菜单项文本。

+

菜单项文本。

action

+

action

() => void

+

() => void

点击菜单项的事件回调。

+

点击菜单项的事件回调。

名称

+## 权限列表 + +无 + +## 属性 + + - - - - - - - diff --git a/zh-cn/application-dev/reference/arkui-ts/ts-universal-attributes-overlay.md b/zh-cn/application-dev/reference/arkui-ts/ts-universal-attributes-overlay.md index 2e2ec02f8c5df1b1f9f669805b5ef3783a831e61..92753d44dfe52624026d3685f4f476a635b720af 100644 --- a/zh-cn/application-dev/reference/arkui-ts/ts-universal-attributes-overlay.md +++ b/zh-cn/application-dev/reference/arkui-ts/ts-universal-attributes-overlay.md @@ -1,30 +1,38 @@ -# 浮层 +# 浮层 - -

名称

参数类型

+

参数类型

默认值

+

默认值

描述

+

描述

opacity

+

opacity

number

+

number

1

+

1

元素的不透明度，取值范围为0到1，1表示为不透明，0表示为完全透明。

+

元素的不透明度，取值范围为0到1，1表示为不透明，0表示为完全透明。

名称

+>![](../../public_sys-resources/icon-note.gif) **说明：** +>从API Version 7开始支持。后续版本如有新增内容，则采用上角标单独标记该内容的起始版本。 + +## 权限列表 + +无 + +## 属性 + + - - - - - - - @@ -44,7 +52,7 @@ struct OverlayExample { Column() { Image($r('app.media.img')) .width(240).height(240) - .overlay("Don't walk and play with your phone.", { align: Alignment.Bottom, offset: { x: 0, y: -15 } }) + .overlay("Winter is a beautiful season, especially when it snows", { align: Alignment.Bottom, offset: { x: 0, y: -15 } }) }.border({ color: Color.Black, width: 2 }) }.width('100%') }.padding({ top: 20 }) @@ -52,5 +60,5 @@ struct OverlayExample { } ``` -![](figures/overlay.gif) +![](figures/overlay.png) diff --git a/zh-cn/application-dev/reference/arkui-ts/ts-universal-attributes-popup.md b/zh-cn/application-dev/reference/arkui-ts/ts-universal-attributes-popup.md index 3528f97238f219fb30791b757c310e0259239cfe..02ec3ab0feb49a7a92992ca3099359cd31cc76fb 100644 --- a/zh-cn/application-dev/reference/arkui-ts/ts-universal-attributes-popup.md +++ b/zh-cn/application-dev/reference/arkui-ts/ts-universal-attributes-popup.md @@ -1,48 +1,268 @@ -# Popup控制 +# Popup控制 - -

名称

参数类型

+

参数类型

默认值

+

默认值

描述

+

描述

overlay

+

overlay

title: string,

-

options: {

-

align?: Alignment,

-

offset?: {x: number, y: number}

-

}

+

title: string,

+

options: {

+

align?: Alignment,

+

offset?: {x: number, y: number}

+

}

{

-

align: Alignment.Center,

-

offset: {0, 0}

-

}

+

{

+

align: Alignment.Center,

+

offset: {0, 0}

+

}

在当前组件上，增加遮罩文本，布局与当前组件相同。

+

在当前组件上，增加遮罩文本，布局与当前组件相同。

名称

+>![](../../public_sys-resources/icon-note.gif) **说明：** +>从API Version 7开始支持。后续版本如有新增内容，则采用上角标单独标记该内容的起始版本。 + +## 权限列表 + +无 + +## 属性 + + - - - - - - -

名称

参数类型

+

参数类型

默认值

+

默认值

参数描述

+

描述

bindPopup

+

bindPopup

{

-

show: boolean,

-

popup: {

-

message: string,

-

placementOnTop: boolean,

-

primaryButton?: {

-

value: string,

-

action: ()=>void

-

},

-

secondaryButton?:{

-

value: string,

-

action: () =>void

-

},

-

onStateChange?: (isVisible: boolean) => void

-

}

-

}

+

show: boolean,

+

popup: PopupOption | CustomPopupOption

-

+

-

show: 当前弹窗提示是否显示，默认值为false。

-

message: 弹窗信息内容。

-

placementOnTop：是否在组件上方显示，默认值为false。

-

primaryButton: 第一个按钮。

-

secondaryButton: 第二个按钮。

-

onStateChange: 弹窗状态变化事件回调，参数为弹窗当前的显示状态。

+

给组件绑定Popup，点击弹出弹窗。

+

show: 创建页面弹窗提示是否默认显示，默认值为false。

+

popup: 配置当前弹窗提示的参数。
+- PopupOption类型接口说明 + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + +

名称

+

类型

+

必填

+

默认值

+

描述

+

message

+

string

+

是

+

-

+

弹窗信息内容。

+

placementOnTop

+

boolean

+

否

+

false

+

是否在组件上方显示，默认值为false。

+

primaryButton

+

{

+

value: string,

+

action: () => void

+

}

+

否

+

-

+

第一个按钮。

+

value: 弹窗里主按钮的文本。

+

action: 点击主按钮的回调函数。

+

secondaryButton

+

{

+

value: string,

+

action: () => void

+

}

+

否

+

-

+

第二个按钮。

+

value: 弹窗里辅助按钮的文本。

+

action: 点击辅助按钮的回调函数。

+

onStateChange

+

(isVisible: boolean) => void

+

否

+

-

+

弹窗状态变化事件回调，参数isVisible为弹窗当前的显示状态。

+
+ +- CustomPopupOption类型接口说明8+ + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + +

名称

+

类型

+

必填

+

默认值

+

描述

+

builder

+

() => any

+

是

+

-

+

提示气泡内容的构造器。

+

placement

+

Placement

+

否

+

Placement.Bottom

+

气泡组件优先显示的位置，当前位置显示不下时，会自动调整位置。

+

maskColor

+

Color

+

否

+

-

+

提示气泡遮障层的颜色。

+

popupColor

+

Color

+

否

+

-

+

提示气泡的颜色。

+

enableArrow

+

boolean

+

否

+

true

+

是否显示箭头，只有上、下方向的气泡会显示箭头。

+

autoCancel

+

boolean

+

否

+

true

+

页面有操作时，是否自动关闭气泡

+

onStateChange

+

(isVisible: boolean) => void

+

否

+

-

+

弹窗状态变化事件回调，参数为弹窗当前的显示状态。

+
+ +- Placement枚举说明8+ + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + +

名称

+

描述

+

Left

+

气泡提示位于组件左侧。

+

Right

+

气泡提示位于组件右侧。

+

Top

+

气泡提示位于组件上侧。

+

Bottom

+

气泡提示位于组件下侧。

+

TopLeft

+

气泡提示位于组件左上角。

+

TopRight

+

气泡提示位于组件右上角。

+

BottomLeft

+

气泡提示位于组件左下角。

+

BottomRight

+

气泡提示位于组件右下角。

+
+ + ## 示例 ``` @@ -51,16 +271,23 @@ struct PopupExample { @State noHandlePopup: boolean = false @State handlePopup: boolean = false + @State customPopup: boolean = false + + @Builder popupBuilder() { + Row({ space: 2 }) { + Image('/resource/ic_public_thumbsup.svg').width(24).height(24).margin({ left: -5 }) + Text('Custom Popup').fontSize(12) + }.width(100).height(50).backgroundColor(Color.White) + } build() { - Column({ space: 160 }) { + Flex({ direction: FlexDirection.Column }) { Button('no handle popup') .onClick(() => { this.noHandlePopup = !this.noHandlePopup }) .bindPopup(this.noHandlePopup, { - - message: 'content content content ...', + message: 'content1 content1', placementOnTop: false, onStateChange: (e) => { console.info(e.isVisible.toString()) @@ -68,18 +295,17 @@ struct PopupExample { this.noHandlePopup = false } } - }) + }) + .position({ x: 100, y: 50 }) Button('with handle popup') .onClick(() => { this.handlePopup = !this.handlePopup }) .bindPopup(this.handlePopup, { - - message: 'content content content ...', + message: 'content2 content2', placementOnTop: true, - secondaryButton: { - + primaryButton: { value: 'ok', action: () => { this.handlePopup = !this.handlePopup @@ -90,6 +316,25 @@ struct PopupExample { console.info(e.isVisible.toString()) } }) + .position({ x: 100, y: 200 }) + + Button('custom popup') + .onClick(() => { + this.customPopup = !this.customPopup + }) + .bindPopup(this.customPopup, { + builder: this.popupBuilder, + placement: Placement.Bottom, + maskColor: 0x33000000, + popupColor: Color.White, + enableArrow: true, + onStateChange: (e) => { + if (!e.isVisible) { + this.customPopup = false + } + } + }) + .position({ x: 100, y: 350 }) }.width('100%').padding({ top: 5 }) } } diff --git a/zh-cn/application-dev/reference/arkui-ts/ts-universal-attributes-response-region.md b/zh-cn/application-dev/reference/arkui-ts/ts-universal-attributes-response-region.md new file mode 100644 index 0000000000000000000000000000000000000000..e609b2caad3f6ddbbcd11f272bfd9852d3cf3df7 --- /dev/null +++ b/zh-cn/application-dev/reference/arkui-ts/ts-universal-attributes-response-region.md @@ -0,0 +1,131 @@ +# 触摸热区设置 + +>![](../../public_sys-resources/icon-note.gif) **说明：** +>从API Version 8开始支持。后续版本如有新增内容，则采用上角标单独标记该内容的起始版本。 + +适用于支持通用点击事件、通用触摸事件、通用手势处理的组件。 + +## 权限列表 + +无 + +## 属性 + + + + + + + + + + + + + +

名称

+

参数类型

+

默认值

+

描述

+

responseRegion

+

Array<Rectangle> | Rectangle

+

{

+

x：0,

+

y：0,

+

width：'100%',

+

height：'100%'

+

}

+

设置一个或多个触摸热区，包括位置和大小。

+
说明：

百分比是相对于组件本身来度量的。

+

x和y可以设置正负值百分比。当x设置为'100%'时表示热区往右偏移组件本身宽度大小，当x设置为'-100%'时表示热区往左偏移组件本身宽度大小。当y设置为'100%'时表示热区往下偏移组件本身高度大小，当y设置为'-100%'时表示热区往上偏移组件本身高度大小。

+

width和height只能设置正值百分比。width：'100%'表示热区宽度设置为该组件本身的宽度。比如组件本身宽度是100vp，那么'100%'表示热区宽度也为100vp。height：'100%'表示热区高度设置为该组件本身的高度。

+
+
+ +- Rectangle对象说明 + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + +

名称

+

类型

+

必填

+

默认值

+

描述

+

x

+

Length

+

否

+

0vp

+

触摸点相对于组件本身左边沿的X坐标。

+

y

+

Length

+

否

+

0vp

+

触摸点相对于组件本身左边沿的Y坐标。

+

width

+

Length

+

否

+

100%

+

触摸热区范围的宽度。

+

height

+

Length

+

否

+

100%

+

触摸热区范围的高度。

+
+ + >![](../../public_sys-resources/icon-note.gif) **说明：** + >当x和y都设置为正值时，表示组件的触摸热区的范围整体往组件本身右下角偏移，偏移的大小可通过数值来设置。 + + +## 示例 + +``` +@Entry +@Component +struct ResponseRegionExample { + build() { + Column() { + Toggle({ type: ToggleType.Checkbox, isOn: true }) + .selectedColor(0x39a2db) + .backgroundColor(0xAFEEEE) + .responseRegion({ x: 1.0, y: 1.0, width: 400, height: 400 }) + .onChange((isOn: boolean) => { + console.info('Component status:' + isOn) + }) + }.width('100%').margin({ top: 5 }) + } +} +``` + +![](figures/GIF1.gif) + diff --git a/zh-cn/application-dev/reference/arkui-ts/ts-universal-attributes-sharp-clipping.md b/zh-cn/application-dev/reference/arkui-ts/ts-universal-attributes-sharp-clipping.md index 4255b0081698d73c4741a2b3f75dbcc736739e09..be60088552ef4b20a52a56c240824349d2c38636 100644 --- a/zh-cn/application-dev/reference/arkui-ts/ts-universal-attributes-sharp-clipping.md +++ b/zh-cn/application-dev/reference/arkui-ts/ts-universal-attributes-sharp-clipping.md @@ -1,32 +1,40 @@ -# 形状裁剪 +# 形状裁剪 - -

名称

+>![](../../public_sys-resources/icon-note.gif) **说明：** +>从API Version 7开始支持。后续版本如有新增内容，则采用上角标单独标记该内容的起始版本。 + +## 权限列表 + +无 + +## 属性 + + - - - - - - - - - - - diff --git a/zh-cn/application-dev/reference/arkui-ts/ts-universal-attributes-size.md b/zh-cn/application-dev/reference/arkui-ts/ts-universal-attributes-size.md index 7a4372c077ae8f8c34b4c04199f61a7a59467c38..690ce279746778022e97634e1205e61371ec5181 100644 --- a/zh-cn/application-dev/reference/arkui-ts/ts-universal-attributes-size.md +++ b/zh-cn/application-dev/reference/arkui-ts/ts-universal-attributes-size.md @@ -1,106 +1,112 @@ -# 尺寸设置 +# 尺寸设置 -设置组件尺寸相关信息。 +>![](../../public_sys-resources/icon-note.gif) **说明：** +>从API Version 7开始支持。后续版本如有新增内容，则采用上角标单独标记该内容的起始版本。 - -

名称

参数类型

+

参数类型

默认值

+

默认值

描述

+

描述

clip

+

clip

Shape | boolean

+

Shape | boolean

false

+

false

参数为Shape类型时，按指定的形状对当前组件进行裁剪；参数为boolean类型时，设置是否按照边缘轮廓进行裁剪。

+

参数为Shape类型时，按指定的形状对当前组件进行裁剪；参数为boolean类型时，设置是否按照边缘轮廓进行裁剪。

mask

+

mask

Shape

+

Shape

-

+

-

在当前组件上加上指定形状的遮罩。

+

在当前组件上加上指定形状的遮罩。

名称

+## 权限列表 + +无 + +## 属性 + + - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - diff --git a/zh-cn/application-dev/reference/arkui-ts/ts-universal-attributes-text-style.md b/zh-cn/application-dev/reference/arkui-ts/ts-universal-attributes-text-style.md index c0cd5707f1c43405a8c03c15c68eadb5f536e046..c7de8fb1a92586b4ee4cd1197896097b7778b2ca 100644 --- a/zh-cn/application-dev/reference/arkui-ts/ts-universal-attributes-text-style.md +++ b/zh-cn/application-dev/reference/arkui-ts/ts-universal-attributes-text-style.md @@ -1,62 +1,70 @@ -# 文本样式设置 +# 文本样式设置 + +>![](../../public_sys-resources/icon-note.gif) **说明：** +>从API Version 7开始支持。后续版本如有新增内容，则采用上角标单独标记该内容的起始版本。 针对包含文本元素的组件，设置文本样式。 - -

名称

参数说明

+

参数说明

默认值

+

默认值

描述

+

描述

width

+

width

Length

+

Length

-

+

-

设置组件自身的宽度，缺省时使用元素自身内容需要的宽度。

+

设置组件自身的宽度，缺省时使用元素自身内容需要的宽度。

height

+

height

Length

+

Length

-

+

-

设置组件自身的高度，缺省时使用元素自身内容需要的高度。

+

设置组件自身的高度，缺省时使用元素自身内容需要的高度。

size

+

size

{

-

width?: Length,

-

height?: Length

-

}

+

{

+

width?: Length,

+

height?: Length

+

}

-

+

-

设置高宽尺寸。

+

设置高宽尺寸。

padding

+

padding

{

-

top?: Length,

-

right?: Length,

-

bottom?: Length,

-

left?: Length

-

} | Length

+

{

+

top?: Length,

+

right?: Length,

+

bottom?: Length,

+

left?: Length

+

} | Length

0

+

0

设置内边距属性。

-

参数为Length类型时，四个方向内边距同时生效。

+

设置内边距属性。

+

参数为Length类型时，四个方向内边距同时生效。

margin

+

margin

{

-

top?: Length,

-

right?: Length,

-

bottom?: Length,

-

left?: Length

-

}

-

| Length

+

{

+

top?: Length,

+

right?: Length,

+

bottom?: Length,

+

left?: Length

+

}

+

| Length

0

+

0

设置外边距属性。

-

参数为Length类型时，四个方向外边距同时生效。

+

设置外边距属性。

+

参数为Length类型时，四个方向外边距同时生效。

constraintSize

+

constraintSize

{

-

minWidth?: Length,

-

maxWidth?: Length,

-

minHeight?: Length,

-

maxHeight?: Lenght

-

}

+

{

+

minWidth?: Length,

+

maxWidth?: Length,

+

minHeight?: Length,

+

maxHeight?: Lenght

+

}

{

-

minWidth: 0,

-

maxWidth: Infinity,

-

minHeight: 0,

-

maxHeight: Infinity

-

}

+

{

+

minWidth: 0,

+

maxWidth: Infinity,

+

minHeight: 0,

+

maxHeight: Infinity

+

}

设置约束尺寸，组件布局时，进行尺寸范围限制。

+

设置约束尺寸，组件布局时，进行尺寸范围限制。

layoutWeight

+

layoutWeight

number

+

number

0

+

0

容器尺寸确定时，元素与兄弟节点主轴布局尺寸按照权重进行分配，忽略本身尺寸设置。

-
说明：

仅在Row/Column/Flex布局中生效。

+

容器尺寸确定时，元素与兄弟节点主轴布局尺寸按照权重进行分配，忽略本身尺寸设置。

+
说明：

仅在Row/Column/Flex布局中生效。

名称

+## 权限列表 + +无 + +## 属性 + + - - - - - - - - - - - - - - - - - - - - - - - @@ -64,21 +72,20 @@ - FontStyle枚举说明 - -

名称

参数类型

+

参数类型

默认值

+

默认值

描述

+

描述

fontColor

+

fontColor

Color

+

Color

-

+

-

设置文本颜色。

+

设置文本颜色。

fontSize

+

fontSize

Length

+

Length

-

+

-

设置文本尺寸，Length为number类型时，使用fp单位。

+

设置文本尺寸，Length为number类型时，使用fp单位。

fontStyle

+

fontStyle

FontStyle

+

FontStyle

Normal

+

Normal

设置文本的字体样式。

+

设置文本的字体样式。

fontWeight

+

fontWeight

number | FontWeight

+

number | FontWeight

Normal

+

Normal

设置文本的字体粗细，number类型取值[100, 900]，取值间隔为100，默认为400，取值越大，字体越粗。

-

提供常用枚举值，参考：FontWeight。

+

设置文本的字体粗细，number类型取值[100, 900]，取值间隔为100，默认为400，取值越大，字体越粗。

+

提供常用枚举值，参考：FontWeight。

fontFamily

+

fontFamily

string

+

string

-

+

-

设置文本的字体列表。使用多个字体，使用','进行分割，优先级按顺序生效。例如：'Arial, sans-serif'。

+

设置文本的字体列表。使用多个字体，使用','进行分割，优先级按顺序生效。例如：'Arial, sans-serif'。

名称

+ - - - - - @@ -87,41 +94,40 @@ - FontWeight枚举说明 - -

名称

描述

+

描述

Normal

+

Normal

标准的字体样式。

+

标准的字体样式。

Italic

+

Italic

斜体的字体样式。

+

斜体的字体样式。

名称

+ - - - - - - - - - - - - - diff --git a/zh-cn/application-dev/reference/arkui-ts/ts-universal-attributes-touchable.md b/zh-cn/application-dev/reference/arkui-ts/ts-universal-attributes-touchable.md new file mode 100644 index 0000000000000000000000000000000000000000..db8a12c6e6591f53c6a0799c9010da587c45cbc6 --- /dev/null +++ b/zh-cn/application-dev/reference/arkui-ts/ts-universal-attributes-touchable.md @@ -0,0 +1,64 @@ +# 点击控制 + +>![](../../public_sys-resources/icon-note.gif) **说明：** +>从API Version 8开始支持。后续版本如有新增内容，则采用上角标单独标记该内容的起始版本。 + +## 权限列表 + +无 + +## 属性 + +

名称

描述

+

描述

Lighter

+

Lighter

字体较细。

+

字体较细。

Normal

+

Normal

字体粗细正常。

+

字体粗细正常。

Regular

+

Regular

字体粗细正常。

+

字体粗细正常。

Medium

+

Medium

字体粗细适中。

+

字体粗细适中。

Bold

+

Bold

字体较粗。

+

字体较粗。

Bolder

+

Bolder

字体非常粗。

+

字体非常粗。
+ + + + + + + + + + + +

名称

+

参数类型

+

默认值

+

描述

+

touchable

+

boolean

+

true

+

设置当前组件是否可以被触摸。

+
+ +## 示例 + +``` +@Entry +@Component +struct TouchAbleExample { + @State text1: string = '' + @State text2: string = '' + + build() { + Stack() { + Rect() + .fill(Color.Gray).width(150).height(150) + .onClick(() => { + console.info(this.text1 = 'Rect Clicked') + }) + .overlay(this.text1, { align: Alignment.Bottom, offset: { x: 0, y: 20 } }) + Ellipse() + .fill(Color.Pink).width(150).height(80) + .touchable(false) // 点击Ellipse区域，不会打印 “Ellipse Clicked” + .onClick(() => { + console.info(this.text2 = 'Ellipse Clicked') + }) + .overlay(this.text2, { align: Alignment.Bottom, offset: { x: 0, y: 20 } }) + }.margin(100) + } +} +``` + +![](figures/GIF2.gif) + diff --git a/zh-cn/application-dev/reference/arkui-ts/ts-universal-attributes-transformation.md b/zh-cn/application-dev/reference/arkui-ts/ts-universal-attributes-transformation.md index 112f7c5f51d0afbefd5c348c85f79fecab9e3065..e895b85b9ebd3250ff047ae9ef858f205c176391 100644 --- a/zh-cn/application-dev/reference/arkui-ts/ts-universal-attributes-transformation.md +++ b/zh-cn/application-dev/reference/arkui-ts/ts-universal-attributes-transformation.md @@ -1,84 +1,92 @@ -# 图形变换 +# 图形变换 - -

名称

+>![](../../public_sys-resources/icon-note.gif) **说明：** +>从API Version 7开始支持。后续版本如有新增内容，则采用上角标单独标记该内容的起始版本。 + +## 权限列表 + +无 + +## 属性 + + - - - - - - - + + + - - - - - - - - + + + - - - - diff --git a/zh-cn/application-dev/reference/arkui-ts/ts-universal-attributes-visibility.md b/zh-cn/application-dev/reference/arkui-ts/ts-universal-attributes-visibility.md index 8d0dc54ba15477b9f4296a73ca1c4a96a199a9e1..a006bafc170a4e44ff1b3ee610cbe2a7f89c1930 100644 --- a/zh-cn/application-dev/reference/arkui-ts/ts-universal-attributes-visibility.md +++ b/zh-cn/application-dev/reference/arkui-ts/ts-universal-attributes-visibility.md @@ -1,23 +1,31 @@ -# 显隐控制 +# 显隐控制 - -

名称

参数类型

+

参数类型

默认值

+

默认值

描述

+

描述

rotate

-

{

-

x?: number,

-

y?: number,

-

z?: number,

-

angle?: Angle,

-

centerX?: Length,

-

centerY?: Length

-

}

-

{

-

x: 0,

-

y: 0,

-

z: 0,

-

angle: 0,

-

centerX: '50%',

-

centerY: '50%'

-

}

-

(x, y, z)指定一个矢量，表示旋转轴，正角度为顺时针转动，负角度为逆时针转动，默认值为0，同时可以通过centerX和centerY设置旋转的中心点。

+

rotate

+

{

+

x?: number,

+

y?: number,

+

z?: number,

+

angle?: Angle,

+

centerX?: Length,

+

centerY?: Length

+

}

+

{

+

x: 0,

+

y: 0,

+

z: 0,

+

angle: 0,

+

centerX: '50%',

+

centerY: '50%'

+

}

+

(x, y, z)指定一个矢量，表示旋转轴，正角度为顺时针转动，负角度为逆时针转动，默认值为0，同时可以通过centerX和centerY设置旋转的中心点。

translate

+

translate

{

-

x?: Length,

-

y?: Length,

-

z? : Length

-

}

+

{

+

x?: Length,

+

y?: Length,

+

z? : Length

+

}

{

-

x: 0,

-

y: 0,

-

z: 0

-

}

+

{

+

x: 0,

+

y: 0,

+

z: 0

+

}

可以分别设置X轴、Y轴、Z轴的平移距离，距离的正负控制平移的方向，默认值为0。

+

可以分别设置X轴、Y轴、Z轴的平移距离，距离的正负控制平移的方向，默认值为0。

scale

-

{

-

x?: number,

-

y?: number,

-

z?: number,

-

centerX?: Length,

-

centerY?: Length

-

}

-

{

-

x: 1,

-

y: 1,

-

z: 1,

-

centerX:'50%',

-

centerY:'50%'

-

}

-

可以分别设置X轴、Y轴、Z轴的缩放比例，默认值为1，同时可以通过centerX和centerY设置缩放的中心点。

+

scale

+

{

+

x?: number,

+

y?: number,

+

z?: number,

+

centerX?: Length,

+

centerY?: Length

+

}

+

{

+

x: 1,

+

y: 1,

+

z: 1,

+

centerX:'50%',

+

centerY:'50%'

+

}

+

可以分别设置X轴、Y轴、Z轴的缩放比例，默认值为1，同时可以通过centerX和centerY设置缩放的中心点。

transform

+

transform

matrix: Matrix4

+

matrix: Matrix4

-

+

-

设置当前组件的变换矩阵。

+

设置当前组件的变换矩阵。

名称

+>![](../../public_sys-resources/icon-note.gif) **说明：** +>从API Version 7开始支持。后续版本如有新增内容，则采用上角标单独标记该内容的起始版本。 + +## 权限列表 + +无 + +## 属性 + + - - - - - - - @@ -25,26 +33,25 @@ - Visibility枚举说明 - -

名称

参数类型

+

参数类型

默认值

+

默认值

描述

+

描述

visibility

+

visibility

Visibility

+

Visibility

Visible

+

Visible

控制当前组件显示或隐藏。

+

控制当前组件显示或隐藏。

名称

+ - - - - - - - diff --git a/zh-cn/application-dev/reference/arkui-ts/ts-universal-attributes-z-order.md b/zh-cn/application-dev/reference/arkui-ts/ts-universal-attributes-z-order.md index 6a01c0478eb3170d1b793891cd40fe69db3cc0b6..94f384440bd2f5d649fb35f96b32e0f66d370f61 100644 --- a/zh-cn/application-dev/reference/arkui-ts/ts-universal-attributes-z-order.md +++ b/zh-cn/application-dev/reference/arkui-ts/ts-universal-attributes-z-order.md @@ -1,23 +1,31 @@ -# Z序控制 +# Z序控制 - -

名称

描述

+

描述

Hidden

+

Hidden

隐藏，但参与布局进行占位。

+

隐藏，但参与布局进行占位。

Visible

+

Visible

显示。

+

显示。

None

+

None

隐藏，但不参与布局，不进行占位。

+

隐藏，但不参与布局，不进行占位。

名称

+>![](../../public_sys-resources/icon-note.gif) **说明：** +>从API Version 7开始支持。后续版本如有新增内容，则采用上角标单独标记该内容的起始版本。 + +## 权限列表 + +无 + +## 属性 + + - - - - - - - diff --git a/zh-cn/application-dev/reference/arkui-ts/ts-universal-attributes.md b/zh-cn/application-dev/reference/arkui-ts/ts-universal-attributes.md index 25dfcb01389e66e7118d9437d495195f5bc1bacb..3849fa6b3982007b7cfaea2d8048040ad916b682 100644 --- a/zh-cn/application-dev/reference/arkui-ts/ts-universal-attributes.md +++ b/zh-cn/application-dev/reference/arkui-ts/ts-universal-attributes.md @@ -1,4 +1,4 @@ -# 通用属性 +# 通用属性 - **[尺寸设置](ts-universal-attributes-size.md)** @@ -38,4 +38,8 @@ - **[Menu控制](ts-universal-attributes-menu.md)** +- **[点击控制](ts-universal-attributes-touchable.md)** + +- **[触摸热区设置](ts-universal-attributes-response-region.md)** + diff --git a/zh-cn/application-dev/reference/arkui-ts/ts-universal-components.md b/zh-cn/application-dev/reference/arkui-ts/ts-universal-components.md index 5a2eead75a19e91a1c96d37a14d76e5164a78a09..ce59ac8b9d6c89e4bb363f3a57fd9c74f081e2b5 100644 --- a/zh-cn/application-dev/reference/arkui-ts/ts-universal-components.md +++ b/zh-cn/application-dev/reference/arkui-ts/ts-universal-components.md @@ -1,4 +1,4 @@ -# 通用 +# 通用 - **[通用事件](ts-universal-events.md)** diff --git a/zh-cn/application-dev/reference/arkui-ts/ts-universal-events-click.md b/zh-cn/application-dev/reference/arkui-ts/ts-universal-events-click.md index cb5b20aebe655b2803d06e09803751017add6389..6a9daa3f1ca973879490def878dbeeab7561f4a1 100644 --- a/zh-cn/application-dev/reference/arkui-ts/ts-universal-events-click.md +++ b/zh-cn/application-dev/reference/arkui-ts/ts-universal-events-click.md @@ -1,19 +1,27 @@ -# 点击事件 +# 点击事件 - -

名称

参数类型

+

参数类型

默认值

+

默认值

描述

+

描述

zIndex

+

zIndex

number

+

number

0

+

0

同一容器中兄弟组件显示层级关系，z值越大，显示层级越高。

+

同一容器中兄弟组件显示层级关系，z值越大，显示层级越高。

名称

+>![](../../public_sys-resources/icon-note.gif) **说明：** +>从API Version 7开始支持。后续版本如有新增内容，则采用上角标单独标记该内容的起始版本。 + +## 权限列表 + +无 + +## 事件 + + - - - - - @@ -21,48 +29,142 @@ - ClickEvent对象说明 - -

名称

支持冒泡

+

支持冒泡

功能描述

+

功能描述

onClick(callback: (event?: ClickEvent) => void)

+

onClick(callback: (event?: ClickEvent) => void)

否

+

否

点击动作触发该方法调用，event参数见ClickEvent介绍。

+

点击动作触发该方法调用，event参数见ClickEvent介绍。

属性名称

+ - - - + + + + + + + + + + + + - - - - - - - - - +

属性名称

属性类型

+

类型

描述

+

描述

screenX

+

screenX

+

number

+

点击点相对于设备屏幕左边沿的X坐标。

+

screenY

+

number

+

点击点相对于设备屏幕上边沿的Y坐标。

+

x

+

number

+

点击点相对于被点击元素左边沿的X坐标。

+

y

number

+

number

点击点相对于设备屏幕左边沿的X坐标。

+

点击点相对于被点击元素上边沿的Y坐标。

screenY

+

target8+

number

+

EventTarget

点击点相对于设备屏幕上边沿的Y坐标。

+

被点击元素对象。

x

+

timestamp

number

+

number

点击点相对于被点击元素左边沿的X坐标。

+

事件时间戳。

y

+
+ +- EventTarget对象说明8+ + + + + + + + + + + + +

名称

+

参数类型

+

描述

+

area

+

Area

+

目标元素的区域信息。

+
+ +- Area对象说明8+ + + + + + + + + + + + + + + + + + + + + + + + +

属性名称

+

类型

+

描述

+

width

+

Length

+

目标元素的宽度。

+

height

+

Length

+

目标元素的高度。

+

pos

+

Position

+

目标元素左上角相对父元素左上角的位置。

+

globalPos

+

Position

+

目标元素左上角相对页面左上角的位置。

+
+ +- Position对象说明8+ + + + + + + + - - - - - @@ -79,15 +181,18 @@ struct ClickExample { build() { Column() { - Button('Click').backgroundColor(0x2788D9) + Button('Click').backgroundColor(0x2788D9).width(100).height(40) .onClick((event: ClickEvent) => { - console.info(this.text = 'Button clicked!\n X:' + event.x + '\n' + ' Y:' + event.y) + console.info(this.text = 'Click Point:' + '\n screenX:' + event.screenX + '\n screenY:' + event.screenY + + '\n x :' + event.x + '\n y:' + event.y + '\ntarget:' + '\n component globalPos：（' + + event.target.area.globalPos.x + ',' + event.target.area.globalPos.y + '）\n width:' + + event.target.area.width + '\n height：' + event.target.area.height) }) Text(this.text).padding(15) - }.height(300).width('100%').padding(35) + }.height(350).width('100%').padding(10) } } ``` -![](figures/Click.gif) +![](figures/zh-cn_image_0000001237355087.gif) diff --git a/zh-cn/application-dev/reference/arkui-ts/ts-universal-events-component-area-change.md b/zh-cn/application-dev/reference/arkui-ts/ts-universal-events-component-area-change.md new file mode 100644 index 0000000000000000000000000000000000000000..3a426f2019d4784180c7443617ff6e91667bde36 --- /dev/null +++ b/zh-cn/application-dev/reference/arkui-ts/ts-universal-events-component-area-change.md @@ -0,0 +1,58 @@ +# 组件区域变化事件 + +>![](../../public_sys-resources/icon-note.gif) **说明：** +>从API Version 8开始支持。后续版本如有新增内容，则采用上角标单独标记该内容的起始版本。 + +## 权限列表 + +无 + +## 事件 + +

属性名称

+

参数类型

+

描述

+

x

number

+

Length

点击点相对于被点击元素上边沿的Y坐标。

+

x轴坐标。

timestamp

+

y

number

+

Length

事件时间戳。

+

y轴坐标。
+ + + + + + + + + +

名称

+

支持冒泡

+

功能描述

+

onAreaChange(event: (oldValue: Area, newValue: Area) => void)

+

否

+

组件区域变化时触发该回调，Area类型说明见Area对象介绍。

+
+ +## 示例 + +``` +@Entry +@Component +struct AreaExample { + @State value: string = 'Text' + @State size: string = '' + + build() { + Column() { + Text(this.value) + .backgroundColor(Color.Green).margin(30).fontSize(20) + .onClick(() => { + this.value = this.value + 'Text' + }) + .onAreaChange((oldValue: Area, newValue: Area) => { + console.info(`Ace: on area change, oldValue is ${JSON.stringify(oldValue)} value is ${JSON.stringify(newValue)}`) + this.size = JSON.stringify(newValue) + }) + Text('new area is: \n' + this.size).margin({ right: 30, left: 30 }) + } + .width('100%').height('100%').margin({ top: 30 }) + } +} +``` + +![](figures/GIF4.gif) + diff --git a/zh-cn/application-dev/reference/arkui-ts/ts-universal-events-key.md b/zh-cn/application-dev/reference/arkui-ts/ts-universal-events-key.md index f4ebbc6907545c3ca8f122cb267c6f35f1ee9005..bbe8be6ad262c402e7c355cee3a86f43e747b3b8 100644 --- a/zh-cn/application-dev/reference/arkui-ts/ts-universal-events-key.md +++ b/zh-cn/application-dev/reference/arkui-ts/ts-universal-events-key.md @@ -1,19 +1,27 @@ -# 按键事件 +# 按键事件 - -

名称

+>![](../../public_sys-resources/icon-note.gif) **说明：** +>从API Version 7开始支持。后续版本如有新增内容，则采用上角标单独标记该内容的起始版本。 + +## 权限列表 + +无 + +## 事件 + + - - - - - @@ -23,62 +31,61 @@ - 属性 - -

名称

支持冒泡

+

支持冒泡

功能描述

+

功能描述

onKeyEvent(event: (event?: KeyEvent) => void)

+

onKeyEvent(event: (event?: KeyEvent) => void)

是

+

是

按键动作触发该方法调用，event参数见KeyEvent介绍。

+

按键动作触发该方法调用，event参数见KeyEvent介绍。

属性名称

+ - - - - - - - - - - - - - - - - - - - - - - - @@ -87,16 +94,15 @@ - 接口 - -

属性名称

属性类型

+

类型

描述

+

描述

type

+

type

KeyType

+

KeyType

按键的类型。

+

按键的类型。

keyCode

+

keyCode

number

+

number

按键的键码。

+

按键的键码。

keyText

+

keyText

string

+

string

按键的键值。

+

按键的键值。

keySource

+

keySource

KeySource

+

KeySource

触发当前按键的输入设备类型。

+

触发当前按键的输入设备类型。

deviceId

+

deviceId

number

+

number

触发当前按键的输入设备ID。

+

触发当前按键的输入设备ID。

metaKey

+

metaKey

number

+

number

按键发生时元键的状态，1表示按压态，0表示未按压态。

+

按键发生时元键的状态，1表示按压态，0表示未按压态。

timestamp

+

timestamp

number

+

number

按键发生时的时间戳。

+

按键发生时的时间戳。

接口名称

+ - - - @@ -104,21 +110,20 @@ - KeyType枚举说明 - -

接口名称

功能描述

+

功能描述

stopPropagation(): void

+

stopPropagation(): void

阻塞事件冒泡传递。

+

阻塞事件冒泡传递。

名称

+ - - - - - @@ -127,21 +132,20 @@ - KeySource枚举说明 - -

名称

描述

+

描述

Down

+

Down

按键按下。

+

按键按下。

Up

+

Up

按键松开。

+

按键松开。

名称

+ - - - - - @@ -149,62 +153,61 @@ - 常用KeyCode说明 - -

名称

描述

+

描述

Unknown

+

Unknown

输入设备类型未知。

+

输入设备类型未知。

Keyboard

+

Keyboard

输入设备类型为键盘。

+

输入设备类型为键盘。

数值

+ - - - - - - - - - - - - - - - - - - - - - - - diff --git a/zh-cn/application-dev/reference/arkui-ts/ts-universal-events-show-hide.md b/zh-cn/application-dev/reference/arkui-ts/ts-universal-events-show-hide.md index 711581f98f421dc26d8705c06d9d5b10ba041550..5b8e963cf740c6093547445359f5772e9a3573cf 100644 --- a/zh-cn/application-dev/reference/arkui-ts/ts-universal-events-show-hide.md +++ b/zh-cn/application-dev/reference/arkui-ts/ts-universal-events-show-hide.md @@ -1,26 +1,34 @@ -# 挂载卸载事件 +# 挂载卸载事件 - -

数值

行为

+

行为

物理按键

+

物理按键

19

+

19

上

+

上

向上方向键。

+

向上方向键。

20

+

20

下

+

下

向下方向键。

+

向下方向键。

21

+

21

左

+

左

向左方向键。

+

向左方向键。

22

+

22

右

+

右

向右方向键。

+

向右方向键。

23

+

23

确定

+

确定

遥控器的确认键。

+

遥控器的确认键。

66

+

66

确定

+

确定

键盘的回车键。

+

键盘的回车键。

160

+

160

确定

+

确定

键盘的小键盘回车键。

+

键盘的小键盘回车键。

名称

+>![](../../public_sys-resources/icon-note.gif) **说明：** +>从API Version 7开始支持。后续版本如有新增内容，则采用上角标单独标记该内容的起始版本。 + +## 权限列表 + +无 + +## 事件 + + - - - - - - - - diff --git a/zh-cn/application-dev/reference/arkui-ts/ts-universal-events-touch.md b/zh-cn/application-dev/reference/arkui-ts/ts-universal-events-touch.md index 2ce3cc0ffdf87e14e36e8076a63b948354c81184..938d317b997269fcd6ed3e95dd41f0820071dfb7 100644 --- a/zh-cn/application-dev/reference/arkui-ts/ts-universal-events-touch.md +++ b/zh-cn/application-dev/reference/arkui-ts/ts-universal-events-touch.md @@ -1,19 +1,27 @@ -# 触摸事件 +# 触摸事件 - -

名称

支持冒泡

+

支持冒泡

功能描述

+

功能描述

onAppear(callback: () => void)

+

onAppear(callback: () => void)

否

+

否

组件挂载显示时触发此回调。

+

组件挂载显示时触发此回调。

onDisappear(callback: () => void)

+

onDisappear(callback: () => void)

否

+

否

组件卸载消失时触发此回调。

+

组件卸载消失时触发此回调。

名称

+>![](../../public_sys-resources/icon-note.gif) **说明：** +>从API Version 7开始支持。后续版本如有新增内容，则采用上角标单独标记该内容的起始版本。 + +## 权限列表 + +无 + +## 事件 + + - - - - - @@ -23,41 +31,47 @@ - 属性 - -

名称

是否冒泡

+

是否冒泡

功能描述

+

功能描述

onTouch(callback: (event?: TouchEvent) => void)

+

onTouch(callback: (event?: TouchEvent) => void)

是

+

是

触摸动作触发该方法调用，event参数见TouchEvent介绍。

+

触摸动作触发该方法调用，event参数见TouchEvent介绍。

属性名称

+ - - - + + + + - - - - - - - - - - - @@ -66,16 +80,15 @@ - 接口 - -

属性名称

属性类型

+

类型

描述

+

描述

type

+

type

+

TouchType

+

触摸事件的类型。

+

touches

TouchType

+

Array<TouchObject>

触摸事件的类型。

+

全部手指信息。

touches

+

changedTouches

Array<TouchObject>

+

Array<TouchObject>

全部手指信息。

+

当前发生变化的手指信息。

changedTouches

+

timestamp

Array<TouchObject>

+

number

当前发生变化的手指信息。

+

事件时间戳。

timestamp

+

target8+

number

+

EventTarget

事件时间戳。

+

被触摸元素对象。

接口名称

+ - - - @@ -84,55 +97,54 @@ - TouchObject对象说明 - -

接口名称

功能描述

+

功能描述

stopPropagation()：void

+

stopPropagation()：void

阻塞事件冒泡。

+

阻塞事件冒泡。

属性名称

+ - - - - - - - - - - - - - - - - - - - - @@ -141,31 +153,30 @@ - TouchType枚举说明 - -

属性名称

属性类型

+

类型

描述

+

描述

type

+

type

TouchType

+

TouchType

触摸事件的类型。

+

触摸事件的类型。

id

+

id

number

+

number

手指唯一标识符。

+

手指唯一标识符。

screenX

+

screenX

number

+

number

触摸点相对于设备屏幕左边沿的X坐标。

+

触摸点相对于设备屏幕左边沿的X坐标。

screenY

+

screenY

number

+

number

触摸点相对于设备屏幕上边沿的Y坐标。

+

触摸点相对于设备屏幕上边沿的Y坐标。

x

+

x

number

+

number

触摸点相对于被触摸元素左边沿的X坐标。

+

触摸点相对于被触摸元素左边沿的X坐标。

y

+

y

number

+

number

触摸点相对于被触摸元素上边沿的Y坐标。

+

触摸点相对于被触摸元素上边沿的Y坐标。

名称

+ - - - - - - - - - @@ -183,7 +194,7 @@ struct TouchExample { build() { Flex({ direction: FlexDirection.Column, alignItems: ItemAlign.Center, justifyContent: FlexAlign.SpaceBetween }) { - Button('Touch').backgroundColor(0x2788D9) + Button('Touch').backgroundColor(0x2788D9).height(40).width(80) .onTouch((event: TouchEvent) => { if (event.type === TouchType.Down) { this.eventType = 'Down' @@ -194,7 +205,10 @@ struct TouchExample { if (event.type === TouchType.Move) { this.eventType = 'Move' } - console.info(this.text = 'TouchType:' + this.eventType + '\nDistance between touch point and touch element:\nx: ' + event.touches[0].x + '\n' + 'y: ' + event.touches[0].y) + console.info(this.text = 'TouchType:' + this.eventType + '\nDistance between touch point and touch element:\nx: ' + + event.touches[0].x + '\n' + 'y: ' + event.touches[0].y + '\ncomponent globalPos：（' + + event.target.area.globalPos.x + ',' + event.target.area.globalPos.y + '）\nwidth:' + + event.target.area.width + '\nheight：' + event.target.area.height) }) Text(this.text) }.height(200).width(350).padding({ left: 35, right: 35, top: 35 }) @@ -202,5 +216,5 @@ struct TouchExample { } ``` -![](figures/Touch.gif) +![](figures/zh-cn_image_0000001192915178.gif) diff --git a/zh-cn/application-dev/reference/arkui-ts/ts-universal-events.md b/zh-cn/application-dev/reference/arkui-ts/ts-universal-events.md index bec20ee420ef0eb2a713df6c8be453dda8208f72..2b2e7bf9cdfd88780a0671780d482ab0efa89b6f 100644 --- a/zh-cn/application-dev/reference/arkui-ts/ts-universal-events.md +++ b/zh-cn/application-dev/reference/arkui-ts/ts-universal-events.md @@ -1,4 +1,4 @@ -# 通用事件 +# 通用事件 - **[点击事件](ts-universal-events-click.md)** @@ -8,4 +8,6 @@ - **[按键事件](ts-universal-events-key.md)** +- **[组件区域变化事件](ts-universal-events-component-area-change.md)** + diff --git a/zh-cn/application-dev/ui/Readme-CN.md b/zh-cn/application-dev/ui/Readme-CN.md index 2062f32979bbd994cce0c5a925573c8b3bd3153b..c1686c318ea05527f66e614c8ecf6c987afea460 100755 --- a/zh-cn/application-dev/ui/Readme-CN.md +++ b/zh-cn/application-dev/ui/Readme-CN.md @@ -1,8 +1,20 @@ # UI - 方舟开发框架（ArkUI） + - [方舟开发框架概述](arkui-overview.md) - 基于JS扩展的类Web开发范式 - [概述](ui-js-overview.md) + - 框架说明 + - [文件组织](js-framework-file.md) + - [js标签配置](js-framework-js-tag.md) + - [app.js](js-framework-js-file.md) + - 语法 + - [HML语法参考](js-framework-syntax-hml.md) + - [CSS语法参考](js-framework-syntax-css.md) + - [JS语法参考](js-framework-syntax-js.md) + - [生命周期](js-framework-lifecycle.md) + - [资源限定与访问](js-framework-resource-restriction.md) + - [多语言支持](js-framework-multiple-languages.md) - 构建用户界面 - [组件介绍](ui-js-building-ui-component.md) - 构建布局 @@ -32,16 +44,71 @@ - [transform样式动画](ui-js-animate-transform.md) - [background-position样式动画](ui-js-animate-background-position-style.md) - JS动画 - - [组件动画](ui-js-animate-component.md) - - 插值器动画 - - [动画动效](ui-js-animate-dynamic-effects.md) - - [动画帧](ui-js-animate-frame.md) - + - [组件动画](ui-js-animate-component.md) + - 插值器动画 + - [动画动效](ui-js-animate-dynamic-effects.md) + - [动画帧](ui-js-animate-frame.md) - [自定义组件](ui-js-custom-components.md) - - 基于TS扩展的声明式开发范式 - [概述](ui-ts-overview.md) - - [开发说明](ui-ts-developing-intro.md) + - 框架说明 + - 文件组织 + - [目录结构](ts-framework-directory.md) + - [应用代码文件访问规则](ts-framework-file-access-rules.md) + - [js标签配置](ts-framework-js-tag.md) + - 资源访问 + - [媒体资源类型说明](ts-media-resource-type.md) + - [像素单位](ts-pixel-units.md) + - [类型定义](ts-types.md) + - 声明式语法 + - [描述规范使用说明](ts-syntax-intro.md) + - 通用UI描述规范 + - [基本概念](ts-general-ui-concepts.md) + - 声明式UI描述规范 + - [无构造参数配置](ts-parameterless-configuration.md) + - [必选参数构造配置](ts-configuration-with-mandatory-parameters.md) + - [属性配置](ts-attribution-configuration.md) + - [事件配置](ts-event-configuration.md) + - [子组件配置](ts-child-component-configuration.md) + - 组件化 + - [@Component](ts-component-based-component.md) + - [@Entry](ts-component-based-entry.md) + - [@Preview](ts-component-based-preview.md) + - [@Builder](ts-component-based-builder.md) + - [@Extend](ts-component-based-extend.md) + - [@CustomDialog](ts-component-based-customdialog.md) + - UI状态管理 + - [基本概念](ts-ui-state-mgmt-concepts.md) + - 管理组件拥有的状态 + - [@State](ts-component-states-state.md) + - [@Prop](ts-component-states-prop.md) + - [@Link](ts-component-states-link.md) + - 管理应用程序的状态 + - 接口 + - [应用程序的数据存储](ts-application-states-appstorage.md) + - [持久化数据管理](ts-application-states-apis-persistentstorage.md) + - [环境变量](ts-application-states-apis-environment.md) + - [AppStorage与组件同步](ts-application-states-storagelink-storageprop.md) + - 其他类目的状态管理 + - [Observed和ObjectLink数据管理](ts-other-states-observed-objectlink.md) + - [@Consume和@Provide数据管理](ts-other-states-consume-provide.md) + - [@Watch](ts-other-states-watch.md) + - 渲染控制语法 + - [条件渲染](ts-rending-control-syntax-if-else.md) + - [循环渲染](ts-rending-control-syntax-foreach.md) + - [数据懒加载](ts-rending-control-syntax-lazyforeach.md) + - 深入理解组件化 + - [build函数](ts-function-build.md) + - [自定义组件初始化](ts-custom-component-initialization.md) + - [自定义组件生命周期回调函数](ts-custom-component-lifecycle-callbacks.md) + - [组件创建和重新初始化示例](ts-component-creation-re-initialization.md) + - 语法糖 + - [装饰器](ts-syntactic-sugar-decorator.md) + - [链式调用](ts-syntactic-sugar-chaining.md) + - [struct对象](ts-syntactic-sugar-struct.md) + - [在实例化过程中省略"new"](ts-instantiating-a-struct-without-new-keyword.md) + - [组件创建使用独立一行](ts-using-a-separate-line-for-new-component.md) + - [生成器函数内使用TS语言的限制](ts-restrictions-for-generators.md) - 体验声明式UI - [创建声明式UI工程](ui-ts-creating-project.md) - [初识Component](ui-ts-components.md) diff --git a/zh-cn/application-dev/ui/arkui-overview.md b/zh-cn/application-dev/ui/arkui-overview.md new file mode 100644 index 0000000000000000000000000000000000000000..a0c44ea0bf989afe2625027f3ef44f6f4e9f6d9e --- /dev/null +++ b/zh-cn/application-dev/ui/arkui-overview.md @@ -0,0 +1,57 @@ +# 方舟开发框架概述 + +## 框架介绍 + +方舟开发框架，是OpenHarmony的一套UI开发框架，提供开发者进行应用UI开发时所必须的能力。 + + +## 基本概念 + +- **组件：**组件是界面搭建与显示的最小单位。开发者通过多种组件的组合，构建出满足自身应用诉求的完整界面。 + +- **页面**：page页面是方舟开发框架最小的调度分割单位。开发者可以将应用设计为多个功能页面，每个页面进行单独的文件管理，并通过路由API实现页面的调度管理，以实现应用内功能的解耦。 + + +## 主要能力 + +- **多种组件**：方舟开发框架不仅提供了多种基础组件，如文本显示、图片显示、按键交互等，也提供了支持视频播放能力的媒体组件。并且针对不同类型设备进行了组件设计，提供了组件在不同平台上的样式适配能力，此种组件称为“多态组件”。 + +- **布局计算：**UI界面设计离不开布局的参与。方舟开发框架提供了多种布局方式，不仅保留了经典的弹性布局能力，也提供了列表、宫格、栅格布局和适应多分辨率场景开发的原子布局能力。 + +- **动画能力：**方舟开发框架对于UI界面的美化，除了组件内置动画效果外，也提供了属性动画、转场动画和自定义动画能力。 + +- **UI交互：**方舟开发框架提供了多种交互能力，满足应用在不同平台通过不同输入设备均可正常进行UI交互响应，默认适配了触摸手势、遥控器、鼠标等输入操作，同时也提供事件通知能力。 + +- **绘制：**方舟开发框架提供了多种绘制能力，以满足开发者绘制自定义形状的需求，支持图形绘制、颜色填充、文本绘制、图片绘制等。 + +- **平台API通道：**方舟开发框架提供了API扩展机制，平台能力通过此种机制进行封装，提供风格统一的JS接口。 + + +## 选择方案 + +方舟开发框架针对不同目的和技术背景的开发者提供了两种开发范式，分别是基于JS扩展的类Web开发范式（简称“类Web开发范式”）和基于TS扩展的声明式开发范式（简称“声明式开发范式”）。下面我们对这两种开发范式进行对比与描述。 + + +### 类Web开发范式 + +类Web开发范式，采用经典的HML、CSS、JavaScript三段式开发方式。使用HML标签文件进行布局搭建，使用CSS文件进行样式描述，使用JavaScript文件进行逻辑处理。UI组件与数据之间通过单向数据绑定的方式建立关联，当数据发生变化时，UI界面自动触发更新。此种开发方式，更接近Web前端开发者的使用习惯，快速将已有的Web应用改造成方舟开发框架应用。主要适用于界面较为简单的中小型应用开发。 + + +### 声明式开发范式 + +声明式开发范式，采用TS语言并进行声明式UI语法扩展，从组件、动效和状态管理三个维度提供了UI绘制能力。UI开发更接近自然语义的编程方式，让开发者直观地描述UI界面，不必关心框架如何实现UI绘制和渲染，实现极简高效开发。同时，选用有类型标注的TS语言，引入编译期的类型校验，更适用大型的应用开发。 + + +### 两种开发范式对比 + +| **开发范式名称** | **语言生态** | **UI更新方式** | **适用场景** | **适用人群** | +| -------- | -------- | -------- | -------- | -------- | +| 类Web开发范式 | JS语言 | 数据驱动更新 | 界面较为简单的类小程序应用和卡片 | Web前端开发人员 | +| 声明式开发范式 | 扩展的TS语言（eTS） | 数据驱动更新 | 复杂度较大、团队合作度较高的程序 | 移动系统应用开发人员、系统应用开发人员 | + + +### 框架结构 + +![zh-cn_image_0000001183709904](figures/zh-cn_image_0000001183709904.png) + +从上图可以看出，类Web开发范式与声明式开发范式的UI后端引擎和语言运行时是共用的，其中，UI后端引擎实现了方舟开发框架的六种基本能力。声明式开发范式无需JS Framework进行页面DOM管理，渲染更新链路更为精简，占用内存更少，因此更推荐开发者选用声明式开发范式来搭建应用UI界面。 diff --git a/zh-cn/application-dev/ui/figures/zh-cn_image_0000001064408107.png b/zh-cn/application-dev/ui/figures/zh-cn_image_0000001064408107.png new file mode 100644 index 0000000000000000000000000000000000000000..1631b1b5ad62b7c19a7a32e0cd75ba1aa0fe56e0 Binary files /dev/null and b/zh-cn/application-dev/ui/figures/zh-cn_image_0000001064408107.png differ diff --git a/zh-cn/application-dev/ui/figures/zh-cn_image_0000001076832246.png b/zh-cn/application-dev/ui/figures/zh-cn_image_0000001076832246.png new file mode 100644 index 0000000000000000000000000000000000000000..fe1c056ddb328dfbfedfb3764f676457d81053d9 Binary files /dev/null and b/zh-cn/application-dev/ui/figures/zh-cn_image_0000001076832246.png differ diff --git a/zh-cn/application-dev/ui/figures/zh-cn_image_0000001077151676.gif b/zh-cn/application-dev/ui/figures/zh-cn_image_0000001077151676.gif new file mode 100644 index 0000000000000000000000000000000000000000..60b842f9bd222e39ca63da1b63f0350ac467d95f Binary files /dev/null and b/zh-cn/application-dev/ui/figures/zh-cn_image_0000001077151676.gif differ diff --git a/zh-cn/application-dev/ui/figures/zh-cn_image_0000001086587935.gif b/zh-cn/application-dev/ui/figures/zh-cn_image_0000001086587935.gif new file mode 100644 index 0000000000000000000000000000000000000000..1ebbb881e306acd9e771a757920f46e7fc61af69 Binary files /dev/null and b/zh-cn/application-dev/ui/figures/zh-cn_image_0000001086587935.gif differ diff --git a/zh-cn/application-dev/ui/figures/zh-cn_image_0000001086873085.png b/zh-cn/application-dev/ui/figures/zh-cn_image_0000001086873085.png new file mode 100644 index 0000000000000000000000000000000000000000..28c5d40bbcb3b3c83fa3b4c347be8c6452d202ba Binary files /dev/null and b/zh-cn/application-dev/ui/figures/zh-cn_image_0000001086873085.png differ diff --git a/zh-cn/application-dev/ui/figures/zh-cn_image_0000001087026879.png b/zh-cn/application-dev/ui/figures/zh-cn_image_0000001087026879.png new file mode 100644 index 0000000000000000000000000000000000000000..94359a030bf0be666dd7c11034c3bfc8d3b2bd84 Binary files /dev/null and b/zh-cn/application-dev/ui/figures/zh-cn_image_0000001087026879.png differ diff --git a/zh-cn/application-dev/reference/arkui-js/figures/000000-5.png b/zh-cn/application-dev/ui/figures/zh-cn_image_0000001111680230.png similarity index 100% rename from zh-cn/application-dev/reference/arkui-js/figures/000000-5.png rename to zh-cn/application-dev/ui/figures/zh-cn_image_0000001111680230.png diff --git a/zh-cn/application-dev/reference/arkui-js/figures/green.png b/zh-cn/application-dev/ui/figures/zh-cn_image_0000001111680236.png similarity index 100% rename from zh-cn/application-dev/reference/arkui-js/figures/green.png rename to zh-cn/application-dev/ui/figures/zh-cn_image_0000001111680236.png diff --git a/zh-cn/application-dev/reference/arkui-js/figures/white.png b/zh-cn/application-dev/ui/figures/zh-cn_image_0000001111680240.png similarity index 100% rename from zh-cn/application-dev/reference/arkui-js/figures/white.png rename to zh-cn/application-dev/ui/figures/zh-cn_image_0000001111680240.png diff --git a/zh-cn/application-dev/reference/arkui-js/figures/gray.png b/zh-cn/application-dev/ui/figures/zh-cn_image_0000001111840132.png similarity index 100% rename from zh-cn/application-dev/reference/arkui-js/figures/gray.png rename to zh-cn/application-dev/ui/figures/zh-cn_image_0000001111840132.png diff --git a/zh-cn/application-dev/reference/arkui-js/figures/red.png b/zh-cn/application-dev/ui/figures/zh-cn_image_0000001111840136.png similarity index 100% rename from zh-cn/application-dev/reference/arkui-js/figures/red.png rename to zh-cn/application-dev/ui/figures/zh-cn_image_0000001111840136.png diff --git a/zh-cn/application-dev/reference/arkui-js/figures/sample_css.png b/zh-cn/application-dev/ui/figures/zh-cn_image_0000001127125270.png similarity index 100% rename from zh-cn/application-dev/reference/arkui-js/figures/sample_css.png rename to zh-cn/application-dev/ui/figures/zh-cn_image_0000001127125270.png diff --git a/zh-cn/application-dev/reference/arkui-js/figures/unnaming-(1).png b/zh-cn/application-dev/ui/figures/zh-cn_image_0000001127284926.png similarity index 100% rename from zh-cn/application-dev/reference/arkui-js/figures/unnaming-(1).png rename to zh-cn/application-dev/ui/figures/zh-cn_image_0000001127284926.png diff --git a/zh-cn/application-dev/ui/figures/zh-cn_image_0000001127284928.png b/zh-cn/application-dev/ui/figures/zh-cn_image_0000001127284928.png new file mode 100644 index 0000000000000000000000000000000000000000..5ccdc532cb219f1175708b11241a37d912e2ec2e Binary files /dev/null and b/zh-cn/application-dev/ui/figures/zh-cn_image_0000001127284928.png differ diff --git a/zh-cn/application-dev/reference/arkui-js/figures/zh-cn_image_0000001147417424.png b/zh-cn/application-dev/ui/figures/zh-cn_image_0000001147417424.png similarity index 100% rename from zh-cn/application-dev/reference/arkui-js/figures/zh-cn_image_0000001147417424.png rename to zh-cn/application-dev/ui/figures/zh-cn_image_0000001147417424.png diff --git a/zh-cn/application-dev/ui/figures/zh-cn_image_0000001150223238.png b/zh-cn/application-dev/ui/figures/zh-cn_image_0000001150223238.png new file mode 100644 index 0000000000000000000000000000000000000000..0a9edb70da7acbc4498a752ab49ec67333801615 Binary files /dev/null and b/zh-cn/application-dev/ui/figures/zh-cn_image_0000001150223238.png differ diff --git a/zh-cn/application-dev/reference/arkui-js/figures/blue.png b/zh-cn/application-dev/ui/figures/zh-cn_image_0000001158240091.png similarity index 100% rename from zh-cn/application-dev/reference/arkui-js/figures/blue.png rename to zh-cn/application-dev/ui/figures/zh-cn_image_0000001158240091.png diff --git a/zh-cn/application-dev/reference/arkui-js/figures/orange.png b/zh-cn/application-dev/ui/figures/zh-cn_image_0000001158240095.png similarity index 100% rename from zh-cn/application-dev/reference/arkui-js/figures/orange.png rename to zh-cn/application-dev/ui/figures/zh-cn_image_0000001158240095.png diff --git a/zh-cn/application-dev/reference/arkui-js/figures/yellow.png b/zh-cn/application-dev/ui/figures/zh-cn_image_0000001158240097.png similarity index 100% rename from zh-cn/application-dev/reference/arkui-js/figures/yellow.png rename to zh-cn/application-dev/ui/figures/zh-cn_image_0000001158240097.png diff --git a/zh-cn/application-dev/reference/arkui-js/figures/brown.png b/zh-cn/application-dev/ui/figures/zh-cn_image_0000001158360079.png similarity index 100% rename from zh-cn/application-dev/reference/arkui-js/figures/brown.png rename to zh-cn/application-dev/ui/figures/zh-cn_image_0000001158360079.png diff --git a/zh-cn/application-dev/reference/arkui-js/figures/pink.png b/zh-cn/application-dev/ui/figures/zh-cn_image_0000001158360085.png similarity index 100% rename from zh-cn/application-dev/reference/arkui-js/figures/pink.png rename to zh-cn/application-dev/ui/figures/zh-cn_image_0000001158360085.png diff --git a/zh-cn/application-dev/ui/figures/zh-cn_image_0000001162586456.gif b/zh-cn/application-dev/ui/figures/zh-cn_image_0000001162586456.gif deleted file mode 100644 index 38b7d7b5233d51d4ff96b8852eb3d29e0d1dfb55..0000000000000000000000000000000000000000 Binary files a/zh-cn/application-dev/ui/figures/zh-cn_image_0000001162586456.gif and /dev/null differ diff --git a/zh-cn/application-dev/ui/figures/zh-cn_image_0000001163212628.gif b/zh-cn/application-dev/ui/figures/zh-cn_image_0000001163212628.gif deleted file mode 100644 index 81c69fd269e744e1247e9db9b034f2d427e5b069..0000000000000000000000000000000000000000 Binary files a/zh-cn/application-dev/ui/figures/zh-cn_image_0000001163212628.gif and /dev/null differ diff --git a/zh-cn/application-dev/ui/figures/zh-cn_image_0000001163212630.gif b/zh-cn/application-dev/ui/figures/zh-cn_image_0000001163212630.gif deleted file mode 100644 index ee77fe426618b91da8203ab9efb4b9c4f0dbc191..0000000000000000000000000000000000000000 Binary files a/zh-cn/application-dev/ui/figures/zh-cn_image_0000001163212630.gif and /dev/null differ diff --git a/zh-cn/application-dev/ui/figures/zh-cn_image_0000001163214740.gif b/zh-cn/application-dev/ui/figures/zh-cn_image_0000001163214740.gif deleted file mode 100644 index 5b53dc71f7212ebe031ec5c9d19a41267afc448a..0000000000000000000000000000000000000000 Binary files a/zh-cn/application-dev/ui/figures/zh-cn_image_0000001163214740.gif and /dev/null differ diff --git a/zh-cn/application-dev/ui/figures/zh-cn_image_0000001163372620.gif b/zh-cn/application-dev/ui/figures/zh-cn_image_0000001163372620.gif deleted file mode 100644 index ccd5021baf4d3fa2ab124f4033e7d36f78249729..0000000000000000000000000000000000000000 Binary files a/zh-cn/application-dev/ui/figures/zh-cn_image_0000001163372620.gif and /dev/null differ diff --git a/zh-cn/application-dev/ui/figures/zh-cn_image_0000001163372646.gif b/zh-cn/application-dev/ui/figures/zh-cn_image_0000001163372646.gif deleted file mode 100644 index b007605e58eb671665d4441b967f0e61de0e0493..0000000000000000000000000000000000000000 Binary files a/zh-cn/application-dev/ui/figures/zh-cn_image_0000001163372646.gif and /dev/null differ diff --git a/zh-cn/application-dev/ui/figures/zh-cn_image_0000001163489068.png b/zh-cn/application-dev/ui/figures/zh-cn_image_0000001163489068.png deleted file mode 100644 index ac085642762d13eddbdab4a96ad6f629057d3d8e..0000000000000000000000000000000000000000 Binary files a/zh-cn/application-dev/ui/figures/zh-cn_image_0000001163489068.png and /dev/null differ diff --git a/zh-cn/application-dev/ui/figures/zh-cn_image_0000001163515416.gif b/zh-cn/application-dev/ui/figures/zh-cn_image_0000001163515416.gif deleted file mode 100644 index 1167b5ba7a0c503e2e22bc3d643c16c29cd77efe..0000000000000000000000000000000000000000 Binary files a/zh-cn/application-dev/ui/figures/zh-cn_image_0000001163515416.gif and /dev/null differ diff --git a/zh-cn/application-dev/ui/figures/zh-cn_image_0000001163531184.gif b/zh-cn/application-dev/ui/figures/zh-cn_image_0000001163531184.gif deleted file mode 100644 index 996c64e58b34c78058c80ee8f54713e78b7fb373..0000000000000000000000000000000000000000 Binary files a/zh-cn/application-dev/ui/figures/zh-cn_image_0000001163531184.gif and /dev/null differ diff --git a/zh-cn/application-dev/ui/figures/zh-cn_image_0000001163547244.gif b/zh-cn/application-dev/ui/figures/zh-cn_image_0000001163547244.gif deleted file mode 100644 index a670318ef033221cf4df47b2f4740218a1fb8727..0000000000000000000000000000000000000000 Binary files a/zh-cn/application-dev/ui/figures/zh-cn_image_0000001163547244.gif and /dev/null differ diff --git a/zh-cn/application-dev/ui/figures/zh-cn_image_0000001163691126.gif b/zh-cn/application-dev/ui/figures/zh-cn_image_0000001163691126.gif deleted file mode 100644 index 7c5b1398a0b639f19a40fa679fa84d311c42d156..0000000000000000000000000000000000000000 Binary files a/zh-cn/application-dev/ui/figures/zh-cn_image_0000001163691126.gif and /dev/null differ diff --git a/zh-cn/application-dev/ui/figures/zh-cn_image_0000001163691154.png b/zh-cn/application-dev/ui/figures/zh-cn_image_0000001163691154.png deleted file mode 100644 index b6f0ae015c5957a86d2bf8c583406461a8c4f293..0000000000000000000000000000000000000000 Binary files a/zh-cn/application-dev/ui/figures/zh-cn_image_0000001163691154.png and /dev/null differ diff --git "a/zh-cn/application-dev/reference/arkui-ts/figures/\345\203\217\347\264\240\345\215\225\344\275\215.gif" b/zh-cn/application-dev/ui/figures/zh-cn_image_0000001169582302.gif similarity index 100% rename from "zh-cn/application-dev/reference/arkui-ts/figures/\345\203\217\347\264\240\345\215\225\344\275\215.gif" rename to zh-cn/application-dev/ui/figures/zh-cn_image_0000001169582302.gif diff --git a/zh-cn/application-dev/ui/figures/zh-cn_image_0000001169852428.png b/zh-cn/application-dev/ui/figures/zh-cn_image_0000001169852428.png deleted file mode 100644 index 4fd767ccef460fa7ae5f0f65c64ab92c14346042..0000000000000000000000000000000000000000 Binary files a/zh-cn/application-dev/ui/figures/zh-cn_image_0000001169852428.png and /dev/null differ diff --git "a/zh-cn/application-dev/reference/arkui-js/figures/\345\244\232\345\256\236\344\276\213\350\265\204\346\272\220\345\205\261\344\272\253\347\233\256\345\275\225\347\273\223\346\236\2045+.png" b/zh-cn/application-dev/ui/figures/zh-cn_image_0000001173164777.png similarity index 100% rename from "zh-cn/application-dev/reference/arkui-js/figures/\345\244\232\345\256\236\344\276\213\350\265\204\346\272\220\345\205\261\344\272\253\347\233\256\345\275\225\347\273\223\346\236\2045+.png" rename to zh-cn/application-dev/ui/figures/zh-cn_image_0000001173164777.png diff --git a/zh-cn/application-dev/ui/figures/q2.gif b/zh-cn/application-dev/ui/figures/zh-cn_image_0000001174756438.gif similarity index 100% rename from zh-cn/application-dev/ui/figures/q2.gif rename to zh-cn/application-dev/ui/figures/zh-cn_image_0000001174756438.gif diff --git a/zh-cn/application-dev/ui/figures/q3.gif b/zh-cn/application-dev/ui/figures/zh-cn_image_0000001174756580.gif similarity index 100% rename from zh-cn/application-dev/ui/figures/q3.gif rename to zh-cn/application-dev/ui/figures/zh-cn_image_0000001174756580.gif diff --git a/zh-cn/application-dev/ui/figures/22.gif b/zh-cn/application-dev/ui/figures/zh-cn_image_0000001174756776.gif similarity index 100% rename from zh-cn/application-dev/ui/figures/22.gif rename to zh-cn/application-dev/ui/figures/zh-cn_image_0000001174756776.gif diff --git a/zh-cn/application-dev/ui/figures/3333.gif b/zh-cn/application-dev/ui/figures/zh-cn_image_0000001174756860.gif similarity index 100% rename from zh-cn/application-dev/ui/figures/3333.gif rename to zh-cn/application-dev/ui/figures/zh-cn_image_0000001174756860.gif diff --git a/zh-cn/application-dev/ui/figures/1-0.gif b/zh-cn/application-dev/ui/figures/zh-cn_image_0000001174916742.gif similarity index 100% rename from zh-cn/application-dev/ui/figures/1-0.gif rename to zh-cn/application-dev/ui/figures/zh-cn_image_0000001174916742.gif diff --git a/zh-cn/application-dev/ui/figures/1111.gif b/zh-cn/application-dev/ui/figures/zh-cn_image_0000001175075286.gif similarity index 100% rename from zh-cn/application-dev/ui/figures/1111.gif rename to zh-cn/application-dev/ui/figures/zh-cn_image_0000001175075286.gif diff --git a/zh-cn/application-dev/ui/figures/1.gif b/zh-cn/application-dev/ui/figures/zh-cn_image_0000001175235138.gif similarity index 100% rename from zh-cn/application-dev/ui/figures/1.gif rename to zh-cn/application-dev/ui/figures/zh-cn_image_0000001175235138.gif diff --git a/zh-cn/application-dev/reference/arkui-ts/figures/zh-cn_image_0000001182200571.png b/zh-cn/application-dev/ui/figures/zh-cn_image_0000001182200571.png similarity index 100% rename from zh-cn/application-dev/reference/arkui-ts/figures/zh-cn_image_0000001182200571.png rename to zh-cn/application-dev/ui/figures/zh-cn_image_0000001182200571.png diff --git a/zh-cn/application-dev/ui/figures/zh-cn_image_0000001183709904.png b/zh-cn/application-dev/ui/figures/zh-cn_image_0000001183709904.png new file mode 100644 index 0000000000000000000000000000000000000000..fb34869ae9a78d655a30e62e1936840d0aa6bb4d Binary files /dev/null and b/zh-cn/application-dev/ui/figures/zh-cn_image_0000001183709904.png differ diff --git a/zh-cn/application-dev/ui/figures/zh-cn_image_0000001188771358.gif b/zh-cn/application-dev/ui/figures/zh-cn_image_0000001188771358.gif new file mode 100644 index 0000000000000000000000000000000000000000..c76bef26e0b11311f02233ff17ca476ef470798a Binary files /dev/null and b/zh-cn/application-dev/ui/figures/zh-cn_image_0000001188771358.gif differ diff --git a/zh-cn/application-dev/ui/figures/zh-cn_image_0000001188771430.gif b/zh-cn/application-dev/ui/figures/zh-cn_image_0000001188771430.gif new file mode 100644 index 0000000000000000000000000000000000000000..4a815c6f3db9654b71cc1d11821eab521ca7aeee Binary files /dev/null and b/zh-cn/application-dev/ui/figures/zh-cn_image_0000001188771430.gif differ diff --git a/zh-cn/application-dev/ui/figures/zh-cn_image_0000001188931396.gif b/zh-cn/application-dev/ui/figures/zh-cn_image_0000001188931396.gif new file mode 100644 index 0000000000000000000000000000000000000000..b5e2ed34cf960792ca65ce6d9197ac0fc5d49f8c Binary files /dev/null and b/zh-cn/application-dev/ui/figures/zh-cn_image_0000001188931396.gif differ diff --git a/zh-cn/application-dev/ui/figures/zh-cn_image_0000001189088264.gif b/zh-cn/application-dev/ui/figures/zh-cn_image_0000001189088264.gif new file mode 100644 index 0000000000000000000000000000000000000000..688faa61583561ccb4e54daa04a3ac6a466245ac Binary files /dev/null and b/zh-cn/application-dev/ui/figures/zh-cn_image_0000001189088264.gif differ diff --git a/zh-cn/application-dev/ui/figures/zh-cn_image_0000001189089950.gif b/zh-cn/application-dev/ui/figures/zh-cn_image_0000001189089950.gif new file mode 100644 index 0000000000000000000000000000000000000000..eb0c760faaf917a6935af461e0094fd8e7b8e85b Binary files /dev/null and b/zh-cn/application-dev/ui/figures/zh-cn_image_0000001189089950.gif differ diff --git a/zh-cn/application-dev/ui/figures/zh-cn_image_0000001189098638.gif b/zh-cn/application-dev/ui/figures/zh-cn_image_0000001189098638.gif new file mode 100644 index 0000000000000000000000000000000000000000..6ba578c8480834de8798cd311444c0499e1f0da5 Binary files /dev/null and b/zh-cn/application-dev/ui/figures/zh-cn_image_0000001189098638.gif differ diff --git a/zh-cn/application-dev/ui/figures/zh-cn_image_0000001189248178.gif b/zh-cn/application-dev/ui/figures/zh-cn_image_0000001189248178.gif new file mode 100644 index 0000000000000000000000000000000000000000..74ac9966962b430a0a03e68cf4f39bcfae4cc280 Binary files /dev/null and b/zh-cn/application-dev/ui/figures/zh-cn_image_0000001189248178.gif differ diff --git a/zh-cn/application-dev/ui/figures/zh-cn_image_0000001189249862.gif b/zh-cn/application-dev/ui/figures/zh-cn_image_0000001189249862.gif new file mode 100644 index 0000000000000000000000000000000000000000..a1839308d0fdde50aefd4c818d30ea82c49b6ca6 Binary files /dev/null and b/zh-cn/application-dev/ui/figures/zh-cn_image_0000001189249862.gif differ diff --git a/zh-cn/application-dev/ui/figures/zh-cn_image_0000001193380386.png b/zh-cn/application-dev/ui/figures/zh-cn_image_0000001193380386.png new file mode 100644 index 0000000000000000000000000000000000000000..e21a38a674bafab459b52c937b368a5409997ab2 Binary files /dev/null and b/zh-cn/application-dev/ui/figures/zh-cn_image_0000001193380386.png differ diff --git a/zh-cn/application-dev/ui/figures/zh-cn_image_0000001208691071.gif b/zh-cn/application-dev/ui/figures/zh-cn_image_0000001208691071.gif deleted file mode 100644 index 04a29d4fceaccc3123869721338dd9236e9961c0..0000000000000000000000000000000000000000 Binary files a/zh-cn/application-dev/ui/figures/zh-cn_image_0000001208691071.gif and /dev/null differ diff --git a/zh-cn/application-dev/ui/figures/zh-cn_image_0000001208693047.gif b/zh-cn/application-dev/ui/figures/zh-cn_image_0000001208693047.gif deleted file mode 100644 index ee4cb1581041fef7c9cd7ecaf8631934004bf682..0000000000000000000000000000000000000000 Binary files a/zh-cn/application-dev/ui/figures/zh-cn_image_0000001208693047.gif and /dev/null differ diff --git a/zh-cn/application-dev/ui/figures/zh-cn_image_0000001208703849.gif b/zh-cn/application-dev/ui/figures/zh-cn_image_0000001208703849.gif deleted file mode 100644 index ee7bb97af0e5f571b684408cf5d6bec4192eefd2..0000000000000000000000000000000000000000 Binary files a/zh-cn/application-dev/ui/figures/zh-cn_image_0000001208703849.gif and /dev/null differ diff --git a/zh-cn/application-dev/ui/figures/zh-cn_image_0000001208787965.gif b/zh-cn/application-dev/ui/figures/zh-cn_image_0000001208787965.gif deleted file mode 100644 index ce6ebb1996cffd5111e0ebc811a4c79c4e9aa35c..0000000000000000000000000000000000000000 Binary files a/zh-cn/application-dev/ui/figures/zh-cn_image_0000001208787965.gif and /dev/null differ diff --git a/zh-cn/application-dev/ui/figures/zh-cn_image_0000001208892613.gif b/zh-cn/application-dev/ui/figures/zh-cn_image_0000001208892613.gif deleted file mode 100644 index 54f3a3ade4c3d1b35eddc7d92522c7d83ee50e6b..0000000000000000000000000000000000000000 Binary files a/zh-cn/application-dev/ui/figures/zh-cn_image_0000001208892613.gif and /dev/null differ diff --git a/zh-cn/application-dev/ui/figures/zh-cn_image_0000001208892929.gif b/zh-cn/application-dev/ui/figures/zh-cn_image_0000001208892929.gif deleted file mode 100644 index 4cf6b5a0fbfa3b5b9b9e66944dcc49806d5738c4..0000000000000000000000000000000000000000 Binary files a/zh-cn/application-dev/ui/figures/zh-cn_image_0000001208892929.gif and /dev/null differ diff --git a/zh-cn/application-dev/ui/figures/zh-cn_image_0000001208975737.png b/zh-cn/application-dev/ui/figures/zh-cn_image_0000001208975737.png deleted file mode 100644 index 5be6a14c5f547453bc6a9d3c4f31d2019e9f905a..0000000000000000000000000000000000000000 Binary files a/zh-cn/application-dev/ui/figures/zh-cn_image_0000001208975737.png and /dev/null differ diff --git a/zh-cn/application-dev/ui/figures/zh-cn_image_0000001210358571.gif b/zh-cn/application-dev/ui/figures/zh-cn_image_0000001210358571.gif deleted file mode 100644 index b5a529405d396af8c87d45cdaefc8fe87a6af85b..0000000000000000000000000000000000000000 Binary files a/zh-cn/application-dev/ui/figures/zh-cn_image_0000001210358571.gif and /dev/null differ diff --git a/zh-cn/application-dev/ui/figures/zh-cn_image_0000001210951235.gif b/zh-cn/application-dev/ui/figures/zh-cn_image_0000001210951235.gif deleted file mode 100644 index c065efe3b76f9ae8ab48cc394d8d591cd3a00b54..0000000000000000000000000000000000000000 Binary files a/zh-cn/application-dev/ui/figures/zh-cn_image_0000001210951235.gif and /dev/null differ diff --git a/zh-cn/application-dev/reference/arkui-ts/figures/datatype.png b/zh-cn/application-dev/ui/figures/zh-cn_image_0000001214437889.png similarity index 100% rename from zh-cn/application-dev/reference/arkui-ts/figures/datatype.png rename to zh-cn/application-dev/ui/figures/zh-cn_image_0000001214437889.png diff --git a/zh-cn/application-dev/reference/arkui-ts/figures/CoreSpec_figures_state-mgmt-overview.png b/zh-cn/application-dev/ui/figures/zh-cn_image_0000001214948035.png similarity index 100% rename from zh-cn/application-dev/reference/arkui-ts/figures/CoreSpec_figures_state-mgmt-overview.png rename to zh-cn/application-dev/ui/figures/zh-cn_image_0000001214948035.png diff --git a/zh-cn/application-dev/ui/figures/q8.gif b/zh-cn/application-dev/ui/figures/zh-cn_image_0000001217008255.gif similarity index 100% rename from zh-cn/application-dev/ui/figures/q8.gif rename to zh-cn/application-dev/ui/figures/zh-cn_image_0000001217008255.gif diff --git a/zh-cn/application-dev/ui/figures/d1.gif b/zh-cn/application-dev/ui/figures/zh-cn_image_0000001217168141.gif similarity index 100% rename from zh-cn/application-dev/ui/figures/d1.gif rename to zh-cn/application-dev/ui/figures/zh-cn_image_0000001217168141.gif diff --git a/zh-cn/application-dev/ui/figures/d2.gif b/zh-cn/application-dev/ui/figures/zh-cn_image_0000001220316305.gif similarity index 100% rename from zh-cn/application-dev/ui/figures/d2.gif rename to zh-cn/application-dev/ui/figures/zh-cn_image_0000001220316305.gif diff --git a/zh-cn/application-dev/ui/figures/4444.gif b/zh-cn/application-dev/ui/figures/zh-cn_image_0000001220316655.gif similarity index 100% rename from zh-cn/application-dev/ui/figures/4444.gif rename to zh-cn/application-dev/ui/figures/zh-cn_image_0000001220316655.gif diff --git a/zh-cn/application-dev/ui/figures/d3.gif b/zh-cn/application-dev/ui/figures/zh-cn_image_0000001220396251.gif similarity index 100% rename from zh-cn/application-dev/ui/figures/d3.gif rename to zh-cn/application-dev/ui/figures/zh-cn_image_0000001220396251.gif diff --git a/zh-cn/application-dev/ui/figures/3.gif b/zh-cn/application-dev/ui/figures/zh-cn_image_0000001220396499.gif similarity index 100% rename from zh-cn/application-dev/ui/figures/3.gif rename to zh-cn/application-dev/ui/figures/zh-cn_image_0000001220396499.gif diff --git a/zh-cn/application-dev/ui/figures/d4.gif b/zh-cn/application-dev/ui/figures/zh-cn_image_0000001220554911.gif similarity index 100% rename from zh-cn/application-dev/ui/figures/d4.gif rename to zh-cn/application-dev/ui/figures/zh-cn_image_0000001220554911.gif diff --git a/zh-cn/application-dev/ui/figures/111.png b/zh-cn/application-dev/ui/figures/zh-cn_image_0000001220634677.png similarity index 100% rename from zh-cn/application-dev/ui/figures/111.png rename to zh-cn/application-dev/ui/figures/zh-cn_image_0000001220634677.png diff --git a/zh-cn/application-dev/ui/figures/111-1.gif b/zh-cn/application-dev/ui/figures/zh-cn_image_0000001220635011.gif similarity index 100% rename from zh-cn/application-dev/ui/figures/111-1.gif rename to zh-cn/application-dev/ui/figures/zh-cn_image_0000001220635011.gif diff --git a/zh-cn/application-dev/ui/figures/1-2.gif b/zh-cn/application-dev/ui/figures/zh-cn_image_0000001220635059.gif similarity index 100% rename from zh-cn/application-dev/ui/figures/1-2.gif rename to zh-cn/application-dev/ui/figures/zh-cn_image_0000001220635059.gif diff --git a/zh-cn/application-dev/ui/figures/zh-cn_image_0000001173950938.png b/zh-cn/application-dev/ui/figures/zh-cn_image_0000001220778205.png similarity index 100% rename from zh-cn/application-dev/ui/figures/zh-cn_image_0000001173950938.png rename to zh-cn/application-dev/ui/figures/zh-cn_image_0000001220778205.png diff --git a/zh-cn/application-dev/ui/figures/zh-cn_image_0000001219237131.png b/zh-cn/application-dev/ui/figures/zh-cn_image_0000001220856725.png similarity index 100% rename from zh-cn/application-dev/ui/figures/zh-cn_image_0000001219237131.png rename to zh-cn/application-dev/ui/figures/zh-cn_image_0000001220856725.png diff --git a/zh-cn/application-dev/ui/figures/zh-cn_image_0000001234009343.gif b/zh-cn/application-dev/ui/figures/zh-cn_image_0000001234009343.gif new file mode 100644 index 0000000000000000000000000000000000000000..20b525e82ccdead4414f89e2e226992bc85e13c3 Binary files /dev/null and b/zh-cn/application-dev/ui/figures/zh-cn_image_0000001234009343.gif differ diff --git a/zh-cn/application-dev/ui/figures/zh-cn_image_0000001234011019.gif b/zh-cn/application-dev/ui/figures/zh-cn_image_0000001234011019.gif new file mode 100644 index 0000000000000000000000000000000000000000..24f00c9f1aa6ec431a355f5dd2d88b920607cd05 Binary files /dev/null and b/zh-cn/application-dev/ui/figures/zh-cn_image_0000001234011019.gif differ diff --git a/zh-cn/application-dev/ui/figures/zh-cn_image_0000001234129289.gif b/zh-cn/application-dev/ui/figures/zh-cn_image_0000001234129289.gif new file mode 100644 index 0000000000000000000000000000000000000000..1dff7c90963c2e9a76aa63dbb434b9c55a747fba Binary files /dev/null and b/zh-cn/application-dev/ui/figures/zh-cn_image_0000001234129289.gif differ diff --git a/zh-cn/application-dev/ui/figures/zh-cn_image_0000001234130975.png b/zh-cn/application-dev/ui/figures/zh-cn_image_0000001234130975.png new file mode 100644 index 0000000000000000000000000000000000000000..21d56ef14b92d136e304c4bae6ab8b1f447557bb Binary files /dev/null and b/zh-cn/application-dev/ui/figures/zh-cn_image_0000001234130975.png differ diff --git a/zh-cn/application-dev/ui/figures/zh-cn_image_0000001234287779.gif b/zh-cn/application-dev/ui/figures/zh-cn_image_0000001234287779.gif new file mode 100644 index 0000000000000000000000000000000000000000..2398192bc5df690246dad3edfb82afe618b35dfd Binary files /dev/null and b/zh-cn/application-dev/ui/figures/zh-cn_image_0000001234287779.gif differ diff --git a/zh-cn/application-dev/ui/figures/zh-cn_image_0000001234289455.gif b/zh-cn/application-dev/ui/figures/zh-cn_image_0000001234289455.gif new file mode 100644 index 0000000000000000000000000000000000000000..a6296483cbe2994e36e97d422588f3a9156b56eb Binary files /dev/null and b/zh-cn/application-dev/ui/figures/zh-cn_image_0000001234289455.gif differ diff --git a/zh-cn/application-dev/ui/figures/zh-cn_image_0000001234289465.gif b/zh-cn/application-dev/ui/figures/zh-cn_image_0000001234289465.gif new file mode 100644 index 0000000000000000000000000000000000000000..b374c821e0e426b0e50e33910f33582e8b283ac9 Binary files /dev/null and b/zh-cn/application-dev/ui/figures/zh-cn_image_0000001234289465.gif differ diff --git a/zh-cn/application-dev/ui/figures/zh-cn_image_0000001234327855.gif b/zh-cn/application-dev/ui/figures/zh-cn_image_0000001234327855.gif new file mode 100644 index 0000000000000000000000000000000000000000..b0e9d88f7ccf69a208bdf59ab5bd9a3dee2426f6 Binary files /dev/null and b/zh-cn/application-dev/ui/figures/zh-cn_image_0000001234327855.gif differ diff --git a/zh-cn/application-dev/ui/figures/zh-cn_image_0000001234329527.gif b/zh-cn/application-dev/ui/figures/zh-cn_image_0000001234329527.gif new file mode 100644 index 0000000000000000000000000000000000000000..5ea0034e22041bd7fe8c5f73e655ddf367a8d5d5 Binary files /dev/null and b/zh-cn/application-dev/ui/figures/zh-cn_image_0000001234329527.gif differ diff --git a/zh-cn/application-dev/ui/figures/zh-cn_image_0000001234329539.gif b/zh-cn/application-dev/ui/figures/zh-cn_image_0000001234329539.gif new file mode 100644 index 0000000000000000000000000000000000000000..f3e6017b6daddc0be529486e0bfaf8b39749e38f Binary files /dev/null and b/zh-cn/application-dev/ui/figures/zh-cn_image_0000001234329539.gif differ diff --git a/zh-cn/application-dev/ui/figures/zh-cn_image_0000001234342189.gif b/zh-cn/application-dev/ui/figures/zh-cn_image_0000001234342189.gif new file mode 100644 index 0000000000000000000000000000000000000000..61571b390492f0116ceec215b03d261d2ce41139 Binary files /dev/null and b/zh-cn/application-dev/ui/figures/zh-cn_image_0000001234342189.gif differ diff --git a/zh-cn/application-dev/ui/js-framework-file.md b/zh-cn/application-dev/ui/js-framework-file.md new file mode 100644 index 0000000000000000000000000000000000000000..9123b0378d49eb7213bc6411172a39f8f78d962a --- /dev/null +++ b/zh-cn/application-dev/ui/js-framework-file.md @@ -0,0 +1,85 @@ +# 文件组织 + +## 目录结构 + +JS FA应用的JS模块(entry/src/main/js/module)的典型开发目录结构如下： + +**图1** 目录结构 + +![zh-cn_image_0000001127284926](figures/zh-cn_image_0000001127284926.png) + +**图2** 多实例资源共享目录结构 +![zh-cn_image_0000001173164777](figures/zh-cn_image_0000001173164777.png) + +目录结构中文件分类如下： + +- .hml结尾的HML模板文件，这个文件用来描述当前页面的文件布局结构。 + +- .css结尾的CSS样式文件，这个文件用于描述页面样式。 + +- .js结尾的JS文件，这个文件用于处理页面和用户的交互。 + +各个文件夹的作用： + +- app.js文件用于全局JavaScript逻辑和应用生命周期管理，详见[app.js](../ui/js-framework-js-file.md)说明。 + +- pages目录用于存放所有组件页面。 + +- common目录用于存放公共资源文件，比如：媒体资源，自定义组件和JS文件。 + +- resources目录用于存放资源配置文件，比如：多分辨率加载等配置文件，详见[资源限定与访问](../ui/js-framework-resource-restriction.md)章节。 + +- share目录用于配置多个实例共享的资源内容，比如：share中的图片和JSON文件可被default1和default2实例共享。 + +> ![icon-note.gif](public_sys-resources/icon-note.gif) **说明：** +> - i18n和resources是开发保留文件夹，不可重命名。 +> +> +> - 如果share目录中的资源和实例(default)中的资源文件同名且目录一致时，实例中资源的优先级高于share中资源的优先级。 +> +> +> - share目录当前不支持i18n。 +> +> - 在使用DevEco Studio进行应用开发时，目录结构中的可选文件夹需要开发者根据实际情况自行创建。 + + +## 文件访问规则 + +应用资源可通过绝对路径或相对路径的方式进行访问，本开发框架中绝对路径以"/"开头，相对路径以"./"或"../"。具体访问规则如下： + +- 引用代码文件，推荐使用相对路径，比如：../common/utils.js。 + +- 引用资源文件，推荐使用绝对路径。比如：/common/xxx.png。 + +- 公共代码文件和资源文件推荐放在common下，通过以上两条规则进行访问。 + +- CSS样式文件中通过url()函数创建<url>数据类型，如：url(/common/xxx.png)。 + +> ![icon-note.gif](public_sys-resources/icon-note.gif) **说明：** +> 当代码文件A需要引用代码文件B时： +> +> - 如果代码文件A和文件B位于同一目录，则代码文件B引用资源文件时可使用相对路径，也可使用绝对路径。 +> +> - 如果代码文件A和文件B位于不同目录，则代码文件B引用资源文件时必须使用绝对路径。因为Webpack打包时，代码文件B的目录会发生变化。 +> +> +> - 在js文件中通过数据绑定的方式指定资源文件路径时，必须使用绝对路径。 + + +## 媒体文件格式 + +**表1** 支持的图片格式 + +| 格式 | 支持的文件类型 | +| -------- | -------- | +| BMP | .bmp | +| GIF | .gif | +| JPEG | .jpg | +| PNG | .png | +| WebP | .webp | + +**表2** 支持的视频格式 + +| 格式 | 支持的文件类型 | +| -------- | -------- | +| H.264 AVC
Baseline Profile (BP) | .3gp
.mp4 | diff --git a/zh-cn/application-dev/ui/js-framework-js-file.md b/zh-cn/application-dev/ui/js-framework-js-file.md new file mode 100644 index 0000000000000000000000000000000000000000..5f72eb98d3ede8caabcf450f91ef34d7a5eab110 --- /dev/null +++ b/zh-cn/application-dev/ui/js-framework-js-file.md @@ -0,0 +1,45 @@ +# app.js + +## 应用生命周期 + +每个应用可以在app.js自定义应用级[生命周期](../ui/js-framework-lifecycle.md)的实现逻辑，以下示例仅在生命周期函数中打印对应日志： +``` +// app.js +export default { + onCreate() { + console.info('Application onCreate'); + }, + + onDestroy() { + console.info('Application onDestroy'); + }, +} +``` + +## 应用对象6+ + +| 属性 | 类型 | 描述 | +| -------- | -------- | -------- | +| getApp | Function | 提供getApp()全局方法，可以在自定义js文件中获取app.js中暴露的对象。 | + +示例如下： + +``` +// app.js +export default { + data: { + test: "by getAPP" + }, + onCreate() { + console.info('AceApplication onCreate'); + }, + onDestroy() { + console.info('AceApplication onDestroy'); + }, +}; +``` + +``` +// test.js 自定义逻辑代码 +export var appData = getApp().data; +``` diff --git a/zh-cn/application-dev/ui/js-framework-js-tag.md b/zh-cn/application-dev/ui/js-framework-js-tag.md new file mode 100644 index 0000000000000000000000000000000000000000..b08ba57338f2305dd5da16142b8ac33546b75463 --- /dev/null +++ b/zh-cn/application-dev/ui/js-framework-js-tag.md @@ -0,0 +1,104 @@ +# js标签配置 + +js标签中包含了实例名称、页面路由和窗口样式信息。 + + +| 标签 | 类型 | 默认值 | 必填 | 描述 | +| -------- | -------- | -------- | -------- | -------- | +| name | string | default | 是 | 标识JS实例的名字。 | +| pages | Array | - | 是 | 路由信息，详见“**[pages](#pages)**”。 | +| window | Object | - | 否 | 窗口信息，详见“**[window](#window)**”。 | + + +> ![icon-note.gif](public_sys-resources/icon-note.gif) **说明：** +> name、pages和window等标签配置需在配置文件（config.json）中的“js”标签中完成设置。 + + +## pages + +定义每个页面的路由信息，每个页面由页面路径和页面名组成，页面的文件名就是页面名。比如： + +``` +{ + ... + "pages": [ + "pages/index/index", + "pages/detail/detail" + ] + ... +} +``` + +> ![icon-note.gif](public_sys-resources/icon-note.gif) **说明：** +> +> - pages列表中第一个页面是应用的首页，即entry入口。 +> +> +> - 页面文件名不能使用组件名称，比如：text.hml、button.hml等。 + +## window + +window用于定义与显示窗口相关的配置。对于屏幕适配问题，有2种配置方法： + +- 指定designWidth（屏幕逻辑宽度），所有与大小相关的样式（例如width、font-size）均以designWidth和实际屏幕宽度的比例进行缩放，例如在designWidth为720时，如果设置width为100px时，在实际宽度为1440物理像素的屏幕上，width实际渲染像素为200物理像素。 + +- 设置autoDesignWidth为true，此时designWidth字段将会被忽略，渲染组件和布局时按屏幕密度进行缩放。屏幕逻辑宽度由设备宽度和屏幕密度自动计算得出，在不同设备上可能不同，请使用相对布局来适配多种设备。例如：在466\*466分辨率，320dpi的设备上，屏幕密度为2（以160dpi为基准），1px等于渲染出的2物理像素。 + + > ![icon-note.gif](public_sys-resources/icon-note.gif) **说明：** + > 1. 组件样式中<length>类型的默认值，按屏幕密度进行计算和绘制，如：在屏幕密度为2（以160dpi为基准）的设备上，默认<length>为1px时，设备上实际渲染出2物理像素。 + > + > 2. autoDesignWidth、designWidth的设置不影响默认值计算方式和绘制结果。 + +| 属性 | 类型 | 必填 | 缺省值 | 描述 | +| -------- | -------- | -------- | -------- | -------- | +| designWidth | number | 否 | 720
| 页面显示设计时的参考值，实际显示效果基于设备宽度与参考值之间的比例进行缩放。 | +| autoDesignWidth | boolean | 否 | false | 页面设计基准宽度是否自动计算，当设为true时，designWidth将会被忽略，设计基准宽度由设备宽度与屏幕密度计算得出。 | + +示例如下： +``` +{ + ... + "window": { + "designWidth": 720, + "autoDesignWidth": false + } + ... +} +``` + + +## 示例 + +``` +{ + "app": { + "bundleName": "com.example.player", + "version": { + "code": 1, + "name": "1.0" + }, + "vendor": "example" + } + "module": { + ... + "js": [ + { + "name": "default", + "pages": [ + "pages/index/index", + "pages/detail/detail" + ], + "window": { + "designWidth": 720, + "autoDesignWidth": false + } + } + ], + "abilities": [ + { + ... + } + ] + } +} +``` diff --git a/zh-cn/application-dev/ui/js-framework-lifecycle.md b/zh-cn/application-dev/ui/js-framework-lifecycle.md new file mode 100644 index 0000000000000000000000000000000000000000..ada11ed69f397191958367cee2b5960bdca474e1 --- /dev/null +++ b/zh-cn/application-dev/ui/js-framework-lifecycle.md @@ -0,0 +1,46 @@ +# 生命周期 + +## 应用生命周期 + +在app.js中可以定义如下应用生命周期函数： + +| 属性 | 类型 | 描述 | 触发时机 | +| -------- | -------- | -------- | -------- | +| onCreate | () => void | 应用创建 | 当应用创建时调用。 | +| onShow6+ | () => void | 应用处于前台 | 当应用处于前台时触发。 | +| onHide6+ | () => void | 应用处于后台 | 当应用处于后台时触发。 | +| onDestroy | () => void | 应用销毁 | 当应用退出时触发。 | + + +## 页面生命周期 + +在页面JS文件中可以定义如下页面生命周期函数： + +| 属性 | 类型 | 描述 | 触发时机 | +| -------- | -------- | -------- | -------- | +| onInit | () => void | 页面初始化 | 页面数据初始化完成时触发，只触发一次。 | +| onReady | () => void | 页面创建完成 | 页面创建完成时触发，只触发一次。 | +| onShow | () => void | 页面显示 | 页面显示时触发。 | +| onHide | () => void | 页面消失 | 页面消失时触发。 | +| onDestroy | () => void | 页面销毁 | 页面销毁时触发。 | +| onBackPress | () => boolean | 返回按钮动作 | 当用户点击返回按钮时触发。
- 返回true表示页面自己处理返回逻辑。
- 返回false表示使用默认的返回逻辑。
- 不返回值会作为false处理。 | +| onActive()5+ | () => void | 页面激活 | 页面激活时触发。 | +| onInactive()5+ | () => void | 页面暂停 | 页面暂停时触发。 | +| onNewRequest()5+ | () => void | FA重新请求 | FA已经启动时收到新的请求后触发。 | + +页面A的生命周期接口的调用顺序 +- 打开页面A：onInit() -> onReady() -> onShow() + +- 在页面A打开页面B：onHide() + +- 从页面B返回页面A：onShow() + +- 退出页面A：onBackPress() -> onHide() -> onDestroy() + +- 页面隐藏到后台运行：onInactive() -> onHide() + +- 页面从后台运行恢复到前台：onShow() -> onActive() + +![zh-cn_image_0000001147417424](figures/zh-cn_image_0000001147417424.png) + + diff --git a/zh-cn/application-dev/ui/js-framework-multiple-languages.md b/zh-cn/application-dev/ui/js-framework-multiple-languages.md new file mode 100644 index 0000000000000000000000000000000000000000..86da54660290c5cd1b4c3924bab2116019e442f7 --- /dev/null +++ b/zh-cn/application-dev/ui/js-framework-multiple-languages.md @@ -0,0 +1,185 @@ +# 多语言支持 + +基于开发框架的应用会覆盖多个国家和地区，开发框架支持多语言能力后，可以让应用开发者无需开发多个不同语言的版本，就可以同时支持多种语言的切换，为项目维护带来便利。 + + +开发者仅需要通过[定义资源文件](#定义资源文件)和[引用资源](#引用资源)两个步骤，就可以使用开发框架的多语言能力；如果需要在应用中获取当前系统语言，请参考[获取语言](#获取语言)。 + + +## 定义资源文件 + +资源文件用于存放应用在多种语言场景下的资源内容，开发框架使用JSON文件保存资源定义。在[文件组织](../ui/js-framework-file.md)中指定的i18n文件夹内放置语言资源文件，其中语言资源文件的命名是由语言、文字、国家或地区的限定词通过中划线连接组成，其中文字和国家或地区可以省略，如zh-Hant-HK（中国香港地区使用的繁体中文）、zh-CN（中国使用的简体中文）、zh（中文）。命名规则如下： + +``` +language[-script-region].json +``` + +限定词的取值需符合下表要求。 + +**表1** 限定词取值要求 + +| 限定词类型 | 含义与取值说明 | +| -------- | -------- | +| 语言 | 表示设备使用的语言类型，由2~3个小写字母组成。例如：zh表示中文，en表示英语，mai表示迈蒂利语。
详细取值范围，请查阅**ISO 639**（ISO制定的语言编码标准）。 | +| 文字 | 表示设备使用的文字类型，由1个大写字母（首字母）和3个小写字母组成。例如：Hans表示简体中文，Hant表示繁体中文。
详细取值范围，请查阅**ISO 15924**（ISO制定的文字编码标准）。 | +| 国家或地区 | 表示用户所在的国家或地区，由2~3个大写字母或者3个数字组成。例如：CN表示中国，GB表示英国。
详细取值范围，请查阅**ISO 3166-1**（ISO制定的国家和地区编码标准）。 | + +当开发框架无法在应用中找到系统语言的资源文件时，默认使用en-US.json中的资源内容。 + +资源文件内容格式如下： + +en-US.json +``` +{ + "strings": { + "hello": "Hello world!", + "object": "Object parameter substitution-{name}", + "array": "Array type parameter substitution-{0}", + "symbol": "@#$%^&*()_+-={}[]\\|:;\"'<>,./?" + }, + + "files": { + "image": "image/en_picture.PNG" + } +} +``` + + +由于不同语言针对单复数有不同的匹配规则，在资源文件中使用“zero”“one”“two”“few”“many”“other”定义不同单复数场景下的词条内容。例如中文不区分单复数，仅存在“other”场景；英文存在“one”、“other”场景；阿拉伯语存在上述6种场景。 + + +以en-US.json和ar-AE.json为例，资源文件内容格式如下： + + +en-US.json + +``` +{ + "strings": { + "people": { + "one": "one person", + "other": "{count} people" + } + } +} +``` + + +ar-AE.json + +``` +{ + "strings": { + "people": { + "zero": "لا أحد", + "one": "وحده", + "two": "اثنان", + "few": "ستة اشخاص", + "many": "خمسون شخص", + "other": "مائة شخص" + } + } +} +``` + + +## 引用资源 + +在应用开发的页面中使用多语言的语法，包含简单格式化和单复数格式化两种，都可以在hml或js中使用。 + +- 简单格式化方法 + 在应用中使用$t方法引用资源，$t既可以在hml中使用，也可以在js中使用。系统将根据当前语言环境和指定的资源路径（通过$t的path参数设置），显示对应语言的资源文件中的内容。 + + **表2** 简单格式化 + + | 属性 | 类型 | 参数 | 必填 | 描述 | + | -------- | -------- | -------- | -------- | -------- | + | $t | Function | 请见**表 $t参数说明** | 是 | 根据系统语言完成简单的替换：this.$t('strings.hello') | + + **表3** $t参数说明 + + | 参数 | 类型 | 必填 | 描述 | + | -------- | -------- | -------- | -------- | + | path | string | 是 | 资源路径 | + | params | Array\|Object | 否 | 运行时用来替换占位符的实际内容，占位符分为两种：
- 具名占位符，例如{name}。实际内容必须用Object类型指定，例如：$t('strings.object', **{ name: 'Hello world' }**)。
- 数字占位符，例如{0}。实际内容必须用Array类型指定，例如：$t('strings.array', **['Hello world']**)。 | + +- 简单格式化示例代码 + ``` + +
+ + {{ $t('strings.hello') }} + + {{ $t('strings.object', { name: 'Hello world' }) }} + + {{ $t('strings.array', ['Hello world']) }} + + {{ hello }} + + {{ replaceObject }} + + {{ replaceArray }} + + + + + +
+ ``` + + ``` + // xxx.js + // 下面为在js文件中的使用方法。 + export default { + data: { + hello: '', + replaceObject: '', + replaceArray: '', + replaceSrc: '', + }, + onInit() { + this.hello = this.$t('strings.hello'); + this.replaceObject = this.$t('strings.object', { name: 'Hello world' }); + this.replaceArray = this.$t('strings.array', ['Hello world']); + this.replaceSrc = this.$t('files.image'); + }, + } + ``` + +- 单复数格式化方法 + **表4** 单复数格式化 + + | 属性 | 类型 | 参数 | 必填 | 描述 | + | -------- | -------- | -------- | -------- | -------- | + | $tc | Function | 请见**表 $tc参数说明** | 是 | 根据系统语言完成单复数替换：this.$tc('strings.people')
> ![icon-note.gif](public_sys-resources/icon-note.gif) **说明：**
> 定义资源的内容通过json格式的key为“zero”、“one”、“two”、“few”、“many”和“other”区分。 | + + **表5** $tc参数说明 + + | 参数 | 类型 | 必填 | 描述 | + | -------- | -------- | -------- | -------- | + | path | string | 是 | 资源路径 | + | count | number | 是 | 要表达的值 | + +- 单复数格式化示例代码 + ``` + +
+ + {{ $tc('strings.people', 0) }} + + {{ $tc('strings.people', 1) }} + + {{ $tc('strings.people', 2) }} + + {{ $tc('strings.people', 6) }} + + {{ $tc('strings.people', 50) }} + + {{ $tc('strings.people', 100) }} +
+ ``` + + +## 获取语言 + +获取语言功能请参考[应用配置](../reference/apis/js-apis-basic-features-configuration.md)。 diff --git a/zh-cn/application-dev/ui/js-framework-resource-restriction.md b/zh-cn/application-dev/ui/js-framework-resource-restriction.md new file mode 100644 index 0000000000000000000000000000000000000000..740c2e32f8c9ebf539f873059f8a81e7999632eb --- /dev/null +++ b/zh-cn/application-dev/ui/js-framework-resource-restriction.md @@ -0,0 +1,92 @@ +# 资源限定与访问 + + +## 资源限定词 + +资源限定词可以由一个或多个表征应用场景或设备特征的限定词组合而成，包括屏幕密度等维度，限定词之间通过中划线（-）连接。开发者在**resources**目录下创建限定词文件时，需要掌握限定词文件的命名要求以及与限定词文件与设备状态的匹配规则。 + + +## 资源限定词的命名要求 + +- 限定词的组合顺序：屏幕密度。开发者可以根据应用的使用场景和设备特征，选择其中的一类或几类限定词组成目录名称，顺序不可颠倒。 + +- 限定词的连接方式：限定词之间均采用中划线（-）连接。例如：res-dark-ldpi.json 。 + +- 限定词的取值范围：每类限定词的取值必须符合下表的条件，否则，将无法匹配目录中的资源文件，限定词大小写敏感。 + +- 限定词前缀：**resources**资源文件的资源限定词有前缀res，例如res-ldpi.json。 + +- 默认资源限定文件：**resources**资源文件的默认资源限定文件为res-defaults.json。 + +- 资源限定文件中不支持使用枚举格式的颜色来设置资源。 + + +**表1** 资源限定词 + +| 类型 | 含义与取值说明 | +| -------- | -------- | +| 屏幕密度 | 表示设备的屏幕密度（单位为dpi），取值如下：
- ldpi：表示低密度屏幕（~120dpi）（0.75基准密度）
- mdpi：表示中密度屏幕（~160dpi）（基准密度）
- hdpi：表示高密度屏幕（~240dpi）（1.5基准密度）
- xhdpi：表示加高密度屏幕（~320dpi）（2.0基准密度）
- xxhdpi：表示超超高密度屏幕（~480dpi）（3.0基准密度）
- xxxhdpi：表示超超超高密度屏幕（~640dpi）（4.0基准密度） | + + +## 限定词与设备状态的匹配规则 + +- 在为设备匹配对应的资源文件时，限定词目录匹配的优先级从高到低依次为：MCC和MNC> 横竖屏 > 深色模式 > 设备类型 > 屏幕密度。在资源限定词目录均未匹配的情况下，则匹配默认资源限定文件。 + +- 如果限定词目录中包含资源限定词，则对应限定词的取值必须与当前的设备状态完全一致，该目录才能够参与设备的资源匹配。例如：资源限定文件res-hdpi.json与当前设备密度xhdpi无法匹配。 + + +## 引用JS模块内resources资源 + +在应用开发的hml和js文件中使用$r的语法，可以对JS模块内的resources目录下的json资源进行格式化，获取相应的资源内容。 + +| 属性 | 类型 | 描述 | +| -------- | -------- | -------- | +| $r | (key: string) => string | 获取资源限定下具体的资源内容。例如：this.$r('strings.hello')。
参数说明：
- key：定义在资源限定文件中的键值，如strings.hello。
| + +**res-defaults.json示例：**
+ +``` +{ + strings: { + hello: 'hello world' + } +} +``` + +## 示例 + +resources/res-dark.json: + +``` +{ + "image": { + "clockFace": "common/dark_face.png" + }, + "colors": { + "background": "#000000" + } +} +``` + +resources/res-defaults.json: + +``` +{ + "image": { + "clockFace": "common/face.png" + }, + "colors": { + "background": "#ffffff" + } +} +``` + +``` + +
+ +
+``` + +> ![icon-note.gif](public_sys-resources/icon-note.gif) **说明：** +> 资源限定文件中不支持颜色枚举格式。 diff --git a/zh-cn/application-dev/ui/js-framework-syntax-css.md b/zh-cn/application-dev/ui/js-framework-syntax-css.md new file mode 100644 index 0000000000000000000000000000000000000000..40d7579eaedb5c4f96acfcdf48007b98ff1f7e50 --- /dev/null +++ b/zh-cn/application-dev/ui/js-framework-syntax-css.md @@ -0,0 +1,208 @@ +# CSS语法参考 + +CSS是描述HML页面结构的样式语言。所有组件均存在系统默认样式，也可在页面CSS样式文件中对组件、页面自定义不同的样式。 + +## 尺寸单位 + +1. 逻辑像素px（文档中以<length>表示）： + 1. 默认屏幕具有的逻辑宽度为720px（配置见[配置文件](js-framework-js-tag.md)中的window小节），实际显示时会将页面布局缩放至屏幕实际宽度，如100px在实际宽度为1440物理像素的屏幕上，实际渲染为200物理像素（从720px向1440物理像素，所有尺寸放大2倍）。 + 2. 额外配置autoDesignWidth为true时（配置见[配置文件](js-framework-js-tag.md)中的window小节），逻辑像素px将按照屏幕密度进行缩放，如100px在屏幕密度为3的设备上，实际渲染为300物理像素。应用需要适配多种设备时，建议采用此方法。 + +2. 百分比（文档中以<percentage>表示）：表示该组件占父组件尺寸的百分比，如组件的width设置为50%，代表其宽度为父组件的50%。 + + +## 样式导入 + +为了模块化管理和代码复用，CSS样式文件支持 \@import 语句，导入css文件。 + + +## 声明样式 + +每个页面目录下存在一个与布局hml文件同名的css文件，用来描述该hml页面中组件的样式，决定组件应该如何显示。 + +1. 内部样式，支持使用style、class属性来控制组件的样式。例如： + ``` + +
+ Hello World +
+ ``` + + ``` + /* index.css */ + .container { + justify-content: center; + } + ``` + +2. 文件导入，合并外部样式文件。例如，在common目录中定义样式文件style.css，并在index.css文件首行中进行导入： + ``` + /* style.css */ + .title { + font-size: 50px; + } + ``` + + ``` + /* index.css */ + @import '../../common/style.css'; + .container { + justify-content: center; + } + ``` + + +## 选择器 + +css选择器用于选择需要添加样式的元素，支持的选择器如下表所示： + +| 选择器 | 样例 | 样例描述 | +| -------- | -------- | -------- | +| .class | .container | 用于选择class="container"的组件。 | +| \#id | \#titleId | 用于选择id="titleId"的组件。 | +| tag | text | 用于选择text组件。 | +| , | .title, .content | 用于选择class="title"和class="content"的组件。 | +| \#id .class tag | \#containerId .content text | 非严格父子关系的后代选择器，选择具有id="containerId"作为祖先元素，class="content"作为次级祖先元素的所有text组件。如需使用严格的父子关系，可以使用“>”代替空格，如：\#containerId>.content。 | + +示例： + +``` + +
+ 标题 +
+ 内容 +
+
+``` + +``` +/* 页面样式xxx.css */ +/\* 对所有div组件设置样式 \*/ +div { + flex-direction: column; +} +/* 对class="title"的组件设置样式 */ +.title { + font-size: 30px; +} +/* 对id="contentId"的组件设置样式 */ +#contentId { + font-size: 20px; +} +/* 对所有class="title"以及class="content"的组件都设置padding为5px */ +.title, .content { + padding: 5px; +} +/\* 对class="container"的组件下的所有text设置样式 \*/ +.container text { + color: \#007dff; +} +/\* 对class="container"的组件下的直接后代text设置样式 \*/ +.container > text { + color: \#fa2a2d; +} +``` + +以上样式运行效果如下： + +![zh-cn_image_0000001127125270](figures/zh-cn_image_0000001127125270.png) + +其中“.container text”将“标题”和“内容”设置为蓝色，而“.container > text”直接后代选择器将“标题”设置为红色。2者优先级相同，但直接后代选择器声明顺序靠后，将前者样式覆盖（优先级计算见[选择器优先级](#选择器优先级)）。 + +## 选择器优先级 + +选择器的优先级计算规则与w3c规则保持一致（只支持：内联样式，id，class，tag，后代和直接后代），其中内联样式为在元素style属性中声明的样式。 + +当多条选择器声明匹配到同一元素时，各类选择器优先级由高到低顺序为：内联样式 > id > class > tag。 + + +## 伪类 + +css伪类是选择器中的关键字，用于指定要选择元素的特殊状态。例如，:disabled状态可以用来设置元素的disabled属性变为true时的样式。 + +除了单个伪类之外，还支持伪类的组合，例如，:focus:checked状态可以用来设置元素的focus属性和checked属性同时为true时的样式。支持的单个伪类如下表所示，按照优先级降序排列： + +| 名称 | 支持组件 | 描述 | +| -------- | -------- | -------- | +| :disabled | 支持disabled属性的组件 | 表示disabled属性变为true时的元素（不支持动画样式的设置）。 | +| :active | 支持click事件的组件
| 表示被用户激活的元素，如：被用户按下的按钮、被激活的tab-bar页签（不支持动画样式的设置）。 | +| :waiting | button | 表示waiting属性为true的元素（不支持动画样式的设置）。 | +| :checked | input[type="checkbox"、type="radio"]、 switch | 表示checked属性为true的元素（不支持动画样式的设置）。 | + +伪类示例如下，设置按钮的:active伪类可以控制被用户按下时的样式： + +``` + +
+ +
+``` + +``` +/* index.css */ +.button:active { + background-color: #888888;/*按钮被激活时，背景颜色变为#888888 */ +} +``` + +> ![icon-note.gif](public_sys-resources/icon-note.gif) **说明：** +> 针对弹窗类组件及其子元素不支持伪类效果，包括popup、dialog、menu、option、picker + + +## 样式预编译 + +预编译提供了利用特有语法生成css的程序，可以提供变量、运算等功能，令开发者更便捷地定义组件样式，目前支持less、sass和scss的预编译。使用样式预编译时，需要将原css文件后缀改为less、sass或scss，如index.css改为index.less、index.sass或index.scss。 + +- 当前文件使用样式预编译，例如将原index.css改为index.less： + ``` + /* index.less */ + /* 定义变量 */ + @colorBackground: #000000; + .container { + background-color: @colorBackground; /* 使用当前less文件中定义的变量 */ + } + ``` + +- 引用预编译文件，例如common中存在style.scss文件，将原index.css改为index.scss，并引入style.scss： + ``` + /* style.scss */ + /* 定义变量 */ + $colorBackground: #000000; + ``` + + 在index.scss中引用： + + ``` + /* index.scss */ + /* 引入外部scss文件 */ + @import '../../common/style.scss'; + .container { + background-color: $colorBackground; /* 使用style.scss中定义的变量 */ + } + ``` + + > ![icon-note.gif](public_sys-resources/icon-note.gif) **说明：** + > 引用的预编译文件建议放在common目录进行管理。 + +## CSS样式继承6+ + +css样式继承提供了子节点继承父节点样式的能力，继承下来的样式在多选择器样式匹配的场景下，优先级排最低，当前支持以下样式的继承： + +- font-family + +- font-weight + +- font-size + +- font-style + +- text-align + +- line-height + +- letter-spacing + +- color + +- visibility diff --git a/zh-cn/application-dev/ui/js-framework-syntax-hml.md b/zh-cn/application-dev/ui/js-framework-syntax-hml.md new file mode 100644 index 0000000000000000000000000000000000000000..4adc4bf1bc8443fef15ac7d5e36cf9c08d4c5fb7 --- /dev/null +++ b/zh-cn/application-dev/ui/js-framework-syntax-hml.md @@ -0,0 +1,387 @@ +# HML语法参考 + +HML（OpenHarmony Markup Language）是一套类HTML的标记语言，通过组件，事件构建出页面的内容。页面具备数据绑定、事件绑定、列表渲染、条件渲染和逻辑控制等高级能力。 + + +## 页面结构 + +``` + +
+ Image Show +
+ +
+
+``` + + +## 数据绑定 + +``` + +
+ {{content[1]}} +
+``` + +``` +// xxx.js +export default { + data: { + content: ['Hello World!', 'Welcome to my world!'] + }, + changeText: function() { + this.content.splice(1, 1, this.content[0]); + } +} +``` + +> ![icon-note.gif](public_sys-resources/icon-note.gif) **说明：** +> - 针对数组内的数据修改，请使用splice方法生效数据绑定变更。 +> +> - hml文件中的js表达式不支持ES6语法。 + + +## 普通事件绑定 + +事件通过'on'或者'\@'绑定在组件上，当组件触发事件时会执行JS文件中对应的事件处理函数。 + +事件支持的写法有： + +- "funcName"：funcName为事件回调函数名（在JS文件中定义相应的函数实现）。 + +- "funcName(a,b)"：函数参数例如a，b可以是常量，或者是在JS文件中的data中定义的变量（前面不用写this.）。 + +- 示例 + ``` + +
+ {{count}} +
+ + + + + + +
+
+ ``` + + ``` + // xxx.js + export default { + data: { + count: 0 + }, + increase() { + this.count++; + }, + decrease() { + this.count--; + }, + multiply(multiplier) { + this.count = multiplier * this.count; + } + }; + ``` + + ``` + /* xxx.css */ + .container { + display: flex; + flex-direction: column; + justify-content: center; + align-items: center; + left: 0px; + top: 0px; + width: 454px; + height: 454px; + } + .title { + font-size: 30px; + text-align: center; + width: 200px; + height: 100px; + } + .box { + width: 454px; + height: 200px; + justify-content: center; + align-items: center; + flex-wrap: wrap; + } + .btn { + width: 200px; + border-radius: 0; + margin-top: 10px; + margin-left: 10px; + } + ``` + + +## 冒泡事件绑定5+ + +冒泡事件绑定包括： + +- 绑定冒泡事件：on:{event}.bubble。on:{event}等价于on:{event}.bubble。 + +- 绑定并阻止冒泡事件向上冒泡：grab:{event}.bubble。grab:{event}等价于grab:{event}.bubble。 + > ![icon-note.gif](public_sys-resources/icon-note.gif) **说明：** + > 详细冒泡事件说明参见[通用事件](../reference/arkui-js/js-components-common-events.md)章节。 + +- 示例 + ``` + +
+ ; +
+
+ +
+
+ +
+
+ +
+
+
+ ``` + + ``` + // xxx.js + export default { + clickfunc: function(e) { + console.log(e); + }, + touchstartfuc: function(e) { + console.log(e); + }, + } + ``` + +> ![icon-note.gif](public_sys-resources/icon-note.gif) **说明：** +> 采用旧写法(onclick)的事件绑定在最小API版本6以下时采用不冒泡处理，在最小API版本为6及6以上时采用冒泡处理。 + +## 捕获事件绑定5+ + +Touch触摸类事件支持捕获，捕获阶段位于冒泡阶段之前，捕获事件先到达父组件然后达到子组件。 + +捕获事件绑定包括： + +- 绑定捕获事件：on:{event}.capture。 + +- 绑定并阻止事件向下传递：grab:{event}.capture。 + +- 示例 + ``` + +
+ +
+ +
+
+``` + + ``` + // xxx.js + export default { + touchstartfuc: function(e) { + console.log(e); + }, + } + ``` + + +## 列表渲染 + +``` + +
+ + +
+ {{$idx}}.{{$item.name}} +
+ +
+ {{$idx}}.{{value.name}} +
+ +
+ {{index}}.{{value.name}} +
+
+``` + +``` +// xxx.js +export default { + data: { + array: [ + {id: 1, name: 'jack', age: 18}, + {id: 2, name: 'tony', age: 18}, + ], + }, + changeText: function() { + if (this.array[1].name === "tony"){ + this.array.splice(1, 1, {id:2, name: 'Isabella', age: 18}); + } else { + this.array.splice(2, 1, {id:3, name: 'Bary', age: 18}); + } + }, +} +``` + +tid属性主要用来加速for循环的重渲染，旨在列表中的数据有变更时，提高重新渲染的效率。tid属性是用来指定数组中每个元素的唯一标识，如果未指定，数组中每个元素的索引为该元素的唯一id。例如上述tid="id"表示数组中的每个元素的id属性为该元素的唯一标识。for循环支持的写法如下： + +- for="array"：其中array为数组对象，array的元素变量默认为$item。 + +- for="v in array"：其中v为自定义的元素变量，元素索引默认为$idx。 + +- for="(i, v) in array"：其中元素索引为i，元素变量为v，遍历数组对象array。 + +> ![icon-note.gif](public_sys-resources/icon-note.gif) **说明：** +> - 数组中的每个元素必须存在tid指定的数据属性，否则运行时可能会导致异常。 +> +> - 数组中被tid指定的属性要保证唯一性，如果不是则会造成性能损耗。比如，示例中只有id和name可以作为tid字段，因为它们属于唯一字段。 +> +> - tid不支持表达式。 + + +## 条件渲染 + +条件渲染分为2种：if/elif/else和show。两种写法的区别在于：第一种写法里if为false时，组件不会在vdom中构建，也不会渲染，而第二种写法里show为false时虽然也不渲染，但会在vdom中构建；另外，当使用if/elif/else写法时，节点必须是兄弟节点，否则编译无法通过。实例如下： + +``` + +
+ + + Hello-TV + Hello-Wearable + Hello-World +
+``` + +``` +/* xxx.css */ +.container{ + flex-direction: column; + align-items: center; +} +.btn{ + width: 280px; + font-size: 26px; + margin: 10px 0; +} +``` + +``` +// xxx.js +export default { + data: { + visible: false, + display: true, + }, + toggleShow: function() { + this.visible = !this.visible; + }, + toggleDisplay: function() { + this.display = !this.display; + } +} +``` + +优化渲染优化：show方法。当show为true时，节点正常渲染；当为false时，仅仅设置display样式为none。 + +``` + +
+ + Hello World +
+``` + +``` +/* xxx.css */ +.container{ + flex-direction: column; + align-items: center; +} +.btn{ + width: 280px; + font-size: 26px; + margin: 10px 0; +} +``` + +``` +// xxx.js +export default { + data: { + visible: false, + }, + toggle: function() { + this.visible = !this.visible; + }, +} +``` + +> ![icon-note.gif](public_sys-resources/icon-note.gif) **说明：** +> 禁止在同一个元素上同时设置for和if属性。 + +## 逻辑控制块 + +<block>控制块使得循环渲染和条件渲染变得更加灵活；block在构建时不会被当作真实的节点编译。注意block标签只支持for和if属性。 + +``` + + + + + {{$item.name}} + + + + {{$item.color}} + + + + +``` + +``` +// xxx.js +export default { + data: { + glasses: [ + {name:'sunglasses', kinds:[{name:'XXX',color:'XXX'},{name:'XXX',color:'XXX'}]}, + {name:'nearsightedness mirror', kinds:[{name:'XXX',color:'XXX'}]}, + ], + }, +} +``` + +## 模板引用 + +HML可以通过element引用模板文件，详细介绍可参考[自定义组件](../reference/arkui-js/js-components-custom-basic-usage.md)章节。 + +``` + +
+ Name: {{name}} + Age: {{age}} +
+``` + +``` + + +
+ +
+``` diff --git a/zh-cn/application-dev/ui/js-framework-syntax-js.md b/zh-cn/application-dev/ui/js-framework-syntax-js.md new file mode 100644 index 0000000000000000000000000000000000000000..e2e07bd29a6c7564765f8e98b0523a3f809b2fd9 --- /dev/null +++ b/zh-cn/application-dev/ui/js-framework-syntax-js.md @@ -0,0 +1,294 @@ +# JS语法参考 + +JS文件用来定义HML页面的业务逻辑，支持ECMA规范的JavaScript语言。基于JavaScript语言的动态化能力，可以使应用更加富有表现力，具备更加灵活的设计能力。下面讲述JS文件的编译和运行的支持情况。 + + +## 语法 + +支持ES6语法。 + +- 模块声明 + 使用import方法引入功能模块： + + ``` + import router from '@system.router'; + ``` + +- 代码引用 + 使用import方法导入js代码： + + ``` + import utils from '../../common/utils.js'; + ``` + + +## 对象 + +- 应用对象 + | 属性 | 类型 | 描述 | + | -------- | -------- | -------- | + | $def | Object | 使用this.$app.$def获取在app.js中暴露的对象。
> ![icon-note.gif](public_sys-resources/icon-note.gif) **说明：**
> 应用对象不支持数据绑定，需主动触发UI更新。 | + + 示例代码 + + ``` + // app.js + export default { + onCreate() { + console.info('AceApplication onCreate'); + }, + onDestroy() { + console.info('AceApplication onDestroy'); + }, + globalData: { + appData: 'appData', + appVersion: '2.0', + }, + globalMethod() { + console.info('This is a global method!'); + this.globalData.appVersion = '3.0'; + } + }; + ``` + + ``` + // index.js页面逻辑代码 + export default { + data: { + appData: 'localData', + appVersion:'1.0', + }, + onInit() { + this.appData = this.$app.$def.globalData.appData; + this.appVersion = this.$app.$def.globalData.appVersion; + }, + invokeGlobalMethod() { + this.$app.$def.globalMethod(); + }, + getAppVersion() { + this.appVersion = this.$app.$def.globalData.appVersion; + } + } + ``` + +- 页面对象 + | 属性 | 类型 | 描述 | + | -------- | -------- | -------- | + | data | Object/Function | 页面的数据模型，类型是对象或者函数，如果类型是函数，返回值必须是对象。属性名不能以$或_开头，不要使用保留字for, if, show, tid。
data与private和public不能重合使用。 | + | $refs | Object | 持有注册过ref 属性的DOM元素或子组件实例的对象。示例见[获取DOM元素](#获取dom元素)。 | + | private | Object | 页面的数据模型，private下的数据属性只能由当前页面修改。 | + | public | Object | 页面的数据模型，public下的数据属性的行为与data保持一致。 | + | props | Array/Object | props用于组件之间的通信，可以通过<tag xxxx='value'>方式传递给组件；props名称必须用小写，不能以$或_开头，不要使用保留字for, if, show, tid。目前props的数据类型不支持Function。示例见[自定义组件](../reference/arkui-js/js-components-custom-props.md)。 | + | computed | Object | 用于在读取或设置进行预先处理，计算属性的结果会被缓存。计算属性名不能以$或_开头，不要使用保留字。示例见[自定义组件](../reference/arkui-js/js-components-custom-props.md)。 | + +## 方法 + +- 数据方法 + | 方法 | 参数 | 描述 | + | -------- | -------- | -------- | + | $set | key: string, value: any | 添加新的数据属性或者修改已有数据属性。
用法：
this.$set('key',value)：添加数据属性。 | + | $delete | key: string | 删除数据属性。
用法：
this.$delete('key')：删除数据属性。 | + + 示例代码 + + ``` + // index.js + export default { + data: { + keyMap: { + OS: 'OpenHarmony', + Version: '2.0', + }, + }, + getAppVersion() { + this.$set('keyMap.Version', '3.0'); + console.info("keyMap.Version = " + this.keyMap.Version); // keyMap.Version = 3.0 + + this.$delete('keyMap'); + console.info("keyMap.Version = " + this.keyMap); // log print: keyMap.Version = undefined + } + } + ``` + +- 公共方法 + | 方法 | 参数 | 描述 | + | -------- | -------- | -------- | + | $element | id: string | 获得指定id的组件对象，如果无指定id，则返回根组件对象。示例见[获取DOM元素](#获取dom元素)。
用法：
<div id='xxx'></div>
- this.$element('xxx')：获得id为xxx的组件对象。
- this.$element()：获得根组件对象。 | + | $rootElement | 无 | 获取根组件对象。
用法：this.$rootElement().scrollTo({ duration: 500, position: 300 }), 页面在500ms内滚动300px。 | + | $root | 无 | 获得顶级ViewModel实例。[获取ViewModel](#获取viewmodel)示例。 | + | $parent | 无 | 获得父级ViewModel实例。[获取ViewModel](#获取viewmodel)示例。 | + | $child | id: string | 获得指定id的子级自定义组件的ViewModel实例。[获取ViewModel](#获取viewmodel)示例。
用法：
this.$child('xxx') ：获取id为xxx的子级自定义组件的ViewModel实例。 | + +- 事件方法 + | 方法 | 参数 | 描述 | + | -------- | -------- | -------- | + | $watch | data: string, callback: string \| Function | 观察data中的属性变化，如果属性值改变，触发绑定的事件。示例见[自定义组件](../reference/arkui-js/js-components-custom-props.md)。
用法：
this.$watch('key', callback) | + +- 页面方法 + | 方法 | 参数 | 描述 | + | -------- | -------- | -------- | + | scrollTo6+ | scrollPageParam: ScrollPageParam | 将页面滚动到目标位置，可以通过ID选择器指定或者滚动距离指定。 | + + **表1** ScrollPageParam6+ + + | 名称 | 类型 | 默认值 | 描述 | + | -------- | -------- | -------- | -------- | + | position | number | - | 指定滚动位置。 | + | id | string | - | 指定需要滚动到的元素id。 | + | duration | number | 300 | 指定滚动时长，单位为毫秒。 | + | timingFunction | string | ease | 指定滚动动画曲线，可选值参考
[动画样式animation-timing-function](../reference/arkui-js/js-components-common-animation.md)。 | + | complete | () => void | - | 指定滚动完成后需要执行的回调函数。 | + + 示例： + + ``` + this.$rootElement().scrollTo({position: 0}) + this.$rootElement().scrollTo({id: 'id', duration: 200, timingFunction: 'ease-in', complete: ()=>void}) + ``` + + +## 获取DOM元素 + +1. 通过$refs获取DOM元素 + ``` + +
+ +
+ ``` + + ``` + // index.js + export default { + data: { + images: [ + { src: '/common/frame1.png' }, + { src: '/common/frame2.png' }, + { src: '/common/frame3.png' }, + ], + }, + handleClick() { + const animator = this.$refs.animator; // 获取ref属性为animator的DOM元素 + const state = animator.getState(); + if (state === 'paused') { + animator.resume(); + } else if (state === 'stopped') { + animator.start(); + } else { + animator.pause(); + } + }, + }; + ``` + +2. 通过$element获取DOM元素 + ``` + +
+ +
+ ``` + + ``` + // index.js + export default { + data: { + images: [ + { src: '/common/frame1.png' }, + { src: '/common/frame2.png' }, + { src: '/common/frame3.png' }, + ], + }, + handleClick() { + const animator = this.$element('animator'); // 获取id属性为animator的DOM元素 + const state = animator.getState(); + if (state === 'paused') { + animator.resume(); + } else if (state === 'stopped') { + animator.start(); + } else { + animator.pause(); + } + }, + }; + ``` + +## 获取ViewModel + +根节点所在页面： + +``` + + +
+
+ {{text}} + +
+
+``` + +``` +// root.js +export default { + data: { + text: 'I am root!', + }, +} +``` + +自定义parent组件： + +``` + + +
+ parent component click + hello parent component! + +
+``` + +``` +// parent.js +export default { + data: { + show: false, + text: 'I am parent component!', + }, + parentClicked () { + this.show = !this.show; + console.info('parent component get parent text'); + console.info(`${this.$parent().text}`); + console.info("parent component get child function"); + console.info(`${this.$child('selfDefineChild').childClicked()}`); + }, +} +``` + +自定义child组件： + +``` + +
+ child component clicked + hello child component +
+``` + +``` +// child.js +export default { + data: { + show: false, + text: 'I am child component!', + }, + childClicked () { + this.show = !this.show; + console.info('child component get parent text'); + console.info('${this.$parent().text}'); + console.info('child component get root text'); + console.info('${this.$root().text}'); + }, +} +``` diff --git a/zh-cn/application-dev/ui/js-framework-syntax.md b/zh-cn/application-dev/ui/js-framework-syntax.md new file mode 100644 index 0000000000000000000000000000000000000000..fd87a23b31ffd18f94b394e6a2f32dbd357ac2a5 --- /dev/null +++ b/zh-cn/application-dev/ui/js-framework-syntax.md @@ -0,0 +1,9 @@ +# 语法 + + + +- **[HML语法参考](js-framework-syntax-hml.md)** + +- **[CSS语法参考](js-framework-syntax-css.md)** + +- **[JS语法参考](js-framework-syntax-js.md)** \ No newline at end of file diff --git a/zh-cn/application-dev/ui/js-framework.md b/zh-cn/application-dev/ui/js-framework.md new file mode 100644 index 0000000000000000000000000000000000000000..a2daf191d72538eeacfd29474a54f36034e48322 --- /dev/null +++ b/zh-cn/application-dev/ui/js-framework.md @@ -0,0 +1,17 @@ +# 框架说明 + + + +- **[文件组织](js-framework-file.md)** + +- **[js标签配置](js-framework-js-tag.md)** + +- **[app.js](js-framework-js-file.md)** + +- **[语法](js-framework-syntax.md)** + +- **[生命周期](js-framework-lifecycle.md)** + +- **[资源限定与访问](js-framework-resource-restriction.md)** + +- **[多语言支持](js-framework-multiple-languages.md)** \ No newline at end of file diff --git a/zh-cn/application-dev/ui/ts-a-deep-dive-into-component.md b/zh-cn/application-dev/ui/ts-a-deep-dive-into-component.md new file mode 100644 index 0000000000000000000000000000000000000000..960cd294dff35dd8802e79a0a68826b619e4278d --- /dev/null +++ b/zh-cn/application-dev/ui/ts-a-deep-dive-into-component.md @@ -0,0 +1,11 @@ +# 深入理解组件化 + + + +- **[build函数](ts-function-build.md)** + +- **[自定义组件初始化](ts-custom-component-initialization.md)** + +- **[自定义组件生命周期回调函数](ts-custom-component-lifecycle-callbacks.md)** + +- **[组件创建和重新初始化示例](ts-component-creation-re-initialization.md)** \ No newline at end of file diff --git a/zh-cn/application-dev/ui/ts-application-states-apis-environment.md b/zh-cn/application-dev/ui/ts-application-states-apis-environment.md new file mode 100644 index 0000000000000000000000000000000000000000..8ca4c6c2b6ae81587582899c90865012ac92b31a --- /dev/null +++ b/zh-cn/application-dev/ui/ts-application-states-apis-environment.md @@ -0,0 +1,36 @@ +# 环境变量 + +**Environment**是框架在应用程序启动时创建的单例对象，它为**AppStorage**提供了一系列应用程序需要的环境状态属性，这些属性描述了应用程序运行的设备环境。**Environment**及其属性是不可变的，所有属性值类型均为简单类型。 + + +如下示例展示了从**Environment**获取语音环境： + + +``` +Environment.EnvProp("accessibilityEnabled", "default"); +var enable = AppStorageGet("accessibilityEnabled"); +``` + + +**accessibilityEnabled**是**Environment**提供默认系统变量识别符。首先需要将对应系统属性绑定到**Appstorage**中，后可以通过AppStorage中的方法或者装饰器，访问对应系统属性数据。 + + +## Environment接口 + +| **key** | 参数 | 返回值 | **说明** | +| -------- | -------- | -------- | -------- | +| EnvProp | key : string
defaultValue: any | boolean | 关联此系统项到Appstorage中。建议在app启动时使用此Api。如果此属性在Appstorage已经存在则返回false。请勿使用AppStorage中的变量，在调用此方法关联环境变量。 | +| EnvProps | keys: {
key: string,
defaultValue: any
}[] | void | 关联此系统项数组到Appstorage中。 | +| Keys | Array<string> | number | 返回关联的系统项。 | + + +## Environment内置的环境变量 + +| **key** | **类型** | **说明** | +| -------- | -------- | -------- | +| accessibilityEnabled | boolean | 无障碍屏幕朗读是否启用。 | +| colorMode | ColorMode | 深浅色模式，选项值为：
- ColorMode.LIGHT：浅色模式；
- ColorMode.DARK：深色模式。 | +| fontScale | number | 字体大小比例，范围为：[0.85, 1.45]。 | +| fontWeightScale | number | 字体权重比例，取值范围：[0.6, 1.6]。 | +| layoutDirection | LayoutDirection | 布局方向类型，可选值为：
- LayoutDirection.LTR：从左到右；
- LayoutDirection.RTL：从右到左。 | +| languageCode | string | 当前系统语言值，小写字母，例如zh。 | diff --git a/zh-cn/application-dev/ui/ts-application-states-apis-persistentstorage.md b/zh-cn/application-dev/ui/ts-application-states-apis-persistentstorage.md new file mode 100644 index 0000000000000000000000000000000000000000..70a6771bff6cde0146cb0221d983acf8e4d5f856 --- /dev/null +++ b/zh-cn/application-dev/ui/ts-application-states-apis-persistentstorage.md @@ -0,0 +1,46 @@ +# 持久化数据管理 + +**PersistentStorage**用于管理应用持久化数据。此对象可以将特定标记的持久化数据链接到AppStorage中，并由AppStorage接口访问对应持久化数据，或者通过@StorageLink修饰器来访问对应key的变量。 + + +## PersistentStorage接口 + +| 方法 | 参数说明 | 返回值 | 定义 | +| -------- | -------- | -------- | -------- | +| PersistProp | key : string
defaultValue: T | void | 关联命名的属性在AppStorage变为持久化数据。赋值覆盖顺序
首先 如果此属性在AppStorage中存在，并且将Persistent中的数据复写为AppStorage中的属性值。
其次Persistent中有此命名的属性，使用Persistent中的属性值。
最后 以上条件不满足使用defaultValue，不支持null和undefined。 | +| DeleteProp | key: string | void | 取消双向数据绑定，该属性值将从持久存储中删除。 | +| PersistProps | keys: {
key: string,
defaultValue: any
}[] | void | 关联多个命名的属性绑定。 | +| Keys | void | Array<string> | 返回所有持久化属性的标记。 | + +> ![icon-note.gif](public_sys-resources/icon-note.gif) **说明：** +> - PersistProp接口使用时，需要保证输入对应的key应当在Appstorage存在。 +> +> - DeleteProp接口使用时，只能对本次启动已经link过的数据生效。 + + +``` +PersistentStorage.PersistProp("highScore", "0"); + +@Entry +@Component +struct PersistentComponent { + @StorageLink('highScore') highScore: string = '0' + @State currentScore: number = 0 + build() { + Column() { + if (this.currentScore === Number(this.highScore)) { + Text(`new highScore : ${this.highScore}`) + } + Button() { + Text(`goal!, currentScore : ${this.currentScore}`) + .fontSize(10) + }.onClick(() => { + this.currentScore++ + if (this.currentScore > Number(this.highScore)) { + this.highScore = this.currentScore.toString() + } + }) + } + } +} +``` diff --git a/zh-cn/application-dev/ui/ts-application-states-appstorage.md b/zh-cn/application-dev/ui/ts-application-states-appstorage.md new file mode 100644 index 0000000000000000000000000000000000000000..bc818d03e8f74c17e12c00ae5eb74527f6eb980d --- /dev/null +++ b/zh-cn/application-dev/ui/ts-application-states-appstorage.md @@ -0,0 +1,44 @@ +# 应用程序的数据存储 + +**AppStorage**是应用程序中的单例对象，由UI框架在应用程序启动时创建。它的目的是为可变应用程序状态属性提供中央存储。**AppStorage**包含整个应用程序中需要访问的所有状态属性。只要应用程序保持运行，**AppStorage**存储就会保留所有属性及其值，属性值可以通过唯一的键值进行访问。 + + +UI组件可以通过装饰器将应用程序状态数据与**AppStorage**进行同步。应用业务逻辑的实现也可以通过接口访问**AppStorage**。 + + +AppStorage的选择状态属性可以与不同的数据源或数据接收器同步。这些数据源和接收器可以是设备上的本地或远程，并具有不同的功能，如数据持久性。这样的数据源和接收器可以独立于UI在业务逻辑中实现。 + + +默认情况下，**AppStorage**中的属性是可变的，**AppStorage**还可使用不可变（只读）属性。 + + +## AppStorage接口说明 + +| 方法 | 参数说明 | 返回值 | 定义 | +| -------- | -------- | -------- | -------- | +| Link | key: string | \@Link | 如果存在具有给定键的数据，则返回到此属性的双向数据绑定，该双向绑定意味着变量或者组件对数据的更改将同步到**AppStorage**，通过**AppStorage**对数据的修改将同步到变量或者组件。如果具有此键的属性不存在或属性为只读，则返回**undefined**。 | +| SetAndLink | key : String
defaultValue: T | \@Link | 与Link接口类似。如果当前的key在AppStorage有保存，则返回此key对应的value。如果此key未被创建，则创建一个对应default值的Link返回。 | +| Prop | key: string | \@Prop | 如果存在具有给定键的属性，则返回到此属性的单向数据绑定。该单向绑定意味着只能通过**AppStorage**将属性的更改同步到变量或者组件。该方法返回的变量为不可变变量，适用于可变和不可变的状态属性，如果具有此键的属性不存在则返回**undefined**。
> ![icon-note.gif](public_sys-resources/icon-note.gif) **说明：**
> prop方法对应的属性值类型为简单类型。 | +| SetAndProp | key : string
defaultValue: S | \@Prop | 与Prop接口类似。如果当前的key在AppStorage有保存，则返回此key对应的value。如果此key未被创建，则创建一个对应default值的Prop返回。 | +| Has | key: string | boolean | 判断对应键值的属性是否存在。 | +| Keys | void | array<string> | 返回包含所有键的字符串数组。 | +| Get | string | T或undefined | 通过此接口获取对应此key值的value | +| Set | string,  newValue ：T | void | 对已保存的key值，替换其value值。 | +| SetOrCreate | string,  newValue ：T | boolean | 如果相同名字的属性存在：如果此属性可以被更改返回true，否则返回false
如果相同名字的属性不存在：创建第一个赋值为defaultValue的属性，不支持null和undefined | +| Delete | key : string | boolean | 删除属性，如果存在返回true，不存在返回false | +| Clear | none | boolean | 删除所有的属性，如果当前有状态变量依旧引用此属性，则返回false | +| IsMutable | key: string | | 返回此属性是否存在并且是否可以改变。 | + +> ![icon-note.gif](public_sys-resources/icon-note.gif) **说明：** +> 当前接口当前仅可以处理基础类型数据，对于修改object中某一个值尚未支持。 + + +## 示例 + +``` +let link1 = AppStorage.Link('PropA')let link2 = AppStorage.Link('PropA')let prop = AppStorage.Prop('PropA') + +link1 = 47 // causes link1 == link2 == prop == 47 +link2 = link1 + prop // causes link1 == link2 == prop == 94 +prop = 1 // error, prop is immutable +``` diff --git a/zh-cn/application-dev/ui/ts-application-states-storagelink-storageprop.md b/zh-cn/application-dev/ui/ts-application-states-storagelink-storageprop.md new file mode 100644 index 0000000000000000000000000000000000000000..b1de366693f627266cef248441aad0431fffebbe --- /dev/null +++ b/zh-cn/application-dev/ui/ts-application-states-storagelink-storageprop.md @@ -0,0 +1,57 @@ +# AppStorage与组件同步 + +在[管理组件拥有的状态](../ui/ts-component-states-state.md)中，我们已经定义了如何将组件的状态变量与父组件或祖先组件中的**@State**装饰的状态变量同步，主要包括**@Prop**、**@Link**、**@Consume**。 + + +本章节将定义如何将组件变量与**AppStorage**同步，主要提供**@StorageLink**和**@StorageProp**装饰器。 + + +## @StorageLink装饰器 + +组件通过使用**@StorageLink(key)**装饰的状态变量，将与**AppStorage**建立双向数据绑定，**key**为**AppStorage**中的属性键值。当创建包含**@StorageLink**的状态变量的组件时，该状态变量的值将使用**AppStorage**中的值进行初始化。在UI组件中对**@StorageLink**的状态变量所做的更改将同步到**AppStorage**，并从**AppStorage**同步到任何其他绑定实例中，如**PersistentStorage**或其他绑定的UI组件。 + + +## @StorageProp装饰器 + +组件通过使用**@StorageProp(key)**装饰的状态变量，将于**AppStorage**建立单向数据绑定，**key**标识AppStorage中的属性键值。当创建包含**@StoageProp**的状态变量的组件时，该状态变量的值将使用**AppStorage**中的值进行初始化。**AppStorage**中的属性值更改会导致绑定的UI组件进行状态更新。 + + +## 示例 + +``` +let varA = AppStorage.Link('varA') +let envLang = AppStorage.Prop('languageCode') + +@Entry +@Component +struct ComponentA { + @StorageLink('varA') varA: number = 2 + @StorageProp('languageCode') lang: string = 'en' + private label: string = 'count' + + private aboutToAppear() { + this.label = (this.lang === 'zh') ? '数' : 'Count' + } + + build() { + Row({ space: 20 }) { + + Button(`${this.label}: ${this.varA}`) + .onClick(() => { + AppStorage.Set('varA', AppStorage.Get('varA') + 1) + }) + Button(`lang: ${this.lang}`) + .onClick(() => { + if (this.lang === 'zh') { + AppStorage.Set('languageCode', 'en') + } else { + AppStorage.Set('languageCode', 'zh') + } + this.label = (this.lang === 'zh') ? '数' : 'Count' + }) + } + } +} +``` + +每次用户单击Count按钮时，this.varA变量值都会增加，此变量与AppStorage中的varA同步。每次用户单击当前语言按钮时，修改AppStorage中的languageCode，此修改会同步给this.lang变量。 diff --git a/zh-cn/application-dev/reference/arkui-ts/ts-attribution-configuration.md b/zh-cn/application-dev/ui/ts-attribution-configuration.md similarity index 84% rename from zh-cn/application-dev/reference/arkui-ts/ts-attribution-configuration.md rename to zh-cn/application-dev/ui/ts-attribution-configuration.md index 89afab04a3078700258b8096d1e76fe96af681bc..1a7bd99b60c95f75c2f524305c079d9cf472eaae 100644 --- a/zh-cn/application-dev/reference/arkui-ts/ts-attribution-configuration.md +++ b/zh-cn/application-dev/ui/ts-attribution-configuration.md @@ -1,46 +1,55 @@ -# 属性配置 +# 属性配置 + + 使用属性方法配置组件的属性。属性方法紧随组件，并用“**.**”运算符连接。 + 配置**Text**组件的字体大小属性示例： + ``` Text('123') .fontSize(12) ``` + 此外，您还可以使用“**.**”操作进行链式调用并同时配置组件的多个属性。 + 您可以同时配置**Image**组件的多个属性，如下所示： + ``` Image('a.jpg') - .alt('error.jpg') - .width(100) - .height(100) + .alt('error.jpg') .width(100) .height(100) ``` + 除了直接传递常量参数外，还可以传递变量或表达式，如下所示： + ``` // Size, count, and offset are private variables defined in the component. Text('hello') .fontSize(this.size) Image('a.jpg') - .width(this.count % 2 === 0 ? 100 : 200) - .height(this.offset + 100) + .width(this.count % 2 === 0 ? 100 : 200) .height(this.offset + 100) ``` + 对于内置组件，框架还为其属性预定义了一些枚举类型，供开发人员调用，枚举值可以作为参数传递。 + 枚举类型必须满足参数类型要求，有关特定属性的枚举类型定义的详细信息。 + 您可以按以下方式配置**Text**组件的颜色和字重属性： + ``` Text('hello') .fontSize(20) .fontColor(Color.Red) .fontWeight(FontWeight.Bold) ``` - diff --git a/zh-cn/application-dev/reference/arkui-ts/ts-child-component-configuration.md b/zh-cn/application-dev/ui/ts-child-component-configuration.md similarity index 81% rename from zh-cn/application-dev/reference/arkui-ts/ts-child-component-configuration.md rename to zh-cn/application-dev/ui/ts-child-component-configuration.md index 22fd3f45d2aa3eac98fe0abf0fb1841dffdef84f..8a55c4c5da317ae980f563dfa1675bab6b72520f 100644 --- a/zh-cn/application-dev/reference/arkui-ts/ts-child-component-configuration.md +++ b/zh-cn/application-dev/ui/ts-child-component-configuration.md @@ -1,9 +1,13 @@ -# 子组件配置 +# 子组件配置 + + + +对于支持子组件配置的组件，例如容器组件，在“**{ ... }**”里为组件添加子组件的UI描述。**Column**、**Row**、**Stack**、**Button**、**Grid**和**List**组件都是容器组件。 -对于支持子组件配置的组件，例如容器组件，在“**\{ ... \}**”里为组件添加子组件的UI描述。**Column**、**Row**、**Stack**、**Button**、**Grid**和**List**组件都是容器组件。 以下是简单的**Column**示例： + ``` Column() { Text('Hello') @@ -15,8 +19,10 @@ Column() { } ``` + 可以嵌套多个子组件： + ``` Column() { Column() { @@ -44,4 +50,3 @@ Column() { } }.alignItems(HorizontalAlign.Center) // center align components inside Column ``` - diff --git a/zh-cn/application-dev/reference/arkui-ts/ts-component-based-builder.md b/zh-cn/application-dev/ui/ts-component-based-builder.md similarity index 83% rename from zh-cn/application-dev/reference/arkui-ts/ts-component-based-builder.md rename to zh-cn/application-dev/ui/ts-component-based-builder.md index 983bbd0e43ae332702b0892bad91df7ee88ba416..13eda212ad9e38a8f362518c3cf50d8356ee2d06 100644 --- a/zh-cn/application-dev/reference/arkui-ts/ts-component-based-builder.md +++ b/zh-cn/application-dev/ui/ts-component-based-builder.md @@ -1,9 +1,13 @@ -# @Builder +# @Builder + + + +@Builder装饰器定义了一个如何渲染自定义组件的方法。此装饰器提供了一个修饰方法，其目的是和[build函数](../ui/ts-function-build.md)一致。@Builder装饰器装饰的方法的语法规范与build函数也保持一致。 -@Builder装饰器定义了一个如何渲染自定义组件的方法。此装饰器提供了一个修饰方法，其目的是和[build函数](ts-function-build.md)一致。@Builder装饰器装饰的方法的语法规范与build函数也保持一致。 通过@Builder装饰器可以在一个自定义组件内快速生成多个布局内容。 + ``` @Entry @Component @@ -41,4 +45,3 @@ struct CompA { } } ``` - diff --git a/zh-cn/application-dev/reference/arkui-ts/ts-component-based-component.md b/zh-cn/application-dev/ui/ts-component-based-component.md similarity index 67% rename from zh-cn/application-dev/reference/arkui-ts/ts-component-based-component.md rename to zh-cn/application-dev/ui/ts-component-based-component.md index 1c892277959ec243a2dad0dfc3b922c11c41e83a..c17df6e00a0c8aeceb367a49430597e5094df8b9 100644 --- a/zh-cn/application-dev/reference/arkui-ts/ts-component-based-component.md +++ b/zh-cn/application-dev/ui/ts-component-based-component.md @@ -1,29 +1,40 @@ -# @Component +# @Component **@Component**装饰的**struct**表示该结构体具有组件化能力，能够成为一个独立的组件，这种类型的组件也称为自定义组件。 + 该组件可以组合其他组件，它通过实现**build**方法来描述UI结构，其必须符合**Builder**的接口约束，该接口定义如下： + ``` interface Builder { build: () => void } ``` + 用户定义的组件具有以下特点： -- **可组合：**允许开发人员组合使用内置组件和其他组件，以及公共属性和方法； -- **可重用：**可以被其他组件重用，并作为不同的实例在不同的父组件或容器中使用； -- **有生命周期：**生命周期的回调方法可以在组件中配置，用于业务逻辑处理； -- **数据驱动更新：**可以由状态数据驱动，实现UI自动更新。 -组件生命周期主要包括**aboutToAppear**和**aboutToDisappear**回调函数，有关规范，请参见“[组件生命周期回调函数](ts-custom-component-lifecycle-callbacks.md)”章节。 +- **可组合：**允许开发人员组合使用内置组件和其他组件，以及公共属性和方法； + +- **可重用：**可以被其他组件重用，并作为不同的实例在不同的父组件或容器中使用； + +- **有生命周期：**生命周期的回调方法可以在组件中配置，用于业务逻辑处理； + +- **数据驱动更新：**可以由状态数据驱动，实现UI自动更新。 ->![](../../public_sys-resources/icon-note.gif) **说明：** ->- 组件必须遵循上述**Builder**接口约束，其他组件在内部的**build**方法中以声明式方式进行组合，在组件的第一次创建和更新场景中都会调用**build**方法。 ->- 组件禁止自定义构造函数。 -## 示例 +组件生命周期主要包括**aboutToAppear**和**aboutToDisappear**回调函数，有关规范，请参见“[组件生命周期回调函数](../ui/ts-custom-component-lifecycle-callbacks.md)”章节。 + + +> ![icon-note.gif](public_sys-resources/icon-note.gif) **说明：** +> - 组件必须遵循上述**Builder**接口约束，其他组件在内部的**build**方法中以声明式方式进行组合，在组件的第一次创建和更新场景中都会调用**build**方法。 +> +> - 组件禁止自定义构造函数。 + + +## 示例 如下代码定义了**MyComponent**组件**：** @@ -85,4 +96,3 @@ struct ParentComponent { } } ``` - diff --git a/zh-cn/application-dev/reference/arkui-ts/ts-component-based-customdialog.md b/zh-cn/application-dev/ui/ts-component-based-customdialog.md similarity index 94% rename from zh-cn/application-dev/reference/arkui-ts/ts-component-based-customdialog.md rename to zh-cn/application-dev/ui/ts-component-based-customdialog.md index 7cefbc4f80f1b40cf3e8a713c316f40afc80e2ba..09144056b6cf1ee64d27b09dbb800431186f78cd 100644 --- a/zh-cn/application-dev/reference/arkui-ts/ts-component-based-customdialog.md +++ b/zh-cn/application-dev/ui/ts-component-based-customdialog.md @@ -1,7 +1,10 @@ -# @CustomDialog +# @CustomDialog + + **@CustomDialog**装饰器用于装饰自定义弹窗。 + ``` // custom-dialog-demo.ets @CustomDialog @@ -46,4 +49,3 @@ struct CustomDialogUser { } } ``` - diff --git a/zh-cn/application-dev/reference/arkui-ts/ts-component-based-entry.md b/zh-cn/application-dev/ui/ts-component-based-entry.md similarity index 69% rename from zh-cn/application-dev/reference/arkui-ts/ts-component-based-entry.md rename to zh-cn/application-dev/ui/ts-component-based-entry.md index b84dd545b39605e2d3e9df53d018592d6243d5e1..532cb628bdd120c3ec5b535cfb3b92954c6b451e 100644 --- a/zh-cn/application-dev/reference/arkui-ts/ts-component-based-entry.md +++ b/zh-cn/application-dev/ui/ts-component-based-entry.md @@ -1,13 +1,15 @@ -# @Entry +# @Entry 用**@Entry**装饰的自定义组件用作页面的默认入口组件，加载页面时，将首先创建并呈现**@Entry**装饰的自定义组件。 ->![](../../public_sys-resources/icon-note.gif) **说明：** ->在单个源文件中，最多可以使用**@Entry**装饰一个自定义组件。 -## 示例 +> ![icon-note.gif](public_sys-resources/icon-note.gif) **说明：** +> 在单个源文件中，最多可以使用**\@Entry**装饰一个自定义组件。 -**@Entry**的用法如下： + +## 示例 + +**\@Entry**的用法如下： ``` // Only MyComponent decorated by @Entry is rendered and displayed. "hello world" is displayed, but "goodbye" is not displayed. @@ -32,4 +34,3 @@ struct HideComponent { } } ``` - diff --git a/zh-cn/application-dev/reference/arkui-ts/ts-component-based-extend.md b/zh-cn/application-dev/ui/ts-component-based-extend.md similarity index 53% rename from zh-cn/application-dev/reference/arkui-ts/ts-component-based-extend.md rename to zh-cn/application-dev/ui/ts-component-based-extend.md index 036813fb8444ea476ae62522ffbaaf0cef40d7a0..5ce6ad41aa3142acf1f24b97b6d512b7ff85cee6 100644 --- a/zh-cn/application-dev/reference/arkui-ts/ts-component-based-extend.md +++ b/zh-cn/application-dev/ui/ts-component-based-extend.md @@ -1,11 +1,14 @@ -# @Extend +# @Extend + + **@Extend**装饰器将新的属性函数添加到内置组件上，如**Text**、**Column**、**Button**等。通过**@Extend**装饰器可以快速定义并复用组件的自定义样式。 + ``` -@Extend(Text) function fancy(color: number) { - .fontColor(color) - .fontSize(24) +@Extend(Text) function fancy(fontSize: number) { + .fontColor(Color.Red) + .fontSize(fontSize) .fontStyle(FontStyle.Italic) } @@ -15,14 +18,14 @@ struct FancyUse { build() { Row({ space: 10 }) { Text("Fancy") - .fancy(Color.Blue) + .fancy(16) Text("Fancy") - .fancy(Color.Red) + .fancy(24) } } } ``` ->![](../../public_sys-resources/icon-note.gif) **说明：** ->@Extend装饰器不能用在自定义组件struct定义框内。 +> ![icon-note.gif](public_sys-resources/icon-note.gif) **说明：** +> @Extend装饰器不能用在自定义组件struct定义框内。 diff --git a/zh-cn/application-dev/reference/arkui-ts/ts-component-based-preview.md b/zh-cn/application-dev/ui/ts-component-based-preview.md similarity index 82% rename from zh-cn/application-dev/reference/arkui-ts/ts-component-based-preview.md rename to zh-cn/application-dev/ui/ts-component-based-preview.md index 0588784d0d6635dcfbd5fdfddd22d55334941be6..fb685417725b0c113f2939f62e22170238373842 100644 --- a/zh-cn/application-dev/reference/arkui-ts/ts-component-based-preview.md +++ b/zh-cn/application-dev/ui/ts-component-based-preview.md @@ -1,14 +1,17 @@ -# @Preview +# @Preview 用**@Preview**装饰的自定义组件可以在DevEco的PC预览上进行单组件预览，加载页面时，将创建并呈现**@Preview**装饰的自定义组件。 ->![](../../public_sys-resources/icon-note.gif) **说明：** ->在单个源文件中，最多可以使用**@Preview**装饰一个自定义组件。 -## 示例 +> ![icon-note.gif](public_sys-resources/icon-note.gif) **说明：** +> 在单个源文件中，最多可以使用**@Preview**装饰一个自定义组件。 + + +## 示例 **@Preview**的用法如下： + ``` // Display only Hello Component1 on the PC preview. The content under MyComponent is displayed on the real device. @Entry @@ -57,4 +60,3 @@ struct Component2 { } } ``` - diff --git a/zh-cn/application-dev/ui/ts-component-based.md b/zh-cn/application-dev/ui/ts-component-based.md new file mode 100644 index 0000000000000000000000000000000000000000..debff48ae78c7632f4f98474fa89e239911574fb --- /dev/null +++ b/zh-cn/application-dev/ui/ts-component-based.md @@ -0,0 +1,15 @@ +# 组件化 + + + +- **[\@Component](ts-component-based-component.md)** + +- **[\@Entry](ts-component-based-entry.md)** + +- **[\@Preview](ts-component-based-preview.md)** + +- **[\@Builder](ts-component-based-builder.md)** + +- **[\@Extend](ts-component-based-extend.md)** + +- **[\@CustomDialog](ts-component-based-customdialog.md)** \ No newline at end of file diff --git a/zh-cn/application-dev/ui/ts-component-creation-re-initialization.md b/zh-cn/application-dev/ui/ts-component-creation-re-initialization.md new file mode 100644 index 0000000000000000000000000000000000000000..11f03699d12f2f4b06a493912e881dfbf2fe64ab --- /dev/null +++ b/zh-cn/application-dev/ui/ts-component-creation-re-initialization.md @@ -0,0 +1,92 @@ +# 组件创建和重新初始化示例 + +``` +@Entry +@Component +struct ParentComp { + @State isCountDown: boolean = true + build() { + Column() { + Text(this.isCountDown ? 'Count Down' : 'Stopwatch') + if (this.isCountDown) { + Image('countdown.png') + TimerComponent({counter: 10, changePerSec: -1, showInColor: Color.Red}) + } else { + Image('stopwatch.png') + TimerComponent({counter: 0, changePerSec: +1, showInColor: Color.Black }) + } + Button(this.isCountDown ? 'Swtich to Stopwatch' : 'Switch to Count Down') + .onClick(() => {this.isCountDown = !this.isCountDown}) + } + } +} + +// Manage and display a count down / stop watch timer +@Component +struct TimerComponent { + @State counter: number = 0 + private changePerSec: number = -1 + private showInColor: Color = Color.Black + private timerId : number = -1 + + build() { + Text(`${this.counter}sec`) + .fontColor(this.showInColor) + } + + aboutToAppear() { + this.timerId = setInterval(() => {this.counter += this.changePerSec}, 1000) + } + + aboutToDisappear() { + if (this.timerId > 0) { + clearTimeout(this.timerId) + this.timerId = -1 + } + } +} +``` + + +## 初始创建和渲染 + +1. 创建父组件**ParentComp**； + +2. 本地初始化**ParentComp**的状态变量**isCountDown**； + +3. 执行**ParentComp**的**build**函数； + +4. 创建**Column**内置组件； + 1. 创建**Text**内置组件，设置其文本展示内容，并将**Text**组件实例添加到**Column**中； + 2. 判断if条件，创建**true**分支上的组件； + 1. 创建**Image**内置组件，并设置其图片源地址； + 2. 使用给定的构造函数创建**TimerComponent**； + 1. 创建**TimerComponent**对象； + 2. 本地初始化成员变量初始值； + 3. 使用**TimerComponent**构造函数提供的参数更新成员变量的值； + 4. 执行**TimerComponent**的**aboutToAppear**函数； + 5. 执行**TimerComponent**的**build**函数，创建相应的UI描述结构； + 3. 创建**Button**内置组件，设置相应的内容。 + + +## 状态更新 + +用户单击按钮时： + +1. **ParentComp**的**isCountDown**状态变量的值更改为false； + +2. 执行**ParentComp**的**build**函数； + +3. **Column**内置组件会被框架重用并执行重新初始化； + +4. **Column**的子组件会重用内存中的对象，但会进行重新初始化； + 1. **Text**内置组件会被重用，但使用新的文本内容进行重新初始化； + 2. 判断if条件，使用false分支上的组件； + 1. 原来true分支上的组件不在使用，这些组件会进行销毁； + 1. 创建的**Image**内置组件实例进行销毁； + 2. **TimerComponent**组件实例进行销毁，**aboutToDisappear**函数被调用； + 2. 创建false分支上的组件； + 1. 创建**Image**内置组件，并设置其图片源地址； + 2. 使用给定的构造函数重新创建**TimerComponent**； + 3. 新创建的**TimerComponent**进行初始化，并调用**aboutToAppear**函数和**build**函数。 + 3. **Button**内置组件会被重用，但使用新的图片源地址。 diff --git a/zh-cn/application-dev/reference/arkui-ts/ts-component-states-link.md b/zh-cn/application-dev/ui/ts-component-states-link.md similarity index 63% rename from zh-cn/application-dev/reference/arkui-ts/ts-component-states-link.md rename to zh-cn/application-dev/ui/ts-component-states-link.md index d4b122ad24753cc5735883a7b73b6e22599bb7a6..48e29e2bc4b8da77917da09828e859d2dfb3f06e 100644 --- a/zh-cn/application-dev/reference/arkui-ts/ts-component-states-link.md +++ b/zh-cn/application-dev/ui/ts-component-states-link.md @@ -1,17 +1,24 @@ -# @Link +# @Link **@Link**装饰的变量可以和父组件的**@State**变量建立双向数据绑定： -- **支持多种类型：@Link**变量的值与**@State**变量的类型相同，即class、number、string、boolean或这些类型的数组； -- **私有：**仅在组件内访问； -- **单个数据源：**初始化**@Link**变量的父组件的变量必须是**@State**变量； -- **双向通信：**子组件对**@Link**变量的更改将同步修改父组件的**@State**变量； -- **创建自定义组件时需要将变量的引用传递给@Link变量：**在创建组件的新实例时，必须使用命名参数初始化所有**@Link**变量。**@Link**变量可以使用**@State**变量或**@Link**变量的引用进行初始化。**@State**变量可以通过'**$**'操作符创建引用。 ->![](../../public_sys-resources/icon-note.gif) **说明：** ->**@Link**变量不能在组件内部进行初始化。 +- **支持多种类型：@Link**变量的值与**@State**变量的类型相同，即class、number、string、boolean或这些类型的数组； -## 简单类型示例 +- **私有：**仅在组件内访问； + +- **单个数据源：**初始化**@Link**变量的父组件的变量必须是**@State**变量； + +- **双向通信：**子组件对**@Link**变量的更改将同步修改父组件的**@State**变量； + +- **创建自定义组件时需要将变量的引用传递给@Link变量：**在创建组件的新实例时，必须使用命名参数初始化所有**@Link**变量。**@Link**变量可以使用**@State**变量或**@Link**变量的引用进行初始化。**@State**变量可以通过'**$**'操作符创建引用。 + + +> ![icon-note.gif](public_sys-resources/icon-note.gif) **说明：** +> **@Link**变量不能在组件内部进行初始化。 + + +## 简单类型示例 ``` @Entry @@ -43,7 +50,8 @@ struct PlayButton { **@Link**语义是从'**$**'操作符引出，即**$isPlaying**是**this.isPlaying**内部状态的双向数据绑定。当您单击**PlayButton**时，PlayButton 的**Image**组件和**Text**组件将同时进行刷新。 -## 复杂类型示例 + +## 复杂类型示例 ``` @Entry @@ -82,7 +90,8 @@ struct Child { 在上面的示例中，点击**Button1**和**Button2**以更改父组件中显示的文本项目列表。 -## @Link和@State、@Prop结合使用示例 + +## @Link和@State、@Prop结合使用示例 ``` @Entry @@ -120,6 +129,6 @@ struct ChildB { 上述示例中，ParentView包含ChildA和ChildB两个子组件，ParentView的状态变量**counter**分别初始化ChildA和ChildB： -- ChildB使用**@Link**建立双向状态绑定。当**ChildB**修改**counterRef**状态变量值时，该更改将同步到**ParentView**和**ChildA**共享； -- ChildA使用**@Prop**建立从**ParentView**到自身的单向状态绑定。当**ChildA**修改状态时，**ChildA**将重新渲染，但该更改不会传达给**ParentView**和**ChildB。** +- ChildB使用**@Link**建立双向状态绑定。当**ChildB**修改**counterRef**状态变量值时，该更改将同步到**ParentView**和**ChildA**共享； +- ChildA使用**@Prop**建立从**ParentView**到自身的单向状态绑定。当**ChildA**修改状态时，**ChildA**将重新渲染，但该更改不会传达给**ParentView**和**ChildB。** diff --git a/zh-cn/application-dev/reference/arkui-ts/ts-component-states-prop.md b/zh-cn/application-dev/ui/ts-component-states-prop.md similarity index 77% rename from zh-cn/application-dev/reference/arkui-ts/ts-component-states-prop.md rename to zh-cn/application-dev/ui/ts-component-states-prop.md index e7ae42c1ae6cae06a0dd9e9108d4554321ccb246..f3c9a0de0fc33e62dbc316cdd388693ca089c70b 100644 --- a/zh-cn/application-dev/reference/arkui-ts/ts-component-states-prop.md +++ b/zh-cn/application-dev/ui/ts-component-states-prop.md @@ -1,15 +1,21 @@ -# @Prop +# @Prop **@Prop**具有与**@State**相同的语义，但初始化方式不同。**@Prop**装饰的变量必须使用其父组件提供的**@State**变量进行初始化，允许组件内部修改**@Prop**变量，但上述更改不会通知给父组件，即**@Prop**属于单向数据绑定。 + **@Prop**状态数据具有以下特征： -- **支持简单类型：**仅支持简单类型：number、string、boolean； -- **私有：**仅在组件内访问； -- **支持多个实例：**一个组件中可以定义多个标有**@Prop**的属性； -- **创建自定义组件时将值传递给@Prop变量进行初始化：**在创建组件的新实例时，必须初始化所有@Prop变量，不支持在组件内部进行初始化。 -## 示例 +- **支持简单类型：**仅支持简单类型：number、string、boolean； + +- **私有：**仅在组件内访问； + +- **支持多个实例：**一个组件中可以定义多个标有**@Prop**的属性； + +- **创建自定义组件时将值传递给@Prop变量进行初始化：**在创建组件的新实例时，必须初始化所有@Prop变量，不支持在组件内部进行初始化。 + + +## 示例 ``` @Entry @@ -63,6 +69,5 @@ struct CountDownComponent { 在上述示例中，当按“+1”或“-1”按钮时，父组件状态发生变化，重新执行**build**方法，此时将创建一个新的**CountDownComponent**组件。父组件的**countDownStartValue**状态属性被用于初始化子组件的**@Prop**变量。当按下子组件的“Try again”按钮时，其**@Prop**变量**count**将被更改，这将导致**CountDownComponent**重新渲染。但是，**count**值的更改不会影响父组件的**countDownStartValue**值。 ->![](../../public_sys-resources/icon-note.gif) **说明：** ->创建新组件实例时，必须初始化其所有**@Prop**变量。 - +> ![icon-note.gif](public_sys-resources/icon-note.gif) **说明：** +> 创建新组件实例时，必须初始化其所有**@Prop**变量。 diff --git a/zh-cn/application-dev/ui/ts-component-states-state.md b/zh-cn/application-dev/ui/ts-component-states-state.md new file mode 100644 index 0000000000000000000000000000000000000000..5cb677eb4fcc66adc8b34c9a2dbb887bf35dca28 --- /dev/null +++ b/zh-cn/application-dev/ui/ts-component-states-state.md @@ -0,0 +1,102 @@ +# @State + +**@State**装饰的变量是组件内部的状态数据，当这些状态数据被修改时，将会调用所在组件的**build**方法进行UI刷新。 + + +**@State**状态数据具有以下特征： + + +- **支持多种类型：**允许如下强类型的按值和按引用类型：**class**、**number**、**boolean**、**string**，以及这些类型的数组，即**Array<class>**、**Array<string>**、**Array<boolean>**、**Array<number>**。不允许**object**和**any。** + +- **支持多实例：**组件不同实例的内部状态数据独立。 + +- **内部私有：**标记为**@State**的属性不能直接在组件外部修改。它的生命周期取决于它所在的组件。 + +- **需要本地初始化：**必须为所有**@State**变量分配初始值，将变量保持未初始化可能导致框架行为未定义。 + +- **创建自定义组件时支持通过状态变量名设置初始值：**在创建组件实例时，可以通过变量名显式指定**@State**状态属性的初始值**。** + + +## 简单类型的状态属性示例 + +``` +@Entry +@Component +struct MyComponent { + @State count: number = 0 + // MyComponent provides a method for modifying the @State status data member. + private toggleClick() { + this.count += 1 + } + + build() { + Column() { + Button() { + Text(`click times: ${this.count}`) + .fontSize(10) + }.onClick(this.toggleClick.bind(this)) + } + } +} +``` + + +## 复杂类型的状态变量示例 + +``` +// Customize the status data class. +class Model { + value: string + constructor(value: string) { + this.value = value + } +} + +@Entry +@Component +struct EntryComponent { + build() { + Column() { + MyComponent({count: 1, increaseBy: 2}) // MyComponent1 in this document MyComponent({title: {value: 'Hello, World 2'}, count: 7}) //MyComponent2 in this document + } + } +} + +@Component +struct MyComponent { + @State title: Model = {value: 'Hello World'} + @State count: number = 0 + private toggle: string = 'Hello World' + private increaseBy: number = 1 + + build() { + Column() { + Text(`${this.title.value}`).fontSize(30) + Button() { + Text(`Click to change title`).fontSize(20).fontColor(Color.White) + }.onClick(() => { + this.title.value = (this.toggle == this.title.value) ? 'Hello World' : 'Hello UI' + }) // Modify the internal state of MyComponent using the anonymous method. + + Button() { + Text(`Click to increase count=${this.count}`).fontSize(20).fontColor(Color.White) + }.onClick(() => { + this.count += this.increaseBy + }) // Modify the internal state of MyComponent using the anonymous method. + } + } +} +``` + + +在上述示例中： + + +- 用户定义的组件**MyComponent**定义了**@State**状态变量**count**和**title**。如果**count**或**title**的值发生变化，则执行**MyComponent**的**build**方法来重新渲染组件； + +- **EntryComponent**中有多个**MyComponent**组件实例，第一个**MyComponent**内部状态的更改不会影响第二个**MyComponent**； + +- 创建**MyComponent**实例时通过变量名给组件内的变量进行初始化，如： + ``` + MyComponent({title: {value: 'Hello, World 2'}, count: 7}) + ``` diff --git a/zh-cn/application-dev/reference/arkui-ts/ts-configuration-with-mandatory-parameters.md b/zh-cn/application-dev/ui/ts-configuration-with-mandatory-parameters.md similarity index 83% rename from zh-cn/application-dev/reference/arkui-ts/ts-configuration-with-mandatory-parameters.md rename to zh-cn/application-dev/ui/ts-configuration-with-mandatory-parameters.md index e0e0f44cf2ab773db1342f03bae3ce622f3bb6d4..9f6fa98b97cca45e9ad7663f96ba101da99617fc 100644 --- a/zh-cn/application-dev/reference/arkui-ts/ts-configuration-with-mandatory-parameters.md +++ b/zh-cn/application-dev/ui/ts-configuration-with-mandatory-parameters.md @@ -1,25 +1,35 @@ -# 必选参数构造配置 +# 必选参数构造配置 + + + +如果组件的接口定义中包含必选构造参数，则在组件后面的“**()**”中必须配置参数。参数可以使用常量进行赋值。 -如果组件的接口定义中包含必选构造参数，则在组件后面的“**\(\)**”中必须配置参数。参数可以使用常量进行赋值。 例如： + **Image**组件的必选参数**src**： + ``` Image('http://xyz/a.jpg') ``` + **Text**组件的必选参数**content**： + ``` Text('123') ``` + 变量或表达式也可以用于参数赋值，其中表达式返回的结果类型必须满足参数类型要求。 + 传递变量或表达式来构造**Image**和**Text**组件的参数示例如下： + ``` // imagePath, where imageUrl is a private data variable defined in the component. Image(this.imagePath) @@ -29,4 +39,3 @@ Image('http://' + this.imageUrl) // features of the corresponding language. This specification is not limited. Text(`count: ${this.count}`) ``` - diff --git a/zh-cn/application-dev/ui/ts-custom-component-initialization.md b/zh-cn/application-dev/ui/ts-custom-component-initialization.md new file mode 100644 index 0000000000000000000000000000000000000000..9fbaa15db85b5f81d72b13b641dc53ba4f3b4f2c --- /dev/null +++ b/zh-cn/application-dev/ui/ts-custom-component-initialization.md @@ -0,0 +1,114 @@ +# 自定义组件初始化 + +本节介绍自定义组件状态变量的初始化规则。 + + +组件的成员变量可以通过两种方式初始化： + + +- 本地初始化，例如： + ``` + @State counter: Counter = new Counter() + ``` + +- 在构造组件时通过构造参数初始化，例如： + ``` + MyComponent(counter: $myCounter) + ``` + + +具体允许哪种方式取决于状态变量的装饰器： + + +| 装饰器类型 | 本地初始化 | 通过构造函数参数初始化 | +| -------- | -------- | -------- | +| @State | 必须 | 可选 | +| @Prop | 禁止 | 必须 | +| @Link | 禁止 | 必须 | +| @StorageLink | 必须 | 禁止 | +| @StorageProp | 必须 | 禁止 | +| @Provide | 必须 | 可选 | +| @Consume | 禁止 | 禁止 | +| @ObjectLink | 禁止 | 必须 | +| 常规成员变量 | 推荐 | 可选 | + + +从上表中： + + +- **@State**变量需要本地初始化，初始化的值可以被构造参数覆盖； + +- **@Prop**和**@Link**变量必须且仅通过构造函数参数进行初始化。 + + +通过构造函数方法初始化成员变量，需要遵循如下规则： + + +| 从父组件中的变量（下）到子组件中的变量（右） | @State | @Link | @Prop | 常规变量 | +| -------- | -------- | -------- | -------- | -------- | +| @State | 不允许 | 允许 | 允许 | 允许 | +| @Link | 不允许 | 允许 | 不推荐 | 允许 | +| @Prop | 不允许 | 不允许 | 允许 | 允许 | +| @StorageLink | 不允许 | 允许 | 不允许 | 允许 | +| @StorageProp | 不允许 | 不允许 | 不允许 | 允许 | +| 常规变量 | 允许 | 不允许 | 不允许 | 允许 | + + +从上表中： + + +- 父组件的常规变量可以用于初始化子组件的**@State**变量，但不能用于初始化**@Link**或**@Prop**变量； + +- 父组件的**@State**变量可以初始化子组件的**@Prop**、**@Link（通过$）**或常规变量，但不能初始化子组件的**@State**变量； + +- 父组件的**@Link**变量可以初始化子组件的@Link或常规变量。但是初始化子组件的**@State**成员是语法错误，此外不建议初始化**@prop；** + +- 父组件的**@Prop**变量可以初始化子组件的常规变量或**@Prop**变量，但不能初始化子组件的**@State**或**@Link**变量。 + +- @StorageLink和@StorageProp不允许由父组件中传递到子组件。 + +- 除了上述规则外，还需要遵循TS的强类型规则。 + + +## 示例 + +``` +@Entry +@Component +struct Parent { + @State parentState: ClassA = new ClassA() + build() { + Row() { + CompA({aState: new ClassA, aLink: $parentState}) // valid + CompA({aLink: $parentState}) // valid + CompA() // invalid, @Link aLink remains uninitialized + CompA({aLink: new ClassA}) // invalid, @Link aLink must be a reference ($) to either @State or @Link variable + } + } +} + +@Component +struct CompA { + @State aState: boolean = false // must initialize locally + @Link aLink: ClassA // must not initialize locally + + build() { + Row() { + CompB({bLink: $aLink, // valid init a @Link with reference of another @Link, + bProp: this.aState}) // valid init a @Prop with value of a @State + CompB({aLink: $aState, // invalid: type missmatch expected ref to ClassA, provided reference to boolean + bProp: false}) // valid init a @Prop by constants value + } + } +} + +@Component +struct CompB { + @Link bLink: ClassA = new ClassA() // invalid, must not initialize locally + @Prop bProp: boolean = false // invalid must not initialize locally + + build() { + ... + } +} +``` diff --git a/zh-cn/application-dev/ui/ts-custom-component-lifecycle-callbacks.md b/zh-cn/application-dev/ui/ts-custom-component-lifecycle-callbacks.md new file mode 100644 index 0000000000000000000000000000000000000000..20f7c9108bea49e21b21ec6eba83a7b74375bb86 --- /dev/null +++ b/zh-cn/application-dev/ui/ts-custom-component-lifecycle-callbacks.md @@ -0,0 +1,53 @@ +# 自定义组件生命周期回调函数 + +自定义组件的生命周期回调函数用于通知用户该自定义组件的生命周期，这些回调函数是私有的，在运行时由开发框架在特定的时间进行调用，不能从应用程序中手动调用这些回调函数。 + + +## 生命周期回调函数定义 + +| 函数名 | 描述 | +| -------- | -------- | +| aboutToAppear | 函数在创建自定义组件的新实例后，在执行其**build**函数之前执行。
允许在**aboutToAppear**函数中改变状态变量，这些更改将在后续执行build函数中生效。 | +| aboutToDisappear | 函数在自定义组件析构消耗之前执行。
不允许在**aboutToDisappear**函数中改变状态变量，特别是**@Link**变量的修改可能会导致应用程序行为不稳定。 | +| onPageShow | 当此页面显示时触发一次。包括路由过程、应用进入前后台等场景，仅@Entry修饰的自定义组件生效。 | +| onPageHide | 当此页面消失时触发一次。包括路由过程、应用进入前后台等场景，仅@Entry修饰的自定义组件生效。 | +| onBackPress | 当用户点击返回按钮时触发，，仅@Entry修饰的自定义组件生效。
- 返回true表示页面自己处理返回逻辑, 不进行页面路由。
- 返回false表示使用默认的返回逻辑。
- 不返回值会作为false处理。 | + + +## 示例 + +``` +@Component +struct CountDownTimerComponent { + @State countDownFrom: number = 10 + private timerId: number = -1 + + private aboutToAppear(): void { + this.timerId = setInterval(() => { + if (this.countDownFrom <= 1) { + clearTimeout(this.timerId) + } + this.countDownFrom -= 1 + }, 1000) // decr counter by 1 every second + } + + private aboutToDisappear(): void { + if (this.timerId > 0) { + clearTimeout(this.timerId) + this.timerId = -1 + } + } + + build() { + Text(`${this.countDownFrom} sec left`) + } +} +``` + +上述示例表明，生命周期函数对于允许CountDownTimerComponent管理其计时器资源至关重要，类似的函数也包括异步从网络请求加载资源。 + + +> ![icon-note.gif](public_sys-resources/icon-note.gif) **说明：** +> - 允许在生命周期函数中使用**Promise**和异步回调函数，比如网络资源获取，定时器设置等； +> +> - 不允许在生命周期函数中使用**async await**。 diff --git a/zh-cn/application-dev/ui/ts-declarative-syntax.md b/zh-cn/application-dev/ui/ts-declarative-syntax.md new file mode 100644 index 0000000000000000000000000000000000000000..dad1bae391fca02253118853fbd67484d4aa9cb3 --- /dev/null +++ b/zh-cn/application-dev/ui/ts-declarative-syntax.md @@ -0,0 +1,15 @@ +# 声明式语法 + + + +- **[描述规范使用说明](ts-syntax-intro.md)** + +- **[通用UI描述规范](ts-general-ui-description-specifications.md)** + +- **[UI状态管理](ts-ui-state-management.md)** + +- **[渲染控制语法](ts-rending-control-syntax.md)** + +- **[深入理解组件化](ts-a-deep-dive-into-component.md)** + +- **[语法糖](ts-syntactic-sugar.md)** \ No newline at end of file diff --git a/zh-cn/application-dev/ui/ts-declarative-ui-description-specifications.md b/zh-cn/application-dev/ui/ts-declarative-ui-description-specifications.md new file mode 100644 index 0000000000000000000000000000000000000000..e72a1ffb9628fd58dee9e7dbb9968f2e741e2a69 --- /dev/null +++ b/zh-cn/application-dev/ui/ts-declarative-ui-description-specifications.md @@ -0,0 +1,13 @@ +# 声明式UI描述规范 + + + +- **[无构造参数配置](ts-parameterless-configuration.md)** + +- **[必选参数构造配置](ts-configuration-with-mandatory-parameters.md)** + +- **[属性配置](ts-attribution-configuration.md)** + +- **[事件配置](ts-event-configuration.md)** + +- **[子组件配置](ts-child-component-configuration.md)** \ No newline at end of file diff --git a/zh-cn/application-dev/ui/ts-event-configuration.md b/zh-cn/application-dev/ui/ts-event-configuration.md new file mode 100644 index 0000000000000000000000000000000000000000..35afd40ceac94edbf8aaaf4ce9df04ff491e993b --- /dev/null +++ b/zh-cn/application-dev/ui/ts-event-configuration.md @@ -0,0 +1,39 @@ +# 事件配置 + + + +通过事件方法可以配置组件支持的事件。 + + +- 使用lambda表达式配置组件的事件方法： + ``` + // Counter is a private data variable defined in the component. + Button('add counter') + .onClick(() => { + this.counter += 2 + }) + ``` + + +- 使用匿名函数表达式配置组件的事件方法： + 此时要求我们使用**bind**，以确保函数体中的this引用包含的组件。 + ``` + // Counter is a private data variable defined in the component. + Button('add counter') + .onClick(function () { + this.counter += 2 + }.bind(this)) + ``` + + +- 使用组件的成员函数配置组件的事件方法： + ``` + myClickHandler(): void { + // do something + } + + ... + + Button('add counter') + .onClick(this.myClickHandler) + ``` diff --git a/zh-cn/application-dev/ui/ts-framework-directory.md b/zh-cn/application-dev/ui/ts-framework-directory.md new file mode 100644 index 0000000000000000000000000000000000000000..de682dd3ba83260e7ea0f0d6b3e6662e98799640 --- /dev/null +++ b/zh-cn/application-dev/ui/ts-framework-directory.md @@ -0,0 +1,29 @@ +# 目录结构 + + + +FA应用的eTS模块(entry/src/main)的典型开发目录结构如下： + + +![zh-cn_image_0000001182200571](figures/zh-cn_image_0000001182200571.png) + + +**目录结构中文件分类如下：** + + +- .ets结尾的eTS（extended TypeScript）文件，这个文件用于描述UI布局、样式、事件交互和页面逻辑。 + + +**各个文件夹和文件的作用：** + + +- **app.ets**文件用于全局应用逻辑和应用生命周期管理。 + +- **pages**目录用于存放所有组件页面。 + +- **common**目录用于存放公共代码文件，比如：自定义组件和公共方法。 + + +> ![icon-note.gif](public_sys-resources/icon-note.gif) **说明：** +> +> - 页面支持导入TypeScript和JavaScript文件。 diff --git a/zh-cn/application-dev/reference/arkui-ts/ts-framework-file-access-rules.md b/zh-cn/application-dev/ui/ts-framework-file-access-rules.md similarity index 75% rename from zh-cn/application-dev/reference/arkui-ts/ts-framework-file-access-rules.md rename to zh-cn/application-dev/ui/ts-framework-file-access-rules.md index 664016a0554cc9feeeb4c33e4d6386875aee336e..ffc32f5b1b0b2c7c51fb17f919a5f93ea70a6fef 100644 --- a/zh-cn/application-dev/reference/arkui-ts/ts-framework-file-access-rules.md +++ b/zh-cn/application-dev/ui/ts-framework-file-access-rules.md @@ -1,12 +1,16 @@ -# 应用代码文件访问规则 +# 应用代码文件访问规则 应用代码文件可通过如下方式访问： -- 使用相对路径引用代码文件，比如：上一级目录：../common/utils/utils.ets，当前目录：./common/utils/utils.ets。 -- 使用当前模块根路径引用代码文件，比如：common/utils/utils.ets。 -- 公共代码文件推荐放在**common**目录下。 -## 示例 +- 使用相对路径引用代码文件，比如：上一级目录：../common/utils/utils.ets，当前目录：./common/utils/utils.ets。 + +- 使用当前模块根路径引用代码文件，比如：common/utils/utils.ets。 + +- 公共代码文件推荐放在**common**目录下。 + + +## 示例 ``` import { FoodData, FoodList } from "../common/utils/utils.ets"; @@ -64,4 +68,3 @@ export struct FoodList { } } ``` - diff --git a/zh-cn/application-dev/ui/ts-framework-file.md b/zh-cn/application-dev/ui/ts-framework-file.md new file mode 100644 index 0000000000000000000000000000000000000000..4056a639c80557f24cd2df4879d6209d49e4a0a2 --- /dev/null +++ b/zh-cn/application-dev/ui/ts-framework-file.md @@ -0,0 +1,7 @@ +# 文件组织 + + + +- **[目录结构](ts-framework-directory.md)** + +- **[应用代码文件访问规则](ts-framework-file-access-rules.md)** \ No newline at end of file diff --git a/zh-cn/application-dev/ui/ts-framework-js-tag.md b/zh-cn/application-dev/ui/ts-framework-js-tag.md new file mode 100644 index 0000000000000000000000000000000000000000..c86383841617c4f0157c9a6371f82e9cf54e8da1 --- /dev/null +++ b/zh-cn/application-dev/ui/ts-framework-js-tag.md @@ -0,0 +1,101 @@ +# js标签配置 + +开发框架需要应用的config.json中配置相关的js标签，其中包含了实例名称、页面路由、视图窗口配置信息。 + + +| 标签 | 类型 | 默认值 | 必填 | 描述 | +| -------- | -------- | -------- | -------- | -------- | +| name | string | default | 是 | 标识ETS实例的名字。 | +| pages | Array | - | 是 | 页面路由信息，详见[pages](#pages)说明。 | +| window | Object | - | 否 | 视图窗口配置信息，详见[window](#window)说明。 | +| mode | Object | - | 否 | 配置Js Component运行类型与语法风格，详见[mode](#mode)说明。 | + + +## pages + +定义每个页面入口组件的路由信息，每个页面由页面路径和页面名组成，页面的文件名就是页面名。比如： + +``` +{ + "pages": [ + "pages/index", + "pages/detail" + ] +} +``` + +> ![icon-note.gif](public_sys-resources/icon-note.gif) **说明：** +> - pages列表中第一个页面为应用的首页入口。 +> +> - 页面文件名不能使用组件名称，比如：Text.ets、Button.ets等。 +> +> - 每个页面文件中必须包含[页面入口组件](../ui/ts-component-based-entry.md)(\@Entry装饰)。 + + +## window + +window用于配置相关视图显示窗口，支持配置如下属性： + +| 类型 | 默认值 | 说明 | +| -------- | -------- | -------- | +| designWidth | - | 配置视图显示的逻辑宽度，缺省默认720（智能穿戴默认454）。视图显示的逻辑宽度决定了lpx像素单位大小，如designWidth配置720时，在视图宽度为1440物理像素时，1lpx为2物理像素。详见[lpx像素单位](../ui/ts-pixel-units.md)说明。 | + +``` +{ + ... + "window": { + "designWidth": 720 + } + ... +} +``` + + +## mode + +mode用于配置JS Component的运行类型与语法风格，支持如下属性： + +| 类型 | 默认值 | 说明 | +| -------- | -------- | -------- | +| type | - | 配置该JS Component的运行类型，可选值为：
- pageAbility：以ability的方式运行该JS Component。
- form：以卡片的方式运行该JS Component。 | +| syntax | - | 配置该JS Component的语法风格，可选值为：
- hml：以hml/css/js风格进行编写。
- ets：以声明式语法风格进行编写。 | + +> ![icon-note.gif](public_sys-resources/icon-note.gif) **说明：** +> 不支持同时配置type类型为form，syntax类型为ets。 + + +## 示例 + +config.json: + +``` +{ + "app": { + "bundleName": "com.example.player", + "version": { + "code": 1, + "name": "1.0" + }, + "vendor": "example" + }, + "module": { + "js": [{ + "name": "default", + "pages": [ + "pages/index", + "pages/detail" + ], + "window": { + "designWidth": 720 + }, + "mode": { + "type": "pageAbility", + "syntax": "ets" + }, + }], + "abilities": [{ + ... + }] + } +} +``` diff --git a/zh-cn/application-dev/ui/ts-framework.md b/zh-cn/application-dev/ui/ts-framework.md new file mode 100644 index 0000000000000000000000000000000000000000..c6202241fa6b67626dd91ede26e778fdc97a44b2 --- /dev/null +++ b/zh-cn/application-dev/ui/ts-framework.md @@ -0,0 +1,13 @@ +# 框架说明 + + + +- **[文件组织](ts-framework-file.md)** + +- **[js标签配置](ts-framework-js-tag.md)** + +- **[资源访问](ts-resource-access.md)** + +- **[像素单位](ts-pixel-units.md)** + +- **[类型定义](ts-types.md)** \ No newline at end of file diff --git a/zh-cn/application-dev/reference/arkui-ts/ts-function-build.md b/zh-cn/application-dev/ui/ts-function-build.md similarity index 72% rename from zh-cn/application-dev/reference/arkui-ts/ts-function-build.md rename to zh-cn/application-dev/ui/ts-function-build.md index d7729bbdff87429d9a95907cb770d6c71fabdc9d..7d6f0572fd6ad08c3414d8b53061d664a4a2ce0b 100644 --- a/zh-cn/application-dev/reference/arkui-ts/ts-function-build.md +++ b/zh-cn/application-dev/ui/ts-function-build.md @@ -1,10 +1,12 @@ -# build函数 +# build函数 + + **build**函数满足**Builder**构造器接口定义，用于定义组件的声明式UI描述。 + ``` interface Builder { build: () => void } ``` - diff --git a/zh-cn/application-dev/ui/ts-general-ui-concepts.md b/zh-cn/application-dev/ui/ts-general-ui-concepts.md new file mode 100644 index 0000000000000000000000000000000000000000..bd50940fc128faa8ffaafbc20b31fa9fa089c50a --- /dev/null +++ b/zh-cn/application-dev/ui/ts-general-ui-concepts.md @@ -0,0 +1,49 @@ +# 基本概念 + +基于TS扩展的声明式开发范式提供了一系列基本组件，这些组件以声明方式进行组合和扩展来描述应用程序的UI界面，并且还提供了基本的数据绑定和事件处理机制，帮助开发者实现应用交互逻辑。 + + +## HelloWorld基本示例 + +``` +// An example of displaying Hello World. After you click the button, Hello UI is displayed. +@Entry +@Component +struct Hello { + @State myText: string = 'World' + build() { + Column() { + Text('Hello') + .fontSize(30) + Text(this.myText) + .fontSize(32) + Divider() + Button() { + Text('Click me') + .fontColor(Color.Red) + }.onClick(() => { + this.myText = 'UI' + }) + .width(500) + .height(200) + } + } +} +``` + + +## 基本概念描述 + +上述示例代码描述了简单页面的结构，并介绍了以下基本概念： + +- **装饰器：**装饰类、结构、方法和变量，并为它们赋予特殊含义。例如，上例中的**\@Entry**、**\@Component**和**\@State**都是装饰器； + +- **自定义组件：**可重用的UI单元，可以与其他组件组合，如**\@Component**装饰的**struct Hello**； + +- **UI描述：**声明性描述UI结构，例如**build()**方法中的代码块； + +- **内置组件：**框架中默认内置的基本组件和布局组件，开发者可以直接调用，如**Column**、**Text**、**Divider**、**Button**等； + +- **属性方法：**用于配置组件属性，如**fontSize()**、**width()**、**height()**、**color()**等； + +- **事件方法：**用于将组件响应逻辑添加到事件中。逻辑是通过事件方法设置的。例如，按钮后面的**onClick()**。 diff --git a/zh-cn/application-dev/ui/ts-general-ui-description-specifications.md b/zh-cn/application-dev/ui/ts-general-ui-description-specifications.md new file mode 100644 index 0000000000000000000000000000000000000000..fbc8a013dbadc01ad18e97422dd6a9a2768a2774 --- /dev/null +++ b/zh-cn/application-dev/ui/ts-general-ui-description-specifications.md @@ -0,0 +1,9 @@ +# 通用UI描述规范 + + + +- **[基本概念](ts-general-ui-concepts.md)** + +- **[声明式UI描述规范](ts-declarative-ui-description-specifications.md)** + +- **[组件化](ts-component-based.md)** \ No newline at end of file diff --git a/zh-cn/application-dev/reference/arkui-ts/ts-instantiating-a-struct-without-new-keyword.md b/zh-cn/application-dev/ui/ts-instantiating-a-struct-without-new-keyword.md similarity index 74% rename from zh-cn/application-dev/reference/arkui-ts/ts-instantiating-a-struct-without-new-keyword.md rename to zh-cn/application-dev/ui/ts-instantiating-a-struct-without-new-keyword.md index 7031c70ff7f202523e19cf41311dc5e2073610ae..1e138d21cfe1b513619e45dfa8b8068568af7f6d 100644 --- a/zh-cn/application-dev/reference/arkui-ts/ts-instantiating-a-struct-without-new-keyword.md +++ b/zh-cn/application-dev/ui/ts-instantiating-a-struct-without-new-keyword.md @@ -1,7 +1,10 @@ -# 在实例化过程中省略"new" +# 在实例化过程中省略"new" + + 对于**struct**的实例化，可以省略**new**。 + ``` // 定义 @Component @@ -20,4 +23,3 @@ new Column() { new MyComponent() } ``` - diff --git a/zh-cn/application-dev/ui/ts-managing-application-states-apis.md b/zh-cn/application-dev/ui/ts-managing-application-states-apis.md new file mode 100644 index 0000000000000000000000000000000000000000..99697c7f04c6424b83b7fca1d124be9e809a458a --- /dev/null +++ b/zh-cn/application-dev/ui/ts-managing-application-states-apis.md @@ -0,0 +1,9 @@ +# 接口 + + + +- **[应用程序的数据存储](ts-application-states-appstorage.md)** + +- **[持久化数据管理](ts-application-states-apis-persistentstorage.md)** + +- **[环境变量](ts-application-states-apis-environment.md)** \ No newline at end of file diff --git a/zh-cn/application-dev/ui/ts-managing-application-states.md b/zh-cn/application-dev/ui/ts-managing-application-states.md new file mode 100644 index 0000000000000000000000000000000000000000..b2d8ac3c0d7f3fdeed79d5611f42b351c755a775 --- /dev/null +++ b/zh-cn/application-dev/ui/ts-managing-application-states.md @@ -0,0 +1,7 @@ +# 管理应用程序的状态 + + + +- **[接口](ts-managing-application-states-apis.md)** + +- **[AppStorage与组件同步](ts-application-states-storagelink-storageprop.md)** \ No newline at end of file diff --git a/zh-cn/application-dev/ui/ts-managing-component-states.md b/zh-cn/application-dev/ui/ts-managing-component-states.md new file mode 100644 index 0000000000000000000000000000000000000000..8311895b4e2373db2e3794af7016727f9c38032b --- /dev/null +++ b/zh-cn/application-dev/ui/ts-managing-component-states.md @@ -0,0 +1,9 @@ +# 管理组件拥有的状态 + + + +- **[\@State](ts-component-states-state.md)** + +- **[\@Prop](ts-component-states-prop.md)** + +- **[\@Link](ts-component-states-link.md)** \ No newline at end of file diff --git a/zh-cn/application-dev/ui/ts-managing-other-states.md b/zh-cn/application-dev/ui/ts-managing-other-states.md new file mode 100644 index 0000000000000000000000000000000000000000..2a458b8be8d0f6a803049c747f78c0c3fbd257c9 --- /dev/null +++ b/zh-cn/application-dev/ui/ts-managing-other-states.md @@ -0,0 +1,9 @@ +# 其他类目的状态管理 + + + +- **[Observed和ObjectLink数据管理](ts-other-states-observed-objectlink.md)** + +- **[\@Consume和\@Provide数据管理](ts-other-states-consume-provide.md)** + +- **[\@Watch](ts-other-states-watch.md)** \ No newline at end of file diff --git a/zh-cn/application-dev/ui/ts-media-resource-type.md b/zh-cn/application-dev/ui/ts-media-resource-type.md new file mode 100644 index 0000000000000000000000000000000000000000..62a375e434bdd737f4ba94c6386335531179a526 --- /dev/null +++ b/zh-cn/application-dev/ui/ts-media-resource-type.md @@ -0,0 +1,13 @@ +# 媒体资源类型说明 + + + +- 开发框架支持的图片资源类型说明 + | 格式 | 文件后缀名 | + | -------- | -------- | + | JPEG | .jpg | + | PNG | .png | + | GIF | .gif | + | SVG | .svg | + | WEBP | .webp | + | BMP | .bmp | diff --git a/zh-cn/application-dev/ui/ts-other-states-consume-provide.md b/zh-cn/application-dev/ui/ts-other-states-consume-provide.md new file mode 100644 index 0000000000000000000000000000000000000000..0a3ff849b79b386bbe8080bedb9b5bf3b9f89072 --- /dev/null +++ b/zh-cn/application-dev/ui/ts-other-states-consume-provide.md @@ -0,0 +1,76 @@ +# @Consume和@Provide数据管理 + + + +Provide作为数据的提供方，可以更新其子孙节点的数据，并触发页面渲染。Consume在感知到Provide数据的更新后，会触发当前view的重新渲染。 + + +**表1** @Provide + +| 类型 | 说明 | +| -------- | -------- | +| 装饰器参数 | 别名：是一个string类型的常量。如果规定别名，则提供对应别名的数据更新。如果没有，则使用变量名作为别名。推荐使用@Provide("alias")这种形式。 | +| 同步机制 | @Provide的变量类似@state，可以修改对应变量进行页面重新渲染。也可以修改@Consume装饰的变量，反向修改@State变量。 | +| 初始值 | 必须制定初始值 | +| 页面重渲染场景 | 1. 基础类型 boolean，string，number
2. observed class，修改其中的属性
3. Array：添加，删除，更新数组中的元素 | + + +**表2** @Consume + +| 类型 | 说明 | +| -------- | -------- | +| 初始值 | 不可设置默认值 | + + +> ![icon-note.gif](public_sys-resources/icon-note.gif) **说明：** +> 使用@Provide 和@Consume时避免循环引用导致死循环。 + + +其他属性说明与Provide一致。 + + +``` +@Entry +@Component +struct CompA { + @Provide("reviewVote") reviewVotes : number = 0; + + build() { + Column() { + CompB() + Button() { + Text(`${this.reviewVotes}`) + .fontSize(30) + } + .onClick(() => { + this.reviewVotes += 1; + }) + } + } +} + +@Component +struct CompB { + build() { + Column() { + CompC() + } + } +} + +@Component +struct CompC { + @Consume("reviewVote") reviewVotes : number; + build() { + Column() { + Button() { + Text(`${this.reviewVotes}`) + .fontSize(30) + } + .onClick(() => { + this.reviewVotes += 1; + }) + } + } +} +``` diff --git a/zh-cn/application-dev/reference/arkui-ts/ts-other-states-observed-objectlink.md b/zh-cn/application-dev/ui/ts-other-states-observed-objectlink.md similarity index 84% rename from zh-cn/application-dev/reference/arkui-ts/ts-other-states-observed-objectlink.md rename to zh-cn/application-dev/ui/ts-other-states-observed-objectlink.md index 73db0f412423622156083ae33abdc551d3e89e2b..183d66647240ad8d8d5d136702d56c7b2699bcc3 100644 --- a/zh-cn/application-dev/reference/arkui-ts/ts-other-states-observed-objectlink.md +++ b/zh-cn/application-dev/ui/ts-other-states-observed-objectlink.md @@ -1,9 +1,10 @@ -# Observed和ObjectLink数据管理 +# Observed和ObjectLink数据管理 @observed是用来class的修饰器，表示此对象中的数据变更将被UI页面管理。@objectLink用来修饰被@observed装饰的变量。 + ``` -// 需要监控的对象 +// 需要监听的对象 @Observed class ClassA { static nextID : number = 0; public id : number; @@ -24,6 +25,7 @@ } ``` + ``` @Component struct ViewA { @@ -66,6 +68,6 @@ struct ViewB { } ``` ->![](../../public_sys-resources/icon-note.gif) **说明：** ->@ObjectLink用于修饰变量，并且不可以初始化。@Observed用于修饰类。 +> ![icon-note.gif](public_sys-resources/icon-note.gif) **说明：** +> @ObjectLink用于修饰变量，并且不可以初始化。@Observed用于修饰类。 diff --git a/zh-cn/application-dev/reference/arkui-ts/ts-other-states-watch.md b/zh-cn/application-dev/ui/ts-other-states-watch.md similarity index 95% rename from zh-cn/application-dev/reference/arkui-ts/ts-other-states-watch.md rename to zh-cn/application-dev/ui/ts-other-states-watch.md index b2fe7954cd8414f386fabaf4f745e73eafe3c0c0..b8f72ac88f48cb2a4e9f7998ccd99f391ddb95fd 100644 --- a/zh-cn/application-dev/reference/arkui-ts/ts-other-states-watch.md +++ b/zh-cn/application-dev/ui/ts-other-states-watch.md @@ -1,7 +1,10 @@ -# @Watch +# @Watch + + 应用可以注册回调方法。当一个被@State, @Prop, @Link, @ObjectLink, @Provide, @Consume, @StorageProp, 以及 @StorageLink中任意一个装饰器修饰的变量改变时，均可触发此回调。@Watch中的变量一定要使用（“”）进行包装。 + ``` @Entry @Component @@ -31,4 +34,3 @@ struct CompA { } } ``` - diff --git a/zh-cn/application-dev/reference/arkui-ts/ts-parameterless-configuration.md b/zh-cn/application-dev/ui/ts-parameterless-configuration.md similarity index 68% rename from zh-cn/application-dev/reference/arkui-ts/ts-parameterless-configuration.md rename to zh-cn/application-dev/ui/ts-parameterless-configuration.md index 0230e89b07340baf16d66a1545d0c5f020e84ed3..6e076173605de168772cb75ee74a43f37a2e9a49 100644 --- a/zh-cn/application-dev/reference/arkui-ts/ts-parameterless-configuration.md +++ b/zh-cn/application-dev/ui/ts-parameterless-configuration.md @@ -1,9 +1,13 @@ -# 无构造参数配置 +# 无构造参数配置 + + + +组件的接口定义不包含必选构造参数，组件后面的“**()**”中不需要配置任何内容。 -组件的接口定义不包含必选构造参数，组件后面的“**\(\)**”中不需要配置任何内容。 例如，以下**Divider**组件不包含构造参数： + ``` Column() { Text('item 1') @@ -11,4 +15,3 @@ Column() { Text('item 2') } ``` - diff --git a/zh-cn/application-dev/ui/ts-pixel-units.md b/zh-cn/application-dev/ui/ts-pixel-units.md new file mode 100644 index 0000000000000000000000000000000000000000..0265bac90e606c4154c19cb85375e0c062ed009e --- /dev/null +++ b/zh-cn/application-dev/ui/ts-pixel-units.md @@ -0,0 +1,73 @@ +# 像素单位 + +为开发者提供4种像素单位，框架采用vp为基准数据单位。 + + +| 名称 | 描述 | +| -------- | -------- | +| px | 屏幕物理像素单位。 | +| vp | 屏幕密度相关像素，根据屏幕像素密度转换为屏幕物理像素。 | +| fp | 字体像素，与vp类似适用屏幕密度变化，随系统字体大小设置变化。 | +| lpx | 视窗逻辑像素单位，lpx单位为实际屏幕宽度与逻辑宽度（通过[designWidth](../ui/ts-framework-js-tag.md)配置）的比值。如配置designWidth为720时，在实际宽度为1440物理像素的屏幕上，1lpx为2px大小。 | + + +## 像素单位转换 + +提供其他单位与px单位互相转换的方法。 + +| 接口 | 描述 | +| -------- | -------- | +| vp2px(value : number) : number | 将vp单位的数值转换为以px为单位的数值。 | +| px2vp(value : number) : number | 将px单位的数值转换为以vp为单位的数值。 | +| fp2px(value : number) : number | 将fp单位的数值转换为以px为单位的数值。 | +| px2fp(value : number) : number | 将px单位的数值转换为以fp为单位的数值。 | +| lpx2px(value : number) : number | 将lpx单位的数值转换为以px为单位的数值。 | +| px2lpx(value : number) : number | 将px单位的数值转换为以lpx为单位的数值。 | + + +## 示例 + +``` +@Entry +@Component +struct Example { + build() { + Column() { + Flex({ wrap: FlexWrap.Wrap }) { + Column() { + Text("width(220)") + .width(220).height(40).backgroundColor(0xF9CF93) + .textAlign(TextAlign.Center).fontColor(Color.White).fontSize('12vp') + }.margin(5) + Column() { + Text("width('220px')") + .width('220px').height(40).backgroundColor(0xF9CF93) + .textAlign(TextAlign.Center).fontColor(Color.White) + }.margin(5) + Column() { + Text("width('220vp')") + .width('220vp').height(40).backgroundColor(0xF9CF93) + .textAlign(TextAlign.Center).fontColor(Color.White).fontSize('12vp') + }.margin(5) + Column() { + Text("width('220lpx') designWidth:720") + .width('220lpx').height(40).backgroundColor(0xF9CF93) + .textAlign(TextAlign.Center).fontColor(Color.White).fontSize('12vp') + }.margin(5) + Column() { + Text("width(vp2px(220) + 'px')") + .width(vp2px(220) + 'px').height(40).backgroundColor(0xF9CF93) + .textAlign(TextAlign.Center).fontColor(Color.White).fontSize('12vp') + }.margin(5) + Column() { + Text("fontSize('12fp')") + .width(220).height(40).backgroundColor(0xF9CF93) + .textAlign(TextAlign.Center).fontColor(Color.White).fontSize('12fp') + }.margin(5) + }.width('100%') + } + } +} +``` + +![zh-cn_image_0000001169582302](figures/zh-cn_image_0000001169582302.gif) diff --git a/zh-cn/application-dev/reference/arkui-ts/ts-rending-control-syntax-foreach.md b/zh-cn/application-dev/ui/ts-rending-control-syntax-foreach.md similarity index 51% rename from zh-cn/application-dev/reference/arkui-ts/ts-rending-control-syntax-foreach.md rename to zh-cn/application-dev/ui/ts-rending-control-syntax-foreach.md index f405c57f767bb9ff2bfba597a1d8903979c6927d..be58e040cc7b598426e222711d99c903a539b43c 100644 --- a/zh-cn/application-dev/reference/arkui-ts/ts-rending-control-syntax-foreach.md +++ b/zh-cn/application-dev/ui/ts-rending-control-syntax-foreach.md @@ -1,34 +1,45 @@ -# 循环渲染 +# 循环渲染 开发框架提供**ForEach**组件来迭代数组，并为每个数组项创建相应的组件。**ForEach**定义如下： + ``` ForEach( arr: any[], // Array to be iterated - itemGenerator: (item: any) => void, // child component generator - keyGenerator?: (item: any) => string // (optional) Unique key generator, which is recommended. + itemGenerator: (item: any, index?: number) => void, // child component generator + keyGenerator?: (item: any, index?: number) => string // (optional) Unique key generator, which is recommended. ) ``` ->![](../../public_sys-resources/icon-note.gif) **说明：** ->- 循环渲染使用ForEach从提供的数组中自动生成子组件； ->- 必须在容器组件内使用； ->- 第一个参数必须是数组：允许空数组，空数组场景下不会创建子组件。同时允许设置返回值为数组类型的函数，例如**arr.slice\(1, 3\)**，设置的函数不得改变包括数组本身在内的任何状态变量，如**Array.splice**、**Array.sort**或**Array.reverse**这些原地修改数组的函数； ->- 第二个参数用于生成子组件的lambda函数。它为给定数组项生成一个或多个子组件。单个组件和子组件列表必须括在大括号“**\{....\}**”中； ->- 可选的第三个参数是用于键值生成的匿名函数。它为给定数组项生成唯一且稳定的键值。当子项在数组中的位置更改时，子项的键值不得更改，当数组中的子项被新项替换时，被替换项的键值和新项的键值必须不同。键值生成器的功能是可选的。但是，出于性能原因，强烈建议提供，这使开发框架能够更好地识别数组更改。如单击进行数组反向时，如果没有提供键值生成器，则ForEach中的所有节点都将重建。 ->- 生成的子组件必须允许在**ForEach**的父容器组件中，允许子组件生成器函数中包含**if/else**条件渲染，同时也允许**ForEach**包含在**if/else**条件渲染语句中。 ->- 子项生成器函数的调用顺序不一定和数组中的数据项相同，在开发过程中不要假设子项生成器和键值生成器函数是否执行以及执行顺序。如下示例可能无法正常工作： -> ``` -> ForEach(anArray, item => {Text(`${++counter}. item.label`)}) -> ``` -> 正确的示例如下： -> ``` -> ForEach(anArray.map((item1, index1) => { return { i: index1 + 1, data: item1 }; }), -> item => Text(`${item.i}. item.data.label`), -> item => item.data.id.toString()) -> ``` -## 示例 +> ![icon-note.gif](public_sys-resources/icon-note.gif) **说明：** +> - 循环渲染使用ForEach从提供的数组中自动生成子组件； +> +> - 必须在容器组件内使用； +> +> - 第一个参数必须是数组：允许空数组，空数组场景下不会创建子组件。同时允许设置返回值为数组类型的函数，例如**arr.slice(1, 3)**，设置的函数不得改变包括数组本身在内的任何状态变量，如**Array.splice**、**Array.sort**或**Array.reverse**这些原地修改数组的函数； +> +> - 第二个参数用于生成子组件的lambda函数。它为给定数组项生成一个或多个子组件。单个组件和子组件列表必须括在大括号“**{....}**”中； +> +> - 可选的第三个参数是用于键值生成的匿名函数。它为给定数组项生成唯一且稳定的键值。当子项在数组中的位置更改时，子项的键值不得更改，当数组中的子项被新项替换时，被替换项的键值和新项的键值必须不同。键值生成器的功能是可选的。但是，出于性能原因，强烈建议提供，这使开发框架能够更好地识别数组更改。如单击进行数组反向时，如果没有提供键值生成器，则ForEach中的所有节点都将重建。 +> +> - 生成的子组件必须允许在**ForEach**的父容器组件中，允许子组件生成器函数中包含**if/else**条件渲染，同时也允许**ForEach**包含在**if/else**条件渲染语句中。 +> +> - 子项生成器函数的调用顺序不一定和数组中的数据项相同，在开发过程中不要假设子项生成器和键值生成器函数是否执行以及执行顺序。如下示例可能无法正常工作： +> ``` +> ForEach(anArray, item => {Text(`${++counter}. item.label`)}) +> ``` +> +> 正确的示例如下： +> +> ``` +> ForEach(anArray.map((item1, index1) => { return { i: index1 + 1, data: item1 }; }), +> item => Text(`${item.i}. item.data.label`), +> item => item.data.id.toString()) +> ``` + + +## 示例 简单类型数组示例： @@ -58,7 +69,6 @@ struct MyComponent { ``` 复杂类型数组示例： - ``` class Month { year: number @@ -121,4 +131,3 @@ struct Calendar1 { } } ``` - diff --git a/zh-cn/application-dev/ui/ts-rending-control-syntax-if-else.md b/zh-cn/application-dev/ui/ts-rending-control-syntax-if-else.md new file mode 100644 index 0000000000000000000000000000000000000000..5596373025c013c8b2c49cf7e152fa3989dc24ee --- /dev/null +++ b/zh-cn/application-dev/ui/ts-rending-control-syntax-if-else.md @@ -0,0 +1,44 @@ +# 条件渲染 + +使用**if/else**进行条件渲染。 + + +> ![icon-note.gif](public_sys-resources/icon-note.gif) **说明：** +> - if条件语句可以使用状态变量； +> +> - 使用if可以使子组件的渲染依赖条件语句； +> +> - 必须在容器组件内使用。 +> +> - 某些容器组件限制子组件的类型或数量。当将if放置在这些组件内时，这些限制将应用于if和else语句内创建的组件：如当在Grid组件内使用if时，则仅允许if条件语句内使用GridItem组件，而在List组件内则仅允许ListItem组件。 + + +## 示例 + +使用if条件语句： + +``` +Column() { + if (this.count > 0) { + Text('count is positive') + } +} +``` + + +使用if、else if、else条件语句： + + +``` +Column() { + if (this.count < 0) { + Text('count is negative') + } else if (this.count % 2 === 0) { + Divider() + Text('even') + } else { + Divider() + Text('odd') + } +} +``` diff --git a/zh-cn/application-dev/reference/arkui-ts/ts-rending-control-syntax-lazyforeach.md b/zh-cn/application-dev/ui/ts-rending-control-syntax-lazyforeach.md similarity index 62% rename from zh-cn/application-dev/reference/arkui-ts/ts-rending-control-syntax-lazyforeach.md rename to zh-cn/application-dev/ui/ts-rending-control-syntax-lazyforeach.md index f2446c7756f92e61ba3ab42417be4dd893f3c630..a752fc701fc3204cf67f99f27d9d85378245a229 100644 --- a/zh-cn/application-dev/reference/arkui-ts/ts-rending-control-syntax-lazyforeach.md +++ b/zh-cn/application-dev/ui/ts-rending-control-syntax-lazyforeach.md @@ -1,7 +1,8 @@ -# 数据懒加载 +# 数据懒加载 开发框架提供**LazyForEach**组件按需迭代数据，并在每次迭代过程中创建相应的组件。**LazyForEach**定义如下： + ``` interface DataChangeListener { onDataReloaded(): void; // Called while data reloaded @@ -23,29 +24,43 @@ LazyForEach( ): void ``` ->![](../../public_sys-resources/icon-note.gif) **说明：** ->- 通过LazyForEach的onDataChanged更新数据时，如果itemGenerator里面包含一个全静态（此view中不包含状态变量）的view，此view将不会更新 ->- 数据懒加载组件使用LazyForEach从提供的数据源中自动生成子组件； ->- 必须在容器组件内使用，且仅有List、Grid以及Swiper组件支持数据的按需加载（即只加载可视部分以及其前后少量数据用于缓冲），其他组件仍然是一次加载所有数据； ->- 第一个参数必须是继承自IDataSource的对象，需要开发者实现相关接口； ->- 第二个参数用于生成子组件的lambda函数。它为给定数组项生成一个或多个子组件。单个组件和子组件列表必须括在大括号“**\{....\}**”中； ->- 可选的第三个参数是用于键值生成的匿名函数。它为给定数组项生成唯一且稳定的键值。当子项在数组中的位置更改时，子项的键值不得更改，当数组中的子项被新项替换时，被替换项的键值和新项的键值必须不同。键值生成器的功能是可选的。但是，出于性能原因，强烈建议提供，这使开发框架能够更好地识别数组更改。如单击进行数组反向时，如果没有提供键值生成器，则ForEach中的所有节点都将重建。 ->- 生成的子组件必须允许在**LazyForEach**的父容器组件中，允许**LazyForEach**包含在**if/else**条件渲染语句中。 ->- **LazyForEach**在每次迭代中，必须创建一个且只允许创建一个子组件。 ->- **ForEach**不允许作为**LazyForEach**的子组件，**LazyForEach**也不支持嵌套。 ->- **LazyForEach**中不允许出现**if/else**条件渲染语句。 ->- 子项生成器函数的调用顺序不一定和数据源中的数据项相同，在开发过程中不要假设子项生成器和键值生成器函数是否执行以及执行顺序。如下示例可能无法正常工作： -> ``` -> ForEach(dataSource, item => {Text(`${++counter}. item.label`)}) -> ``` -> 正确的示例如下： -> ``` -> ForEach(dataSource, -> item => Text(`${item.i}. item.data.label`)), -> item => item.data.id.toString()) -> ``` -## 示例 +> ![icon-note.gif](public_sys-resources/icon-note.gif) **说明：** +> - 通过LazyForEach的onDataChanged更新数据时，如果itemGenerator里面包含一个全静态（此view中不包含状态变量）的view，此view将不会更新 +> +> - 数据懒加载组件使用LazyForEach从提供的数据源中自动生成子组件； +> +> - 必须在容器组件内使用，且仅有List、Grid以及Swiper组件支持数据的按需加载（即只加载可视部分以及其前后少量数据用于缓冲），其他组件仍然是一次加载所有数据； +> +> - 第一个参数必须是继承自IDataSource的对象，需要开发者实现相关接口； +> +> - 第二个参数用于生成子组件的lambda函数。它为给定数组项生成一个或多个子组件。单个组件和子组件列表必须括在大括号“**{....}**”中； +> +> - 可选的第三个参数是用于键值生成的匿名函数。它为给定数组项生成唯一且稳定的键值。当子项在数组中的位置更改时，子项的键值不得更改，当数组中的子项被新项替换时，被替换项的键值和新项的键值必须不同。键值生成器的功能是可选的。但是，出于性能原因，强烈建议提供，这使开发框架能够更好地识别数组更改。如单击进行数组反向时，如果没有提供键值生成器，则ForEach中的所有节点都将重建。 +> +> - 生成的子组件必须允许在**LazyForEach**的父容器组件中，允许**LazyForEach**包含在**if/else**条件渲染语句中。 +> +> - **LazyForEach**在每次迭代中，必须创建一个且只允许创建一个子组件。 +> +> - **ForEach**不允许作为**LazyForEach**的子组件，**LazyForEach**也不支持嵌套。 +> +> - **LazyForEach**中不允许出现**if/else**条件渲染语句。 +> +> - 子项生成器函数的调用顺序不一定和数据源中的数据项相同，在开发过程中不要假设子项生成器和键值生成器函数是否执行以及执行顺序。如下示例可能无法正常工作： +> ``` +> ForEach(dataSource, item => {Text(`${++counter}. item.label`)}) +> ``` +> +> 正确的示例如下： +> +> ``` +> ForEach(dataSource, +> item => Text(`${item.i}. item.data.label`)), +> item => item.data.id.toString()) +> ``` + + +## 示例 ``` // Basic implementation of IDataSource to handle data listener @@ -141,4 +156,3 @@ struct MyComponent { } } ``` - diff --git a/zh-cn/application-dev/ui/ts-rending-control-syntax.md b/zh-cn/application-dev/ui/ts-rending-control-syntax.md new file mode 100644 index 0000000000000000000000000000000000000000..7dfa08a42eea73e7ecabf9e02c0a6a5ee49768a4 --- /dev/null +++ b/zh-cn/application-dev/ui/ts-rending-control-syntax.md @@ -0,0 +1,9 @@ +# 渲染控制语法 + + + +- **[条件渲染](ts-rending-control-syntax-if-else.md)** + +- **[循环渲染](ts-rending-control-syntax-foreach.md)** + +- **[数据懒加载](ts-rending-control-syntax-lazyforeach.md)** \ No newline at end of file diff --git a/zh-cn/application-dev/ui/ts-resource-access.md b/zh-cn/application-dev/ui/ts-resource-access.md new file mode 100644 index 0000000000000000000000000000000000000000..c413d7827b36fd091df50c6b8b1b58ce02875519 --- /dev/null +++ b/zh-cn/application-dev/ui/ts-resource-access.md @@ -0,0 +1,5 @@ +# 资源访问 + + + +- **[媒体资源类型说明](ts-media-resource-type.md)** \ No newline at end of file diff --git a/zh-cn/application-dev/reference/arkui-ts/ts-restrictions-for-generators.md b/zh-cn/application-dev/ui/ts-restrictions-for-generators.md similarity index 53% rename from zh-cn/application-dev/reference/arkui-ts/ts-restrictions-for-generators.md rename to zh-cn/application-dev/ui/ts-restrictions-for-generators.md index 15fbb03a26639b8bd46811cc57696c068e5dc902..edad88d45be20326f65ddd4dc49e63fe1efd1227 100644 --- a/zh-cn/application-dev/reference/arkui-ts/ts-restrictions-for-generators.md +++ b/zh-cn/application-dev/ui/ts-restrictions-for-generators.md @@ -1,16 +1,25 @@ -# 生成器函数内使用TS语言的限制 +# 生成器函数内使用TS语言的限制 + + TS语言的使用在生成器函数中存在一定的限制： -- 表达式仅允许在字符串\($\{expression\}\)、if条件、ForEach的参数和组件的参数中使用； -- 这些表达式中的任何一个都不能导致任何应用程序状态变量（@State、@Link、@Prop）的改变，否则会导致未定义和潜在不稳定的框架行为； -- 允许在生成器函数体的第一行使用console.log，以便开发人员更容易跟踪组件重新渲染。对日志字符串文字中表达式仍遵循上述限制。 -- 生成器函数内部不能有局部变量。 + +- 表达式仅允许在字符串(${expression})、if条件、ForEach的参数和组件的参数中使用； + +- 这些表达式中的任何一个都不能导致任何应用程序状态变量（@State、@Link、@Prop）的改变，否则会导致未定义和潜在不稳定的框架行为； + +- 允许在生成器函数体的第一行使用console.log，以便开发人员更容易跟进组件重新渲染。对日志字符串文字中表达式仍遵循上述限制。 + +- 生成器函数内部不能有局部变量。 + 上述限制都不适用于事件处理函数（例如**onClick**）的匿名函数实现，它们也不适用于UI组件描述外的其余部分。 + 非法示例： + ``` build() { let a: number = 1 // invalid: variable declaration not allowed @@ -23,4 +32,3 @@ build() { Text(this.calcTextValue()) // this function call is ok. } ``` - diff --git a/zh-cn/application-dev/reference/arkui-ts/ts-syntactic-sugar-chaining.md b/zh-cn/application-dev/ui/ts-syntactic-sugar-chaining.md similarity index 78% rename from zh-cn/application-dev/reference/arkui-ts/ts-syntactic-sugar-chaining.md rename to zh-cn/application-dev/ui/ts-syntactic-sugar-chaining.md index 1a0d60c5a7bd7951e9065303e01297ac73a9ae92..dc8d538f2a613c57eba36107c49a0aaa1fea9521 100644 --- a/zh-cn/application-dev/reference/arkui-ts/ts-syntactic-sugar-chaining.md +++ b/zh-cn/application-dev/ui/ts-syntactic-sugar-chaining.md @@ -1,7 +1,10 @@ -# 链式调用 +# 链式调用 + + 允许开发者以“.”链式调用的方式配置UI结构及其属性、事件等。 + ``` Column() { Image('1.jpg') @@ -10,4 +13,3 @@ Column() { .height(100) }.padding(10) ``` - diff --git a/zh-cn/application-dev/ui/ts-syntactic-sugar-decorator.md b/zh-cn/application-dev/ui/ts-syntactic-sugar-decorator.md new file mode 100644 index 0000000000000000000000000000000000000000..e01a7ab7faf86909b072c7feb1c5cb2e7e70c1ee --- /dev/null +++ b/zh-cn/application-dev/ui/ts-syntactic-sugar-decorator.md @@ -0,0 +1,48 @@ +# 装饰器 + +装饰器**@Decorator**，被装饰的元素可以是变量声明，类定义，结构体定义，方法定义等，赋予其特殊的含义。 + + +多个装饰器实现可以叠加到目标元素，书写在同一行上或者在多行上，推荐书写在多行上。 + + +如下**@Component**和**@State**的使用，被**@Component**装饰的元素具备了组件化的含义，使用**@State**装饰的变量具备了状态数据的含义： + + +``` +@Component +struct MyComponent { + @State count: number = 0 +} +``` + + +装饰器可以书写在同一行上： + + +``` +@Entry @Component struct MyComponent { +} +``` + + +但更推荐书写在多行上： + + +``` +@Entry +@Component +struct MyComponent { +} +``` + + +## 支持的装饰器列表 + +| 装饰器 | 装饰内容 | 说明 | +| -------- | -------- | -------- | +| @Component | struct | 结构体在装饰后具有基于组件的能力，需要实现**build**方法来更新UI。 | +| @Entry | struct | 组件被装饰后作为页面的入口，页面加载时将被渲染显示。 | +| @State | 基本数据类型，类，数组 | 修饰的状态数据被修改时会触发组件的**build**方法进行UI界面更新。 | +| @Prop | 基本数据类型 | 修改后的状态数据用于在父组件和子组件之间建立单向数据依赖关系。修改父组件关联数据时，更新当前组件的UI。 | +| @Link | 基本数据类型，类，数组 | 父子组件之间的双向数据绑定。父组件的内部状态数据作为数据源。任何一方所做的修改都会反映给另一方。 | diff --git a/zh-cn/application-dev/reference/arkui-ts/ts-syntactic-sugar-struct.md b/zh-cn/application-dev/ui/ts-syntactic-sugar-struct.md similarity index 79% rename from zh-cn/application-dev/reference/arkui-ts/ts-syntactic-sugar-struct.md rename to zh-cn/application-dev/ui/ts-syntactic-sugar-struct.md index a7294e8269e75db436f58f6375afc3d9a53d52dc..01ee970bfb58bf99202a64a4d2487785a7e83b9a 100644 --- a/zh-cn/application-dev/reference/arkui-ts/ts-syntactic-sugar-struct.md +++ b/zh-cn/application-dev/ui/ts-syntactic-sugar-struct.md @@ -1,7 +1,10 @@ -# struct对象 +# struct对象 + + 组件可以基于**struct**实现，组件不能有继承关系，**struct**可以比**class**更加快速的创建和销毁。 + ``` @Component struct MyComponent { @@ -11,4 +14,3 @@ struct MyComponent { } } ``` - diff --git a/zh-cn/application-dev/ui/ts-syntactic-sugar.md b/zh-cn/application-dev/ui/ts-syntactic-sugar.md new file mode 100644 index 0000000000000000000000000000000000000000..43a67c3b9947f594c358ce8bc4c053044f17f800 --- /dev/null +++ b/zh-cn/application-dev/ui/ts-syntactic-sugar.md @@ -0,0 +1,15 @@ +# 语法糖 + + + +- **[装饰器](ts-syntactic-sugar-decorator.md)** + +- **[链式调用](ts-syntactic-sugar-chaining.md)** + +- **[struct对象](ts-syntactic-sugar-struct.md)** + +- **[在实例化过程中省略"new"](ts-instantiating-a-struct-without-new-keyword.md)** + +- **[组件创建使用独立一行](ts-using-a-separate-line-for-new-component.md)** + +- **[生成器函数内使用TS语言的限制](ts-restrictions-for-generators.md)** \ No newline at end of file diff --git a/zh-cn/application-dev/ui/ts-syntax-intro.md b/zh-cn/application-dev/ui/ts-syntax-intro.md new file mode 100644 index 0000000000000000000000000000000000000000..7dafc7216f36671bdaa48766f8f1f0acf50c1ac0 --- /dev/null +++ b/zh-cn/application-dev/ui/ts-syntax-intro.md @@ -0,0 +1,16 @@ +# 描述规范使用说明 + + + +本节定义了基于TS扩展的声明式开发范式的核心机制和功能。讲述了声明式UI描述、组件化机制、UI状态管理、渲染控制语法和语法糖。 + + +本节为应用开发人员开发UI提供了参考规范。有关组件的详细信息，请参考[组件说明](../reference/arkui-ts/ts-universal-events-click.md)。 + + +> ![icon-note.gif](public_sys-resources/icon-note.gif) **说明：** +> - 所有示例都以TypeScript (TS)语言为例，请遵循相应语言的语法要求。 +> +> - 示例中的**Image**、**Button**、**Text**、**Divider**、**Row**和**Column**等组件是UI框架中预置的组件控件，仅用于解释UI描述规范。 +> +> - 通用属性方法和事件方法通常支持所有组件，而组件内的属性方法和事件方法仅对当前组件有效。 diff --git a/zh-cn/application-dev/ui/ts-types.md b/zh-cn/application-dev/ui/ts-types.md new file mode 100644 index 0000000000000000000000000000000000000000..cc9fc901beef77b10cc58b62a1a9749f29abf084 --- /dev/null +++ b/zh-cn/application-dev/ui/ts-types.md @@ -0,0 +1,117 @@ +# 类型定义 + +## 长度类型 + +| 名称 | 类型定义 | 描述 | +| -------- | -------- | -------- | +| Length | string \| number | 用于描述尺寸单位，输入为number类型时，使用vp单位；输入为string类型时，需要显式指定像素单位，如'10px'，也可设置百分比字符串，如'100%'。 | + + +## 角度类型 + +| 名称 | 类型定义 | 描述 | +| -------- | -------- | -------- | +| Angle | string \| number | 用于角度单位，输入为number类型时，使用deg单位；输入为string类型时需要显示指定角度单位，支持以下两种角度单位：
- deg：如'100deg'。
- rad：如'3.14rad'。 | + + +## 点类型 + +| 名称 | 类型定义 | 描述 | +| -------- | -------- | -------- | +| Point | [Length, Length] | 用于描述点坐标，第一个值为x轴坐标，第二个值为y坐标。 | + + +## 颜色类型 + +组件属性方法使用的颜色Color说明如下： + +| 名称 | 类型定义 | 描述 | +| -------- | -------- | -------- | +| Color | string \| number \| Color | 用于描述颜色信息，输入为string类型时，使用rgb或者rgba进行描述；输入为number类型是，使用HEX格式颜色；输入类型为Color枚举时，使用颜色枚举值。
- 'rgb(255, 255, 255)'。
- 'rgba(255, 255, 255, 1.0)'。
- HEX格式：0xrrggbb，0xaarrggbb，'\#FFFFFF'。
- 枚举格式：Color.Black，Color.White等。 | + + +当前支持的Color颜色枚举： + + +| 颜色名称 | 颜色值 | 颜色示意 | +| -------- | -------- | -------- | +| Black | 0x000000 | ![zh-cn_image_0000001111680230](figures/zh-cn_image_0000001111680230.png) | +| Blue | 0x0000ff | ![zh-cn_image_0000001158240091](figures/zh-cn_image_0000001158240091.png) | +| Brown | 0xa52a2a | ![zh-cn_image_0000001158360079](figures/zh-cn_image_0000001158360079.png) | +| Gray | 0x808080 | ![zh-cn_image_0000001111840132](figures/zh-cn_image_0000001111840132.png) | +| Green | 0x008000 | ![zh-cn_image_0000001111680236](figures/zh-cn_image_0000001111680236.png) | +| Orange | 0xffa500 | ![zh-cn_image_0000001158240095](figures/zh-cn_image_0000001158240095.png) | +| Pink | 0xffc0cb | ![zh-cn_image_0000001158360085](figures/zh-cn_image_0000001158360085.png) | +| Red | 0xff0000 | ![zh-cn_image_0000001111840136](figures/zh-cn_image_0000001111840136.png) | +| White | 0xffffff | ![zh-cn_image_0000001111680240](figures/zh-cn_image_0000001111680240.png) | +| Yellow | 0xffff00 | ![zh-cn_image_0000001158240097](figures/zh-cn_image_0000001158240097.png) | + + +## ColorStop类型 + +颜色断点类型，用于描述渐进色颜色断点。 + +| 名称 | 类型定义 | 描述 | +| -------- | -------- | -------- | +| ColorStop | [Color, number] | 描述渐进色颜色断点类型，第一个参数为颜色值，第二个参数为0~1之间的比例值。 | + + +## 示例 + +``` +@Entry +@Component +struct dataTypeExample { + build() { + Column({ space: 5 }) { + Text('Length').fontColor(0xCCCCCC).fontSize(9).width('90%') + Text('90%').width('90%').height(40).backgroundColor(0xF9CF93) + .textAlign(TextAlign.Center).fontColor(Color.White) + Text('320').width(320).height(40).backgroundColor(0xF9CF93) + .textAlign(TextAlign.Center).fontColor(Color.White) + Text('1000px').width('1000px').height(40).backgroundColor(0xF9CF93) + .textAlign(TextAlign.Center).fontColor(Color.White) + + Text('Angle').fontColor(0xCCCCCC).fontSize(9).width('90%') + Text('45deg') + .width(40).height(40) + .rotate({ x: 0, y: 0, z: 1, angle: 45, centerX: '50%', centerY: '50%' }) + .fontColor(Color.White) + .backgroundColor(0xF9CF93).textAlign(TextAlign.Center) + + Text('45rad') + .width(40).height(40) + .rotate({ x: 0, y: 0, z: 1, angle: '45rad', centerX: '50%', centerY: '50%' }) + .fontColor(Color.White) + .backgroundColor(0xF9CF93).textAlign(TextAlign.Center).margin({ top: 30 }) + + Text('Point').fontColor(0xCCCCCC).fontSize(9).width('90%') + Line().width(300).height(40).startPoint([0, 20]).endPoint([300, 20]) + + Text('Color').fontColor('#CCCCCC').fontSize(9).width('90%') + Text('0xF9CF93') + .fontColor(Color.White).textAlign(TextAlign.Center) + .width('90%').height(40).backgroundColor(0xF9CF93) + + Text('#F9CF93') + .fontColor(Color.White).textAlign(TextAlign.Center) + .width('90%').height(40).backgroundColor('#F9CF93') + + Text('rgb(249, 207, 147)') + .fontColor(Color.White).textAlign(TextAlign.Center) + .width('90%').height(40).backgroundColor('rgb(249, 207, 147)') + + Text('rgba(249, 207, 147, 1.0)') + .fontColor(Color.White).textAlign(TextAlign.Center) + .width('90%').height(40).backgroundColor('rgba(249, 207, 147, 1.0)') + + Text('Color.Yellow') + .textAlign(TextAlign.Center) + .width('90%').height(40).backgroundColor(Color.Yellow) + } + .width('100%').margin({ top: 5 }) + } +} +``` + +![zh-cn_image_0000001214437889](figures/zh-cn_image_0000001214437889.png) diff --git a/zh-cn/application-dev/ui/ts-ui-state-management.md b/zh-cn/application-dev/ui/ts-ui-state-management.md new file mode 100644 index 0000000000000000000000000000000000000000..6c1a8a94433196bcf632a7c3423b0ba87bb29489 --- /dev/null +++ b/zh-cn/application-dev/ui/ts-ui-state-management.md @@ -0,0 +1,11 @@ +# UI状态管理 + + + +- **[基本概念](ts-ui-state-mgmt-concepts.md)** + +- **[管理组件拥有的状态](ts-managing-component-states.md)** + +- **[管理应用程序的状态](ts-managing-application-states.md)** + +- **[其他类目的状态管理](ts-managing-other-states.md)** \ No newline at end of file diff --git a/zh-cn/application-dev/ui/ts-ui-state-mgmt-concepts.md b/zh-cn/application-dev/ui/ts-ui-state-mgmt-concepts.md new file mode 100644 index 0000000000000000000000000000000000000000..81815307c91cade50d72047f83c4d4e45fb2ebc2 --- /dev/null +++ b/zh-cn/application-dev/ui/ts-ui-state-mgmt-concepts.md @@ -0,0 +1,29 @@ +# 基本概念 + +在声明式UI编程范式中，UI是应用程序状态的函数，开发人员通过修改当前应用程序状态来更新相应的UI界面。 + + +开发框架提供了多种应用程序状态管理的能力。 + + +![zh-cn_image_0000001214948035](figures/zh-cn_image_0000001214948035.png) + + +## 状态变量装饰器 + +- **\@State：**组件拥有的状态属性。每当**\@State**装饰的变量更改时，组件会重新渲染更新UI。 + +- **\@Link：**组件依赖于其父组件拥有的某些状态属性。每当任何一个组件中的数据更新时，另一个组件的状态都会更新，父子组件都会进行重新渲染。 + +- **\@Prop：**工作原理类似**\@Link**，只是子组件所做的更改不会同步到父组件上，属于单向传递。 + + +## 应用程序状态数据 + +**AppStorage**是整个UI中使用的应用程序状态的中心“数据库”，UI框架会针对应用程序创建单例**AppStorage**对象，并提供相应的装饰器和接口供应用程序使用。 + +- **\@StorageLink：\@StorageLink(name)**的工作原理类似于**\@Consume(name)**，不同的是，该给定名称的链接对象是从**AppStorage**中获得的，它在**UI组件**和**AppStorage**之间建立双向绑定同步数据。 + +- **\@StorageProp：\@StorageProp(name)**将UI组件属性与**AppStorage**进行单向同步。**AppStorage**中的值更改会更新组件中的属性，但UI组件无法更改**AppStorage**中的属性值。 + +- **AppStorage**还提供用于业务逻辑实现的API，用于添加、读取、修改和删除应用程序的状态属性，通过此API所做的更改会导致修改的状态数据同步到UI组件上进行UI更新。 diff --git a/zh-cn/application-dev/reference/arkui-ts/ts-using-a-separate-line-for-new-component.md b/zh-cn/application-dev/ui/ts-using-a-separate-line-for-new-component.md similarity index 85% rename from zh-cn/application-dev/reference/arkui-ts/ts-using-a-separate-line-for-new-component.md rename to zh-cn/application-dev/ui/ts-using-a-separate-line-for-new-component.md index d35c43e5f2204fa66d30d5cac363d1edd277ad6c..869fc76518be8c540632fa8932e8a65f46d4d547 100644 --- a/zh-cn/application-dev/reference/arkui-ts/ts-using-a-separate-line-for-new-component.md +++ b/zh-cn/application-dev/ui/ts-using-a-separate-line-for-new-component.md @@ -1,7 +1,10 @@ -# 组件创建使用独立一行 +# 组件创建使用独立一行 + + **每行代码末尾可以省略分号";"** + ``` Column() { Image('icon.png') @@ -9,8 +12,10 @@ Column() { } ``` + 等同于： + ``` Column() { Image('icon.png'); @@ -18,10 +23,13 @@ Column() { } ``` + **每行只允许创建一个组件。if, else, else if, ForEach语句单独一行。** + 无效示例： + ``` Column() { Image('icon.png') Text('text') // invalid, creation of two components in same line @@ -30,10 +38,13 @@ Column() { if (this.condi) {Image('icon.png')} // invalid, if and creation a components in same line ``` -**内置容器组件、if和ForEach项生成器函数必须在单个子项的情况下使用封闭括号"\{\}"。** + +**内置容器组件、if和ForEach项生成器函数必须在单个子项的情况下使用封闭括号"{}"。** + 无效示例： + ``` if (this.condi) Image('icon.png'), // invalid, missing {} @@ -41,10 +52,10 @@ else Text('text'); ``` + ``` ForEach(this.arr, (item) => Image('icon.png'), // invalid, missing {} (item) => item.id.toString() } ``` - diff --git a/zh-cn/application-dev/ui/ui-arkui-js.md b/zh-cn/application-dev/ui/ui-arkui-js.md index 48eea89a4e7f09fe105c25ddf6e7f59c8ef92666..c48bfe2aa7f86a758f3934bf4e79e22a079fa0a2 100644 --- a/zh-cn/application-dev/ui/ui-arkui-js.md +++ b/zh-cn/application-dev/ui/ui-arkui-js.md @@ -1,10 +1,17 @@ # 基于JS扩展的类Web开发范式 + - **[概述](ui-js-overview.md)** +- **[框架说明](js-framework.md)** + +- **[初步体验JS FA应用](ui-js-fa.md)** + - **[构建用户界面](ui-js-building-ui.md)** -- **[常见组件开发指导](ui-js-components.md)** +- **[常见组件开发指导](ui-js-common-components.md)** + +- **[动效开发指导](ui-js-animate.md)** - **[自定义组件](ui-js-custom-components.md)** \ No newline at end of file diff --git a/zh-cn/application-dev/ui/ui-arkui-ts.md b/zh-cn/application-dev/ui/ui-arkui-ts.md index fbb639a85c35ff3f3cfb97d214481b7b8aa72f0e..0f52dde2746a1b351abd0f066f28ebc223ece0aa 100644 --- a/zh-cn/application-dev/ui/ui-arkui-ts.md +++ b/zh-cn/application-dev/ui/ui-arkui-ts.md @@ -1,10 +1,13 @@ # 基于TS扩展的声明式开发范式 + - **[概述](ui-ts-overview.md)** -- **[开发说明](ui-ts-developing-intro.md)** +- **[框架说明](ts-framework.md)** + +- **[声明式语法](ts-declarative-syntax.md)** -- **[体验声明式UI](ui-ts-experiencing-declarative--u.md)** +- **[体验声明式UI](ui-ts-experiencing-declarative-ui.md)** - **[页面布局与连接](ui-ts-page-layout-connections.md)** \ No newline at end of file diff --git a/zh-cn/application-dev/ui/ui-arkui.md b/zh-cn/application-dev/ui/ui-arkui.md index 31fba7d15448ee5d8dec0a101bcf0f202332db50..068eeae01065baaaa3e78e865a8085050fab9153 100644 --- a/zh-cn/application-dev/ui/ui-arkui.md +++ b/zh-cn/application-dev/ui/ui-arkui.md @@ -1,6 +1,9 @@ # 方舟开发框架（ArkUI） + +- **[方舟开发框架概述](arkui-overview.md)** + - **[基于JS扩展的类Web开发范式](ui-arkui-js.md)** - **[基于TS扩展的声明式开发范式](ui-arkui-ts.md)** \ No newline at end of file diff --git a/zh-cn/application-dev/ui/ui-js-animate-attribute-style.md b/zh-cn/application-dev/ui/ui-js-animate-attribute-style.md index a91688a0af6dca66926d4cbb44d8249192fc56b9..17c6e77962df4f40aa94b8a273ad04a7aa577ba1 100644 --- a/zh-cn/application-dev/ui/ui-js-animate-attribute-style.md +++ b/zh-cn/application-dev/ui/ui-js-animate-attribute-style.md @@ -1,7 +1,10 @@ -# 属性样式动画 +# 属性样式动画 + + 在关键帧（Keyframes）中动态设置父组件的width和height，实现组件变大缩小。子组件设置scale属性使父子组件同时缩放，再设置opacity实现父子组件的显示与隐藏。 + ```
@@ -14,6 +17,7 @@
``` + ``` /* xxx.css */ .container { @@ -78,9 +82,11 @@ text{ } ``` -![](figures/d1.gif) -> ![icon-note.gif](public_sys-resources/icon-note.gif) **说明：** ->1. animation取值不区分先后，duration （动画执行时间）/ delay （动画延迟执行时间）按照出现的先后顺序解析。 ->2. 必须设置animation-duration样式，否则时长为0则不会有动画效果。当设置animation-fill-mode属性为forwards时，组件直接展示最后一帧的样式。 +![zh-cn_image_0000001217168141](figures/zh-cn_image_0000001217168141.gif) + +> ![icon-note.gif](public_sys-resources/icon-note.gif) **说明：** +> 1. animation取值不区分先后，duration （动画执行时间）/ delay （动画延迟执行时间）按照出现的先后顺序解析。 +> +> 2. 必须设置animation-duration样式，否则时长为0则不会有动画效果。当设置animation-fill-mode属性为forwards时，组件直接展示最后一帧的样式。 diff --git a/zh-cn/application-dev/ui/ui-js-animate-background-position-style.md b/zh-cn/application-dev/ui/ui-js-animate-background-position-style.md index ed5fc97b0b30ad53048c7d824c87d89c15dd7e0f..4832b4331a9d13aae9b17fc11a2bfd387ed1bd24 100644 --- a/zh-cn/application-dev/ui/ui-js-animate-background-position-style.md +++ b/zh-cn/application-dev/ui/ui-js-animate-background-position-style.md @@ -1,7 +1,10 @@ -# background-position样式动画 +# background-position样式动画 + + 通过改变background-position属性（第一个值为X轴的位置，第二个值为Y轴的位置）移动背景图片位置，若背景图位置超出组件则超出部分的背景图不显示。 + ```
@@ -10,6 +13,7 @@
``` + ``` /* xxx.css */ .container { @@ -74,8 +78,9 @@ } ``` -![](figures/q8.gif) -> ![icon-note.gif](public_sys-resources/icon-note.gif) **说明：** ->background-position仅支持背景图片的移动，不支持背景颜色（background-color)。 +![zh-cn_image_0000001217008255](figures/zh-cn_image_0000001217008255.gif) + +> ![icon-note.gif](public_sys-resources/icon-note.gif) **说明：** +> background-position仅支持背景图片的移动，不支持背景颜色（background-color）。 diff --git a/zh-cn/application-dev/ui/ui-js-animate-component.md b/zh-cn/application-dev/ui/ui-js-animate-component.md index 426d40730fa23ffa035601415bf3f6b36d2df71d..674d3c3b9c5aea8f80b913189dce383836805dbe 100644 --- a/zh-cn/application-dev/ui/ui-js-animate-component.md +++ b/zh-cn/application-dev/ui/ui-js-animate-component.md @@ -1,8 +1,9 @@ -# 组件动画 +# 组件动画 在组件上创建和运行动画的快捷方式。具体用法请参考[通用方法](../reference/arkui-js/js-components-common-methods.md)。 -## 获取动画对象 + +## 获取动画对象 通过调用animate方法获得animation对象，animation对象支持动画属性、动画方法和动画事件。 @@ -57,13 +58,14 @@ export default { } ``` -![](figures/1.gif) +![zh-cn_image_0000001175235138](figures/zh-cn_image_0000001175235138.gif) > ![icon-note.gif](public_sys-resources/icon-note.gif) **说明：** >- 使用animate方法时必须传入Keyframes和Options参数。 >- 多次调用animate方法时，采用replace策略，即最后一次调用时传入的参数生效。 -## 设置动画参数 + +## 设置动画参数 在获取动画对象后，通过设置参数Keyframes设置动画在组件上的样式。 @@ -102,30 +104,7 @@ export default { this.options = { duration: 4000, }; - this.keyframes = [ - { - transform: { - translate: '-120px -0px', - scale: 1, - rotate: 0 - }, - transformOrigin: '100px 100px', - offset: 0.0, - width: 200, - height: 200 - }, - { - transform: { - translate: '120px 0px', - scale: 1.5, - rotate: 90 - }, - transformOrigin: '100px 100px', - offset: 1.0, - width: 300, - height: 300 - } - ]; + this.keyframes = [ { transform: { translate: '-120px -0px', scale: 1, rotate: 0 }, transformOrigin: '100px 100px', offset: 0.0, width: 200, height: 200 }, { transform: { translate: '120px 0px', scale: 1.5, rotate: 90 }, transformOrigin: '100px 100px', offset: 1.0, width: 300, height: 300 } ]; }, Show() { this.animation = this.$element('content').animate(this.keyframes, this.options); @@ -134,11 +113,12 @@ export default { } ``` -![](figures/1-0.gif) +![zh-cn_image_0000001174916742](figures/zh-cn_image_0000001174916742.gif) > ![icon-note.gif](public_sys-resources/icon-note.gif) **说明：** ->- translate、scale和totate的先后顺序会影响动画效果。 ->- transformOrigin只对scale和totate起作用。 +> - translate、scale和rtotate的先后顺序会影响动画效果。 +> +> - transformOrigin只对scale和rtotate起作用。 在获取动画对象后，通过设置参数Options来设置动画的属性。 @@ -174,12 +154,12 @@ export default { onInit() { }, onShow() { - var options = { - duration: 1500, - easing: 'ease-in', - delay: 5, - iterations: 2, - direction: 'normal', + var options = { + duration: 1500, + easing: 'ease-in', + delay: 5, + iterations: 2, + direction: 'normal', }; var frames = [ { @@ -201,16 +181,21 @@ export default { } ``` -![](figures/3.gif) +![zh-cn_image_0000001220396499](figures/zh-cn_image_0000001220396499.gif) > ![icon-note.gif](public_sys-resources/icon-note.gif) **说明：** ->direction：指定动画的播放模式。 ->normal： 动画正向循环播放。 ->reverse： 动画反向循环播放。 ->alternate：动画交替循环播放，奇数次正向播放，偶数次反向播放。 ->alternate-reverse：动画反向交替循环播放，奇数次反向播放，偶数次正向播放。 +> direction：指定动画的播放模式。 +> +> normal： 动画正向循环播放。 +> +> reverse： 动画反向循环播放。 +> +> alternate：动画交替循环播放，奇数次正向播放，偶数次反向播放。 +> +> alternate-reverse：动画反向交替循环播放，奇数次反向播放，偶数次正向播放。 -## 添加事件和调用方法 + +## 添加事件和调用方法 animation对象支持动画事件和动画方法。可以通过添加开始和取消事件，调用播放、暂停、倒放和结束方法实现预期动画。 @@ -336,7 +321,7 @@ export default { } ``` -![](figures/111-1.gif) +![zh-cn_image_0000001220635011](figures/zh-cn_image_0000001220635011.gif) 通过改变playStat的属性实现动画状态的改变。 @@ -463,5 +448,4 @@ export default { } ``` -![](figures/1111.gif) - +![zh-cn_image_0000001175075286](figures/zh-cn_image_0000001175075286.gif) diff --git a/zh-cn/application-dev/ui/ui-js-animate-css.md b/zh-cn/application-dev/ui/ui-js-animate-css.md index 8d4db2cd7f381f907bc0f95d21fb0b9f6cc0a92c..71316ee261f82f9d91ef69bdddf3546083b454f4 100644 --- a/zh-cn/application-dev/ui/ui-js-animate-css.md +++ b/zh-cn/application-dev/ui/ui-js-animate-css.md @@ -1,6 +1,9 @@ -# CSS动画 +# CSS动画 -- **[属性样式动画](ui-js-animate-attribute-style.md)** -- **[transform样式动画](ui-js-animate-transform.md)** -- **[background-position样式动画](ui-js-animate-background-position-style.md)** + +- **[属性样式动画](ui-js-animate-attribute-style.md)** + +- **[transform样式动画](ui-js-animate-transform.md)** + +- **[background-position样式动画](ui-js-animate-background-position-style.md)** \ No newline at end of file diff --git a/zh-cn/application-dev/ui/ui-js-animate-dynamic-effects.md b/zh-cn/application-dev/ui/ui-js-animate-dynamic-effects.md index 0fbc34c2d3822fc3285e74b630cdc3e0cfb7249b..20be7efc485cb3a3600a6fbb575d6ce492e36f94 100644 --- a/zh-cn/application-dev/ui/ui-js-animate-dynamic-effects.md +++ b/zh-cn/application-dev/ui/ui-js-animate-dynamic-effects.md @@ -1,11 +1,13 @@ -# 动画动效 +# 动画动效 + 通过设置插值器来实现动画效果。具体用法请参考[动画](../reference/apis/js-apis-basic-features-animator.md)。 > ![icon-note.gif](public_sys-resources/icon-note.gif) **说明：** ->从API Version 6 开始支持。 +> 从API Version 6 开始支持。 + -## 创建动画对象 +## 创建动画对象 通过createAnimator创建一个动画对象，通过设置参数options来设置动画的属性。 @@ -72,16 +74,19 @@ export default { } ``` -![](figures/22.gif) +![zh-cn_image_0000001174756776](figures/zh-cn_image_0000001174756776.gif) > ![icon-note.gif](public_sys-resources/icon-note.gif) **说明：** ->- 使用createAnimator创建动画对象时必须传入options参数。 ->- begin插值起点，不设置时默认为0。 ->- end插值终点，不设置时默认为1。 +> - 使用createAnimator创建动画对象时必须传入options参数。 +> +> - begin插值起点，不设置时默认为0。 +> +> - end插值终点，不设置时默认为1。 -## 添加动画事件和调用接口 -animator支持事件和接口，可以通过添加frame、cancel、repeat、finish事件和调用update、play、pause、cancel、reverse、finish接口自定义动画效果。animator支持的事件和接口具体见animator支持的事件和animator支持的接口。 +## 添加动画事件和调用接口 + +animator支持事件和接口，可以通过添加frame、cancel、repeat、finish事件和调用update、play、pause、cancel、reverse、finish接口自定义动画效果。animator支持的事件和接口具体见[动画中的createAnimator](../reference/apis/js-apis-basic-features-animator.md)。 ``` @@ -230,8 +235,7 @@ export default { } ``` -![](figures/1-2.gif) +![zh-cn_image_0000001220635059](figures/zh-cn_image_0000001220635059.gif) > ![icon-note.gif](public_sys-resources/icon-note.gif) **说明：** ->在调用update接口的过程中可以使用这个接口更新动画参数，入参与createAnimator一致。 - +> 在调用update接口的过程中可以使用这个接口更新动画参数，入参与createAnimator一致。 diff --git a/zh-cn/application-dev/ui/ui-js-animate-frame.md b/zh-cn/application-dev/ui/ui-js-animate-frame.md index d7f8c2d3ef4c9d3a779380d4993898c76819a381..8489cfd5f02ddcb2e24f55cfe44c38c94cef9817 100644 --- a/zh-cn/application-dev/ui/ui-js-animate-frame.md +++ b/zh-cn/application-dev/ui/ui-js-animate-frame.md @@ -1,6 +1,6 @@ -# 动画帧 +# 动画帧 -## 请求动画帧 +## 请求动画帧 请求动画帧时通过requestAnimationFrame函数逐帧回调，在调用该函数时传入一个回调函数。 @@ -93,12 +93,13 @@ export default { } ``` -![](figures/3333.gif) +![zh-cn_image_0000001174756860](figures/zh-cn_image_0000001174756860.gif) > ![icon-note.gif](public_sys-resources/icon-note.gif) **说明：** ->requestAnimationFrame函数在调用回调函数时在第一个参数位置传入timestamp时间戳，表示requestAnimationFrame开始去执行回调函数的时刻。 +> requestAnimationFrame函数在调用回调函数时在第一个参数位置传入timestamp时间戳，表示requestAnimationFrame开始去执行回调函数的时刻。 -## 取消动画帧 + +## 取消动画帧 通过cancelAnimationFrame函数取消逐帧回调，在调用cancelAnimationFrame函数时取消requestAnimationFrame函数的请求。 @@ -181,8 +182,7 @@ export default { } ``` -![](figures/4444.gif) +![zh-cn_image_0000001220316655](figures/zh-cn_image_0000001220316655.gif) > ![icon-note.gif](public_sys-resources/icon-note.gif) **说明：** ->在调用该函数时需传入一个具有标识id的参数。 - +> 在调用该函数时需传入一个具有标识id的参数。 diff --git a/zh-cn/application-dev/ui/ui-js-animate-interpolator.md b/zh-cn/application-dev/ui/ui-js-animate-interpolator.md index dbaf6581dd7b070c491d84ca07506da00eecd4e5..788ddc5dd774507141aed09d221de8afeb59ea52 100644 --- a/zh-cn/application-dev/ui/ui-js-animate-interpolator.md +++ b/zh-cn/application-dev/ui/ui-js-animate-interpolator.md @@ -1,7 +1,7 @@ -# 插值器动画 +# 插值器动画 -- **[动画动效](ui-js-animate-dynamic-effects.md)** -- **[动画帧](ui-js-animate-frame.md)** +- **[动画动效](ui-js-animate-dynamic-effects.md)** +- **[动画帧](ui-js-animate-frame.md)** \ No newline at end of file diff --git a/zh-cn/application-dev/ui/ui-js-animate-javascript.md b/zh-cn/application-dev/ui/ui-js-animate-javascript.md index fbe4901c930db172eab1c2a598240740baecbb97..2293acebee2a1db3ab7458e35c1d4216231d6f4b 100644 --- a/zh-cn/application-dev/ui/ui-js-animate-javascript.md +++ b/zh-cn/application-dev/ui/ui-js-animate-javascript.md @@ -1,7 +1,7 @@ -# JS动画 +# JS动画 -- **[组件动画](ui-js-animate-component.md)** -- **[插值器动画](ui-js-animate-interpolator.md)** +- **[组件动画](ui-js-animate-component.md)** +- **[插值器动画](ui-js-animate-interpolator.md)** \ No newline at end of file diff --git a/zh-cn/application-dev/ui/ui-js-animate-transform.md b/zh-cn/application-dev/ui/ui-js-animate-transform.md index eb11e5bbe0bf4cb89b105e4fb48dc9ff64a64cd9..78a10d9622b2301b9208ff5c156396b9cfa46fc2 100644 --- a/zh-cn/application-dev/ui/ui-js-animate-transform.md +++ b/zh-cn/application-dev/ui/ui-js-animate-transform.md @@ -1,10 +1,11 @@ -# transform样式动画 +# transform样式动画 设置transform属性对组件进行旋转、缩放、移动和倾斜。 -## 设置静态动画 -创建一个正方形并旋转90°变成菱形，并用下方的长方形把菱形下半部分遮盖形成屋顶，设置长方形translate属性值为\(150px,-150px\)确定坐标位置形成门，再使用position属性使横纵线跟随父组件（正方形）移动到指定坐标位置，接着设置scale属性使父子组件一起变大形成窗户大小，最后使用skewX属性使组件倾斜后设置坐标translate\(200px,-830px\)得到烟囱。 +## 设置静态动画 + +创建一个正方形并旋转90°变成菱形，并用下方的长方形把菱形下半部分遮盖形成屋顶，设置长方形translate属性值为(150px,-150px)确定坐标位置形成门，再使用position属性使横纵线跟随父组件（正方形）移动到指定坐标位置，接着设置scale属性使父子组件一起变大形成窗户大小，最后使用skewX属性使组件倾斜后设置坐标translate(200px,-830px)得到烟囱。 ``` @@ -86,9 +87,10 @@ } ``` -![](figures/111.png) +![zh-cn_image_0000001220634677](figures/zh-cn_image_0000001220634677.png) + -## 设置平移动画 +## 设置平移动画 小球下降动画，改变小球的Y轴坐标实现小球下落，在下一段是时间内减小Y轴坐标实现小球回弹，让每次回弹的高度逐次减小直至回弹高度为0，就模拟出了小球下降的动画。 @@ -162,9 +164,10 @@ } ``` -![](figures/q2.gif) +![zh-cn_image_0000001174756438](figures/zh-cn_image_0000001174756438.gif) + -## 设置旋转动画 +## 设置旋转动画 设置不同的原点位置（transform-origin）改变元素所围绕的旋转中心。rotate3d属性前三个参数值分别为X轴、Y轴、Z轴的旋转向量，第四个值为旋转角度，旋转向角度可为负值，负值则代表旋转方向为逆时针方向。 @@ -212,7 +215,7 @@ } .rect3{ background-color: #6081f7; - /* 改变原定点置*/ + /* 改变原点位置*/ transform-origin: right bottom; } @keyframes rotate { @@ -292,12 +295,13 @@ } ``` -![](figures/d2.gif) +![zh-cn_image_0000001220316305](figures/zh-cn_image_0000001220316305.gif) > ![icon-note.gif](public_sys-resources/icon-note.gif) **说明：** ->transform-origin变换对象的原点位置，如果仅设置一个值，另一个值为50%，若设置两个值第一个值表示X轴的位置，第二个值表示Y轴的位置。 +> transform-origin变换对象的原点位置，如果仅设置一个值，另一个值为50%，若设置两个值第一个值表示X轴的位置，第二个值表示Y轴的位置。 -## 设置缩放动画 + +## 设置缩放动画 设置scale样式属性实现涟漪动画，先使用定位确定元素的位置，确定坐标后创建多个组件实现重合效果，再设置opacity属性改变组件不透明度实现组件隐藏与显示，同时设置scale值使组件可以一边放大一边隐藏，最后设置两个组件不同的动画执行时间，实现扩散的效果。 @@ -333,14 +337,12 @@ height: 100px; border-radius: 50px; background:linear-gradient(#dcaec1, #d3a8e3); - z-index: 1; - position: absolute; + z-index: 1; position: absolute; } .ripple{ margin-top: 400px; margin-left: 40%; - position: absolute; - z-index: 0; + position: absolute; z-index: 0; width: 100px; height: 100px; border-radius: 50px; @@ -406,14 +408,15 @@ text{ } ``` -![](figures/d3.gif) +![zh-cn_image_0000001220396251](figures/zh-cn_image_0000001220396251.gif) > ![icon-note.gif](public_sys-resources/icon-note.gif) **说明：** ->设置transform属性值后，子元素会跟着父元素一起改变，若只改变父元素其他属性值时（如：height，width)，子元素不会改变。 +> 设置transform属性值后，子元素会跟着父元素一起改变，若只改变父元素其他属性值时（如：height，width），子元素不会改变。 + -## 设置matrix属性 +## 设置matrix属性 -matrix是一个入参为六个值的矩阵，6个值分别代表：scaleX, skewY, skewX, scaleY, translateX, translateY。下面示例中设置 了matrix属性为matrix\(1,0,0,1,0,200\)使组件移动和倾斜。 +matrix是一个入参为六个值的矩阵，6个值分别代表：scaleX, skewY, skewX, scaleY, translateX, translateY。下面示例中设置 了matrix属性为matrix(1,0,0,1,0,200)使组件移动和倾斜。 ``` @@ -451,9 +454,10 @@ matrix是一个入参为六个值的矩阵，6个值分别代表：scaleX, skewY } ``` -![](figures/q3.gif) +![zh-cn_image_0000001174756580](figures/zh-cn_image_0000001174756580.gif) + -## 整合transform属性 +## 整合transform属性 transform可以设置多个值并且多个值可同时设置，下面案例中展示同时设置缩放（scale），平移（translate），旋转（rotate）属性时的动画效果。 @@ -514,8 +518,7 @@ transform可以设置多个值并且多个值可同时设置，下面案例中 /* change1 change2 对比 */ @keyframes change1{ 0%{ - transform: translate(0,0); - transform: rotate(0deg) + transform: translate(0,0); transform: rotate(0deg) } 100%{ transform: translate(0,500px); @@ -559,10 +562,11 @@ transform可以设置多个值并且多个值可同时设置，下面案例中 } ``` -![](figures/d4.gif) +![zh-cn_image_0000001220554911](figures/zh-cn_image_0000001220554911.gif) > ![icon-note.gif](public_sys-resources/icon-note.gif) **说明：** ->1. 当设置多个transform时，后续的transform值会把前面的覆盖掉。若想同时使用多个动画样式可用复合写法，例：transform: scale\(1\) rotate\(0\) translate\(0,0\)。 ->2. transform进行复合写法时，变化样式内多个样式值顺序的不同会呈现不一样的动画效果。 ->3. transform属性设置的样式值要一一对应，若前后不对应，则该动画不生效。若设置多个样式值则只会呈现出已对应值的动画效果。 - +> 1. 当设置多个transform时，后续的transform值会把前面的覆盖掉。若想同时使用多个动画样式可用复合写法，例：transform: scale(1) rotate(0) translate(0,0)。 +> +> 2. transform进行复合写法时，变化样式内多个样式值顺序的不同会呈现不一样的动画效果。 +> +> 3. transform属性设置的样式值要一一对应，若前后不对应，则该动画不生效。若设置多个样式值则只会呈现出已对应值的动画效果。 diff --git a/zh-cn/application-dev/ui/ui-js-animate.md b/zh-cn/application-dev/ui/ui-js-animate.md new file mode 100644 index 0000000000000000000000000000000000000000..8476e02b593f04813978c541bf095338932c3bd6 --- /dev/null +++ b/zh-cn/application-dev/ui/ui-js-animate.md @@ -0,0 +1,7 @@ +# 动效开发指导 + + + +- **[CSS动画](ui-js-animate-css.md)** + +- **[JS动画](ui-js-animate-javascript.md)** \ No newline at end of file diff --git a/zh-cn/application-dev/ui/ui-js-building-ui-component.md b/zh-cn/application-dev/ui/ui-js-building-ui-component.md index e0a91c12b4e9032adfaa4e21cc4f3576f4a74605..454dbfc4d62182fc56c96b3919b8f964197be053 100755 --- a/zh-cn/application-dev/ui/ui-js-building-ui-component.md +++ b/zh-cn/application-dev/ui/ui-js-building-ui-component.md @@ -10,11 +10,11 @@ 根据组件的功能，可以分为以下六大类： -| 组件类型 | 主要组件 | +| 组件类型 | 主要组件 | | -------- | -------- | -| 容器组件 | badge、dialog、div、form、list、list-item、list-item-group、panel、popup、refresh、stack、stepper、stepper-item、swiper、tabs、tab-bar、tab-content | -| 基础组件 | button、chart、divider、image、image-animator、input、label、marquee、menu、option、picker、picker-view、piece、progress、qrcode、rating、richtext、search、select、slider、span、switch、text、textarea、toolbar、toolbar-item、toggle | -| 媒体组件 | video | -| 画布组件 | canvas | -| 栅格组件 | grid-container、grid-row、grid-col | +| 容器组件 | badge、dialog、div、form、list、list-item、list-item-group、panel、popup、refresh、stack、stepper、stepper-item、swiper、tabs、tab-bar、tab-content | +| 基础组件 | button、chart、divider、image、image-animator、input、label、marquee、menu、option、picker、picker-view、piece、progress、qrcode、rating、richtext、search、select、slider、span、switch、text、textarea、toolbar、toolbar-item、toggle | +| 媒体组件 | video | +| 画布组件 | canvas | +| 栅格组件 | grid-container、grid-row、grid-col | | svg组件 | svg、rect、circle、ellipse、path、line、polyline、polygon、text、tspan、textPath、animate、animateMotion、animateTransform | diff --git a/zh-cn/application-dev/ui/ui-js-building-ui-interactions.md b/zh-cn/application-dev/ui/ui-js-building-ui-interactions.md index bbc49790403db1e3ef3dcbbae5170e289413c543..134c10302077c7a2c2c0428d323f68273896310c 100755 --- a/zh-cn/application-dev/ui/ui-js-building-ui-interactions.md +++ b/zh-cn/application-dev/ui/ui-js-building-ui-interactions.md @@ -77,4 +77,4 @@ export default { ``` -除此之外，还提供了很多表单组件，例如开关、标签、滑动选择器等，以便于开发者在页面布局时灵活使用和提高交互性，详见[容器组件](../reference/arkui-js/js-components-container-badge.md)。 +除此之外，还提供了很多表单组件，例如开关、标签、滑动选择器等，以便于开发者在页面布局时灵活使用和提高交互性，详见[容器组件](../reference/arkui-js/js-components-container.md)。 diff --git a/zh-cn/application-dev/ui/ui-js-building-ui-layout-comment.md b/zh-cn/application-dev/ui/ui-js-building-ui-layout-comment.md index 6de571962840a12cf879ca087d2275238b43042e..ffc8508d19579769417b4faef3a46b14971f63f4 100755 --- a/zh-cn/application-dev/ui/ui-js-building-ui-layout-comment.md +++ b/zh-cn/application-dev/ui/ui-js-building-ui-layout-comment.md @@ -33,7 +33,7 @@ color: #1a1a1a; font-weight: bold; margin-top: 40px; -margin-bottom: 10px; + margin-bottom: 10px; } .comment { width: 550px; diff --git a/zh-cn/application-dev/ui/ui-js-building-ui-layout-image.md b/zh-cn/application-dev/ui/ui-js-building-ui-layout-image.md index 1af42fc8c51871290cbbcf96e16a882b301b3d37..78672e1b5d4bcad2f80805b01be30d33ba07aec1 100755 --- a/zh-cn/application-dev/ui/ui-js-building-ui-layout-image.md +++ b/zh-cn/application-dev/ui/ui-js-building-ui-layout-image.md @@ -3,7 +3,8 @@ 添加图片区域通常用[image](../reference/arkui-js/js-components-basic-image.md)组件来实现，使用的方法和text组件类似。 -图片资源建议放在jsdefaultcommon目录下，common目录需自行创建，详细的目录结构见[目录结构](../reference/arkui-js/js-framework-file.md#目录结构)。代码示例如下： + +图片资源建议放在jsdefaultcommon目录下，common目录需自行创建，详细的目录结构见[目录结构](../ui/js-framework-file.md#目录结构)。代码示例如下： ``` diff --git a/zh-cn/application-dev/ui/ui-js-building-ui-layout-intro.md b/zh-cn/application-dev/ui/ui-js-building-ui-layout-intro.md index c52c5d8ecb747242a6abd8f76b4dd044a7a692b0..fead97863e69229838d8e9c427f095c2264b1014 100644 --- a/zh-cn/application-dev/ui/ui-js-building-ui-layout-intro.md +++ b/zh-cn/application-dev/ui/ui-js-building-ui-layout-intro.md @@ -1,5 +1,7 @@ # 布局说明 + + 设备的基准宽度为720px（px为逻辑像素，非物理像素），实际显示效果会根据实际屏幕宽度进行缩放。 diff --git a/zh-cn/application-dev/ui/ui-js-building-ui-layout.md b/zh-cn/application-dev/ui/ui-js-building-ui-layout.md index 72d4a2292c420711c33c6a6e4ed1b07c6091efff..873bf34e4060a34c0b21291983be6726826f4fe8 100644 --- a/zh-cn/application-dev/ui/ui-js-building-ui-layout.md +++ b/zh-cn/application-dev/ui/ui-js-building-ui-layout.md @@ -1,6 +1,7 @@ # 构建布局 + - **[布局说明](ui-js-building-ui-layout-intro.md)** - **[添加标题行和文本区域](ui-js-building-ui-layout-text.md)** diff --git a/zh-cn/application-dev/ui/ui-js-building-ui.md b/zh-cn/application-dev/ui/ui-js-building-ui.md index bc6c708daa1e38ae4119875e8e0c73c93fb32509..3eb5f16e447b839162a1912ed4fff088c0ac364d 100644 --- a/zh-cn/application-dev/ui/ui-js-building-ui.md +++ b/zh-cn/application-dev/ui/ui-js-building-ui.md @@ -1,6 +1,7 @@ # 构建用户界面 + - **[组件介绍](ui-js-building-ui-component.md)** - **[构建布局](ui-js-building-ui-layout.md)** diff --git a/zh-cn/application-dev/ui/ui-js-components.md b/zh-cn/application-dev/ui/ui-js-common-components.md similarity index 68% rename from zh-cn/application-dev/ui/ui-js-components.md rename to zh-cn/application-dev/ui/ui-js-common-components.md index 922bf9de627589d50031352f5508f1497e72901d..2c3eb9c3d88061466d9d57edfd244fabb29edc13 100644 --- a/zh-cn/application-dev/ui/ui-js-components.md +++ b/zh-cn/application-dev/ui/ui-js-common-components.md @@ -1,8 +1,5 @@ # 常见组件开发指导 -> ![icon-note.gif](public_sys-resources/icon-note.gif) **说明：** -> 本篇指导涉及到的示例代码，在手机端的适配屏宽为720px。 - - **[Text](ui-js-components-text.md)** diff --git a/zh-cn/application-dev/ui/ui-js-components-button.md b/zh-cn/application-dev/ui/ui-js-components-button.md index 2c05b9c6ff704f1d1f26a94f6ffbf28b7fd2102c..51de5a7d098e427ba9872d9d90ddf523f7d31f07 100644 --- a/zh-cn/application-dev/ui/ui-js-components-button.md +++ b/zh-cn/application-dev/ui/ui-js-components-button.md @@ -278,4 +278,4 @@ export default { ``` -![zh-cn_image_0000001163212628](figures/zh-cn_image_0000001163212628.gif) +![zh-cn_image_0000001234129289](figures/zh-cn_image_0000001234129289.gif) diff --git a/zh-cn/application-dev/ui/ui-js-components-dialog.md b/zh-cn/application-dev/ui/ui-js-components-dialog.md index db9ebf69969a8a86b355df42fc43342cea87f3cf..dea91fd511d9598d723dd9a720551119453a6583 100644 --- a/zh-cn/application-dev/ui/ui-js-components-dialog.md +++ b/zh-cn/application-dev/ui/ui-js-components-dialog.md @@ -5,11 +5,11 @@ Dialog组件用于创建自定义弹窗，通常用来展示用户当前需要 ## 创建Dialog组件 -在pages/index目录下的hml文件中创建一个Dialog组件，并添加Button组件来触发Dialog，当dragable为true时Dialog组件可进行拖拽。。Dialog组件仅支持width、height、margin、margin-[left|top|right|bottom]、margin-[start|end]样式。。 +在pages/index目录下的hml文件中创建一个Dialog组件，并添加Button组件来触发Dialog。Dialog组件仅支持width、height、margin、margin-[left|top|right|bottom]、margin-[start|end]样式。 ```
-
+
this is a dialog
@@ -58,18 +58,18 @@ export default { } ``` -![zh-cn_image_0000001211246571](figures/zh-cn_image_0000001211246571.gif)![zh-cn_image_0000001211246571](figures/zh-cn_image_0000001211246571.gif) +![zh-cn_image_0000001211246571](figures/zh-cn_image_0000001211246571.gif) ## 设置弹窗响应 -开发者点击页面上非Dialog的区域时，将触发cancel事件而关闭弹窗，。同时也可以通过对Dialog添加show和close方法来显示和关闭弹窗，当弹窗显示时触发show事件，关闭则触发close事件。。 +开发者点击页面上非Dialog的区域时，将触发cancel事件而关闭弹窗。同时也可以通过对Dialog添加show和close方法来显示和关闭弹窗。 ```
- +
dialog @@ -120,12 +120,16 @@ export default { this.$element('dialogId').show() }, confirmClick(e) { - this.$element('dialogId').close() prompt.showToast({ message: 'Confirmed.' })}, }, show(){ prompt.showToast({duration:2000,message:'dialogShow'}) }, close(){ prompt.showToast({duration:2000,message:'dialogClose'}) }, cancel(){ prompt.showToast({duration:2000,message:'dialogCancel'}) }, + this.$element('dialogId').close() + prompt.showToast({ + message: 'Confirmed.' + }) + }, } ``` -![zh-cn_image_0000001163229150](figures/zh-cn_image_0000001163229150.gif)![zh-cn_image_0000001163229150](figures/zh-cn_image_0000001163229150.gif) +![zh-cn_image_0000001163229150](figures/zh-cn_image_0000001163229150.gif) > ![icon-note.gif](public_sys-resources/icon-note.gif) **说明：** @@ -301,4 +305,4 @@ export default { ``` -![zh-cn_image_0000001163531184](figures/zh-cn_image_0000001163531184.gif) +![zh-cn_image_0000001234329527](figures/zh-cn_image_0000001234329527.gif) diff --git a/zh-cn/application-dev/ui/ui-js-components-form.md b/zh-cn/application-dev/ui/ui-js-components-form.md index 37d558842d84d90c0fc9c2f7208e9702d3c84ac8..6a8d47918a39a64d92bca77bb3a560fe58de85ae 100644 --- a/zh-cn/application-dev/ui/ui-js-components-form.md +++ b/zh-cn/application-dev/ui/ui-js-components-form.md @@ -110,7 +110,7 @@ export default{ ``` -![zh-cn_image_0000001163691126](figures/zh-cn_image_0000001163691126.gif) +![zh-cn_image_0000001234329539](figures/zh-cn_image_0000001234329539.gif) ## 场景示例 @@ -188,4 +188,4 @@ export default { } ``` -![zh-cn_image_0000001163372646](figures/zh-cn_image_0000001163372646.gif) +![zh-cn_image_0000001234289465](figures/zh-cn_image_0000001234289465.gif) diff --git a/zh-cn/application-dev/ui/ui-js-components-images.md b/zh-cn/application-dev/ui/ui-js-components-images.md index 1ddb7b940488e8ec680c96aec575c9874b691e2e..f6833719256cbaab51cf8ae84e9f58e351ca74df 100644 --- a/zh-cn/application-dev/ui/ui-js-components-images.md +++ b/zh-cn/application-dev/ui/ui-js-components-images.md @@ -53,7 +53,7 @@ image{ border-radius: 20px; object-fit: contain; match-text-direction:true; - object-position: center center; + } ``` @@ -189,7 +189,7 @@ export default { } ``` -![zh-cn_image_0000001210358571](figures/zh-cn_image_0000001210358571.gif) +![zh-cn_image_0000001188931396](figures/zh-cn_image_0000001188931396.gif) ## 场景示例 @@ -216,6 +216,7 @@ export default { align-self: center; justify-content: center; background-color:#F1F3F5; + background-color: #F1F3F5; } .content{ flex-direction:column; @@ -264,4 +265,4 @@ export default { } ``` -![zh-cn_image_0000001208892929](figures/zh-cn_image_0000001208892929.gif) +![zh-cn_image_0000001188771430](figures/zh-cn_image_0000001188771430.gif) diff --git a/zh-cn/application-dev/ui/ui-js-components-input.md b/zh-cn/application-dev/ui/ui-js-components-input.md index 5784b04a1ea8c0520156c4ebc565a0b9586536b9..b6a772ea8446f27a50339750758709988da340ca 100644 --- a/zh-cn/application-dev/ui/ui-js-components-input.md +++ b/zh-cn/application-dev/ui/ui-js-components-input.md @@ -156,7 +156,7 @@ export default { } ``` -![zh-cn_image_0000001208787965](figures/zh-cn_image_0000001208787965.gif) +![zh-cn_image_0000001189088264](figures/zh-cn_image_0000001189088264.gif) ## 设置输入提示 @@ -219,7 +219,7 @@ import prompt from '@system.prompt' } ``` -![zh-cn_image_0000001208691071](figures/zh-cn_image_0000001208691071.gif) +![zh-cn_image_0000001189248178](figures/zh-cn_image_0000001189248178.gif) > ![icon-note.gif](public_sys-resources/icon-note.gif) **说明：** > - 该方法在Input类型为text、email、date、time、number和password时生效。 @@ -306,4 +306,4 @@ export default { ``` -![zh-cn_image_0000001162586456](figures/zh-cn_image_0000001162586456.gif) +![zh-cn_image_0000001188771358](figures/zh-cn_image_0000001188771358.gif) diff --git a/zh-cn/application-dev/ui/ui-js-components-list.md b/zh-cn/application-dev/ui/ui-js-components-list.md index b350516343fff024e4ba98969719aab588f1afb4..c0bc55579ab778df91329c6cfcc1ba586aba0f03 100644 --- a/zh-cn/application-dev/ui/ui-js-components-list.md +++ b/zh-cn/application-dev/ui/ui-js-components-list.md @@ -8,7 +8,14 @@ List是用来显示列表的组件，包含一系列相同宽度的列表项， 在pages/index目录下的hml文件中创建一个List组件。 ``` -
+ +
+ + + + + +
``` ``` @@ -38,7 +45,17 @@ List是用来显示列表的组件，包含一系列相同宽度的列表项， 设置scrollbar属性为on即可在屏幕右侧生成滚动条，实现长列表或者屏幕滚动等效果。 ``` -
+ +
+ + + + + + + + +
``` ``` @@ -67,13 +84,25 @@ List是用来显示列表的组件，包含一系列相同宽度的列表项， 设置indexer属性为自定义索引时，索引栏会显示在列表右边界处，indexer属性设置为true,默认为字母索引表。 ``` -
+ +
+ + + +
``` ``` -/* index.css */.container{ flex-direction: column; +/* index.css */ +.container{ + flex-direction: column; background-color: #F1F3F5; - } .listCss{ height: 100%; flex-direction: column; columns: 1} + } +.listCss{ + height: 100%; + flex-direction: column; + columns: 1 +} ``` ![zh-cn_image_0000001166432552](figures/zh-cn_image_0000001166432552.png) @@ -167,16 +196,11 @@ export default { ## 场景示例 - 在本场景中，开发者可以根据字母索引表查找对应联系人。 ``` -``` - - -```
Contacts @@ -276,4 +300,4 @@ export default { ``` -![zh-cn_image_0000001208693047](figures/zh-cn_image_0000001208693047.gif) +![zh-cn_image_0000001234287779](figures/zh-cn_image_0000001234287779.gif) diff --git a/zh-cn/application-dev/ui/ui-js-components-picker.md b/zh-cn/application-dev/ui/ui-js-components-picker.md index 04f2b0711bb2558d8e8be422d21360678bdf83d6..47037d75d91308a780692b2eb6da4d9f5fd942ad 100644 --- a/zh-cn/application-dev/ui/ui-js-components-picker.md +++ b/zh-cn/application-dev/ui/ui-js-components-picker.md @@ -48,7 +48,7 @@ Picker是滑动选择器组件，类型支持普通选择器、日期选择器 background-color: #F1F3F5; } .pickertext{ - margin-bottom: 30px; + margin-bottom: 30px; } ``` @@ -63,7 +63,7 @@ export default { } ``` -![zh-cn_image_0000001163515416](figures/zh-cn_image_0000001163515416.gif) +![zh-cn_image_0000001189098638](figures/zh-cn_image_0000001189098638.gif) > ![icon-note.gif](public_sys-resources/icon-note.gif) **说明：** > - 普通选择器设置取值范围时，需要使用数据绑定的方式。 @@ -98,7 +98,7 @@ Picker的hours属性定义时间的展现格式，可选类型有12小时制和2 } ``` -![zh-cn_image_0000001163212630](figures/zh-cn_image_0000001163212630.gif) +![zh-cn_image_0000001234327855](figures/zh-cn_image_0000001234327855.gif) > ![icon-note.gif](public_sys-resources/icon-note.gif) **说明：** > - hours属性为12：按照12小时制显示，用上午和下午进行区分； @@ -154,7 +154,7 @@ export default { } ``` -![zh-cn_image_0000001163372620](figures/zh-cn_image_0000001163372620.gif) +![zh-cn_image_0000001234009343](figures/zh-cn_image_0000001234009343.gif) ## 场景示例 @@ -188,7 +188,7 @@ export default {
- +
``` @@ -272,11 +272,9 @@ export default { this.build = e.newValue }, dateonchange(e) { + e.month=e.month+1; this.datevalue = e.year + "-" + e.month + "-" + e.day; - pmt.showToast({ message:"date:"+e.year+"-"+e.month+"-"+e.day }) }, - datetimeonchange(e) { - this.datetimevalue=e.year+"-"+e.month+"-"+e.day+" "+e.hour+":"+e.minute; - pmt.showToast({ message:"Time:"+e.month+"-"+e.day+" "+e.hour+":"+e.minute }) + pmt.showToast({ message:"date:"+e.year+"-"+e.month+"-"+e.day }) }, showtoast() { pmt.showToast({ @@ -289,4 +287,4 @@ export default { ``` -![zh-cn_image_0000001208703849](figures/zh-cn_image_0000001208703849.gif) +![zh-cn_image_0000001234342189](figures/zh-cn_image_0000001234342189.gif) diff --git a/zh-cn/application-dev/ui/ui-js-components-stepper.md b/zh-cn/application-dev/ui/ui-js-components-stepper.md index 45fb31f3c9d67820c7cdc59291bb3a94e407eb0c..22479506c1f62bb740356386eaa4ef374e1ad704 100644 --- a/zh-cn/application-dev/ui/ui-js-components-stepper.md +++ b/zh-cn/application-dev/ui/ui-js-components-stepper.md @@ -12,7 +12,16 @@ 在pages/index目录下的hml文件中创建一个Stepper组件。 ``` -
Step 1 Step 2
+ +
+ + Step 1 + + + Step 2 + + +
``` ``` @@ -30,7 +39,7 @@ text{ } ``` -![zh-cn_image_0000001210951235](figures/zh-cn_image_0000001210951235.gif) +![zh-cn_image_0000001234289455](figures/zh-cn_image_0000001234289455.gif) ## 设置index属性 @@ -38,7 +47,20 @@ text{ 页面默认显示索引值为index的步骤。 ``` -
stepper-item1 stepper-item2 stepper-item3
+ +
+ + + stepper-item1 + + + stepper-item2 + + + stepper-item3 + + +
``` ``` @@ -54,12 +76,28 @@ text{ } ``` -![zh-cn_image_0000001208892613](figures/zh-cn_image_0000001208892613.gif) +![zh-cn_image_0000001234011019](figures/zh-cn_image_0000001234011019.gif) 通过设置label属性，自定义stepper-item的提示按钮。 ``` -
stepper-item1 stepper-item2 stepper-item3 stepper-item4
+ +
+ + + stepper-item1 + + + stepper-item2 + + + stepper-item3 + + + stepper-item4 + + +
``` ``` @@ -101,9 +139,14 @@ export default { Stepper组件默认填充父容器，通过border和background-color设置边框、背景色。 ``` -
+ +
- stepper-item1 + + + stepper-item1 + +
``` @@ -130,7 +173,7 @@ text{ } ``` -![zh-cn_image_0000001163691154](figures/zh-cn_image_0000001163691154.png) +![zh-cn_image_0000001234130975](figures/zh-cn_image_0000001234130975.png) ## 添加事件 @@ -229,7 +272,7 @@ export default { } ``` -![zh-cn_image_0000001163547244](figures/zh-cn_image_0000001163547244.gif) +![zh-cn_image_0000001189089950](figures/zh-cn_image_0000001189089950.gif) ## 场景示例 @@ -340,4 +383,4 @@ export default { } ``` -![zh-cn_image_0000001163214740](figures/zh-cn_image_0000001163214740.gif) +![zh-cn_image_0000001189249862](figures/zh-cn_image_0000001189249862.gif) diff --git a/zh-cn/application-dev/ui/ui-js-components-text.md b/zh-cn/application-dev/ui/ui-js-components-text.md index dd8a490a7f546f7bdb42a745efcbac07e68989c9..ed62fcf89144793cd7eba5b4baf44c2803e67c9b 100644 --- a/zh-cn/application-dev/ui/ui-js-components-text.md +++ b/zh-cn/application-dev/ui/ui-js-components-text.md @@ -17,6 +17,8 @@ Text是文本组件，用于呈现一段文本信息。具体用法请参考[Tex ``` /* xxx.css */ .container { + width: 100%; + height: 100%; flex-direction: column; align-items: center; justify-content: center; @@ -32,7 +34,7 @@ Text是文本组件，用于呈现一段文本信息。具体用法请参考[Tex - 添加文本样式 -设置color、font-size、allow-scale、word-spacing、text-valign属性分别为文本添加颜色、大小、和缩放、文本之间的间距和文本在垂直方向的对齐方式。 +设置color、font-size、allow-scale、word-spacing、text-valign属性分别为文本添加颜色、大小、缩放、文本之间的间距和文本在垂直方向的对齐方式。 ``` @@ -41,15 +43,27 @@ Text是文本组件，用于呈现一段文本信息。具体用法请参考[Tex This is a passage - This is a passage + + This is a passage +
``` -![zh-cn_image_0000001163489068](figures/zh-cn_image_0000001163489068.png) +``` +/* xxx.css */ +.container { + width: 100%; + height: 100%; + flex-direction: column; + align-items: center; + justify-content: center; + background-color: #F1F3F5; +} +``` -![zh-cn_image_0000001173950938](figures/zh-cn_image_0000001173950938.png) +![zh-cn_image_0000001220778205](figures/zh-cn_image_0000001220778205.png) - 添加划线 @@ -74,20 +88,19 @@ Text是文本组件，用于呈现一段文本信息。具体用法请参考[Tex ``` /* xxx.css */ .container { + width: 100%; + height: 100%; flex-direction: column; align-items: center; justify-content: center; } text{ -font-size: 50px; + font-size: 50px; } ``` -![zh-cn_image_0000001208975737](figures/zh-cn_image_0000001208975737.png) - - -![zh-cn_image_0000001219237131](figures/zh-cn_image_0000001219237131.png) +![zh-cn_image_0000001220856725](figures/zh-cn_image_0000001220856725.png) - 隐藏文本内容 @@ -109,6 +122,8 @@ font-size: 50px; ``` /* xxx.css */ .container { + width: 100%; + height: 100%; flex-direction: column; align-items: center; background-color: #F1F3F5; diff --git a/zh-cn/application-dev/ui/ui-js-custom-components.md b/zh-cn/application-dev/ui/ui-js-custom-components.md index fe36a56756f2c968147204321b16a472321efa11..2a81303e8141fdc82f8f42d2055b25edc37adef9 100755 --- a/zh-cn/application-dev/ui/ui-js-custom-components.md +++ b/zh-cn/application-dev/ui/ui-js-custom-components.md @@ -23,7 +23,7 @@ margin-top: 100px; } .text-style { - width: 100%; + width: 100%; text-align: center; font-weight: 500; font-family: Courier; @@ -83,7 +83,7 @@ export default { data: { text: '开始', - isShow: false, + isShow: false, }, textClicked (e) { this.text = e.detail.text; diff --git a/zh-cn/application-dev/ui/ui-js-overview.md b/zh-cn/application-dev/ui/ui-js-overview.md index 779d51af65eb802e42edf405376ec1256d216270..d05d00849d10551a7819812adaabb4156205df9a 100755 --- a/zh-cn/application-dev/ui/ui-js-overview.md +++ b/zh-cn/application-dev/ui/ui-js-overview.md @@ -1,6 +1,6 @@ # 概述 -方舟开发框架是OpenHarmony UI开发框架，提供基础类、容器类、画布类等UI组件和标准CSS动画能力，支持类Web范式编程。 +基于JS扩展的类Web开发范式的方舟开发框架是OpenHarmony UI开发框架，提供基础类、容器类、画布类等UI组件和标准CSS动画能力，支持类Web范式编程。 ## 基础能力 @@ -11,8 +11,6 @@ ## 整体架构 -方舟开发框架提供两种开发范式：基于JS扩展的类Web开发范式、基于TS扩展的声明式开发范式。 - 使用基于JS扩展的类Web开发范式的方舟开发框架，包括应用层（Application）、前端框架层（Framework）、引擎层（Engine）和平台适配层（Porting Layer）。 diff --git a/zh-cn/application-dev/ui/ui-ts-building-category-grid-layout.md b/zh-cn/application-dev/ui/ui-ts-building-category-grid-layout.md index 7ee81eafcea7c313ebc71ba00fbea32b9cd6e47c..876ab9c8f4d4915b10e0e8f84f9f0c69c4c05c05 100644 --- a/zh-cn/application-dev/ui/ui-ts-building-category-grid-layout.md +++ b/zh-cn/application-dev/ui/ui-ts-building-category-grid-layout.md @@ -1,5 +1,7 @@ # 构建食物分类Grid布局 + + 健康饮食应用在主页提供给用户两种食物显示方式：列表显示和网格显示。开发者将实现通过页签切换不同食物分类的网格布局。 @@ -279,7 +281,7 @@ ``` 11. 设置不同食物分类的Grid的行数和高度。因为不同分类的食物数量不同，所以不能用'1fr 1fr 1fr 1fr 1fr 1fr '常量来统一设置成6行。 - 创建gridRowTemplate和HeightValue成员变量，通过成员变量设置Grid行数和高度。 + 创建gridRowTemplate和HeightValue成员变量，通过成员变量设置Grid行数和高度。 ``` @Component diff --git a/zh-cn/application-dev/ui/ui-ts-building-category-list-layout.md b/zh-cn/application-dev/ui/ui-ts-building-category-list-layout.md index d954bb60cb6232f806e272c946f5ee664546a59e..8a75c1334e56cabf94fc1879814ab70adc6be9f3 100644 --- a/zh-cn/application-dev/ui/ui-ts-building-category-list-layout.md +++ b/zh-cn/application-dev/ui/ui-ts-building-category-list-layout.md @@ -1,5 +1,7 @@ # 构建食物列表List布局 + + 使用List组件和ForEach循环渲染，构建食物列表布局。 diff --git a/zh-cn/application-dev/ui/ui-ts-components.md b/zh-cn/application-dev/ui/ui-ts-components.md index f46cb78e8d8ec586252bea94e1f736b762c45175..a255554228a44cd2188e02c9aff0c1a9f27cbfa2 100644 --- a/zh-cn/application-dev/ui/ui-ts-components.md +++ b/zh-cn/application-dev/ui/ui-ts-components.md @@ -5,7 +5,7 @@ ## 组件和装饰器 -在声明式UI中，所有的页面都是由组件构成。组件的数据结构为struct，装饰器[@Component](../reference/arkui-ts/ts-component-based-component.md)是组件化的标志。用@Component修饰的struct表示这个结构体有了组件化的能力。 +在声明式UI中，所有的页面都是由组件构成。组件的数据结构为struct，装饰器[@Component](../ui/ts-component-based-component.md)是组件化的标志。用@Component修饰的struct表示这个结构体有了组件化的能力。 自定义组件的声明方式为： @@ -22,7 +22,7 @@ interface Builder { } ``` -[@Entry](../reference/arkui-ts/ts-component-based-entry.md)修饰的Component表示该Component是页面的总入口，也可以理解为页面的根节点。值得注意的是，一个页面有且仅能有一个@Entry，只有被@Entry修饰的组件或者其子组件，才会在页面上显示。 +[@Entry](../ui/ts-component-based-entry.md)修饰的Component表示该Component是页面的总入口，也可以理解为页面的根节点。值得注意的是，一个页面有且仅能有一个@Entry，只有被@Entry修饰的组件或者其子组件，才会在页面上显示。 @Component和@Entry都是基础且十分重要的装饰器。简单地理解，装饰器就是某一种修饰，给被装饰的对象赋予某一种能力，比如@Entry就是页面入口的能力，@Component就是组件化能力。 diff --git a/zh-cn/application-dev/ui/ui-ts-creating-project.md b/zh-cn/application-dev/ui/ui-ts-creating-project.md index df4ffbf86b46e2f46809f2f48106976e148d117c..d4c342e6bfab1988843ad21bb40b52618dc62310 100644 --- a/zh-cn/application-dev/ui/ui-ts-creating-project.md +++ b/zh-cn/application-dev/ui/ui-ts-creating-project.md @@ -1,23 +1,25 @@ # 创建声明式UI工程 -创建工程之前，首先需要安装DevEco Studio，[下载安装教程](https://gitee.com/openharmony/docs/blob/master/zh-cn/application-dev/quick-start/deveco-studio-overview.md)。 -1. 打开DevEco Studio，点击Create Project。如果已有一个工程，则点击File>New>New project。 +创建工程之前，首先需要安装DevEco Studio，[下载安装教程](https://developer.harmonyos.com/cn/docs/documentation/doc-guides/tools_overview-0000001053582387)。 + + +1. 打开DevEco Studio，点击Create Project。如果已有一个工程，则点击File > New > New project。 ![zh-cn_image_0000001168956332](figures/zh-cn_image_0000001168956332.png) 2. - 进入选择ability template界面，选择[Standard]Empty Ability。 + 进入选择ability template界面，选择[Standard]Empty Ability。 ![zh-cn_image_0000001168059158](figures/zh-cn_image_0000001168059158.png) 3. - 安装OpenHarmony sdk + 安装OpenHarmony SDK。 ![zh-cn_image_0000001213462329](figures/zh-cn_image_0000001213462329.png) 4. 进入配置工程界面，将工程名字改为HealthyDiet，Project Type选择Application，Device Type选择Phone，Language选择eTS，选择兼容API Version 7。DevEco Studio会默认将工程保存在C盘，如果要更改工程保存位置，点击Save Location的文件夹图标，自行指定工程创建位置。配置完成后点击Finish。 - + ![zh-cn_image_0000001167746622](figures/zh-cn_image_0000001167746622.png) @@ -59,6 +61,6 @@ 8. 应用安装到手机上运行应用。将手机连接电脑，等IDE识别到物理设备后，点击Run 'entry'按钮。 ![zh-cn_image_0000001148858818](figures/zh-cn_image_0000001148858818.png) - 在安装之前，需要[配置应用签名](https://gitee.com/openharmony/docs/blob/master/zh-cn/application-dev/quick-start/configuring-openharmony-app-signature.md)，安装成功后，点击屏幕上的Run图标打开应用，可以看到居中加粗显示的“Hello World”。 + 在安装之前，需要配置应用签名，[配置应用签名教程](https://gitee.com/openharmony/docs/blob/master/zh-cn/application-dev/quick-start/configuring-openharmony-app-signature.md)。安装成功后，点击屏幕上的Run图标打开应用，可以看到居中加粗显示的“Hello World”。 ![zh-cn_image_0000001158896538](figures/zh-cn_image_0000001158896538.png) diff --git a/zh-cn/application-dev/ui/ui-ts-developing-intro.md b/zh-cn/application-dev/ui/ui-ts-developing-intro.md deleted file mode 100644 index 5ed7b9600a31b2889020defa5fd1d530bcc1af21..0000000000000000000000000000000000000000 --- a/zh-cn/application-dev/ui/ui-ts-developing-intro.md +++ /dev/null @@ -1,15 +0,0 @@ -# 开发说明 - -本指导将从以下三个部分介绍构建健康饮食应用，其主要功能为查看食物的营养信息。具体信息如下： - - -1. Food Detail：[构建食物基本信息页面](../ui/ui-ts-creating-simple-page.md)。 - -2. Food Category/List：[构建食物列表和分类展示页面](../ui/ui-ts-building-data-model.md)。 - - - -从工程创建，构建普通视图开始，逐步学习学习组件、布局、动效和数据状态管理，在了解到这些知识后，开发者将有能力自主设计和开发应用。简单的学习成本，功能完备的UI开发，我们现在就开始吧。 - - -![zh-cn_image_0000001169852428](figures/zh-cn_image_0000001169852428.png) diff --git a/zh-cn/application-dev/ui/ui-ts-experiencing-declarative--u.md b/zh-cn/application-dev/ui/ui-ts-experiencing-declarative-ui.md similarity index 68% rename from zh-cn/application-dev/ui/ui-ts-experiencing-declarative--u.md rename to zh-cn/application-dev/ui/ui-ts-experiencing-declarative-ui.md index dfabcc644cab28a592efe18f3f406d5345a9c3cd..7f1b0e9cb5b25f001c70f32826c7ce9071fc3942 100644 --- a/zh-cn/application-dev/ui/ui-ts-experiencing-declarative--u.md +++ b/zh-cn/application-dev/ui/ui-ts-experiencing-declarative-ui.md @@ -1,6 +1,7 @@ # 体验声明式UI + - **[创建声明式UI工程](ui-ts-creating-project.md)** - **[初识Component](ui-ts-components.md)** diff --git a/zh-cn/application-dev/ui/ui-ts-page-layout-connections.md b/zh-cn/application-dev/ui/ui-ts-page-layout-connections.md index 48fdec658a6ef1271f586d1c3784c9b43c500ecd..e6ae22c492f3f879da925ca4239f75b09b8f74de 100644 --- a/zh-cn/application-dev/ui/ui-ts-page-layout-connections.md +++ b/zh-cn/application-dev/ui/ui-ts-page-layout-connections.md @@ -1,6 +1,7 @@ # 页面布局与连接 + - **[构建食物数据模型](ui-ts-building-data-model.md)** - **[构建食物列表List布局](ui-ts-building-category-list-layout.md)** diff --git a/zh-cn/application-dev/usb/Readme-CN.md b/zh-cn/application-dev/usb/Readme-CN.md new file mode 100644 index 0000000000000000000000000000000000000000..0c28cb672f6f602e7b501ef151d1e2572bf59d4c --- /dev/null +++ b/zh-cn/application-dev/usb/Readme-CN.md @@ -0,0 +1,4 @@ +# USB服务 + +- [USB服务开发概述](usb-overview.md) +- [USB服务开发指导](usb-guidelines.md) diff --git a/zh-cn/application-dev/usb/figures/zh-cn_image_0000001237821139.png b/zh-cn/application-dev/usb/figures/zh-cn_image_0000001237821139.png new file mode 100644 index 0000000000000000000000000000000000000000..ef4ec1e743d7d87deb79114c696452465cf645cb Binary files /dev/null and b/zh-cn/application-dev/usb/figures/zh-cn_image_0000001237821139.png differ diff --git a/zh-cn/application-dev/usb/figures/zh-cn_image_0000001237821727.png b/zh-cn/application-dev/usb/figures/zh-cn_image_0000001237821727.png new file mode 100644 index 0000000000000000000000000000000000000000..b5bc068e8edca56fafa47648f6db797120d71fad Binary files /dev/null and b/zh-cn/application-dev/usb/figures/zh-cn_image_0000001237821727.png differ diff --git a/zh-cn/application-dev/usb/public_sys-resources/icon-caution.gif b/zh-cn/application-dev/usb/public_sys-resources/icon-caution.gif new file mode 100644 index 0000000000000000000000000000000000000000..6e90d7cfc2193e39e10bb58c38d01a23f045d571 Binary files /dev/null and b/zh-cn/application-dev/usb/public_sys-resources/icon-caution.gif differ diff --git a/zh-cn/application-dev/usb/public_sys-resources/icon-danger.gif b/zh-cn/application-dev/usb/public_sys-resources/icon-danger.gif new file mode 100644 index 0000000000000000000000000000000000000000..6e90d7cfc2193e39e10bb58c38d01a23f045d571 Binary files /dev/null and b/zh-cn/application-dev/usb/public_sys-resources/icon-danger.gif differ diff --git a/zh-cn/application-dev/usb/public_sys-resources/icon-note.gif b/zh-cn/application-dev/usb/public_sys-resources/icon-note.gif new file mode 100644 index 0000000000000000000000000000000000000000..6314297e45c1de184204098efd4814d6dc8b1cda Binary files /dev/null and b/zh-cn/application-dev/usb/public_sys-resources/icon-note.gif differ diff --git a/zh-cn/application-dev/usb/public_sys-resources/icon-notice.gif b/zh-cn/application-dev/usb/public_sys-resources/icon-notice.gif new file mode 100644 index 0000000000000000000000000000000000000000..86024f61b691400bea99e5b1f506d9d9aef36e27 Binary files /dev/null and b/zh-cn/application-dev/usb/public_sys-resources/icon-notice.gif differ diff --git a/zh-cn/application-dev/usb/public_sys-resources/icon-tip.gif b/zh-cn/application-dev/usb/public_sys-resources/icon-tip.gif new file mode 100644 index 0000000000000000000000000000000000000000..93aa72053b510e456b149f36a0972703ea9999b7 Binary files /dev/null and b/zh-cn/application-dev/usb/public_sys-resources/icon-tip.gif differ diff --git a/zh-cn/application-dev/usb/public_sys-resources/icon-warning.gif b/zh-cn/application-dev/usb/public_sys-resources/icon-warning.gif new file mode 100644 index 0000000000000000000000000000000000000000..6e90d7cfc2193e39e10bb58c38d01a23f045d571 Binary files /dev/null and b/zh-cn/application-dev/usb/public_sys-resources/icon-warning.gif differ diff --git a/zh-cn/application-dev/usb/usb-guidelines.md b/zh-cn/application-dev/usb/usb-guidelines.md new file mode 100644 index 0000000000000000000000000000000000000000..09086633f964a24af4b068491eece08591d6b778 --- /dev/null +++ b/zh-cn/application-dev/usb/usb-guidelines.md @@ -0,0 +1,155 @@ +# USB服务开发指导 + + + +## 场景介绍 + +Host模式下，可以获取到已经连接的设备列表，并根据需要打开和关闭设备、控制设备权限、进行数据传输等。 + + +## 接口说明 + +OpenHarmony USB服务主要提供的功能有：查询USB设备列表、批量数据传输、控制命令传输、权限控制等。 + +USB类开放能力如下，具体请查阅API参考文档。 + +**表1** USB类的开放能力接口 + +| 接口名 | 描述 | +| -------- | -------- | +| hasRight(deviceName: string): boolean | 如果“使用者”（如各种App或系统）有权访问设备则返回true；无权访问设备则返回false。 | +| requestRight(deviceName: string): Promise<boolean> | 请求给定软件包的临时权限以访问设备。 | +| connectDevice(device: USBDevice): Readonly<USBDevicePipe> | 根据getDevices()返回的设备信息打开USB设备。 | +| getDevices(): Array<Readonly<USBDevice>> | 返回USB设备的列表。 | +| setConfiguration(pipe: USBDevicePipe, config: USBConfig): number | 设置设备的配置。 | +| setInterface(pipe: USBDevicePipe, iface: USBInterface): number | 设置设备的接口。 | +| claimInterface(pipe: USBDevicePipe, iface: USBInterface, force?: boolean): number | 获取接口。 | +| function bulkTransfer(pipe: USBDevicePipe, endpoint: USBEndpoint, buffer: Uint8Array, timeout?: number): Promise<number> | 批量传输。 | +| closePipe(pipe: USBDevicePipe): number | 关闭设备消息控制通道。 | +| releaseInterface(pipe: USBDevicePipe, iface: USBInterface): number | 释放接口。 | +| getFileDescriptor(pipe: USBDevicePipe): number | 获取文件描述符。 | +| getRawDescriptor(pipe: USBDevicePipe): Uint8Array | 获取原始的USB描述符。 | +| controlTransfer(pipe: USBDevicePipe, contrlparam: USBControlParams, timeout?: number): Promise<number> | 控制传输。 | + + +## 开发步骤 + +USB设备可作为Host设备连接Device设备进行数据传输。开发示例如下： + + +1. 获取设备列表。 + ``` + // 导入usb接口api包。 + import usb from '@ohos.usb'; + // 获取设备列表。 + var deviceList = usb.getDevices(); + /* + deviceList结构示例 + [ + { + name: "1-1", + serial: "", + manufacturerName: "", + productName: "", + version: "", + vendorId: 7531, + productId: 2, + clazz: 9, + subclass: 0, + protocol: 1, + devAddress: 1, + busNum: 1, + configs: [ + { + id: 1, + attributes: 224, + isRemoteWakeup: true, + isSelfPowered: true, + maxPower: 0, + name: "1-1", + interfaces: [ + { + id: 0, + protocol: 0, + clazz: 9, + subclass: 0, + alternateSetting: 0, + name: "1-1", + endpoints: [ + { + address: 129, + attributes: 3, + interval: 12, + maxPacketSize: 4, + direction: 128, + number: 1, + type: 3, + interfaceId: 0, + }, + ], + }, + ], + }, + ], + }, + ], + */ + ``` + +2. 获取设备操作权限。 + ``` + var deviceName = deviceList[0].name; + // 申请操作指定的device的操作权限。 + usb.requestRight(deviceName).then(hasRight => { + console.info("usb device request right result: " + hasRight); + }).catch(error => { + console.info("usb device request right failed : " + error); + }); + ``` + +3. 打开Device设备。 + ``` + // 打开设备，获取数据传输通道。 + var pipe = usb.connectDevice(deviceList[0]); + /* + 打开对应接口，在设备信息（deviceList）中选取对应的interface。 + interface为设备配置中的一个接口。 + */ + usb.claimInterface(pipe , interface, true); + ``` + +4. 数据传输。 + ``` + /* + 读取数据，在device信息中选取对应数据接收的endpoint来做数据传输 + （endpoint.direction == 0x80）；dataUint8Array是要读取的数据，类型为Uint8Array。 + */ + + usb.bulkTransfer(pipe, inEndpoint, dataUint8Array, 15000).then(dataLength => { + if (dataLength >= 0) { + console.info("usb readData result Length : " + dataLength); + var resultStr = this.ab2str(dataUint8Array); // uint8数据转string。 + console.info("usb readData buffer : " + resultStr); + } else { + console.info("usb readData failed : " + dataLength); + } + }).catch(error => { + console.info("usb readData error : " + JSON.stringify(error)); + }); + // 发送数据，在device信息中选取对应数据发送的endpoint来做数据传输。（endpoint.direction == 0） + usb.bulkTransfer(pipe, endpoint, dataUint8Array, 15000).then(dataLength => { + if (dataLength >= 0) { + console.info("usb writeData result write length : " + dataLength); + } else { + console.info("writeData failed"); + } + }).catch(error => { + console.info("usb writeData error : " + JSON.stringify(error)); + }); + ``` + +5. 释放接口，关闭设备。 + ``` + usb.releaseInterface(pipe, interface); + usb.closePipe(pipe); + ``` diff --git a/zh-cn/application-dev/usb/usb-overview.md b/zh-cn/application-dev/usb/usb-overview.md new file mode 100644 index 0000000000000000000000000000000000000000..df98211a9bde74f0c23c291c8e286ac999c97ea3 --- /dev/null +++ b/zh-cn/application-dev/usb/usb-overview.md @@ -0,0 +1,20 @@ +# USB服务开发概述 + +## 基本概念 + +OpenHarmony USB服务是应用访问底层的一种设备抽象概念。开发者根据提供的USB API，可以获取设备列表、控制设备访问权限、以及与连接的设备进行数据传输、控制命令传输等。 + + +## 运作机制 + +OpenHarmony USB服务系统包含USB API、USB Service、USB HAL。 + +**图2** USB服务运作机制 + +![zh-cn_image_0000001237821727](figures/zh-cn_image_0000001237821727.png) + +- USB API：提供USB的基础API，主要包含查询USB设备列表、批量数据传输、控制命令传输、权限控制等。 + +- USB Service：主要实现HAL层数据的接收、解析、分发，前后台的策略管控以及对设备的管理等。 + +- USB HAL层：提供给用户态可直接调用的驱动能力接口。

名称

描述

+

描述

Down

+

Down

手指按下时触发。

+

手指按下时触发。

Up

+

Up

手指抬起时触发。

+

手指抬起时触发。

Move

+

Move

手指按压态在屏幕上移动时触发。

+

手指按压态在屏幕上移动时触发。

Cancel

+

Cancel

触摸事件取消时触发。

+

触摸事件取消时触发。