Skip to content

D
Docs

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

通知 161
Star 293
Fork 28
D
Docs
未验证 提交 8d72aa5c 编写于 作者: O openharmony_ci 提交者： Gitee
浏览文件
操作

!10008 update docs 

Merge pull request !10008 from sienna1128/docs/0927
上级 a1151d82 00a70482
隐藏空白更改
内联 并排
Showing with 308 addition and 132 deletion
zh-cn/application-dev/reference/arkui-ts/ts-basic-components-blank.md
浏览文件 @ 8d72aa5c
...@@ -32,7 +32,8 @@ Blank(min?: number | string) ...@@ -32,7 +32,8 @@ Blank(min?: number | string)
## 示例 ## 示例
### 示例1
Blank组件在横竖屏占满空余空间效果。
```ts ```ts
// xxx.ets // xxx.ets
@Entry @Entry
...@@ -57,3 +58,37 @@ struct BlankExample { ...@@ -57,3 +58,37 @@ struct BlankExample {
横屏状态 横屏状态
![zh-cn_image_0000001174104388](figures/zh-cn_image_0000001174104388.gif) ![zh-cn_image_0000001174104388](figures/zh-cn_image_0000001174104388.gif)
### 示例2
Blank组件的父组件未设置宽度时，min参数的使用效果。
```ts
// xxx.ets
@Entry
@Component
struct BlankExample {
build() {
Column({ space: 20 }) {
// blank父组件不设置宽度时，Blank失效，可以通过设置min最小宽度填充固定宽度
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
浏览文件 @ 8d72aa5c
...@@ -14,7 +14,7 @@ ...@@ -14,7 +14,7 @@
CheckboxGroup(options?: { group?: string }) CheckboxGroup(options?: { group?: string })
创建多选框群组，可以控制群组内的Checkbox全选或者不全选，相同group的Checkbox和CheckboxGroup为同一群组。 创建多选框群组，可以控制群组内的Checkbox全选或者不全选，group值相同的Checkbox和CheckboxGroup为同一群组。
**参数:** **参数:**
...@@ -39,13 +39,13 @@ CheckboxGroup(options?: { group?: string }) ...@@ -39,13 +39,13 @@ CheckboxGroup(options?: { group?: string })
| 名称 | 功能描述 | | 名称 | 功能描述 |
| -------- | -------- | | -------- | -------- |
| onChange (callback: (event: CheckboxGroupResult) => void ) |CheckboxGroup的选中状态或群组内的Checkbox的选中状态发生变化时，触发回调。| | onChange (callback: (event: [CheckboxGroupResult](#checkboxgroupresult对象说明)) => void ) |CheckboxGroup的选中状态或群组内的Checkbox的选中状态发生变化时，触发回调。|
## CheckboxGroupResult对象说明 ## CheckboxGroupResult对象说明
| 名称 | 类型 | 描述 | | 名称 | 类型 | 描述 |
| ------ | ------ | ------- | | ------ | ------ | ------- |
| name | Array<string> | 群组内所有被选中的多选框名称。 | | name | Array<string> | 群组内所有被选中的多选框名称。 |
| status | SelectStatus | 选中状态。 | | status | [SelectStatus](#selectstatus枚举说明) | 选中状态。 |
## SelectStatus枚举说明 ## SelectStatus枚举说明
...@@ -66,18 +66,19 @@ struct CheckboxExample { ...@@ -66,18 +66,19 @@ struct CheckboxExample {
build() { build() {
Scroll() { Scroll() {
Column() { Column() {
// 全选按钮
Flex({ justifyContent: FlexAlign.Start, alignItems: ItemAlign.Center }) { Flex({ justifyContent: FlexAlign.Start, alignItems: ItemAlign.Center }) {
CheckboxGroup({ group: 'checkboxGroup' }) CheckboxGroup({ group: 'checkboxGroup' })
.selectedColor(0xed6f21) .selectedColor(0xed6f21)
.onChange((itemName: CheckboxGroupResult) => { .onChange((itemName: CheckboxGroupResult) => {
console.info("TextPicker::dialogResult is" + JSON.stringify(itemName)) console.info("checkbox group content" + JSON.stringify(itemName))
}) })
Text('select all').fontSize(20) Text('Select All').fontSize(20)
} }
// 选项1
Flex({ justifyContent: FlexAlign.Start, alignItems: ItemAlign.Center }) { Flex({ justifyContent: FlexAlign.Start, alignItems: ItemAlign.Center }) {
Checkbox({ name: 'checkbox1', group: 'checkboxGroup' }) Checkbox({ name: 'checkbox1', group: 'checkboxGroup' })
.select(true)
.selectedColor(0x39a2db) .selectedColor(0x39a2db)
.onChange((value: boolean) => { .onChange((value: boolean) => {
console.info('Checkbox1 change is' + value) console.info('Checkbox1 change is' + value)
...@@ -85,9 +86,9 @@ struct CheckboxExample { ...@@ -85,9 +86,9 @@ struct CheckboxExample {
Text('Checkbox1').fontSize(20) Text('Checkbox1').fontSize(20)
} }
// 选项2
Flex({ justifyContent: FlexAlign.Start, alignItems: ItemAlign.Center }) { Flex({ justifyContent: FlexAlign.Start, alignItems: ItemAlign.Center }) {
Checkbox({ name: 'checkbox2', group: 'checkboxGroup' }) Checkbox({ name: 'checkbox2', group: 'checkboxGroup' })
.select(false)
.selectedColor(0x39a2db) .selectedColor(0x39a2db)
.onChange((value: boolean) => { .onChange((value: boolean) => {
console.info('Checkbox2 change is' + value) console.info('Checkbox2 change is' + value)
...@@ -95,9 +96,9 @@ struct CheckboxExample { ...@@ -95,9 +96,9 @@ struct CheckboxExample {
Text('Checkbox2').fontSize(20) Text('Checkbox2').fontSize(20)
} }
// 选项3
Flex({ justifyContent: FlexAlign.Start, alignItems: ItemAlign.Center }) { Flex({ justifyContent: FlexAlign.Start, alignItems: ItemAlign.Center }) {
Checkbox({ name: 'checkbox3', group: 'checkboxGroup' }) Checkbox({ name: 'checkbox3', group: 'checkboxGroup' })
.select(true)
.selectedColor(0x39a2db) .selectedColor(0x39a2db)
.onChange((value: boolean) => { .onChange((value: boolean) => {
console.info('Checkbox3 change is' + value) console.info('Checkbox3 change is' + value)
...@@ -109,4 +110,10 @@ struct CheckboxExample { ...@@ -109,4 +110,10 @@ struct CheckboxExample {
} }
} }
``` ```
![](figures/checkboxgroup.gif) 多选框组三种状态图示：
![](figures/checkboxgroup1.png)
![](figures/checkboxgroup2.png)
![](figures/checkboxgroup3.png)
zh-cn/application-dev/reference/arkui-ts/ts-basic-components-datapanel.md
浏览文件 @ 8d72aa5c
...@@ -24,7 +24,7 @@ DataPanel(options:{values: number[], max?: number, type?: DataPanelType}) ...@@ -24,7 +24,7 @@ DataPanel(options:{values: number[], max?: number, type?: DataPanelType})
| ----------------- | -------- | ----- | -------- | | ----------------- | -------- | ----- | -------- |
| values | number[] | 是 | 数据值列表，最大支持9个数据。 | | values | number[] | 是 | 数据值列表，最大支持9个数据。 |
| max | number | 否 | -&nbsp;max大于0，表示数据的最大值。<br/>-&nbsp;max小于等于0，max等于value数组各项的和，按比例显示。<br/>默认值：100 | | 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枚举说明 ## DataPanelType枚举说明
......
zh-cn/application-dev/reference/arkui-ts/ts-basic-components-divider.md
浏览文件 @ 8d72aa5c
...@@ -47,6 +47,7 @@ struct DividerExample { ...@@ -47,6 +47,7 @@ struct DividerExample {
Divider() Divider()
Row().width('100%').height(40).backgroundColor(0xF1F3F5) Row().width('100%').height(40).backgroundColor(0xF1F3F5)
// 纵向分割线
Text('Vertical divider').fontSize(9).fontColor(0xCCCCCC) Text('Vertical divider').fontSize(9).fontColor(0xCCCCCC)
Flex({ alignItems: ItemAlign.Center, wrap: FlexWrap.Wrap }) { Flex({ alignItems: ItemAlign.Center, wrap: FlexWrap.Wrap }) {
Text('bravery') Text('bravery')
...@@ -56,6 +57,7 @@ struct DividerExample { ...@@ -56,6 +57,7 @@ struct DividerExample {
Text('upward') Text('upward')
}.width(250) }.width(250)
// 设置分割线宽度和端点样式
Text('Custom Styles').fontSize(9).fontColor(0xCCCCCC) Text('Custom Styles').fontSize(9).fontColor(0xCCCCCC)
Row().width('100%').height(40).backgroundColor(0xF1F3F5) Row().width('100%').height(40).backgroundColor(0xF1F3F5)
Divider().vertical(false).strokeWidth(5).color(0x2788D9).lineCap(LineCapStyle.Round) Divider().vertical(false).strokeWidth(5).color(0x2788D9).lineCap(LineCapStyle.Round)
......
zh-cn/application-dev/reference/arkui-ts/ts-basic-components-gauge.md
浏览文件 @ 8d72aa5c
...@@ -21,7 +21,7 @@ Gauge(options:{value: number, min?: number, max?: number}) ...@@ -21,7 +21,7 @@ Gauge(options:{value: number, min?: number, max?: number})
| 参数名 | 参数类型 | 必填 | 参数描述 | | 参数名 | 参数类型 | 必填 | 参数描述 |
| -------- | -------- | -------- | -------- | | -------- | -------- | -------- | -------- |
| value | number | 是 | 当前数据值。 | | value | number | 是 | 量规图的当前数据值，即图中指针指向位置。用于组件创建时量规图初始值的预置。 |
| min | number | 否 | 当前数据段最小值。<br/>默认值：0 | | min | number | 否 | 当前数据段最小值。<br/>默认值：0 |
| max | number | 否 | 当前数据段最大值。<br/>默认值：100 | | max | number | 否 | 当前数据段最大值。<br/>默认值：100 |
...@@ -31,11 +31,11 @@ Gauge(options:{value: number, min?: number, max?: number}) ...@@ -31,11 +31,11 @@ Gauge(options:{value: number, min?: number, max?: number})
| 名称 | 参数类型 | 描述 | | 名称 | 参数类型 | 描述 |
| -------- | -------- | -------- | | -------- | -------- | -------- |
| value | number | 设置当前数据图表的值。<br/>默认值：0 | | value | number | 设置量规图的数据值，可用于动态修改量规图的数据值。<br/>默认值：0 |
| startAngle | number | 设置起始角度位置，时钟0点为0度，顺时针方向为正角度。<br/>默认值：-150 | | startAngle | number | 设置起始角度位置，时钟0点为0度，顺时针方向为正角度。<br/>默认值：0 |
| endAngle | number | 设置终止角度位置，时钟0点为0度，顺时针方向为正角度。<br/>默认值：150 | | endAngle | number | 设置终止角度位置，时钟0点为0度，顺时针方向为正角度。<br/>默认值：360 |
| colors | Array&lt;ColorStop&gt; | 设置图表的颜色，支持分段颜色设置。 | | colors | Array&lt;[ColorStop](#colorstop)&gt; | 设置量规图的颜色，支持分段颜色设置。 |
| strokeWidth | Length | 设置环形图表的环形厚度。 | | strokeWidth | Length | 设置环形量规图的环形厚度。 |
## ColorStop ## ColorStop
...@@ -55,15 +55,30 @@ Gauge(options:{value: number, min?: number, max?: number}) ...@@ -55,15 +55,30 @@ Gauge(options:{value: number, min?: number, max?: number})
@Component @Component
struct GaugeExample { struct GaugeExample {
build() { build() {
Column() { Column({ space: 20 }) {
Gauge({ value: 50, min: 0, max: 100 }) // 使用默认的min和max为0-100，角度范围默认0-360，value值设置
.startAngle(210).endAngle(150) // 参数中设置当前值为75
.colors([[0x317AF7, 1], [0x5BA854, 1], [0xE08C3A, 1], [0x9C554B, 1], [0xD94838, 1]]) Gauge({ value: 75 })
.strokeWidth(20) .width(200).height(200)
.colors([[0x317AF7, 1], [0x5BA854, 1], [0xE08C3A, 1], [0x9C554B, 1]])
// 参数设置当前值为75，属性设置值为25，属性设置优先级高
Gauge({ value: 75 })
.value(25) //属性和参数都设置时以参数为准
.width(200).height(200) .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 }) }.width('100%').margin({ top: 5 })
} }
} }
``` ```
![zh-cn_image_0000001174422916](figures/zh-cn_image_0000001174422916.png) ![gauge](figures/gauge-image.png)
zh-cn/application-dev/reference/arkui-ts/ts-universal-attributes-grid.md
浏览文件 @ 8d72aa5c
# 栅格设置 # 栅格设置
> **说明：** > **说明：**
> - 从API Version 7开始支持。后续版本如有新增内容，则采用上角标单独标记该内容的起始版本。 >
> > - 从API Version 7开始支持。后续版本如有新增内容，则采用上角标单独标记该内容的起始版本。
> - 栅格布局的列宽、列间距由距离最近的GridContainer父组件决定。使用栅格属性的组件树上至少需要有1个GridContainer容器组件。 >
> - 栅格布局的列宽、列间距由距离最近的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时的占用列数和偏移列数。 | | 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 | | 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 | | gridOffset | number | 默认偏移列数，指useSizeType属性没有设置对应尺寸的偏移(offset)时，&nbsp;当前组件沿着父组件Start方向，偏移的列数，也就是当前组件位于第n列。<br/>**说明：**<br/>- 配置该属性后，当前组件在父组件水平方向的布局不再跟随父组件原有的布局方式，而是沿着父组件的Start方向偏移一定位移。<br/>- 偏移位移&nbsp;=&nbsp;（列宽&nbsp;+&nbsp;间距）\*&nbsp;列数。<br/>- 设置了偏移(gridOffset)的组件之后的兄弟组件会根据该组件进行相对布局，类似相对布局。<br>默认值：0 |
## 示例 ## 示例
...@@ -23,42 +24,76 @@ ...@@ -23,42 +24,76 @@
@Entry @Entry
@Component @Component
struct GridContainerExample1 { 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(){ Row() {
GridContainer() { Text('Center').fontSize(25)
Row({}) { }
Row() { .useSizeType({
Text('Left').fontSize(25) xs: { span: 1, offset: 0 }, sm: { span: 2, offset: 1 },
} md: { span: 5, offset: 1 }, lg: { span: 7, offset: 2 }
.useSizeType({ })
xs: { span: 1, offset: 0 }, sm: { span: 1, offset: 0 }, .height("100%")
md: { span: 1, offset: 0 }, lg: { span: 2, offset: 0 } .backgroundColor(0x66b6c5d1)
})
.height("100%") Row() {
.backgroundColor(0x66bbb2cb) Text('Right').fontSize(25)
Row() { }
Text('Center').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({ .height(200)
xs: { span: 1, offset: 0 }, sm: { span: 2, offset: 1 },
md: { span: 5, offset: 1 }, lg: { span: 7, offset: 2 } }
}) .backgroundColor(0xf1f3f5)
.height("100%") .margin({ top: 10 })
.backgroundColor(0x66b6c5d1)
// 单独设置组件的span和offset,在sm尺寸大小的设备上使用useSizeType中sm的数据实现一样的效果
Text('gridSpan,gridOffset').fontSize(15).fontColor(0xCCCCCC).width('90%')
GridContainer() {
Row() { Row() {
Text('Right').fontSize(25) Row() {
} Text('Left').fontSize(25)
.useSizeType({ }
xs: { span: 1, offset: 0 }, sm: { span: 1, offset: 3 }, .gridSpan(1)
md: { span: 2, offset: 6 }, lg: { span: 3, offset: 9 } .height("100%")
}) .backgroundColor(0x66bbb2cb)
.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 { ...@@ -74,3 +109,7 @@ struct GridContainerExample1 {
**图3** 设备宽度为LG **图3** 设备宽度为LG
![zh-cn_image_0000001219982727](figures/zh-cn_image_0000001219982727.png) ![zh-cn_image_0000001219982727](figures/zh-cn_image_0000001219982727.png)
**图4** 单独设置gridSpan和gridOffset在特定屏幕大小下的效果与useSizeType效果一致
![gridSpan](figures/gridSpan.png)
\ No newline at end of file
zh-cn/application-dev/reference/arkui-ts/ts-universal-attributes-image-effect.md
浏览文件 @ 8d72aa5c
# 图像效果 # 图像效果
例如背景模糊、内容模糊和灰度效果等。 设置组件的模糊，阴影效果以及设置图片的图像效果。
> **说明：** > **说明：**
> 从API Version 7开始支持。后续版本如有新增内容，则采用上角标单独标记该内容的起始版本。 > 从API Version 7开始支持。后续版本如有新增内容，则采用上角标单独标记该内容的起始版本。
## 权限列表
无
## 属性 ## 属性
...@@ -18,63 +13,113 @@ ...@@ -18,63 +13,113 @@
| ----------------------------- | ------------------------------------------------------------ | ------ | ------------------------------------------------------------ | | ----------------------------- | ------------------------------------------------------------ | ------ | ------------------------------------------------------------ |
| blur | number | - | 为当前组件添加内容模糊效果，入参为模糊半径，模糊半径越大越模糊，为0时不模糊。 | | blur | number | - | 为当前组件添加内容模糊效果，入参为模糊半径，模糊半径越大越模糊，为0时不模糊。 |
| backdropBlur | 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之间时，效果呈线性变化。（百分比) | | grayscale | number | 0.0 | 为当前组件添加灰度效果。值定义为灰度转换的比例，入参1.0则完全转为灰度图像，入参则0.0图像无变化，入参在0.0和1.0之间时，效果呈线性变化。（百分比) |
| brightness | number | 1.0 | 为当前组件添加高光效果，入参为高光比例，值为1时没有效果，小于1时亮度变暗，0为全黑；大于1时亮度增加，数值越大亮度越大。 | | brightness | number | 1.0 | 为当前组件添加高光效果，入参为高光比例，值为1时没有效果，小于1时亮度变暗，0为全黑；大于1时亮度增加，数值越大亮度越大。 |
| saturate | number | 1.0 | 为当前组件添加饱和度效果，饱和度为颜色中的含色成分和消色成分(灰)的比例，入参为1时，显示原图像，大于1时含色成分越大，饱和度越大；小于1时消色成分越大，饱和度越小。（百分比） | | saturate | number | 1.0 | 为当前组件添加饱和度效果，饱和度为颜色中的含色成分和消色成分(灰)的比例，入参为1时，显示原图像，大于1时含色成分越大，饱和度越大；小于1时消色成分越大，饱和度越小。（百分比） |
| contrast | number | 1.0 | 为当前组件添加对比度效果，入参为对比度的值，值为1时，显示原图；大于1时，值越大对比度越高，图像越清晰醒目；小于1时，值越小对比度越低；当对比度为0时，图像变为全灰。（百分比） | | contrast | number | 1.0 | 为当前组件添加对比度效果，入参为对比度的值，值为1时，显示原图；大于1时，值越大对比度越高，图像越清晰醒目；小于1时，值越小对比度越低；当对比度为0时，图像变为全灰。（百分比） |
| invert | number | 0 | 反转输入的图像。入参为图像反转的比例。值为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;（百分比） | | sepia | number | 0 | 将图像转换为深褐色。入参为图像反转的比例。值为1则完全是深褐色的，值为0图像无变化。&nbsp;（百分比） |
| hueRotate | number\|string | '0deg' | 色相旋转效果，输入参数为旋转角度。 | | hueRotate | number&nbsp;\|&nbsp;string | '0deg' | 色相旋转效果，输入参数为旋转角度。 |
## 示例 ## 示例
示例效果请以真机运行为准，当前IDE预览器不支持。 ### 示例1
模糊属性的用法，blur内容模糊，backdropBlur背景模糊。
```ts ```ts
// xxx.ets // xxx.ets
@Entry @Entry
@Component @Component
struct ImageEffectsExample { struct BlurEffectsExample {
build() { build() {
Column({space: 10}) { Column({ space: 10 }) {
// 对字体进行模糊 // 对字体进行模糊
Text('font blur').fontSize(15).fontColor(0xCCCCCC).width('90%') Text('font blur').fontSize(15).fontColor(0xCCCCCC).width('90%')
Text('text').blur(3).width('90%').height(40) Flex({ alignItems: ItemAlign.Center }) {
.fontSize(16).backgroundColor(0xF9CF93).padding({ left: 5 }) 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('backdropBlur').fontSize(15).fontColor(0xCCCCCC).width('90%')
Text().width('90%').height(40).fontSize(16).backdropBlur(3) Text()
.backgroundImage('/comment/bg.jpg') .width('90%')
.height(40)
.fontSize(16)
.backdropBlur(3)
.backgroundImage('/pages/attrs/image/image.jpg')
.backgroundImageSize({ width: 1200, height: 160 }) .backgroundImageSize({ width: 1200, height: 160 })
}.width('100%').margin({ top: 5 })
}
}
```
![textblur](figures/textblur.png)
### 示例2
设置图片的效果，包括阴影，灰度，高光，饱和度，对比度，图像反转，叠色，色相旋转等。
```ts
// xxx.ets
@Entry
@Component
struct ImageEffectsExample {
build() {
Column({ space: 10 }) {
// 添加阴影效果，图片效果不变
Text('shadow').fontSize(15).fontColor(0xCCCCCC).width('90%') Text('shadow').fontSize(15).fontColor(0xCCCCCC).width('90%')
Image($r('app.media.bg')).width('90%').height(40) Image($r('app.media.image'))
.shadow({ radius: 10, color: Color.Gray, offsetX: 5, offsetY: 5 }) .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%') 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.3)
Image($r('app.media.image')).width('90%').height(40).grayscale(0.8)
// 高光效果，1为正常图片，<1变暗，>1亮度增大
Text('brightness').fontSize(15).fontColor(0xCCCCCC).width('90%') 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.2)
// 饱和度，原图为1
Text('saturate').fontSize(15).fontColor(0xCCCCCC).width('90%') 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.7)
// 对比度，1为原图，>1值越大越清晰，<1值越小越模糊
Text('contrast').fontSize(15).fontColor(0xCCCCCC).width('90%') 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.8)
// 图像反转比例
Text('invert').fontSize(15).fontColor(0xCCCCCC).width('90%') 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.2)
Image($r('app.media.image')).width('90%').height(40).invert(0.8)
// 叠色添加
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(0.8)
// 色相旋转
Text('hueRotate').fontSize(15).fontColor(0xCCCCCC).width('90%') 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 }) }.width('100%').margin({ top: 5 })
} }
} }
``` ```
<img src="figures/image-effect.png" alt="image-effect" /> ![imageeffect](figures/imageeffect.png)
\ No newline at end of file
zh-cn/application-dev/reference/arkui-ts/ts-universal-attributes-menu.md
浏览文件 @ 8d72aa5c
...@@ -12,7 +12,7 @@ ...@@ -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) | 给组件绑定菜单，触发方式为长按或者右键点击，弹出菜单项需要自定义。 | | bindContextMenu<sup>8+</sup> | content:&nbsp;[CustomBuilder](ts-types.md#custombuilder8),<br>responseType:&nbsp;[ResponseType](ts-appendix-enums.md#responsetype8) | 给组件绑定菜单，触发方式为长按或者右键点击，弹出菜单项需要自定义。 |
## MenuItem ## MenuItem
......
zh-cn/application-dev/reference/arkui-ts/ts-universal-attributes-popup.md
浏览文件 @ 8d72aa5c
# Popup控制 # Popup控制
设置组件点击时弹出的气泡框状态。 给组件绑定popup弹窗，并设置弹窗内容，交互逻辑和显示状态。
> **说明：** > **说明：**
> >
...@@ -12,7 +12,7 @@ ...@@ -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类型说明 ## PopupOptions类型说明
...@@ -42,28 +42,28 @@ ...@@ -42,28 +42,28 @@
## 示例 ## 示例
```ts ```ts
// xxx.ets // xxx.ets
@Entry @Entry
@Component @Component
struct PopupExample { struct PopupExample {
@State noHandlePopup: boolean = false @State handlePopup: boolean = false;
@State handlePopup: boolean = false @State customPopup: boolean = false;
@State customPopup: boolean = false
// popup构造器定义弹框内容
@Builder popupBuilder() { @Builder popupBuilder() {
Row({ space: 2 }) { 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) Text('Custom Popup').fontSize(10)
}.width(100).height(50).backgroundColor(Color.White) }.width(100).height(50).padding(5)
} }
build() { build() {
Flex({ direction: FlexDirection.Column }) { Flex({ direction: FlexDirection.Column }) {
Button('no handle popup') // PopupOptions 类型设置弹框内容
Button('PopupOptions')
.onClick(() => { .onClick(() => {
this.noHandlePopup = !this.noHandlePopup this.noHandlePopup = !this.noHandlePopup;
}) })
.bindPopup(this.noHandlePopup, { .bindPopup(this.noHandlePopup, {
message: 'content1 content1', message: 'content1 content1',
...@@ -72,7 +72,7 @@ struct PopupExample { ...@@ -72,7 +72,7 @@ struct PopupExample {
onStateChange: (e) => { onStateChange: (e) => {
console.info(e.isVisible.toString()) console.info(e.isVisible.toString())
if (!e.isVisible) { if (!e.isVisible) {
this.noHandlePopup = false this.noHandlePopup = false;
} }
} }
}) })
...@@ -80,46 +80,59 @@ struct PopupExample { ...@@ -80,46 +80,59 @@ struct PopupExample {
Button('with handle popup') Button('with handle popup')
.onClick(() => { .onClick(() => {
this.handlePopup = !this.handlePopup this.handlePopup = !this.handlePopup;
}) })
.bindPopup(this.handlePopup, { .bindPopup(this.handlePopup, {
message: 'content2 content2', message: 'content2 content2',
placementOnTop: true, placementOnTop: true,
showInSubWindow:false, showInSubWindow:false,
primaryButton: { primaryButton: {
value: 'ok', value: 'confirm',
action: () => {
this.handlePopup = !this.handlePopup;
console.info('ok Button click')
}
},
// 第二个按钮
secondaryButton: {
value: 'cancle',
action: () => { action: () => {
this.handlePopup = !this.handlePopup this.handlePopup = !this.handlePopup;
console.info('secondaryButton click') console.info('cancle Button click')
} }
}, },
onStateChange: (e) => { onStateChange: (e) => {
console.info(e.isVisible.toString()) 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(() => { .onClick(() => {
this.customPopup = !this.customPopup this.customPopup = !this.customPopup;
}) })
.bindPopup(this.customPopup, { .bindPopup(this.customPopup, {
builder: this.popupBuilder, builder: this.popupBuilder,
placement: Placement.Bottom, placement: Placement.Top,
maskColor: 0x33000000, maskColor: 0x33000000,
popupColor: Color.White, popupColor: Color.Yellow,
enableArrow: true, enableArrow: true,
showInSubWindow:false, showInSubWindow:false,
onStateChange: (e) => { onStateChange: (e) => {
if (!e.isVisible) { if (!e.isVisible) {
this.customPopup = false this.customPopup = false;
} }
} }
}) })
.position({ x: 100, y: 350 }) .position({ x: 80, y: 200 })
}.width('100%').padding({ top: 5 }) }.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
浏览文件 @ 8d72aa5c
...@@ -2,6 +2,7 @@ ...@@ -2,6 +2,7 @@
适用于支持通用点击事件、通用触摸事件、通用手势处理的组件。 适用于支持通用点击事件、通用触摸事件、通用手势处理的组件。
> **说明：** > **说明：**
> >
> 从API Version 8开始支持。后续版本如有新增内容，则采用上角标单独标记该内容的起始版本。 > 从API Version 8开始支持。后续版本如有新增内容，则采用上角标单独标记该内容的起始版本。
...@@ -12,16 +13,16 @@ ...@@ -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 | | x | [Length](ts-types.md#length) | 否 | 触摸点相对于组件左上角的x轴坐标。<br/>默认值：0vp |
| y | [Length](ts-types.md#length) | 否 | 触摸点相对于组件本身左边沿的Y坐标。<br/>默认值：0vp | | y | [Length](ts-types.md#length) | 否 | 触摸点相对于组件左上角的y轴坐标。<br/>默认值：0vp |
| width | [Length](ts-types.md#length) | 否 | 触摸热区范围的宽度。<br/>默认值：100% | | width | [Length](ts-types.md#length) | 否 | 触摸热区的宽度。<br/>默认值：'100%' |
| height | [Length](ts-types.md#length) | 否 | 触摸热区范围的高度。<br/>默认值：100% | | height | [Length](ts-types.md#length) | 否 | 触摸热区的高度。<br/>默认值：'100%' |
> **说明：** > **说明：**
> >
...@@ -29,7 +30,7 @@ ...@@ -29,7 +30,7 @@
> >
> width和height只能设置正值百分比。width：'100%'表示热区宽度设置为该组件本身的宽度。比如组件本身宽度是100vp，那么'100%'表示热区宽度也为100vp。height：'100%'表示热区高度设置为该组件本身的高度。 > width和height只能设置正值百分比。width：'100%'表示热区宽度设置为该组件本身的宽度。比如组件本身宽度是100vp，那么'100%'表示热区宽度也为100vp。height：'100%'表示热区高度设置为该组件本身的高度。
> >
> 百分比是相对于组件本身来度量的。 > 百分比相对于组件自身宽高进行计算。
## 示例 ## 示例
...@@ -38,19 +39,38 @@ ...@@ -38,19 +39,38 @@
// xxx.ets // xxx.ets
@Entry @Entry
@Component @Component
struct ResponseRegionExample { struct TouchTargetExample {
@State text: string = "";
build() { build() {
Column() { Column({ space: 20 }) {
Toggle({ type: ToggleType.Checkbox, isOn: true }) Text("{x:0,y:0,width:'50%',height:'100%'}")
.selectedColor(0x39a2db) // 热区宽度为按钮的一半，点击右侧无响应
.backgroundColor(0xAFEEEE) Button("button1")
.responseRegion({ x: 1.0, y: 1.0, width: 400, height: 400 }) .responseRegion({ x: 0, y: 0, width: '50%', height: '100%' })
.onChange((isOn: boolean) => { .onClick(() => {
console.info('Component status:' + isOn) this.text = 'button1 clicked';
}) })
}.width('100%').margin({ top: 5 })
// 热区宽度为按钮的一半，且右移一个按钮宽度，点击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)
zh-cn/application-dev/ui/ts-framework-file-access-rules.md
浏览文件 @ 8d72aa5c
...@@ -64,4 +64,4 @@ export struct FoodList { ...@@ -64,4 +64,4 @@ export struct FoodList {
} }
} }
} }
``` ```
\ No newline at end of file
Markdown is supported
0% 或 .
You are about to add 0 people to the discussion. Proceed with caution.
先完成此消息的编辑！
想要评论请 注册 或