默认值：NavigationTitleMode.Free | -| toolBar | object \| [CustomBuilder](ts-types.md#custombuilder8)8+ | 设置工具栏内容。
items: 工具栏所有项。 | -| hideToolBar | boolean | 设置隐藏/显示工具栏：
默认值：false
true: 隐藏工具栏。
false: 显示工具栏。 | -| hideTitleBar | boolean | 隐藏标题栏。
默认值：false | -| hideBackButton | boolean | 隐藏返回键。
默认值：false | +| menus | Array<[NavigationMenuItem](#navigationmenuitem类型说明)> \| [CustomBuilder](ts-types.md#custombuilder8)8+ | 页面右上角菜单。 | +| titleMode | [NavigationTitleMode](#navigationtitlemode枚举说明) | 页面标题栏显示模式。
默认值：NavigationTitleMode.Free | +| toolBar | [object](#object类型说明) \| [CustomBuilder](ts-types.md#custombuilder8)8+ | 设置工具栏内容。
items: 工具栏所有项。 | +| hideToolBar | boolean | 隐藏工具栏：
默认值：false
true: 隐藏工具栏。
false: 显示工具栏。 | +| hideTitleBar | boolean | 隐藏标题栏。
默认值：false
true: 隐藏标题栏。
false: 显示标题栏。 | +| hideBackButton | boolean | 隐藏返回键。
默认值：false
true: 隐藏返回键。
false: 显示返回键。 | ## NavigationMenuItem类型说明 diff --git a/zh-cn/application-dev/reference/arkui-ts/ts-basic-components-progress.md b/zh-cn/application-dev/reference/arkui-ts/ts-basic-components-progress.md index ec2692af803ac6bc4ced019989151a3d409177d1..cfc96d3bab0785f3be04d14b64efe2e12cbf4203 100644 --- a/zh-cn/application-dev/reference/arkui-ts/ts-basic-components-progress.md +++ b/zh-cn/application-dev/reference/arkui-ts/ts-basic-components-progress.md @@ -12,7 +12,7 @@ 无 -## 接口说明 +## 接口 Progress(options: {value: number, total?: number, type?: ProgressType}) @@ -24,8 +24,8 @@ Progress(options: {value: number, total?: number, type?: ProgressType}) | -------- | -------- | -------- | -------- | | value | number | 是 | 指定当前进度值。 | | total | number | 否 | 指定进度总长。
默认值：100 | -| type8+ | ProgressType | 否 | 指定进度条样式。
默认值：ProgressType.Linear | -| styledeprecated | ProgressStyle | 否 | 指定进度条类型。
该参数从API Version8开始废弃，建议使用type替代。
默认值：ProgressStyle.Linear | +| type8+ | [ProgressType](#progresstype枚举说明) | 否 | 指定进度条类型。
默认值：ProgressType.Linear | +| styledeprecated | [ProgressStyle](#progressstyle枚举说明) | 否 | 指定进度条样式。
该参数从API Version8开始废弃，建议使用type替代。
默认值：ProgressStyle.Linear | ## ProgressType枚举说明 @@ -69,6 +69,7 @@ struct ProgressExample { Progress({ value: 10, type: ProgressType.Linear }).width(200) Progress({ value: 20, total: 150, type: ProgressType.Linear }).color(Color.Grey).value(50).width(200) + Text('Eclipse Progress').fontSize(9).fontColor(0xCCCCCC).width('90%') Row({ space: 40 }) { Progress({ value: 10, type: ProgressType.Eclipse }).width(100) @@ -83,6 +84,16 @@ struct ProgressExample { .style({ strokeWidth: 15, scaleCount: 15, scaleWidth: 5 }) } + // scaleCount和scaleWidth效果对比 + Row({ space: 40 }) { + Progress({ value: 20, total: 150, type: ProgressType.ScaleRing }) + .color(Color.Grey).value(50).width(100) + .style({ strokeWidth: 20, scaleCount: 20, scaleWidth: 5 }) + Progress({ value: 20, total: 150, type: ProgressType.ScaleRing }) + .color(Color.Grey).value(50).width(100) + .style({ strokeWidth: 20, scaleCount: 30, scaleWidth: 3 }) + } + Text('Ring Progress').fontSize(9).fontColor(0xCCCCCC).width('90%') Row({ space: 40 }) { Progress({ value: 10, type: ProgressType.Ring }).width(100) @@ -105,4 +116,4 @@ struct ProgressExample { } ``` - + diff --git a/zh-cn/application-dev/reference/arkui-ts/ts-basic-components-qrcode.md b/zh-cn/application-dev/reference/arkui-ts/ts-basic-components-qrcode.md index 259600117c3d8b53a05ca3c302d72aa60f21d4b6..d029ffdc31014f2046db268c33cc81917b2d783a 100644 --- a/zh-cn/application-dev/reference/arkui-ts/ts-basic-components-qrcode.md +++ b/zh-cn/application-dev/reference/arkui-ts/ts-basic-components-qrcode.md @@ -44,17 +44,21 @@ QRCode(value: string) @Component struct QRCodeExample { private value: string = 'hello world' - build() { Column({ space: 5 }) { - Text('normal').fontSize(9).width('90%').fontColor(0xCCCCCC) + Text('normal').fontSize(9).width('90%').fontColor(0xCCCCCC).fontSize(30) QRCode(this.value).width(200).height(200) - Text('color').fontSize(9).width('90%').fontColor(0xCCCCCC) + // 设置二维码颜色 + Text('color').fontSize(9).width('90%').fontColor(0xCCCCCC).fontSize(30) QRCode(this.value).color(0xF7CE00).width(200).height(200) + + // 设置二维码背景色 + Text('backgroundColor').fontSize(9).width('90%').fontColor(0xCCCCCC).fontSize(30) + QRCode(this.value).width(200).height(200).backgroundColor(Color.Orange) }.width('100%').margin({ top: 5 }) } } ``` - + diff --git a/zh-cn/application-dev/reference/arkui-ts/ts-basic-components-scrollbar.md b/zh-cn/application-dev/reference/arkui-ts/ts-basic-components-scrollbar.md index 3aa51016e0caf1597f5cd214dbdff9a909a3d169..59ea8bf4922847804e96d2dad708696fb5885d85 100644 --- a/zh-cn/application-dev/reference/arkui-ts/ts-basic-components-scrollbar.md +++ b/zh-cn/application-dev/reference/arkui-ts/ts-basic-components-scrollbar.md @@ -21,7 +21,7 @@ ScrollBar(value: { scroller: Scroller, direction?: ScrollBarDirection, state?: B | 参数名 | 参数类型 | 必填 | 参数描述 | | -------- | -------- | -------- | -------- | | scroller | [Scroller](ts-container-scroll.md#scroller) | 是 | 可滚动组件的控制器。用于与可滚动组件进行绑定。 | -| direction | ScrollBarDirection | 否 | 滚动条的方向，控制可滚动组件对应方向的滚动。
默认值：ScrollBarDirection.Vertical | +| direction | [ScrollBarDirection](#scrollbardirection枚举说明) | 否 | 滚动条的方向，控制可滚动组件对应方向的滚动。
默认值：ScrollBarDirection.Vertical | | state | [BarState](ts-appendix-enums.md#barstate) | 否 | 滚动条状态。
默认值：BarState.Auto | > **说明：** diff --git a/zh-cn/application-dev/reference/arkui-ts/ts-basic-components-select.md b/zh-cn/application-dev/reference/arkui-ts/ts-basic-components-select.md index 7066a306eaf8f8339d0195d603cf15e42842b624..055451e0feea7c6140d477b19e42ed09a352c661 100644 --- a/zh-cn/application-dev/reference/arkui-ts/ts-basic-components-select.md +++ b/zh-cn/application-dev/reference/arkui-ts/ts-basic-components-select.md @@ -12,9 +12,9 @@ ## 接口 -Select(options: Array\
type: [TextDecorationType](ts-appendix-enums.md#textdecorationtype),
color?: [ResourceColor](ts-types.md#resourcecolor)
} | 设置文本装饰线样式及其颜色。
默认值：{
type: TextDecorationType.None
color：Color.Black
} | -| letterSpacing | number \| string | 设置文本字符间距。 | +| letterSpacing | number \| string | 设置文本字符间距。取值小于0，字符聚集重叠，取值大于0且随着数值变大，字符间距越来越大，稀疏分布。 | | textCase | [TextCase](ts-appendix-enums.md#textcase) | 设置文本大小写。
默认值：TextCase.Normal | @@ -58,29 +58,59 @@ struct SpanExample { .decoration({ type: TextDecorationType.None, color: Color.Red }) } + // 文本横线添加 Text('Text Decoration').fontSize(9).fontColor(0xCCCCCC) Text() { Span('I am Underline-span').decoration({ type: TextDecorationType.Underline, color: Color.Red }).fontSize(12) } + Text() { - Span('I am LineThrough-span').decoration({ type: TextDecorationType.LineThrough, color: Color.Red }).fontSize(12) + Span('I am LineThrough-span') + .decoration({ type: TextDecorationType.LineThrough, color: Color.Red }) + .fontSize(12) } + Text() { Span('I am Overline-span').decoration({ type: TextDecorationType.Overline, color: Color.Red }).fontSize(12) } + // 文本字符间距 + Text('LetterSpacing').fontSize(9).fontColor(0xCCCCCC) + Text() { + Span('span letter spacing') + .letterSpacing(0) + .fontSize(12) + } + + Text() { + Span('span letter spacing') + .letterSpacing(-2) + .fontSize(12) + } + + Text() { + Span('span letter spacing') + .letterSpacing(3) + .fontSize(12) + } + + + // 文本大小写展示设置 Text('Text Case').fontSize(9).fontColor(0xCCCCCC) Text() { - Span('I am Lower-span').textCase(TextCase.LowerCase).fontSize(12) - .decoration({ type: TextDecorationType.None, color: Color.Red }) + Span('I am Lower-span').fontSize(12) + .textCase(TextCase.LowerCase) + .decoration({ type: TextDecorationType.None }) } + Text() { - Span('I am Upper-span').textCase(TextCase.UpperCase).fontSize(12) - .decoration({ type: TextDecorationType.None, color: Color.Red }) + Span('I am Upper-span').fontSize(12) + .textCase(TextCase.UpperCase) + .decoration({ type: TextDecorationType.None }) } }.width('100%').height(250).padding({ left: 35, right: 35, top: 35 }) } } ``` - + diff --git a/zh-cn/application-dev/reference/arkui-ts/ts-basic-components-text.md b/zh-cn/application-dev/reference/arkui-ts/ts-basic-components-text.md index 32e8ab5facd0d88692571b27af2399c05acf5a7a..3362e271b8c4e1f03dfef68bbb857bfa6df00d76 100644 --- a/zh-cn/application-dev/reference/arkui-ts/ts-basic-components-text.md +++ b/zh-cn/application-dev/reference/arkui-ts/ts-basic-components-text.md @@ -32,7 +32,7 @@ Text(content?: string | Resource) | textOverflow | {overflow: [TextOverflow](ts-appendix-enums.md#textoverflow)} | 设置文本超长时的显示方式。
默认值：{overflow: TextOverflow.Clip}
**说明：**
文本截断是按字截断。例如，英文以单词为最小单位进行截断，若需要以字母为单位进行截断，可在字母间添加零宽空格：\u200B。
需配合`maxLines`使用，单独设置不生效。 | | maxLines | number | 设置文本的最大行数。
默认值：Infinity
**说明：**
默认情况下，文本是自动折行的，如果指定此参数，则文本最多不会超过指定的行。如果有多余的文本，可以通过 `textOverflow`来指定截断方式。 | | lineHeight | string \| number \| [Resource](ts-types.md#resource) | 设置文本的文本行高，设置值不大于0时，不限制文本行高，自适应字体大小，Length为number类型时单位为fp。 | -| decoration | {
type: TextDecorationType,
color?: [ResourceColor](ts-types.md#resourcecolor)
} | 设置文本装饰线样式及其颜色。
默认值：{
type: TextDecorationType.None,
color：Color.Black
} | +| decoration | {
type: [TextDecorationType](ts-appendix-enums.md#textdecorationtype),
color?: [ResourceColor](ts-types.md#resourcecolor)
} | 设置文本装饰线样式及其颜色。
默认值：{
type: TextDecorationType.None,
color：Color.Black
} | | baselineOffset | number \| string | 设置文本基线的偏移量。 | | letterSpacing | number \| string | 设置文本字符间距。 | | minFontSize | number \| string \| [Resource](ts-types.md#resource) | 设置文本最小显示字号。 | diff --git a/zh-cn/application-dev/reference/arkui-ts/ts-basic-components-textclock.md b/zh-cn/application-dev/reference/arkui-ts/ts-basic-components-textclock.md index 0820f1f4ad8e758cd1432aab55f9f2b549c0c514..675e57599dbb993dffb2e2f29bc9fd3b65b0636c 100644 --- a/zh-cn/application-dev/reference/arkui-ts/ts-basic-components-textclock.md +++ b/zh-cn/application-dev/reference/arkui-ts/ts-basic-components-textclock.md @@ -21,30 +21,15 @@ TextClock(options?: { timeZoneOffset?: number, controller?: TextClockController | timeZoneOffset | number | 否 | 设置时区偏移量。
取值范围为[-14, 12]，表示东十二区到西十二区，其中负值表示东时区，正值表示西时区，比如东八区为-8。
对横跨国际日界线的国家或地区，用-13（UTC+13）和-14（UTC+14）来保证整个国家或者区域处在相同的时间，当设置的值不在取值范围内时，将使用当前系统的时区偏移量。
默认值：当前系统的时区偏移量 | | controller | [TextClockController](#textclockcontroller) | 否 | 绑定一个控制器，用来控制文本时钟的状态。| -## 属性 - -除支持[通用属性](ts-universal-attributes-size.md)外，还支持以下属性： - -| 名称 | 参数类型 | 描述 | -| ------ | --------------- | ------------------------------------------------------------ | -| format | string | 设置显示时间格式。
日期间隔符固定为"/"，时间间隔符为":"。
如yyyyMMdd，yyyy-MM-dd显示为yyyy/MM/dd，
hhmmss显示为hh:mm:ss。
时间格式只用写一位即可，如"hhmmss"等同于"hms"。
支持的时间格式化字符串：
- YYYY/yyyy：完整年份。
- YY/yy：年份后两位。
- M：月份(若想使用01月则使用MM)。
- d：日期(若想使用01日则使用dd)。
- D：年中日(一年中的第几天)。
- H：24小时制。
- h：12小时制。
- m：分钟。
- s：秒。
- SSS：毫秒。
默认值： 'hms'| - -## 事件 - -除支持[通用事件](ts-universal-events-click.md)外，还支持以下事件： - -| 名称 | 功能描述 | -| -------------------------------------------- | ------------------------------------------------------------ | -| onDateChange(event: (value: number) => void) | 提供时间变化回调，该事件最小回调间隔为秒。
- value: Unix Time Stamp，即自1970年1月1日（UTC）起经过的毫秒数。 | ## TextClockController -TextClock容器组件的控制器，可以将此对象绑定到TextClock组件，再通过它控制文本时钟的启动与停止。一个TextClock组件仅支持绑定一个控制器。 +TextClock容器组件的控制器，可以将该控制器绑定到TextClock组件，通过它控制文本时钟的启动与停止。一个TextClock组件仅支持绑定一个控制器。 ### 导入对象 ```ts -controller: TextClockController = new TextClockController() +controller: TextClockController = new TextClockController(); ``` ### start @@ -60,15 +45,32 @@ stop() 停止文本时钟。 +## 属性 + +除支持[通用属性](ts-universal-attributes-size.md)外，还支持以下属性： + +| 名称 | 参数类型 | 描述 | +| ------ | --------------- | ------------------------------------------------------------ | +| format | string | 设置显示时间格式。
日期间隔符固定为"/"，时间间隔符为":"。
如yyyyMMdd，yyyy-MM-dd显示为yyyy/MM/dd，
hhmmss显示为hh:mm:ss。
时间格式只用写一位即可，如"hhmmss"等同于"hms"。
支持的时间格式化字符串：
- YYYY/yyyy：完整年份。
- YY/yy：年份后两位。
- M：月份(若想使用01月则使用MM)。
- d：日期(若想使用01日则使用dd)。
- D：年中日(一年中的第几天)。
- H：24小时制。
- h：12小时制。
- m：分钟。
- s：秒。
- SSS：毫秒。
默认值： 'hms'| + +## 事件 + +除支持[通用事件](ts-universal-events-click.md)外，还支持以下事件： + +| 名称 | 功能描述 | +| -------------------------------------------- | ------------------------------------------------------------ | +| onDateChange(event: (value: number) => void) | 提供时间变化回调，该事件最小回调间隔为秒。
value: Unix Time Stamp，即自1970年1月1日（UTC）起经过的毫秒数。 | + + ## 示例 ```ts @Entry @Component struct Second { - @State accumulateTime: number = 0 - controller: TextClockController = new TextClockController() - + @State accumulateTime: number = 0; + // 导入对象 + controller: TextClockController = new TextClockController(); build() { Flex({ direction: FlexDirection.Column, alignItems: ItemAlign.Center, justifyContent: FlexAlign.Center }) { Text('Current milliseconds is ' + this.accumulateTime) @@ -77,18 +79,20 @@ struct Second { TextClock({ timeZoneOffset: -8, controller: this.controller }) .format('hms') .onDateChange((value: number) => { - this.accumulateTime = value + this.accumulateTime = value; }) .margin(20) .fontSize(30) Button("start TextClock") .margin({ bottom: 10 }) .onClick(() => { - this.controller.start() + // 启动文本时钟 + this.controller.start(); }) Button("stop TextClock") .onClick(() => { - this.controller.stop() + // 停止文本时钟 + this.controller.stop(); }) } .width('100%') @@ -96,5 +100,5 @@ struct Second { } } ``` - + diff --git a/zh-cn/application-dev/reference/arkui-ts/ts-basic-components-textpicker.md b/zh-cn/application-dev/reference/arkui-ts/ts-basic-components-textpicker.md index 0f20ae9ed4d76f5c16e5842f027d3dfe316a6360..feea880eb6a5486c8bbf2263ecfdc93bcb520ed6 100644 --- a/zh-cn/application-dev/reference/arkui-ts/ts-basic-components-textpicker.md +++ b/zh-cn/application-dev/reference/arkui-ts/ts-basic-components-textpicker.md @@ -22,9 +22,9 @@ TextPicker(options?: {range: string[]|Resource, selected?: number, value?: strin | 参数名 | 参数类型 | 必填 | 参数描述 | | -------- | -------- | -------- | -------- | -| range | string[] \| [Resource](ts-types.md#resource类型) | 是 | 选择器的数据选择范围。 | -| selected | number | 否 | 选中项在数组中的index值。
默认值：0 | -| value | string | 否 | 选中项的值，优先级低于selected。
默认值：第一个元素值 | +| range | string[] \| [Resource](ts-types.md#resource类型) | 是 | 选择器的数据选择列表。 | +| selected | number | 否 | 设置默认选中项在数组中的index值。
默认值：0 | +| value | string | 否 | 设置默认选中项的值，优先级低于selected。
默认值：第一个元素值 | ## 属性 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 f1bc8b9ee610cc20aec1a496a8a9a44a81514a4e..6db7e8dbfb219c2538725ccb8fd908f902ccc5b0 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 @@ -6,11 +6,6 @@ > 该组件从API Version 7开始支持。后续版本如有新增内容，则采用上角标单独标记该内容的起始版本。 -## 权限列表 - -无 - - ## 子组件 支持单个子组件。 @@ -42,15 +37,6 @@ | position | [BadgePosition](#badgeposition枚举说明) | 否 | BadgePosition.RightTop | 设置提示点显示位置。 | | style | [BadgeStyle](#badgestyle对象说明) | 是 | - | Badge组件可设置样式，支持设置文本颜色、尺寸、圆点颜色和尺寸。 | -## BadgeStyle对象说明 - -| 名称 | 类型 | 必填 | 默认值 | 描述 | -| -------- | -------- | -------- | -------- | -------- | -| color | [ResourceColor](ts-types.md) | 否 | Color.White | 文本颜色。 | -| fontSize | number \| string | 否 | 10 | 文本大小。 | -| badgeSize | number \| string | 是 | - | badge的大小。 | -| badgeColor | [ResourceColor](ts-types.md) | 否 | Color.Red | badge的颜色。 | - ## BadgePosition枚举说明 | 名称 | 描述 | @@ -59,6 +45,13 @@ | Right | 圆点显示在右侧纵向居中。 | | Left | 圆点显示在左侧纵向居中。 | +## BadgeStyle对象说明 +| 名称 | 类型 | 必填 | 默认值 | 描述 | + | -------- | -------- | -------- | -------- | -------- | +| color | [ResourceColor](ts-types.md#resourcecolor) | 否 | Color.White | 文本颜色。 | +| fontSize | number \| string | 否 | 10 | 文本大小。 | +| badgeSize | number \| string | 是 | - | badge的大小。 | +| badgeColor | [ResourceColor](ts-types.md#resourcecolor) | 否 | Color.Red | badge的颜色。 | ## 示例 @@ -67,44 +60,92 @@ @Entry @Component struct BadgeExample { - @State counts: number = 1 - @State message: string = 'new' + @State counts: number = 1; + @State message: string = 'new'; build() { - Flex({ justifyContent: FlexAlign.SpaceAround }) { - Badge({ - count: this.counts, - maxCount: 99, - style: { color: 0xFFFFFF, fontSize: 16, badgeSize: 20, badgeColor: Color.Red } - }) { - Button('message') - .onClick(() => { - this.counts++ - }) - .width(100).height(50).backgroundColor(0x317aff) - }.width(100).height(50) - - Badge({ - value: this.message, - style: { color: 0xFFFFFF, fontSize: 9, badgeSize: 20, badgeColor: Color.Blue } - }) { - Text('message') - .width(80).height(50).fontSize(16).lineHeight(37) - .borderRadius(10).textAlign(TextAlign.Center).backgroundColor(0xF3F4ED) - }.width(80).height(50) - - Badge({ - value: ' ', - position: BadgePosition.Right, - style: { badgeSize: 6, badgeColor: Color.Red } - }) { - Text('message') - .width(90).height(50).fontSize(16).lineHeight(37) - .borderRadius(10).textAlign(TextAlign.Center).backgroundColor(0xF3F4ED) - }.width(90).height(50) - }.width('100%').margin({ top: 5 }) + Column() { + Text('numberBadge').width('80%') + Row({ space: 10 }) { + // 数字上标，maxCount默认99,超过99展示99+ + Badge({ + count: this.counts, + maxCount: 99, + position: BadgePosition.RightTop, + style: { color: 0xFFFFFF, fontSize: 16, badgeSize: 20, badgeColor: Color.Red } + }) { + Button('message') + .onClick(() => { + this.counts++; + }) + .width(100).height(50).backgroundColor(0x317aff) + }.width(100).height(50) + + // 数字上标 + Badge({ + count: this.counts, + maxCount: 99, + position: BadgePosition.Left, + style: { color: 0xFFFFFF, fontSize: 16, badgeSize: 20, badgeColor: Color.Red } + }) { + Button('message') + .onClick(() => { + this.counts++; + }) + .width(100).height(50).backgroundColor(0x317aff) + }.width(100).height(50) + + + // 数字上标 + Badge({ + count: this.counts, + maxCount: 99, + position: BadgePosition.Right, + style: { color: 0xFFFFFF, fontSize: 16, badgeSize: 20, badgeColor: Color.Red } + }) { + Button('message') + .onClick(() => { + this.counts++; + }) + .width(100).height(50).backgroundColor(0x317aff) + }.width(100).height(50) + }.margin(10) + + Text('stringBadge').width('80%') + Row({ space: 30 }) { + Badge({ + value: this.message, + style: { color: 0xFFFFFF, fontSize: 9, badgeSize: 20, badgeColor: Color.Blue } + }) { + Text('message') + .width(80) + .height(50) + .fontSize(16) + .lineHeight(37) + .borderRadius(10) + .textAlign(TextAlign.Center) + .backgroundColor(0xF3F4ED) + }.width(80).height(50) + + // value为空，设置圆点标记 + Badge({ + value: '', + position: BadgePosition.Right, + style: { badgeSize: 6, badgeColor: Color.Red } + }) { + Text('message') + .width(90) + .height(50) + .fontSize(16) + .lineHeight(37) + .borderRadius(10) + .textAlign(TextAlign.Center) + .backgroundColor(0xF3F4ED) + }.width(90).height(50) + }.margin(10) + } } } ``` - + diff --git a/zh-cn/application-dev/reference/arkui-ts/ts-container-column.md b/zh-cn/application-dev/reference/arkui-ts/ts-container-column.md index 89c881153a6ecf8028938f2bd35e903d7c2a63dc..6b34c3cee54a5b1d6094505abe506a6b9e2bc00b 100644 --- a/zh-cn/application-dev/reference/arkui-ts/ts-container-column.md +++ b/zh-cn/application-dev/reference/arkui-ts/ts-container-column.md @@ -20,7 +20,7 @@ Column(value?: {space?: string | number}) | 参数名 | 参数类型 | 必填 | 参数描述 | | -------- | -------- | -------- | -------- | -| space | string \| number | 否 | 纵向布局元素间距。
默认值：0 | +| space | string \| number | 否 | 纵向布局元素垂直方向间距。
默认值：0 | ## 属性 @@ -40,38 +40,47 @@ Column(value?: {space?: string | number}) struct ColumnExample { build() { Column() { - Text('space').fontSize(9).fontColor(0xCCCCCC).width('90%') - Column({ space: 5 }) { - Column().width('100%').height(30).backgroundColor(0xAFEEEE) - Column().width('100%').height(30).backgroundColor(0x00FFFF) - }.width('90%').height(100).border({ width: 1 }) - - Text('alignItems(Start)').fontSize(9).fontColor(0xCCCCCC).width('90%') - Column() { - Column().width('50%').height(30).backgroundColor(0xAFEEEE) - Column().width('50%').height(30).backgroundColor(0x00FFFF) - }.alignItems(HorizontalAlign.Start).width('90%').border({ width: 1 }) - - Text('alignItems(End)').fontSize(9).fontColor(0xCCCCCC).width('90%') - Column() { - Column().width('50%').height(30).backgroundColor(0xAFEEEE) - Column().width('50%').height(30).backgroundColor(0x00FFFF) - }.alignItems(HorizontalAlign.End).width('90%').border({ width: 1 }) - - Text('justifyContent(Center)').fontSize(9).fontColor(0xCCCCCC).width('90%') - Column() { - Column().width('30%').height(30).backgroundColor(0xAFEEEE) - Column().width('30%').height(30).backgroundColor(0x00FFFF) - }.height('15%').border({ width: 1 }).justifyContent(FlexAlign.Center) - - Text('justifyContent(End)').fontSize(9).fontColor(0xCCCCCC).width('90%') - Column() { - Column().width('30%').height(30).backgroundColor(0xAFEEEE) - Column().width('30%').height(30).backgroundColor(0x00FFFF) - }.height('15%').border({ width: 1 }).justifyContent(FlexAlign.End) + // 设置子元素垂直方向间距为5 + Text('space').fontSize(9).fontColor(0xCCCCCC).width('90%') + Column({ space: 5 }) { + Column().width('100%').height(30).backgroundColor(0xAFEEEE) + Column().width('100%').height(30).backgroundColor(0x00FFFF) + }.width('90%').height(100).border({ width: 1 }) + + // 设置子元素水平方向对齐方式 + Text('alignItems(Start)').fontSize(9).fontColor(0xCCCCCC).width('90%') + Column() { + Column().width('50%').height(30).backgroundColor(0xAFEEEE) + Column().width('50%').height(30).backgroundColor(0x00FFFF) + }.alignItems(HorizontalAlign.Start).width('90%').border({ width: 1 }) + + Text('alignItems(End)').fontSize(9).fontColor(0xCCCCCC).width('90%') + Column() { + Column().width('50%').height(30).backgroundColor(0xAFEEEE) + Column().width('50%').height(30).backgroundColor(0x00FFFF) + }.alignItems(HorizontalAlign.End).width('90%').border({ width: 1 }) + + Text('alignItems(Center)').fontSize(9).fontColor(0xCCCCCC).width('90%') + Column() { + Column().width('50%').height(30).backgroundColor(0xAFEEEE) + Column().width('50%').height(30).backgroundColor(0x00FFFF) + }.alignItems(HorizontalAlign.Center).width('90%').border({ width: 1 }) + + // 设置子元素垂直方向的对齐方式 + Text('justifyContent(Center)').fontSize(9).fontColor(0xCCCCCC).width('90%') + Column() { + Column().width('90%').height(30).backgroundColor(0xAFEEEE) + Column().width('90%').height(30).backgroundColor(0x00FFFF) + }.height(100).border({ width: 1 }).justifyContent(FlexAlign.Center) + + Text('justifyContent(End)').fontSize(9).fontColor(0xCCCCCC).width('90%') + Column() { + Column().width('90%').height(30).backgroundColor(0xAFEEEE) + Column().width('90%').height(30).backgroundColor(0x00FFFF) + }.height(100).border({ width: 1 }).justifyContent(FlexAlign.End) }.width('100%').padding({ top: 5 }) } } ``` - + diff --git a/zh-cn/application-dev/reference/arkui-ts/ts-container-columnsplit.md b/zh-cn/application-dev/reference/arkui-ts/ts-container-columnsplit.md index 1173d54869b5dbf9b89a9cddc186565ed317b01b..dd96432e8b7f5368ad47c9fc9b1823a362a2b75c 100644 --- a/zh-cn/application-dev/reference/arkui-ts/ts-container-columnsplit.md +++ b/zh-cn/application-dev/reference/arkui-ts/ts-container-columnsplit.md @@ -1,15 +1,10 @@ # ColumnSplit -> **说明：** -> 该组件从API Version 7开始支持。后续版本如有新增内容，则采用上角标单独标记该内容的起始版本。 - - 将子组件纵向布局，并在每个子组件之间插入一根横向的分割线。 +> **说明：** +> 该组件从API Version 7开始支持。后续版本如有新增内容，则采用上角标单独标记该内容的起始版本。 -## 权限列表 - -无 ## 子组件 @@ -30,7 +25,8 @@ ColumnSplit() > **说明：** > 与RowSplit相同，ColumnSplit的分割线最小能拖动到刚好包含子组件。 - +> +> 在真机中查看拖动效果，预览器中不支持拖动。 ## 示例 @@ -49,7 +45,7 @@ struct ColumnSplitExample { Text('4').width('100%').height(50).backgroundColor(0xD2B48C).textAlign(TextAlign.Center) Text('5').width('100%').height(50).backgroundColor(0xF5DEB3).textAlign(TextAlign.Center) } - .resizeable(true) + .resizeable(true) // 可拖动 .width('90%').height('60%') }.width('100%') } diff --git a/zh-cn/application-dev/reference/arkui-ts/ts-container-counter.md b/zh-cn/application-dev/reference/arkui-ts/ts-container-counter.md index 6f94eece93ee10164499d401438263123f7ea06f..27fbd173f704132eb302d27c2191d258761e8533 100644 --- a/zh-cn/application-dev/reference/arkui-ts/ts-container-counter.md +++ b/zh-cn/application-dev/reference/arkui-ts/ts-container-counter.md @@ -1,15 +1,13 @@ # Counter +计数器组件，提供相应的增加或者减少的计数操作。 + > **说明：** > 该组件从API Version 7开始支持。后续版本如有新增内容，则采用上角标单独标记该内容的起始版本。 -计数器组件，提供相应的增加或者减少的计数操作。 - -## 权限列表 -无 ## 子组件 diff --git a/zh-cn/application-dev/reference/arkui-ts/ts-container-navigator.md b/zh-cn/application-dev/reference/arkui-ts/ts-container-navigator.md index 0faa4e3a99be989f94c2f0a84d25d6435735663a..6111364270b1da2008f3c2de6473a958f5b8d1b9 100644 --- a/zh-cn/application-dev/reference/arkui-ts/ts-container-navigator.md +++ b/zh-cn/application-dev/reference/arkui-ts/ts-container-navigator.md @@ -20,8 +20,8 @@ Navigator(value?: {target: string, type?: NavigationType}) | 参数名 | 参数类型 | 必填 | 参数描述 | | ------ | -------------- | ---- | ---------------------------------------------- | -| target | string | 是 | 指定跳转目标页面的路径。 | -| type | NavigationType | 否 | 指定路由方式。
默认值：NavigationType.Push | +| target | string | 是 | 指定跳转目标页面的路径。 | +| type | [NavigationType](#navigationtype枚举说明) | 否 | 指定路由方式。
默认值：NavigationType.Push | ## NavigationType枚举说明 @@ -37,9 +37,9 @@ Navigator(value?: {target: string, type?: NavigationType}) | 名称 | 参数 | 描述 | | ------ | ------- | ------------------------------------------------------------ | | active | boolean | 当前路由组件是否处于激活状态，处于激活状态时，会生效相应的路由操作。 | -| params | object | 跳转时要同时传递到目标页面的数据，可在目标页面使用router.getParams()获得。 | -| target | string | 设置跳转目标页面的路径。 | -| type | NavigationType | 设置路由方式。
默认值：NavigationType.Push | +| params | object | 跳转时要同时传递到目标页面的数据，可在目标页面使用[router.getParams()](../apis/js-api-router.md#routergetparams)获得。 | +| target | string | 设置跳转目标页面的路径。 目标页面需加入main_pages.json文件中。 | +| type | [NavigationType](#navigationtype枚举说明) | 设置路由方式。
默认值：NavigationType.Push | ## 示例 @@ -57,7 +57,7 @@ struct NavigatorExample { Navigator({ target: 'pages/container/navigator/Detail', type: NavigationType.Push }) { Text('Go to ' + this.Text['name'] + ' page') .width('100%').textAlign(TextAlign.Center) - }.params({ text: this.Text }) + }.params({ text: this.Text }) // 传参数到Detail页面 Navigator() { Text('Back to previous page').width('100%').textAlign(TextAlign.Center) @@ -72,11 +72,12 @@ struct NavigatorExample { ```ts // Detail.ets -import router from '@system.router' +import router from '@ohos.router' @Entry @Component struct DetailExample { + // 接收Navigator.ets的传参 @State text: any = router.getParams().text build() { diff --git a/zh-cn/application-dev/reference/arkui-ts/ts-container-panel.md b/zh-cn/application-dev/reference/arkui-ts/ts-container-panel.md index b59cf14a8370853483539d53b73e410c520b28ae..9c0dd645c5a809fa4007e964c2e72932bc35e727 100644 --- a/zh-cn/application-dev/reference/arkui-ts/ts-container-panel.md +++ b/zh-cn/application-dev/reference/arkui-ts/ts-container-panel.md @@ -27,8 +27,8 @@ Panel(show: boolean) | 名称 | 参数类型 | 描述 | | -------- | -------- | -------- | -| type | PanelType | 设置可滑动面板的类型。
默认值：PanelType.Foldable | -| mode | PanelMode | 设置可滑动面板的初始状态。 | +| type | [PanelType](#paneltype枚举说明) | 设置可滑动面板的类型。
默认值：PanelType.Foldable | +| mode | [PanelMode](#panelmode枚举说明) | 设置可滑动面板的初始状态。 | | dragBar | boolean | 设置是否存在dragbar，true表示存在，false表示不存在。
默认值：true | | fullHeight | string \| number | 指定PanelMode.Full状态下的高度。 | | halfHeight | string \| number | 指定PanelMode.Half状态下的高度，默认为屏幕尺寸的一半。 | diff --git a/zh-cn/application-dev/reference/arkui-ts/ts-container-refresh.md b/zh-cn/application-dev/reference/arkui-ts/ts-container-refresh.md index d1849a00c4bf3ced1ec7d953c60303b16ea5bd09..d03a2a041999f38c12d8dad5d2cd1f70e8656a7d 100644 --- a/zh-cn/application-dev/reference/arkui-ts/ts-container-refresh.md +++ b/zh-cn/application-dev/reference/arkui-ts/ts-container-refresh.md @@ -29,7 +29,7 @@ Refresh\(value: \{ refreshing: boolean, offset?: number | string , fr | 名称 | 描述 | | -------- | -------- | -| onStateChange(callback: (state: RefreshStatus) => void)| 当前刷新状态变更时，触发回调。
- state：刷新状态。 | +| onStateChange(callback: (state: [RefreshStatus](#refreshstatus枚举说明)) => void)| 当前刷新状态变更时，触发回调。
- state：刷新状态。 | | onRefreshing(callback: () => void)| 进入刷新状态时触发回调。 | ## RefreshStatus枚举说明 diff --git a/zh-cn/application-dev/reference/arkui-ts/ts-container-relativecontainer.md b/zh-cn/application-dev/reference/arkui-ts/ts-container-relativecontainer.md index 6b55112ff56f38e83372fb7f319f6e99eb440c2b..3d46fe5c2ead4d6359b428220f6f75928aa1fe8d 100644 --- a/zh-cn/application-dev/reference/arkui-ts/ts-container-relativecontainer.md +++ b/zh-cn/application-dev/reference/arkui-ts/ts-container-relativecontainer.md @@ -10,22 +10,18 @@ ## 规则说明 * 容器内子组件区分水平方向，垂直方向： - * 水平方向为left， middle， right，对应容器的HorizontalAlign.Start， HorizontalAlign.Center， HorizontalAlign.End - * 垂直方向为top， center， bottom，对应容器的VerticalAlign.Top， VerticalAlign.Center， VerticalAlign.Bottom + * 水平方向为left， middle， right，对应容器的HorizontalAlign.Start， HorizontalAlign.Center， HorizontalAlign.End。 + * 垂直方向为top， center， bottom，对应容器的VerticalAlign.Top， VerticalAlign.Center， VerticalAlign.Bottom。 * 子组件可以将容器或者其他子组件设为锚点： - * 参与相对布局的容器内组件必须设置id，容器id固定为__container__ - * 无id的子组件位置设置默认为容器左上方 - * 此子组件某一方向上的三个位置可以将容器或其他子组件的同方向三个位置为锚点，同方向上两个以上位置设置锚点以后会跳过第三个 - * 同方向上两个以上位置设置锚点时此子组件额外设置width，height不生效 - * 对齐后需要额外偏移可设置offset + * 参与相对布局的容器内组件必须设置id，容器RelativeContainer的id固定为'__container__'。 + * 无id的子组件位置设置默认为容器左上方。 + * 此子组件某一方向上的三个位置可以将容器或其他子组件的同方向三个位置为锚点，同方向上两个以上位置设置锚点以后会跳过第三个。 + * 同方向上两个以上位置设置锚点时此子组件额外设置width，height不生效。 + * 对齐后需要额外偏移可设置offset。 * 特殊情况 - * 互相依赖，环形依赖时容器内子组件全部不绘制 - * 同方向上两个以上位置设置锚点但锚点位置逆序时此子组件大小为0，即不绘制 - -## 权限列表 - -无 - + * 互相依赖，环形依赖时容器内子组件全部不绘制。 + * 同方向上两个以上位置设置锚点但锚点位置逆序时此子组件大小为0，即不绘制。 + ## 子组件 @@ -42,49 +38,68 @@ RelativeContainer() @Entry @Component struct Index { - build() { Row() { - Button("Extra button").width(100).height(50) - RelativeContainer() { - Button("Button 1").width(120).height(30) - .alignRules({ - middle: { anchor: "__container__", align: HorizontalAlign.Center }, - }) - .id("bt1").borderWidth(1).borderColor(Color.Black) - Text("This is text 2").fontSize(20).padding(10) - .alignRules({ - bottom: { anchor: "__container__", align: VerticalAlign.Bottom }, - top: { anchor: "bt1", align: VerticalAlign.Bottom }, - right:{ anchor: "bt1", align: HorizontalAlign.Center } - }).id("tx2").borderWidth(1).borderColor(Color.Black).height(30) - - LoadingProgress().color(Color.Blue) - .alignRules({ - left: { anchor: "bt1", align: HorizontalAlign.End }, - top: { anchor: "tx2", align: VerticalAlign.Center }, - bottom: { anchor: "__container__", align: VerticalAlign.Bottom } - }).id("lp3").borderWidth(1).borderColor(Color.Black) - .height(30).width(30) - - Gauge({ value: 50, min: 0, max: 100 }) - .startAngle(210).endAngle(150) - .colors([[0x317AF7, 1], [0x5BA854, 1], [0xE08C3A, 1], [0x9C554B, 1], [0xD94838, 1]]) - .strokeWidth(20) - .width(50).height(50) - .alignRules({ - left: { anchor: "tx2", align: HorizontalAlign.End }, - right:{ anchor: "__container__", align: HorizontalAlign.End }, - top: { anchor: "__container__", align: VerticalAlign.Top }, - bottom: { anchor: "lp3", align: VerticalAlign.Top } - }).id("g4").borderWidth(1).borderColor(Color.Black) - - } - .width(200).height(200) - .backgroundColor(Color.Orange) - - } - .height('100%') + Button("Extra button").width(100).height(50) + + // 外层容器的id默认为为'__container__' + RelativeContainer() { + Button("Button 1") + .width(120) + .height(30) + .alignRules({ + middle: { anchor: "__container__", align: HorizontalAlign.Center }, // 水平方向上，组件中部与容器中间对齐，即组件在容器中水平居中 + }) + .id("bt1") // id设置为bt1 + .borderWidth(1) + .borderColor(Color.Black) + + Text("This is text 2") + .fontSize(20) + .padding(10) + .borderWidth(1) + .borderColor(Color.Black) + .height(30) + .id("tx2") // id设置为tx2 + .alignRules({ + bottom: { anchor: "__container__", align: VerticalAlign.Bottom }, // 组件下边与容器下边对齐 + top: { anchor: "bt1", align: VerticalAlign.Bottom }, // 组件上边与button1底部对齐 + right: { anchor: "bt1", align: HorizontalAlign.Center } // 组件右侧与button1中间点对齐 + }) + + LoadingProgress() + .color(Color.Blue) + .borderWidth(1) + .borderColor(Color.Black) + .height(30) + .width(30) + .id("lp3") // id设置为lp3 + .alignRules({ + left: { anchor: "bt1", align: HorizontalAlign.End }, // 组件左边对齐容器bt1的右边 + top: { anchor: "tx2", align: VerticalAlign.Center }, // 组件上边对齐容器tx2的中间 + bottom: { anchor: "__container__", align: VerticalAlign.Bottom } // 组件下边对齐最外层容器的底边 + }) + + Gauge({ value: 50, min: 0, max: 100 }) + .startAngle(210) + .endAngle(150) + .colors([[0x317AF7, 1], [0x5BA854, 1], [0xE08C3A, 1], [0x9C554B, 1], [0xD94838, 1]]) + .strokeWidth(20) + .width(50) + .height(50) + .alignRules({ + left: { anchor: "tx2", align: HorizontalAlign.End }, // 组件左边对齐容器tx2的右边 + right: { anchor: "__container__", align: HorizontalAlign.End }, // 组件右边对齐最外层容器的右边 + top: { anchor: "__container__", align: VerticalAlign.Top }, // 组件上边对齐最外层容器的上边 + bottom: { anchor: "lp3", align: VerticalAlign.Top } // 组件下边对齐容器lp3的上边 + }) + .id("g4") + .borderWidth(1) + .borderColor(Color.Black) + } + .width(200).height(200) + .backgroundColor(Color.Orange) + }.height('100%') } } ``` diff --git a/zh-cn/application-dev/reference/arkui-ts/ts-container-row.md b/zh-cn/application-dev/reference/arkui-ts/ts-container-row.md index 54c51fe6288d6b11bc989f0a1d5e0af02c3ec25f..ba536c338ffb88ce73f1a0619d722f8b1c2743c0 100644 --- a/zh-cn/application-dev/reference/arkui-ts/ts-container-row.md +++ b/zh-cn/application-dev/reference/arkui-ts/ts-container-row.md @@ -40,38 +40,41 @@ Row(value?:{space?: number | string }) struct RowExample { build() { Column({ space: 5 }) { + // 设置子组件水平方向的间距为5 Text('space').fontSize(9).fontColor(0xCCCCCC).width('90%') - Row({ space: 5 }) { - Row().width('30%').height(50).backgroundColor(0xAFEEEE) - Row().width('30%').height(50).backgroundColor(0x00FFFF) - }.width('90%').height(107).border({ width: 1 }) - - Text('alignItems(Top)').fontSize(9).fontColor(0xCCCCCC).width('90%') - Row() { - Row().width('30%').height(50).backgroundColor(0xAFEEEE) - Row().width('30%').height(50).backgroundColor(0x00FFFF) - }.alignItems(VerticalAlign.Top).height('15%').border({ width: 1 }) - - Text('alignItems(Center)').fontSize(9).fontColor(0xCCCCCC).width('90%') - Row() { - Row().width('30%').height(50).backgroundColor(0xAFEEEE) - Row().width('30%').height(50).backgroundColor(0x00FFFF) - }.alignItems(VerticalAlign.Center).height('15%').border({ width: 1 }) - - Text('justifyContent(End)').fontSize(9).fontColor(0xCCCCCC).width('90%') - Row() { - Row().width('30%').height(50).backgroundColor(0xAFEEEE) - Row().width('30%').height(50).backgroundColor(0x00FFFF) - }.width('90%').border({ width: 1 }).justifyContent(FlexAlign.End) - - Text('justifyContent(Center)').fontSize(9).fontColor(0xCCCCCC).width('90%') - Row() { - Row().width('30%').height(50).backgroundColor(0xAFEEEE) - Row().width('30%').height(50).backgroundColor(0x00FFFF) - }.width('90%').border({ width: 1 }).justifyContent(FlexAlign.Center) + Row({ space: 5 }) { + Row().width('30%').height(50).backgroundColor(0xAFEEEE) + Row().width('30%').height(50).backgroundColor(0x00FFFF) + }.width('90%').height(107).border({ width: 1 }) + + // 设置子元素垂直方向对齐方式 + Text('alignItems(Bottom)').fontSize(9).fontColor(0xCCCCCC).width('90%') + Row() { + Row().width('30%').height(50).backgroundColor(0xAFEEEE) + Row().width('30%').height(50).backgroundColor(0x00FFFF) + }.width('90%').alignItems(VerticalAlign.Bottom).height('15%').border({ width: 1 }) + + Text('alignItems(Center)').fontSize(9).fontColor(0xCCCCCC).width('90%') + Row() { + Row().width('30%').height(50).backgroundColor(0xAFEEEE) + Row().width('30%').height(50).backgroundColor(0x00FFFF) + }.width('90%').alignItems(VerticalAlign.Center).height('15%').border({ width: 1 }) + + // 设置子元素水平方向对齐方式 + Text('justifyContent(End)').fontSize(9).fontColor(0xCCCCCC).width('90%') + Row() { + Row().width('30%').height(50).backgroundColor(0xAFEEEE) + Row().width('30%').height(50).backgroundColor(0x00FFFF) + }.width('90%').border({ width: 1 }).justifyContent(FlexAlign.End) + + Text('justifyContent(Center)').fontSize(9).fontColor(0xCCCCCC).width('90%') + Row() { + Row().width('30%').height(50).backgroundColor(0xAFEEEE) + Row().width('30%').height(50).backgroundColor(0x00FFFF) + }.width('90%').border({ width: 1 }).justifyContent(FlexAlign.Center) }.width('100%') } } ``` - + diff --git a/zh-cn/application-dev/reference/arkui-ts/ts-container-rowsplit.md b/zh-cn/application-dev/reference/arkui-ts/ts-container-rowsplit.md index 0cec1a56838513830296eb80e4860ffde3ddb795..ae460606c107c01221789228b458b7160e66d93a 100644 --- a/zh-cn/application-dev/reference/arkui-ts/ts-container-rowsplit.md +++ b/zh-cn/application-dev/reference/arkui-ts/ts-container-rowsplit.md @@ -7,10 +7,6 @@ 将子组件横向布局，并在每个子组件之间插入一根纵向的分割线。 -## 权限列表 - -无 - ## 子组件 @@ -30,6 +26,8 @@ RowSplit() > **说明：** > RowSplit的分割线最小能拖动到刚好包含子组件。 +> +> 在真机中查看拖动效果，预览器中不支持拖动。 ## 示例 diff --git a/zh-cn/application-dev/reference/arkui-ts/ts-container-scroll.md b/zh-cn/application-dev/reference/arkui-ts/ts-container-scroll.md index 89bcf8f669386876ca0da1923e56007fcd27e1b3..e0a02896e93d84a2134a740731beae086e0f71d3 100644 --- a/zh-cn/application-dev/reference/arkui-ts/ts-container-scroll.md +++ b/zh-cn/application-dev/reference/arkui-ts/ts-container-scroll.md @@ -24,11 +24,11 @@ Scroll(scroller?: Scroller) | 名称 | 参数类型 | 描述 | | -------------- | ---------------------------------------- | --------- | -| scrollable | ScrollDirection | 设置滚动方向。
默认值：ScrollDirection.Vertical | +| scrollable | [ScrollDirection](#scrolldirection枚举说明) | 设置滚动方向。
默认值：ScrollDirection.Vertical | | scrollBar | [BarState](ts-appendix-enums.md#barstate) | 设置滚动条状态。
默认值：BarState.Off | -| scrollBarColor | string \| number \| Color | 设置滚动条的颜色。 | +| scrollBarColor | string \| number \| [Color](ts-appendix-enums.md#color) | 设置滚动条的颜色。 | | scrollBarWidth | string \| number | 设置滚动条的宽度。 | -| edgeEffect | [EdgeEffect](ts-appendix-enums.md#edgeeffect) | 设置滑动效果，目前支持的滑动效果参见EdgeEffect的枚举说明。
默认值：EdgeEffect.Spring | +| edgeEffect | [EdgeEffect](ts-appendix-enums.md#edgeeffect) | 设置滑动效果，目前支持的滑动效果参见EdgeEffect的枚举说明。
默认值：EdgeEffect.None | ## ScrollDirection枚举说明 | 名称 | 描述 | @@ -93,8 +93,6 @@ scrollEdge(value: Edge): void | value | [Edge](ts-appendix-enums.md#edge) | 是 | 滚动到的边缘位置。 | - - ### scrollPage scrollPage(value: { next: boolean, direction?: Axis }): void @@ -163,14 +161,15 @@ scrollBy(dx: Length, dy: Length): void ## 示例 +### 示例1 ```ts // xxx.ets @Entry @Component struct ScrollExample { - scroller: Scroller = new Scroller() - private arr: number[] = [0, 1, 2, 3, 4, 5, 6, 7, 8, 9] + scroller: Scroller = new Scroller(); + private arr: number[] = [0, 1, 2, 3, 4, 5, 6, 7, 8, 9]; build() { Stack({ alignContent: Alignment.TopStart }) { @@ -188,38 +187,39 @@ struct ScrollExample { }, item => item) }.width('100%') } - .scrollable(ScrollDirection.Vertical) - .scrollBar(BarState.On) - .scrollBarColor(Color.Gray) - .scrollBarWidth(30) + .scrollable(ScrollDirection.Vertical) // 滚动方向纵向 + .scrollBar(BarState.On) // 滚动条常驻显示 + .scrollBarColor(Color.Gray) // 滚动条颜色 + .scrollBarWidth(30) // 滚动条宽度 + .edgeEffect(EdgeEffect.None) .onScroll((xOffset: number, yOffset: number) => { - console.info(xOffset + ' ' + yOffset) + console.info(xOffset + ' ' + yOffset); }) .onScrollEdge((side: Edge) => { - console.info('To the edge') + console.info('To the edge'); }) .onScrollEnd(() => { - console.info('Scroll Stop') + console.info('Scroll Stop'); }) - + Button('scroll 150') .onClick(() => { // 点击后下滑指定距离150.0vp - this.scroller.scrollBy(0,150) + this.scroller.scrollBy(0,150); }) .margin({ top: 10, left: 20 }) Button('scroll 100') .onClick(() => { // 点击后滑动到指定位置，即下滑100.0vp的距离 - this.scroller.scrollTo({ xOffset: 0, yOffset: this.scroller.currentOffset().yOffset + 100 }) + this.scroller.scrollTo({ xOffset: 0, yOffset: this.scroller.currentOffset().yOffset + 100 }); }) .margin({ top: 60, left: 20 }) Button('back top') .onClick(() => { // 点击后回到顶部 - this.scroller.scrollEdge(Edge.Top) + this.scroller.scrollEdge(Edge.Top); }) .margin({ top: 110, left: 20 }) Button('next page') .onClick(() => { // 点击后滑到下一页 - this.scroller.scrollPage({ next: true }) + this.scroller.scrollPage({ next: true }); }) .margin({ top: 170, left: 20 }) }.width('100%').height('100%').backgroundColor(0xDCDCDC) @@ -229,14 +229,14 @@ struct ScrollExample {  - +### 示例2 ```ts @Entry @Component struct NestedScroll { - @State listPosition: number = 0 // 0代表滚动到List顶部，1代表中间值，2代表滚动到List底部。 - private arr: number[] = [1, 2, 3, 4, 5, 6, 7, 8, 9, 10] - private scroller: Scroller = new Scroller() + @State listPosition: number = 0; // 0代表滚动到List顶部，1代表中间值，2代表滚动到List底部。 + private arr: number[] = [1, 2, 3, 4, 5, 6, 7, 8, 9, 10]; + private scroller: Scroller = new Scroller(); build() { Flex() { @@ -257,18 +257,18 @@ struct NestedScroll { } .width("100%").height("50%").edgeEffect(EdgeEffect.None) .onReachStart(() => { - this.listPosition = 0 + this.listPosition = 0; }) .onReachEnd(() => { - this.listPosition = 2 + this.listPosition = 2; }) .onScrollBegin((dx: number, dy: number) => { if ((this.listPosition == 0 && dy >= 0) || (this.listPosition == 2 && dy <= 0)) { - this.scroller.scrollBy(0, -dy) - return { dxRemain: dx, dyRemain: 0 } + this.scroller.scrollBy(0, -dy); + return { dxRemain: dx, dyRemain: 0 }; } this.listPosition = 1; - return { dxRemain: dx, dyRemain: dy } + return { dxRemain: dx, dyRemain: dy }; }) Text("Scroll Area") 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..a81f4e0390a61127903e9ca41168c6b2e8786c1a 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  + +**图4** 单独设置gridSpan和gridOffset在特定屏幕大小下的效果与useSizeType效果一致 + + \ 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..3fc5257703195527dba8b5c37e8497b69fd9bb54 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,63 +13,113 @@ | ----------------------------- | ------------------------------------------------------------ | ------ | ------------------------------------------------------------ | | 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' | 色相旋转效果，输入参数为旋转角度。 | ## 示例 -示例效果请以真机运行为准，当前IDE预览器不支持。 - +### 示例1 +模糊属性的用法，blur内容模糊，backdropBlur背景模糊。 ```ts // xxx.ets @Entry @Component -struct ImageEffectsExample { - +struct BlurEffectsExample { 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 }) + } +} +``` + + +### 示例2 +设置图片的效果，包括阴影，灰度，高光，饱和度，对比度，图像反转，叠色，色相旋转等。 +```ts +// xxx.ets +@Entry +@Component +struct ImageEffectsExample { + 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.3) + Image($r('app.media.image')).width('90%').height(40).grayscale(0.8) + // 高光效果，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.2) + // 饱和度，原图为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.7) + // 对比度，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.8) + // 图像反转比例 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%') - 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 }) } } ``` -
\ No newline at end of file
+
+
diff --git a/zh-cn/application-dev/reference/arkui-ts/ts-universal-attributes-layout-constraints.md b/zh-cn/application-dev/reference/arkui-ts/ts-universal-attributes-layout-constraints.md
index 3290c21537a94041090bc9f7e2152c4bc5da28cc..0fb3e705c61d405b77d32d30d6ec48ac67bc1471 100644
--- a/zh-cn/application-dev/reference/arkui-ts/ts-universal-attributes-layout-constraints.md
+++ b/zh-cn/application-dev/reference/arkui-ts/ts-universal-attributes-layout-constraints.md
@@ -11,7 +11,7 @@
| 名称 | 参数说明 | 描述 |
| --------------- | ------ | ---------------------------------------- |
-| aspectRatio | number | 指定当前组件的宽高比。 |
+| aspectRatio | number | 指定当前组件的宽高比，aspectRatio = width/height。 |
| displayPriority | number | 设置当前组件在布局容器中显示的优先级，当父容器空间不足时，低优先级的组件会被隐藏。**说明：**
仅在Row/Column/Flex(单行)容器组件中生效。 | @@ -22,29 +22,32 @@ @Entry @Component struct AspectRatioExample { - private children : string[] = ['1', '2', '3', '4', '5', '6'] + private children: string[] = ['1', '2', '3', '4', '5', '6']; build() { - Column({space: 20}) { + Column({ space: 20 }) { Text('using container: row').fontSize(14).fontColor(0xCCCCCC).width('100%') - Row({space: 10}) { + Row({ space: 10 }) { ForEach(this.children, (item) => { + // 组件宽度 = 组件高度*1.5 = 90 Text(item) .backgroundColor(0xbbb2cb) .fontSize(20) .aspectRatio(1.5) .height(60) + // 组件高度 = 组件宽度/1.5 = 60/1.5 = 40 Text(item) .backgroundColor(0xbbb2cb) .fontSize(20) .aspectRatio(1.5) .width(60) - }, item=>item) + }, item => item) } - .size({width: "100%", height: 100}) + .size({ width: "100%", height: 100 }) .backgroundColor(0xd2cab3) .clip(true) + // grid子元素width/height=3/2 Text('using container: grid').fontSize(14).fontColor(0xCCCCCC).width('100%') Grid() { ForEach(this.children, (item) => { @@ -54,12 +57,12 @@ struct AspectRatioExample { .fontSize(40) .aspectRatio(1.5) } - }, item=>item) + }, item => item) } .columnsTemplate('1fr 1fr 1fr') .columnsGap(10) .rowsGap(10) - .size({width: "100%", height: 165}) + .size({ width: "100%", height: 165 }) .backgroundColor(0xd2cab3) }.padding(10) } @@ -74,40 +77,44 @@ struct AspectRatioExample { ```ts class ContainerInfo { - label : string = '' - size : string = '' + label: string = ''; + size: string = ''; } class ChildInfo { - text : string = '' - priority : number = 0 + text: string = ''; + priority: number = 0; } @Entry @Component struct DisplayPriorityExample { - private container : ContainerInfo[] = [ - {label: 'Big container', size: '90%'}, - {label: 'Middle container', size: '50%'}, - {label: 'Small container', size: '30%'} + // 显示容器大小 + private container: ContainerInfo[] = [ + { label: 'Big container', size: '90%' }, + { label: 'Middle container', size: '50%' }, + { label: 'Small container', size: '30%' } ] - private children : ChildInfo[] = [ - {text: '1\n(priority:2)', priority: 2}, - {text: '2\n(priority:1)', priority: 1}, - {text: '3\n(priority:3)', priority: 3}, - {text: '4\n(priority:1)', priority: 1}, - {text: '5\n(priority:2)', priority: 2} + private children: ChildInfo[] = [ + { text: '1\n(priority:2)', priority: 2 }, + { text: '2\n(priority:1)', priority: 1 }, + { text: '3\n(priority:3)', priority: 3 }, + { text: '4\n(priority:1)', priority: 1 }, + { text: '5\n(priority:2)', priority: 2 } ] - @State currentIndex : number = 0 + @State currentIndex: number = 0; build() { - Column({space: 10}) { + Column({ space: 10 }) { + // 切换父级容器大小 Button(this.container[this.currentIndex].label).backgroundColor(0x317aff) - .onClick((event: ClickEvent) => { - this.currentIndex = (this.currentIndex + 1) % this.container.length + .onClick(() => { + this.currentIndex = (this.currentIndex + 1) % this.container.length; }) - Flex({justifyContent: FlexAlign.SpaceBetween}) { - ForEach(this.children, (item)=>{ + // 通过变量设置Flex父容器宽度 + Flex({ justifyContent: FlexAlign.SpaceBetween }) { + ForEach(this.children, (item) => { + // 使用displayPriority给子组件绑定显示优先级 Text(item.text) .width(120) .height(60) @@ -115,11 +122,11 @@ struct DisplayPriorityExample { .textAlign(TextAlign.Center) .backgroundColor(0xbbb2cb) .displayPriority(item.priority) - }, item=>item.text) + }, item => item.text) } .width(this.container[this.currentIndex].size) .backgroundColor(0xd2cab3) - }.width("100%").margin({top:50}) + }.width("100%").margin({ top: 50 }) } } diff --git a/zh-cn/application-dev/reference/arkui-ts/ts-universal-attributes-location.md b/zh-cn/application-dev/reference/arkui-ts/ts-universal-attributes-location.md index 3ed37a6353f0f36a24575241e23b3e62ad4a7b8c..912a81a63445d0c95963190a7fc4d894346ed19c 100644 --- a/zh-cn/application-dev/reference/arkui-ts/ts-universal-attributes-location.md +++ b/zh-cn/application-dev/reference/arkui-ts/ts-universal-attributes-location.md @@ -12,25 +12,25 @@ | 名称 | 参数类型 | 描述 | | -------- | -------- | -------- | -| align | [Alignment](ts-appendix-enums.md#alignment) | 设置元素内容的对齐方式，只有当设置的width和height大小超过元素本身内容大小时生效。
默认值：Alignment.Center | +| align | [Alignment](ts-appendix-enums.md#alignment) | 设置元素内容的对齐方式，当元素的width和height大小大于元素本身内容大小时生效。
默认值：Alignment.Center | | direction | [Direction](ts-appendix-enums.md#direction) | 设置元素水平方向的布局。
默认值：Direction.Auto | -| position | [Position](ts-types.md#position8) | 使用绝对定位，设置元素锚点相对于父容器顶部起点偏移位置。在布局容器中，设置该属性不影响父容器布局，仅在绘制时进行位置调整。 | -| markAnchor | [Position](ts-types.md#position8) | 设置元素在位置定位时的锚点，以元素顶部起点作为基准点进行偏移。
默认值：
{
x: 0,
y: 1
} | -| offset | [Position](ts-types.md#position8) | 相对布局完成位置坐标偏移量，设置该属性，不影响父容器布局，仅在绘制时进行位置调整。
默认值：
{
x: 0,
y: 1
} | +| position | [Position](ts-types.md#position8) | 绝对定位，设置元素左上角相对于父容器左上角偏移位置。在布局容器中，设置该属性不影响父容器布局，仅在绘制时进行位置调整。 | +| markAnchor | [Position](ts-types.md#position8) | 设置元素在位置定位时的锚点，以元素左上角作为基准点进行偏移。通常配合position和offset属性使用，单独使用时，效果类似offset
默认值：
{
x: 0,
y: 0
} | +| offset | [Position](ts-types.md#position8) | 相对定位，设置元素相对于自身的偏移量。设置该属性，不影响父容器布局，仅在绘制时进行位置调整。
默认值：
{
x: 0,
y: 0
} | | alignRules9+ | {
left?: { anchor: string, align: [HorizontalAlign](ts-appendix-enums.md#horizontalalign) };
right?: { anchor: string, align: [HorizontalAlign](ts-appendix-enums.md#horizontalalign) };
middle?: { anchor: string, align: [HorizontalAlign](ts-appendix-enums.md#horizontalalign) };
top?: { anchor: string, align: [VerticalAlign](ts-appendix-enums.md#verticalalign) };
bottom?: { anchor: string, align: [VerticalAlign](ts-appendix-enums.md#verticalalign) };
center?: { anchor: string, align: [VerticalAlign](ts-appendix-enums.md#verticalalign) }
} | 指定相对容器的对齐规则。
- left：设置左对齐参数。
- right：设置右对齐参数。
- middle：设置中间对齐的参数。
- top：设置顶部对齐的参数。
- bottom：设置底部对齐的参数。
- center：设置中心对齐的参数。
**说明：**
- anchor：设置作为锚点的组件的id值。
- align：设置相对于锚点组件的对齐方式。 | ## 示例 - +### 示例1 ```ts // xxx.ets @Entry @Component -struct PositionExample { - +struct PositionExample1 { build() { Column() { - Column({space: 10}) { + Column({ space: 10 }) { + // 元素内容<元素宽高，设置内容在与元素内的对齐方式 Text('align').fontSize(9).fontColor(0xCCCCCC).width('90%') Text('top start') .align(Alignment.TopStart) @@ -39,6 +39,14 @@ struct PositionExample { .fontSize(16) .backgroundColor(0xFFE4C4) + Text('Bottom end') + .align(Alignment.BottomEnd) + .height(50) + .width('90%') + .fontSize(16) + .backgroundColor(0xFFE4C4) + + // 父容器设置direction为Direction.Auto|Ltr|不设置，子元素从左到右排列 Text('direction').fontSize(9).fontColor(0xCCCCCC).width('90%') Row() { Text('1').height(50).width('25%').fontSize(16).backgroundColor(0xF5DEB3) @@ -47,6 +55,15 @@ struct PositionExample { Text('4').height(50).width('25%').fontSize(16).backgroundColor(0xD2B48C) } .width('90%') + .direction(Direction.Auto) + // 父容器设置direction为Direction.Rtl，子元素从右到左排列 + Row() { + Text('1').height(50).width('25%').fontSize(16).backgroundColor(0xF5DEB3) + Text('2').height(50).width('25%').fontSize(16).backgroundColor(0xD2B48C) + Text('3').height(50).width('25%').fontSize(16).backgroundColor(0xF5DEB3) + Text('4').height(50).width('25%').fontSize(16).backgroundColor(0xD2B48C) + } + .width('90%') .direction(Direction.Rtl) } } @@ -55,54 +72,75 @@ struct PositionExample { } ``` - + +### 示例2 ```ts // xxx.ets @Entry @Component struct PositionExample2 { - build() { Column({ space: 20 }) { + // 设置子组件左上角相对于父组件左上角的偏移位置 Text('position').fontSize(12).fontColor(0xCCCCCC).width('90%') - Row({ space: 20 }) { - Text('1').size({ width: '45%', height: '50' }).backgroundColor(0xdeb887).border({ width: 1 }) .fontSize(16) - Text('2 position(25, 15)') - .size({ width: '60%', height: '30' }).backgroundColor(0xbbb2cb).border({ width: 1 }) - .fontSize(16).align(Alignment.Start) - .position({ x: 25, y: 15 }) + Row() { + Text('1').size({ width: '30%', height: '50' }).backgroundColor(0xdeb887).border({ width: 1 }).fontSize(16) + Text('2 position(30, 10)') + .size({ width: '60%', height: '30' }) + .backgroundColor(0xbbb2cb) + .border({ width: 1 }) + .fontSize(16) + .align(Alignment.Start) + .position({ x: 30, y: 10 }) Text('3').size({ width: '45%', height: '50' }).backgroundColor(0xdeb887).border({ width: 1 }).fontSize(16) Text('4 position(50%, 70%)') - .size({ width: '50%', height: '50' }).backgroundColor(0xbbb2cb).border({ width: 1 }).fontSize(16) + .size({ width: '50%', height: '50' }) + .backgroundColor(0xbbb2cb) + .border({ width: 1 }) + .fontSize(16) .position({ x: '50%', y: '70%' }) }.width('90%').height(100).border({ width: 1, style: BorderStyle.Dashed }) + // 相对于起点偏移，其中x为最终定位点距离起点水平方向间距，x>0往左，反之向右。 + // y为最终定位点距离起点垂直方向间距，y>0向上，反之向下 Text('markAnchor').fontSize(12).fontColor(0xCCCCCC).width('90%') Stack({ alignContent: Alignment.TopStart }) { Row() .size({ width: '100', height: '100' }) .backgroundColor(0xdeb887) - Image($r('app.media.ic_health_heart')) + Text('text') .size({ width: 25, height: 25 }) + .backgroundColor(Color.Green) .markAnchor({ x: 25, y: 25 }) - Image($r('app.media.ic_health_heart')) + Text('text') .size({ width: 25, height: 25 }) - .markAnchor({ x: 25, y: 25 }) - .position({ x: '100%', y: '100%' }) + .backgroundColor(Color.Green) + .markAnchor({ x: -100, y: -25 }) + Text('text') + .size({ width: 25, height: 25 }) + .backgroundColor(Color.Green) + .markAnchor({ x: 25, y: -25 }) }.margin({ top: 25 }).border({ width: 1, style: BorderStyle.Dashed }) + // 相对定位，x>0向右偏移，反之向左，y>0向下偏移，反之向上 Text('offset').fontSize(12).fontColor(0xCCCCCC).width('90%') Row() { Text('1').size({ width: '15%', height: '50' }).backgroundColor(0xdeb887).border({ width: 1 }).fontSize(16) - Text('2\noffset(15, 15)') - .size({ width: 120, height: '50' }).backgroundColor(0xbbb2cb).border({ width: 1 }) - .fontSize(16).align(Alignment.Start) - .offset({ x: 15, y: 15 }) + Text('2 offset(15, 30)') + .size({ width: 120, height: '50' }) + .backgroundColor(0xbbb2cb) + .border({ width: 1 }) + .fontSize(16) + .align(Alignment.Start) + .offset({ x: 15, y: 30 }) Text('3').size({ width: '15%', height: '50' }).backgroundColor(0xdeb887).border({ width: 1 }).fontSize(16) - Text('4\noffset(-10%, 20%)') - .size({ width: 150, height: '50' }) .backgroundColor(0xbbb2cb).border({ width: 1 }).fontSize(16) - .offset({ x: '-10%', y: '20%' }) + Text('4 offset(-10%, 20%)') + .size({ width: 100, height: '50' }) + .backgroundColor(0xbbb2cb) + .border({ width: 1 }) + .fontSize(16) + .offset({ x: '-5%', y: '20%' }) }.width('90%').height(100).border({ width: 1, style: BorderStyle.Dashed }) } .width('100%').margin({ top: 25 }) @@ -110,4 +148,4 @@ struct PositionExample2 { } ``` - + 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 | Array
responseType: [ResponseType](ts-appendix-enums.md#responsetype8) | 给组件绑定菜单，触发方式为长按或者右键点击，弹出菜单项需要自定义。 | ## MenuItem diff --git a/zh-cn/application-dev/reference/arkui-ts/ts-universal-attributes-opacity.md b/zh-cn/application-dev/reference/arkui-ts/ts-universal-attributes-opacity.md index baf8eb30f1f7b9208f6b31b090f9bfe4646bca68..1883fcc9579703540203e7034d6d8005fe9df258 100644 --- a/zh-cn/application-dev/reference/arkui-ts/ts-universal-attributes-opacity.md +++ b/zh-cn/application-dev/reference/arkui-ts/ts-universal-attributes-opacity.md @@ -10,9 +10,9 @@ ## 属性 -| 名称 | 参数类型 | 默认值 | 描述 | -| -------- | -------- | -------- | -------- | -| opacity | number \| [Resource](../../ui/ts-types.md#resource类型) | 1 | 元素的不透明度，取值范围为0到1，1表示为不透明，0表示为完全透明。
**说明：**
子组件可以继承父组件的此属性。。 | +| 名称 | 参数类型 | 描述 | +| ------- | ---------------------------------------- | ---------------------------------------- | +| opacity | number \| [Resource](ts-types.md#resource) | 元素的不透明度，取值范围为0到1，1表示不透明，0表示完全透明, 达到隐藏组件效果，但是在布局中占位。
**说明：**
子组件可以继承父组件的此属性。默认值：1 | ## 示例 @@ -30,6 +30,10 @@ struct OpacityExample { Text().width('90%').height(50).opacity(0.7).backgroundColor(0xAFEEEE) Text('opacity(0.4)').fontSize(9).width('90%').fontColor(0xCCCCCC) Text().width('90%').height(50).opacity(0.4).backgroundColor(0xAFEEEE) + Text('opacity(0.1)').fontSize(9).width('90%').fontColor(0xCCCCCC) + Text().width('90%').height(50).opacity(0.1).backgroundColor(0xAFEEEE) + Text('opacity(0)').fontSize(9).width('90%').fontColor(0xCCCCCC) + Text().width('90%').height(50).opacity(0).backgroundColor(0xAFEEEE) } .width('100%') .padding({ top: 5 }) @@ -37,4 +41,4 @@ struct OpacityExample { } ``` - + diff --git a/zh-cn/application-dev/reference/arkui-ts/ts-universal-attributes-overlay.md b/zh-cn/application-dev/reference/arkui-ts/ts-universal-attributes-overlay.md index 4a84e85fa5e5c21fc36f8362b94a69bb967fc72b..14fdb7f1a435f40f82029ed7f207d6ba4457de00 100644 --- a/zh-cn/application-dev/reference/arkui-ts/ts-universal-attributes-overlay.md +++ b/zh-cn/application-dev/reference/arkui-ts/ts-universal-attributes-overlay.md @@ -8,10 +8,9 @@ ## 属性 -| 名称 | 参数类型 | 描述 | -| ------- | ----------------------------- | ------------------------- | -| overlay | value: string,
options?: {
align?: [Alignment](ts-appendix-enums.md#alignment),
offset?: {
x?: number,
y?: number
}
} | 在当前组件上，增加遮罩文本，布局与当前组件相同。
默认值：
{
align: Alignment.Center,
offset: {0, 0}
} | - +| 名称 | 参数类型 | 默认值 | 描述 | +| -------- | -------- | -------- | -------- | +| overlay | value: string,
options?: {
align?: [Alignment](ts-appendix-enums.md#alignment),
offset?: {x?: number, y?: number}
} | {
align: Alignment.Center,
offset: {0, 0}
} | 在当前组件上，增加遮罩文本。
value: 遮罩文本内容。
options: 文本定位，align设置文本相对于组件的方位，[offset](ts-universal-attributes-location.md)为文本基于自身左上角的偏移量。文本默认处于组件左上角。
两者都设置时效果重叠，文本相对于组件方位定位后再基于当前位置文本的左上角进行偏移。 | ## 示例 @@ -28,7 +27,10 @@ struct OverlayExample { Column() { Image($r('app.media.img')) .width(240).height(240) - .overlay("Winter is a beautiful season, especially when it snows.", { align: Alignment.Bottom, offset: { x: 0, y: -15 } }) + .overlay("Winter is a beautiful season, especially when it snows.", { + align: Alignment.Bottom, + offset: { x: 70, y: 100 } + }) }.border({ color: Color.Black, width: 2 }) }.width('100%') }.padding({ top: 20 }) 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 9f9c8f42383cd699a337eb7f1f17e1a003707ebf..d214438503d0373fa0a3077ade6b5e486a2dcb11 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 + @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 }) } } ``` - + diff --git a/zh-cn/application-dev/reference/arkui-ts/ts-universal-attributes-size.md b/zh-cn/application-dev/reference/arkui-ts/ts-universal-attributes-size.md index 0626e002ac1d94606d6f4bd1531592703c6cedc0..e46f3861c8fd4a4c294a5de7ee3ceb972d701df8 100644 --- a/zh-cn/application-dev/reference/arkui-ts/ts-universal-attributes-size.md +++ b/zh-cn/application-dev/reference/arkui-ts/ts-universal-attributes-size.md @@ -1,6 +1,6 @@ # 尺寸设置 -用于设置组件的宽高、边距等显示尺寸进行设置。 +用于设置组件的宽高、边距。 > **说明：** > @@ -18,7 +18,7 @@ | padding | [Padding](ts-types.md#padding) \| [Length](ts-types.md#length) | 设置内边距属性。
参数为Length类型时，四个方向内边距同时生效。
默认值：0
padding设置百分比时，上下左右内边距均以父容器的width作为基础值。 | | margin | [Margin](ts-types.md#margin) \| [Length](ts-types.md#length) | 设置外边距属性。
参数为Length类型时，四个方向外边距同时生效。
默认值：0
margin设置百分比时，上下左右外边距均以父容器的width作为基础值。| | constraintSize | {
minWidth?: [Length](ts-types.md#length),
maxWidth?: [Length](ts-types.md#length),
minHeight?: [Length](ts-types.md#length),
maxHeight?: [Length](ts-types.md#length)
} | 设置约束尺寸，组件布局时，进行尺寸范围限制。constraintSize的优先级高于Width和Height。
默认值：
{
minWidth: 0,
maxWidth: Infinity,
minHeight: 0,
maxHeight: Infinity
} | -| layoutWeight | number \| string | 容器尺寸确定时，元素与兄弟节点主轴布局尺寸按照权重进行分配，忽略本身尺寸设置，表示自适应占满剩余空间。
**说明：**
仅在Row/Column/Flex布局中生效。
默认值：0 | +| layoutWeight | number \| string | 父容器尺寸确定时，设置了layoutWeight属性的子元素与兄弟元素占主轴尺寸按照权重进行分配，忽略元素本身尺寸设置，表示自适应占满剩余空间。
**说明：**
仅在Row/Column/Flex布局中生效。| ## 示例 @@ -31,30 +31,41 @@ struct SizeExample { build() { Column({ space: 10 }) { Text('margin and padding:').fontSize(12).fontColor(0xCCCCCC).width('90%') - // 宽度80 ,高度80 ,内外边距20 Row() { + // 宽度80 ,高度80 ,外边距20(蓝色区域），内边距10（白色区域） Row() { - Row().size({ width: '100%', height: '100%' }).backgroundColor(0xAFEEEE) - }.width(80).height(80).padding(20).margin(20).backgroundColor(0xFDF5E6) - }.backgroundColor(0xFFA500) + Row().size({ width: '100%', height: '100%' }).backgroundColor(Color.Yellow) + } + .width(80) + .height(80) + .padding(10) + .margin(20) + .backgroundColor(Color.White) + }.backgroundColor(Color.Blue) + + Text('constraintSize').fontSize(12).fontColor(0xCCCCCC).width('90%') + Text('this is a Text.this is a Text.this is a Text.this is a Text.this is a Text.this is a Text.this is a Text.this is a Text.this is a Text.this is a Text.this is a Text.this is a Text.this is a Text.this is a Text.this is a Text') + .width('90%') + .constraintSize({ maxWidth: 200 }) Text('layoutWeight').fontSize(12).fontColor(0xCCCCCC).width('90%') - // 容器尺寸确定时，元素与兄弟节点主轴布局尺寸按照权重进行分配，忽略本身尺寸设置。 + // 父容器尺寸确定时，设置了layoutWeight的子元素在主轴布局尺寸按照权重进行分配，忽略本身尺寸设置。 Row() { - // 权重1 + // 权重1，占主轴剩余空间1/3 Text('layoutWeight(1)') .size({ width: '30%', height: 110 }).backgroundColor(0xFFEFD5).textAlign(TextAlign.Center) .layoutWeight(1) - // 权重2 + // 权重2，占主轴剩余空间2/3 Text('layoutWeight(2)') .size({ width: '30%', height: 110 }).backgroundColor(0xF5DEB3).textAlign(TextAlign.Center) .layoutWeight(2) - // 权重默认0 + // 未设置layoutWeight属性，组件按照自身尺寸渲染 Text('no layoutWeight') .size({ width: '30%', height: 110 }).backgroundColor(0xD2B48C).textAlign(TextAlign.Center) }.size({ width: '90%', height: 140 }).backgroundColor(0xAFEEEE) }.width('100%').margin({ top: 5 }) - }} + } +} ``` - + diff --git a/zh-cn/application-dev/reference/arkui-ts/ts-universal-attributes-text-style.md b/zh-cn/application-dev/reference/arkui-ts/ts-universal-attributes-text-style.md index 5de534998ef8e77e18a725472c87e5f56d8fa215..4278cb3af7cb87c09196bc9d37a7ab1adfafa8df 100644 --- a/zh-cn/application-dev/reference/arkui-ts/ts-universal-attributes-text-style.md +++ b/zh-cn/application-dev/reference/arkui-ts/ts-universal-attributes-text-style.md @@ -1,22 +1,23 @@ # 文本样式设置 +针对包含文本元素的组件，设置文本样式。 + > **说明：** > > 从API Version 7开始支持。后续版本如有新增内容，则采用上角标单独标记该内容的起始版本。 -针对包含文本元素的组件，设置文本样式。 ## 属性 | 名称 | 参数类型 | 描述 | | -----------| ---------------------------------------- | ------------------------------------ | -| fontColor | [ResourceColor](ts-types.md#resourcecolor) | 设置文本颜色。 | -| fontSize | Length \| [Resource](ts-types.md#resource) | 设置文本尺寸，Length为number类型时，使用fp单位。 | -| fontStyle | [FontStyle](ts-appendix-enums.md#fontstyle) | 设置文本的字体样式。
默认值：FontStyle.Normal | +| fontColor | [ResourceColor](ts-types.md#resourcecolor) | 设置字体颜色。 | +| fontSize | Length \| [Resource](ts-types.md#resource) | 设置字体大小，Length为number类型时，使用fp单位。字体默认大小10。 | +| fontStyle | [FontStyle](ts-appendix-enums.md#fontstyle) | 设置字体样式。
默认值：FontStyle.Normal | | fontWeight | number \| [FontWeight](ts-appendix-enums.md#fontweight) \| string | 设置文本的字体粗细，number类型取值[100, 900]，取值间隔为100，默认为400，取值越大，字体越粗。string类型仅支持number类型取值的字符串形式，例如"400"，以及"bold"、"bolder"、"lighter"、"regular"、"medium"，分别对应FontWeight中相应的枚举值。
默认值：FontWeight.Normal | -| fontFamily | string \| [Resource](ts-types.md#resource) | 设置文本的字体列表。使用多个字体，使用','进行分割，优先级按顺序生效。例如：'Arial, sans-serif'。 | +| fontFamily | string \| [Resource](ts-types.md#resource) | 设置字体列表。默认字体'HarmonyOS Sans'，且当前只支持这种字体。| ## 示例 @@ -29,40 +30,38 @@ struct TextStyleExample { build() { Column({ space: 5 }) { Text('default text') - - Text('text font color red') + Divider() + + Text('text font color red').fontColor(Color.Red) + Divider() + + Text('text font default') + Text('text font size 10').fontSize(10) + Text('text font size 10fp').fontSize('10fp') + Text('text font size 20').fontSize(20) + Divider() + + Text('text font style Italic').fontStyle(FontStyle.Italic) + Divider() + + Text('text fontWeight bold').fontWeight(700) + Text('text fontWeight lighter').fontWeight(FontWeight.Lighter) + Divider() + + Text('red 20 Italic bold text') .fontColor(Color.Red) - - Text('text font size 20') .fontSize(20) - - Text('text font style Italic') .fontStyle(FontStyle.Italic) - - Text('text fontWeight bold') - .fontWeight(700) - - Text('text fontFamily sans-serif') - .fontFamily('sans-serif') - - Text('red 20 Italic bold cursive text') - .fontColor(Color.Red) - .fontSize(20) - .fontStyle(FontStyle.Italic) - .fontWeight(700) - .fontFamily('cursive') - .textAlign(TextAlign.Center) - .width('90%') - - Text('Orange 18 Normal source-sans-pro text') + .fontWeight(FontWeight.Bold) + Divider() + + Text('Orange 18 Normal text') .fontColor(Color.Orange) .fontSize(18) .fontStyle(FontStyle.Normal) - .fontWeight(400) - .fontFamily('source-sans-pro,cursive,sans-serif') }.width('100%') } } ``` - + 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..ffa706268f3bd28b93edaa5944ccca29d365c4ca 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 @@ -2,6 +2,7 @@ 适用于支持通用点击事件、通用触摸事件、通用手势处理的组件。 + > **说明：** > > 从API Version 8开始支持。后续版本如有新增内容，则采用上角标单独标记该内容的起始版本。 @@ -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 }) } } ``` - + diff --git a/zh-cn/application-dev/reference/arkui-ts/ts-universal-attributes-visibility.md b/zh-cn/application-dev/reference/arkui-ts/ts-universal-attributes-visibility.md index 3a3952194710ccd131beae6c95e6d6aacb5e4000..7d90b701c6991739de6f2c745e356a7f6ca3c516 100644 --- a/zh-cn/application-dev/reference/arkui-ts/ts-universal-attributes-visibility.md +++ b/zh-cn/application-dev/reference/arkui-ts/ts-universal-attributes-visibility.md @@ -23,20 +23,21 @@ struct VisibilityExample { build() { Column() { Column() { - Text('Visible').fontSize(9).width('90%').fontColor(0xCCCCCC) - Row().visibility(Visibility.Visible).width('90%').height(80).backgroundColor(0xAFEEEE) - - Text('None').fontSize(9).width('90%').fontColor(0xCCCCCC) // 隐藏不参与占位 + Text('None').fontSize(9).width('90%').fontColor(0xCCCCCC) Row().visibility(Visibility.None).width('90%').height(80).backgroundColor(0xAFEEEE) - Text('Hidden').fontSize(9).width('90%').fontColor(0xCCCCCC) // 隐藏参与占位 + Text('Hidden').fontSize(9).width('90%').fontColor(0xCCCCCC) Row().visibility(Visibility.Hidden).width('90%').height(80).backgroundColor(0xAFEEEE) + + // 正常显示，组件默认的显示模式 + Text('Visible').fontSize(9).width('90%').fontColor(0xCCCCCC) + Row().visibility(Visibility.Visible).width('90%').height(80).backgroundColor(0xAFEEEE) }.width('90%').border({ width: 1 }) }.width('100%').margin({ top: 5 }) } } ``` - + diff --git a/zh-cn/application-dev/reference/arkui-ts/ts-universal-attributes-z-order.md b/zh-cn/application-dev/reference/arkui-ts/ts-universal-attributes-z-order.md index a75a053860bbdbb099c537603fe317a00d5a1d58..60f6b667a8060ce86195496e469633dcf958602d 100644 --- a/zh-cn/application-dev/reference/arkui-ts/ts-universal-attributes-z-order.md +++ b/zh-cn/application-dev/reference/arkui-ts/ts-universal-attributes-z-order.md @@ -1,6 +1,6 @@ # Z序控制 -组件的Z序，指明了该组件在堆叠组件中的位置。 +组件的Z序，设置组件的堆叠顺序。 > **说明：** > @@ -25,20 +25,25 @@ struct ZIndexExample { build() { Column() { Stack() { - // stack会重叠组件, 默认后定义的在最上面 - Text('first child, zIndex(2)') - .size({width: '40%', height: '30%'}).backgroundColor(0xbbb2cb) + // stack会重叠组件, 默认后定义的在最上面，具有较高zIndex值的元素在zIndex较小的元素前面 + Text('1, zIndex(2)') + .size({ width: '40%', height: '30%' }).backgroundColor(0xbbb2cb) .zIndex(2) - // 默认值0 - Text('second child, default zIndex(0)') - .size({width: '90%', height: '80%'}).backgroundColor(0xd2cab3).align(Alignment.TopStart) - Text('third child, zIndex(1)') - .size({width: '70%', height: '50%'}).backgroundColor(0xc1cbac).align(Alignment.TopStart) + Text('2, default zIndex(1)') + .size({ width: '70%', height: '50%' }).backgroundColor(0xd2cab3).align(Alignment.TopStart) .zIndex(1) + Text('3, zIndex(0)') + .size({ width: '90%', height: '80%' }).backgroundColor(0xc1cbac).align(Alignment.TopStart) }.width('100%').height(200) }.width('100%').height(200) } } ``` +Stack容器内子组件不设置zIndex的效果 + + + +Stack容器子组件设置zIndex后效果 + + - diff --git a/zh-cn/application-dev/reference/arkui-ts/ts-universal-component-area-change-event.md b/zh-cn/application-dev/reference/arkui-ts/ts-universal-component-area-change-event.md index fb78261211c4b65798427d16c61372b017f0c043..edee0fabe4bac1731669640c9c57586f93c7a2d3 100644 --- a/zh-cn/application-dev/reference/arkui-ts/ts-universal-component-area-change-event.md +++ b/zh-cn/application-dev/reference/arkui-ts/ts-universal-component-area-change-event.md @@ -42,4 +42,4 @@ struct AreaExample { } ``` - + \ No newline at end of file diff --git a/zh-cn/application-dev/reference/arkui-ts/ts-universal-events-key.md b/zh-cn/application-dev/reference/arkui-ts/ts-universal-events-key.md index e0e208469e40d997700b3c6b2b0346bee666019b..28bcf4cae9827e31896105d0656f18a11e027504 100644 --- a/zh-cn/application-dev/reference/arkui-ts/ts-universal-events-key.md +++ b/zh-cn/application-dev/reference/arkui-ts/ts-universal-events-key.md @@ -57,4 +57,4 @@ struct KeyEventExample { } ``` - + \ No newline at end of file diff --git a/zh-cn/application-dev/ui/ts-framework-file-access-rules.md b/zh-cn/application-dev/ui/ts-framework-file-access-rules.md index 6faf3d23d106f0f7148e3a972810cb3ea17e3b96..7443b2c77932b7062746ca6974bcde6fc3029f81 100644 --- a/zh-cn/application-dev/ui/ts-framework-file-access-rules.md +++ b/zh-cn/application-dev/ui/ts-framework-file-access-rules.md @@ -72,4 +72,4 @@ export struct FoodList { } } } -``` +``` \ No newline at end of file