Skip to content

D
Docs

OpenHarmony / Docs
1 年多 前同步成功

通知 159
Star 292
Fork 28
D
Docs
提交 03cc852f 编写于 作者: T tianyu
浏览文件
操作

updata @observed and abilityComponent 

Signed-off-by: Ntianyu <tianyu55@h-partners.com>
上级 37adceac
隐藏空白更改
内联 并排
Showing with 219 addition and 31 deletion
zh-cn/application-dev/reference/arkui-js/js-components-common-attributes.md
浏览文件 @ 03cc852f
......@@ -32,3 +32,71 @@
> **说明：**
> 属性和样式不能混用，不能在属性字段中进行样式设置。
## 示例
```html
<!-- xxx.hml -->
<div id="container">
<button class="btn" type="capsule" value="toggleDisplay" onclick="toggleDisplay"></button>
<list class="list">
<list-item for="{{ array }}" class="listItem">
<text class="text" onclick="toggleShow" show="{{ visible }}"
if="{{ display }}">{{ $item.value }}</text>
</list-item>
</list>
</div>
```
```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
zh-cn/application-dev/reference/arkui-js/js-components-common-events.md
浏览文件 @ 03cc852f
......@@ -13,29 +13,29 @@
相对于私有事件，大部分组件都可以绑定如下事件。
| 名称 | 参数 | 描述 | 是否支持冒泡 |
| ------------------------ | ---------- | ---------------------------------------- | ---------------------------------------- |
| touchstart | TouchEvent | 手指刚触摸屏幕时触发该事件。TouchEvent具体可参考表2 。 | 是<sup>5+</sup> |
| touchmove | TouchEvent | 手指触摸屏幕后移动时触发该事件。 | 是<sup>5+</sup> |
| touchcancel | TouchEvent | 手指触摸屏幕中动作被打断时触发该事件。 | 是<sup>5+</sup> |
| touchend | TouchEvent | 手指触摸结束离开屏幕时触发该事件。 | 是<sup>5+</sup> |
| click | - | 点击动作触发该事件。 | 是<sup>6+</sup> |
| doubleclick<sup>7+</sup> | - | 双击动作触发该事件 | 否<br/> 从API&nbsp;Version&nbsp;9&nbsp;开始支持冒泡。 |
| longpress | - | 长按动作触发该事件。 | 否<br/>从API&nbsp;Version&nbsp;9&nbsp;开始支持冒泡。 |
| swipe<sup>5+</sup> | SwipeEvent | 组件上快速滑动后触发该事件。 SwipeEvent具体可参考表4 。 | 否<br/>从API&nbsp;Version&nbsp;9&nbsp;开始支持冒泡。 |
| attached<sup>6+</sup> | - | 当前组件节点挂载在渲染树后触发。 | 否 |
| detached<sup>6+</sup> | - | 当前组件节点从渲染树中移除后触发。 | 否 |
| pinchstart<sup>7+</sup> | PinchEvent | 手指开始执行捏合操作时触发该事件。<br/>PinchEvent具体可参考表5。 | 否 |
| pinchupdate<sup>7+</sup> | PinchEvent | 手指执行捏合操作过程中触发该事件。 | 否 |
| pinchend<sup>7+</sup> | PinchEvent | 手指捏合操作结束离开屏幕时触发该事件。 | 否 |
| pinchcancel<sup>7+</sup> | PinchEvent | 手指捏合操作被打断时触发该事件。 | 否 |
| dragstart<sup>7+</sup> | DragEvent | 用户开始拖拽时触发该事件。<br/>DragEvent具体可参考表6。 | 否 |
| drag<sup>7+</sup> | DragEvent | 拖拽过程中触发该事件。 | 否 |
| dragend<sup>7+</sup> | DragEvent | 用户拖拽完成后触发。 | 否 |
| dragenter<sup>7+</sup> | DragEvent | 进入释放目标时触发该事件。 | 否 |
| dragover<sup>7+</sup> | DragEvent | 在释放目标内拖动时触发。 | 否 |
| dragleave<sup>7+</sup> | DragEvent | 离开释放目标区域时触发。 | 否 |
| drop<sup>7+</sup> | DragEvent | 在可释放目标区域内释放时触发。 | 否 |
| 名称 | 参数 | 描述 | 是否支持冒泡 | 是否支持捕获 |
| ------------------------ | ---------- | ------------------------------------------------------------ | ----------------------------------------------------- | --------------- |
| touchstart | TouchEvent | 手指刚触摸屏幕时触发该事件。TouchEvent具体可参考表2 。 | 是<sup>5+</sup> | 是<sup>5+</sup> |
| touchmove | TouchEvent | 手指触摸屏幕后移动时触发该事件。 | 是<sup>5+</sup> | 是<sup>5+</sup> |
| touchcancel | TouchEvent | 手指触摸屏幕中动作被打断时触发该事件。 | 是<sup>5+</sup> | 是<sup>5+</sup> |
| touchend | TouchEvent | 手指触摸结束离开屏幕时触发该事件。 | 是<sup>5+</sup> | 是<sup>5+</sup> |
| click | - | 点击动作触发该事件。 | 是<sup>6+</sup> | 否 |
| doubleclick<sup>7+</sup> | - | 双击动作触发该事件 | 否<br/> 从API&nbsp;Version&nbsp;9&nbsp;开始支持冒泡。 | 否 |
| longpress | - | 长按动作触发该事件。 | 否<br/>从API&nbsp;Version&nbsp;9&nbsp;开始支持冒泡。 | 否 |
| swipe<sup>5+</sup> | SwipeEvent | 组件上快速滑动后触发该事件。 SwipeEvent具体可参考表4 。 | 否<br/>从API&nbsp;Version&nbsp;9&nbsp;开始支持冒泡。 | 否 |
| attached<sup>6+</sup> | - | 当前组件节点挂载在渲染树后触发。 | 否 | 否 |
| detached<sup>6+</sup> | - | 当前组件节点从渲染树中移除后触发。 | 否 | 否 |
| pinchstart<sup>7+</sup> | PinchEvent | 手指开始执行捏合操作时触发该事件。<br/>PinchEvent具体可参考表5。 | 否 | 否 |
| pinchupdate<sup>7+</sup> | PinchEvent | 手指执行捏合操作过程中触发该事件。 | 否 | 否 |
| pinchend<sup>7+</sup> | PinchEvent | 手指捏合操作结束离开屏幕时触发该事件。 | 否 | 否 |
| pinchcancel<sup>7+</sup> | PinchEvent | 手指捏合操作被打断时触发该事件。 | 否 | 否 |
| dragstart<sup>7+</sup> | DragEvent | 用户开始拖拽时触发该事件。<br/>DragEvent具体可参考表6。 | 否 | 否 |
| drag<sup>7+</sup> | DragEvent | 拖拽过程中触发该事件。 | 否 | 否 |
| dragend<sup>7+</sup> | DragEvent | 用户拖拽完成后触发。 | 否 | 否 |
| dragenter<sup>7+</sup> | DragEvent | 进入释放目标时触发该事件。 | 否 | 否 |
| dragover<sup>7+</sup> | DragEvent | 在释放目标内拖动时触发。 | 否 | 否 |
| dragleave<sup>7+</sup> | DragEvent | 离开释放目标区域时触发。 | 否 | 否 |
| drop<sup>7+</sup> | DragEvent | 在可释放目标区域内释放时触发。 | 否 | 否 |
> **说明：**
......
zh-cn/application-dev/reference/arkui-ts/Readme-CN.md
浏览文件 @ 03cc852f
......@@ -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)
......
zh-cn/application-dev/reference/arkui-ts/ts-container-ability-component.md 0 → 100644
浏览文件 @ 03cc852f
# AbilityComponent
> **说明：**
>
> 该组件从API&nbsp;Version&nbsp;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()&nbsp;=&gt;&nbsp;void | AbilityComponent环境启动完成时的回调，之后可使用AbilityComponent的方法。 |
| onDestroy()&nbsp;=&gt;&nbsp;void | AbilityComponent环境销毁时的回调。 |
| onAbilityCreated(name:&nbsp;string)&nbsp;=&gt;&nbsp;void | 加载Ability时触发，name为Ability名。 |
| onAbilityMoveToFont()&nbsp;=&gt;&nbsp;void | 当Ability移动到前台时触发。 |
| onAbilityWillRemove()&nbsp;=&gt;&nbsp;void | Ability移除之前触发。 |
## AbilityController
Ability控制器，提供AbilityComponent的控制接口。
| 名称 | 功能描述 |
| --------------------------------------- | ------------------------------------------------------------ |
| startAbility()&nbsp;=&gt;&nbsp;want | 在AbilityComponent内部加载Ability。<br>want：要加载的Ability描述信息。 |
| preformBackPress()&nbsp;=&gt;&nbsp;void | 在AbilityComponent内部执行返回操作。 |
| getStackCount()&nbsp;=&gt;&nbsp;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();
}
})
}
}
}
```
zh-cn/application-dev/reference/arkui-ts/ts-page-transition-animation.md
浏览文件 @ 03cc852f
......@@ -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 | 跳转到下一页面。 |
## 属性
......
zh-cn/application-dev/ui/ts-other-states-observed-objectlink.md
浏览文件 @ 03cc852f
......@@ -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()
})
......
Markdown is supported
0% 或 .
You are about to add 0 people to the discussion. Proceed with caution.
先完成此消息的编辑！
想要评论请 注册 或