Skip to content

D
Docs

OpenHarmony / Docs
大约 2 年 前同步成功

通知 161
Star 293
Fork 28
D
Docs
提交 281e9a06 编写于 作者: D duangavin123
浏览文件
操作

Signed-off-by: duangavin123 <duanxichao@huawei.com> 

Merge branch 'master' of https://gitee.com/duangavin123_admin/docs_1
上级 9f2301a2 5f0ed18f
隐藏空白更改
内联 并排
Showing with 614 addition and 106 deletion
zh-cn/application-dev/reference/apis/js-apis-arkui-drawableDescriptor.md
浏览文件 @ 281e9a06
...@@ -68,7 +68,8 @@ getPixelMap(): image.PixelMap; ...@@ -68,7 +68,8 @@ getPixelMap(): image.PixelMap;
**示例：** **示例：**
```ts ```ts
pixmap: PixelMap = drawable1.getPixelMap(); pixmap: PixelMap = (<DrawableDescriptor> (this.resManager.getDrawableDescriptor($r('app.media.icon')
.id))).getPixelMap();
``` ```
## LayeredDrawableDescriptor.getPixelMap ## LayeredDrawableDescriptor.getPixelMap
...@@ -86,7 +87,8 @@ getPixelMap(): image.PixelMap; ...@@ -86,7 +87,8 @@ getPixelMap(): image.PixelMap;
**示例：** **示例：**
```ts ```ts
pixmap: PixelMap = layeredDrawable1.getPixelMap(); pixmap: PixelMap = ((<LayeredDrawableDescriptor> (this.resManager.getDrawableDescriptor($r('app.media.icon')
.id))).getForeground()).getPixelMap();
``` ```
## LayeredDrawableDescriptor.getForeground ## LayeredDrawableDescriptor.getForeground
...@@ -104,7 +106,8 @@ getForeground(): DrawableDescriptor; ...@@ -104,7 +106,8 @@ getForeground(): DrawableDescriptor;
**示例：** **示例：**
```ts ```ts
drawable: DrawableDescriptor = layeredDrawable1.getForeground(); drawable: DrawableDescriptor = (<LayeredDrawableDescriptor> (this.resManager.getDrawableDescriptor($r('app.media.icon')
.id))).getForeground();
``` ```
## LayeredDrawableDescriptor.getBackground ## LayeredDrawableDescriptor.getBackground
...@@ -122,7 +125,8 @@ getBackground(): DrawableDescriptor; ...@@ -122,7 +125,8 @@ getBackground(): DrawableDescriptor;
**示例：** **示例：**
```ts ```ts
drawable: DrawableDescriptor = layeredDrawable1.getBackground(); drawable: DrawableDescriptor = (<LayeredDrawableDescriptor> (this.resManager.getDrawableDescriptor($r('app.media.icon')
.id))).getBackground();
``` ```
## LayeredDrawableDescriptor.getMask ## LayeredDrawableDescriptor.getMask
...@@ -140,5 +144,6 @@ getMask(): DrawableDescriptor; ...@@ -140,5 +144,6 @@ getMask(): DrawableDescriptor;
**示例：** **示例：**
```ts ```ts
drawable: DrawableDescriptor = layeredDrawable1.getMask(); drawable: DrawableDescriptor = (<LayeredDrawableDescriptor> (this.resManager.getDrawableDescriptor($r('app.media.icon')
.id))).getMask();
``` ```
zh-cn/application-dev/reference/apis/js-apis-curve.md
浏览文件 @ 281e9a06
...@@ -16,7 +16,7 @@ import Curves from '@ohos.curves' ...@@ -16,7 +16,7 @@ import Curves from '@ohos.curves'
## Curves.initCurve<sup>9+</sup> ## Curves.initCurve<sup>9+</sup>
initCurve(curve?: Curve)：ICurve initCurve(curve?: Curve): ICurve
插值曲线的初始化函数，可以根据入参创建一个插值曲线对象。 插值曲线的初始化函数，可以根据入参创建一个插值曲线对象。
...@@ -25,9 +25,9 @@ initCurve(curve?: Curve)：ICurve ...@@ -25,9 +25,9 @@ initCurve(curve?: Curve)：ICurve
**参数：** **参数：**
| 参数名 | 类型 | 必填 | 默认值 | 说明 | | 参数名 | 类型 | 必填 | 说明 |
| ------ | ------------------------------------------------------------ | ---- | ------------ | ---------- | | ------ | ----------------------------------------------- | ---- | ----------------------------------- |
| curve | [Curve](../arkui-ts/ts-appendix-enums.md#curve) | 否 | Curve.Linear | 曲线类型。 | | curve | [Curve](../arkui-ts/ts-appendix-enums.md#curve) | 否 | 曲线类型。<br/>默认值：Curve.Linear |
**返回值：** **返回值：**
...@@ -45,7 +45,7 @@ Curves.initCurve(Curve.EaseIn) // 创建一个默认先慢后快插值曲线 ...@@ -45,7 +45,7 @@ Curves.initCurve(Curve.EaseIn) // 创建一个默认先慢后快插值曲线
##  Curves.stepsCurve<sup>9+</sup> ##  Curves.stepsCurve<sup>9+</sup>
stepsCurve(count: number, end: boolean)：ICurve stepsCurve(count: number, end: boolean): ICurve
构造阶梯曲线对象。 构造阶梯曲线对象。
...@@ -75,7 +75,7 @@ Curves.stepsCurve(9, true) //创建一个阶梯曲线 ...@@ -75,7 +75,7 @@ Curves.stepsCurve(9, true) //创建一个阶梯曲线
## Curves.cubicBezierCurve<sup>9+</sup> ## Curves.cubicBezierCurve<sup>9+</sup>
cubicBezierCurve(x1: number, y1: number, x2: number, y2: number)：ICurve cubicBezierCurve(x1: number, y1: number, x2: number, y2: number): ICurve
构造三阶贝塞尔曲线对象，曲线的值必须处于0-1之间。 构造三阶贝塞尔曲线对象，曲线的值必须处于0-1之间。
...@@ -108,7 +108,7 @@ Curves.cubicBezierCurve(0.1, 0.0, 0.1, 1.0) // 创建一个三阶贝塞尔曲线 ...@@ -108,7 +108,7 @@ Curves.cubicBezierCurve(0.1, 0.0, 0.1, 1.0) // 创建一个三阶贝塞尔曲线
##  Curves.springCurve<sup>9+</sup> ##  Curves.springCurve<sup>9+</sup>
springCurve(velocity: number, mass: number, stiffness: number, damping: number)：ICurve springCurve(velocity: number, mass: number, stiffness: number, damping: number): ICurve
构造弹簧曲线对象，曲线形状由弹簧参数决定，动画时长受animation、animateTo中的duration参数控制。 构造弹簧曲线对象，曲线形状由弹簧参数决定，动画时长受animation、animateTo中的duration参数控制。
...@@ -160,7 +160,7 @@ springMotion(response?: number, dampingFraction?: number, overlapDuration?: numb ...@@ -160,7 +160,7 @@ springMotion(response?: number, dampingFraction?: number, overlapDuration?: numb
| 类型 | 说明 | | 类型 | 说明 |
| ---------------------------------- | ---------------- | | ---------------------------------- | ---------------- |
| [ICurve](#icurve)| 曲线对象。<br>**说明:** 弹性动画曲线为物理曲线，[animation](../arkui-ts/ts-animatorproperty.md)、[animateTo](../arkui-ts/ts-explicit-animation.md)中的duration参数不生效，动画持续时间取决于springMotion动画曲线参数和之前的速度。时间不能归一，故不能通过该曲线的[interpolate](#interpolate)函数获得插值。 | | [ICurve](#icurve)| 曲线对象。<br>**说明:** 弹性动画曲线为物理曲线，[animation](../arkui-ts/ts-animatorproperty.md)、[animateTo](../arkui-ts/ts-explicit-animation.md)中的duration参数不生效，动画持续时间取决于springMotion动画曲线参数和之前的速度。时间不能归一，故不能通过该曲线的[interpolate](#interpolate9)函数获得插值。 |
**示例：** **示例：**
...@@ -193,7 +193,7 @@ responsiveSpringMotion(response?: number, dampingFraction?: number, overlapDurat ...@@ -193,7 +193,7 @@ responsiveSpringMotion(response?: number, dampingFraction?: number, overlapDurat
| 类型 | 说明 | | 类型 | 说明 |
| ---------------------------------- | ---------------- | | ---------------------------------- | ---------------- |
| [ICurve](#icurve)| 曲线对象。<br>**说明:** <br>1、弹性跟手动画曲线为springMotion的一种特例，仅默认值不同。如果使用自定义参数的弹性曲线，推荐使用springMotion构造曲线；如果使用跟手动画，推荐使用默认参数的弹性跟手动画曲线。<br>2、[animation](../arkui-ts/ts-animatorproperty.md)、[animateTo](../arkui-ts/ts-explicit-animation.md)中的duration参数不生效，动画持续时间取决于responsiveSpringMotion动画曲线参数和之前的速度，也不能通过该曲线的[interpolate](#interpolate)函数获得插值。 | | [ICurve](#icurve)| 曲线对象。<br>**说明:** <br>1、弹性跟手动画曲线为springMotion的一种特例，仅默认值不同。如果使用自定义参数的弹性曲线，推荐使用springMotion构造曲线；如果使用跟手动画，推荐使用默认参数的弹性跟手动画曲线。<br>2、[animation](../arkui-ts/ts-animatorproperty.md)、[animateTo](../arkui-ts/ts-explicit-animation.md)中的duration参数不生效，动画持续时间取决于responsiveSpringMotion动画曲线参数和之前的速度，也不能通过该曲线的[interpolate](#interpolate9)函数获得插值。 |
**示例：** **示例：**
...@@ -205,7 +205,7 @@ Curves.responsiveSpringMotion() // 创建一个默认弹性跟手动画曲线 ...@@ -205,7 +205,7 @@ Curves.responsiveSpringMotion() // 创建一个默认弹性跟手动画曲线
##  Curves.interpolatingSpring<sup>10+</sup> ##  Curves.interpolatingSpring<sup>10+</sup>
interpolatingSpring(velocity: number, mass: number, stiffness: number, damping: number)：ICurve interpolatingSpring(velocity: number, mass: number, stiffness: number, damping: number): ICurve
构造插值器弹簧曲线对象，生成一条从0到1的动画曲线，实际动画值根据曲线进行插值计算。动画时间由曲线参数决定，不受animation、animateTo中的duration参数控制。 构造插值器弹簧曲线对象，生成一条从0到1的动画曲线，实际动画值根据曲线进行插值计算。动画时间由曲线参数决定，不受animation、animateTo中的duration参数控制。
...@@ -260,7 +260,7 @@ import Curves from '@ohos.curves' ...@@ -260,7 +260,7 @@ import Curves from '@ohos.curves'
interpolate(fraction) { interpolate(fraction) {
return Math.sqrt(fraction); return Math.sqrt(fraction);
} }
Curves.customCurve(this.interpolate) // 创建一个用户自定义插值曲线 private curve = Curves.customCurve(this.interpolate) // 创建一个用户自定义插值曲线
``` ```
...@@ -268,7 +268,7 @@ Curves.customCurve(this.interpolate) // 创建一个用户自定义插值曲线 ...@@ -268,7 +268,7 @@ Curves.customCurve(this.interpolate) // 创建一个用户自定义插值曲线
## ICurve ## ICurve
### interpolate ### interpolate<sup>9+</sup>
interpolate(fraction:&nbsp;number): number interpolate(fraction:&nbsp;number): number
...@@ -310,9 +310,9 @@ init(curve?: Curve): string ...@@ -310,9 +310,9 @@ init(curve?: Curve): string
**参数：** **参数：**
| 参数名 | 类型 | 必填 | 默认值 | 说明 | | 参数名 | 类型 | 必填 | 说明 |
| ------ | ------------------------------------------------------------ | ---- | ------------ | ---------- | | ------ | ----------------------------------------------- | ---- | ----------------------------------- |
| curve |[Curve](../arkui-ts/ts-appendix-enums.md#curve) | 否 | Curve.Linear | 曲线类型。 | | curve | [Curve](../arkui-ts/ts-appendix-enums.md#curve) | 否 | 曲线类型。<br/>默认值：Curve.Linear |
## Curves.steps<sup>(deprecated)</sup> ## Curves.steps<sup>(deprecated)</sup>
......
zh-cn/application-dev/reference/apis/js-apis-font.md
浏览文件 @ 281e9a06
...@@ -5,6 +5,8 @@ ...@@ -5,6 +5,8 @@
> **说明** > **说明**
> >
> 本模块首批接口从API version 9开始支持。后续版本的新增接口，采用上角标单独标记接口的起始版本。 > 本模块首批接口从API version 9开始支持。后续版本的新增接口，采用上角标单独标记接口的起始版本。
>
> 本模块接口为系统接口。
## 导入模块 ## 导入模块
......
zh-cn/application-dev/reference/apis/js-apis-matrix4.md
浏览文件 @ 281e9a06
...@@ -16,7 +16,7 @@ import matrix4 from '@ohos.matrix4' ...@@ -16,7 +16,7 @@ import matrix4 from '@ohos.matrix4'
## matrix4.init ## matrix4.init
init(array: Array&lt;number&gt;): Matrix4Transit init(option: [number,number,number,number,number,number,number,number,number,number,number,number,number,number,number,number]): Matrix4Transit
Matrix的构造函数，可以通过传入的参数创建一个四阶矩阵，矩阵为列优先。 Matrix的构造函数，可以通过传入的参数创建一个四阶矩阵，矩阵为列优先。
...@@ -25,17 +25,17 @@ Matrix的构造函数，可以通过传入的参数创建一个四阶矩阵， ...@@ -25,17 +25,17 @@ Matrix的构造函数，可以通过传入的参数创建一个四阶矩阵，
**参数：** **参数：**
| 参数名 | 类型 | 必填 | 说明 | | 参数名 | 类型 | 必填 | 说明 |
| ------ | ------------------- | ---- | ------------------------------------------------------------ | | ------ | ------------------------------------------------------------ | ---- | ------------------------------------------------------------ |
| array | Array&lt;number&gt; | 是 | 参数为长度为16（4\*4）的number数组,&nbsp;详情见参数描述。<br/>默认值：<br/>[1,&nbsp;0,&nbsp;0,&nbsp;0,<br/>0,&nbsp;1,&nbsp;0,&nbsp;0,<br/>0,&nbsp;0,&nbsp;1,&nbsp;0,<br/>0,&nbsp;0,&nbsp;0,&nbsp;1] | | option | [number,number,number,number,number,number,number,number,number,number,number,number,number,number,number,number] | 是 | 参数为长度为16（4\*4）的number数组,&nbsp;详情见四阶矩阵说明。<br/>默认值：<br/>[1,&nbsp;0,&nbsp;0,&nbsp;0,<br/>0,&nbsp;1,&nbsp;0,&nbsp;0,<br/>0,&nbsp;0,&nbsp;1,&nbsp;0,<br/>0,&nbsp;0,&nbsp;0,&nbsp;1] |
**返回值：** **返回值：**
| 类型 | 说明 | | 类型 | 说明 |
| -------------- | ---------------------------- | | --------------------------------- | ---------------------------- |
| Matrix4Transit | 根据入参创建的四阶矩阵对象。 | | [Matrix4Transit](#matrix4transit) | 根据入参创建的四阶矩阵对象。 |
**array参数说明：** **四阶矩阵说明：**
| 参数名 | 类型 | 必填 | 说明 | | 参数名 | 类型 | 必填 | 说明 |
| ---- | ------ | ---- | -------------------- | | ---- | ------ | ---- | -------------------- |
...@@ -91,9 +91,9 @@ Matrix的初始化函数，可以返回一个单位矩阵对象。 ...@@ -91,9 +91,9 @@ Matrix的初始化函数，可以返回一个单位矩阵对象。
**返回值：** **返回值：**
| 类型 | 说明 | | 类型 | 说明 |
| -------------- | -------------- | | --------------------------------- | -------------- |
| Matrix4Transit | 单位矩阵对象。 | | [Matrix4Transit](#matrix4transit) | 单位矩阵对象。 |
**示例：** **示例：**
...@@ -136,9 +136,9 @@ Matrix的拷贝函数，可以拷贝一份当前的矩阵对象。 ...@@ -136,9 +136,9 @@ Matrix的拷贝函数，可以拷贝一份当前的矩阵对象。
**返回值：** **返回值：**
| 类型 | 说明 | | 类型 | 说明 |
| -------------- | -------------------- | | --------------------------------- | -------------------- |
| Matrix4Transit | 当前矩阵的拷贝对象。 | | [Matrix4Transit](#matrix4transit) | 当前矩阵的拷贝对象。 |
**示例：** **示例：**
...@@ -171,12 +171,12 @@ struct Test { ...@@ -171,12 +171,12 @@ struct Test {
![zh-cn_image_0000001219744181](figures/zh-cn_image_0000001219744181.png) ![zh-cn_image_0000001219744181](figures/zh-cn_image_0000001219744181.png)
## Matrix4 ## Matrix4Transit
### combine ### combine
combine(matrix: Matrix4): Matrix4Transit combine(option: Matrix4Transit): Matrix4Transit
Matrix的叠加函数，可以将两个矩阵的效果叠加起来生成一个新的矩阵对象。 Matrix的叠加函数，可以将两个矩阵的效果叠加起来生成一个新的矩阵对象。
...@@ -185,15 +185,15 @@ Matrix的叠加函数，可以将两个矩阵的效果叠加起来生成一个 ...@@ -185,15 +185,15 @@ Matrix的叠加函数，可以将两个矩阵的效果叠加起来生成一个
**参数：** **参数：**
| 参数名 | 类型 | 必填 | 说明 | | 参数名 | 类型 | 必填 | 说明 |
| ------ | ------- | ---- | ------------------ | | ------ | --------------------------------- | ---- | ------------------ |
| matrix | Matrix4 | 是 | 待叠加的矩阵对象。 | | option | [Matrix4Transit](#matrix4transit) | 是 | 待叠加的矩阵对象。 |
**返回值：** **返回值：**
| 类型 | 说明 | | 类型 | 说明 |
| -------------- | ------------------ | | --------------------------------- | ------------------ |
| Matrix4Transit | 矩阵叠加后的对象。 | | [Matrix4Transit](#matrix4transit) | 矩阵叠加后的对象。 |
**示例：** **示例：**
...@@ -238,9 +238,9 @@ Matrix的逆函数，可以返回一个当前矩阵对象的逆矩阵，即效 ...@@ -238,9 +238,9 @@ Matrix的逆函数，可以返回一个当前矩阵对象的逆矩阵，即效
**返回值：** **返回值：**
| 类型 | 说明 | | 类型 | 说明 |
| -------------- | ---------------------- | | --------------------------------- | ---------------------- |
| Matrix4Transit | 当前矩阵的逆矩阵对象。 | | [Matrix4Transit](#matrix4transit) | 当前矩阵的逆矩阵对象。 |
**示例：** **示例：**
...@@ -273,25 +273,23 @@ struct Tests { ...@@ -273,25 +273,23 @@ struct Tests {
### translate ### translate
translate({x?: number, y?: number, z?: number}): Matrix4Transit translate(option: TranslateOption): Matrix4Transit
Matrix的平移函数，可以为当前矩阵增加x轴/Y轴/Z轴平移效果。 Matrix的平移函数，可以为当前矩阵增加x轴/y轴/z轴平移效果。
**系统能力：** SystemCapability.ArkUI.ArkUI.Full **系统能力：** SystemCapability.ArkUI.ArkUI.Full
**参数：** **参数：**
| 参数名 | 类型 | 必填 | 说明 | | 参数名 | 类型 | 必填 | 说明 |
| ------ | ------ | ---- | ----------------------------------------------------------- | | ------ | ----------------------------------- | ---- | -------------- |
| x | number | 否 | x轴的平移距离，单位px。<br/>默认值：0<br/>取值范围 (-∞, +∞) | | option | [TranslateOption](#translateoption) | 是 | 设置平移参数。 |
| y | number | 否 | y轴的平移距离，单位px。<br/>默认值：0<br/>取值范围 (-∞, +∞) |
| z | number | 否 | z轴的平移距离，单位px。<br/>默认值：0<br/>取值范围 (-∞, +∞) |
**返回值：** **返回值：**
| 类型 | 说明 | | 类型 | 说明 |
| -------------- | ---------------------------- | | --------------------------------- | ---------------------------- |
| Matrix4Transit | 增加好平移效果后的矩阵对象。 | | [Matrix4Transit](#matrix4transit) | 增加好平移效果后的矩阵对象。 |
**示例：** **示例：**
...@@ -319,28 +317,30 @@ struct Test { ...@@ -319,28 +317,30 @@ struct Test {
### scale ### scale
scale({x?: number, y?: number, z?: number, centerX?: number, centerY?: number}): Matrix4Transit scale(option: ScaleOption): Matrix4Transit
Matrix的缩放函数，可以为当前矩阵增加x轴/Y轴/Z轴缩放效果。 Matrix的缩放函数，可以为当前矩阵增加x轴/y轴/z轴缩放效果。
**系统能力：** SystemCapability.ArkUI.ArkUI.Full **系统能力：** SystemCapability.ArkUI.ArkUI.Full
**参数：** **参数：**
| 参数名 | 类型 | 必填 | 说明 | | 参数名 | 类型 | 必填 | 说明 |
| ------- | ------ | ---- | ------------------------------------------------------------ | | ------ | --------------------------- | ---- | -------------- |
| x | number | 否 | x轴的缩放倍数。x>1时以x轴方向放大，x<1时以x轴方向缩小。<br/>默认值：1<br/>取值范围 [0, +∞)<br/>**说明：** <br/>设置小于0的值时，按照默认值处理。 | | option | [ScaleOption](#scaleoption) | 是 | 设置缩放参数。 |
| y | number | 否 | y轴的缩放倍数。y>1时以y轴方向放大，y<1时以y轴方向缩小。<br/>默认值：1<br/>取值范围 [0, +∞)<br/>**说明：** <br/>设置小于0的值时，按照默认值处理。 |
| z | number | 否 | z轴的缩放倍数。z>1时以z轴方向放大，z<1时以z轴方向缩小。<br/>默认值：1<br/>取值范围 [0, +∞)<br/>**说明：** <br/>设置小于0的值时，按照默认值处理。 |
| centerX | number | 否 | 变换中心点x轴坐标。<br/>默认值：0。<br/>取值范围 (-∞, +∞) |
| centerY | number | 否 | 变换中心点y轴坐标。<br/>默认值：0。<br/>取值范围 (-∞, +∞) |
**返回值：** **返回值：**
| 类型 | 说明 | | 类型 | 说明 |
| -------------- | ---------------------------- | | --------------------------------- | ---------------------------- |
| Matrix4Transit | 增加好缩放效果后的矩阵对象。 | | [Matrix4Transit](#matrix4transit) | 增加好平移效果后的矩阵对象。 |
**返回值：**
| 类型 | 说明 |
| --------------------------------- | ---------------------------- |
| [Matrix4Transit](#matrix4transit) | 增加好缩放效果后的矩阵对象。 |
**示例：** **示例：**
...@@ -367,29 +367,30 @@ struct Test { ...@@ -367,29 +367,30 @@ struct Test {
### rotate ### rotate
rotate({x?: number, y?: number, z?: number, angle?: number, centerX?: Length, centerY?: Length}): Matrix4Transit rotate(option: RotateOption): Matrix4Transit
Matrix的旋转函数，可以为当前矩阵增加x轴/Y轴/Z轴旋转效果。 Matrix的旋转函数，可以为当前矩阵增加x轴/y轴/z轴旋转效果。
**系统能力：** SystemCapability.ArkUI.ArkUI.Full **系统能力：** SystemCapability.ArkUI.ArkUI.Full
**参数：** **参数：**
| 参数名 | 类型 | 必填 | 说明 | | 参数名 | 类型 | 必填 | 说明 |
| ------- | ------ | ---- | ------------------------------------------------------- | | ------ | ----------------------------- | ---- | -------------- |
| x | number | 否 | 旋转轴向量x坐标。<br/>默认值：1。<br/>取值范围 (-∞, +∞) | | option | [RotateOption](#rotateoption) | 是 | 设置旋转参数。 |
| y | number | 否 | 旋转轴向量y坐标。<br/>默认值：1。<br/>取值范围 (-∞, +∞) |
| z | number | 否 | 旋转轴向量z坐标。<br/>默认值：1。<br/>取值范围 (-∞, +∞) | **返回值：**
| angle | number | 否 | 旋转角度。<br/>默认值：0 |
| centerX | number | 否 | 变换中心点x轴坐标。<br/>默认值：0 | | 类型 | 说明 |
| centerY | number | 否 | 变换中心点y轴坐标。<br/>默认值：0 | | --------------------------------- | ---------------------------- |
| [Matrix4Transit](#matrix4transit) | 增加好平移效果后的矩阵对象。 |
**返回值：** **返回值：**
| 类型 | 说明 | | 类型 | 说明 |
| -------------- | ---------------------------- | | --------------------------------- | ---------------------------- |
| Matrix4Transit | 增加好旋转效果后的矩阵对象。 | | [Matrix4Transit](#matrix4transit) | 增加好旋转效果后的矩阵对象。 |
**示例：** **示例：**
...@@ -417,7 +418,7 @@ struct Test { ...@@ -417,7 +418,7 @@ struct Test {
### transformPoint ### transformPoint
transformPoint(point: Point): Point transformPoint(option: [number, number]): [number, number]
Matrix的坐标点转换函数，可以将当前的变换效果作用到一个坐标点上。 Matrix的坐标点转换函数，可以将当前的变换效果作用到一个坐标点上。
...@@ -426,15 +427,15 @@ Matrix的坐标点转换函数，可以将当前的变换效果作用到一个 ...@@ -426,15 +427,15 @@ Matrix的坐标点转换函数，可以将当前的变换效果作用到一个
**参数：** **参数：**
| 参数名 | 类型 | 必填 | 说明 | | 参数名 | 类型 | 必填 | 说明 |
| ------ | ----- | ---- | ------------------ | | ------ | ---------------- | ---- | ------------------ |
| point | Point | 是 | 需要转换的坐标点。 | | option | [number, number] | 是 | 需要转换的坐标点。 |
**返回值：** **返回值：**
| 类型 | 说明 | | 类型 | 说明 |
| ----- | ---------------- | | ---------------- | --------------------------- |
| Point | 返回矩阵变换后的Point对象。 | | [number, number] | 返回矩阵变换后的Point对象。 |
**示例：** **示例：**
...@@ -471,4 +472,33 @@ struct Test { ...@@ -471,4 +472,33 @@ struct Test {
} }
``` ```
![zh-cn_image_0000001219864133](figures/zh-cn_image_0000001219864133.PNG) ![zh-cn_image_0000001219864133](figures/zh-cn_image_0000001219864133.PNG)
\ No newline at end of file
## TranslateOption
| 参数名 | 类型 | 必填 | 说明 |
| ------ | ------ | ---- | ----------------------------------------------------------- |
| x | number | 否 | x轴的平移距离，单位px。<br/>默认值：0<br/>取值范围 (-∞, +∞) |
| y | number | 否 | y轴的平移距离，单位px。<br/>默认值：0<br/>取值范围 (-∞, +∞) |
| z | number | 否 | z轴的平移距离，单位px。<br/>默认值：0<br/>取值范围 (-∞, +∞) |
## ScaleOption
| 参数名 | 类型 | 必填 | 说明 |
| ------- | ------ | ---- | ------------------------------------------------------------ |
| x | number | 否 | x轴的缩放倍数。x>1时以x轴方向放大，x<1时以x轴方向缩小。<br/>默认值：1<br/>取值范围 [0, +∞)<br/>**说明：** <br/>设置小于0的值时，按照默认值处理。 |
| y | number | 否 | y轴的缩放倍数。y>1时以y轴方向放大，y<1时以y轴方向缩小。<br/>默认值：1<br/>取值范围 [0, +∞)<br/>**说明：** <br/>设置小于0的值时，按照默认值处理。 |
| z | number | 否 | z轴的缩放倍数。z>1时以z轴方向放大，z<1时以z轴方向缩小。<br/>默认值：1<br/>取值范围 [0, +∞)<br/>**说明：** <br/>设置小于0的值时，按照默认值处理。 |
| centerX | number | 否 | 变换中心点x轴坐标。<br/>默认值：0。<br/>取值范围 (-∞, +∞) |
| centerY | number | 否 | 变换中心点y轴坐标。<br/>默认值：0。<br/>取值范围 (-∞, +∞) |
## RotateOption
| 参数名 | 类型 | 必填 | 说明 |
| ------- | ------ | ---- | ------------------------------------------------------- |
| x | number | 否 | 旋转轴向量x坐标。<br/>默认值：1。<br/>取值范围 (-∞, +∞) |
| y | number | 否 | 旋转轴向量y坐标。<br/>默认值：1。<br/>取值范围 (-∞, +∞) |
| z | number | 否 | 旋转轴向量z坐标。<br/>默认值：1。<br/>取值范围 (-∞, +∞) |
| angle | number | 否 | 旋转角度。<br/>默认值：0 |
| centerX | number | 否 | 变换中心点x轴坐标。<br/>默认值：0 |
| centerY | number | 否 | 变换中心点y轴坐标。<br/>默认值：0 |
\ No newline at end of file
zh-cn/application-dev/reference/apis/js-apis-measure.md
浏览文件 @ 281e9a06
...@@ -112,7 +112,7 @@ struct Index { ...@@ -112,7 +112,7 @@ struct Index {
| 名称 | 类型 | 必填 | 说明 | | 名称 | 类型 | 必填 | 说明 |
| -------------- | -------------------------------------------------------------------------------------------------- | ---- | ----------------------------------------------- | | -------------- | -------------------------------------------------------------------------------------------------- | ---- | ----------------------------------------------- |
| textContent<sup>10+</sup> | string | 是 | 设置被计算文本内容。 | | textContent | string | 是 | 设置被计算文本内容。 |
| constraintWidth<sup>10+</sup> | number&nbsp;\|&nbsp;string&nbsp;\|&nbsp;[Resource](../arkui-ts/ts-types.md#resource) | 否 | 设置被计算文本布局宽度。<br/>**说明：** 默认单位为vp | | constraintWidth<sup>10+</sup> | number&nbsp;\|&nbsp;string&nbsp;\|&nbsp;[Resource](../arkui-ts/ts-types.md#resource) | 否 | 设置被计算文本布局宽度。<br/>**说明：** 默认单位为vp |
| fontSize | number&nbsp;\|&nbsp;string&nbsp;\|&nbsp;[Resource](../arkui-ts/ts-types.md#resource) | 否 | 设置被计算文本字体大小，fontSize为number类型时，使用fp单位。<br/>默认值：16fp。<br/>**说明：** 不支持设置百分比字符串。 | | fontSize | number&nbsp;\|&nbsp;string&nbsp;\|&nbsp;[Resource](../arkui-ts/ts-types.md#resource) | 否 | 设置被计算文本字体大小，fontSize为number类型时，使用fp单位。<br/>默认值：16fp。<br/>**说明：** 不支持设置百分比字符串。 |
| fontStyle | number&nbsp;\|&nbsp;[FontStyle](../arkui-ts/ts-appendix-enums.md#fontstyle) | 否 | 设置被计算文本字体样式。<br>默认值：FontStyle.Normal | | fontStyle | number&nbsp;\|&nbsp;[FontStyle](../arkui-ts/ts-appendix-enums.md#fontstyle) | 否 | 设置被计算文本字体样式。<br>默认值：FontStyle.Normal |
......
zh-cn/application-dev/reference/apis/js-apis-plugincomponent.md
浏览文件 @ 281e9a06
...@@ -376,10 +376,24 @@ on(eventType: string, callback: OnPushEventCallback | OnRequestEventCallback ): ...@@ -376,10 +376,24 @@ on(eventType: string, callback: OnPushEventCallback | OnRequestEventCallback ):
| eventType | string | 是 | 监听的事件类型，&nbsp;可选值为："push"&nbsp;、"request"。<br/>"push”：指组件提供者向使用者主动推送数据。<br/>"request”：指组件使用者向提供者主动请求数据。 | | eventType | string | 是 | 监听的事件类型，&nbsp;可选值为："push"&nbsp;、"request"。<br/>"push”：指组件提供者向使用者主动推送数据。<br/>"request”：指组件使用者向提供者主动请求数据。 |
| callback | [OnPushEventCallback](#onpusheventcallback)&nbsp;\|&nbsp;[OnRequestEventCallback](#onrequesteventcallback) | 是 | 对应监听回调，push事件对应回调类型为[OnPushEventCallback](#onpusheventcallback)，request事件对应回调类型为[OnRequestEventCallback](#onrequesteventcallback) 。 | | callback | [OnPushEventCallback](#onpusheventcallback)&nbsp;\|&nbsp;[OnRequestEventCallback](#onrequesteventcallback) | 是 | 对应监听回调，push事件对应回调类型为[OnPushEventCallback](#onpusheventcallback)，request事件对应回调类型为[OnRequestEventCallback](#onrequesteventcallback) 。 |
**示例：** **示例：**
```js ```js
function onPushListener(source, template, data, extraData) {
console.log("onPushListener template.source=" + template.source)
console.log("onPushListener source=" + JSON.stringify(source))
console.log("onPushListener template=" + JSON.stringify(template))
console.log("onPushListener data=" + JSON.stringify(data))
console.log("onPushListener extraData=" + JSON.stringify(extraData))
}
function onRequestListener(source, name, data) {
console.error("onRequestListener");
console.log("onRequestListener source=" + JSON.stringify(source));
console.log("onRequestListener name=" + name);
console.log("onRequestListener data=" + JSON.stringify(data));
return { template: "ets/pages/plugin.js", data: data };
}
pluginComponentManager.on("push", onPushListener) pluginComponentManager.on("push", onPushListener)
pluginComponentManager.on("request", onRequestListener) pluginComponentManager.on("request", onRequestListener)
``` ```
......
zh-cn/application-dev/reference/apis/js-apis-system-router.md
浏览文件 @ 281e9a06
...@@ -341,8 +341,8 @@ export default { ...@@ -341,8 +341,8 @@ export default {
| 名称 | 类型 | 必填 | 说明 | | 名称 | 类型 | 必填 | 说明 |
| ------ | -------- | ---- | ------------------------------------------------------------ | | ------ | -------- | ---- | ------------------------------------------------------------ |
| uri<sup>7+</sup> | string | 是 | 目标页面的uri，可以是以下的两种格式：<br/>1. 页面的绝对路径，由config.json文件中的页面列表提供。例如：<br/>- pages/index/index<br/> -pages/detail/detail<br/>2. 特定路径。如果URI为斜杠（/），则显示主页。 | | uri | string | 是 | 目标页面的uri，可以是以下的两种格式：<br/>1. 页面的绝对路径，由config.json文件中的页面列表提供。例如：<br/>- pages/index/index<br/> -pages/detail/detail<br/>2. 特定路径。如果URI为斜杠（/），则显示主页。 |
| params<sup>7+</sup> | object | 否 | 表示路由跳转时要同时传递到目标页面的数据。跳转到目标页面后，使用router.getParams()获取传递的参数，此外，在类web范式中，参数也可以在页面中直接使用，如this.keyValue(keyValue为跳转时params参数中的key值)，如果目标页面中已有该字段，则其值会被传入的字段值覆盖。 | | params | object | 否 | 表示路由跳转时要同时传递到目标页面的数据。跳转到目标页面后，使用router.getParams()获取传递的参数，此外，在类web范式中，参数也可以在页面中直接使用，如this.keyValue(keyValue为跳转时params参数中的key值)，如果目标页面中已有该字段，则其值会被传入的字段值覆盖。 |
## BackRouterOptions ## BackRouterOptions
......
zh-cn/application-dev/reference/arkui-ts/ts-container-badge.md
浏览文件 @ 281e9a06
...@@ -30,7 +30,7 @@ ...@@ -30,7 +30,7 @@
| -------- | -------- | -------- | -------- | | -------- | -------- | -------- | -------- |
| count | number | 是 | 设置提醒消息数。<br/>**说明：** <br/>小于等于0时不显示信息标记。<br/>取值范围：[-2147483648,2147483647]，非整数时会舍去小数部分取整数部分，如5.5取5。 | | count | number | 是 | 设置提醒消息数。<br/>**说明：** <br/>小于等于0时不显示信息标记。<br/>取值范围：[-2147483648,2147483647]，非整数时会舍去小数部分取整数部分，如5.5取5。 |
| position | [BadgePosition](#badgeposition枚举说明) | 否 | 设置提示点显示位置。<br/>默认值：BadgePosition.RightTop | | position | [BadgePosition](#badgeposition枚举说明) | 否 | 设置提示点显示位置。<br/>默认值：BadgePosition.RightTop |
| maxCount | number | 否 | 最大消息数，超过最大消息时仅显示maxCount+。<br/>默认值：99 | | maxCount | number | 否 | 最大消息数，超过最大消息时仅显示maxCount+。<br/>默认值：99<br/>取值范围：[-2147483648,2147483647]，非整数时会舍去小数部分取整数部分，如5.5取5。 |
| style | [BadgeStyle](#badgestyle对象说明) | 是 | Badge组件可设置样式，支持设置文本颜色、尺寸、圆点颜色和尺寸。 | | style | [BadgeStyle](#badgestyle对象说明) | 是 | Badge组件可设置样式，支持设置文本颜色、尺寸、圆点颜色和尺寸。 |
**方法2：** Badge(value: {value: string, position?: BadgePosition, style: BadgeStyle}) **方法2：** Badge(value: {value: string, position?: BadgePosition, style: BadgeStyle})
......
zh-cn/third-party-cases/Readme-CN.md
浏览文件 @ 281e9a06
...@@ -25,6 +25,7 @@ ...@@ -25,6 +25,7 @@
- [如何使用OpenGL实现3D图形](how-to-use-opengl-to-draw-3d-graphics.md) - [如何使用OpenGL实现3D图形](how-to-use-opengl-to-draw-3d-graphics.md)
- [常见弹窗的使用](diverse-dialogues.md) - [常见弹窗的使用](diverse-dialogues.md)
- [折叠展开动效](collapse-and-expand.md) - [折叠展开动效](collapse-and-expand.md)
- [列表上拉加载更多内容](list-pullup-loading-data.md)
### 装饰器 ### 装饰器
- [控制页面刷新范围](overall-and-part-refresh.md) - [控制页面刷新范围](overall-and-part-refresh.md)
- [如何监听多层状态变化](observed-and-objectlink.md) - [如何监听多层状态变化](observed-and-objectlink.md)
...@@ -35,6 +36,7 @@ ...@@ -35,6 +36,7 @@
### 窗口管理 ### 窗口管理
- [如何实现沉浸模式](immersion-mode.md) - [如何实现沉浸模式](immersion-mode.md)
- [如何创建悬浮窗](float-window.md) - [如何创建悬浮窗](float-window.md)
- [保持屏幕常亮](keep-screen-on.md)
### 媒体 ### 媒体
- [常见图片编辑](image-edit.md) - [常见图片编辑](image-edit.md)
......
zh-cn/third-party-cases/collapse-and-expand.md
浏览文件 @ 281e9a06
...@@ -182,7 +182,7 @@ interface IRowItem { ...@@ -182,7 +182,7 @@ interface IRowItem {
@Entry @Entry
@Component @Component
struct CollapseAndExpandDemo { struct CollapseAndExpandDemo {
Provide("flag") flag: boolean = false @Provide("flag") flag: boolean = false
private onFlagChange = () => { private onFlagChange = () => {
animateTo({ animateTo({
duration: 650, duration: 650,
...@@ -247,7 +247,7 @@ struct CollapseAndExpandDemo { ...@@ -247,7 +247,7 @@ struct CollapseAndExpandDemo {
@Component @Component
struct RowItem { struct RowItem {
private props: IRowItem; private props: IRowItem;
Consume("flag") flag: boolean @Consume("flag") flag: boolean
build() { build() {
Flex() { Flex() {
...@@ -286,7 +286,7 @@ struct RowItem { ...@@ -286,7 +286,7 @@ struct RowItem {
@Component @Component
struct CollapseAndExpand { struct CollapseAndExpand {
private items: IRowItem[] = []; private items: IRowItem[] = [];
Consume("flag") flag: boolean; @Consume("flag") flag: boolean;
build() { build() {
Column() { Column() {
...@@ -301,9 +301,9 @@ struct CollapseAndExpand { ...@@ -301,9 +301,9 @@ struct CollapseAndExpand {
} }
``` ```
## 参考 ## 参考
[显示动画](../application-dev/reference/arkui-ts/ts-explicit-animation.md/) [显示动画](../application-dev/reference/arkui-ts/ts-explicit-animation.md)
[@Provide和@Consume：与后代组件双向同步](../application-dev/quick-start/arkts-provide-and-consume.md/) [@Provide和@Consume：与后代组件双向同步](../application-dev/quick-start/arkts-provide-and-consume.md)
[list开发指导](../zh-cn/application-dev/ui/ui-js-components-list.md/) [list开发指导](../application-dev/ui/ui-js-components-list.md)
......
zh-cn/third-party-cases/griditem-drag-and-drop.md
浏览文件 @ 281e9a06
...@@ -13,7 +13,7 @@ ...@@ -13,7 +13,7 @@
### 运行环境 ### 运行环境
- IDE：DevEco Studio 3.1 Beta2 - IDE：DevEco Studio 3.1 Beta2
- SDK：Ohos_sdk_public 3.2.11.5 (API Version 9 Release) - SDK：Ohos_sdk_public 3.2.11.9 (API Version 9 Release)
### 实现原理 ### 实现原理
......
zh-cn/third-party-cases/keep-screen-on.md 0 → 100644
浏览文件 @ 281e9a06
## 保持屏幕常亮
### 场景说明
在使用开发板进行应用开发调试时，不操作屏幕一段时间后，屏幕会熄屏变黑，再操作时需要再次点亮屏幕，耗费时间不利于调试。本例将介绍如何通过窗口管理相关接口实现屏幕常亮。
### 效果呈现
本示例最终效果如下（在开发板中可验证实际常亮效果）：
![screenon](figures/screenon.gif)
### 运行环境
本例基于以下环境开发，开发者也可以基于其他适配的版本进行开发：
- IDE：DevEco Studio 3.1 Release
- SDK：Ohos_sdk_public 3.2.12.2 (API Version 9 Release)
### 实现思路
通过Window的setWindowKeepScreenOn方法，在需要时控制屏幕是否常亮，并通过Window的getWindowProperties().isKeepScreenOn查看窗口属性中屏幕常亮的状态。
### 开发步骤
1. 构建简易界面，用于显示当前屏幕常亮的状态，并绘制按钮用于设置常亮和取消常亮。
```ts
build() {
Row() {
Column() {
Text(this.message + this.isScreenOn)
...
Button('设置常亮')
...
.onClick(()=>{
this.keepScreenOn(true)
})
Button('取消常亮')
...
.onClick(()=>{
this.keepScreenOn(false)
})
}
.width('100%')
}
.height('100%')
}
```
2. 获取应用上下文并通过其获取到当前窗口实例，通过窗口实例的setWindowKeepScreenOn方法控制屏幕是否常亮，并通过getWindowProperties获取窗口属性，从而查看属性中屏幕常亮状态isKeepScreenOn的取值。
```ts
import common from '@ohos.app.ability.common';
import window from '@ohos.window';
private context: common.BaseContext = getContext(this) as common.BaseContext
async keepScreenOn(status) {
let windowClass = await window.getLastWindow(this.context) //获取窗口实例
await windowClass.setWindowKeepScreenOn(status) //设置窗口常亮或取消
this.isScreenOn = await windowClass.getWindowProperties().isKeepScreenOn//查看屏幕常亮状态
}
```
### 完整代码
通过上述步骤可以完成整个示例的开发，完整代码如下：
```ts
import common from '@ohos.app.ability.common';
import window from '@ohos.window';
@Entry
@Component
struct KeepScreenOn {
@State message: string = '常亮状态 : '
@State isScreenOn: boolean = false
private context: common.BaseContext = getContext(this) as common.BaseContext
async keepScreenOn(status) {
let windowClass = await window.getLastWindow(this.context) //获取窗口实例
await windowClass.setWindowKeepScreenOn(status) //设置窗口常亮或取消
this.isScreenOn = await windowClass.getWindowProperties().isKeepScreenOn//查看屏幕常亮状态
}
build() {
Row() {
Column() {
Text(this.message + this.isScreenOn)
.fontSize(50)
.fontWeight(FontWeight.Bold)
Button('设置常亮')
.fontSize(16)
.height(50)
.width(100)
.borderRadius(10)
.margin({top:20})
.backgroundColor('#A4AE77')
.onClick(()=>{
this.keepScreenOn(true)
})
Button('取消常亮')
.fontSize(16)
.height(50)
.width(100)
.borderRadius(10)
.margin({top:20})
.backgroundColor('#A4AE77')
.onClick(()=>{
this.keepScreenOn(false)
})
}
.width('100%')
}
.height('100%')
}
}
```
\ No newline at end of file
zh-cn/third-party-cases/list-pullup-loading-data.md 0 → 100644
浏览文件 @ 281e9a06
## 列表上拉加载更多内容
### 场景说明
列表上拉加载更多内容是一种常见的数据更新场景，常见于各类阅读类应用中，例如新闻阅读应用中，当用户浏览新闻列表到底部时，上拉将加载更多的新闻内容。本例将介绍列表上拉加载更多内容这个场景的具体实现方式。
### 效果呈现
本示例最终效果如下：
![list-pullup-loading](figures/list-pullup-loading.gif)
### 运行环境
本例基于以下环境开发，开发者也可以基于其他适配的版本进行开发：
- IDE：DevEco Studio 3.1 Release
- SDK：Ohos_sdk_public 3.2.12.2 (API Version 9 Release)
### 实现思路
1. 在页面布局上，通过在List列表末尾手工增加一个ListItem用于显示加载更多布局，通过visibility属性控制该ListItem的显示和隐藏，当上拉时显示，并根据加载中以及加载结果显示不同内容，加载完成后则隐藏。
2. 监听List列表的onTouch事件，并判断是否为上划、滑动距离是否达到设定的阈值等条件，在条件满足后，触发数据加载逻辑，重新渲染列表。
### 开发步骤
1. 利用ForEach循环渲染初始列表，在列表末尾增加一个ListItem用于显示加载更多布局，通过visibility属性控制显示和隐藏，并在List列表上拉过程中监听并处理onTouch事件。
末尾的ListItem可呈现的内容有：
* 正在加载中显示“正在加载”。
* 加载失败则显示"加载失败，点击重试"，引导用户进行点击，从而重新加载。
```ts
List({ space: 20, initialIndex: 0 }) {
ForEach(this.list, (item) => {
ListItem() {
...
}
}, item => item.toString())
ListItem() { // 加载更多布局
Flex({ justifyContent: FlexAlign.Center, alignItems: ItemAlign.Center }) {
if (this.isShowRetry) {
Text('加载失败，点击重试')
...
} else {
...
LoadingProgress()
Text('正在加载...')
}
}
}.visibility(this.isLoadMore ? Visibility.Visible : Visibility.None)
}
.onTouch(event => this.handleTouchEvent(event))
```
2. 实现列表上拉加载更多内容的核心，是设计处理onTouch事件的响应函数handleTouchEvent，在该函数中需要根据手指滑动的类型TouchType进行不同的处理：
a. 手指按下时（TouchType.Down），记录按下的坐标，用于后续滑动方向及滑动距离计算：
```ts
case TouchType.Down: // 手指按下
this.downY = event.touches[0].y; // 记录按下的y坐标
this.lastMoveY = event.touches[0].y;
break;
```
b. 手指滑动时（TouchType.Move），首先判断是否为上拉动作，如果为上拉动作，再判断是否达到上拉加载更多内容的条件。条件包括：
* 是否有更多数据正在处于加载中状态，避免同时加载更多数据，只有当前未处于数据加载状态时才可以加载更多数据，否则直接忽略本次上拉动作。
* 是否当前列表已滑动到最后一项，只有在最后一项时才可以加载更多数据。
* 上拉滑动的偏移量是否达到设定的阈值，只有达到阈值才可以加载更多数据。
```ts
case TouchType.Move: // 手指滑动
if (this.isLoading) { // 更多数据加载中，不进入处理逻辑
return;
}
if (event.touches[0].y - this.lastMoveY < 0) { // 手指上滑
// 因为加载更多是在列表后面新增一个item，当一屏能够展示全部列表，endIndex 为 length+1
if (this.endIndex == this.list.length - 1 || this.endIndex == this.list.length) {
this.offsetY = event.touches[0].y - this.downY; // 滑动的偏移量
if (Math.abs(this.offsetY) > this.loadMoreHeight) { // 数据加载的阈值
this.isLoadMore = true // 可以刷新了
this.offsetY = this.loadMoreHeight + this.offsetY * 0.1 // 偏移量缓慢增加
}
}
}
this.lastMoveY = event.touches[0].y;
break;
```
c. 手指抬起或滑动取消时（TouchType.UP或TouchType.Cancel），如果正处于数据加载中状态，则忽略，否则加载更多数据。
```ts
case TouchType.Up:// 手指抬起
case TouchType.Cancel:// 事件取消
if (this.isLoading) { // 更多数据加载中，不进入处理逻辑
return;
}
this.touchUpLoadMore()
break
```
3. 实现加载更多数据的逻辑，即在上述步骤的touchUpLoadMore方法中实现以下处理逻辑：
a. 通过动画处理列表回弹效果。
```ts
animateTo({
duration: 300, // 动画时长
}, () => {
this.offsetY = 0 // 偏移量设置为0
})
```
b. 模拟请求加载更多数据的结果，包括：
- 正在加载：显示加载中效果。
- 加载成功：重新渲染List，更新加载状态。
- 加载失败：展示重新加载的引导说明，点击后重新触发touchUpLoadMore方法。
```ts
if (this.isLoadMore) {
this.isLoading = true // 加载中...
setTimeout(() => { // 模拟耗时操作
this.getData()
.then(data => {
if (data === StatusType.SUCCESS) { // 加载成功
this.isShowRetry = false
this.loadMoreData() // 加载数据
this.isLoadMore = false // 关闭加载更多
this.isLoading = false
}
})
.catch(error => { // 加载失败
this.isShowRetry = true // 展示“点击重试”
console.info('error message ' + error)
})
}, 2000)
} else { // 关闭加载更多
this.isLoadMore = false
this.isLoading = false
}
```
### 完整代码
通过上述步骤可以完成整个示例的开发，完整代码如下：
```ts
@Entry
@Component
struct ListPullupLoading {
@State list: number[] = [0, 1, 2, 3, 4, 5, 6, 7, 8, 9]
@State offsetY: number = 0 // 列表y坐标偏移量
private downY: number = 0 // 按下的y坐标
private lastMoveY: number = 0 // 上一次移动的坐标
private endIndex: number = 0 // 当前列表尾部索引
private loadMoreHeight = 100 // 触发上拉加载的阈值高度
@State isLoadMore: boolean = false // 是否可以加载更多，上拉加载的布局是否显示
private isLoading: boolean = false // 是否加载中，加载中不进入触摸逻辑
@State isShowRetry: boolean = false // 点击重试 是否显示
build() {
Column() {
List({ space: 20, initialIndex: 0 }) {
ForEach(this.list, (item) => {
ListItem() {
Text('' + item).width('100%').height('100%')
.fontSize(24)
.textAlign(TextAlign.Center)
.borderRadius(10)
.backgroundColor(0xDCDCDC)
}.width('100%').height(100)
}, item => item.toString())
ListItem() { // 加载更多布局
Flex({ justifyContent: FlexAlign.Center, alignItems: ItemAlign.Center }) {
if (this.isShowRetry) {
Text('加载失败，点击重试')
.margin({ left: 7, bottom: 1 })
.fontColor(Color.Grey)
.fontSize(24)
.onClick(() => {
this.isShowRetry = false
this.touchUpLoadMore()
})
} else {
LoadingProgress()
.width(36).height(36)
Text('正在加载...')
.margin({ left: 7, bottom: 1 })
.fontColor(Color.Grey)
.fontSize(24)
}
}.width('100%').height('100%')
.backgroundColor(0xFFFFFF)
}
.height(this.loadMoreHeight)
.visibility(this.isLoadMore ? Visibility.Visible : Visibility.None)
}
.width('100%')
.height('100%')
.listDirection(Axis.Vertical) // 排列方向
.onScrollIndex((start: number, end: number) => {
console.info('start = ' + start.toString() + ' end = ' + end.toString())
this.endIndex = end
})
.onTouch(event => this.handleTouchEvent(event))
}
.width('100%')
.height('100%')
.backgroundColor(0xFFFFFF)
}
/**
* 处理onTouch事件
*/
handleTouchEvent(event: TouchEvent) {
switch (event.type) {
case TouchType.Down: // 手指按下
this.downY = event.touches[0].y; // 记录按下的y坐标
this.lastMoveY = event.touches[0].y;
break;
case TouchType.Move: // 手指滑动
if (this.isLoading) { // 更多数据加载中，不进入处理逻辑
return;
}
if (event.touches[0].y - this.lastMoveY < 0) { // 手指上滑
// 因为加载更多是在列表后面新增一个item，当一屏能够展示全部列表，endIndex 为 length+1
if (this.endIndex == this.list.length - 1 || this.endIndex == this.list.length) {
this.offsetY = event.touches[0].y - this.downY; // 滑动的偏移量
if (Math.abs(this.offsetY) > this.loadMoreHeight) { // 数据加载的阈值
this.isLoadMore = true // 可以刷新了
this.offsetY = this.loadMoreHeight + this.offsetY * 0.1 // 偏移量缓慢增加
}
}
}
this.lastMoveY = event.touches[0].y;
break;
case TouchType.Up:// 手指抬起
case TouchType.Cancel:// 事件取消
if (this.isLoading) { // 更多数据加载中，不进入处理逻辑
return;
}
this.touchUpLoadMore()
break
}
}
/**
* 手指抬起，处理加载更多
*/
private touchUpLoadMore() {
animateTo({
duration: 300, // 动画时长
}, () => {
this.offsetY = 0 // 偏移量设置为0
})
if (this.isLoadMore) {
this.isLoading = true // 加载中...
setTimeout(() => { // 模拟耗时操作
this.getData()
.then(data => {
if (data === StatusType.SUCCESS) { // 加载成功
this.isShowRetry = false
this.loadMoreData() // 加载数据
this.isLoadMore = false // 关闭加载更多
this.isLoading = false
}
})
.catch(error => { // 加载失败
this.isShowRetry = true // 展示“点击重试”
console.info('error message ' + error)
})
}, 2000)
} else { // 关闭加载更多
this.isLoadMore = false
this.isLoading = false
}
}
/**
* mock 产生更多数据
*/
private loadMoreData() {
let initValue = this.list[this.list.length - 1] + 1;
for (let i = initValue; i < initValue + 10; i++) {
this.list.push(i)
}
}
/**
* 模拟数据加载结果
*/
private getData(): Promise<StatusType> {
return new Promise((resolve, reject) => {
const randomNumber: number = Math.random();
if (randomNumber >= 0.5) {
resolve(StatusType.SUCCESS)
} else {
reject(StatusType.FAIL)
}
})
}
}
enum StatusType {
SUCCESS,
FAIL
}
```
\ No newline at end of file
zh-cn/third-party-cases/listitem-slide-to-display-menu.md
浏览文件 @ 281e9a06
...@@ -13,7 +13,7 @@ ...@@ -13,7 +13,7 @@
## 运行环境 ## 运行环境
- IDE：DevEco Studio 3.1 Beta2 - IDE：DevEco Studio 3.1 Beta2
- SDK：Ohos_sdk_public 3.2.11.5 (API Version 9 Release) - SDK：Ohos_sdk_public 3.2.11.9 (API Version 9 Release)
## 实现原理 ## 实现原理
......
zh-cn/third-party-cases/multi-device-app-dev.md
浏览文件 @ 281e9a06
...@@ -9,9 +9,11 @@ ...@@ -9,9 +9,11 @@
## 效果呈现 ## 效果呈现
效果图如下所示（模拟器设备：phone、Foldable）： 效果图如下所示（模拟器设备：phone、Foldable）：
phone设备效果图： phone设备效果图：
![navigation_phone](figures/navigation_phone.PNG) ![navigation_phone](figures/navigation_phone.PNG)
Foldable设备效果图： Foldable设备效果图：
![navigation_Foldable](figures/navigation_Foldable.PNG) ![navigation_Foldable](figures/navigation_Foldable.PNG)
...@@ -328,13 +330,13 @@ struct NavigationExample { ...@@ -328,13 +330,13 @@ struct NavigationExample {
} }
``` ```
## 参考 ## 参考
[List组件](../application-dev/reference/arkui-js/js-components-container-list.md/) [List组件](../application-dev/reference/arkui-js/js-components-container-list.md)
[Flex组件](../application-dev/reference/arkui-ts/ts-container-flex.md/) [Flex组件](../application-dev/reference/arkui-ts/ts-container-flex.md)
[Navigation](../application-dev/reference/arkui-ts/ts-basic-components-navigation.md/) [Navigation](../application-dev/reference/arkui-ts/ts-basic-components-navigation.md)
[NavRouter](../application-dev/reference/arkui-ts/ts-basic-components-navrouter.md/) [NavRouter](../application-dev/reference/arkui-ts/ts-basic-components-navrouter.md)
[NavDestination](../application-dev/reference/arkui-ts/ts-basic-components-navdestination.md/) [NavDestination](../application-dev/reference/arkui-ts/ts-basic-components-navdestination.md)
Markdown is supported
0% 或 .
You are about to add 0 people to the discussion. Proceed with caution.
先完成此消息的编辑！
想要评论请 注册 或