diff --git a/zh-cn/application-dev/reference/apis/js-apis-arkui-drawableDescriptor.md b/zh-cn/application-dev/reference/apis/js-apis-arkui-drawableDescriptor.md index 18c71554d9f31d46a0784378aa8882310b5c0e12..6a7b166b54a72d5a003dbf05a0823de21665bd73 100644 --- a/zh-cn/application-dev/reference/apis/js-apis-arkui-drawableDescriptor.md +++ b/zh-cn/application-dev/reference/apis/js-apis-arkui-drawableDescriptor.md @@ -68,7 +68,8 @@ getPixelMap(): image.PixelMap; **示例：** ```ts -pixmap: PixelMap = drawable1.getPixelMap(); +pixmap: PixelMap = ( (this.resManager.getDrawableDescriptor($r('app.media.icon') + .id))).getPixelMap(); ``` ## LayeredDrawableDescriptor.getPixelMap @@ -86,7 +87,8 @@ getPixelMap(): image.PixelMap; **示例：** ```ts -pixmap: PixelMap = layeredDrawable1.getPixelMap(); +pixmap: PixelMap = (( (this.resManager.getDrawableDescriptor($r('app.media.icon') + .id))).getForeground()).getPixelMap(); ``` ## LayeredDrawableDescriptor.getForeground @@ -104,7 +106,8 @@ getForeground(): DrawableDescriptor; **示例：** ```ts -drawable: DrawableDescriptor = layeredDrawable1.getForeground(); +drawable: DrawableDescriptor = ( (this.resManager.getDrawableDescriptor($r('app.media.icon') + .id))).getForeground(); ``` ## LayeredDrawableDescriptor.getBackground @@ -122,7 +125,8 @@ getBackground(): DrawableDescriptor; **示例：** ```ts -drawable: DrawableDescriptor = layeredDrawable1.getBackground(); +drawable: DrawableDescriptor = ( (this.resManager.getDrawableDescriptor($r('app.media.icon') + .id))).getBackground(); ``` ## LayeredDrawableDescriptor.getMask @@ -140,5 +144,6 @@ getMask(): DrawableDescriptor; **示例：** ```ts -drawable: DrawableDescriptor = layeredDrawable1.getMask(); +drawable: DrawableDescriptor = ( (this.resManager.getDrawableDescriptor($r('app.media.icon') + .id))).getMask(); ``` diff --git a/zh-cn/application-dev/reference/apis/js-apis-curve.md b/zh-cn/application-dev/reference/apis/js-apis-curve.md index 333e0779f286e16a054af0dc42a760fe9eae7566..dea0941b2592982aa338e192be156562f1e0115b 100644 --- a/zh-cn/application-dev/reference/apis/js-apis-curve.md +++ b/zh-cn/application-dev/reference/apis/js-apis-curve.md @@ -16,7 +16,7 @@ import Curves from '@ohos.curves' ## Curves.initCurve9+ -initCurve(curve?: Curve)：ICurve +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) | 否 | 曲线类型。
默认值：Curve.Linear | **返回值：** @@ -45,7 +45,7 @@ Curves.initCurve(Curve.EaseIn) // 创建一个默认先慢后快插值曲线 ##  Curves.stepsCurve9+ -stepsCurve(count: number, end: boolean)：ICurve +stepsCurve(count: number, end: boolean): ICurve 构造阶梯曲线对象。 @@ -75,7 +75,7 @@ Curves.stepsCurve(9, true) //创建一个阶梯曲线 ## Curves.cubicBezierCurve9+ -cubicBezierCurve(x1: number, y1: number, x2: number, y2: number)：ICurve +cubicBezierCurve(x1: number, y1: number, x2: number, y2: number): ICurve 构造三阶贝塞尔曲线对象，曲线的值必须处于0-1之间。 @@ -108,7 +108,7 @@ Curves.cubicBezierCurve(0.1, 0.0, 0.1, 1.0) // 创建一个三阶贝塞尔曲线 ##  Curves.springCurve9+ -springCurve(velocity: number, mass: number, stiffness: number, damping: number)：ICurve +springCurve(velocity: number, mass: number, stiffness: number, damping: number): ICurve 构造弹簧曲线对象，曲线形状由弹簧参数决定，动画时长受animation、animateTo中的duration参数控制。 @@ -160,7 +160,7 @@ springMotion(response?: number, dampingFraction?: number, overlapDuration?: numb | 类型 | 说明 | | ---------------------------------- | ---------------- | -| [ICurve](#icurve)| 曲线对象。
**说明:** 弹性动画曲线为物理曲线，[animation](../arkui-ts/ts-animatorproperty.md)、[animateTo](../arkui-ts/ts-explicit-animation.md)中的duration参数不生效，动画持续时间取决于springMotion动画曲线参数和之前的速度。时间不能归一，故不能通过该曲线的[interpolate](#interpolate)函数获得插值。 | +| [ICurve](#icurve)| 曲线对象。
**说明:** 弹性动画曲线为物理曲线，[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 | 类型 | 说明 | | ---------------------------------- | ---------------- | -| [ICurve](#icurve)| 曲线对象。
**说明:**
1、弹性跟手动画曲线为springMotion的一种特例，仅默认值不同。如果使用自定义参数的弹性曲线，推荐使用springMotion构造曲线；如果使用跟手动画，推荐使用默认参数的弹性跟手动画曲线。
2、[animation](../arkui-ts/ts-animatorproperty.md)、[animateTo](../arkui-ts/ts-explicit-animation.md)中的duration参数不生效，动画持续时间取决于responsiveSpringMotion动画曲线参数和之前的速度，也不能通过该曲线的[interpolate](#interpolate)函数获得插值。 | +| [ICurve](#icurve)| 曲线对象。
**说明:**
1、弹性跟手动画曲线为springMotion的一种特例，仅默认值不同。如果使用自定义参数的弹性曲线，推荐使用springMotion构造曲线；如果使用跟手动画，推荐使用默认参数的弹性跟手动画曲线。
2、[animation](../arkui-ts/ts-animatorproperty.md)、[animateTo](../arkui-ts/ts-explicit-animation.md)中的duration参数不生效，动画持续时间取决于responsiveSpringMotion动画曲线参数和之前的速度，也不能通过该曲线的[interpolate](#interpolate9)函数获得插值。 | **示例：** @@ -205,7 +205,7 @@ Curves.responsiveSpringMotion() // 创建一个默认弹性跟手动画曲线 ##  Curves.interpolatingSpring10+ -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参数控制。 @@ -260,7 +260,7 @@ import Curves from '@ohos.curves' interpolate(fraction) { return Math.sqrt(fraction); } -Curves.customCurve(this.interpolate) // 创建一个用户自定义插值曲线 +private curve = Curves.customCurve(this.interpolate) // 创建一个用户自定义插值曲线 ``` @@ -268,7 +268,7 @@ Curves.customCurve(this.interpolate) // 创建一个用户自定义插值曲线 ## ICurve -### interpolate +### interpolate9+ interpolate(fraction: number): number @@ -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) | 否 | 曲线类型。
默认值：Curve.Linear | ## Curves.steps(deprecated) diff --git a/zh-cn/application-dev/reference/apis/js-apis-font.md b/zh-cn/application-dev/reference/apis/js-apis-font.md index da339cd568241defdaa9aa34f94b70c7115b7f3b..e440740da22684dee9feae5e9e6d8c2ab35fa9c4 100644 --- a/zh-cn/application-dev/reference/apis/js-apis-font.md +++ b/zh-cn/application-dev/reference/apis/js-apis-font.md @@ -5,6 +5,8 @@ > **说明** > > 本模块首批接口从API version 9开始支持。后续版本的新增接口，采用上角标单独标记接口的起始版本。 +> +> 本模块接口为系统接口。 ## 导入模块 diff --git a/zh-cn/application-dev/reference/apis/js-apis-matrix4.md b/zh-cn/application-dev/reference/apis/js-apis-matrix4.md index 8e5bd9f7f01cd257b104671976a23bdce21c2b83..02ab445ca3e88d0490ff33a0b85a7521814f340a 100644 --- a/zh-cn/application-dev/reference/apis/js-apis-matrix4.md +++ b/zh-cn/application-dev/reference/apis/js-apis-matrix4.md @@ -16,7 +16,7 @@ import matrix4 from '@ohos.matrix4' ## matrix4.init -init(array: Array<number>): Matrix4Transit +init(option: [number,number,number,number,number,number,number,number,number,number,number,number,number,number,number,number]): Matrix4Transit Matrix的构造函数，可以通过传入的参数创建一个四阶矩阵，矩阵为列优先。 @@ -25,17 +25,17 @@ Matrix的构造函数，可以通过传入的参数创建一个四阶矩阵， **参数：** -| 参数名 | 类型 | 必填 | 说明 | -| ------ | ------------------- | ---- | ------------------------------------------------------------ | -| array | Array<number> | 是 | 参数为长度为16（4\*4）的number数组, 详情见参数描述。
默认值：
[1, 0, 0, 0,
0, 1, 0, 0,
0, 0, 1, 0,
0, 0, 0, 1] | +| 参数名 | 类型 | 必填 | 说明 | +| ------ | ------------------------------------------------------------ | ---- | ------------------------------------------------------------ | +| option | [number,number,number,number,number,number,number,number,number,number,number,number,number,number,number,number] | 是 | 参数为长度为16（4\*4）的number数组, 详情见四阶矩阵说明。
默认值：
[1, 0, 0, 0,
0, 1, 0, 0,
0, 0, 1, 0,
0, 0, 0, 1] | **返回值：** -| 类型 | 说明 | -| -------------- | ---------------------------- | -| Matrix4Transit | 根据入参创建的四阶矩阵对象。 | +| 类型 | 说明 | +| --------------------------------- | ---------------------------- | +| [Matrix4Transit](#matrix4transit) | 根据入参创建的四阶矩阵对象。 | -**array参数说明：** +**四阶矩阵说明：** | 参数名 | 类型 | 必填 | 说明 | | ---- | ------ | ---- | -------------------- | @@ -91,9 +91,9 @@ Matrix的初始化函数，可以返回一个单位矩阵对象。 **返回值：** -| 类型 | 说明 | -| -------------- | -------------- | -| Matrix4Transit | 单位矩阵对象。 | +| 类型 | 说明 | +| --------------------------------- | -------------- | +| [Matrix4Transit](#matrix4transit) | 单位矩阵对象。 | **示例：** @@ -136,9 +136,9 @@ Matrix的拷贝函数，可以拷贝一份当前的矩阵对象。 **返回值：** -| 类型 | 说明 | -| -------------- | -------------------- | -| Matrix4Transit | 当前矩阵的拷贝对象。 | +| 类型 | 说明 | +| --------------------------------- | -------------------- | +| [Matrix4Transit](#matrix4transit) | 当前矩阵的拷贝对象。 | **示例：** @@ -171,12 +171,12 @@ struct Test { ![zh-cn_image_0000001219744181](figures/zh-cn_image_0000001219744181.png) -## Matrix4 +## Matrix4Transit ### combine -combine(matrix: Matrix4): Matrix4Transit +combine(option: Matrix4Transit): Matrix4Transit Matrix的叠加函数，可以将两个矩阵的效果叠加起来生成一个新的矩阵对象。 @@ -185,15 +185,15 @@ Matrix的叠加函数，可以将两个矩阵的效果叠加起来生成一个 **参数：** -| 参数名 | 类型 | 必填 | 说明 | -| ------ | ------- | ---- | ------------------ | -| matrix | Matrix4 | 是 | 待叠加的矩阵对象。 | +| 参数名 | 类型 | 必填 | 说明 | +| ------ | --------------------------------- | ---- | ------------------ | +| option | [Matrix4Transit](#matrix4transit) | 是 | 待叠加的矩阵对象。 | **返回值：** -| 类型 | 说明 | -| -------------- | ------------------ | -| Matrix4Transit | 矩阵叠加后的对象。 | +| 类型 | 说明 | +| --------------------------------- | ------------------ | +| [Matrix4Transit](#matrix4transit) | 矩阵叠加后的对象。 | **示例：** @@ -238,9 +238,9 @@ Matrix的逆函数，可以返回一个当前矩阵对象的逆矩阵，即效 **返回值：** -| 类型 | 说明 | -| -------------- | ---------------------- | -| Matrix4Transit | 当前矩阵的逆矩阵对象。 | +| 类型 | 说明 | +| --------------------------------- | ---------------------- | +| [Matrix4Transit](#matrix4transit) | 当前矩阵的逆矩阵对象。 | **示例：** @@ -273,25 +273,23 @@ struct Tests { ### 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 **参数：** -| 参数名 | 类型 | 必填 | 说明 | -| ------ | ------ | ---- | ----------------------------------------------------------- | -| x | number | 否 | x轴的平移距离，单位px。
默认值：0
取值范围 (-∞, +∞) | -| y | number | 否 | y轴的平移距离，单位px。
默认值：0
取值范围 (-∞, +∞) | -| z | number | 否 | z轴的平移距离，单位px。
默认值：0
取值范围 (-∞, +∞) | +| 参数名 | 类型 | 必填 | 说明 | +| ------ | ----------------------------------- | ---- | -------------- | +| option | [TranslateOption](#translateoption) | 是 | 设置平移参数。 | **返回值：** -| 类型 | 说明 | -| -------------- | ---------------------------- | -| Matrix4Transit | 增加好平移效果后的矩阵对象。 | +| 类型 | 说明 | +| --------------------------------- | ---------------------------- | +| [Matrix4Transit](#matrix4transit) | 增加好平移效果后的矩阵对象。 | **示例：** @@ -319,28 +317,30 @@ struct Test { ### 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 **参数：** -| 参数名 | 类型 | 必填 | 说明 | -| ------- | ------ | ---- | ------------------------------------------------------------ | -| x | number | 否 | x轴的缩放倍数。x>1时以x轴方向放大，x<1时以x轴方向缩小。
默认值：1
取值范围 [0, +∞)
**说明：**
设置小于0的值时，按照默认值处理。 | -| y | number | 否 | y轴的缩放倍数。y>1时以y轴方向放大，y<1时以y轴方向缩小。
默认值：1
取值范围 [0, +∞)
**说明：**
设置小于0的值时，按照默认值处理。 | -| z | number | 否 | z轴的缩放倍数。z>1时以z轴方向放大，z<1时以z轴方向缩小。
默认值：1
取值范围 [0, +∞)
**说明：**
设置小于0的值时，按照默认值处理。 | -| centerX | number | 否 | 变换中心点x轴坐标。
默认值：0。
取值范围 (-∞, +∞) | -| centerY | number | 否 | 变换中心点y轴坐标。
默认值：0。
取值范围 (-∞, +∞) | +| 参数名 | 类型 | 必填 | 说明 | +| ------ | --------------------------- | ---- | -------------- | +| option | [ScaleOption](#scaleoption) | 是 | 设置缩放参数。 | **返回值：** -| 类型 | 说明 | -| -------------- | ---------------------------- | -| Matrix4Transit | 增加好缩放效果后的矩阵对象。 | +| 类型 | 说明 | +| --------------------------------- | ---------------------------- | +| [Matrix4Transit](#matrix4transit) | 增加好平移效果后的矩阵对象。 | + +**返回值：** + +| 类型 | 说明 | +| --------------------------------- | ---------------------------- | +| [Matrix4Transit](#matrix4transit) | 增加好缩放效果后的矩阵对象。 | **示例：** @@ -367,29 +367,30 @@ struct Test { ### 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 **参数：** -| 参数名 | 类型 | 必填 | 说明 | -| ------- | ------ | ---- | ------------------------------------------------------- | -| x | number | 否 | 旋转轴向量x坐标。
默认值：1。
取值范围 (-∞, +∞) | -| y | number | 否 | 旋转轴向量y坐标。
默认值：1。
取值范围 (-∞, +∞) | -| z | number | 否 | 旋转轴向量z坐标。
默认值：1。
取值范围 (-∞, +∞) | -| angle | number | 否 | 旋转角度。
默认值：0 | -| centerX | number | 否 | 变换中心点x轴坐标。
默认值：0 | -| centerY | number | 否 | 变换中心点y轴坐标。
默认值：0 | +| 参数名 | 类型 | 必填 | 说明 | +| ------ | ----------------------------- | ---- | -------------- | +| option | [RotateOption](#rotateoption) | 是 | 设置旋转参数。 | + +**返回值：** + +| 类型 | 说明 | +| --------------------------------- | ---------------------------- | +| [Matrix4Transit](#matrix4transit) | 增加好平移效果后的矩阵对象。 | **返回值：** -| 类型 | 说明 | -| -------------- | ---------------------------- | -| Matrix4Transit | 增加好旋转效果后的矩阵对象。 | +| 类型 | 说明 | +| --------------------------------- | ---------------------------- | +| [Matrix4Transit](#matrix4transit) | 增加好旋转效果后的矩阵对象。 | **示例：** @@ -417,7 +418,7 @@ struct Test { ### transformPoint -transformPoint(point: Point): Point +transformPoint(option: [number, number]): [number, number] Matrix的坐标点转换函数，可以将当前的变换效果作用到一个坐标点上。 @@ -426,15 +427,15 @@ Matrix的坐标点转换函数，可以将当前的变换效果作用到一个 **参数：** -| 参数名 | 类型 | 必填 | 说明 | -| ------ | ----- | ---- | ------------------ | -| point | Point | 是 | 需要转换的坐标点。 | +| 参数名 | 类型 | 必填 | 说明 | +| ------ | ---------------- | ---- | ------------------ | +| option | [number, number] | 是 | 需要转换的坐标点。 | **返回值：** -| 类型 | 说明 | -| ----- | ---------------- | -| Point | 返回矩阵变换后的Point对象。 | +| 类型 | 说明 | +| ---------------- | --------------------------- | +| [number, number] | 返回矩阵变换后的Point对象。 | **示例：** @@ -471,4 +472,33 @@ struct Test { } ``` -![zh-cn_image_0000001219864133](figures/zh-cn_image_0000001219864133.PNG) \ No newline at end of file +![zh-cn_image_0000001219864133](figures/zh-cn_image_0000001219864133.PNG) + +## TranslateOption + +| 参数名 | 类型 | 必填 | 说明 | +| ------ | ------ | ---- | ----------------------------------------------------------- | +| x | number | 否 | x轴的平移距离，单位px。
默认值：0
取值范围 (-∞, +∞) | +| y | number | 否 | y轴的平移距离，单位px。
默认值：0
取值范围 (-∞, +∞) | +| z | number | 否 | z轴的平移距离，单位px。
默认值：0
取值范围 (-∞, +∞) | + +## ScaleOption + +| 参数名 | 类型 | 必填 | 说明 | +| ------- | ------ | ---- | ------------------------------------------------------------ | +| x | number | 否 | x轴的缩放倍数。x>1时以x轴方向放大，x<1时以x轴方向缩小。
默认值：1
取值范围 [0, +∞)
**说明：**
设置小于0的值时，按照默认值处理。 | +| y | number | 否 | y轴的缩放倍数。y>1时以y轴方向放大，y<1时以y轴方向缩小。
默认值：1
取值范围 [0, +∞)
**说明：**
设置小于0的值时，按照默认值处理。 | +| z | number | 否 | z轴的缩放倍数。z>1时以z轴方向放大，z<1时以z轴方向缩小。
默认值：1
取值范围 [0, +∞)
**说明：**
设置小于0的值时，按照默认值处理。 | +| centerX | number | 否 | 变换中心点x轴坐标。
默认值：0。
取值范围 (-∞, +∞) | +| centerY | number | 否 | 变换中心点y轴坐标。
默认值：0。
取值范围 (-∞, +∞) | + +## RotateOption + +| 参数名 | 类型 | 必填 | 说明 | +| ------- | ------ | ---- | ------------------------------------------------------- | +| x | number | 否 | 旋转轴向量x坐标。
默认值：1。
取值范围 (-∞, +∞) | +| y | number | 否 | 旋转轴向量y坐标。
默认值：1。
取值范围 (-∞, +∞) | +| z | number | 否 | 旋转轴向量z坐标。
默认值：1。
取值范围 (-∞, +∞) | +| angle | number | 否 | 旋转角度。
默认值：0 | +| centerX | number | 否 | 变换中心点x轴坐标。
默认值：0 | +| centerY | number | 否 | 变换中心点y轴坐标。
默认值：0 | \ No newline at end of file diff --git a/zh-cn/application-dev/reference/apis/js-apis-measure.md b/zh-cn/application-dev/reference/apis/js-apis-measure.md index 8ee4103422c0f18e1d97837c8d842e16aacb4ef7..3890fa6fc94ad9957f2ecab6a000d083878dbf87 100644 --- a/zh-cn/application-dev/reference/apis/js-apis-measure.md +++ b/zh-cn/application-dev/reference/apis/js-apis-measure.md @@ -112,7 +112,7 @@ struct Index { | 名称 | 类型 | 必填 | 说明 | | -------------- | -------------------------------------------------------------------------------------------------- | ---- | ----------------------------------------------- | -| textContent10+ | string | 是 | 设置被计算文本内容。 | +| textContent | string | 是 | 设置被计算文本内容。 | | constraintWidth10+ | number \| string \| [Resource](../arkui-ts/ts-types.md#resource) | 否 | 设置被计算文本布局宽度。
**说明：** 默认单位为vp | | fontSize | number \| string \| [Resource](../arkui-ts/ts-types.md#resource) | 否 | 设置被计算文本字体大小，fontSize为number类型时，使用fp单位。
默认值：16fp。
**说明：** 不支持设置百分比字符串。 | | fontStyle | number \| [FontStyle](../arkui-ts/ts-appendix-enums.md#fontstyle) | 否 | 设置被计算文本字体样式。
默认值：FontStyle.Normal | diff --git a/zh-cn/application-dev/reference/apis/js-apis-plugincomponent.md b/zh-cn/application-dev/reference/apis/js-apis-plugincomponent.md index 995ce9d9331bb7093f757544aa9d251f5cbe39eb..76ec3862c61789a3e8f9d4b94b959edb819fd891 100644 --- a/zh-cn/application-dev/reference/apis/js-apis-plugincomponent.md +++ b/zh-cn/application-dev/reference/apis/js-apis-plugincomponent.md @@ -376,10 +376,24 @@ on(eventType: string, callback: OnPushEventCallback | OnRequestEventCallback ): | eventType | string | 是 | 监听的事件类型， 可选值为："push" 、"request"。
"push”：指组件提供者向使用者主动推送数据。
"request”：指组件使用者向提供者主动请求数据。 | | callback | [OnPushEventCallback](#onpusheventcallback) \| [OnRequestEventCallback](#onrequesteventcallback) | 是 | 对应监听回调，push事件对应回调类型为[OnPushEventCallback](#onpusheventcallback)，request事件对应回调类型为[OnRequestEventCallback](#onrequesteventcallback) 。 | - **示例：** ```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("request", onRequestListener) ``` diff --git a/zh-cn/application-dev/reference/apis/js-apis-system-router.md b/zh-cn/application-dev/reference/apis/js-apis-system-router.md index 714c581479945a81a8a83dd82b48dd85de5c6264..aec9f32902b562fe29d99336e79e507c505349e9 100644 --- a/zh-cn/application-dev/reference/apis/js-apis-system-router.md +++ b/zh-cn/application-dev/reference/apis/js-apis-system-router.md @@ -341,8 +341,8 @@ export default { | 名称 | 类型 | 必填 | 说明 | | ------ | -------- | ---- | ------------------------------------------------------------ | -| uri7+ | string | 是 | 目标页面的uri，可以是以下的两种格式：
1. 页面的绝对路径，由config.json文件中的页面列表提供。例如：
- pages/index/index
-pages/detail/detail
2. 特定路径。如果URI为斜杠（/），则显示主页。 | -| params7+ | object | 否 | 表示路由跳转时要同时传递到目标页面的数据。跳转到目标页面后，使用router.getParams()获取传递的参数，此外，在类web范式中，参数也可以在页面中直接使用，如this.keyValue(keyValue为跳转时params参数中的key值)，如果目标页面中已有该字段，则其值会被传入的字段值覆盖。 | +| uri | string | 是 | 目标页面的uri，可以是以下的两种格式：
1. 页面的绝对路径，由config.json文件中的页面列表提供。例如：
- pages/index/index
-pages/detail/detail
2. 特定路径。如果URI为斜杠（/），则显示主页。 | +| params | object | 否 | 表示路由跳转时要同时传递到目标页面的数据。跳转到目标页面后，使用router.getParams()获取传递的参数，此外，在类web范式中，参数也可以在页面中直接使用，如this.keyValue(keyValue为跳转时params参数中的key值)，如果目标页面中已有该字段，则其值会被传入的字段值覆盖。 | ## BackRouterOptions diff --git a/zh-cn/application-dev/reference/arkui-ts/ts-container-badge.md b/zh-cn/application-dev/reference/arkui-ts/ts-container-badge.md index a294923d0d779c63aa36bff2de13f3cc12a70b63..d77941dd39bb85a2639ea0a48f9ee394cc0e60cf 100644 --- a/zh-cn/application-dev/reference/arkui-ts/ts-container-badge.md +++ b/zh-cn/application-dev/reference/arkui-ts/ts-container-badge.md @@ -30,7 +30,7 @@ | -------- | -------- | -------- | -------- | | count | number | 是 | 设置提醒消息数。
**说明：**
小于等于0时不显示信息标记。
取值范围：[-2147483648,2147483647]，非整数时会舍去小数部分取整数部分，如5.5取5。 | | position | [BadgePosition](#badgeposition枚举说明) | 否 | 设置提示点显示位置。
默认值：BadgePosition.RightTop | -| maxCount | number | 否 | 最大消息数，超过最大消息时仅显示maxCount+。
默认值：99 | +| maxCount | number | 否 | 最大消息数，超过最大消息时仅显示maxCount+。
默认值：99
取值范围：[-2147483648,2147483647]，非整数时会舍去小数部分取整数部分，如5.5取5。 | | style | [BadgeStyle](#badgestyle对象说明) | 是 | Badge组件可设置样式，支持设置文本颜色、尺寸、圆点颜色和尺寸。 | **方法2：** Badge(value: {value: string, position?: BadgePosition, style: BadgeStyle}) diff --git a/zh-cn/third-party-cases/Readme-CN.md b/zh-cn/third-party-cases/Readme-CN.md index 1181806547da063a22e85d52adaf479a1f3ebed7..c211dfe72e28ed7d44480a489fd78908cd6eaf95 100644 --- a/zh-cn/third-party-cases/Readme-CN.md +++ b/zh-cn/third-party-cases/Readme-CN.md @@ -25,6 +25,7 @@ - [如何使用OpenGL实现3D图形](how-to-use-opengl-to-draw-3d-graphics.md) - [常见弹窗的使用](diverse-dialogues.md) - [折叠展开动效](collapse-and-expand.md) +- [列表上拉加载更多内容](list-pullup-loading-data.md) ### 装饰器 - [控制页面刷新范围](overall-and-part-refresh.md) - [如何监听多层状态变化](observed-and-objectlink.md) @@ -35,6 +36,7 @@ ### 窗口管理 - [如何实现沉浸模式](immersion-mode.md) - [如何创建悬浮窗](float-window.md) +- [保持屏幕常亮](keep-screen-on.md) ### 媒体 - [常见图片编辑](image-edit.md) diff --git a/zh-cn/third-party-cases/collapse-and-expand.md b/zh-cn/third-party-cases/collapse-and-expand.md index d6439a99a03ec47d04387de6d5f12be9f1814e39..b9f448a222659edb5ec01341911eb32b1e3e40cc 100644 --- a/zh-cn/third-party-cases/collapse-and-expand.md +++ b/zh-cn/third-party-cases/collapse-and-expand.md @@ -182,7 +182,7 @@ interface IRowItem { @Entry @Component struct CollapseAndExpandDemo { - Provide("flag") flag: boolean = false + @Provide("flag") flag: boolean = false private onFlagChange = () => { animateTo({ duration: 650, @@ -247,7 +247,7 @@ struct CollapseAndExpandDemo { @Component struct RowItem { private props: IRowItem; - Consume("flag") flag: boolean + @Consume("flag") flag: boolean build() { Flex() { @@ -286,7 +286,7 @@ struct RowItem { @Component struct CollapseAndExpand { private items: IRowItem[] = []; - Consume("flag") flag: boolean; + @Consume("flag") flag: boolean; build() { Column() { @@ -301,9 +301,9 @@ struct CollapseAndExpand { } ``` ## 参考 -[显示动画](../application-dev/reference/arkui-ts/ts-explicit-animation.md/) -[@Provide和@Consume：与后代组件双向同步](../application-dev/quick-start/arkts-provide-and-consume.md/) -[list开发指导](../zh-cn/application-dev/ui/ui-js-components-list.md/) +[显示动画](../application-dev/reference/arkui-ts/ts-explicit-animation.md) +[@Provide和@Consume：与后代组件双向同步](../application-dev/quick-start/arkts-provide-and-consume.md) +[list开发指导](../application-dev/ui/ui-js-components-list.md) diff --git a/zh-cn/third-party-cases/figures/list-pullup-loading.gif b/zh-cn/third-party-cases/figures/list-pullup-loading.gif new file mode 100644 index 0000000000000000000000000000000000000000..c7b2e960751582fc8211b5be256c56289606e82b Binary files /dev/null and b/zh-cn/third-party-cases/figures/list-pullup-loading.gif differ diff --git a/zh-cn/third-party-cases/figures/screenon.gif b/zh-cn/third-party-cases/figures/screenon.gif new file mode 100644 index 0000000000000000000000000000000000000000..39b7a1c35fa2c6c485ab6dc567d5396c2e42a8c4 Binary files /dev/null and b/zh-cn/third-party-cases/figures/screenon.gif differ diff --git a/zh-cn/third-party-cases/griditem-drag-and-drop.md b/zh-cn/third-party-cases/griditem-drag-and-drop.md index 97a3b2636cb6ea34f56de02a67febaef19230dc3..178bc60af38f53c3b5fd30074e2c0d748317d723 100644 --- a/zh-cn/third-party-cases/griditem-drag-and-drop.md +++ b/zh-cn/third-party-cases/griditem-drag-and-drop.md @@ -13,7 +13,7 @@ ### 运行环境 - 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) ### 实现原理 diff --git a/zh-cn/third-party-cases/keep-screen-on.md b/zh-cn/third-party-cases/keep-screen-on.md new file mode 100644 index 0000000000000000000000000000000000000000..6a2564f52bec0a73d94cf961609083fc6c46eea6 --- /dev/null +++ b/zh-cn/third-party-cases/keep-screen-on.md @@ -0,0 +1,123 @@ +## 保持屏幕常亮 + +### 场景说明 + +在使用开发板进行应用开发调试时，不操作屏幕一段时间后，屏幕会熄屏变黑，再操作时需要再次点亮屏幕，耗费时间不利于调试。本例将介绍如何通过窗口管理相关接口实现屏幕常亮。 + +### 效果呈现 + +本示例最终效果如下（在开发板中可验证实际常亮效果）： + +![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 diff --git a/zh-cn/third-party-cases/list-pullup-loading-data.md b/zh-cn/third-party-cases/list-pullup-loading-data.md new file mode 100644 index 0000000000000000000000000000000000000000..023735e4dc043ce2d3ca1668177a95ccdf80b1ab --- /dev/null +++ b/zh-cn/third-party-cases/list-pullup-loading-data.md @@ -0,0 +1,330 @@ +## 列表上拉加载更多内容 + +### 场景说明 + +列表上拉加载更多内容是一种常见的数据更新场景，常见于各类阅读类应用中，例如新闻阅读应用中，当用户浏览新闻列表到底部时，上拉将加载更多的新闻内容。本例将介绍列表上拉加载更多内容这个场景的具体实现方式。 + +### 效果呈现 + +本示例最终效果如下： + +![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 { + 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 diff --git a/zh-cn/third-party-cases/listitem-slide-to-display-menu.md b/zh-cn/third-party-cases/listitem-slide-to-display-menu.md index d841f72df7d1a80c222e791e2169bae38926b54d..cd4d31b2b2d4b8304a8a6fc872d1759095c5a791 100644 --- a/zh-cn/third-party-cases/listitem-slide-to-display-menu.md +++ b/zh-cn/third-party-cases/listitem-slide-to-display-menu.md @@ -13,7 +13,7 @@ ## 运行环境 - 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) ## 实现原理 diff --git a/zh-cn/third-party-cases/multi-device-app-dev.md b/zh-cn/third-party-cases/multi-device-app-dev.md index 917f7948204dfa3d64d1d4bf15ad2b61bab48385..6ef7a122eba4dc78041ab3a3d3fac50bd1b80bc1 100644 --- a/zh-cn/third-party-cases/multi-device-app-dev.md +++ b/zh-cn/third-party-cases/multi-device-app-dev.md @@ -9,9 +9,11 @@ ## 效果呈现 效果图如下所示（模拟器设备：phone、Foldable）： + phone设备效果图： ![navigation_phone](figures/navigation_phone.PNG) + Foldable设备效果图： ![navigation_Foldable](figures/navigation_Foldable.PNG) @@ -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)