diff --git a/zh-cn/application-dev/reference/arkui-ts/figures/blankmin.png b/zh-cn/application-dev/reference/arkui-ts/figures/blankmin.png new file mode 100644 index 0000000000000000000000000000000000000000..d37582ff571d36ecc41539453192955b84481765 Binary files /dev/null and b/zh-cn/application-dev/reference/arkui-ts/figures/blankmin.png differ diff --git a/zh-cn/application-dev/reference/arkui-ts/figures/gauge.png b/zh-cn/application-dev/reference/arkui-ts/figures/gauge.png new file mode 100644 index 0000000000000000000000000000000000000000..05f2bfb06a3d95c2f05e77cfc174c2cb63c9faa0 Binary files /dev/null and b/zh-cn/application-dev/reference/arkui-ts/figures/gauge.png differ diff --git a/zh-cn/application-dev/reference/arkui-ts/figures/gridSpan.png b/zh-cn/application-dev/reference/arkui-ts/figures/gridSpan.png new file mode 100644 index 0000000000000000000000000000000000000000..b9ba83f4be0847550c190e74b58a024eebcbe0c1 Binary files /dev/null and b/zh-cn/application-dev/reference/arkui-ts/figures/gridSpan.png differ diff --git a/zh-cn/application-dev/reference/arkui-ts/figures/grodSpan.png b/zh-cn/application-dev/reference/arkui-ts/figures/grodSpan.png new file mode 100644 index 0000000000000000000000000000000000000000..8b48e7b432a77d0dcc7e8e7ec3c07c5c8762028d Binary files /dev/null and b/zh-cn/application-dev/reference/arkui-ts/figures/grodSpan.png differ diff --git a/zh-cn/application-dev/reference/arkui-ts/figures/imageeffect.jpg b/zh-cn/application-dev/reference/arkui-ts/figures/imageeffect.jpg new file mode 100644 index 0000000000000000000000000000000000000000..bb03911ec7dbd89381c3ab1d3d946c9687f1f981 Binary files /dev/null and b/zh-cn/application-dev/reference/arkui-ts/figures/imageeffect.jpg differ diff --git a/zh-cn/application-dev/reference/arkui-ts/figures/popup.gif b/zh-cn/application-dev/reference/arkui-ts/figures/popup.gif new file mode 100644 index 0000000000000000000000000000000000000000..f769e89f19bf896b259fe9910fcc6ec448571a98 Binary files /dev/null and b/zh-cn/application-dev/reference/arkui-ts/figures/popup.gif differ diff --git a/zh-cn/application-dev/reference/arkui-ts/figures/textblur.jpg b/zh-cn/application-dev/reference/arkui-ts/figures/textblur.jpg new file mode 100644 index 0000000000000000000000000000000000000000..12a286a7b1a0892945c2d4cfc7ab86905aae2703 Binary files /dev/null and b/zh-cn/application-dev/reference/arkui-ts/figures/textblur.jpg differ diff --git a/zh-cn/application-dev/reference/arkui-ts/figures/touchtarget.gif b/zh-cn/application-dev/reference/arkui-ts/figures/touchtarget.gif new file mode 100644 index 0000000000000000000000000000000000000000..550dfe998ac31230b52ff3972974cdd4a7431b28 Binary files /dev/null and b/zh-cn/application-dev/reference/arkui-ts/figures/touchtarget.gif differ diff --git a/zh-cn/application-dev/reference/arkui-ts/ts-basic-components-blank.md b/zh-cn/application-dev/reference/arkui-ts/ts-basic-components-blank.md index 2c499e4ddecb93bfbcc8d1afdcc3626754de7701..d0811dfe36d946c045becb81b67e886fe2bc6959 100644 --- a/zh-cn/application-dev/reference/arkui-ts/ts-basic-components-blank.md +++ b/zh-cn/application-dev/reference/arkui-ts/ts-basic-components-blank.md @@ -57,3 +57,34 @@ struct BlankExample { 横屏状态 ![zh-cn_image_0000001174104388](figures/zh-cn_image_0000001174104388.gif) + + +```ts +// xxx.ets +@Entry +@Component +struct BlankExample { + build() { + Column({ space: 20 }) { + // blank父组件不设置宽度时，Blank世纪 + Row() { + Text('Bluetooth').fontSize(18) + Blank().color(Color.Yellow) + Toggle({ type: ToggleType.Switch }) + }.backgroundColor(0xFFFFFF).borderRadius(15).padding({ left: 12 }) + + Row() { + Text('Bluetooth').fontSize(18) + // 设置最小宽度为160 + Blank('160').color(Color.Yellow) + Toggle({ type: ToggleType.Switch }) + }.backgroundColor(0xFFFFFF).borderRadius(15).padding({ left: 12 }) + + }.backgroundColor(0xEFEFEF).padding(20).width('100%') + } +} +``` +Blank父组件未设置宽度时，子组件间无空白填充，使用min参数设置填充尺寸 + +![blankmin](figures/blankmin.png) + diff --git a/zh-cn/application-dev/reference/arkui-ts/ts-basic-components-checkboxgroup.md b/zh-cn/application-dev/reference/arkui-ts/ts-basic-components-checkboxgroup.md index 0bf526f273ca4fe094efdf011cce8e5dd55c2956..17fb28bc968f6860669727307ba8f132d60d77a0 100644 --- a/zh-cn/application-dev/reference/arkui-ts/ts-basic-components-checkboxgroup.md +++ b/zh-cn/application-dev/reference/arkui-ts/ts-basic-components-checkboxgroup.md @@ -14,7 +14,7 @@ CheckboxGroup(options?: { group?: string }) -创建多选框群组，可以控制群组内的Checkbox全选或者不全选，相同group的Checkbox和CheckboxGroup为同一群组。 +创建多选框群组，可以控制群组内的Checkbox全选或者不全选，group值相同的Checkbox和CheckboxGroup为同一群组。 **参数:** @@ -39,13 +39,13 @@ CheckboxGroup(options?: { group?: string }) | 名称 | 功能描述 | | -------- | -------- | -| onChange (callback: (event: CheckboxGroupResult) => void ) |CheckboxGroup的选中状态或群组内的Checkbox的选中状态发生变化时，触发回调。| +| onChange (callback: (event: [CheckboxGroupResult](#checkboxgroupresult对象说明)) => void ) |CheckboxGroup的选中状态或群组内的Checkbox的选中状态发生变化时，触发回调。| ## CheckboxGroupResult对象说明 | 名称 | 类型 | 描述 | | ------ | ------ | ------- | | name | Array<string> | 群组内所有被选中的多选框名称。 | -| status | SelectStatus | 选中状态。 | +| status | [SelectStatus](#selectstatus枚举说明) | 选中状态。 | ## SelectStatus枚举说明 diff --git a/zh-cn/application-dev/reference/arkui-ts/ts-basic-components-datapanel.md b/zh-cn/application-dev/reference/arkui-ts/ts-basic-components-datapanel.md index c099110818c1209fb6acfebd0bb50a43ea0d7f77..cc8d763c17ca1ba2368d6f3570b348272f2ef1f8 100644 --- a/zh-cn/application-dev/reference/arkui-ts/ts-basic-components-datapanel.md +++ b/zh-cn/application-dev/reference/arkui-ts/ts-basic-components-datapanel.md @@ -24,7 +24,7 @@ DataPanel(options:{values: number[], max?: number, type?: DataPanelType}) | ----------------- | -------- | ----- | -------- | | values | number[] | 是 | 数据值列表，最大支持9个数据。 | | max | number | 否 | - max大于0，表示数据的最大值。
- max小于等于0，max等于value数组各项的和，按比例显示。
默认值：100 | -| type8+ | DataPanelType | 否 | 数据面板的类型。
默认值：DataPanelType.Circle | +| type8+ | [DataPanelType](#datapaneltype枚举说明) | 否 | 数据面板的类型。
默认值：DataPanelType.Circle | ## DataPanelType枚举说明 diff --git a/zh-cn/application-dev/reference/arkui-ts/ts-basic-components-divider.md b/zh-cn/application-dev/reference/arkui-ts/ts-basic-components-divider.md index b7a01966d2beee4a104e0d10982e969a0d7c4ef4..cdf957e31d7c9494de9168b6c0b3655473f2574a 100644 --- a/zh-cn/application-dev/reference/arkui-ts/ts-basic-components-divider.md +++ b/zh-cn/application-dev/reference/arkui-ts/ts-basic-components-divider.md @@ -47,6 +47,7 @@ struct DividerExample { Divider() Row().width('100%').height(40).backgroundColor(0xF1F3F5) + // 纵向分割线 Text('Vertical divider').fontSize(9).fontColor(0xCCCCCC) Flex({ alignItems: ItemAlign.Center, wrap: FlexWrap.Wrap }) { Text('bravery') @@ -56,6 +57,7 @@ struct DividerExample { Text('upward') }.width(250) + // 设置分割线宽度和端点样式 Text('Custom Styles').fontSize(9).fontColor(0xCCCCCC) Row().width('100%').height(40).backgroundColor(0xF1F3F5) Divider().vertical(false).strokeWidth(5).color(0x2788D9).lineCap(LineCapStyle.Round) diff --git a/zh-cn/application-dev/reference/arkui-ts/ts-basic-components-gauge.md b/zh-cn/application-dev/reference/arkui-ts/ts-basic-components-gauge.md index 885fe031d58d2b9b5b19f895e1c3efbdd6ebd2c8..60e423da8229927a0ef017be19ca4ffcd90640ea 100644 --- a/zh-cn/application-dev/reference/arkui-ts/ts-basic-components-gauge.md +++ b/zh-cn/application-dev/reference/arkui-ts/ts-basic-components-gauge.md @@ -21,7 +21,7 @@ Gauge(options:{value: number, min?: number, max?: number}) | 参数名 | 参数类型 | 必填 | 参数描述 | | -------- | -------- | -------- | -------- | -| value | number | 是 | 当前数据值。 | +| value | number | 是 | 数据图表的值，图中指针指向位置。用于组件创建时数据图表值的预置。 | | min | number | 否 | 当前数据段最小值。
默认值：0 | | max | number | 否 | 当前数据段最大值。
默认值：100 | @@ -31,10 +31,10 @@ Gauge(options:{value: number, min?: number, max?: number}) | 名称 | 参数类型 | 描述 | | -------- | -------- | -------- | -| value | number | 设置当前数据图表的值。
默认值：0 | -| startAngle | number | 设置起始角度位置，时钟0点为0度，顺时针方向为正角度。
默认值：-150 | -| endAngle | number | 设置终止角度位置，时钟0点为0度，顺时针方向为正角度。
默认值：150 | -| colors | Array<ColorStop> | 设置图表的颜色，支持分段颜色设置。 | +| value | number | 设置当前数据图表的值，用于组件创建完成后数据图表值的设置。
默认值：0 | +| startAngle | number | 设置起始角度位置，时钟0点为0度，顺时针方向为正角度。
默认值：0 | +| endAngle | number | 设置终止角度位置，时钟0点为0度，顺时针方向为正角度。
默认值：360 | +| colors | Array<[ColorStop](#colorstop)> | 设置图表的颜色，支持分段颜色设置。 | | strokeWidth | Length | 设置环形图表的环形厚度。 | ## ColorStop @@ -55,15 +55,30 @@ Gauge(options:{value: number, min?: number, max?: number}) @Component struct GaugeExample { build() { - Column() { - Gauge({ value: 50, min: 0, max: 100 }) - .startAngle(210).endAngle(150) - .colors([[0x317AF7, 1], [0x5BA854, 1], [0xE08C3A, 1], [0x9C554B, 1], [0xD94838, 1]]) - .strokeWidth(20) + Column({ space: 20 }) { + // 使用默认的min和max为0-100，角度范围默认0-360，value值设置 + // 参数中设置当前值为75 + Gauge({ value: 75 }) + .width(200).height(200) + .colors([[0x317AF7, 1], [0x5BA854, 1], [0xE08C3A, 1], [0x9C554B, 1]]) + + // 参数设置当前值为75，属性设置值为25，属性设置优先级高 + Gauge({ value: 75 }) + .value(25) //属性和参数都设置时以参数为准 .width(200).height(200) + .colors([[0x317AF7, 1], [0x5BA854, 1], [0xE08C3A, 1], [0x9C554B, 1]]) + + // 210--150度环形图表 + Gauge({ value: 30, min: 0, max: 100 }) + .startAngle(210) + .endAngle(150) + .colors([[0x317AF7, 0.1], [0x5BA854, 0.2], [0xE08C3A, 0.3], [0x9C554B, 0.4]]) + .strokeWidth(20) + .width(200) + .height(200) }.width('100%').margin({ top: 5 }) } } ``` -![zh-cn_image_0000001174422916](figures/zh-cn_image_0000001174422916.png) +![gauge](figures/gauge.png) diff --git a/zh-cn/application-dev/reference/arkui-ts/ts-universal-attributes-grid.md b/zh-cn/application-dev/reference/arkui-ts/ts-universal-attributes-grid.md index 93b24639efdf7911b1e9d5d2dc7911cd81e76f97..ed2b954effeae5391f0ab1adfd171d4664df7e19 100644 --- a/zh-cn/application-dev/reference/arkui-ts/ts-universal-attributes-grid.md +++ b/zh-cn/application-dev/reference/arkui-ts/ts-universal-attributes-grid.md @@ -1,19 +1,20 @@ # 栅格设置 > **说明：** -> - 从API Version 7开始支持。后续版本如有新增内容，则采用上角标单独标记该内容的起始版本。 -> -> - 栅格布局的列宽、列间距由距离最近的GridContainer父组件决定。使用栅格属性的组件树上至少需要有1个GridContainer容器组件。 +> +> - 从API Version 7开始支持。后续版本如有新增内容，则采用上角标单独标记该内容的起始版本。 +> +> - 栅格布局的列宽、列间距由距离最近的GridContainer父组件决定。使用栅格属性的组件树上至少需要有1个GridContainer容器组件。 ## 属性 -| 名称 | 参数类型 | 描述 | -| ----------- | --------------------------| ----------------------------------------------- | +| 名称 | 参数类型 | 描述 | +| ----------- | ------------------------------------------------------------ | ------------------------------------------------------------ | | useSizeType | {
xs?: number \| { span: number, offset: number },
sm?: number \| { span: number, offset: number },
md?: number \| { span: number, offset: number },
lg?: number \| { span: number, offset: number }
} | 设置在特定设备宽度类型下的占用列数和偏移列数，span: 占用列数; offset: 偏移列数。
当值为number类型时，仅设置列数， 当格式如{"span": 1, "offset": 0}时，指同时设置占用列数与偏移列数。
- xs: 指设备宽度类型为SizeType.XS时的占用列数和偏移列数。
- sm: 指设备宽度类型为SizeType.SM时的占用列数和偏移列数。
- md: 指设备宽度类型为SizeType.MD时的占用列数和偏移列数。
- lg: 指设备宽度类型为SizeType.LG时的占用列数和偏移列数。 | -| gridSpan | number | 默认占用列数，指useSizeType属性没有设置对应尺寸的列数（span)时，占用的栅格列数。
**说明：**
设置了栅格span属性，组件的宽度由栅格布局决定。
默认值：1 | -| gridOffset | number | 默认偏移列数，指useSizeType属性没有设置对应尺寸的偏移(offset)时， 当前组件沿着父组件Start方向，偏移的列数，也就是当前组件位于第n列。
**说明：**
- 配置该属性后，当前组件在父组件水平方向的布局不再跟随父组件原有的布局方式，而是沿着父组件的Start方向偏移一定位移。
- 偏移位移 = （列宽 + 间距）\* 列数。
- 设置了偏移(gridOffset)的组件之后的兄弟组件会根据该组件进行相对布局，类似相对布局。
默认值：0 | +| gridSpan | number | 默认占用列数，指useSizeType属性没有设置对应尺寸的列数（span)时，占用的栅格列数。
**说明：**
设置了栅格span属性，组件的宽度由栅格布局决定。
默认值：1 | +| gridOffset | number | 默认偏移列数，指useSizeType属性没有设置对应尺寸的偏移(offset)时， 当前组件沿着父组件Start方向，偏移的列数，也就是当前组件位于第n列。
**说明：**
- 配置该属性后，当前组件在父组件水平方向的布局不再跟随父组件原有的布局方式，而是沿着父组件的Start方向偏移一定位移。
- 偏移位移 = （列宽 + 间距）\* 列数。
- 设置了偏移(gridOffset)的组件之后的兄弟组件会根据该组件进行相对布局，类似相对布局。
默认值：0 | ## 示例 @@ -23,42 +24,76 @@ @Entry @Component struct GridContainerExample1 { + build() { + Column() { + Text('useSizeType').fontSize(15).fontColor(0xCCCCCC).width('90%') + GridContainer() { + Row({}) { + Row() { + Text('Left').fontSize(25) + } + .useSizeType({ + xs: { span: 1, offset: 0 }, sm: { span: 1, offset: 0 }, + md: { span: 1, offset: 0 }, lg: { span: 2, offset: 0 } + }) + .height("100%") + .backgroundColor(0x66bbb2cb) - build(){ - GridContainer() { - Row({}) { - Row() { - Text('Left').fontSize(25) - } - .useSizeType({ - xs: { span: 1, offset: 0 }, sm: { span: 1, offset: 0 }, - md: { span: 1, offset: 0 }, lg: { span: 2, offset: 0 } - }) - .height("100%") - .backgroundColor(0x66bbb2cb) - Row() { - Text('Center').fontSize(25) + Row() { + Text('Center').fontSize(25) + } + .useSizeType({ + xs: { span: 1, offset: 0 }, sm: { span: 2, offset: 1 }, + md: { span: 5, offset: 1 }, lg: { span: 7, offset: 2 } + }) + .height("100%") + .backgroundColor(0x66b6c5d1) + + Row() { + Text('Right').fontSize(25) + } + .useSizeType({ + xs: { span: 1, offset: 0 }, sm: { span: 1, offset: 3 }, + md: { span: 2, offset: 6 }, lg: { span: 3, offset: 9 } + }) + .height("100%") + .backgroundColor(0x66bbb2cb) } - .useSizeType({ - xs: { span: 1, offset: 0 }, sm: { span: 2, offset: 1 }, - md: { span: 5, offset: 1 }, lg: { span: 7, offset: 2 } - }) - .height("100%") - .backgroundColor(0x66b6c5d1) + .height(200) + + } + .backgroundColor(0xf1f3f5) + .margin({ top: 10 }) + + // 单独设置组件的span和offset,在sm尺寸大小的设备上使用useSizeType中sm的数据实现一样的效果 + Text('gridSpan,gridOffset').fontSize(15).fontColor(0xCCCCCC).width('90%') + GridContainer() { Row() { - Text('Right').fontSize(25) - } - .useSizeType({ - xs: { span: 1, offset: 0 }, sm: { span: 1, offset: 3 }, - md: { span: 2, offset: 6 }, lg: { span: 3, offset: 9 } - }) - .height("100%") - .backgroundColor(0x66bbb2cb) + Row() { + Text('Left').fontSize(25) + } + .gridSpan(1) + .height("100%") + .backgroundColor(0x66bbb2cb) + + Row() { + Text('Center').fontSize(25) + } + .gridSpan(2) + .gridOffset(1) + .height("100%") + .backgroundColor(0x66b6c5d1) + + Row() { + Text('Right').fontSize(25) + } + .gridSpan(1) + .gridOffset(3) + .height("100%") + .backgroundColor(0x66bbb2cb) + }.height(200) } - .height(200) } - .backgroundColor(0xf1f3f5) - .margin({ top: 10 }) } } ``` @@ -74,3 +109,7 @@ struct GridContainerExample1 { **图3** 设备宽度为LG ![zh-cn_image_0000001219982727](figures/zh-cn_image_0000001219982727.png) + +**图4** 单独设置gridSpan和gridOffset在特定屏幕大小下的效果与useSizeType效果一致 + +![gridSppan](figures/grodSpan.png) \ No newline at end of file diff --git a/zh-cn/application-dev/reference/arkui-ts/ts-universal-attributes-image-effect.md b/zh-cn/application-dev/reference/arkui-ts/ts-universal-attributes-image-effect.md index a58be16636b4a4f0e005b43b5ce32ff6129c9a0b..2316f53b6cf76dec6825f2d5696133da23500c67 100644 --- a/zh-cn/application-dev/reference/arkui-ts/ts-universal-attributes-image-effect.md +++ b/zh-cn/application-dev/reference/arkui-ts/ts-universal-attributes-image-effect.md @@ -1,16 +1,11 @@ # 图像效果 -例如背景模糊、内容模糊和灰度效果等。 +设置图片背景模糊、内容模糊和灰度等效果。 > **说明：** > 从API Version 7开始支持。后续版本如有新增内容，则采用上角标单独标记该内容的起始版本。 -## 权限列表 - -无 - - ## 属性 @@ -18,15 +13,15 @@ | ----------------------------- | ------------------------------------------------------------ | ------ | ------------------------------------------------------------ | | blur | number | - | 为当前组件添加内容模糊效果，入参为模糊半径，模糊半径越大越模糊，为0时不模糊。 | | backdropBlur | number | - | 为当前组件添加背景模糊效果，入参为模糊半径，模糊半径越大越模糊，为0时不模糊。 | -| shadow | {
radius: number \| [Resource](ts-types.md#resource),
color?: Color \| string \| Resource,
offsetX?: number \| Resource,
offsetY?: number \| Resource
} | - | 为当前组件添加阴影效果，入参为模糊半径(必填)、阴影的颜色(可选，默认为灰色)、X轴的偏移量(可选，默认为0)，Y轴的偏移量(可选，默认为0)，偏移量单位为px。 | +| shadow | {
radius: number \| [Resource](ts-types.md#resource),
color?: [Color](ts-appendix-enums.md#color) \| string \| [Resource](ts-types.md#resource),
offsetX?: number \| [Resource](ts-types.md#resource),
offsetY?: number \| [Resource](ts-types.md#resource)
} | - | 为当前组件添加阴影效果，入参为模糊半径(必填)、阴影的颜色(可选，默认为灰色)、X轴的偏移量(可选，默认为0)，Y轴的偏移量(可选，默认为0)，偏移量单位为px。 | | grayscale | number | 0.0 | 为当前组件添加灰度效果。值定义为灰度转换的比例，入参1.0则完全转为灰度图像，入参则0.0图像无变化，入参在0.0和1.0之间时，效果呈线性变化。（百分比) | | brightness | number | 1.0 | 为当前组件添加高光效果，入参为高光比例，值为1时没有效果，小于1时亮度变暗，0为全黑；大于1时亮度增加，数值越大亮度越大。 | | saturate | number | 1.0 | 为当前组件添加饱和度效果，饱和度为颜色中的含色成分和消色成分(灰)的比例，入参为1时，显示原图像，大于1时含色成分越大，饱和度越大；小于1时消色成分越大，饱和度越小。（百分比） | | contrast | number | 1.0 | 为当前组件添加对比度效果，入参为对比度的值，值为1时，显示原图；大于1时，值越大对比度越高，图像越清晰醒目；小于1时，值越小对比度越低；当对比度为0时，图像变为全灰。（百分比） | | invert | number | 0 | 反转输入的图像。入参为图像反转的比例。值为1时完全反转。值为0则图像无变化。（百分比） | -| colorBlend 8+ | Color \| string \| [Resource](ts-types.md#resource) | - | 为当前组件添加颜色叠加效果，入参为叠加的颜色。 | +| colorBlend 8+ | [Color](ts-appendix-enums.md#color) \| string \| [Resource](ts-types.md#resource) | - | 为当前组件添加颜色叠加效果，入参为叠加的颜色。 | | sepia | number | 0 | 将图像转换为深褐色。入参为图像反转的比例。值为1则完全是深褐色的，值为0图像无变化。 （百分比） | -| hueRotate | number\|string | '0deg' | 色相旋转效果，输入参数为旋转角度。 | +| hueRotate | number \| string | '0deg' | 色相旋转效果，输入参数为旋转角度。 | ## 示例 @@ -36,45 +31,91 @@ // xxx.ets @Entry @Component -struct ImageEffectsExample { - +struct ImageEffectsExample1 { build() { - Column({space: 10}) { - // 对字体进行模糊 + Column({ space: 10 }) { + // 对字体进行模糊 Text('font blur').fontSize(15).fontColor(0xCCCCCC).width('90%') - Text('text').blur(3).width('90%').height(40) - .fontSize(16).backgroundColor(0xF9CF93).padding({ left: 5 }) + Flex({ alignItems: ItemAlign.Center }) { + Text('original text').margin(10) + Text('blur text') + .blur(1).margin(10) + Text('blur text') + .blur(2).margin(10) + Text('blur text') + .blur(3).margin(10) + }.width('90%').height(40) + .backgroundColor(0xF9CF93) + // 对背景进行模糊 Text('backdropBlur').fontSize(15).fontColor(0xCCCCCC).width('90%') - Text().width('90%').height(40).fontSize(16).backdropBlur(3) - .backgroundImage('/comment/bg.jpg') + Text() + .width('90%') + .height(40) + .fontSize(16) + .backdropBlur(3) + .backgroundImage('/pages/attrs/image/image.jpg') .backgroundImageSize({ width: 1200, height: 160 }) + }.width('100%').margin({ top: 5 }) + } +} +``` + +![textblur.jpg](figures/textblur.jpg) +```ts +// xxx.ets +@Entry +@Component +struct ImageEffectsExample2 { + build() { + Column({ space: 10 }) { + // 添加阴影效果，图片效果不变 Text('shadow').fontSize(15).fontColor(0xCCCCCC).width('90%') - Image($r('app.media.bg')).width('90%').height(40) - .shadow({ radius: 10, color: Color.Gray, offsetX: 5, offsetY: 5 }) + Image($r('app.media.image')) + .width('90%') + .height(40) + .shadow({ radius: 10, color: Color.Green, offsetX: 20, offsetY: 30 }) + // 灰度效果0~1，越接近1，灰度越明显 Text('grayscale').fontSize(15).fontColor(0xCCCCCC).width('90%') - Image($r('app.media.bg')).width('90%').height(40).grayscale(0.6) - + Image($r('app.media.image')).width('90%').height(40).grayscale(0.5) + Image($r('app.media.image')).width('90%').height(40).grayscale(1) + // 高光效果，1为正常图片，<1变暗，>1亮度增大 Text('brightness').fontSize(15).fontColor(0xCCCCCC).width('90%') - Image($r('app.media.bg')).width('90%').height(40).brightness(2.0) - + Image($r('app.media.image')).width('90%').height(40).brightness(1.5) + // 饱和度，原图为1 Text('saturate').fontSize(15).fontColor(0xCCCCCC).width('90%') - Image($r('app.media.bg')).width('90%').height(40).saturate(2.0) + Image($r('app.media.image')).width('90%').height(40).saturate(2.0) + Image($r('app.media.image')).width('90%').height(40).saturate(0.5) + // 对比度，1为原图，>1值越大越清晰，<1越模糊 Text('contrast').fontSize(15).fontColor(0xCCCCCC).width('90%') - Image($r('app.media.bg')).width('90%').height(40).contrast(2.0) + Image($r('app.media.image')).width('90%').height(40).contrast(2.0) + Image($r('app.media.image')).width('90%').height(40).contrast(0.5) + // 图像反转比例 Text('invert').fontSize(15).fontColor(0xCCCCCC).width('90%') - Image($r('app.media.bg')).width('90%').height(40).invert(1) + Image($r('app.media.image')).width('90%').height(40).invert(0.3) + Image($r('app.media.image')).width('90%').height(40).invert(1) + + // 叠色添加 + Text('colorBlend').fontSize(15).fontColor(0xCCCCCC).width('90%') + Image($r('app.media.image')).width('90%').height(40).colorBlend(Color.Green) + Image($r('app.media.image')).width('90%').height(40).colorBlend(Color.Blue) + // 深褐色 + Text('sepia').fontSize(15).fontColor(0xCCCCCC).width('90%') + Image($r('app.media.image')).width('90%').height(40).sepia(1) + + // 色相旋转 Text('hueRotate').fontSize(15).fontColor(0xCCCCCC).width('90%') - Image($r('app.media.bg')).width('90%').height(40).hueRotate(90) + Image($r('app.media.image')).width('90%').height(40).hueRotate(90) }.width('100%').margin({ top: 5 }) } } ``` -image-effect \ No newline at end of file +![imageeffect.jpg](figures/imageeffect.jpg) + diff --git a/zh-cn/application-dev/reference/arkui-ts/ts-universal-attributes-menu.md b/zh-cn/application-dev/reference/arkui-ts/ts-universal-attributes-menu.md index 543af9320cab9a91270a8cc089e234af3c2c302b..92463eb228b273e59b141143d599d52b7bbafed5 100644 --- a/zh-cn/application-dev/reference/arkui-ts/ts-universal-attributes-menu.md +++ b/zh-cn/application-dev/reference/arkui-ts/ts-universal-attributes-menu.md @@ -12,7 +12,7 @@ | 名称 | 参数类型 | 描述 | | ---------------------------- | ------------------------------------------------------------ | ------------------------------------------------------------ | -| bindMenu | Array8+ | content: [CustomBuilder](ts-types.md#custombuilder8),
responseType: [ResponseType](ts-appendix-enums.md#responsetype8) | 给组件绑定菜单，触发方式为长按或者右键点击，弹出菜单项需要自定义。 | ## MenuItem diff --git a/zh-cn/application-dev/reference/arkui-ts/ts-universal-attributes-popup.md b/zh-cn/application-dev/reference/arkui-ts/ts-universal-attributes-popup.md index bd48e25b3b06f38aeb2713817d23ef9e4a93686a..4546d72eed72db96047dbef1993a5b0681e70a51 100644 --- a/zh-cn/application-dev/reference/arkui-ts/ts-universal-attributes-popup.md +++ b/zh-cn/application-dev/reference/arkui-ts/ts-universal-attributes-popup.md @@ -1,6 +1,6 @@ # Popup控制 -设置组件点击时弹出的气泡框状态。 +给组件绑定popup弹窗，并设置弹窗内容，交互和状态。 > **说明：** > @@ -12,7 +12,7 @@ | 名称 | 参数类型 | 描述 | | ---------- | ------------------------------------- | --------------------------------------- | -| bindPopup | show: boolean,
popup: PopupOptions \| CustomPopupOptions8+ | 给组件绑定Popup，点击弹出弹窗。
show: 创建页面弹窗提示是否默认显示，默认值为false。
popup: 配置当前弹窗提示的参数。 | +| bindPopup | show: boolean,
popup: [PopupOptions](#popupoptions类型说明) \| [CustomPopupOptions](#custompopupoptions8类型说明)8+ | 给组件绑定Popup弹窗，设置参数show为true弹出弹框。
show: 弹窗显示状态，默认值为false，隐藏弹窗。
popup: 配置当前弹窗提示的参数。 | ## PopupOptions类型说明 @@ -40,81 +40,80 @@ ## 示例 - ```ts // xxx.ets @Entry @Component struct PopupExample { - @State noHandlePopup: boolean = false @State handlePopup: boolean = false @State customPopup: boolean = false + // popup构造器定义弹框内容 @Builder popupBuilder() { Row({ space: 2 }) { - Image('/resource/ic_public_thumbsup.svg').width(24).height(24).margin({ left: -5 }) + Image($r("app.media.image")).width(24).height(24).margin({ left: -5 }) Text('Custom Popup').fontSize(10) - }.width(100).height(50).backgroundColor(Color.White) + }.width(100).height(50).padding(5) } build() { Flex({ direction: FlexDirection.Column }) { - Button('no handle popup') + // PopupOptions 类型设置弹框内容 + Button('PopupOptions') .onClick(() => { - this.noHandlePopup = !this.noHandlePopup - }) - .bindPopup(this.noHandlePopup, { - message: 'content1 content1', - placementOnTop: false, - onStateChange: (e) => { - console.info(e.isVisible.toString()) - if (!e.isVisible) { - this.noHandlePopup = false - } - } - }) - .position({ x: 100, y: 50 }) - - Button('with handle popup') - .onClick(() => { - this.handlePopup = !this.handlePopup + this.handlePopup = !this.handlePopup //点击展示弹框 }) .bindPopup(this.handlePopup, { - message: 'content2 content2', - placementOnTop: true, + message: 'This is a popup with PopupOptions', + placementOnTop: false, + // 第一个按钮 primaryButton: { - value: 'ok', + value: 'confirm', + action: () => { + this.handlePopup = !this.handlePopup + console.info('ok Button click') + } + }, + // 第二个按钮 + secondaryButton: { + value: 'cancle', action: () => { this.handlePopup = !this.handlePopup - console.info('secondaryButton click') + console.info('cancle Button click') } }, onStateChange: (e) => { console.info(e.isVisible.toString()) + if (!e.isVisible) { + this.handlePopup = false + } } }) - .position({ x: 100, y: 200 }) + .position({ x: 100, y: 50 }) + - Button('custom popup') + // CustomPopupOptions 类型设置弹框内容 + Button('CustomPopupOptions') .onClick(() => { this.customPopup = !this.customPopup }) .bindPopup(this.customPopup, { builder: this.popupBuilder, - placement: Placement.Bottom, + placement: Placement.Top, maskColor: 0x33000000, - popupColor: Color.White, + popupColor: Color.Yellow, enableArrow: true, + autoCancel: true, onStateChange: (e) => { if (!e.isVisible) { this.customPopup = false } } }) - .position({ x: 100, y: 350 }) + .position({ x: 80, y: 200 }) }.width('100%').padding({ top: 5 }) } } ``` -![zh-cn_image_0000001187055946](figures/zh-cn_image_0000001187055946.gif) +![figures/popup.gif](figures/popup.gif) diff --git a/zh-cn/application-dev/reference/arkui-ts/ts-universal-attributes-touch-target.md b/zh-cn/application-dev/reference/arkui-ts/ts-universal-attributes-touch-target.md index fdf7314b0cb00f71a3d152dd0aa74f3293966955..f49831439155ffdf2b8ac69496426bee401b15c2 100644 --- a/zh-cn/application-dev/reference/arkui-ts/ts-universal-attributes-touch-target.md +++ b/zh-cn/application-dev/reference/arkui-ts/ts-universal-attributes-touch-target.md @@ -1,6 +1,7 @@ # 触摸热区设置 -适用于支持通用点击事件、通用触摸事件、通用手势处理的组件。 +适用于支持通用点击事件、通用触摸事件、通用手势处理的组件的触摸热区设置。 + > **说明：** > @@ -12,16 +13,16 @@ | 名称 | 参数类型 | 描述 | | -------------- | --------------------------------------------- | ----------------------------------------- | -| responseRegion | Array<Rectangle> \| Rectangle | 设置一个或多个触摸热区，包括位置和大小。
默认值：
{
x：0,
y：0,
width：'100%',
height：'100%'
} | +| responseRegion | Array<[Rectangle](#rectangle对象说明)> \| [Rectangle](#rectangle对象说明) | 设置一个或多个触摸热区，包括位置和大小。
默认触摸热区为整个组件，默认值：
{
x：0,
y：0,
width：'100%',
height：'100%'
} | -### Rectangle对象说明 +## Rectangle对象说明 | 名称 | 类型 | 必填 | 描述 | | ------ | ----------------------------- | -----| -------------------------------- | -| x | [Length](ts-types.md#length) | 否 | 触摸点相对于组件本身左边沿的X坐标。
默认值：0vp | -| y | [Length](ts-types.md#length) | 否 | 触摸点相对于组件本身左边沿的Y坐标。
默认值：0vp | -| width | [Length](ts-types.md#length) | 否 | 触摸热区范围的宽度。
默认值：100% | -| height | [Length](ts-types.md#length) | 否 | 触摸热区范围的高度。
默认值：100% | +| x | [Length](ts-types.md#length) | 否 | 触摸点相对于组件左边沿的x轴坐标。
默认值：0vp | +| y | [Length](ts-types.md#length) | 否 | 触摸点相对于组件上边沿的y轴坐标。
默认值：0vp | +| width | [Length](ts-types.md#length) | 否 | 触摸热区的宽度。
默认值：100% | +| height | [Length](ts-types.md#length) | 否 | 触摸热区的高度。
默认值：100% | > **说明：** > @@ -29,7 +30,7 @@ > > width和height只能设置正值百分比。width：'100%'表示热区宽度设置为该组件本身的宽度。比如组件本身宽度是100vp，那么'100%'表示热区宽度也为100vp。height：'100%'表示热区高度设置为该组件本身的高度。 > - > 百分比是相对于组件本身来度量的。 + > 百分比相对于组件本身宽高计算。 ## 示例 @@ -38,19 +39,38 @@ // xxx.ets @Entry @Component -struct ResponseRegionExample { +struct TouchTargetExample { + @State text: string = "" + build() { - Column() { - Toggle({ type: ToggleType.Checkbox, isOn: true }) - .selectedColor(0x39a2db) - .backgroundColor(0xAFEEEE) - .responseRegion({ x: 1.0, y: 1.0, width: 400, height: 400 }) - .onChange((isOn: boolean) => { - console.info('Component status:' + isOn) - }) - }.width('100%').margin({ top: 5 }) + Column({ space: 20 }) { + Text("{x:0,y:0,width:'50%',height:'100%'}") + // 热区宽度为按钮的一半，点击右侧无响应 + Button("button1") + .responseRegion({ x: 0, y: 0, width: '50%', height: '100%' }) + .onClick(() => { + this.text = 'button1 clicked' + }) + + // 热区宽度为按钮的一半，且右移一个按钮宽度，点击button2右侧左边，点击事件生效 + Text("{x:'100%',y:0,width:'50%',height:'100%'}") + Button("button2") + .responseRegion({ x: '100%', y: 0, width: '50%', height: '100%' }) + .onClick(() => { + this.text = 'button2 clicked' + }) + // 热区大小为整个按钮，且下移一个按钮高度，点击button3下方按钮大小区域，点击事件生效 + Text("{x:0,y:'100%',width:'100%',height:'100%'}") + Button("button3") + .responseRegion({ x: 0, y: '100%', width: '100%', height: '100%' }) + .onClick(() => { + this.text = 'button3 clicked' + }) + + Text(this.text).margin({ top: 50 }) + }.width('100%').margin({ top: 10 }) } } ``` -![zh-cn_image_0000001184400598](figures/zh-cn_image_0000001184400598.gif) +![touchtarget.gif](figures/touchtarget.gif)