未验证 提交 fa676cb7 编写于 作者: O openharmony_ci 提交者: Gitee

!9951 update docs

Merge pull request !9951 from sienna1128/gesture
......@@ -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手势识别成功,接收到触摸取消事件触发回调。 |
......
......@@ -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手势识别成功,接收到触摸取消事件触发回调。 |
......
......@@ -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.scaleValue)
}
.height(100).width(200).padding(20).border({ width: 1 }).margin(80)
.scale({ x: this.scaleValue, y: this.scaleValue, z: this.scaleValue })
......
......@@ -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手势识别成功,接收到触摸取消事件触发回调。 |
......
......@@ -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)
## 示例
......
......@@ -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手势识别成功回调。 |
## 示例
......
......@@ -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/>\|&nbsp;[LongPressGesture](ts-basic-gestures-longpressgesture.md)<br/>\|&nbsp;[PanGesture](ts-basic-gestures-pangesture.md)<br/>\|&nbsp;[PinchGesture](ts-basic-gestures-pinchgesture.md)<br/>\|&nbsp;[RotationGesture](ts-basic-gestures-rotationgesture.md) | 是 | - | 可变长参数,1个或者多个基础手势类型,这些手势会被组合识别。 |
- GestureMode枚举说明
## GestureMode枚举说明
| 名称 | 描述 |
| -------- | -------- |
| Sequence | 顺序识别,按照手势的注册顺序识别手势,直到所有手势识别成功。当有一个手势识别失败时,所有手势识别失败。 |
......
......@@ -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%')
......
......@@ -6,11 +6,6 @@
> 从API Version 7开始支持。后续版本如有新增内容,则采用上角标单独标记该内容的起始版本。
## 权限列表
## 绑定手势识别
......@@ -19,63 +14,63 @@
| 名称 | 参数类型 | 默认值 | 描述 |
| -------- | -------- | -------- | -------- |
| gesture | gesture:&nbsp;GestureType,<br/>mask?:&nbsp;GestureMask | gesture:&nbsp;-,<br/>mask:&nbsp;GestureMask.Normal | 绑定手势识别<br/>- gesture:&nbsp;绑定的手势类型,&nbsp;<br>- mask:&nbsp;事件响应设置。 |
| priorityGesture | gesture:&nbsp;GestureType,<br/>mask?:&nbsp;GestureMask | gesture:&nbsp;-,<br/>mask:&nbsp;GestureMask.Normal | 绑定优先识别手势。<br/>- gesture:&nbsp;绑定的手势类型,&nbsp;<br>- mask:&nbsp;事件响应设置。<br/>默认情况下,子组件优先于父组件识别手势,当父组件配置priorityGesture时,父组件优先于子组件进行识别。 |
| parallelGesture | gesture:&nbsp;GestureType,<br/>mask?:&nbsp;GestureMask | gesture:&nbsp;-,<br/>mask:&nbsp;GestureMask.Normal | 绑定可与子组件手势同时触发的手势。<br/>- gesture:&nbsp;绑定的手势类型。&nbsp;<br>- mask:&nbsp;事件响应设置。<br/>手势事件为非冒泡事件。父组件设置parallelGesture时,父子组件相同的手势事件都可以触发,实现类似冒泡效果。 |
| gesture | gesture:&nbsp;[GestureType](#gesturetype),<br/>mask?:&nbsp;[GestureMask](#gesturemask枚举说明) | gesture:&nbsp;-,<br/>mask:&nbsp;GestureMask.Normal | 绑定手势<br/>- gesture:&nbsp;绑定的手势类型,&nbsp;<br>- mask:&nbsp;事件响应设置。 |
| priorityGesture | gesture:&nbsp;[GestureType](#gesturetype),<br/>mask?:&nbsp;[GestureMask](#gesturemask枚举说明) | gesture:&nbsp;-,<br/>mask:&nbsp;GestureMask.Normal | 绑定优先识别手势。<br/>- gesture:&nbsp;绑定的手势类型,&nbsp;<br>- mask:&nbsp;事件响应设置。<br/>默认情况下,子组件优先识别通过gesture绑定的手势,当父组件配置priorityGesture时,子组件优先识别priorityGesture绑定的手势。 |
| parallelGesture | gesture:&nbsp;[GestureType](#gesturetype),<br/>mask?:&nbsp;[GestureMask](#gesturemask枚举说明) | gesture:&nbsp;-,<br/>mask:&nbsp;GestureMask.Normal | 绑定可与子组件手势同时触发的手势。<br/>- gesture:&nbsp;绑定的手势类型。&nbsp;<br>- mask:&nbsp;事件响应设置。<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)&nbsp;=&gt;&nbsp;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/>>&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手势触发场景。 |
| 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 | 手指的索引编号。 |
......
......@@ -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>
......
......@@ -11,7 +11,7 @@
| 名称 | 支持冒泡 | 功能描述 |
| ---------------------------------------- | ---- | ---------------------------------------- |
| onAreaChange(event:&nbsp;(oldValue:&nbsp;Area,&nbsp;newValue:&nbsp;Area)&nbsp;=&gt;&nbsp;void) | 否 | 组件区域变化时触发该回调,Area类型描述见[Area](ts-types.md#area8)。 |
| onAreaChange(event:&nbsp;(oldValue:&nbsp;[Area](ts-types.md#area8),&nbsp;newValue:&nbsp;[Area](ts-types.md#area8))&nbsp;=&gt;&nbsp;void) | 否 | 组件区域变化时触发该回调。 |
## 示例
......@@ -22,7 +22,7 @@
@Component
struct AreaExample {
@State value: string = 'Text'
@State size1: string = ''
@State sizeValue: 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.size1 = JSON.stringify(newValue)
this.sizeValue = JSON.stringify(newValue)
})
Text('new area is: \n' + this.size).margin({ right: 30, left: 30 })
Text('new area is: \n' + this.sizeValue).margin({ right: 30, left: 30 })
}
.width('100%').height('100%').margin({ top: 30 })
}
......
# 组件可见区域变化事件
组件可见区域变化事件指组件在屏幕中显示的面积变化,提供了判断组件是否完全或部分显示在屏幕中的能力,通常适用于像广告曝光埋点之类的场景。
组件可见区域变化事件是组件在屏幕中的显示区域面积变化时触发的事件,提供了判断组件是否完全或部分显示在屏幕中的能力,适用于广告曝光埋点之类的场景。
> **说明:**
>
......
# 按键事件
按键事件指组件与键盘、遥控器等按键设备交互时触发的事件。
按键事件指组件与键盘、遥控器等按键设备交互时触发的事件,适用于所有可交互组件(默认可获焦),例如Button。对于Text,Image等不可获焦组件,可以设置focusable属性为true后使用按键事件
> **说明:**
>
> 从API Version 7开始支持。后续版本如有新增内容,则采用上角标单独标记该内容的起始版本。
## 事件
| 名称 | 支持冒泡 | 功能描述 |
......
......@@ -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
# 目录结构
FA应用的eTS模块(entry/src/main)的典型开发目录结构如下:
......@@ -16,10 +15,9 @@ FA应用的eTS模块(entry/src/main)的典型开发目录结构如下:
**各个文件夹和文件的作用:**
- **app.ets**文件用于全局应用逻辑和应用生命周期管理。
- **pages**目录用于存放所有组件页面。
- **pages**目录用于存放所有页面。
- **common**目录用于存放公共代码文件,比如:自定义组件和公共方法。
......
# 应用代码文件访问规则
# 文件访问规则
应用代码中文件访问方法主要有下面两种:
应用代码文件可通过如下方式访问:
- **相对路径**:使用相对路径引用代码文件,以"../"访问上一级目录,以"./"访问当前目录,也可以省略不写。
- **绝对路径**:使用当前模块根路径引用代码文件,比如: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) {
......
......@@ -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大小。 |
## 像素单位转换
......
......@@ -8,7 +8,7 @@
引用rawfile下资源时使用```"$rawfile('filename')"```的形式,filename需要表示为rawfile目录下的文件相对路径,文件名需要包含后缀,路径开头不可以以"/"开头。
> **说明:**
>
>
> 资源描述符不能拼接使用,仅支持普通字符串如`'app.type.name'`。
>
> `$r`返回值为Resource对象,可通过[getString](../reference/apis/js-apis-resource-manager.md#getstring) 方法获取对应的字符串。
......
......@@ -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.
先完成此消息的编辑!
想要评论请 注册