Skip to content
体验新版
项目
组织
正在加载...
登录
切换导航
打开侧边栏
OpenHarmony
Docs
提交
fa676cb7
D
Docs
项目概览
OpenHarmony
/
Docs
1 年多 前同步成功
通知
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看板
未验证
提交
fa676cb7
编写于
9月 26, 2022
作者:
O
openharmony_ci
提交者:
Gitee
9月 26, 2022
浏览文件
操作
浏览文件
下载
差异文件
!9951 update docs
Merge pull request !9951 from sienna1128/gesture
上级
f74838f5
b743d67a
变更
19
隐藏空白更改
内联
并排
Showing
19 changed file
with
81 addition
and
88 deletion
+81
-88
zh-cn/application-dev/reference/arkui-ts/ts-basic-gestures-longpressgesture.md
.../reference/arkui-ts/ts-basic-gestures-longpressgesture.md
+2
-2
zh-cn/application-dev/reference/arkui-ts/ts-basic-gestures-pangesture.md
...on-dev/reference/arkui-ts/ts-basic-gestures-pangesture.md
+3
-3
zh-cn/application-dev/reference/arkui-ts/ts-basic-gestures-pinchgesture.md
...-dev/reference/arkui-ts/ts-basic-gestures-pinchgesture.md
+4
-4
zh-cn/application-dev/reference/arkui-ts/ts-basic-gestures-rotationgesture.md
...v/reference/arkui-ts/ts-basic-gestures-rotationgesture.md
+3
-3
zh-cn/application-dev/reference/arkui-ts/ts-basic-gestures-swipegesture.md
...-dev/reference/arkui-ts/ts-basic-gestures-swipegesture.md
+1
-1
zh-cn/application-dev/reference/arkui-ts/ts-basic-gestures-tapgesture.md
...on-dev/reference/arkui-ts/ts-basic-gestures-tapgesture.md
+1
-1
zh-cn/application-dev/reference/arkui-ts/ts-combined-gestures.md
...pplication-dev/reference/arkui-ts/ts-combined-gestures.md
+2
-7
zh-cn/application-dev/reference/arkui-ts/ts-container-listitemgroup.md
...tion-dev/reference/arkui-ts/ts-container-listitemgroup.md
+2
-2
zh-cn/application-dev/reference/arkui-ts/ts-gesture-settings.md
...application-dev/reference/arkui-ts/ts-gesture-settings.md
+27
-32
zh-cn/application-dev/reference/arkui-ts/ts-types.md
zh-cn/application-dev/reference/arkui-ts/ts-types.md
+10
-10
zh-cn/application-dev/reference/arkui-ts/ts-universal-component-area-change-event.md
...ence/arkui-ts/ts-universal-component-area-change-event.md
+4
-4
zh-cn/application-dev/reference/arkui-ts/ts-universal-component-visible-area-change-event.md
...ui-ts/ts-universal-component-visible-area-change-event.md
+1
-1
zh-cn/application-dev/reference/arkui-ts/ts-universal-events-key.md
...ication-dev/reference/arkui-ts/ts-universal-events-key.md
+2
-1
zh-cn/application-dev/ui/arkui-overview.md
zh-cn/application-dev/ui/arkui-overview.md
+1
-1
zh-cn/application-dev/ui/ts-framework-directory.md
zh-cn/application-dev/ui/ts-framework-directory.md
+1
-3
zh-cn/application-dev/ui/ts-framework-file-access-rules.md
zh-cn/application-dev/ui/ts-framework-file-access-rules.md
+13
-9
zh-cn/application-dev/ui/ts-pixel-units.md
zh-cn/application-dev/ui/ts-pixel-units.md
+2
-2
zh-cn/application-dev/ui/ts-resource-access.md
zh-cn/application-dev/ui/ts-resource-access.md
+1
-1
zh-cn/application-dev/ui/ui-ts-basic-resource-file-categories.md
...pplication-dev/ui/ui-ts-basic-resource-file-categories.md
+1
-1
未找到文件。
zh-cn/application-dev/reference/arkui-ts/ts-basic-gestures-longpressgesture.md
浏览文件 @
fa676cb7
...
...
@@ -24,8 +24,8 @@ LongPressGesture(value?: { fingers?: number, repeat?: boolean, duration?: number
| 名称 | 功能描述 |
| -------- | -------- |
| onAction(event:(event?:
[GestureEvent](ts-gesture-settings.md))
=
>
void) | LongPress手势识别成功回调。 |
| onActionEnd(event:(event?:
[GestureEvent](ts-gesture-settings.md))
=
>
void) | LongPress手势识别成功,手指抬起后触发回调。 |
| onAction(event:(event?:
[GestureEvent](ts-gesture-settings.md
#gestureevent对象说明
))
=
>
void) | LongPress手势识别成功回调。 |
| onActionEnd(event:(event?:
[GestureEvent](ts-gesture-settings.md
#gestureevent对象说明
))
=
>
void) | LongPress手势识别成功,手指抬起后触发回调。 |
| onActionCancel(event:
()
=
>
void) | LongPress手势识别成功,接收到触摸取消事件触发回调。 |
...
...
zh-cn/application-dev/reference/arkui-ts/ts-basic-gestures-pangesture.md
浏览文件 @
fa676cb7
...
...
@@ -60,9 +60,9 @@ PanGestureOptions(value?: { fingers?: number; direction?: PanDirection; distance
| 名称 | 功能描述 |
| -------- | -------- |
| onActionStart(event:
(event?:
[GestureEvent](ts-gesture-settings.md))
=
>
void) | Pan手势识别成功回调。 |
| onActionUpdate(event:
(event?:
[GestureEvent](ts-gesture-settings.md))
=
>
void) | Pan手势移动过程中回调。 |
| onActionEnd(event:
(event?:
[GestureEvent](ts-gesture-settings.md))
=
>
void) | Pan手势识别成功,手指抬起后触发回调。 |
| onActionStart(event:
(event?:
[GestureEvent](ts-gesture-settings.md
#gestureevent对象说明
))
=
>
void) | Pan手势识别成功回调。 |
| onActionUpdate(event:
(event?:
[GestureEvent](ts-gesture-settings.md
#gestureevent对象说明
))
=
>
void) | Pan手势移动过程中回调。 |
| onActionEnd(event:
(event?:
[GestureEvent](ts-gesture-settings.md
#gestureevent对象说明
))
=
>
void) | Pan手势识别成功,手指抬起后触发回调。 |
| onActionCancel(event:
()
=
>
void) | Pan手势识别成功,接收到触摸取消事件触发回调。 |
...
...
zh-cn/application-dev/reference/arkui-ts/ts-basic-gestures-pinchgesture.md
浏览文件 @
fa676cb7
...
...
@@ -23,9 +23,9 @@ PinchGesture(value?: { fingers?: number, distance?: number })
| 名称 | 功能描述 |
| -------- | -------- |
| onActionStart(event:(event?:
[GestureEvent](ts-gesture-settings.md))
=
>
void) | Pinch手势识别成功回调。 |
| onActionUpdate(event:(event?:
[GestureEvent](ts-gesture-settings.md))
=
>
void) | Pinch手势移动过程中回调。 |
| onActionEnd(event:(event?:
[GestureEvent](ts-gesture-settings.md))
=
>
void) | Pinch手势识别成功,手指抬起后触发回调。 |
| onActionStart(event:(event?:
[GestureEvent](ts-gesture-settings.md
#gestureevent对象说明
))
=
>
void) | Pinch手势识别成功回调。 |
| onActionUpdate(event:(event?:
[GestureEvent](ts-gesture-settings.md
#gestureevent对象说明
))
=
>
void) | Pinch手势移动过程中回调。 |
| onActionEnd(event:(event?:
[GestureEvent](ts-gesture-settings.md
#gestureevent对象说明
))
=
>
void) | Pinch手势识别成功,手指抬起后触发回调。 |
| onActionCancel(event:
()
=
>
void) | Pinch手势识别成功,接收到触摸取消事件触发回调。 |
...
...
@@ -40,7 +40,7 @@ struct PinchGestureExample {
build
()
{
Flex
({
direction
:
FlexDirection
.
Column
,
alignItems
:
ItemAlign
.
Center
,
justifyContent
:
FlexAlign
.
SpaceBetween
})
{
Text
(
'
PinchGesture scale:
'
+
this
.
scale
)
Text
(
'
PinchGesture scale:
'
+
this
.
scale
Value
)
}
.
height
(
100
).
width
(
200
).
padding
(
20
).
border
({
width
:
1
}).
margin
(
80
)
.
scale
({
x
:
this
.
scaleValue
,
y
:
this
.
scaleValue
,
z
:
this
.
scaleValue
})
...
...
zh-cn/application-dev/reference/arkui-ts/ts-basic-gestures-rotationgesture.md
浏览文件 @
fa676cb7
...
...
@@ -23,9 +23,9 @@ RotationGesture(value?: { fingers?: number, angle?: number })
| 名称 | 功能描述 |
| -------- | -------- |
| onActionStart(event:(event?:
[GestureEvent](ts-gesture-settings.md))
=
>
void) | Rotation手势识别成功回调。 |
| onActionUpdate(event:(event?:
[GestureEvent](ts-gesture-settings.md))
=
>
void) | Rotation手势移动过程中回调。 |
| onActionEnd(event:(event?:
[GestureEvent](ts-gesture-settings.md))
=
>
void) | Rotation手势识别成功,手指抬起后触发回调。 |
| onActionStart(event:(event?:
[GestureEvent](ts-gesture-settings.md
#gestureevent对象说明
))
=
>
void) | Rotation手势识别成功回调。 |
| onActionUpdate(event:(event?:
[GestureEvent](ts-gesture-settings.md
#gestureevent对象说明
))
=
>
void) | Rotation手势移动过程中回调。 |
| onActionEnd(event:(event?:
[GestureEvent](ts-gesture-settings.md
#gestureevent对象说明
))
=
>
void) | Rotation手势识别成功,手指抬起后触发回调。 |
| onActionCancel(event:
()
=
>
void) | Rotation手势识别成功,接收到触摸取消事件触发回调。 |
...
...
zh-cn/application-dev/reference/arkui-ts/ts-basic-gestures-swipegesture.md
浏览文件 @
fa676cb7
...
...
@@ -33,7 +33,7 @@ SwipeGesture(value?: { fingers?: number; direction?: SwipeDirection; speed?: num
| 名称 | 功能描述 |
| -------- | -------- |
| onAction(event:(event?:
[GestureEvent](ts-gesture-settings.md))
=
>
void) | 滑动手势识别成功回调。 |
| onAction(event:(event?:
[GestureEvent](ts-gesture-settings.md
#gestureevent对象说明
))
=
>
void) | 滑动手势识别成功回调。 |
![
zh-cn_image_0000001231374559
](
figures/zh-cn_image_0000001231374661.png
)
## 示例
...
...
zh-cn/application-dev/reference/arkui-ts/ts-basic-gestures-tapgesture.md
浏览文件 @
fa676cb7
...
...
@@ -23,7 +23,7 @@ TapGesture(value?: { count?: number, fingers?: number })
| 名称 | 功能描述 |
| -------- | -------- |
| onAction(event: (event?:
[GestureEvent](ts-gesture-settings.md))
=
>
void) | Tap手势识别成功回调。 |
| onAction(event: (event?:
[GestureEvent](ts-gesture-settings.md
#gestureevent对象说明
))
=
>
void) | Tap手势识别成功回调。 |
## 示例
...
...
zh-cn/application-dev/reference/arkui-ts/ts-combined-gestures.md
浏览文件 @
fa676cb7
...
...
@@ -6,11 +6,6 @@
> 从API Version 7开始支持。后续版本如有新增内容,则采用上角标单独标记该内容的起始版本。
## 权限列表
无
## 接口
GestureGroup(mode: GestureMode, ...gesture: GestureType[])
...
...
@@ -18,10 +13,10 @@ GestureGroup(mode: GestureMode, ...gesture: GestureType[])
-
参数
| 参数名 | 参数类型 | 必填 | 默认值 | 参数描述 |
| -------- | -------- | -------- | -------- | -------- |
| mode |
GestureMode
| 是 | - | 设置组合手势识别模式。 |
| mode |
[
GestureMode
](
#gesturemode枚举说明
)
| 是 | - | 设置组合手势识别模式。 |
| gesture |
[
TapGesture
](
ts-basic-gestures-tapgesture.md
)
<br/>
\|
[LongPressGesture](ts-basic-gestures-longpressgesture.md)
<br/>
\|
[PanGesture](ts-basic-gestures-pangesture.md)
<br/>
\|
[PinchGesture](ts-basic-gestures-pinchgesture.md)
<br/>
\|
[
RotationGesture
](
ts-basic-gestures-rotationgesture.md
)
| 是 | - | 可变长参数,1个或者多个基础手势类型,这些手势会被组合识别。 |
-
GestureMode枚举说明
##
GestureMode枚举说明
| 名称 | 描述 |
| -------- | -------- |
| Sequence | 顺序识别,按照手势的注册顺序识别手势,直到所有手势识别成功。当有一个手势识别失败时,所有手势识别失败。 |
...
...
zh-cn/application-dev/reference/arkui-ts/ts-container-listitemgroup.md
浏览文件 @
fa676cb7
...
...
@@ -8,7 +8,7 @@
## 使用说明
当ListItemGroup的父组件List的listDirection属性为Axis.Vertical时,不允许设置ListItemGroup组件的height属性。ListItemGroup的高度为header高度、footer高度和所有ListItem布局后总高度之和。当父组件List的listDirection属性为Axis.Horizontal时,不允许设置ListItemGroup组件的width属性。ListItemGroup的宽度为header宽度、footer宽度和所有ListItem布局后总宽度之和。
当前ListItemGroup内部的ListItem
不支持编辑、框选、拖拽功能,即ListItemGroup内部的ListItem组件
editable、selectable属性不生效。
当前ListItemGroup内部的ListItem
组件不支持编辑、框选、拖拽功能,即ListItem组件的
editable、selectable属性不生效。
## 子组件
...
...
@@ -96,7 +96,7 @@ struct ListItemGroupExample {
},
item
=>
item
)
}
.
borderRadius
(
20
)
.
divider
({
strokeWidth
:
1
,
color
:
0xDCDCDC
}
)
// 每行之间的分界线
.
divider
({
strokeWidth
:
1
,
color
:
Color
.
Blue
)
// 每行之间的分界线
})
}
.
width
(
'
90%
'
)
...
...
zh-cn/application-dev/reference/arkui-ts/ts-gesture-settings.md
浏览文件 @
fa676cb7
...
...
@@ -6,11 +6,6 @@
> 从API Version 7开始支持。后续版本如有新增内容,则采用上角标单独标记该内容的起始版本。
## 权限列表
无
## 绑定手势识别
...
...
@@ -19,63 +14,63 @@
| 名称 | 参数类型 | 默认值 | 描述 |
| -------- | -------- | -------- | -------- |
| gesture | gesture:
GestureType,
<br/>
mask?:
GestureMask | gesture:
-,
<br/>
mask:
GestureMask.Normal | 绑定手势识别
。
<br/>
- gesture:
绑定的手势类型,
<br>
- mask:
事件响应设置。 |
| priorityGesture | gesture:
GestureType,
<br/>
mask?:
GestureMask | gesture:
-,
<br/>
mask:
GestureMask.Normal | 绑定优先识别手势。
<br/>
- gesture:
绑定的手势类型,
<br>
- mask:
事件响应设置。
<br/>
默认情况下,子组件优先于父组件识别手势,当父组件配置priorityGesture时,父组件优先于子组件进行识别
。 |
| parallelGesture | gesture:
GestureType,
<br/>
mask?:
GestureMask
| gesture:
-,
<br/>
mask:
GestureMask.Normal | 绑定可与子组件手势同时触发的手势。
<br/>
- gesture:
绑定的手势类型。
<br>
- mask:
事件响应设置。
<br/>
手势事件为非冒泡事件。父组件设置parallelGesture时,父子组件相同的手势事件都可以触发,实现类似冒泡效果。 |
| gesture | gesture:
[GestureType](#gesturetype),
<br/>
mask?:
[
GestureMask
](
#gesturemask枚举说明
)
| gesture:
-,
<br/>
mask:
GestureMask.Normal | 绑定手势
。
<br/>
- gesture:
绑定的手势类型,
<br>
- mask:
事件响应设置。 |
| priorityGesture | gesture:
[GestureType](#gesturetype),
<br/>
mask?:
[
GestureMask
](
#gesturemask枚举说明
)
| gesture:
-,
<br/>
mask:
GestureMask.Normal | 绑定优先识别手势。
<br/>
- gesture:
绑定的手势类型,
<br>
- mask:
事件响应设置。
<br/>
默认情况下,子组件优先识别通过gesture绑定的手势,当父组件配置priorityGesture时,子组件优先识别priorityGesture绑定的手势
。 |
| parallelGesture | gesture:
[GestureType](#gesturetype),
<br/>
mask?:
[
GestureMask
](
#gesturemask枚举说明
)
| gesture:
-,
<br/>
mask:
GestureMask.Normal | 绑定可与子组件手势同时触发的手势。
<br/>
- gesture:
绑定的手势类型。
<br>
- mask:
事件响应设置。
<br/>
手势事件为非冒泡事件。父组件设置parallelGesture时,父子组件相同的手势事件都可以触发,实现类似冒泡效果。 |
-
GestureMask枚举说明
| 名称 | 描述 |
## GestureType
| 名称 | 描述 |
| -------- | -------- |
| Normal | 不屏蔽子组件的手势,按照默认手势识别顺序进行识别。 |
| IgnoreInternal | 屏蔽子组件的手势,仅当前容器的手势进行识别。
<br/>
子组件上系统内置的手势不会被屏蔽,如子组件为List组件时,内置的滑动手势仍然会触发。 |
|
[
TapGesture
](
ts-basic-gestures-tapgesture.md
)
| 点击手势,支持单次点击、多次点击识别。 |
|
[
LongPressGesture
](
ts-basic-gestures-longpressgesture.md
)
| 长按手势。 |
|
[
PanGesture
](
ts-basic-gestures-pangesture.md
)
| 平移手势,滑动最小距离为5vp时识别成功。 |
|
[
PinchGesture
](
ts-basic-gestures-pinchgesture.md
)
| 捏合手势。 |
|
[
RotationGesture
](
ts-basic-gestures-rotationgesture.md
)
| 旋转手势。 |
|
[
SwipeGesture
](
ts-basic-gestures-swipegesture.md
)
| 滑动手势,滑动最小速度为100vp/s时识别成功。 |
|
[
GestureGroup
](
ts-combined-gestures.md
)
| 手势识别组,多种手势组合为复合手势,支持连续识别、并行识别和互斥识别。 |
-
GestureType
## GestureMask枚举说明
| 名称 | 描述 |
| -------- | -------- |
| TapGesture | 点击手势,支持单次点击、多次点击识别。 |
| LongPressGesture | 长按手势。 |
| PanGesture | 平移手势,滑动最小距离为5vp时识别成功。 |
| PinchGesture | 捏合手势。 |
| RotationGesture | 旋转手势。 |
| SwipeGesture | 滑动手势,滑动最小速度为100vp/s时识别成功。 |
| GestureGroup | 手势识别组,多种手势组合为复合手势,支持连续识别、并行识别和互斥识别。 |
| Normal | 不屏蔽子组件的手势,按照默认手势识别顺序进行识别。 |
| IgnoreInternal | 屏蔽子组件的手势,仅当前容器的手势进行识别。
<br/>
子组件上系统内置的手势不会被屏蔽,如子组件为List组件时,内置的滑动手势仍然会触发。 |
## 响应手势事件
组件通过
gesture方法绑定手势对象,可以通过手势对象提供的事件相应响应手势操作。例如通过TapGesture对象的onAction事件响应点击事件。其余手势
的事件定义见各个手势对象章节。
组件通过
手势事件绑定不同GestureType的手势对象,各手势对象提供的事件响应手势操作,提供手势相关信息。下面通过TapGesture对象的onAction事件响应点击事件,获取事件相关信息。其余手势对象
的事件定义见各个手势对象章节。
-
TapGesture事件说明
| 名称 | 功能描述 |
| -------- | -------- |
| onAction((event?:GestureEvent)
=
>
void) | Tap手势识别成功回调。 |
-
GestureEvent对象说明
##
GestureEvent对象说明
| 名称 | 类型 | 描述 |
| -------- | -------- | -------- |
| timestamp
<sup>
8+
</sup>
| number | 事件时间戳。
触发事件时距离系统启动的时间间隔,单位纳秒。
|
| target
<sup>
8+
</sup>
|
[
EventTarget
](
ts-universal-events-click.md
)
| 触发手势事件的元素对象显示区域。 |
| source
<sup>
8+
</sup>
|
SourceType
| 事件输入设备。 |
| 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
[] | 触发事件的所有手指信息,用于LongPressGesture与TapGesture手势触发场景。 |
| offsetX | number | 手势事件x轴
偏移量,单位为vp,用于PanGesture手势触发场景
。 |
| offsetY | number | 手势事件y轴
偏移量,单位为vp,用于PanGesture手势触发场景
。 |
| 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/>
>
**说明:**
<br/>
>
角度计算方式:滑动手势被识别到后,连接两根手指之间的线被识别为起始线条,随着手指的滑动,手指之间的线条会发生旋转,根据起始线条两端点和当前线条两端点的坐标,使用反正切函数分别计算其相对于水平方向的夹角,最后arctan2(cy2-cy1,cx2-cx1)-arctan2(y2-y1,x2-x1)为旋转的角度。以起始线条为坐标系,顺时针旋转为0到180度,逆时针旋转为-180到0度。 |
| speed
<sup>
8+
</sup>
| number | 滑动手势速度,即所有手指滑动的平均速度,单位为vp/秒,用于SwipeGesture手势触发场景。 |
| scale | number | 缩放比例,用于PinchGesture手势触发场景。 |
| pinchCenterX | number | 捏合手势中心点x轴坐标,单位为vp,用于PinchGesture手势触发场景。 |
| pinchCenterY | number | 捏合手势中心点y轴坐标,单位为vp,用于PinchGesture手势触发场景。 |
| pinchCenterX | number | 捏合手势中心点
相对于当前组件元素左上角
x轴坐标,单位为vp,用于PinchGesture手势触发场景。 |
| pinchCenterY | number | 捏合手势中心点
相对于当前组件元素左上角
y轴坐标,单位为vp,用于PinchGesture手势触发场景。 |
-
SourceType
## SourceType枚举说明
| 名称 | 描述 |
| -------- | -------- |
| Unknown | 未知设备。 |
| Mouse | 鼠标。 |
| TouchScreen | 触摸屏。 |
-
FingerInfo对象说明
##
FingerInfo对象说明
| 名称 | 类型 | 描述 |
| -------- | -------- | -------- |
| id | number | 手指的索引编号。 |
...
...
zh-cn/application-dev/reference/arkui-ts/ts-types.md
浏览文件 @
fa676cb7
...
...
@@ -26,7 +26,7 @@
| -------- | -------------------------------------- |
| string | 需要显式指定像素单位,如'10px',也可设置百分比字符串,如'100%'。 |
| number | 默认单位vp。 |
|
[
Resource
](
#resource
)
|
使用引入资源的方式
,引入系统资源或者应用资源中的尺寸。 |
|
[
Resource
](
#resource
)
|
资源引用类型
,引入系统资源或者应用资源中的尺寸。 |
## ResourceStr
...
...
@@ -35,7 +35,7 @@
| 类型 | 说明 |
| -------- | ---------------------------- |
| string | 字符串类型。 |
|
[
Resource
](
#resource
)
|
使用引入资源的方式
,引入系统资源或者应用资源中的字符串。 |
|
[
Resource
](
#resource
)
|
资源引用类型
,引入系统资源或者应用资源中的字符串。 |
## Padding
...
...
@@ -43,10 +43,10 @@
| 名称 | 类型 | 必填 | 说明 |
| ------ | ------ | ---- | --------------- |
| top |
[
Length
](
#length
)
| 否 |
组件内元素距组件顶部的尺寸。 |
| right |
[
Length
](
#length
)
| 否 |
组件内元素距组件右边界的尺寸。 |
| bottom |
[
Length
](
#length
)
| 否 |
组件内元素距组件底部的尺寸。 |
| left |
[
Length
](
#length
)
| 否 |
组件内元素距组件左边界的尺寸。 |
| top |
[
Length
](
#length
)
| 否 | 上内边距,
组件内元素距组件顶部的尺寸。 |
| right |
[
Length
](
#length
)
| 否 | 右内边距,
组件内元素距组件右边界的尺寸。 |
| bottom |
[
Length
](
#length
)
| 否 | 下内边距,
组件内元素距组件底部的尺寸。 |
| left |
[
Length
](
#length
)
| 否 | 左内边距,
组件内元素距组件左边界的尺寸。 |
## Margin
...
...
@@ -54,10 +54,10 @@
| 名称 | 类型 | 必填 | 说明 |
| ------ | ------ | ---- | --------------- |
| top |
[
Length
](
#length
)
| 否 | 组件外元素距组件顶部
的尺寸。 |
| right |
[
Length
](
#length
)
| 否 | 组件外元素距组件右边界
的尺寸。 |
| bottom |
[
Length
](
#length
)
| 否 | 组件外元素距组件底部
的尺寸。 |
| left |
[
Length
](
#length
)
| 否 | 组件外元素距组件左边界
的尺寸。 |
| top |
[
Length
](
#length
)
| 否 | 上外边距,组件顶部距组件外元素
的尺寸。 |
| right |
[
Length
](
#length
)
| 否 | 右外边距,组件右边界距组件外元素
的尺寸。 |
| bottom |
[
Length
](
#length
)
| 否 | 下外边距,组件底部距组件外元素
的尺寸。 |
| left |
[
Length
](
#length
)
| 否 | 坐外边距,组件左边界距组件外元素
的尺寸。 |
## EdgeWidths<sup>9+</sup>
...
...
zh-cn/application-dev/reference/arkui-ts/ts-universal-component-area-change-event.md
浏览文件 @
fa676cb7
...
...
@@ -11,7 +11,7 @@
| 名称 | 支持冒泡 | 功能描述 |
| ---------------------------------------- | ---- | ---------------------------------------- |
| onAreaChange(event:
(oldValue:
Area,
newValue:
Area)
=
>
void) | 否 | 组件区域变化时触发该回调,Area类型描述见
[
Area
](
ts-types.md#area8
)
。 |
| onAreaChange(event:
(oldValue:
[Area](ts-types.md#area8),
newValue:
[Area](ts-types.md#area8))
=
>
void) | 否 | 组件区域变化时触发该回调
。 |
## 示例
...
...
@@ -22,7 +22,7 @@
@
Component
struct
AreaExample
{
@
State
value
:
string
=
'
Text
'
@
State
size
1
:
string
=
''
@
State
size
Value
:
string
=
''
build
()
{
Column
()
{
...
...
@@ -33,9 +33,9 @@ struct AreaExample {
})
.
onAreaChange
((
oldValue
:
Area
,
newValue
:
Area
)
=>
{
console
.
info
(
`Ace: on area change, oldValue is
${
JSON
.
stringify
(
oldValue
)}
value is
${
JSON
.
stringify
(
newValue
)}
`
)
this
.
size
1
=
JSON
.
stringify
(
newValue
)
this
.
size
Value
=
JSON
.
stringify
(
newValue
)
})
Text
(
'
new area is:
\n
'
+
this
.
size
).
margin
({
right
:
30
,
left
:
30
})
Text
(
'
new area is:
\n
'
+
this
.
size
Value
).
margin
({
right
:
30
,
left
:
30
})
}
.
width
(
'
100%
'
).
height
(
'
100%
'
).
margin
({
top
:
30
})
}
...
...
zh-cn/application-dev/reference/arkui-ts/ts-universal-component-visible-area-change-event.md
浏览文件 @
fa676cb7
# 组件可见区域变化事件
组件可见区域变化事件
指组件在屏幕中显示的面积变化,提供了判断组件是否完全或部分显示在屏幕中的能力,通常适用于像
广告曝光埋点之类的场景。
组件可见区域变化事件
是组件在屏幕中的显示区域面积变化时触发的事件,提供了判断组件是否完全或部分显示在屏幕中的能力,适用于
广告曝光埋点之类的场景。
> **说明:**
>
...
...
zh-cn/application-dev/reference/arkui-ts/ts-universal-events-key.md
浏览文件 @
fa676cb7
# 按键事件
按键事件指组件与键盘、遥控器等按键设备交互时触发的事件。
按键事件指组件与键盘、遥控器等按键设备交互时触发的事件
,适用于所有可交互组件(默认可获焦),例如Button。对于Text,Image等不可获焦组件,可以设置focusable属性为true后使用按键事件
。
> **说明:**
>
> 从API Version 7开始支持。后续版本如有新增内容,则采用上角标单独标记该内容的起始版本。
## 事件
| 名称 | 支持冒泡 | 功能描述 |
...
...
zh-cn/application-dev/ui/arkui-overview.md
浏览文件 @
fa676cb7
...
...
@@ -39,4 +39,4 @@
![
zh-cn_image_0000001183709904
](
figures/zh-cn_image_0000001183709904.png
)
从上图可以看出,类Web开发范式与声明式开发范式的UI后端引擎和语言运行时是共用的,其中,UI后端引擎实现了方舟开发框架的六种基本能力。声明式开发范式无需JS Framework进行页面DOM管理,渲染更新链路更为精简,占用内存更少,因此更推荐开发者选用声明式开发范式来搭建应用UI界面。
从上图可以看出,类Web开发范式与声明式开发范式的UI后端引擎和语言运行时是共用的,其中,UI后端引擎实现了方舟开发框架的六种基本能力。声明式开发范式无需JS Framework进行页面DOM管理,渲染更新链路更为精简,占用内存更少,因此更推荐开发者选用声明式开发范式来搭建应用UI界面。
\ No newline at end of file
zh-cn/application-dev/ui/ts-framework-directory.md
浏览文件 @
fa676cb7
# 目录结构
FA应用的eTS模块(entry/src/main)的典型开发目录结构如下:
...
...
@@ -16,10 +15,9 @@ FA应用的eTS模块(entry/src/main)的典型开发目录结构如下:
**各个文件夹和文件的作用:**
-
**app.ets**
文件用于全局应用逻辑和应用生命周期管理。
-
**pages**
目录用于存放所有
组件
页面。
-
**pages**
目录用于存放所有页面。
-
**common**
目录用于存放公共代码文件,比如:自定义组件和公共方法。
...
...
zh-cn/application-dev/ui/ts-framework-file-access-rules.md
浏览文件 @
fa676cb7
# 应用代码文件访问规则
# 文件访问规则
应用代码中文件访问方法主要有下面两种:
应用代码文件可通过如下方式访问:
-
**相对路径**
:使用相对路径引用代码文件,以"../"访问上一级目录,以"./"访问当前目录,也可以省略不写。
-
**绝对路径**
:使用当前模块根路径引用代码文件,比如:common/utils/utils。
-
使用相对路径引用代码文件,比如:上一级目录:../common/utils/utils,当前目录:./common/utils/utils。
-
使用当前模块根路径引用代码文件,比如:common/utils/utils。
-
公共代码文件推荐放在
**common**
目录下。
## 示例
```
common
│ └─ utils
│ └─ utils.ets
└─ pages
└─ index.ets
```
如上所示,将utils放在common中,示例中index.ets访问utils.ets文件
```
ts
// xxx.ets
import
{
FoodData
,
FoodList
}
from
"
../common/utils/utils
"
;
...
...
@@ -32,11 +37,10 @@ struct FoodCategoryList {
}
```
导入文件示例
:
被导入文件utils.ets
:
```
ts
//common/utils/utils.ets
export
class
FoodData
{
name
:
string
;
constructor
(
name
:
string
)
{
...
...
zh-cn/application-dev/ui/ts-pixel-units.md
浏览文件 @
fa676cb7
...
...
@@ -6,9 +6,9 @@
| 名称 | 描述 |
| ---- | ---------------------------------------- |
| px | 屏幕物理像素单位。 |
| vp | 屏幕密度相关像素,根据屏幕像素密度转换为屏幕物理像素。 |
| vp | 屏幕密度相关像素,根据屏幕像素密度转换为屏幕物理像素
,当数值不带单位时,默认单位vp
。 |
| fp | 字体像素,与vp类似适用屏幕密度变化,随系统字体大小设置变化。 |
| lpx | 视窗逻辑像素单位,lpx单位为实际屏幕宽度与逻辑宽度(通过
[
designWidth
](
../ui/ts-framework-js-tag.md
)
配置)的比值
。如配置
designWidth为720时,在实际宽度为1440物理像素的屏幕上,1lpx为2px大小。 |
| lpx | 视窗逻辑像素单位,lpx单位为实际屏幕宽度与逻辑宽度(通过
[
designWidth
](
../ui/ts-framework-js-tag.md
)
配置)的比值
,designWidth默认值为720。当
designWidth为720时,在实际宽度为1440物理像素的屏幕上,1lpx为2px大小。 |
## 像素单位转换
...
...
zh-cn/application-dev/ui/ts-resource-access.md
浏览文件 @
fa676cb7
...
...
@@ -8,7 +8,7 @@
引用rawfile下资源时使用
```"$rawfile('filename')"```
的形式,filename需要表示为rawfile目录下的文件相对路径,文件名需要包含后缀,路径开头不可以以"/"开头。
> **说明:**
>
>
> 资源描述符不能拼接使用,仅支持普通字符串如`'app.type.name'`。
>
> `$r`返回值为Resource对象,可通过[getString](../reference/apis/js-apis-resource-manager.md#getstring) 方法获取对应的字符串。
...
...
zh-cn/application-dev/ui/ui-ts-basic-resource-file-categories.md
浏览文件 @
fa676cb7
...
...
@@ -25,7 +25,7 @@ resources
**表1**
resources目录分类
| 分类 | base目录
与限定词目录
| 限定词目录 | rawfile目录 |
| 分类 | base目录 | 限定词目录 | rawfile目录 |
| ---- | ---------------------------------------- | ---------------------------------------- | ---------------------------------------- |
| 组织形式 | base目录是默认存在的目录。当应用的resources目录中没有与设备状态匹配的限定词目录时,会自动引用该目录中的资源文件。
<br/>
base目录的二级子目录为
**资源组目录**
,用于存放字符串、颜色、布尔值等基础元素,以及媒体、动画、布局等资源文件,具体要求参见
[
资源组目录
](
#资源组目录
)
。 | 限定词目录需要开发者自行创建。目录名称由一个或多个表征应用场景或设备特征的限定词组合而成,具体要求参见
[
限定词目录
](
#限定词目录
)
。
<br/>
限定词目录的二级子目录为
**资源组目录**
,用于存放字符串、颜色、布尔值等基础元素,以及媒体、动画、布局等资源文件,具体要求参见
[
资源组目录
](
#资源组目录
)
。 | 支持创建多层子目录,目录名称可以自定义,文件夹内可以自由放置各类资源文件。
<br/>
rawfile目录的文件不会根据设备状态去匹配不同的资源。 |
| 编译方式 | 目录中的资源文件会被编译成二进制文件,并赋予资源文件ID。 | 目录中的资源文件会被编译成二进制文件,并赋予资源文件ID。 | 目录中的资源文件会被直接打包进应用,不经过编译,也不会被赋予资源文件ID。 |
...
...
编辑
预览
Markdown
is supported
0%
请重试
或
添加新附件
.
添加附件
取消
You are about to add
0
people
to the discussion. Proceed with caution.
先完成此消息的编辑!
取消
想要评论请
注册
或
登录