diff --git a/zh-cn/application-dev/reference/arkui-js/figures/zh-cn-attributes.gif b/zh-cn/application-dev/reference/arkui-js/figures/zh-cn-attributes.gif new file mode 100644 index 0000000000000000000000000000000000000000..528b70859a14ea9988a5eac95e40b203149e05ec Binary files /dev/null and b/zh-cn/application-dev/reference/arkui-js/figures/zh-cn-attributes.gif differ 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 d4bd6ddb2e4ebe49e6d21e3c39bc49e3dc07b497..986ffbdd8aa4c79c45c7d0303d4e53b7237ceff8 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 @@ -32,3 +32,71 @@ > **说明：** > 属性和样式不能混用，不能在属性字段中进行样式设置。 + +## 示例 + +```html + +
+ + + + {{ $item.value }} + + +
+``` + +```css +/* xxx.css */ +#container { + flex-direction: column; + width: 100%; + margin-top: 10px; +} +.text { + font-size: 50px; + font-weight: 500; + margin-left: 12px; +} +.listItem { + width: 100%; + height: 100px; + line-height: 60px; + border-bottom: 1px solid #DEDEDE; + font-size: 20px; +} +.btn{ + width: 280px; + font-size: 26px; + margin: 10px 0; +} +``` + +```js +/* xxx.js */ +export default { + data: { + visible: true, + display: true, + title: "", + i: 4, + array: [ + {"value": "列表文本0"}, + {"value": "列表文本1"}, + {"value": "列表文本2"}, + {"value": "列表文本3"}, + ], + }, + toggleShow: function() { + this.array.push({"value": "列表文本" + this.i }) + this.i++ + }, + toggleDisplay: function() { + this.display = !this.display + }, +} +``` + +![zh-cn-attributes](figures/zh-cn-attributes.gif) \ No newline at end of file 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 c0701a8c5e8de03c21587b65020e5afb8d5c3cd3..9a5db24f0ab945ebbf01b0eb185c1a8c0e7124ae 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 @@ -13,29 +13,29 @@ 相对于私有事件，大部分组件都可以绑定如下事件。 -| 名称 | 参数 | 描述 | 是否支持冒泡 | -| ------------------------ | ---------- | ---------------------------------------- | ---------------------------------------- | -| touchstart | TouchEvent | 手指刚触摸屏幕时触发该事件。TouchEvent具体可参考表2 。 | 是5+ | -| touchmove | TouchEvent | 手指触摸屏幕后移动时触发该事件。 | 是5+ | -| touchcancel | TouchEvent | 手指触摸屏幕中动作被打断时触发该事件。 | 是5+ | -| touchend | TouchEvent | 手指触摸结束离开屏幕时触发该事件。 | 是5+ | -| click | - | 点击动作触发该事件。 | 是6+ | -| doubleclick7+ | - | 双击动作触发该事件 | 否
从API Version 9 开始支持冒泡。 | -| longpress | - | 长按动作触发该事件。 | 否
从API Version 9 开始支持冒泡。 | -| swipe5+ | SwipeEvent | 组件上快速滑动后触发该事件。 SwipeEvent具体可参考表4 。 | 否
从API Version 9 开始支持冒泡。 | -| attached6+ | - | 当前组件节点挂载在渲染树后触发。 | 否 | -| detached6+ | - | 当前组件节点从渲染树中移除后触发。 | 否 | -| pinchstart7+ | PinchEvent | 手指开始执行捏合操作时触发该事件。
PinchEvent具体可参考表5。 | 否 | -| pinchupdate7+ | PinchEvent | 手指执行捏合操作过程中触发该事件。 | 否 | -| pinchend7+ | PinchEvent | 手指捏合操作结束离开屏幕时触发该事件。 | 否 | -| pinchcancel7+ | PinchEvent | 手指捏合操作被打断时触发该事件。 | 否 | -| dragstart7+ | DragEvent | 用户开始拖拽时触发该事件。
DragEvent具体可参考表6。 | 否 | -| drag7+ | DragEvent | 拖拽过程中触发该事件。 | 否 | -| dragend7+ | DragEvent | 用户拖拽完成后触发。 | 否 | -| dragenter7+ | DragEvent | 进入释放目标时触发该事件。 | 否 | -| dragover7+ | DragEvent | 在释放目标内拖动时触发。 | 否 | -| dragleave7+ | DragEvent | 离开释放目标区域时触发。 | 否 | -| drop7+ | DragEvent | 在可释放目标区域内释放时触发。 | 否 | +| 名称 | 参数 | 描述 | 是否支持冒泡 | 是否支持捕获 | +| ------------------------ | ---------- | ------------------------------------------------------------ | ----------------------------------------------------- | --------------- | +| touchstart | TouchEvent | 手指刚触摸屏幕时触发该事件。TouchEvent具体可参考表2 。 | 是5+ | 是5+ | +| touchmove | TouchEvent | 手指触摸屏幕后移动时触发该事件。 | 是5+ | 是5+ | +| touchcancel | TouchEvent | 手指触摸屏幕中动作被打断时触发该事件。 | 是5+ | 是5+ | +| touchend | TouchEvent | 手指触摸结束离开屏幕时触发该事件。 | 是5+ | 是5+ | +| click | - | 点击动作触发该事件。 | 是6+ | 否 | +| doubleclick7+ | - | 双击动作触发该事件 | 否
从API Version 9 开始支持冒泡。 | 否 | +| longpress | - | 长按动作触发该事件。 | 否
从API Version 9 开始支持冒泡。 | 否 | +| swipe5+ | SwipeEvent | 组件上快速滑动后触发该事件。 SwipeEvent具体可参考表4 。 | 否
从API Version 9 开始支持冒泡。 | 否 | +| attached6+ | - | 当前组件节点挂载在渲染树后触发。 | 否 | 否 | +| detached6+ | - | 当前组件节点从渲染树中移除后触发。 | 否 | 否 | +| pinchstart7+ | PinchEvent | 手指开始执行捏合操作时触发该事件。
PinchEvent具体可参考表5。 | 否 | 否 | +| pinchupdate7+ | PinchEvent | 手指执行捏合操作过程中触发该事件。 | 否 | 否 | +| pinchend7+ | PinchEvent | 手指捏合操作结束离开屏幕时触发该事件。 | 否 | 否 | +| pinchcancel7+ | PinchEvent | 手指捏合操作被打断时触发该事件。 | 否 | 否 | +| dragstart7+ | DragEvent | 用户开始拖拽时触发该事件。
DragEvent具体可参考表6。 | 否 | 否 | +| drag7+ | DragEvent | 拖拽过程中触发该事件。 | 否 | 否 | +| dragend7+ | DragEvent | 用户拖拽完成后触发。 | 否 | 否 | +| dragenter7+ | DragEvent | 进入释放目标时触发该事件。 | 否 | 否 | +| dragover7+ | DragEvent | 在释放目标内拖动时触发。 | 否 | 否 | +| dragleave7+ | DragEvent | 离开释放目标区域时触发。 | 否 | 否 | +| drop7+ | DragEvent | 在可释放目标区域内释放时触发。 | 否 | 否 | > **说明：** 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 931411f1029df4f7abdc68e53ae7cbf619c8ee7f..156b017017cff2248decf6a96df8a2274ae67ace 100644 --- a/zh-cn/application-dev/reference/arkui-ts/Readme-CN.md +++ b/zh-cn/application-dev/reference/arkui-ts/Readme-CN.md @@ -86,6 +86,7 @@ - [Web](ts-basic-components-web.md) - [XComponent](ts-basic-components-xcomponent.md) - 容器组件 + - [AbilityComponent](ts-container-ability-component.md) - [AlphabetIndexer](ts-container-alphabet-indexer.md) - [Badge](ts-container-badge.md) - [Column](ts-container-column.md) diff --git a/zh-cn/application-dev/reference/arkui-ts/ts-container-ability-component.md b/zh-cn/application-dev/reference/arkui-ts/ts-container-ability-component.md new file mode 100644 index 0000000000000000000000000000000000000000..d6717d2d95ec031d03f99441c2504acc2dd0d15d --- /dev/null +++ b/zh-cn/application-dev/reference/arkui-ts/ts-container-ability-component.md @@ -0,0 +1,114 @@ +# AbilityComponent + +> **说明：** +> +> 该组件从API Version 9开始支持。 +> +> 本组件均为系统接口，三方应用不支持调用。 + + +独立显示Ability的容器。 + +## 使用约束 + +使用AbilityComponent必须是平台签名使用，并申请权限。 + +AbilityComponent为独立层次渲染，不能再之上叠加其他显示内容。 + +AbilityComponent不支持处理输入事件，事件不经过当前Ability，直接分发给内部的Ability处理。 + +AbilityComponent需设置且只能设置width、height，且width、height不支持动态更新。 + +被启动的Ability必须是resizeable。 + +被启动的Ability需要设置为多任务栏不显示。 + +## 权限列表 + +ohos.permission.INFUSE_EVENTS + +ohos.permission.CONTROL_ABILITY_STACKS + +ohos.permission.INTEGRATED_ABILITY + +ohos.permission.INTEGRATED_INTERIOR_WINDOW + + +## 子组件 + +无 + + +## 接口 + +AbilityComponent(value: {want : Want, controller? : AbilityController}) + +- 参数 + | 参数名 | 参数类型 | 必填 | 默认值 | 参数描述 | + | -------- | -------- | -------- | -------- | -------- | + | want | [Want](../../reference/apis/js-apis-application-Want.md) | 是 | - | 默认加载的Ability描述。 | + | controller | [AbilityController](#abilityController) | 否 | - | Ability控制器。 | + + +## 事件 + +| 名称 | 功能描述 | +| -------- | -------- | +| onReady() => void | AbilityComponent环境启动完成时的回调，之后可使用AbilityComponent的方法。 | +| onDestroy() => void | AbilityComponent环境销毁时的回调。 | +| onAbilityCreated(name: string) => void | 加载Ability时触发，name为Ability名。 | +| onAbilityMoveToFont() => void | 当Ability移动到前台时触发。 | +| onAbilityWillRemove() => void | Ability移除之前触发。 | + +## AbilityController + +Ability控制器，提供AbilityComponent的控制接口。 + +| 名称 | 功能描述 | +| --------------------------------------- | ------------------------------------------------------------ | +| startAbility() => want | 在AbilityComponent内部加载Ability。
want：要加载的Ability描述信息。 | +| preformBackPress() => void | 在AbilityComponent内部执行返回操作。 | +| getStackCount() => void | 获取AbilityComponent内部任务栈中任务的个数。 | + + +## 示例 + +```ts +// xxx.ets +@Entry +@Component +struct MyComponent { + @State controller: AbilityController = new AbilityController() + + build() { + Column() { + AbilityComponent({ + want: { + bundleName: '', + abilityName: '' + }, + controller: this.controller + }) + .onReady(() => { + console.log('AbilityComponent ready'); + }) + .onDestory(() => { + console.log('AbilityComponent destory'); + }) + Button("Start New") + .onClick(() => { + this.controller.startAbility({ + bundleName: '', + abilityName: '' + }); + }) + Button("Back") + .onClick(() => { + if (this.controller.getStacjCount() > 1) { + this.controller.preformBackPress(); + } + }) + } + } +} +``` 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 86e054475822bfc9b21f14af8d46a138e2a1b57a..5ff8def81916cc2620824bca29910b1b74457e74 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 @@ -23,10 +23,10 @@ - RouteType枚举说明 - | 名称 | 描述 | - | ---- | ---------------------------------------- | - | Pop | PageA跳转到PageB时，PageA为Exit+Push，PageB为Enter+Push。 | - | Push | PageB返回至PageA时，PageA为Enter+Pop，PageB为Exit+Pop。 | + | 名称 | 描述 | + | ---- | ---------------- | + | Pop | 重定向指定页面。 | + | Push | 跳转到下一页面。 | ## 属性 diff --git a/zh-cn/application-dev/ui/ts-other-states-observed-objectlink.md b/zh-cn/application-dev/ui/ts-other-states-observed-objectlink.md index 73f9e1e94a07bb851e3fada592e12d7dd299bb5b..ab86d632486c287664da6a25e227fb5b383e31c5 100644 --- a/zh-cn/application-dev/ui/ts-other-states-observed-objectlink.md +++ b/zh-cn/application-dev/ui/ts-other-states-observed-objectlink.md @@ -41,7 +41,8 @@ ### 案例1 -``` +```ts +//父组件ViewB中的类对象ClassB，其包含的对象ClassA与子组件ViewA数据同步时，通过ObjectLink将数据c值的变化状态通知给父组件同步变化。 @Observed class ClassA { public name : string; @@ -77,7 +78,7 @@ struct ViewA { .width(100) .margin(2) .onClick(() => { - this.a = new ClassA(0); // ERROR, this.a is immutable + this.a = new ClassA(0); // 错误：ObjectLink装饰的变量a是不可变的 }) } } @@ -118,7 +119,8 @@ struct ViewB { ### 案例2 -``` +```ts +//父组件ViewB中的类对象ClassA与子组件ViewA保持数据同步时，可以使用@ObjectLink和@Observed，绑定该数据对象的父组件和其他子组件同步更新 var nextID: number = 0; @Observed class ClassA { @@ -142,7 +144,7 @@ struct ViewA { .onClick(() => { this.a.c += 1; }) - } + }.margin({ top: 10 }) } } @@ -161,14 +163,17 @@ struct ViewB { ViewA({label: `ViewA this.arrA[last]`, a: this.arrA[this.arrA.length-1]}) Button(`ViewB: reset array`) + .margin({ top: 10 }) .onClick(() => { this.arrA = [ new ClassA(0), new ClassA(0) ]; }) Button(`ViewB: push`) + .margin({ top: 10 }) .onClick(() => { this.arrA.push(new ClassA(0)) }) Button(`ViewB: shift`) + .margin({ top: 10 }) .onClick(() => { this.arrA.shift() })