Skip to content

D
Docs

Coping0606 / Docs
与 Fork 源项目一致

Fork自 OpenHarmony / Docs

通知 1
Star 1
Fork 0
D
Docs

体验新版 GitCode，发现更多精彩内容 >>

提交 e1f0db46 编写于 作者: S sienna1128
浏览文件
操作

update docs 

Signed-off-by: Nsienna1128 <lixiaoyan45@huawei.com>
上级 4413ec5e
隐藏空白更改
内联 并排
Showing with 282 addition and 135 deletion
zh-cn/application-dev/reference/arkui-ts/ts-basic-components-blank.md
浏览文件 @ e1f0db46
......@@ -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)
zh-cn/application-dev/reference/arkui-ts/ts-basic-components-checkboxgroup.md
浏览文件 @ e1f0db46
......@@ -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&lt;string&gt; | 群组内所有被选中的多选框名称。 |
| status | SelectStatus | 选中状态。 |
| status | [SelectStatus](#selectstatus枚举说明) | 选中状态。 |
## SelectStatus枚举说明
......
zh-cn/application-dev/reference/arkui-ts/ts-basic-components-datapanel.md
浏览文件 @ e1f0db46
......@@ -24,7 +24,7 @@ DataPanel(options:{values: number[], max?: number, type?: DataPanelType})
| ----------------- | -------- | ----- | -------- |
| values | number[] | 是 | 数据值列表，最大支持9个数据。 |
| max | number | 否 | -&nbsp;max大于0，表示数据的最大值。<br/>-&nbsp;max小于等于0，max等于value数组各项的和，按比例显示。<br/>默认值：100 |
| type<sup>8+</sup> | DataPanelType | 否 | 数据面板的类型。<br/>默认值：DataPanelType.Circle |
| type<sup>8+</sup> | [DataPanelType](#datapaneltype枚举说明) | 否 | 数据面板的类型。<br/>默认值：DataPanelType.Circle |
## DataPanelType枚举说明
......
zh-cn/application-dev/reference/arkui-ts/ts-basic-components-divider.md
浏览文件 @ e1f0db46
......@@ -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)
......
zh-cn/application-dev/reference/arkui-ts/ts-basic-components-gauge.md
浏览文件 @ e1f0db46
......@@ -21,7 +21,7 @@ Gauge(options:{value: number, min?: number, max?: number})
| 参数名 | 参数类型 | 必填 | 参数描述 |
| -------- | -------- | -------- | -------- |
| value | number | 是 | 当前数据值。 |
| value | number | 是 | 数据图表的值，图中指针指向位置。用于组件创建时数据图表值的预置。 |
| min | number | 否 | 当前数据段最小值。<br/>默认值：0 |
| max | number | 否 | 当前数据段最大值。<br/>默认值：100 |
......@@ -31,10 +31,10 @@ Gauge(options:{value: number, min?: number, max?: number})
| 名称 | 参数类型 | 描述 |
| -------- | -------- | -------- |
| value | number | 设置当前数据图表的值。<br/>默认值：0 |
| startAngle | number | 设置起始角度位置，时钟0点为0度，顺时针方向为正角度。<br/>默认值：-150 |
| endAngle | number | 设置终止角度位置，时钟0点为0度，顺时针方向为正角度。<br/>默认值：150 |
| colors | Array&lt;ColorStop&gt; | 设置图表的颜色，支持分段颜色设置。 |
| value | number | 设置当前数据图表的值，用于组件创建完成后数据图表值的设置。<br/>默认值：0 |
| startAngle | number | 设置起始角度位置，时钟0点为0度，顺时针方向为正角度。<br/>默认值：0 |
| endAngle | number | 设置终止角度位置，时钟0点为0度，顺时针方向为正角度。<br/>默认值：360 |
| colors | Array&lt;[ColorStop](#colorstop)&gt; | 设置图表的颜色，支持分段颜色设置。 |
| 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)
zh-cn/application-dev/reference/arkui-ts/ts-universal-attributes-grid.md
浏览文件 @ e1f0db46
# 栅格设置
> **说明：**
> - 从API Version 7开始支持。后续版本如有新增内容，则采用上角标单独标记该内容的起始版本。
>
> - 栅格布局的列宽、列间距由距离最近的GridContainer父组件决定。使用栅格属性的组件树上至少需要有1个GridContainer容器组件。
>
> - 从API Version 7开始支持。后续版本如有新增内容，则采用上角标单独标记该内容的起始版本。
>
> - 栅格布局的列宽、列间距由距离最近的GridContainer父组件决定。使用栅格属性的组件树上至少需要有1个GridContainer容器组件。
## 属性
| 名称 | 参数类型 | 描述 |
| ----------- | --------------------------| ----------------------------------------------- |
| 名称 | 参数类型 | 描述 |
| ----------- | ------------------------------------------------------------ | ------------------------------------------------------------ |
| useSizeType | {<br/>xs?:&nbsp;number&nbsp;\|&nbsp;{&nbsp;span:&nbsp;number,&nbsp;offset:&nbsp;number&nbsp;},<br/>sm?:&nbsp;number&nbsp;\|&nbsp;{&nbsp;span:&nbsp;number,&nbsp;offset:&nbsp;number&nbsp;},<br/>md?:&nbsp;number&nbsp;\|&nbsp;{&nbsp;span:&nbsp;number,&nbsp;offset:&nbsp;number&nbsp;},<br/>lg?:&nbsp;number&nbsp;\|&nbsp;{&nbsp;span:&nbsp;number,&nbsp;offset:&nbsp;number&nbsp;}<br/>} | 设置在特定设备宽度类型下的占用列数和偏移列数，span:&nbsp;占用列数;&nbsp;offset:&nbsp;偏移列数。<br/>当值为number类型时，仅设置列数，&nbsp;当格式如{"span":&nbsp;1,&nbsp;"offset":&nbsp;0}时，指同时设置占用列数与偏移列数。<br/>-&nbsp;xs:&nbsp;指设备宽度类型为SizeType.XS时的占用列数和偏移列数。<br/>-&nbsp;sm:&nbsp;指设备宽度类型为SizeType.SM时的占用列数和偏移列数。<br/>-&nbsp;md:&nbsp;指设备宽度类型为SizeType.MD时的占用列数和偏移列数。<br/>-&nbsp;lg:&nbsp;指设备宽度类型为SizeType.LG时的占用列数和偏移列数。 |
| gridSpan | number | 默认占用列数，指useSizeType属性没有设置对应尺寸的列数（span)时，占用的栅格列数。<br/>**说明：**<br/>设置了栅格span属性，组件的宽度由栅格布局决定。<br>默认值：1 |
| gridOffset | number | 默认偏移列数，指useSizeType属性没有设置对应尺寸的偏移(offset)时，&nbsp;当前组件沿着父组件Start方向，偏移的列数，也就是当前组件位于第n列。<br/>**说明：**<br/>- 配置该属性后，当前组件在父组件水平方向的布局不再跟随父组件原有的布局方式，而是沿着父组件的Start方向偏移一定位移。<br/>- 偏移位移&nbsp;=&nbsp;（列宽&nbsp;+&nbsp;间距）\*&nbsp;列数。<br/>- 设置了偏移(gridOffset)的组件之后的兄弟组件会根据该组件进行相对布局，类似相对布局。<br>默认值：0 |
| gridSpan | number | 默认占用列数，指useSizeType属性没有设置对应尺寸的列数（span)时，占用的栅格列数。<br/>**说明：**<br/>设置了栅格span属性，组件的宽度由栅格布局决定。<br>默认值：1 |
| gridOffset | number | 默认偏移列数，指useSizeType属性没有设置对应尺寸的偏移(offset)时，&nbsp;当前组件沿着父组件Start方向，偏移的列数，也就是当前组件位于第n列。<br/>**说明：**<br/>- 配置该属性后，当前组件在父组件水平方向的布局不再跟随父组件原有的布局方式，而是沿着父组件的Start方向偏移一定位移。<br/>- 偏移位移&nbsp;=&nbsp;（列宽&nbsp;+&nbsp;间距）\*&nbsp;列数。<br/>- 设置了偏移(gridOffset)的组件之后的兄弟组件会根据该组件进行相对布局，类似相对布局。<br>默认值：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
zh-cn/application-dev/reference/arkui-ts/ts-universal-attributes-image-effect.md
浏览文件 @ e1f0db46
# 图像效果
例如背景模糊、内容模糊和灰度效果等。
设置图片背景模糊、内容模糊和灰度等效果。
> **说明：**
> 从API Version 7开始支持。后续版本如有新增内容，则采用上角标单独标记该内容的起始版本。
## 权限列表
无
## 属性
......@@ -18,15 +13,15 @@
| ----------------------------- | ------------------------------------------------------------ | ------ | ------------------------------------------------------------ |
| blur | number | - | 为当前组件添加内容模糊效果，入参为模糊半径，模糊半径越大越模糊，为0时不模糊。 |
| backdropBlur | number | - | 为当前组件添加背景模糊效果，入参为模糊半径，模糊半径越大越模糊，为0时不模糊。 |
| shadow | {<br/>radius:&nbsp;number \| [Resource](ts-types.md#resource),<br/>color?:&nbsp;Color \| string \| Resource,<br/>offsetX?:&nbsp;number \| Resource,<br/>offsetY?:&nbsp;number \| Resource<br/>} | - | 为当前组件添加阴影效果，入参为模糊半径(必填)、阴影的颜色(可选，默认为灰色)、X轴的偏移量(可选，默认为0)，Y轴的偏移量(可选，默认为0)，偏移量单位为px。 |
| shadow | {<br/>radius:&nbsp;number \| [Resource](ts-types.md#resource),<br/>color?:&nbsp;[Color](ts-appendix-enums.md#color) \| string \| [Resource](ts-types.md#resource),<br/>offsetX?:&nbsp;number \| [Resource](ts-types.md#resource),<br/>offsetY?:&nbsp;number \| [Resource](ts-types.md#resource)<br/>} | - | 为当前组件添加阴影效果，入参为模糊半径(必填)、阴影的颜色(可选，默认为灰色)、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&nbsp;<sup>8+</sup> | Color&nbsp;\|&nbsp;string&nbsp;\|&nbsp;[Resource](ts-types.md#resource) | - | 为当前组件添加颜色叠加效果，入参为叠加的颜色。 |
| colorBlend&nbsp;<sup>8+</sup> | [Color](ts-appendix-enums.md#color)&nbsp;\|&nbsp;string&nbsp;\|&nbsp;[Resource](ts-types.md#resource) | - | 为当前组件添加颜色叠加效果，入参为叠加的颜色。 |
| sepia | number | 0 | 将图像转换为深褐色。入参为图像反转的比例。值为1则完全是深褐色的，值为0图像无变化。&nbsp;（百分比） |
| hueRotate | number\|string | '0deg' | 色相旋转效果，输入参数为旋转角度。 |
| hueRotate | number&nbsp;\|&nbsp;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 })
}
}
```
<img src="figures/image-effect.png" alt="image-effect" />
\ No newline at end of file
![imageeffect.jpg](figures/imageeffect.jpg)
zh-cn/application-dev/reference/arkui-ts/ts-universal-attributes-menu.md
浏览文件 @ e1f0db46
......@@ -12,7 +12,7 @@
| 名称 | 参数类型 | 描述 |
| ---------------------------- | ------------------------------------------------------------ | ------------------------------------------------------------ |
| bindMenu | Array<MenuItem&gt;&nbsp;\|&nbsp;[CustomBuilder](ts-types.md#custombuilder8) | 给组件绑定菜单，点击后弹出菜单。弹出菜单项支持文本和自定义两种功能。 |
| bindMenu | Array<[MenuItem](#menuitem)&gt;&nbsp;\|&nbsp;[CustomBuilder](ts-types.md#custombuilder8) | 给组件绑定菜单，点击后弹出菜单。弹出菜单项支持文本和自定义两种功能。 |
| bindContextMenu<sup>8+</sup> | content:&nbsp;[CustomBuilder](ts-types.md#custombuilder8),<br>responseType:&nbsp;[ResponseType](ts-appendix-enums.md#responsetype8) | 给组件绑定菜单，触发方式为长按或者右键点击，弹出菜单项需要自定义。 |
## MenuItem
......
zh-cn/application-dev/reference/arkui-ts/ts-universal-attributes-popup.md
浏览文件 @ e1f0db46
# Popup控制
设置组件点击时弹出的气泡框状态。
给组件绑定popup弹窗，并设置弹窗内容，交互和状态。
> **说明：**
>
......@@ -12,7 +12,7 @@
| 名称 | 参数类型 | 描述 |
| ---------- | ------------------------------------- | --------------------------------------- |
| bindPopup | show:&nbsp;boolean,<br/>popup:&nbsp;PopupOptions&nbsp;\|&nbsp;CustomPopupOptions<sup>8+</sup> | 给组件绑定Popup，点击弹出弹窗。<br/>show:&nbsp;创建页面弹窗提示是否默认显示，默认值为false。<br/>popup:&nbsp;配置当前弹窗提示的参数。 |
| bindPopup | show:&nbsp;boolean,<br/>popup:&nbsp;[PopupOptions](#popupoptions类型说明)&nbsp;\|&nbsp;[CustomPopupOptions](#custompopupoptions8类型说明)<sup>8+</sup> | 给组件绑定Popup弹窗，设置参数show为true弹出弹框。<br/>show:&nbsp;弹窗显示状态，默认值为false，隐藏弹窗。<br/>popup:&nbsp;配置当前弹窗提示的参数。 |
## 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)
zh-cn/application-dev/reference/arkui-ts/ts-universal-attributes-touch-target.md
浏览文件 @ e1f0db46
# 触摸热区设置
适用于支持通用点击事件、通用触摸事件、通用手势处理的组件。
适用于支持通用点击事件、通用触摸事件、通用手势处理的组件的触摸热区设置。
> **说明：**
>
......@@ -12,16 +13,16 @@
| 名称 | 参数类型 | 描述 |
| -------------- | --------------------------------------------- | ----------------------------------------- |
| responseRegion | Array&lt;Rectangle&gt;&nbsp;\|&nbsp;Rectangle | 设置一个或多个触摸热区，包括位置和大小。<br/>默认值：<br/>{<br/>x：0,<br/>y：0,<br/>width：'100%',<br/>height：'100%'<br/>} |
| responseRegion | Array&lt;[Rectangle](#rectangle对象说明)&gt;&nbsp;\|&nbsp;[Rectangle](#rectangle对象说明) | 设置一个或多个触摸热区，包括位置和大小。<br/>默认触摸热区为整个组件，默认值：<br/>{<br/>x：0,<br/>y：0,<br/>width：'100%',<br/>height：'100%'<br/>} |
### Rectangle对象说明
## Rectangle对象说明
| 名称 | 类型 | 必填 | 描述 |
| ------ | ----------------------------- | -----| -------------------------------- |
| x | [Length](ts-types.md#length) | 否 | 触摸点相对于组件本身左边沿的X坐标。<br/>默认值：0vp |
| y | [Length](ts-types.md#length) | 否 | 触摸点相对于组件本身左边沿的Y坐标。<br/>默认值：0vp |
| width | [Length](ts-types.md#length) | 否 | 触摸热区范围的宽度。<br/>默认值：100% |
| height | [Length](ts-types.md#length) | 否 | 触摸热区范围的高度。<br/>默认值：100% |
| x | [Length](ts-types.md#length) | 否 | 触摸点相对于组件左边沿的x轴坐标。<br/>默认值：0vp |
| y | [Length](ts-types.md#length) | 否 | 触摸点相对于组件上边沿的y轴坐标。<br/>默认值：0vp |
| width | [Length](ts-types.md#length) | 否 | 触摸热区的宽度。<br/>默认值：100% |
| height | [Length](ts-types.md#length) | 否 | 触摸热区的高度。<br/>默认值：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)
Markdown is supported
0% 或 .
You are about to add 0 people to the discussion. Proceed with caution.
先完成此消息的编辑！
想要评论请 注册 或