Skip to content

D
Docs

OpenHarmony / Docs
1 年多 前同步成功

通知 159
Star 292
Fork 28
D
Docs
提交 fc86495c 编写于 作者: 冯 冯泽悟 提交者： Gitee
浏览文件
操作

Merge branch 'master' of gitee.com:openharmony/docs into master 

Signed-off-by: N冯泽悟 <fengzewu@huawei.com>
上级 ef8ba740 579b4cb4
显示空白变更内容
内联 并排
Showing with 450 addition and 285 deletion
en/application-dev/device-usage-statistics/device-usage-statistics-dev-guide.md
浏览文件 @ fc86495c
......@@ -22,15 +22,16 @@ import stats from '@ohos.bundleState';
| function queryAppUsagePriorityGroup(callback: AsyncCallback&lt;number&gt;): void | Queries the priority group of this application. This API uses an asynchronous callback to return the result.|
| function queryAppUsagePriorityGroup(): Promise&lt;number&gt;; | Queries the priority group of this application. This API uses a promise to return the result.|
| function isIdleState(bundleName: string, callback: AsyncCallback&lt;boolean&gt;): void | Checks whether the application specified by **bundleName** is in the idle state. |
| function getRecentlyUsedModules(maxNum? : number, callback: AsyncCallback&lt;BundleActiveModuleInfo&gt;): void | Obtains the number of FA usage records specified by **maxNum**. If **maxNum** is not specified, the default value **1000** is used.|
| function getRecentlyUsedModules(callback: AsyncCallback&lt;BundleActiveModuleInfo&gt;): void | Obtains the number of FA usage records specified by **1000**.|
| function getRecentlyUsedModules(maxNum: number, callback: AsyncCallback&lt;BundleActiveModuleInfo&gt;): void | Obtains the number of FA usage records specified by **maxNum**.|
| function queryAppNotificationNumber(begin: number, end: number, callback: AsyncCallback&lt;Array&lt;BundleActiveEventState&gt;&gt;): void | Queries the number of notifications from all applications based on the specified start time and end time.|
| function queryBundleActiveEventStates(begin: number, end: number, callback: AsyncCallback&lt;Array&lt;BundleActiveEventState&gt;&gt;): void | Queries statistics about system events (hibernation, wakeup, unlocking, and screen locking) that occur between the specified start time and end time.|
| function queryAppUsagePriorityGroup(bundleName? : string, callback: AsyncCallback&lt;number&gt;): void | Queries the priority group of the application specified by **bundleName**. If **bundleName** is not specified, the priority group of the current application is queried. This API uses an asynchronous callback to return the result.|
| function queryAppUsagePriorityGroup(bundleName : string, callback: AsyncCallback&lt;number&gt;): void | Queries the priority group of the application specified by **bundleName**. This API uses an asynchronous callback to return the result.|
| function queryAppUsagePriorityGroup(bundleName? : string): Promise&lt;number&gt;; | Queries the priority group of the application specified by **bundleName**. If **bundleName** is not specified, the priority group of the current application is queried. This API uses a promise to return the result.|
| function setBundleGroup(bundleName : string, newGroup: GroupType, callback: AsyncCallback&gt;boolean&gt;): void | Sets the group for the application specified by **bundleName**. This API uses an asynchronous callback to return the result.|
| function setBundleGroup(bundleName : string, newGroup : GroupType): Promise&gt;boolean&gt;; | Sets the group for the application specified by **bundleName**. This API uses a promise to return the result.|
| function registerGroupCallBack(callback: Callback&gt;BundleActiveGroupCallbackInfo&gt;, callback: AsyncCallback&gt;boolean&gt;): void | Registers a callback for application group changes. When an application group of the user changes, the change is returned to all applications that have registered the callback. This API uses an asynchronous callback to return the result.|
| function registerGroupCallBack(callback: Callback&gt;BundleActiveGroupCallbackInfo&gt;): Promise&gt;boolean&gt;; | Registers a callback for application group changes. When an application group of the user changes, the change is returned to all applications that have registered the callback. This API uses a promise to return the result.|
| function registerGroupCallBack(groupCallback: Callback&gt;BundleActiveGroupCallbackInfo&gt;, callback: AsyncCallback&gt;boolean&gt;): void | Registers a callback for application group changes. When an application group of the user changes, the change is returned to all applications that have registered the callback. This API uses an asynchronous callback to return the result.|
| function registerGroupCallBack(groupCallback: Callback&gt;BundleActiveGroupCallbackInfo&gt;): Promise&gt;boolean&gt;; | Registers a callback for application group changes. When an application group of the user changes, the change is returned to all applications that have registered the callback. This API uses a promise to return the result.|
| function unRegisterGroupCallBack(callback: AsyncCallback&gt;boolean&gt;): void | Deregisters the callback for application group changes. This API uses an asynchronous callback to return the result.|
| function unRegisterGroupCallBack(): Promise&gt;boolean&gt;; | Deregisters the callback for application group changes. This API uses a promise to return the result.|
......
en/application-dev/reference/apis/js-apis-deviceUsageStatistics.md
浏览文件 @ fc86495c
......@@ -484,9 +484,9 @@ Obtains the number of FA usage records specified by **maxNum**. This API uses a
## bundleState.getRecentlyUsedModules<sup>9+</sup>
getRecentlyUsedModules(maxNum?: number, callback: AsyncCallback&lt;Array&lt;BundleActiveModuleInfo&gt;&gt;): void
getRecentlyUsedModules(callback: AsyncCallback&lt;Array&lt;BundleActiveModuleInfo&gt;&gt;): void
Obtains the number of FA usage records specified by **maxNum**. This API uses an asynchronous callback to return the records sorted by time (most recent first).
This API uses an asynchronous callback to return at most 1000 records sorted by time (most recent first).
**Required permissions**: ohos.permission.BUNDLE_ACTIVE_INFO
......@@ -498,13 +498,12 @@ Obtains the number of FA usage records specified by **maxNum**. This API uses an
| Name | Type | Mandatory | Description |
| -------- | ---------------------------------------- | ---- | ----------------------------------- |
| maxNum | number | No | Maximum number of returned records. The maximum and default value is **1000**. If this parameter is not specified, **1000** is used. |
| callback | AsyncCallback&lt;Array&lt;[BundleActiveModuleInfo](#bundleactivemoduleinfo9)&gt;&gt; | Yes | Callback used to return the result.|
**Example**
```js
bundleState.getRecentlyUsedModules(1000,(err, res) => {
bundleState.getRecentlyUsedModules((err, res) => {
if(err) {
console.log('BUNDLE_ACTIVE getRecentlyUsedModules callback failed, because: ' + err.code);
} else {
......@@ -515,9 +514,31 @@ Obtains the number of FA usage records specified by **maxNum**. This API uses an
}
}
});
```
// Invocation when maxNum is not passed
bundleState.getRecentlyUsedModules((err, res) => {
## bundleState.getRecentlyUsedModules<sup>9+</sup>
getRecentlyUsedModules(maxNum: number, callback: AsyncCallback&lt;Array&lt;BundleActiveModuleInfo&gt;&gt;): void
Obtains the number of FA usage records specified by **maxNum**. This API uses an asynchronous callback to return the records sorted by time (most recent first).
**Required permissions**: ohos.permission.BUNDLE_ACTIVE_INFO
**System capability**: SystemCapability.ResourceSchedule.UsageStatistics.App
**System API**: This is a system API and cannot be called by third-party applications.
**Parameters**
| Name | Type | Mandatory | Description |
| -------- | ---------------------------------------- | ---- | ----------------------------------- |
| maxNum | number | Yes | Maximum number of returned records. The maximum and default value is **1000**.|
| callback | AsyncCallback&lt;Array&lt;[BundleActiveModuleInfo](#bundleactivemoduleinfo9)&gt;&gt; | Yes | Callback used to return the result.|
**Example**
```js
bundleState.getRecentlyUsedModules(1000,(err, res) => {
if(err) {
console.log('BUNDLE_ACTIVE getRecentlyUsedModules callback failed, because: ' + err.code);
} else {
......@@ -574,9 +595,9 @@ bundleState.queryAppUsagePriorityGroup().then( res => {
## bundleState.queryAppUsagePriorityGroup<sup>9+</sup>
queryAppUsagePriorityGroup(bundleName? : string, callback: AsyncCallback&lt;number&gt;): void
queryAppUsagePriorityGroup(callback: AsyncCallback&lt;number&gt;): void
Queries the priority group of the application specified by **bundleName**. If **bundleName** is not specified, the priority group of the current application is queried. This API uses an asynchronous callback to return the result.
Queries the priority group of the current application . This API uses an asynchronous callback to return the result.
**Required permissions**: ohos.permission.BUNDLE_ACTIVE_INFO
......@@ -588,23 +609,44 @@ Queries the priority group of the application specified by **bundleName**. If **
| Name | Type | Mandatory | Description |
| ---------- | --------------------- | ---- | ---------------------------------------- |
| bundleName | string | No | Bundle name of the target application. If this parameter is not specified, the priority group of the current application is queried.|
| callback | AsyncCallback&lt;number&gt; | Yes | Callback used to return the result. |
**Example**
```javascript
// Callback with bundleName
let bundleName = "com.ohos.camera";
bundleState.queryAppUsagePriorityGroup(bundleName, (err, res) => {
bundleState.queryAppUsagePriorityGroup((err, res) => {
if(err) {
console.log('BUNDLE_ACTIVE QueryPackageGroup callback failed. because: ' + err.code);
} else {
console.log('BUNDLE_ACTIVE QueryPackageGroup callback succeeded. result: ' + JSON.stringify(res));
}
});
// Callback without bundleName
bundleState.queryAppUsagePriorityGroup((err, res) => {
```
## bundleState.queryAppUsagePriorityGroup<sup>9+</sup>
queryAppUsagePriorityGroup(bundleName : string, callback: AsyncCallback&lt;number&gt;): void
Queries the priority group of the application specified by **bundleName**. This API uses an asynchronous callback to return the result.
**Required permissions**: ohos.permission.BUNDLE_ACTIVE_INFO
**System capability**: SystemCapability.ResourceSchedule.UsageStatistics.AppGroup
**System API**: This is a system API and cannot be called by third-party applications.
**Parameters**
| Name | Type | Mandatory | Description |
| ---------- | --------------------- | ---- | ---------------------------------------- |
| bundleName | string | Yes | Bundle name of the target application.|
| callback | AsyncCallback&lt;number&gt; | Yes | Callback used to return the result. |
**Example**
```javascript
let bundleName = "com.ohos.camera";
bundleState.queryAppUsagePriorityGroup(bundleName, (err, res) => {
if(err) {
console.log('BUNDLE_ACTIVE QueryPackageGroup callback failed. because: ' + err.code);
} else {
......@@ -688,7 +730,7 @@ bundleState.setBundleGroup(bundleName, newGroup, (err) => {
## bundleState.registerGroupCallBack<sup>9+</sup>
registerGroupCallBack(callback: Callback&lt;BundleActiveGroupCallbackInfo&gt;): Promise&lt;void&gt;
registerGroupCallBack(groupCallback: Callback&lt;BundleActiveGroupCallbackInfo&gt;): Promise&lt;void&gt;
Registers a callback for application group changes. When an application group of the user changes, a **[BundleActiveGroupCallbackInfo](#bundleactivegroupcallbackinfo9)** instance is returned to all applications that have registered the callback. This API uses a promise to return the result.
......@@ -730,7 +772,7 @@ bundleState.registerGroupCallBack(onBundleGroupChanged).then( () => {
## bundleState.registerGroupCallBack<sup>9+</sup>
registerGroupCallBack(callback: Callback&lt;BundleActiveGroupCallbackInfo&gt;, callback: AsyncCallback&lt;void&gt;): void
registerGroupCallBack(groupCallback: Callback&lt;BundleActiveGroupCallbackInfo&gt;, callback: AsyncCallback&lt;void&gt;): void
Registers a callback for application group changes. When an application group of the user changes, a **[BundleActiveGroupCallbackInfo](#bundleactivegroupcallbackinfo9)** instance is returned to all applications that have registered the callback. This API uses an asynchronous callback to return the result.
......@@ -1034,20 +1076,6 @@ Provides the usage duration information of applications.
| infosBeginTime | number | No | Time logged in the first application usage record in the **BundleActiveInfo** object.<br>This API is defined but not implemented in OpenHarmony 3.1 Release. It will be available for use in OpenHarmony 3.1 MR.|
| infosEndTime | number | No | Time logged in the last application usage record in the **BundleActiveInfo** object.<br>This API is defined but not implemented in OpenHarmony 3.1 Release. It will be available for use in OpenHarmony 3.1 MR.|
### merge
merge(toMerge: BundleStateInfo): void
Merges the application usage information that has the same bundle name.
**System capability**: SystemCapability.ResourceSchedule.UsageStatistics.App
**Parameters**
| Name | Type | Mandatory | Description |
| ------- | ----------------------------------- | ---- | -------------- |
| toMerge | [BundleStateInfo](#bundlestateinfo) | Yes | Application usage information to merge.|
## BundleActiveState
Provides information about an application event.
......
zh-cn/application-dev/device-usage-statistics/device-usage-statistics-dev-guide.md
浏览文件 @ fc86495c
......@@ -22,15 +22,16 @@ import stats from '@ohos.bundleState';
| function queryAppUsagePriorityGroup(callback: AsyncCallback&lt;number&gt;): void | 查询当前应用的使用优先级群组。callback形式。 |
| function queryAppUsagePriorityGroup(): Promise&lt;number&gt;; | 查询当前应用的使用优先级群组。promise形式。 |
| function isIdleState(bundleName: string, callback: AsyncCallback&lt;boolean&gt;): void | 判断指定Bundle Name的应用当前是否是空闲状态。 |
| function getRecentlyUsedModules(maxNum? : number, callback: AsyncCallback&lt;BundleActiveModuleInfo&gt;): void | 根据maxNum，查询FA使用记录，返回不超过maxNum条FA使用记录，若不填写maxNum参数，则默认maxNum值为1000。 |
| function getRecentlyUsedModules(callback: AsyncCallback&lt;BundleActiveModuleInfo&gt;): void | 查询FA使用记录，返回不超过1000条FA使用记录。 |
| function getRecentlyUsedModules(maxNum: number, callback: AsyncCallback&lt;BundleActiveModuleInfo&gt;): void | 根据maxNum，查询FA使用记录，返回不超过maxNum条FA使用记录。 maxNum不超过1000|
| function queryAppNotificationNumber(begin: number, end: number, callback: AsyncCallback&lt;Array&lt;BundleActiveEventState&gt;&gt;): void | 通过指定起始和结束时间查询所有应用的通知次数。 |
| function queryBundleActiveEventStates(begin: number, end: number, callback: AsyncCallback&lt;Array&lt;BundleActiveEventState&gt;&gt;): void | 通过指定起始和结束时间查询系统事件（休眠、唤醒、解锁、锁屏）统计信息。 |
| function queryAppUsagePriorityGroup(bundleName? : string, callback: AsyncCallback&lt;number&gt;): void | 查询当前调用者应用或者指定应用的使用优先级群组。callback形式。 |
| function queryAppUsagePriorityGroup(bundleName : string, callback: AsyncCallback&lt;number&gt;): void | 查询指定应用的使用优先级群组。callback形式。 |
| function queryAppUsagePriorityGroup(bundleName? : string): Promise&lt;number&gt;; | 查询当前调用者应用或者指定应用的使用优先级群组。promise形式。 |
| function setBundleGroup(bundleName : string, newGroup: GroupType, callback: AsyncCallback&gt;boolean&gt;): void | 给应用名是bundleName的应用分组设置成newGroup，返回设置结果是否成功，以callback形式返回。 |
| function setBundleGroup(bundleName : string, newGroup : GroupType): Promise&gt;boolean&gt;; | 给应用名是bundleName的应用分组设置成newGroup，返回设置结果是否成功，以promise形式返回。 |
| function registerGroupCallBack(callback: Callback&gt;BundleActiveGroupCallbackInfo&gt;, callback: AsyncCallback&gt;boolean&gt;): void | 注册应用分组变化监听回调，返回注册是否成功，当应用分组发生变化时，会给所有已注册的监听者返回回调信息，以callback形式返回。 |
| function registerGroupCallBack(callback: Callback&gt;BundleActiveGroupCallbackInfo&gt;): Promise&gt;boolean&gt;; | 注册应用分组变化监听回调，返回注册是否成功，当应用分组发生变化时，会给所有已注册的监听者返回回调信息，以promise形式返回。 |
| function registerGroupCallBack(groupCallback: Callback&gt;BundleActiveGroupCallbackInfo&gt;, callback: AsyncCallback&gt;boolean&gt;): void | 注册应用分组变化监听回调，返回注册是否成功，当应用分组发生变化时，会给所有已注册的监听者返回回调信息，以callback形式返回。 |
| function registerGroupCallBack(groupCallback: Callback&gt;BundleActiveGroupCallbackInfo&gt;): Promise&gt;boolean&gt;; | 注册应用分组变化监听回调，返回注册是否成功，当应用分组发生变化时，会给所有已注册的监听者返回回调信息，以promise形式返回。 |
| function unRegisterGroupCallBack(callback: AsyncCallback&gt;boolean&gt;): void | 解除应用分组监听回调，以callback形式返回。 |
| function unRegisterGroupCallBack(): Promise&gt;boolean&gt;; | 解除应用分组监听回调，以promise形式返回。 |
......@@ -325,14 +326,14 @@ import stats from '@ohos.bundleState';
```js
import stats from '@ohos.bundleState'
// 无参异步方法promise方式
// 无bundleName异步方法promise方式
stats.queryAppUsagePriorityGroup().then(res => {
console.log('BUNDLE_ACTIVE queryAppUsagePriorityGroup promise succeeded. result: ' + JSON.stringify(res));
}).catch(err => {
console.log('BUNDLE_ACTIVE queryAppUsagePriorityGroup promise failed. because: ' + err.code);
});
// 无参异步方法callback方式
// 无bundleName异步方法callback方式
stats.queryAppUsagePriorityGroup((err, res) => {
if (err) {
console.log('BUNDLE_ACTIVE queryAppUsagePriorityGroup callback failed. because: ' + err.code);
......@@ -340,16 +341,16 @@ import stats from '@ohos.bundleState';
console.log('BUNDLE_ACTIVE queryAppUsagePriorityGroup callback succeeded. result: ' + JSON.stringify(res));
}
});
// 有参异步promise方式
stats.queryAppUsagePriorityGroup(this.bundleName).then(res => {
let bundleName = "com.ohos.camera";
// 有bundleName异步promise方式
stats.queryAppUsagePriorityGroup(bundleName).then(res => {
console.log('BUNDLE_ACTIVE QueryPackageGroup promise succeeded. result: ' + JSON.stringify(res));
}).catch(err => {
console.log('BUNDLE_ACTIVE QueryPackageGroup promise failed. because: ' + err.code);
});
// 有参异步方法callback方式
stats.queryAppUsagePriorityGroup(this.bundleName, (err, res) => {
// 有bundleName异步方法callback方式
stats.queryAppUsagePriorityGroup(bundleName, (err, res) => {
if (err) {
console.log('BUNDLE_ACTIVE QueryPackageGroup callback failed. because: ' + err.code);
} else {
......
zh-cn/application-dev/key-features/multi-device-app-dev/design-checklist.md
浏览文件 @ fc86495c
......@@ -4,24 +4,24 @@
设计自检表详细列举出了在全场景设备设计和开发过程中应当注意的设计规则，这将帮助应用减少用户舆情且提升用户体验的一致性。
自检表的要求范围分为“必选”与“推荐”两类。必选类一般为已总结出的较优解决方案或效果，表示相关设计需要按照此原则统一执行；推荐类指可能受应用品牌风格或业务特殊性影响，可适量做出修改。
自检表的要求范围分为“必须”与“推荐”两个类别。必须类一般为已总结出的较优解决方案或效果，表示相关设计需要按照此原则统一执行；推荐类指可能受应用品牌风格或业务特殊性影响，可适量做出修改。
请参考以下表格范围内提出的要求对应用进行检查。
| **类型** | **条目** | **说明** |
| -------- | ------------------ | ------------------------------------------------------------ |
| 应用架构 | 导航结构 | 在各设备上页面导航结构保持一致（同时出多个设备的UX设计）。 |
| 布局 | 拉通设计 | 拉通各设备的布局设计，保证在不同尺寸和分辨率的设备上能够无错位/不截断/不变形/不过多空白（50%以上）/不过于拥挤（间距小于16vp，明显截断）/无大图大字体地正常显示。 |
| | 响应式设计 | 栅格布局只能占N列以及N列内部的Gutter，不包含N列两侧的Gutter。 |
| | 响应式设计 | 明确标注使用什么类型的栅格、给出在不同断点下栅格三要素取值。 |
| | 响应式设计 | 按容器去对齐栅格，而不是内部子元素对齐栅格。 |
| | 响应式设计 | 栅格除了页面布局设计外，在做局部栅格设计时，需要通过明显方式如颜色等进行标注区分，避免混淆。 |
| | 响应式设计 | 禁止出现标注了栅格但实际没有通过栅格进行布局设计，避免混淆。 |
| | 自适应设计 | 非栅格设计场景下，明确标注自适应布局能力。自适应布局能力有：拉伸、均分、占比、缩放、延伸、隐藏、折行。 |
| 人机交互 | 输入方式 | 需保证在各设备上完整支持触摸、鼠标、触控、键盘、遥控器、摇杆等交互方式，并符合标准定义。 |
| | 交互归一 | 应使用系统提供的控件以达到一致的交互体验。如有定制，需保证在各场景下，不同输入设备上的操作与指南要求一致。需特别注意鼠标行为。 |
| 视觉风格 | 单位 | 用于界面布局的单位应全部使用vp。只针对严格控制元素尺寸的场景使用px。 |
| | 色彩 | 用于色彩的赋值应使用分层参数。推荐支持深色模式，需保证界面在系统切换色彩模式时没有识别性问题。 |
| | 字体 | 使用fp为文字大小单位，需要响应系统大字体模式，确保系统调节字体大小后，界面字体能响应变化大小，并且界面布局没有出现布局错乱问题。 |
| 多态控件 | 支持常用的控件状态 | 确保控件不同状态下的视觉效果没有缺失。控件的常用状态有：正常态、不可用态、点击态、获焦态、激活态、悬停态。 |
\ No newline at end of file
| **类型** | **条目** | **说明** | **类别** |
| -------- | ------------------ | ------------------------------------------------------------ | ------ |
| 应用架构 | 导航结构 | 在各设备上页面导航结构保持一致（同时出多个设备的UX设计）。 | 推荐 |
| 布局 | 拉通设计 | 拉通各设备的布局设计，保证在不同尺寸和分辨率的设备上能够无错位/不截断/不变形/不过多空白（50%以上）/不过于拥挤（间距小于16vp，明显截断）/无大图大字体地正常显示。 | 必须 |
| | 响应式设计 | 栅格布局只能占N列以及N列内部的Gutter，不包含N列两侧的Gutter。 | 必须 |
| | 响应式设计 | 明确标注使用什么类型的栅格、给出在不同断点下栅格三要素取值。 | 推荐 |
| | 响应式设计 | 按容器去对齐栅格，而不是内部子元素对齐栅格。 | 必须 |
| | 响应式设计 | 栅格除了页面布局设计外，在做局部栅格设计时，需要通过明显方式如颜色等进行标注区分，避免混淆。 | 推荐 |
| | 响应式设计 | 禁止出现标注了栅格但实际没有通过栅格进行布局设计，避免混淆。 | 必须 |
| | 自适应设计 | 非栅格设计场景下，明确标注自适应布局能力。自适应布局能力有：拉伸、均分、占比、缩放、延伸、隐藏、折行。 | 推荐 |
| 人机交互 | 输入方式 | 需保证在各设备上完整支持触摸、鼠标、触控、键盘、遥控器、摇杆等交互方式，并符合标准定义。 | 推荐 |
| | 交互归一 | 应使用系统提供的控件以达到一致的交互体验。如有定制，需保证在各场景下，不同输入设备上的操作与指南要求一致。需特别注意鼠标行为。 | 推荐 |
| 视觉风格 | 单位 | 用于界面布局的单位应全部使用vp。只针对严格控制元素尺寸的场景使用px。 | 必须 |
| | 色彩 | 用于色彩的赋值应使用分层参数。推荐支持深色模式，需保证界面在系统切换色彩模式时没有识别性问题。 | 推荐 |
| | 字体 | 使用fp为文字大小单位，需要响应系统大字体模式，确保系统调节字体大小后，界面字体能响应变化大小，并且界面布局没有出现布局错乱问题。 | 必须 |
| 多态控件 | 支持常用的控件状态 | 确保控件不同状态下的视觉效果没有缺失。控件的常用状态有：正常态、不可用态、点击态、获焦态、激活态、悬停态。 | 推荐 |
\ No newline at end of file
zh-cn/application-dev/key-features/multi-device-app-dev/layout-intro.md
浏览文件 @ fc86495c
......@@ -25,13 +25,4 @@
接下来将依次介绍自适应布局和响应式布局，同时结合实际，通过典型布局场景以及典型页面场景详细介绍两种布局能力的用法。
## 相关实例
针对一次开发，多端部署，有以下相关实例可供参考：
- [`MusicAlbum`：一多音乐专辑主页（eTS）（API9）](https://gitee.com/openharmony/applications_app_samples/tree/master/MultiDeviceAppDev/MusicAlbum)
- [`AppMarket`：一多应用市场首页（eTS）（API9）](https://gitee.com/openharmony/applications_app_samples/tree/master/MultiDeviceAppDev/AppMarket)
- [`AdaptiveCapabilities`：多设备自适应能力（eTS）（API9）](https://gitee.com/openharmony/applications_app_samples/tree/master/MultiDeviceAppDev/AdaptiveCapabilities)
- [`JsAdaptiveCapabilities`：多设备自适应能力（JS）（API8）](https://gitee.com/openharmony/applications_app_samples/tree/master/MultiDeviceAppDev/JsAdaptiveCapabilities)
- [一次开发多端部署（eTS）（API8）](https://gitee.com/openharmony/codelabs/tree/master/ETSUI/MultiDeploymentEts)
zh-cn/application-dev/key-features/multi-device-app-dev/page-development-intro.md
浏览文件 @ fc86495c
......@@ -19,6 +19,21 @@
> ![icon-note.gif](public_sys-resources/icon-note.gif) **说明：**
> - 开发多设备上同一页面时，建议开发者多使用[自定义组件](https://gitee.com/openharmony/docs/blob/master/zh-cn/application-dev/ui/ts-component-based-component.md)，既可以增加代码的可读性和可维护性，同时也可以尽可能的实现代码复用。
>
> - 本章中涉及的示例代码均可以在[OpenHarmony应用示例](https://gitee.com/openharmony/applications_app_samples/tree/master/MultiDeviceAppDev)中获取，感兴趣的开发者可以自行下载、运行及查看效果。
> 开发多设备上同一页面时，建议开发者多使用[自定义组件](https://gitee.com/openharmony/docs/blob/master/zh-cn/application-dev/ui/ts-component-based-component.md)，既可以增加代码的可读性和可维护性，同时也可以尽可能的实现代码复用。
## 相关示例
[OpenHarmony应用示例](https://gitee.com/openharmony/applications_app_samples/tree/master/MultiDeviceAppDev)中提供了如下一多示例，感兴趣的开发者可以自行下载、运行及查看效果。
| 示例名称 | 开发范式 | 简介 |
| ------------------------------------------------------------ | -------------- | ------------------------------------------------------------ |
| [页面开发一多能力](https://gitee.com/openharmony/applications_app_samples/tree/master/MultiDeviceAppDev/AdaptiveCapabilities) | 声明式开发范式 | 本章配套的示例代码，包括自适应布局、响应式布局、典型布局场景以及资源文件使用等。 |
| [页面开发一多能力](https://gitee.com/openharmony/applications_app_samples/tree/master/MultiDeviceAppDev/JsAdaptiveCapabilities) | 类Web开发范式 | 本章配套的示例代码，包括自适应布局、响应式布局及资源文件使用等。 |
| [应用市场首页](https://gitee.com/openharmony/applications_app_samples/tree/master/MultiDeviceAppDev/AppMarket) | 声明式开发范式 | 本章配套的示例代码，以应用市场首页为例，演示如何使用一多能力适配多设备（或多窗口尺寸）。 |
| [音乐专辑页](https://gitee.com/openharmony/applications_app_samples/tree/master/MultiDeviceAppDev/MusicAlbum) | 声明式开发范式 | 本章配套的示例代码，以音乐专辑页为例，演示如何使用一多能力适配多设备（或多窗口尺寸）。 |
| [蔬菜百科首页](https://gitee.com/openharmony/applications_app_samples/tree/master/MultiDeviceAppDev/Vegetable) | 声明式开发范式 | 一多示例页面，以蔬菜百科首页为例，演示如何使用一多能力适配多设备（或多窗口尺寸）。 |
| [天气](https://gitee.com/openharmony/applications_app_samples/tree/master/MultiDeviceAppDev/Weather) | 声明式开发范式 | 一多示例应用，以天气应用为例，演示如何使用一多能力实现包含多个页面的应用。 |
zh-cn/application-dev/key-features/multi-device-app-dev/responsive-layout.md
浏览文件 @ fc86495c
......@@ -254,8 +254,7 @@ struct MediaQuerySample {
## 栅格布局
## <sub>栅格</sub>
### 简介
栅格是多设备场景下通用的辅助定位工具，通过将空间分割为有规律的栅格。栅格可以显著降低适配不同屏幕尺寸的设计及开发成本，使得整体设计和开发流程更有秩序和节奏感，同时也保证多设备上应用显示的协调性和一致性，提升用户体验。
......@@ -270,9 +269,6 @@ struct MediaQuerySample {
单个Column的宽度是系统结合Margin、Gutter和Columns自动计算的，不需要也不允许开发者手动配置。
### 栅格布局
栅格布局就是栅格结合了断点，实现栅格布局能力的组件叫栅格组件。在实际使用场景中，可以根据需要配置不同断点下栅格组件中元素占据的列数，同时也可以调整Margin、Gutter、Columns的取值，从而实现不同的布局效果。
| sm断点 | md断点 |
......@@ -353,7 +349,7 @@ struct GridRowSample2 {
// 侧边栏，尺寸变化范围 [100vp, 600vp]
Column(){}.width('100%').backgroundColor('#19000000')
// 内容区，尺寸变化范围 [窗口宽度550vp, 窗口宽度50vp]
// 内容区，尺寸变化范围 [550vp, 50vp]
GridRow({breakpoints: {value: ['100vp', '200vp', '300vp', '400vp', '500vp'],
reference: BreakpointsReference.ComponentSize}}) {
GridCol({span:{xs: 12, sm: 12, md: 12, lg:12, xl: 12, xxl:12}}) {
......@@ -395,7 +391,6 @@ struct GridRowSample2 {
总的来讲，margin在组件外而padding在组件内，开发者可以根据实际需要进行选择及实现目标效果。
**示例3：**
......@@ -729,8 +724,3 @@ struct GridRowSample9 {
如前所述，栅格组件提供了丰富的自定义能力，功能异常灵活和强大。只需要明确栅格在不同断点下的Columns、Margin、Gutter及span等参数，即可确定最终布局，无需关心具体的设备类型及设备状态（如横竖屏）等。栅格可以节约设计团队与开发团队的沟通成本，提升整体开发效率。
## 相关实例
针对栅格断点系统开发，有以下相关实例可供参考：
- [`Weather`：一多天气（eTS）（API9）](https://gitee.com/openharmony/applications_app_samples/tree/master/MultiDeviceAppDev/Weather)
zh-cn/application-dev/reference/apis/js-apis-deviceUsageStatistics.md
浏览文件 @ fc86495c
......@@ -483,9 +483,9 @@ getRecentlyUsedModules(maxNum?: number): Promise&lt;Array&lt;BundleActiveModuleI
## bundleState.getRecentlyUsedModules<sup>9+</sup>
getRecentlyUsedModules(maxNum?: number, callback: AsyncCallback&lt;Array&lt;BundleActiveModuleInfo&gt;&gt;): void
getRecentlyUsedModules(callback: AsyncCallback&lt;Array&lt;BundleActiveModuleInfo&gt;&gt;): void
查询FA使用记录。使用CallBack形式返回数量最大不超过maxNum设置的值，FA使用记录由近及远排序，maxNum最大为1000。
查询FA使用记录。使用CallBack形式返回数量不超过1000条FA使用记录（FA记录按时间由近及远排序）。
**需要权限**：ohos.permission.BUNDLE_ACTIVE_INFO
......@@ -497,13 +497,12 @@ getRecentlyUsedModules(maxNum?: number, callback: AsyncCallback&lt;Array&lt;Bund
| 参数名 | 类型 | 必填 | 说明 |
| -------- | ---------------------------------------- | ---- | ----------------------------------- |
| maxNum | number | 否 | 返回条目的最大数量，最多支持1000条。若不填写，则默认为1000。 |
| callback | AsyncCallback&lt;Array&lt;[BundleActiveModuleInfo](#bundleactivemoduleinfo9)&gt;&gt; | 是 | 指定的CallBack回调方法。返回不超过maxNum条FA使用记录。 |
**示例**：
```js
bundleState.getRecentlyUsedModules(1000,(err, res) => {
bundleState.getRecentlyUsedModules((err, res) => {
if(err) {
console.log('BUNDLE_ACTIVE getRecentlyUsedModules callback failed, because: ' + err.code);
} else {
......@@ -514,9 +513,31 @@ getRecentlyUsedModules(maxNum?: number, callback: AsyncCallback&lt;Array&lt;Bund
}
}
});
```
// 无maxNum参数调用方式
bundleState.getRecentlyUsedModules((err, res) => {
## bundleState.getRecentlyUsedModules<sup>9+</sup>
getRecentlyUsedModules(maxNum: number, callback: AsyncCallback&lt;Array&lt;BundleActiveModuleInfo&gt;&gt;): void
查询FA使用记录。使用CallBack形式返回数量最大不超过maxNum设置的值，FA使用记录由近及远排序，maxNum最大为1000。
**需要权限**：ohos.permission.BUNDLE_ACTIVE_INFO
**系统能力**：SystemCapability.ResourceSchedule.UsageStatistics.App
**系统API**：此接口为系统接口，三方应用不支持调用。
**参数**：
| 参数名 | 类型 | 必填 | 说明 |
| -------- | ---------------------------------------- | ---- | ----------------------------------- |
| maxNum | number | 是 | 返回FA记录的最大数量，maxNum最大为1000。|
| callback | AsyncCallback&lt;Array&lt;[BundleActiveModuleInfo](#bundleactivemoduleinfo9)&gt;&gt; | 是 | 指定的CallBack回调方法。返回不超过maxNum条FA使用记录。 |
**示例**：
```js
bundleState.getRecentlyUsedModules(1000,(err, res) => {
if(err) {
console.log('BUNDLE_ACTIVE getRecentlyUsedModules callback failed, because: ' + err.code);
} else {
......@@ -573,9 +594,9 @@ bundleState.queryAppUsagePriorityGroup().then( res => {
## bundleState.queryAppUsagePriorityGroup<sup>9+</sup>
queryAppUsagePriorityGroup(bundleName? : string, callback: AsyncCallback&lt;number&gt;): void
queryAppUsagePriorityGroup(callback: AsyncCallback&lt;number&gt;): void
可选参数。有参则查询指定bundleName对应应用的分组。无参数时查询当前应用的分组。使用callback形式返回其应用分组。
查询当前应用的分组。使用callback形式返回其应用分组。
**需要权限**：ohos.permission.BUNDLE_ACTIVE_INFO
......@@ -587,23 +608,44 @@ queryAppUsagePriorityGroup(bundleName? : string, callback: AsyncCallback&lt;numb
| 参数名 | 类型 | 必填 | 说明 |
| ---------- | --------------------- | ---- | ---------------------------------------- |
| bundleName | string | 否 | 可选参数。有此参数则查询指定bundleName对应应用的分组。无此参数时查询当前应用的分组。 |
| callback | AsyncCallback&lt;number&gt; | 是 | 指定的CallBack回调方法。返回查询的应用分组。 |
| callback | AsyncCallback&lt;number&gt; | 是 | 指定的CallBack回调方法。返回当前应用的分组。 |
**示例**：
```javascript
//有bundleName的callback
let bundleName = "com.ohos.camera";
bundleState.queryAppUsagePriorityGroup(bundleName, (err, res) => {
bundleState.queryAppUsagePriorityGroup((err, res) => {
if(err) {
console.log('BUNDLE_ACTIVE QueryPackageGroup callback failed. because: ' + err.code);
} else {
console.log('BUNDLE_ACTIVE QueryPackageGroup callback succeeded. result: ' + JSON.stringify(res));
}
});
//无bundleName的callback
bundleState.queryAppUsagePriorityGroup((err, res) => {
```
## bundleState.queryAppUsagePriorityGroup<sup>9+</sup>
queryAppUsagePriorityGroup(bundleName : string, callback: AsyncCallback&lt;number&gt;): void
查询指定bundleName对应应用的分组。使用callback形式返回其应用分组。
**需要权限**：ohos.permission.BUNDLE_ACTIVE_INFO
**系统能力**：SystemCapability.ResourceSchedule.UsageStatistics.AppGroup
**系统API**：此接口为系统接口，三方应用不支持调用。
**参数**：
| 参数名 | 类型 | 必填 | 说明 |
| ---------- | --------------------- | ---- | ---------------------------------------- |
| bundleName | string | 是 | 查询指定bundleName对应应用的分组。 |
| callback | AsyncCallback&lt;number&gt; | 是 | 指定的CallBack回调方法。返回制指定bundleName的应用分组。|
**示例**：
```javascript
let bundleName = "com.ohos.camera";
bundleState.queryAppUsagePriorityGroup(bundleName, (err, res) => {
if(err) {
console.log('BUNDLE_ACTIVE QueryPackageGroup callback failed. because: ' + err.code);
} else {
......@@ -687,7 +729,7 @@ bundleState.setBundleGroup(bundleName, newGroup, (err) => {
## bundleState.registerGroupCallBack<sup>9+</sup>
registerGroupCallBack(callback: Callback&lt;BundleActiveGroupCallbackInfo&gt;): Promise&lt;void&gt;
registerGroupCallBack(groupCallback: Callback&lt;BundleActiveGroupCallbackInfo&gt;): Promise&lt;void&gt;
应用注册分组变化监听，待用户名下的某个应用分组发生变化时，通过callback形式向所有已注册分组变化监听的应用返回[BundleActiveGroupCallbackInfo](#bundleactivegroupcallbackinfo9)信息。使用Promise形式返回注册是否成功。
......@@ -729,7 +771,7 @@ bundleState.registerGroupCallBack(onBundleGroupChanged).then( () => {
## bundleState.registerGroupCallBack<sup>9+</sup>
registerGroupCallBack(callback: Callback&lt;BundleActiveGroupCallbackInfo&gt;, callback: AsyncCallback&lt;void&gt;): void
registerGroupCallBack(groupCallback: Callback&lt;BundleActiveGroupCallbackInfo&gt;, callback: AsyncCallback&lt;void&gt;): void
应用注册分组变化监听，待用户名下的某个应用分组发生变化时，通过callback形式向所有已注册分组变化监听的应用返回[BundleActiveGroupCallbackInfo](#bundleactivegroupcallbackinfo9)信息。使用异步callback形式返回注册监听是否成功。
......
zh-cn/application-dev/reference/apis/js-apis-image.md
浏览文件 @ fc86495c
......@@ -980,7 +980,8 @@ createImageSource(uri: string, options: SourceOptions): ImageSource
**示例：**
```js
const imageSourceApi = image.createImageSource('/sdcard/test.jpg');
var sourceOptions = { sourceDensity: 120 };
let imageSource = image.createImageSource('test.png', sourceOptions);
```
## image.createImageSource<sup>7+</sup>
......@@ -1086,9 +1087,9 @@ const data = new ArrayBuffer(112);
const imageSourceApi = image.createImageSource(data);
```
## image.CreateIncrementalSource<sup>9+</sup>
## image.createIncrementalSource<sup>9+</sup>
CreateIncrementalSource(buf: ArrayBuffer): ImageSource
createIncrementalSource(buf: ArrayBuffer): ImageSource
通过缓冲区以增量的方式创建图片源实例。
......@@ -1113,9 +1114,9 @@ const buf = new ArrayBuffer(96);
const imageSourceIncrementalSApi = image.createIncrementalSource(buf);
```
## image.CreateIncrementalSource<sup>9+</sup>
## image.createIncrementalSource<sup>9+</sup>
CreateIncrementalSource(buf: ArrayBuffer, options?: SourceOptions): ImageSource
createIncrementalSource(buf: ArrayBuffer, options?: SourceOptions): ImageSource
通过缓冲区以增量的方式创建图片源实例。
......@@ -1151,7 +1152,7 @@ const imageSourceIncrementalSApi = image.createIncrementalSource(buf);
| 名称 | 类型 | 可读 | 可写 | 说明 |
| ---------------- | -------------- | ---- | ---- | ------------------------------------------------------------ |
| supportedFormats | Array\<string> | 是 | 否 | 支持的图片格式，包括：png，jpeg，wbmp，bmp，gif，webp，heif等。 |
| supportedFormats | Array\<string> | 是 | 否 | 支持的图片格式，包括：png，jpeg，bmp，gif，webp，RAW。 |
### getImageInfo
......@@ -1586,7 +1587,7 @@ const imagePackerApi = image.createImagePacker();
## ImagePacker
图片打包器类，用于图片压缩和打包。在调用ImagePacker的方法前，需要先通过createImagePacker构建一个ImagePacker实例。
图片打包器类，用于图片压缩和打包。在调用ImagePacker的方法前，需要先通过createImagePacker构建一个ImagePacker实例，当前支持格式有：jpeg webp。
### 属性
......@@ -1795,7 +1796,7 @@ var receiver = image.createImageReceiver(8192, 8, 4, 8);
### 属性
**系统能力：** 以下各项对应的系统能力均为SystemCapability.Multimedia.Image.ImageReceiver
**系统能力：** SystemCapability.Multimedia.Image.ImageReceiver
| 名称 | 类型 | 可读 | 可写 | 说明 |
| -------- | ---------------------------- | ---- | ---- | ------------------ |
......@@ -2024,7 +2025,7 @@ receiver.release().then(() => {
### 属性
**系统能力：** 以下各项对应的系统能力均为SystemCapability.Multimedia.Image.Core
**系统能力：** SystemCapability.Multimedia.Image.Core
| 名称 | 类型 | 可读 | 可写 | 说明 |
| -------- | ------------------ | ---- | ---- | -------------------------------------------------- |
......@@ -2139,20 +2140,20 @@ img.release().then(() =>{
表示图片指定区域内的数据。
**系统能力：** 以下各项对应的系统能力均为SystemCapability.Multimedia.Image.Core
**系统能力：** SystemCapability.Multimedia.Image.Core
| 名称 | 类型 | 可读 | 可写 | 说明 |
| ------ | ------------------ | ---- | ---- | ------------------------------------------------------------ |
| pixels | ArrayBuffer | 是 | 否 | 像素。 |
| offset | number | 是 | 否 | 偏移量。 |
| stride | number | 是 | 否 | 像素间距，stride >= region.size.width*4。 |
| stride | number | 是 | 否 | 像素间距，stride >= region.size.width*4 |
| region | [Region](#region7) | 是 | 否 | 区域，按照区域读写。写入的区域宽度加X坐标不能大于原图的宽度，写入的区域高度加Y坐标不能大于原图的高度。 |
## ImageInfo
表示图片信息。
**系统能力：** 以下各项对应的系统能力均为SystemCapability.Multimedia.Image.Core
**系统能力：** SystemCapability.Multimedia.Image.Core
| 名称 | 类型 | 可读 | 可写 | 说明 |
| ---- | ------------- | ---- | ---- | ---------- |
......@@ -2162,7 +2163,7 @@ img.release().then(() =>{
表示图片尺寸。
**系统能力：** 以下各项对应的系统能力均为SystemCapability.Multimedia.Image.Core
**系统能力：** SystemCapability.Multimedia.Image.Core
| 名称 | 类型 | 可读 | 可写 | 说明 |
| ------ | ------ | ---- | ---- | -------------- |
......@@ -2173,33 +2174,33 @@ img.release().then(() =>{
枚举，图片像素格式。
**系统能力：** 以下各项对应的系统能力均为SystemCapability.Multimedia.Image.Core
**系统能力：** SystemCapability.Multimedia.Image.Core
| 名称 | 默认值 | 描述 |
| ---------------------- | ------ | ----------------- |
| UNKNOWN | 0 | 未知格式。 |
| RGB_565 | 2 | 格式为RGB_565 |
| RGBA_8888 | 3 | 格式为RGBA_8888。 |
| BGRA_8888<sup>9+</sup> | 4 | 格式为BGRA_8888。 |
| RGBA_8888 | 3 | 格式为RGBA_8888 |
| BGRA_8888<sup>9+</sup> | 4 | 格式为BGRA_8888 |
## AlphaType<sup>9+</sup>
枚举，图像的透明度类型。
**系统能力：** 以下各项对应的系统能力均为SystemCapability.Multimedia.Image.Core
**系统能力：** SystemCapability.Multimedia.Image.Core
| 名称 | 默认值 | 描述 |
| -------- | ------ | ----------------------- |
| UNKNOWN | 0 | 未知透明度。 |
| OPAQUE | 1 | 没有alpha或图片全透明。 |
| PREMUL | 2 | RGB前乘alpha。 |
| UNPREMUL | 3 | RGB不前乘alpha。 |
| PREMUL | 2 | RGB前乘alpha |
| UNPREMUL | 3 | RGB不前乘alpha |
## ScaleMode<sup>9+</sup>
枚举，图像的缩放模式。
**系统能力：** 以下各项对应的系统能力均为SystemCapability.Multimedia.Image.Core
**系统能力：** SystemCapability.Multimedia.Image.Core
| 名称 | 默认值 | 描述 |
| --------------- | ------ | -------------------------------------------------- |
......@@ -2210,7 +2211,7 @@ img.release().then(() =>{
ImageSource的初始化选项。
**系统能力：** 以下各项对应的系统能力均为SystemCapability.Multimedia.Image.Core
**系统能力：** SystemCapability.Multimedia.Image.Core
| 名称 | 类型 | 可读 | 可写 | 说明 |
| ----------------- | ---------------------------------- | ---- | ---- | ------------------ |
......@@ -2223,7 +2224,7 @@ ImageSource的初始化选项。
PixelMap的初始化选项。
**系统能力：** 以下各项对应的系统能力均为SystemCapability.Multimedia.Image.Core
**系统能力：** SystemCapability.Multimedia.Image.Core
| 名称 | 类型 | 可读 | 可写 | 说明 |
| ------------------------ | ---------------------------------- | ---- | ---- | -------------- |
......@@ -2237,7 +2238,7 @@ PixelMap的初始化选项。
图像解码设置选项。
**系统能力：** 以下各项对应的系统能力均为SystemCapability.Multimedia.Image.ImageSource
**系统能力：** SystemCapability.Multimedia.Image.ImageSource
| 名称 | 类型 | 可读 | 可写 | 说明 |
| ------------------ | ---------------------------------- | ---- | ---- | ---------------- |
......@@ -2253,7 +2254,7 @@ PixelMap的初始化选项。
表示区域信息。
**系统能力：** 以下各项对应的系统能力均为SystemCapability.Multimedia.Image.Core
**系统能力：** SystemCapability.Multimedia.Image.Core
| 名称 | 类型 | 可读 | 可写 | 说明 |
| ---- | ------------- | ---- | ---- | ------------ |
......@@ -2265,18 +2266,18 @@ PixelMap的初始化选项。
表示图片打包选项。
**系统能力：** 以下各项对应的系统能力均为SystemCapability.Multimedia.Image.ImagePacker
**系统能力：** SystemCapability.Multimedia.Image.ImagePacker
| 名称 | 类型 | 可读 | 可写 | 说明 |
| ------- | ------ | ---- | ---- | --------------------------------------------------- |
| format | string | 是 | 是 | 目标格式。</br>当前支持格式有：.jpg .png .gif .bmp .webp RAW。 |
| quality | number | 是 | 是 | JPEG编码中设定输出图片质量的参数，取值范围为1-100。 |
| format | string | 是 | 是 | 目标格式。</br>当前支持格式有：jpeg webp |
| quality | number | 是 | 是 | JPEG编码中设定输出图片质量的参数，取值范围为1-100 |
## GetImagePropertyOptions<sup>7+</sup>
表示查询图片属性的索引。
**系统能力：** 以下各项对应的系统能力均为SystemCapability.Multimedia.Image.ImageSource
**系统能力：** SystemCapability.Multimedia.Image.ImageSource
| 名称 | 类型 | 可读 | 可写 | 说明 |
| ------------ | ------ | ---- | ---- | ------------ |
......@@ -2287,7 +2288,7 @@ PixelMap的初始化选项。
枚举，Exif（Exchangeable image file format）图片信息。
**系统能力：** 以下各项对应的系统能力均为SystemCapability.Multimedia.Image.Core
**系统能力：** SystemCapability.Multimedia.Image.Core
| 名称 | 默认值 | 说明 |
| ----------------- | ----------------------- | ------------------------ |
......@@ -2304,7 +2305,7 @@ PixelMap的初始化选项。
枚举，图片格式。
**系统能力：** 以下各项对应的系统能力均为SystemCapability.Multimedia.Image.Core
**系统能力：** SystemCapability.Multimedia.Image.Core
| 名称 | 默认值 | 描述 |
| ------------ | ------ | -------------------- |
......@@ -2315,20 +2316,20 @@ PixelMap的初始化选项。
枚举，图像的组件类型。
**系统能力：** 以下各项对应的系统能力均为SystemCapability.Multimedia.Image.ImageReceiver
**系统能力：** SystemCapability.Multimedia.Image.ImageReceiver
| 名称 | 默认值 | 描述 |
| ----- | ------ | ----------- |
| YUV_Y | 1 | 亮度信息。 |
| YUV_U | 2 | 色度信息。 |
| YUV_V | 3 | 色度信息。 |
| JPEG | 4 | Jpeg 类型。 |
| JPEG | 4 | JPEG 类型。 |
## Component<sup>9+</sup>
描述图像颜色分量。
**系统能力：** 以下各项对应的系统能力均为SystemCapability.Multimedia.Image.Core
**系统能力：** SystemCapability.Multimedia.Image.Core
| 名称 | 类型 | 可读 | 可写 | 说明 |
| ------------- | -------------------------------- | ---- | ---- | ------------ |
......
zh-cn/application-dev/reference/apis/js-apis-system-timer.md
浏览文件 @ fc86495c
......@@ -331,8 +331,8 @@ createTimer的初始化选项。
**系统能力：** SystemCapability.MiscServices.Time
| 参数名 | 类型 | 必填 | 说明 |
| -------- | ------------------| ---- | ----------------------------------------------------------------------------------------------- |
| type | number | 是 | const TIMER_TYPE_REALTIME: 设置为系统启动时间定时器，否则为walltime定时器; <br/>const TIMER_TYPE_WAKEUP: 设置为唤醒定时器，否则为非唤醒; <br/>const TIMER_TYPE_EXACT: 设置为精准定时器，否则为非精准定时器; <br/>const TIMER_TYPE_IDLE: number: 设置为IDLE模式定时器，否则为非IDLE模式定时器（暂不支持） |
| -------- | ------------------| ---- | ------------------------------------------------------------------------------------------------------------------------- |
| type | number | 是 | const TIMER_TYPE_REALTIME: 设置为系统启动时间定时器(当设置系统时间超过定时器启动时间，定时器则失效)，否则为walltime定时器; <br/>const TIMER_TYPE_WAKEUP: 设置为唤醒定时器，否则为非唤醒; <br/>const TIMER_TYPE_EXACT: 设置为精准定时器，否则为非精准定时器; <br/>const TIMER_TYPE_IDLE: number: 设置为IDLE模式定时器，否则为非IDLE模式定时器（暂不支持） |
| repeat | boolean | 是 | true 为循环定时器，false为单次定时器。 |
| interval | number | 否 | 如果是循环定时器，repeat值应大于5000毫秒，非重复定时器置为0。 |
| wantAgent| wantAgent | 否 | 设置通知的wantagent，定时器到期后通知。(支持拉起应用MainAbility,暂不支持拉起ServiceAbility) |
......
zh-cn/application-dev/reference/arkui-ts/ts-basic-gestures-longpressgesture.md
浏览文件 @ fc86495c
# LongPressGesture
用于触发长按手势事件，触发长按手势的最少手指数为1，最短时间为500毫秒。
用于触发长按手势事件，触发长按手势的最少手指数为1，最短长按时间为500毫秒。
> **说明：**
>
......@@ -36,25 +36,32 @@ LongPressGesture(value?: { fingers?: number, repeat?: boolean, duration?: number
@Entry
@Component
struct LongPressGestureExample {
@State count: number = 0
@State count: number = 0;
build() {
Flex({ direction: FlexDirection.Column, alignItems: ItemAlign.Center, justifyContent: FlexAlign.SpaceBetween }) {
Text('LongPress onAction:' + this.count)
}
.height(200).width(300).padding(60).border({ width:1 }).margin(30)
Column() {
Text('LongPress onAction:' + this.count).fontSize(28)
// 单指长按文本触发该手势事件
.gesture(
LongPressGesture({ repeat: true })
// 长按动作存在会连续触发
// 由于repeat设置为true，长按动作存在时会连续触发，触发间隔为duration（默认值500ms）
.onAction((event: GestureEvent) => {
if (event.repeat) { this.count++ }
if (event.repeat) {
this.count++;
}
})
// 长按动作一结束触发
.onActionEnd(() => {
this.count = 0
this.count = 0;
})
)
}
.height(200)
.width(300)
.padding(20)
.border({ width: 3 })
.margin(30)
}
}
```
......
zh-cn/application-dev/reference/arkui-ts/ts-basic-gestures-pangesture.md
浏览文件 @ fc86495c
......@@ -17,7 +17,7 @@ PanGesture(value?: { fingers?: number; direction?: PanDirection; distance?: numb
| -------- | -------- | -------- | -------- |
| fingers | number | 否 | 触发拖动的最少手指数，最小为1指，&nbsp;最大取值为10指。<br/>默认值：1 |
| direction | PanDirection | 否 | 触发拖动的手势方向，此枚举值支持逻辑与(&amp;)和逻辑或（\|）运算。<br/>默认值：PanDirection.All |
| distance | number | 否 | 最小拖动识别距离，单位为vp。<br/>默认值：5.0<br/>**说明：**<br/>> tab滑动与该拖动手势事件同时存在时，可将distance值设为1，使拖动更灵敏，避免造成事件错乱。 |
| distance | number | 否 | 最小拖动识别距离，单位为vp。<br/>默认值：5<br/>**说明：**<br/>> tab滑动与该拖动手势事件同时存在时，可将distance值设为1，使拖动更灵敏，避免造成事件错乱。 |
## PanDirection枚举说明
......@@ -73,28 +73,47 @@ PanGestureOptions(value?: { fingers?: number; direction?: PanDirection; distance
@Entry
@Component
struct PanGestureExample {
@State offsetX: number = 0
@State offsetY: number = 0
@State offsetX: number = 0;
@State offsetY: number = 0;
@State positionX: number = 0;
@State positionY: number = 0;
private panOption: PanGestureOptions = new PanGestureOptions({ direction: PanDirection.Left | PanDirection.Right });
build() {
Flex({ direction: FlexDirection.Column, alignItems: ItemAlign.Center, justifyContent: FlexAlign.SpaceBetween }) {
Column() {
Column() {
Text('PanGesture offset:\nX: ' + this.offsetX + '\n' + 'Y: ' + this.offsetY)
}
.height(100).width(200).padding(20).border({ width: 1 }).margin(80)
.translate({ x: this.offsetX, y: this.offsetY, z: 5 })
.height(200)
.width(300)
.padding(20)
.border({ width: 3 })
.margin(50)
.translate({ x: this.offsetX, y: this.offsetY, z: 0 })
// 左右拖动触发该手势事件
.gesture(
PanGesture({})
PanGesture(this.panOption)
.onActionStart((event: GestureEvent) => {
console.info('Pan start')
console.info('Pan start');
})
.onActionUpdate((event: GestureEvent) => {
this.offsetX = event.offsetX
this.offsetY = event.offsetY
this.offsetX = this.positionX + event.offsetX;
this.offsetY = this.positionY + event.offsetY;
})
.onActionEnd(() => {
console.info('Pan end')
this.positionX = this.offsetX;
this.positionY = this.offsetY;
console.info('Pan end');
})
)
Button('修改PanGesture触发条件')
.onClick(() => {
// 将PanGesture手势事件触发条件改为双指以任意方向拖动
this.panOption.setDirection(PanDirection.All);
this.panOption.setFingers(2);
})
}
}
}
```
......
zh-cn/application-dev/reference/arkui-ts/ts-basic-gestures-pinchgesture.md
浏览文件 @ fc86495c
......@@ -16,7 +16,7 @@ PinchGesture(value?: { fingers?: number, distance?: number })
| 参数名称 | 参数类型 | 必填 | 参数描述 |
| -------- | -------- | -------- | -------- |
| fingers | number | 否 | 触发捏合的最少手指数,&nbsp;最小为2指，最大为5指。<br/>默认值：2 |
| distance | number | 否 | 最小识别距离，单位为vp。<br/>默认值：3.0 |
| distance | number | 否 | 最小识别距离，单位为vp。<br/>默认值：3 |
## 事件
......@@ -36,26 +36,40 @@ PinchGesture(value?: { fingers?: number, distance?: number })
@Entry
@Component
struct PinchGestureExample {
@State scaleValue: number = 1
@State scaleValue: number = 1;
@State pinchValue: number = 1;
@State pinchX: number = 0;
@State pinchY: number = 0;
build() {
Flex({ direction: FlexDirection.Column, alignItems: ItemAlign.Center, justifyContent: FlexAlign.SpaceBetween }) {
Text('PinchGesture scale:' + this.scaleValue)
Column() {
Column() {
Text('PinchGesture scale:\n' + this.scaleValue)
Text('PinchGesture center:\n(' + this.pinchX + ',' + this.pinchY + ')')
}
.height(100).width(200).padding(20).border({ width: 1 }).margin(80)
.scale({ x: this.scaleValue, y: this.scaleValue, z: this.scaleValue })
.height(200)
.width(300)
.padding(20)
.border({ width: 3 })
.margin({ top: 100 })
.scale({ x: this.scaleValue, y: this.scaleValue, z: 1 })
// 三指捏合触发该手势事件
.gesture(
PinchGesture()
PinchGesture({ fingers: 3 })
.onActionStart((event: GestureEvent) => {
console.info('Pinch start')
console.info('Pinch start');
})
.onActionUpdate((event: GestureEvent) => {
this.scaleValue = event.scale
this.scaleValue = this.pinchValue * event.scale;
this.pinchX = event.pinchCenterX;
this.pinchY = event.pinchCenterY;
})
.onActionEnd(() => {
console.info('Pinch end')
this.pinchValue = this.scaleValue;
console.info('Pinch end');
})
)
}.width('100%')
}
}
```
......
zh-cn/application-dev/reference/arkui-ts/ts-basic-gestures-rotationgesture.md
浏览文件 @ fc86495c
......@@ -16,7 +16,7 @@ RotationGesture(value?: { fingers?: number, angle?: number })
| 参数名称 | 参数类型 | 必填 | 参数描述 |
| -------- | -------- | -------- | -------- |
| fingers | number | 否 | 触发旋转的最少手指数,&nbsp;最小为2指，最大为5指。<br/>默认值：2 |
| angle | number | 否 | 触发旋转手势的最小改变度数，单位为deg。<br/>默认值：1.0 |
| angle | number | 否 | 触发旋转手势的最小改变度数，单位为deg。<br/>默认值：1 |
## 事件
......@@ -36,26 +36,35 @@ RotationGesture(value?: { fingers?: number, angle?: number })
@Entry
@Component
struct RotationGestureExample {
@State angle: number = 0
@State angle: number = 0;
@State rotateValue: number = 0;
build() {
Flex({ direction: FlexDirection.Column, alignItems: ItemAlign.Center, justifyContent: FlexAlign.SpaceBetween }) {
Column() {
Column() {
Text('RotationGesture angle:' + this.angle)
}
.height(100).width(200).padding(20).border({ width:1 })
.margin(80).rotate({ x:1, y:2, z:3, angle: this.angle })
.height(200)
.width(300)
.padding(20)
.border({ width: 3 })
.margin(80)
.rotate({ angle: this.angle })
// 双指旋转触发该手势事件
.gesture(
RotationGesture()
.onActionStart((event: GestureEvent) => {
console.log('Rotation start')
console.info('Rotation start');
})
.onActionUpdate((event: GestureEvent) => {
this.angle = event.angle
this.angle = this.rotateValue + event.angle;
})
.onActionEnd(() => {
console.log('Rotation end')
this.rotateValue = this.angle;
console.info('Rotation end');
})
)
}.width('100%')
}
}
```
......
zh-cn/application-dev/reference/arkui-ts/ts-basic-gestures-swipegesture.md
浏览文件 @ fc86495c
# SwipeGesture
用于触发滑动事件，滑动最小速度为100vp/s时识别成功。
用于触发滑动事件，滑动速度大于100vp/s时可识别成功。
> **说明：**
>
......@@ -24,8 +24,8 @@ SwipeGesture(value?: { fingers?: number; direction?: SwipeDirection; speed?: num
| 名称 | 描述 |
| -------- | -------- |
| All | 所有方向。 |
| Horizontal | 水平方向。 |
| Vertical | 竖直方向。 |
| Horizontal | 水平方向，手指滑动方向与x轴夹角小于45度时触发。 |
| Vertical | 竖直方向，手指滑动方向与y轴夹角小于45度时触发。 |
| None | 任何方向均不可触发。 |
......@@ -35,7 +35,6 @@ SwipeGesture(value?: { fingers?: number; direction?: SwipeDirection; speed?: num
| -------- | -------- |
| onAction(event:(event?:&nbsp;[GestureEvent](ts-gesture-settings.md#gestureevent对象说明))&nbsp;=&gt;&nbsp;void) | 滑动手势识别成功回调。 |
![zh-cn_image_0000001231374559](figures/zh-cn_image_0000001231374661.png)
## 示例
```ts
......@@ -43,25 +42,29 @@ SwipeGesture(value?: { fingers?: number; direction?: SwipeDirection; speed?: num
@Entry
@Component
struct SwipeGestureExample {
@State rotateAngle : number = 0
@State speed : number = 1
@State rotateAngle: number = 0;
@State speed: number = 1;
build() {
Column() {
Text("SwipGesture speed ： " + this.speed)
Text("SwipGesture angle ： " + this.rotateAngle)
Column() {
Text("SwipeGesture speed\n" + this.speed)
Text("SwipeGesture angle\n" + this.rotateAngle)
}
.position({x: 80, y: 200})
.border({width:2})
.width(260).height(260)
.rotate({x: 0, y: 0, z: 1, angle: this.rotateAngle})
.border({ width: 3 })
.width(300)
.height(200)
.margin(100)
.rotate({ angle: this.rotateAngle })
// 单指竖直方向滑动时触发该事件
.gesture(
SwipeGesture({fingers: 1, direction: SwipeDirection.Vertical})
SwipeGesture({ direction: SwipeDirection.Vertical })
.onAction((event: GestureEvent) => {
this.speed = event.speed
this.rotateAngle = event.angle
this.speed = event.speed;
this.rotateAngle = event.angle;
})
)
}.width('100%')
}
}
```
......
zh-cn/application-dev/reference/arkui-ts/ts-basic-gestures-tapgesture.md
浏览文件 @ fc86495c
# TapGesture
支持单次点击、多次点击识别。
支持单次或多次点击识别。
> **说明：**
>
......@@ -15,8 +15,8 @@ TapGesture(value?: { count?: number, fingers?: number })
| 参数名称 | 参数类型 | 必填 | 参数描述 |
| -------- | -------- | -------- | -------- |
| count | number | 否 | 识别的连续点击次数。如果设置小于1，会被转化为默认值。<br/>默认值：1<br/>>&nbsp;&nbsp;**说明：**<br/>>&nbsp;如配置多击，上一次抬起和下一次按下的超时时间为300毫秒（ms）。 |
| fingers | number | 否 | 触发点击的最少手指数，最小为1指，&nbsp;最大为10指。<br/>默认值：1<br/>>&nbsp;&nbsp;**说明：**<br/>>&nbsp;1.&nbsp;当配置多指时，第一根手指按下后300毫秒（ms）内未有足够的手指数按下，手势识别失败。<br/>>&nbsp;2.&nbsp;实际点击手指数超过配置值，手势识别失败。 |
| count | number | 否 | 识别的连续点击次数。如果设置小于1，会被转化为默认值。<br/>默认值：1<br/>>&nbsp;&nbsp;**说明：**<br/>>&nbsp;如配置多击，上一次抬起和下一次按下的超时时间为300毫秒。 |
| fingers | number | 否 | 触发点击的手指数，最小为1指，&nbsp;最大为10指。<br/>默认值：1<br/>>&nbsp;&nbsp;**说明：**<br/>>&nbsp;1.&nbsp;当配置多指时，第一根手指按下后300毫秒内未有足够的手指数按下，手势识别失败。<br/>>&nbsp;2.&nbsp;实际点击手指数超过配置值，手势识别失败。 |
## 事件
......@@ -33,20 +33,25 @@ TapGesture(value?: { count?: number, fingers?: number })
@Entry
@Component
struct TapGestureExample {
@State value: string = ''
@State value: string = '';
build() {
Flex({ direction: FlexDirection.Column, alignItems: ItemAlign.Center, justifyContent: FlexAlign.SpaceBetween }) {
Text('Click twice')
Text(this.value)
}
.height(200).width(300).padding(60).border({ width: 1 }).margin(30)
Column() {
// 单指双击文本触发手势事件
Text('Click twice').fontSize(28)
.gesture(
TapGesture({ count: 2 })
.onAction(() => {
this.value = 'TapGesture onAction'
.onAction((event: GestureEvent) => {
this.value = JSON.stringify(event.fingerList[0]);
})
)
Text(this.value)
}
.height(200)
.width(300)
.padding(20)
.border({ width: 3 })
.margin(30)
}
}
```
......
zh-cn/application-dev/reference/arkui-ts/ts-combined-gestures.md
浏览文件 @ fc86495c
# 组合手势
手势识别组，多种手势组合为复合手势，支持连续识别、并行识别和互斥识别。
手势识别组合，即多种手势组合为复合手势，支持连续识别、并行识别和互斥识别。
> **说明：**
>
> 从API Version 7开始支持。后续版本如有新增内容，则采用上角标单独标记该内容的起始版本。
......@@ -38,39 +39,55 @@ GestureGroup(mode: GestureMode, ...gesture: GestureType[])
@Entry
@Component
struct GestureGroupExample {
@State count: number = 0
@State offsetX: number = 0
@State offsetY: number = 0
@State borderStyles: BorderStyle = BorderStyle.Solid
@State count: number = 0;
@State offsetX: number = 0;
@State offsetY: number = 0;
@State positionX: number = 0;
@State positionY: number = 0;
@State borderStyles: BorderStyle = BorderStyle.Solid;
build() {
Flex({ direction: FlexDirection.Column, alignItems: ItemAlign.Center, justifyContent: FlexAlign.SpaceBetween }) {
Column() {
Text('sequence gesture\n' + 'LongPress onAction:' + this.count + '\nPanGesture offset:\nX: ' + this.offsetX + '\n' + 'Y: ' + this.offsetY)
}.translate({ x: this.offsetX, y: this.offsetY, z: 5 })
.height(100).width(200).padding(10).margin(80).border({ width: 1, style: this.borderStyles })
}
.translate({ x: this.offsetX, y: this.offsetY, z: 0 })
.height(150)
.width(200)
.padding(20)
.margin(20)
.border({ width: 3, style: this.borderStyles })
.gesture(
//以下组合手势为顺序识别，当长按手势事件未正常触发时则不会触发拖动手势事件
GestureGroup(GestureMode.Sequence,
LongPressGesture({ repeat: true })
.onAction((event: GestureEvent) => {
if (event.repeat) {this.count++}
console.log('LongPress onAction')
if (event.repeat) {
this.count++;
}
console.info('LongPress onAction');
})
.onActionEnd(() => {
console.log('LongPress end')
console.info('LongPress end');
}),
PanGesture({})
PanGesture()
.onActionStart(() => {
this.borderStyles = BorderStyle.Dashed
console.log('pan start')
this.borderStyles = BorderStyle.Dashed;
console.info('pan start');
})
.onActionUpdate((event: GestureEvent) => {
this.offsetX = event.offsetX
this.offsetY = event.offsetY
console.log('pan update')
this.offsetX = this.positionX + event.offsetX;
this.offsetY = this.positionY + event.offsetY;
console.info('pan update');
})
.onActionEnd(() => {
this.positionX = this.offsetX;
this.positionY = this.offsetY;
this.borderStyles = BorderStyle.Solid;
console.info('pan end');
})
)
.onCancel(() => {
console.log('sequence gesture canceled')
console.info('sequence gesture canceled');
})
)
}
......
zh-cn/application-dev/reference/arkui-ts/ts-gesture-settings.md
浏览文件 @ fc86495c
......@@ -3,15 +3,14 @@
为组件绑定不同类型的手势事件，并设置事件的响应方法。
> **说明：**
>
> 从API Version 7开始支持。后续版本如有新增内容，则采用上角标单独标记该内容的起始版本。
## 绑定手势识别
通过如下属性给组件绑定手势识别，手势识别成功后可以通过事件回调通知组件。
| 名称 | 参数类型 | 默认值 | 描述 |
| -------- | -------- | -------- | -------- |
| gesture | gesture:&nbsp;[GestureType](#gesturetype),<br/>mask?:&nbsp;[GestureMask](#gesturemask枚举说明) | gesture:&nbsp;-，<br/>mask:&nbsp;GestureMask.Normal | 绑定手势。<br/>- gesture:&nbsp;绑定的手势类型，&nbsp;<br>- mask:&nbsp;事件响应设置。 |
......@@ -37,10 +36,9 @@
| Normal | 不屏蔽子组件的手势，按照默认手势识别顺序进行识别。 |
| IgnoreInternal | 屏蔽子组件的手势，仅当前容器的手势进行识别。<br/>子组件上系统内置的手势不会被屏蔽，如子组件为List组件时，内置的滑动手势仍然会触发。 |
## 响应手势事件
组件通过手势事件绑定不同GestureType的手势对象，各手势对象提供的事件响应手势操作，提供手势相关信息。下面通过TapGesture对象的onAction事件响应点击事件，获取事件相关信息。其余手势对象的事件定义见各个手势对象章节。
组件通过手势事件绑定不同GestureType的手势对象，各手势对象在响应手势操作的事件回调中提供手势相关信息。下面通过TapGesture手势对象的onAction事件响应点击事件，获取事件相关信息。其余手势对象的事件定义见各个手势对象章节。
- TapGesture事件说明
| 名称 | 功能描述 |
......@@ -50,18 +48,18 @@
## GestureEvent对象说明
| 名称 | 类型 | 描述 |
| -------- | -------- | -------- |
| timestamp<sup>8+</sup> | number | 事件时间戳。 |
| target<sup>8+</sup> | [EventTarget](ts-universal-events-click.md#eventtarget8对象说明) | 触发手势事件的元素对象显示区域。 |
| source<sup>8+</sup> | [SourceType](#sourcetype枚举说明) | 事件输入设备。 |
| repeat | boolean | 是否为重复触发事件，用于LongPressGesture手势触发场景。 |
| fingerList<sup>8+</sup> | [FingerInfo](#fingerinfo对象说明)[] | 触发事件的所有手指信息，用于LongPressGesture与TapGesture手势触发场景。 |
| offsetX | number | 手势事件x轴相对偏移量，单位为vp，用于PanGesture手势触发场景，从左向右滑动offsetX为正，反之为负。 |
| offsetY | number | 手势事件y轴相对偏移量，单位为vp，用于PanGesture手势触发场景，从上向下滑动offsetY为正，反之为负。 |
| angle | number | 用于RotationGesture手势触发场景时，表示旋转角度；用于SwipeGesture手势触发场景时，表示滑动手势的角度，即两根手指间的线段与水平方向的夹角变化的度数。<br/>>&nbsp;&nbsp;**说明：**<br/>>&nbsp;角度计算方式：滑动手势被识别到后，连接两根手指之间的线被识别为起始线条，随着手指的滑动，手指之间的线条会发生旋转，根据起始线条两端点和当前线条两端点的坐标，使用反正切函数分别计算其相对于水平方向的夹角，最后arctan2(cy2-cy1,cx2-cx1)-arctan2(y2-y1,x2-x1)为旋转的角度。以起始线条为坐标系，顺时针旋转为0到180度，逆时针旋转为-180到0度。 |
| speed<sup>8+</sup> | number | 滑动手势速度，即所有手指滑动的平均速度，单位为vp/秒，用于SwipeGesture手势触发场景。 |
| angle | number | 用于RotationGesture手势触发场景时，表示旋转角度。<br/>用于SwipeGesture手势触发场景时，表示滑动手势的角度，即两根手指间的线段与水平方向的夹角变化的度数。<br/>>&nbsp;&nbsp;**说明：**<br/>>&nbsp;角度计算方式：滑动手势被识别到后，连接两根手指之间的线被识别为起始线条，随着手指的滑动，手指之间的线条会发生旋转，根据起始线条两端点和当前线条两端点的坐标，使用反正切函数分别计算其相对于水平方向的夹角，最后arctan2(cy2-cy1,cx2-cx1)-arctan2(y2-y1,x2-x1)为旋转的角度。以起始线条为坐标系，顺时针旋转为0到180度，逆时针旋转为-180到0度。 |
| scale | number | 缩放比例，用于PinchGesture手势触发场景。 |
| pinchCenterX | number | 捏合手势中心点相对于当前组件元素左上角x轴坐标，单位为vp，用于PinchGesture手势触发场景。 |
| pinchCenterY | number | 捏合手势中心点相对于当前组件元素左上角y轴坐标，单位为vp，用于PinchGesture手势触发场景。 |
| speed<sup>8+</sup> | number | 滑动手势速度，即所有手指滑动的平均速度，单位为vp/秒，用于SwipeGesture手势触发场景。 |
| fingerList<sup>8+</sup> | [FingerInfo](#fingerinfo对象说明)[] | 触发事件的所有手指信息，用于LongPressGesture与TapGesture手势触发场景。 |
| timestamp<sup>8+</sup> | number | 事件时间戳。 |
| target<sup>8+</sup> | [EventTarget](ts-universal-events-click.md#eventtarget8对象说明) | 触发手势事件的元素对象显示区域。 |
| source<sup>8+</sup> | [SourceType](#sourcetype枚举说明) | 事件输入设备。 |
## SourceType枚举说明
| 名称 | 描述 |
......@@ -87,30 +85,54 @@
@Entry
@Component
struct GestureSettingsExample {
@State value: string = ''
@State priorityTestValue: string = '';
@State parallelTestValue: string = '';
build() {
Column(){
Column() {
Text('Click\n' + this.value)
Column() {
Text('TapGesture:' + this.priorityTestValue).fontSize(28)
.gesture(
TapGesture()
.onAction(() => {
this.value = 'gesture onAction'
this.priorityTestValue += '\nText';
}))
}.height(200).width(300).padding(60).border({ width: 1 })
//设置为priorityGesture时，会优先识别该绑定手势忽略内部gesture手势
}
.height(200)
.width(250)
.padding(20)
.margin(20)
.border({ width: 3 })
// 设置为priorityGesture时，点击文本会忽略Text组件的TapGesture手势事件，优先识别父组件Column的TapGesture手势事件
.priorityGesture(
TapGesture()
.onAction((event: GestureEvent) => {
this.value = 'priorityGesture onAction' + '\ncomponent globalPos:('
+ event.target.area.globalPosition.x + ',' + event.target.area.globalPosition.y + ')\nwidth:'
+ event.target.area.width + '\nheight:' + event.target.area.height
}), GestureMask.IgnoreInternal
)
}.padding(60)
this.priorityTestValue += '\nColumn';
}), GestureMask.IgnoreInternal)
Column() {
Text('TapGesture:' + this.parallelTestValue).fontSize(28)
.gesture(
TapGesture()
.onAction(() => {
this.parallelTestValue += '\nText';
}))
}
.height(200)
.width(250)
.padding(20)
.margin(20)
.border({ width: 3 })
// 设置为parallelGesture时，点击文本会同时触发子组件Text与父组件Column的TapGesture手势事件
.parallelGesture(
TapGesture()
.onAction((event: GestureEvent) => {
this.parallelTestValue += '\nColumn';
}), GestureMask.Normal)
}
}
}
```
![zh-cn_image_0000001210195016](figures/zh-cn_image_0000001210195016.gif)
Markdown is supported
0% 或 .
You are about to add 0 people to the discussion. Proceed with caution.
先完成此消息的编辑！
想要评论请 注册 或