Skip to content
体验新版
项目
组织
正在加载...
登录
切换导航
打开侧边栏
OpenHarmony
Docs
提交
03cc852f
D
Docs
项目概览
OpenHarmony
/
Docs
12 个月 前同步成功
通知
159
Star
292
Fork
28
代码
文件
提交
分支
Tags
贡献者
分支图
Diff
Issue
0
列表
看板
标记
里程碑
合并请求
0
Wiki
0
Wiki
分析
仓库
DevOps
项目成员
Pages
D
Docs
项目概览
项目概览
详情
发布
仓库
仓库
文件
提交
分支
标签
贡献者
分支图
比较
Issue
0
Issue
0
列表
看板
标记
里程碑
合并请求
0
合并请求
0
Pages
分析
分析
仓库分析
DevOps
Wiki
0
Wiki
成员
成员
收起侧边栏
关闭侧边栏
动态
分支图
创建新Issue
提交
Issue看板
体验新版 GitCode,发现更多精彩内容 >>
提交
03cc852f
编写于
6月 23, 2022
作者:
T
tianyu
浏览文件
操作
浏览文件
下载
电子邮件补丁
差异文件
updata @observed and abilityComponent
Signed-off-by:
N
tianyu
<
tianyu55@h-partners.com
>
上级
37adceac
变更
7
隐藏空白更改
内联
并排
Showing
7 changed file
with
219 addition
and
31 deletion
+219
-31
zh-cn/application-dev/reference/arkui-js/figures/zh-cn-attributes.gif
...ation-dev/reference/arkui-js/figures/zh-cn-attributes.gif
+0
-0
zh-cn/application-dev/reference/arkui-js/js-components-common-attributes.md
...dev/reference/arkui-js/js-components-common-attributes.md
+68
-0
zh-cn/application-dev/reference/arkui-js/js-components-common-events.md
...ion-dev/reference/arkui-js/js-components-common-events.md
+23
-23
zh-cn/application-dev/reference/arkui-ts/Readme-CN.md
zh-cn/application-dev/reference/arkui-ts/Readme-CN.md
+1
-0
zh-cn/application-dev/reference/arkui-ts/ts-container-ability-component.md
...-dev/reference/arkui-ts/ts-container-ability-component.md
+114
-0
zh-cn/application-dev/reference/arkui-ts/ts-page-transition-animation.md
...on-dev/reference/arkui-ts/ts-page-transition-animation.md
+4
-4
zh-cn/application-dev/ui/ts-other-states-observed-objectlink.md
...application-dev/ui/ts-other-states-observed-objectlink.md
+9
-4
未找到文件。
zh-cn/application-dev/reference/arkui-js/figures/zh-cn-attributes.gif
0 → 100644
浏览文件 @
03cc852f
64.4 KB
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
Version
9
开始支持冒泡。
|
| longpress | - | 长按动作触发该事件。
| 否
<br/>
从API
Version
9
开始支持冒泡。
|
| swipe
<sup>
5+
</sup>
| SwipeEvent | 组件上快速滑动后触发该事件。 SwipeEvent具体可参考表4 。
| 否
<br/>
从API
Version
9
开始支持冒泡。
|
| 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
Version
9
开始支持冒泡。 | 否
|
| longpress | - | 长按动作触发该事件。
| 否
<br/>
从API
Version
9
开始支持冒泡。 | 否
|
| swipe
<sup>
5+
</sup>
| SwipeEvent | 组件上快速滑动后触发该事件。 SwipeEvent具体可参考表4 。
| 否
<br/>
从API
Version
9
开始支持冒泡。 | 否
|
| 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 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。
<br>
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
();
}
})
}
}
}
```
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.
先完成此消息的编辑!
取消
想要评论请
注册
或
登录