默认值：NavigationTitleMode.Free | -| toolBar | object \| [CustomBuilder](ts-types.md#custombuilder8)8+ | 设置工具栏内容。
items: 工具栏所有项。 | -| hideToolBar | boolean | 设置隐藏/显示工具栏：
默认值：false
true: 隐藏工具栏。
false: 显示工具栏。 | -| hideTitleBar | boolean | 隐藏标题栏。
默认值：false | -| hideBackButton | boolean | 隐藏返回键。
默认值：false | +| subTitle | string | 页面副标题。 | +| 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类型说明 @@ -40,7 +41,7 @@ Navigation() | icon | string | 否 | 菜单栏单个选项的图标资源路径。 | | action | () => void | 否 | 当前选项被选中的事件回调。 | -## Object类型说明 +## object类型说明 | 名称 | 类型 | 必填 | 描述 | | ------ | ----------------------- | ---- | ------------------------------ | @@ -57,8 +58,8 @@ Navigation() | Full | 固定为大标题模式（主副标题）。 | > **说明：** -> -> 目前可滚动组件只支持List。 +> 目前可滚动组件只支持List。 + ## 事件 @@ -70,7 +71,7 @@ Navigation() ## 示例 ```ts -// Example 01 +// xxx.ets @Entry @Component struct NavigationExample { @@ -158,7 +159,7 @@ struct NavigationExample {  ```ts -// Example 02 +// xxx.ets @Entry @Component struct ToolbarBuilderExample { 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 f7382144373d1efa7b7a749b525f30ad85282676..8eda9f2b43c4a14bde707b27629ee0b07897b322 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 @@ -14,18 +14,18 @@ ## 接口 -Progress(options: {value: number, total?: number, style?: ProgressStyle, type?: ProgressType}) +Progress(options: {value: number, total?: number, type?: ProgressType}) 创建进度组件，用于显示内容加载或操作处理进度。 -**参数：** +**参数:** -| 参数名 | 参数类型 | 必填 | 参数描述 | -| -------------------------- | ------------- | ---- | ------------------------------------------------------------ | -| value | number | 是 | 指定当前进度值。 | -| total | number | 否 | 指定进度总长。
默认值：100 | -| type8+ | ProgressType | 否 | 指定进度条类型。
默认值：ProgressType.Linear | -| styledeprecated | ProgressStyle | 否 | 指定进度条类型。
该参数从API Version8开始废弃，建议使用type替代。
默认值：ProgressStyle.Linear | +| 参数名 | 参数类型 | 必填 | 参数描述 | +| -------- | -------- | -------- | -------- | +| value | number | 是 | 指定当前进度值。 | +| total | number | 否 | 指定进度总长。
默认值：100 | +| type8+ | [ProgressType](#progresstype枚举说明) | 否 | 指定进度条类型。
默认值：ProgressType.Linear | +| styledeprecated | [ProgressStyle](#progressstyle枚举说明) | 否 | 指定进度条样式。
该参数从API Version8开始废弃，建议使用type替代。
默认值：ProgressStyle.Linear | ## ProgressType枚举说明 @@ -37,7 +37,7 @@ Progress(options: {value: number, total?: number, style?: ProgressStyle, type?: | ScaleRing8+ | 环形有刻度样式，显示类似时钟刻度形式的进度展示效果。 | | Capsule8+ | 胶囊样式，头尾两端圆弧处的进度展示效果与Eclipse相同；中段处的进度展示效果与Linear相同。 | -## ProgressStyle枚举说明 +## ProgressStyle枚举说明 | 名称 | 描述 | | ---------------------- | ------------------------------------------------------------ | @@ -49,11 +49,11 @@ Progress(options: {value: number, total?: number, style?: ProgressStyle, type?: ## 属性 -| 名称 | 参数类型 | 描述 | -| ------------------ | ------------------------------------------------------------ | ------------------------------------------------------------ | -| value | number | 设置当前进度值。 | -| color | [ResourceColor](ts-types.md#resourcecolor8) | 设置进度条前景色。 | -| style8+ | {
strokeWidth?: [Length](ts-types.md#length),
scaleCount?: number,
scaleWidth?: [Length](ts-types.md#length)
} | 定义组件的样式。
strokeWidth: 设置进度条宽度。
scaleCount: 设置环形进度条总刻度数。
scaleWidth: 设置环形进度条刻度粗细。
刻度粗细大于进度条宽度时，刻度粗细为系统默认粗细。 | +| 名称 | 参数类型 | 描述 | +| -------- | -------- | -------- | +| value | number | 设置当前进度值。 | +| color | [ResourceColor](ts-types.md#resourcecolor) | 设置进度条前景色。 | +| style8+ | {
strokeWidth?: [Length](ts-types.md#length),
scaleCount?: number,
scaleWidth?: [Length](ts-types.md#length)
} | 定义组件的样式。
- strokeWidth: 设置进度条宽度。
- scaleCount: 设置环形进度条总刻度数。
- scaleWidth: 设置环形进度条刻度粗细，刻度粗细大于进度条宽度时，为系统默认粗细。 | ## 示例 @@ -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 51121a42b6b6f79268bdd3829617c73d85637a64..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 @@ -1,15 +1,9 @@ # QRCode -显示二维码信息。 +用于显示单个二维码的组件。 > **说明：** -> -> 该组件从API Version 7开始支持。后续版本如有新增内容，则采用上角标单独标记该内容的起始版本。 - - -## 权限列表 - -无 +> 该组件从API Version 7开始支持。后续版本如有新增内容，则采用上角标单独标记该内容的起始版本。 ## 子组件 @@ -21,18 +15,20 @@ QRCode(value: string) -**参数：** +**参数:** -| 参数名 | 参数类型 | 必填 | 默认值 | 参数描述 | -| ----- | ------ | ---- | ---- | --------- | -| value | string | 是 | - | 二维码内容字符串。 | +| 参数名 | 参数类型 | 必填 | 参数描述 | +| -------- | -------- | -------- | -------- | +| value | string | 是 | 二维码内容字符串。 | ## 属性 -| 名称 | 参数类型 | 默认值 | 描述 | -| --------------- | ------------------------------------------- | ------ | ---------------------- | -| color | [ResourceColor](ts-types.md#resourcecolor8) | Black | 设置二维码颜色。 | -| backgroundColor | [ResourceColor](ts-types.md#resourcecolor8) | White | 设置二维码的背景颜色。 | +除支持[通用属性](ts-universal-attributes-size.md)外，还支持以下属性。 + +| 名称 | 参数类型 | 描述 | +| -------- | -------- | -------- | +| color | [ResourceColor](ts-types.md#resourcecolor) | 设置二维码颜色。
默认值：Color.Black | +| backgroundColor | [ResourceColor](ts-types.md#resourcecolor) | 设置二维码背景颜色。
默认值：Color.White | ## 事件 @@ -48,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 abdbb7717ef0cd865f807019130f588c11a675ca..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 @@ -7,11 +7,6 @@ > 该组件从API Version 8开始支持。后续版本如有新增内容，则采用上角标单独标记该内容的起始版本。 -## 权限列表 - -无 - - ## 子组件 可以包含单个子组件。 @@ -23,22 +18,22 @@ ScrollBar(value: { scroller: Scroller, direction?: ScrollBarDirection, state?: B **参数：** -| 参数名 | 参数类型 | 必填 | 默认值 | 参数描述 | -| --------- | ---------------------------------------- | ---- | --------------------------- | ----------------------- | -| scroller | [Scroller](ts-container-scroll.md#scroller) | 是 | - | 可滚动组件的控制器。用于与可滚动组件进行绑定。 | -| direction | ScrollBarDirection | 否 | ScrollBarDirection.Vertical | 滚动条的方向，控制可滚动组件对应方向的滚动。 | -| state | [BarState](ts-appendix-enums.md#barstate) | 否 | BarState.Auto | 滚动条状态。 | +| 参数名 | 参数类型 | 必填 | 参数描述 | +| -------- | -------- | -------- | -------- | +| scroller | [Scroller](ts-container-scroll.md#scroller) | 是 | 可滚动组件的控制器。用于与可滚动组件进行绑定。 | +| direction | [ScrollBarDirection](#scrollbardirection枚举说明) | 否 | 滚动条的方向，控制可滚动组件对应方向的滚动。
默认值：ScrollBarDirection.Vertical | +| state | [BarState](ts-appendix-enums.md#barstate) | 否 | 滚动条状态。
默认值：BarState.Auto | > **说明：** -> ScrollBar组件负责定义可滚动区域的行为样式，ScrollBar的子节点负责定义滚动条的行为样式。 -> -> 滚动条组件与可滚动组件通过Scroller进行绑定，且只有当两者方向相同时，才能联动，ScrollBar与可滚动组件仅支持一对一绑定。 +> ScrollBar组件负责定义可滚动区域的行为样式，ScrollBar的子节点负责定义滚动条的行为样式。 +> +> 滚动条组件与可滚动组件通过Scroller进行绑定，且只有当两者方向相同时，才能联动，ScrollBar与可滚动组件仅支持一对一绑定。 ## ScrollBarDirection枚举说明 -| 名称 | 描述 | -| ---------- | ------ | -| Vertical | 纵向滚动条。 | +| 名称 | 描述 | +| -------- | -------- | +| Vertical | 纵向滚动条。 | | Horizontal | 横向滚动条。 | 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 e85fce2c9778bc87ddd1915dbace0f1289f516e4..8cf446c398c106cff0a04543be75a5888506ff75 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,34 +12,35 @@ ## 接口 -Select(options: Array\
index：选中项的索引。
value：选中项的值。 | ## 示例 @@ -50,16 +51,16 @@ Select(options: Array\
type: [TextDecorationType](ts-appendix-enums.md#textdecorationtype),
color?: [ResourceColor](ts-types.md#resourcecolor8)
} | 设置文本装饰线样式及其颜色。
默认值：{
type: TextDecorationType.None
color：Color.Black
} | -| letterSpacing | number \| string | 设置文本字符间距。 | -| textCase | [TextCase](ts-appendix-enums.md#textcase) | 设置文本大小写。
默认值：Normal | +| 名称 | 参数类型 | 描述 | +| -------- | -------- | -------- | +| decoration | {
type: [TextDecorationType](ts-appendix-enums.md#textdecorationtype),
color?: [ResourceColor](ts-types.md#resourcecolor)
} | 设置文本装饰线样式及其颜色。
默认值：{
type: TextDecorationType.None
color：Color.Black
} | +| letterSpacing | number \| string | 设置文本字符间距。取值小于0，字符聚集重叠，取值大于0且随着数值变大，字符间距越来越大，稀疏分布。 | +| textCase | [TextCase](ts-appendix-enums.md#textcase) | 设置文本大小写。
默认值：TextCase.Normal | ## 事件 -通用事件仅支持点击事件。 +通用事件仅支持[点击事件](ts-universal-attributes-click.md)。 > **说明：** > @@ -57,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 b79b655518acbd8c42c6425d063ac053de89baff..5432089561abf1cef59dd5dd5166efa0e8be596e 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 @@ -1,6 +1,6 @@ # Text -文本，用于呈现一段信息。 +显示一段文本的组件。 > **说明：** > @@ -18,29 +18,30 @@ Text(content?: string | Resource) **参数：** -| 参数名 | 参数类型 | 必填 | 参数描述 | -| ------- | ------------------------------------------ | ---- | ------------------------------------------------------------ | -| content | string \| [Resource](ts-types.md#resource) | 否 | 文本内容。包含子组件Span时不生效，显示Span内容，并且此时text组件的样式不生效。
默认值：' ' | +| 参数名 | 参数类型 | 必填 | 参数描述 | +| -------- | -------- | -------- | -------- | +| content | string \| [Resource](ts-types.md#resource) | 否 | 文本内容。包含子组件Span时不生效，显示Span内容，并且此时text组件的样式不生效。
默认值：' ' | ## 属性 -| 名称 | 参数类型 | 描述 | -| -------------- | ---------------------------------------- | ---------------------------------------- | -| textAlign | [TextAlign](ts-appendix-enums.md#textalign) | 设置多行文本的文本对齐方式。
默认值：TextAlign.Start | -| textOverflow | {overflow: [TextOverflow](ts-appendix-enums.md#textoverflow)} | 设置文本超长时的显示方式。
默认值：{overflow: TextOverflow.Clip}
**说明：**
文本截断是按字截断。例如，英文以单词为最小单位进行截断，若需要以字母为单位进行截断，可在字母间添加零宽空格：\u200B。 | -| maxLines | number | 设置文本的最大行数。
默认值：Infinity | -| lineHeight | string \| number \| [Resource](ts-types.md#resource) | 设置文本的文本行高，设置值不大于0时，不限制文本行高，自适应字体大小，Length为number类型时单位为fp。 | -| decoration | {
type: [TextDecorationType](ts-appendix-enums.md#textdecorationtype),
color?: [ResourceColor](ts-types.md#resourcecolor8)
} | 设置文本装饰线样式及其颜色。
默认值：{
type: TextDecorationType.None,
color：Color.Black
} | -| baselineOffset | number \| string | 设置文本基线的偏移量。 | -| letterSpacing | number \| string | 设置文本字符间距。 | -| minFontSize | number \| string \| [Resource](ts-types.md#resource) | 设置文本最小显示字号。 | -| maxFontSize | number \| string \| [Resource](ts-types.md#resource) | 设置文本最大显示字号。 | -| textCase | [TextCase](ts-appendix-enums.md#textcase) | 设置文本大小写。
默认值：TextCase.Normal | - +除支持[通用属性](ts-universal-attributes-size.md)外，还支持以下属性： + +| 名称 | 参数类型 | 描述 | +| ----------------------- | ----------------------------------- | ------------------------------------------- | +| textAlign | [TextAlign](ts-appendix-enums.md#textalign) | 设置多行文本的文本对齐方式。
默认值：TextAlign.Start | +| 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](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) | 设置文本最小显示字号。 | +| maxFontSize | number \| string \| [Resource](ts-types.md#resource) | 设置文本最大显示字号。 | +| textCase | [TextCase](ts-appendix-enums.md#textcase) | 设置文本大小写。
默认值：TextCase.Normal | > **说明：** > -> 不支持Text内同时存在文本内容和Span子组件。（如果同时存在，只显示Span内的内容)。 +> 不支持Text内同时存在文本内容和Span子组件。如果同时存在，只显示Span内的内容。 ## 示例 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 d9561b1169809ef4cca57c40d654acd311ee6ef6..95e25422c9c3ac4c55e19a18fdabd33427b42ff0 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 @@ -1,14 +1,10 @@ # TextClock -TextClock通过文本显示当前系统时间，支持不同时区的时间显示，时间显示最高精度到秒级。 +TextClock组件通过文本将当前系统时间显示在设备上。支持不同时区的时间显示，最高精度到秒级。 -> **说明：** +>**说明：** > -> 该组件从API Version 8开始支持。后续版本如有新增内容，则采用上角标单独标记该内容的起始版本。 - -## 权限列表 - -无 +>该组件从API Version 8开始支持。后续版本如有新增内容，则采用上角标单独标记该内容的起始版本。 ## 子组件 @@ -16,26 +12,15 @@ TextClock通过文本显示当前系统时间，支持不同时区的时间显 ## 接口 -TextClock(options?: {timeZoneOffset?: number, controller?: TextClockController}) +TextClock(options?: { timeZoneOffset?: number, controller?: TextClockController }) -**参数:** +**参数：** -| 参数名 | 参数类型 | 必填 | 默认值 | 参数描述 | -| -------------- | ------------------------------------------- | ---- | ---------- | ------------------------------------------------------------ | -| timeZoneOffset | number | 否 | 时区偏移量 | 设置时区偏移量。取值范围为[-14, 12]，表示东十二区到西十二区，其中负值表示东时区，正值表示西时区，比如东八区为-8；对横跨国际日界线的国家或地区，用-13（UTC+13）和-14（UTC+14）来保证整个国家或者区域处在相同的时间。 | -| controller | [TextClockController](#textclockcontroller) | 否 | null | 绑定一个控制器，用来控制文本时钟的状态。 | +| 参数名 | 参数类型 | 必填 | 参数描述 | +| -------------- | -------- | ------ | --------------------------------------------------------------------------- | +| timeZoneOffset | number | 否 | 设置时区偏移量。
取值范围为[-14, 12]，表示东十二区到西十二区，其中负值表示东时区，正值表示西时区，比如东八区为-8。
对横跨国际日界线的国家或地区，用-13（UTC+13）和-14（UTC+14）来保证整个国家或者区域处在相同的时间，当设置的值不在取值范围内时，将使用当前系统的时区偏移量。
默认值：当前系统的时区偏移量 | +| controller | [TextClockController](#textclockcontroller) | 否 | 绑定一个控制器，用来控制文本时钟的状态。| -## 属性 - -| 名称 | 参数类型 | 默认值 | 描述 | -| ------ | -------- | ------ | ------------------------------------------------------------ | -| format | string | 'hms' | 设置显示时间格式。
日期间隔符固定为"/"，时间间隔符为":"。
如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：毫秒。 | - -## 事件 - -| 名称 | 功能描述 | -| ---------------------------------------- | ---------------------------------------- | -| onDateChange(event: (value: number) => void) | 提供时间变化回调,该事件最小回调间隔为秒。
value: Unix Time Stamp，即自1970年1月1日（UTC）起经过的毫秒数。 | ## TextClockController @@ -43,9 +28,8 @@ TextClock容器组件的控制器，可以将此对象绑定到TextClock组件 ### 导入对象 -``` -controller: TextClockController = new TextClockController() - +```ts +controller: TextClockController = new TextClockController(); ``` ### start @@ -61,41 +45,60 @@ 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 -// xxx.ets @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) - .fontSize(20) - TextClock({timeZoneOffset: -8, controller: this.controller}) - .format('hhmmss') - .onDateChange((value: number) => { - this.accumulateTime = value - }) - .margin(20) - .fontSize(30) - Button("start TextClock") - .margin({ bottom: 10 }) - .onClick(()=>{ - this.controller.start() - }) - Button("stop TextClock") - .onClick(()=>{ - this.controller.stop() - }) - } + Flex({ direction: FlexDirection.Column, alignItems: ItemAlign.Center, justifyContent: FlexAlign.Center }) { + Text('Current milliseconds is ' + this.accumulateTime) + .fontSize(20) + // 以12小时制显示东八区的系统时间，精确到秒。 + TextClock({ timeZoneOffset: -8, controller: this.controller }) + .format('hms') + .onDateChange((value: number) => { + this.accumulateTime = value; + }) + .margin(20) + .fontSize(30) + Button("start TextClock") + .margin({ bottom: 10 }) + .onClick(() => { + // 启动文本时钟 + this.controller.start(); + }) + Button("stop TextClock") + .onClick(() => { + // 停止文本时钟 + this.controller.stop(); + }) + } .width('100%') .height('100%') } } ``` - + 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 33d9d449208361ec6c1ee2ba3e7e34245390015c..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 @@ -1,6 +1,6 @@ # TextPicker -文本类滑动选择器组件。 +滚动选择文本的组件。 > **说明：** > @@ -14,29 +14,30 @@ ## 接口 -TextPicker(options?: {range: string[] | [Resource](ts-types.md#resource), selected?: number, value?: string}) +TextPicker(options?: {range: string[]|Resource, selected?: number, value?: string}) 根据range指定的选择范围创建文本选择器。 **参数：** -| 参数名 | 参数类型 | 必填 | 参数描述 | -| -------- | -------- | ---- | --------------- | -| 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。
默认值：第一个元素值 | ## 属性 -| 名称 | 参数类型 | 描述 | -| ----------------------- | ---------------- | -------------------------- | +| 名称 | 参数类型 | 描述 | +| -------- | -------- | -------- | | defaultPickerItemHeight | number \| string | 默认Picker内容项元素高度。 | - ## 事件 -| 名称 | 描述 | -| ------------------------------------------------------------ | ------------------------------------------------------------ | +除支持[通用事件](ts-universal-events-click.md)外，还支持以下事件： + +| 名称 | 描述 | +| -------- | -------- | | onChange(callback: (value: string, index: number) => void) | 滑动选中TextPicker文本内容后，触发该回调。
- value: 当前选中项的文本。
- index: 当前选中项的索引值。 | 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 cb779332a2b342efe59ce460d9f61601fba990e2..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 @@ -1,16 +1,9 @@ # Badge -> **说明：** -> -> 该组件从API Version 7开始支持。后续版本如有新增内容，则采用上角标单独标记该内容的起始版本。 - - -新事件标记组件，在组件上提供事件信息展示能力。 +可以附加在单个组件上用于信息标记的容器组件。 - -## 权限列表 - -无 +> **说明：** +> 该组件从API Version 7开始支持。后续版本如有新增内容，则采用上角标单独标记该内容的起始版本。 ## 子组件 @@ -20,47 +13,45 @@ ## 接口 -方法1：Badge(value: {count: number, position?: BadgePosition, maxCount?: number, style: BadgeStyle}) +**方法1：** Badge(value: {count: number, position?: BadgePosition, maxCount?: number, style: BadgeStyle}) 创建数字标记组件。 **参数：** +| 参数名 | 参数类型 | 必填 | 默认值 | 参数描述 | +| -------- | -------- | -------- | -------- | -------- | +| count | number | 是 | - | 设置提醒消息数。 | +| position | [BadgePosition](#badgeposition枚举说明) | 否 | BadgePosition.RightTop | 设置提示点显示位置。 | +| maxCount | number | 否 | 99 | 最大消息数，超过最大消息时仅显示maxCount+。 | +| style | [BadgeStyle](#badgestyle对象说明) | 是 | - | Badge组件可设置样式，支持设置文本颜色、尺寸、圆点颜色和尺寸。 | -| 参数名 | 参数类型 | 必填 | 默认值 | 参数描述 | -| -------- | ------------- | ---- | ---------------------- | --------------------------------- | -| count | number | 是 | - | 设置提醒消息数。 | -| position | BadgePosition | 否 | BadgePosition.RightTop | 设置提示点显示位置。 | -| maxCount | number | 否 | 99 | 最大消息数，超过最大消息时仅显示maxCount+。 | -| style | BadgeStyle | 是 | - | Badge组件可设置样式，支持设置文本颜色、尺寸、圆点颜色和尺寸。 | - -方法2： Badge(value: {value: string, position?: BadgePosition, style: BadgeStyle}) +**方法2：** Badge(value: {value: string, position?: BadgePosition, style: BadgeStyle}) 根据字符串创建标记组件。 **参数：** -| 参数名 | 参数类型 | 必填 | 默认值 | 参数描述 | -| -------- | ------------- | ---- | ---------------------- | --------------------------------- | -| value | string | 是 | - | 提示内容的文本字符串。 | -| position | BadgePosition | 否 | BadgePosition.RightTop | 设置提示点显示位置。 | -| style | BadgeStyle | 是 | - | Badge组件可设置样式，支持设置文本颜色、尺寸、圆点颜色和尺寸。 | - -## BadgeStyle对象说明 - -| 名称 | 类型 | 必填 | 默认值 | 描述 | -| ---------- | ------------------------------------------- | ---- | ----------- | ------------- | -| color | [ResourceColor](ts-types.md#resourcecolor8) | 否 | Color.White | 文本颜色。 | -| fontSize | number \| string | 否 | 10 | 文本大小。 | -| badgeSize | number \| string | 否 | - | badge的大小。 | -| badgeColor | [ResourceColor](ts-types.md#resourcecolor8) | 否 | Color.Red | badge的颜色。 | +| 参数名 | 参数类型 | 必填 | 默认值 | 参数描述 | +| -------- | -------- | -------- | -------- | -------- | +| value | string | 是 | - | 提示内容的文本字符串。 | +| position | [BadgePosition](#badgeposition枚举说明) | 否 | BadgePosition.RightTop | 设置提示点显示位置。 | +| style | [BadgeStyle](#badgestyle对象说明) | 是 | - | Badge组件可设置样式，支持设置文本颜色、尺寸、圆点颜色和尺寸。 | ## BadgePosition枚举说明 -| 名称 | 描述 | -| -------- | ------------ | -| RightTop | 圆点显示在右上角。 | -| Right | 圆点显示在右侧纵向居中。 | -| Left | 圆点显示在左侧纵向居中。 | +| 名称 | 描述 | +| -------- | -------- | +| RightTop | 圆点显示在右上角。 | +| 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的颜色。 | ## 示例 @@ -69,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 63a7bb01652e2ca66c6d26e23fa044b206a258d8..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 @@ -7,11 +7,6 @@ > 该组件从API Version 7开始支持。后续版本如有新增内容，则采用上角标单独标记该内容的起始版本。 -## 权限列表 - -无 - - ## 子组件 可以包含子组件。 @@ -19,21 +14,22 @@ ## 接口 -Column(value?:{space?: string | number}) +Column(value?: {space?: string | number}) **参数：** -| 参数名 | 参数类型 | 必填 | 默认值 | 参数描述 | -| ----- | -------------- | ---- | ---- | --------- | -| space | string\|number | 否 | 0 | 纵向布局元素间距。 | +| 参数名 | 参数类型 | 必填 | 参数描述 | +| -------- | -------- | -------- | -------- | +| space | string \| number | 否 | 纵向布局元素垂直方向间距。
默认值：0 | ## 属性 -| 名称 | 参数类型 | 默认值 | 描述 | -| --------------------------- | ---------------------------------------- | ---------------------- | ----------------- | -| alignItems | [HorizontalAlign](ts-appendix-enums.md#horizontalalign) | HorizontalAlign.Center | 设置子组件在水平方向上的对齐格式。 | -| justifyContent8+ | [FlexAlign](ts-appendix-enums.md#flexalign) | FlexAlign.Start | 设置子组件在垂直方向上的对齐格式。 | +除支持[通用属性](ts-universal-attributes-size.md)外，还支持以下属性： +| 名称 | 参数类型 | 描述 | +| -------- | -------- | -------- | +| alignItems | [HorizontalAlign](ts-appendix-enums.md#horizontalalign) | 设置子组件在水平方向上的对齐格式。
默认值：HorizontalAlign.Center | +| justifyContent8+ | [FlexAlign](ts-container-flex.md) | 设置子组件在垂直方向上的对齐格式。
默认值：FlexAlign.Start | ## 示例 @@ -44,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 22351db03f2ec17d82abc55efc5326868acad0fd..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 @@ -3,13 +3,8 @@ 将子组件纵向布局，并在每个子组件之间插入一根横向的分割线。 > **说明：** -> -> 该组件从API Version 7开始支持。后续版本如有新增内容，则采用上角标单独标记该内容的起始版本。 - - -## 权限列表 +> 该组件从API Version 7开始支持。后续版本如有新增内容，则采用上角标单独标记该内容的起始版本。 -无 ## 子组件 @@ -24,13 +19,14 @@ ColumnSplit() ## 属性 -| 名称 | 参数类型 | 描述 | -| ---------- | ------- | ------------------ | -| resizeable | boolean | 分割线是否可拖拽，默认为false。 | +| 名称 | 参数类型 | 描述 | +| -------- | -------- | -------- | +| resizeable | boolean | 分割线是否可拖拽，默认为false。 | > **说明：** -> 与RowSplit相同，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 4eb113fba9c3f3a8cc0ae37aad2cc63875c61aa9..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,16 +1,13 @@ # Counter -> **说明：** -> -> 该组件从API Version 7开始支持。后续版本如有新增内容，则采用上角标单独标记该内容的起始版本。 +计数器组件，提供相应的增加或者减少的计数操作。 +> **说明：** +> 该组件从API Version 7开始支持。后续版本如有新增内容，则采用上角标单独标记该内容的起始版本。 -计数器组件，提供相应的增加或者减少的计数操作。 -## 权限列表 -无 ## 子组件 @@ -27,10 +24,10 @@ Counter() 不支持通用事件和手势， 仅支持如下事件： -| 名称 | 功能描述 | -| ---------------------------------------- | --------- | -| onInc(event: () => void) | 监听数值增加事件。 | -| onDec(event: () => void) | 监听数值减少事件。 | +| 名称 | 功能描述 | +| -------- | -------- | +| onInc(event: () => void) | 监听数值增加事件。 | +| onDec(event: () => void) | 监听数值减少事件。 | ## 示例 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 2ef3440f88da8494b85d8700cbebe6db816bf6a3..895184056c41747c9a5f970c89882c7cf4b7cc6e 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 @@ -2,9 +2,9 @@ 路由容器组件，提供路由跳转能力。 -> **说明：** +> **说明：** > -> 该组件从API Version 7开始支持。后续版本如有新增内容，则采用上角标单独标记该内容的起始版本。 +> 该组件从API Version 7开始支持。后续版本如有新增内容，则采用上角标单独标记该内容的起始版本。 ## 子组件 @@ -16,14 +16,12 @@ Navigator(value?: {target: string, type?: NavigationType}) -创建路由组件。 - **参数：** | 参数名 | 参数类型 | 必填 | 参数描述 | | ------ | -------------- | ---- | ---------------------------------------------- | -| target | string | 是 | 指定跳转目标页面的路径。 | -| type | NavigationType | 否 | 指定路由方式。
默认值：NavigationType.Push | +| target | string | 是 | 指定跳转目标页面的路径。 | +| type | [NavigationType](#navigationtype枚举说明) | 否 | 指定路由方式。
默认值：NavigationType.Push | ## NavigationType枚举说明 @@ -33,22 +31,25 @@ Navigator(value?: {target: string, type?: NavigationType}) | Replace | 用应用内的某个页面替换当前页面，并销毁被替换的页面。 | | Back | 返回上一页面或指定的页面。 | + ## 属性 | 名称 | 参数 | 描述 | | ------ | ------- | ------------------------------------------------------------ | | active | boolean | 当前路由组件是否处于激活状态，处于激活状态时，会生效相应的路由操作。 | -| params | object | 跳转时要同时传递到目标页面的数据，可在目标页面使用router.getParams()获得。 | +| params | object | 跳转时要同时传递到目标页面的数据，可在目标页面使用[router.getParams()](../apis/js-api-router.md#routergetparams)获得。 | +| target | string | 设置跳转目标页面的路径。 目标页面需加入main_pages.json文件中。 | +| type | [NavigationType](#navigationtype枚举说明) | 设置路由方式。
默认值：NavigationType.Push | ## 示例 -``` -// Navigator Page +```ts +// Navigator.ets @Entry @Component struct NavigatorExample { - @State active: boolean = false + @State active: boolean = false; @State Text: object = {name: 'news'} build() { @@ -56,27 +57,28 @@ 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) }.active(this.active) .onClick(() => { - this.active = true + this.active = true; }) }.height(150).width(350).padding(35) } } ``` -``` -// Detail Page -import router from '@system.router' +```ts +// Detail.ets +import router from '@ohos.router' @Entry @Component struct DetailExample { - @State text: any = router.getParams().text + // 接收Navigator.ets的传参 + @State text: any = router.getParams().text; build() { Flex({ direction: FlexDirection.Column, alignItems: ItemAlign.Start, justifyContent: FlexAlign.SpaceBetween }) { @@ -93,8 +95,8 @@ struct DetailExample { ``` -``` -// Back Page +```ts +// Back.ets @Entry @Component struct BackExample { 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 13988b9e9727ccd2c19f4f8e5bbb94f1a7a63baa..2ab08be9ae38dac6a899cf62474e4d54cdb39650 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 @@ -1,6 +1,6 @@ # Panel -可滑动面板。提供一种轻量的内容展示的窗口，可方便的在不同尺寸中切换，属于弹出式组件。 +可滑动面板，提供一种轻量的内容展示窗口，方便在不同尺寸中切换。 > **说明：** > @@ -18,43 +18,46 @@ Panel(show: boolean) **参数：** -| 参数名 | 参数类型 | 必填 | 参数描述 | -| ------ | -------- | ---- | --------------------- | -| show | boolean | 是 | 控制Panel显示或隐藏。 | +| 参数名 | 参数类型 | 必填 | 参数描述 | +| -------- | -------- | -------- | -------- | +| show | boolean | 是 | 控制Panel显示或隐藏。 | + ## 属性 -| 名称 | 参数类型 | 描述 | -| ---------- | -------------- | ------------------------------------------------------------ | -| type | PanelType | 设置可滑动面板的类型。
默认值：PanelType.Foldable | -| mode | PanelMode | 设置可滑动面板的初始状态。 | -| dragBar | boolean | 设置是否存在dragbar，true表示存在，false表示不存在。
默认值：true | -| fullHeight | number\|string | 指定PanelMode.Full状态下的高度。 | -| halfHeight | number\|string | 指定PanelMode.Half状态下的高度，默认为屏幕尺寸的一半。 | -| miniHeight | number\|string | 指定PanelMode.Mini状态下的高度。 | +| 名称 | 参数类型 | 描述 | +| -------- | -------- | -------- | +| type | [PanelType](#paneltype枚举说明) | 设置可滑动面板的类型。
默认值：PanelType.Foldable | +| mode | [PanelMode](#panelmode枚举说明) | 设置可滑动面板的初始状态。 | +| dragBar | boolean | 设置是否存在dragbar，true表示存在，false表示不存在。
默认值：true | +| fullHeight | string \| number | 指定PanelMode.Full状态下的高度。 | +| halfHeight | string \| number | 指定PanelMode.Half状态下的高度，默认为屏幕尺寸的一半。 | +| miniHeight | string \| number | 指定PanelMode.Mini状态下的高度。 | +| show | boolean | 当滑动面板弹出时调用。 | ## PanelType枚举说明 -| 名称 | 描述 | -| --------- | ------------------------------------ | -| Minibar | 提供minibar和类全屏展示切换效果。 | -| Foldable | 内容永久展示类，提供大（类全屏）、中（类半屏）、小三种尺寸展示切换效果。 | -| Temporary | 内容临时展示区，提供大（类全屏）、中（类半屏）两种尺寸展示切换效果。 | +| 名称 | 描述 | +| -------- | -------- | +| Minibar | 提供minibar和类全屏展示切换效果。 | +| Foldable | 内容永久展示类，提供大（类全屏）、中（类半屏）、小三种尺寸展示切换效果。 | +| Temporary | 内容临时展示区，提供大（类全屏）、中（类半屏）两种尺寸展示切换效果。 | ## PanelMode枚举说明 -| 名称 | 描述 | -| ---- | ---------------------------------------- | +| 名称 | 描述 | +| -------- | -------- | | Mini | 类型为minibar和foldable时，为最小状态；类型为temporary，则不生效。 | | Half | 类型为foldable和temporary时，为类半屏状态；类型为minibar，则不生效。 | -| Full | 类全屏状态。 | +| Full | 类全屏状态。 | + ## 事件 -| 名称 | 功能描述 | -| ------------------------------------------------------------ | ------------------------------------------------------------ | +| 名称 | 功能描述 | +| -------- | -------- | | onChange(event: (width: number, height: number, mode: PanelMode) => void) | 当可滑动面板发生状态变化时触发， 返回的height值为内容区高度值，当dragbar属性为true时，panel本身的高度值为dragbar高度加上内容区高度。 | - +| onHeightChange(callback: (value: number) => void)9+ |当可滑动面板发生高度变化时触发，返回的height值为内容区高度值，当dragbar属性为true时，panel本身的高度值为dragbar高度加上内容区高度。因用户体验设计原因，panel最高只能滑到 fullHeight-8vp。 | ## 示例 @@ -66,7 +69,7 @@ struct PanelExample { @State show: boolean = false build() { - Column() { + Stack() { Text('2021-09-30 Today Calendar: 1.afternoon......Click for details') .width('90%').height(50).borderRadius(10) .backgroundColor(0xFFFFFF).padding({ left: 20 }) 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 c6abd718b6ac60b948c47320bf58849d9a255476..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 @@ -1,49 +1,47 @@ # Refresh -下拉刷新容器。 + 可以进行页面下拉操作并显示刷新动效的容器组件。 > **说明：** > > 该组件从API Version 8开始支持。后续版本如有新增内容，则采用上角标单独标记该内容的起始版本。 -## 权限列表 - -无 - ## 子组件 支持单个子组件。 ## 接口 -Refresh\(value: \{refreshing: boolean, offset?: number | string, friction?: number | string\}\) +Refresh\(value: \{ refreshing: boolean, offset?: number | string , friction?: number | string \}\) **参数：** -| 参数 | 参数名 | 必填 | 默认值 | 参数描述 | -| ---------- | -------------------------- | ---- | ---- | ---------------------------------------- | -| refreshing | boolean | 是 | - | 当前组件是否正在刷新。 | -| offset | Length | 否 | 16 | 刷新组件静止时距离父组件顶部的距离。 | -| friction | number \| string | 否 | 62 | 下拉摩擦系数，取值范围为0到100。
- 0表示下拉刷新容器不跟随手势下拉而下拉。
- 100表示下拉刷新容器紧紧跟随手势下拉而下拉。
- 数值越大，下拉刷新容器跟随手势下拉的反应越灵敏。 | +| 参数 | 参数名 | 必填 | 参数描述 | +| -------- | -------- | -------- | -------- | +| refreshing | boolean | 是 | 当前组件是否正在刷新。
该参数支持[$$](../../ui/ts-syntactic-sugar.md)双向绑定变量。 | +| offset | string \| number | 否 | 刷新组件静止时距离父组件顶部的距离。
默认值：16，单位vp | +| friction | number \| string | 否 | 下拉摩擦系数，取值范围为0到100。
默认值：62
- 0表示下拉刷新容器不跟随手势下拉而下拉。
- 100表示下拉刷新容器紧紧跟随手势下拉而下拉。
- 数值越大，下拉刷新容器跟随手势下拉的反应越灵敏。 | + ## 事件 -| 名称 | 描述 | -| ---------------------------------------- | ------------------------------- | -| onStateChange(callback: (state: RefreshStatus) => void) | 当前刷新状态变更时，触发回调。
state：刷新状态。 | -| onRefreshing(callback: () => void) | 进入刷新状态时触发回调。 | +| 名称 | 描述 | +| -------- | -------- | +| onStateChange(callback: (state: [RefreshStatus](#refreshstatus枚举说明)) => void)| 当前刷新状态变更时，触发回调。
- state：刷新状态。 | +| onRefreshing(callback: () => void)| 进入刷新状态时触发回调。 | ## RefreshStatus枚举说明 -| 名称 | 描述 | -| -------- | -------------------- | -| Inactive | 默认未下拉状态。 | -| Drag | 下拉中，下拉距离小于刷新距离。 | -| OverDrag | 下拉中，下拉距离超过刷新距离。 | -| Refresh | 下拉结束，回弹至刷新距离，进入刷新状态。 | -| Done | 刷新结束，返回初始状态（顶部）。 | +| 名称 | 描述 | +| -------- | -------- | +| Inactive | 默认未下拉状态。 | +| Drag | 下拉中，下拉距离小于刷新距离。 | +| OverDrag | 下拉中，下拉距离超过刷新距离。 | +| Refresh | 下拉结束，回弹至刷新距离，进入刷新状态。 | +| Done | 刷新结束，返回初始状态（顶部）。 | + ## 示例 @@ -57,7 +55,7 @@ struct RefreshExample { build() { Column() { - Refresh({refreshing: this.isRefreshing, offset: 120, friction: 100}) { + Refresh({ refreshing: $$this.isRefreshing, offset: 120, friction: 100 }) { Text('Pull Down and refresh: ' + this.counter) .fontSize(30) .margin(10) 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 aea905f8f281a2574ef72f1cecdd27f16c60fdb0..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 @@ -7,11 +7,6 @@ > 该组件从API Version 7开始支持。后续版本如有新增内容，则采用上角标单独标记该内容的起始版本。 -## 权限列表 - -无 - - ## 子组件 可以包含子组件。 @@ -19,20 +14,22 @@ ## 接口 -Row(value?:{space?: string | number}) +Row(value?:{space?: number | string }) **参数：** -| 参数名 | 参数类型 | 必填 | 参数描述 | -| ------ | -------------------------- | ---- | ---------------------------------------- | -| space | string \| number | 否 | 横向布局元素间距。
默认值：0，单位vp | +| 参数名 | 参数类型 | 必填 | 参数描述 | +| -------- | -------- | -------- | -------- | +| space | string \| number | 否 | 横向布局元素间距。
默认值：0，单位vp | + ## 属性 -| 名称 | 参数类型 | 默认值 | 描述 | -| ---------------- | --------------------------------- | -------------------- | ----------------- | -| alignItems | [VerticalAlign](ts-appendix-enums.md#verticalalign) | VerticalAlign.Center | 在垂直方向上子组件的对齐格式。 | -| justifyContent8+ | [FlexAlign](ts-appendix-enums.md#flexalign) | FlexAlign.Start | 设置子组件在水平方向上的对齐格式。 | +| 名称 | 参数类型 | 描述 | +| -------- | -------- | -------- | +| alignItems | [VerticalAlign](ts-appendix-enums.md#verticalalign) | 设置子组件在垂直方向上的对齐格式。
默认值：VerticalAlign.Center | +| justifyContent8+ | [FlexAlign](ts-appendix-enums.md#flexalign) | 设置子组件在水平方向上的对齐格式。
FlexAlign.Start | + ## 示例 @@ -43,38 +40,41 @@ Row(value?:{space?: string | number}) 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 de31180e75a5cdfe34c2f45b50d3832fc2c1cc69..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 @@ -1,15 +1,11 @@ # RowSplit -将子组件横向布局，并在每个子组件之间插入一根纵向的分割线。 - > **说明：** -> -> 该组件从API Version 7开始支持。后续版本如有新增内容，则采用上角标单独标记该内容的起始版本。 +> 该组件从API Version 7开始支持。后续版本如有新增内容，则采用上角标单独标记该内容的起始版本。 -## 权限列表 +将子组件横向布局，并在每个子组件之间插入一根纵向的分割线。 -无 ## 子组件 @@ -24,12 +20,14 @@ RowSplit() ## 属性 -| 名称 | 参数类型 | 描述 | -| ---------- | ------- | ------------------ | -| resizeable | boolean | 分割线是否可拖拽，默认为false。 | +| 名称 | 参数类型 | 描述 | +| -------- | -------- | -------- | +| resizeable | boolean | 分割线是否可拖拽，默认为false。 | > **说明：** -> 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 eb38866023d90d28af93916eea4ac33ceba5879d..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 @@ -1,11 +1,12 @@ # Scroll -可滑动的容器组件，当子组件的布局尺寸超过父组件的视口时，内容可以滑动。 +可滚动的容器组件，当子组件的布局尺寸超过父组件的尺寸时，内容可以滚动。 > **说明：** -> > - 该组件从API version 7开始支持。后续版本如有新增内容，则采用上角标单独标记该内容的起始版本。 -> - 该组件回弹的前提是要有滑动。内容小于一屏时，没有回弹效果。 +> - 该组件嵌套List子组件滚动时，若List不设置宽高，则默认全部加载，在对性能有要求的场景下建议指定List的宽高。 +> - 该组件滚动的前提是主轴方向大小小于内容大小。 +> - 该组件回弹的前提是要有滚动。内容小于一屏时，没有回弹效果。 ## 子组件 @@ -17,37 +18,42 @@ Scroll(scroller?: Scroller) - ## 属性 -| 名称 | 参数类型 | 描述 | -| -------------- | --------------------------------------------- | ------------------------------------------------------------ | -| scrollable | ScrollDirection | 设置滑动方法。
默认值：ScrollDirection.Vertical | -| scrollBar | [BarState](ts-appendix-enums.md#barstate) | 设置滑动条状态。
默认值：BarState.Off | -| scrollBarColor | string \| number \| Color | 设置滑动条的颜色。 | -| scrollBarWidth | string \| number | 设置滑动条的宽度。 | -| edgeEffect | [EdgeEffect](ts-appendix-enums.md#edgeeffect) | 设置滑动效果，目前支持的滑动效果参见EdgeEffect的枚举说明。
默认值：EdgeEffect.None | +除支持[通用属性](ts-universal-attributes-size.md)外，还支持以下属性： -## ScrollDirection枚举说明 +| 名称 | 参数类型 | 描述 | +| -------------- | ---------------------------------------- | --------- | +| scrollable | [ScrollDirection](#scrolldirection枚举说明) | 设置滚动方向。
默认值：ScrollDirection.Vertical | +| scrollBar | [BarState](ts-appendix-enums.md#barstate) | 设置滚动条状态。
默认值：BarState.Off | +| scrollBarColor | string \| number \| [Color](ts-appendix-enums.md#color) | 设置滚动条的颜色。 | +| scrollBarWidth | string \| number | 设置滚动条的宽度。 | +| edgeEffect | [EdgeEffect](ts-appendix-enums.md#edgeeffect) | 设置滑动效果，目前支持的滑动效果参见EdgeEffect的枚举说明。
默认值：EdgeEffect.None | -| 名称 | 描述 | -| ---------- | ------------ | -| Horizontal | 仅支持水平方向滚动。 | -| Vertical | 仅支持竖直方向滚动。 | -| None | 不可滚动。 | -| Free | 支持竖直或水平方向滚动。 | +## ScrollDirection枚举说明 +| 名称 | 描述 | +| ---------- | ------------------------ | +| Horizontal | 仅支持水平方向滚动。 | +| Vertical | 仅支持竖直方向滚动。 | +| None | 不可滚动。 | +| Free(deprecated) | 支持竖直或水平方向滚动
从API version 9开始废弃| ## 事件 -| 名称 | 功能描述 | -| ---------------------------------------- | ----------------------------- | -| onScroll(event: (xOffset: number, yOffset: number) => void) | 滚动事件回调, 返回滚动时水平、竖直方向偏移量。 | -| onScrollEdge(event: (side: Edge) => void) | 滚动到边缘事件回调。 | -| onScrollEnd(event: () => void) | 滚动停止事件回调。 | +| 名称 | 功能描述 | +| ------------------------------------------------------------ | ------------------------------------------------------------ | +| onScrollBegin9+(event: (dx: number, dy: number) => { dxRemain: number, dyRemain: number }) | 滚动开始事件回调。
参数：
- dx：即将发生的水平方向滚动量。
- dy：即将发生的竖直方向滚动量。
返回值：
- dxRemain：水平方向滚动剩余量。
- dyRemain：竖直方向滚动剩余量。 | +| onScroll(event: (xOffset: number, yOffset: number) => void) | 滚动事件回调, 返回滚动时水平、竖直方向偏移量。 | +| onScrollEdge(event: (side: Edge) => void) | 滚动到边缘事件回调。 | +| onScrollEnd(event: () => void) | 滚动停止事件回调。 | + +> **说明：** +> +> 若通过onScrollBegin事件和scrollBy方法实现容器嵌套滚动，需设置子滚动节点的EdgeEffect为None。如Scroll嵌套List滚动时，List组件的edgeEffect属性需设置为EdgeEffect.None。 ## Scroller -可滑动容器组件的控制器，可以将此组件绑定至容器组件，然后通过它控制容器组件的滑动，目前支持绑定到List、Scroll、ScrollBar上。 +可滚动容器组件的控制器，可以将此组件绑定至容器组件，然后通过它控制容器组件的滚动，同一个控制器不可以控制多个容器组件，目前支持绑定到List、Scroll、ScrollBar上。 ### 导入对象 @@ -66,38 +72,54 @@ scrollTo(value: { xOffset: number | string, yOffset: number | string, animation? **参数：** -| 参数名 | 参数类型 | 必填 | 参数描述 | -| --------- | ---------------------------------------- | ---- | ---------------------------------------- | -| xOffset | number \| string | 是 | 水平滑动偏移。 | -| yOffset | number \| string | 是 | 竖直滑动偏移。 | -| animation | {
duration: number,
curve: [Curve](ts-appendix-enums.md#curve)
} | 否 | 动画配置：
- duration: 滑动时长设置。
- curve: 滑动曲线设置。 | +| 参数名 | 参数类型 | 必填 | 参数描述 | +| --------- | ------------------------------------------------------------ | ---- | ------------------------------------------------------------ | +| xOffset | Length | 是 | 水平滑动偏移。 | +| yOffset | Length | 是 | 竖直滑动偏移。 | +| animation | {
duration: number,
curve: [Curve](ts-animatorproperty.md)
} | 否 | 动画配置：
- duration: 滚动时长设置。
- curve: 滚动曲线设置。 | + ### scrollEdge -scrollEdge(value: [Edge](ts-appendix-enums.md#edge)): void +scrollEdge(value: Edge): void + + +滚动到容器边缘。 +**参数：** + +| 参数名 | 参数类型 | 必填 | 参数描述 | +| ----- | ---- | ---- | --------- | +| value | [Edge](ts-appendix-enums.md#edge) | 是 | 滚动到的边缘位置。 | -滑动到容器边缘。 ### scrollPage scrollPage(value: { next: boolean, direction?: Axis }): void -滑动到下一页或者上一页。 +滚动到下一页或者上一页。 **参数：** -| 参数名 | 参数类型 | 必填 | 参数描述 | -| --------- | --------------------------------- | ---- | ------------------------------ | -| next | boolean | 是 | 是否向下翻页。true表示向下翻页，false表示向上翻页。 | -| direction | [Axis](ts-appendix-enums.md#axis) | 否 | 设置滑动方向为水平或竖直方向。 | +| 参数名 | 参数类型 | 必填 | 参数描述 | +| --------- | ------- | ---- | ------------------------------ | +| next | boolean | 是 | 是否向下翻页。true表示向下翻页，false表示向上翻页。 | +| direction(deprecated) | [Axis](ts-appendix-enums.md#axis) | 否 | 设置滚动方向为水平或竖直方向。
从API version 9开始废弃 | + ### currentOffset currentOffset() -返回当前的滑动偏移量。 +返回当前的滚动偏移量。 + +**返回值** + +| 类型 | 描述 | +| ---------------------------------------- | ---------------------------------------- | +| {
xOffset: number,
yOffset: number
} | xOffset: 水平滑动偏移;
yOffset: 竖直滑动偏移。 | + ### scrollToIndex @@ -108,23 +130,46 @@ scrollToIndex(value: number): void > **说明：** +> > 仅支持list组件。 **参数：** +| 参数名 | 参数类型 | 必填 | 参数描述 | +| ------ | -------- | ---- | ---------------------------------- | +| value | number | 是 | 要滑动到的列表项在列表中的索引值。 | + + +### scrollBy9+ + +scrollBy(dx: Length, dy: Length): void + + +滑动指定距离。 + + +> **说明：** +> +> 仅支持Scroll组件。 + +**参数：** + | 参数名 | 参数类型 | 必填 | 参数描述 | | ----- | ------ | ---- | ----------------- | -| value | number | 是 | 要滑动到的列表项在列表中的索引值。 | +| dx | Length | 是 | 水平方向滚动距离，不支持百分比形式。 | +| dy | Length | 是 | 竖直方向滚动距离，不支持百分比形式。 | + ## 示例 +### 示例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 }) { @@ -142,38 +187,99 @@ 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 100') - .onClick(() => { // 点击后下滑100.0距离 - this.scroller.scrollTo({ xOffset: 0, yOffset: this.scroller.currentOffset().yOffset + 100 }) + Button('scroll 150') + .onClick(() => { // 点击后下滑指定距离150.0vp + 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 }); + }) + .margin({ top: 60, left: 20 }) Button('back top') .onClick(() => { // 点击后回到顶部 - this.scroller.scrollEdge(Edge.Top) + this.scroller.scrollEdge(Edge.Top); }) - .margin({ top: 60, left: 20 }) + .margin({ top: 110, left: 20 }) Button('next page') - .onClick(() => { // 点击后下滑到底部 - this.scroller.scrollPage({ next: true }) + .onClick(() => { // 点击后滑到下一页 + this.scroller.scrollPage({ next: true }); }) - .margin({ top: 110, left: 20 }) + .margin({ top: 170, left: 20 }) }.width('100%').height('100%').backgroundColor(0xDCDCDC) } } ```  + +### 示例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(); + + build() { + Flex() { + Scroll(this.scroller) { + Column() { + Text("Scroll Area") + .width("100%").height("40%").backgroundColor(0X330000FF) + .fontSize(16).textAlign(TextAlign.Center) + + List({ space: 20 }) { + ForEach(this.arr, (item) => { + ListItem() { + Text("ListItem" + item) + .width("100%").height("100%").borderRadius(15) + .fontSize(16).textAlign(TextAlign.Center).backgroundColor(Color.White) + }.width("100%").height(100) + }, item => item) + } + .width("100%").height("50%").edgeEffect(EdgeEffect.None) + .onReachStart(() => { + this.listPosition = 0; + }) + .onReachEnd(() => { + 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.listPosition = 1; + return { dxRemain: dx, dyRemain: dy }; + }) + + Text("Scroll Area") + .width("100%").height("40%").backgroundColor(0X330000FF) + .fontSize(16).textAlign(TextAlign.Center) + } + } + .width("100%").height("100%") + }.width('100%').height('100%').backgroundColor(0xDCDCDC).padding(20) + } +} +``` + + \ No newline at end of file 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 6f43e1ef3d5a307b85fdedbe3668c357e79f80ca..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,24 +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 | 1 | 默认占用列数，指useSizeType属性没有设置对应尺寸的列数（span)时，占用的栅格列数。
> **说明：**
> 设置了栅格span属性，组件的宽度由栅格布局决定。 | -| gridOffset | number | 0 | 默认偏移列数，指useSizeType属性没有设置对应尺寸的偏移(offset)时， 当前组件沿着父组件Start方向，偏移的列数，也就是当前组件位于第n列。
> **说明：**
> -配置该属性后，当前组件在父组件水平方向的布局不再跟随父组件原有的布局方式，而是沿着父组件的Start方向偏移一定位移。
> -偏移位移 = （列宽 + 间距）\* 列数。
> -设置了偏移(gridOffset)的组件之后的兄弟组件会根据该组件进行相对布局，类似相对布局。 | +| 名称 | 参数类型 | 描述 | +| ----------- | ------------------------------------------------------------ | ------------------------------------------------------------ | +| 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 | ## 示例 @@ -28,41 +24,76 @@ @Entry @Component struct GridContainerExample1 { - 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) + 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) + + 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 }) } } ``` @@ -77,4 +108,8 @@ struct GridContainerExample1 { **图3** 设备宽度为LG - \ No newline at end of file + + +**图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 a6f839550ae1b3196f28458940a5d4be99bfb12c..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,5 +1,7 @@ # 图像效果 +设置组件的模糊，阴影效果以及设置图片的图像效果。 + > **说明：** > 从API Version 7开始支持。后续版本如有新增内容，则采用上角标单独标记该内容的起始版本。 @@ -7,66 +9,117 @@ ## 属性 -| 名称 | 参数类型 | 默认值 | 描述 | -| ----------------------------- | ---------------------------------------- | ------ | ---------------------------------------- | -| 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。 | -| 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 | - | 为当前组件添加颜色叠加效果，入参为叠加的颜色。 | -| sepia | number | 0 | 将图像转换为深褐色。入参为图像反转的比例。值为1则完全是深褐色的，值为0图像无变化。 （百分比） | -| hueRotate | number \| string | '0deg' | 为当前组件添加色相旋转效果，入参为旋转的角度值，0deg时图像无变化。入参没有最大值，超过360deg时相当于又绕一圈，即，370deg和10deg的色相旋转效果相同。 | +| 名称 | 参数类型 | 默认值 | 描述 | +| ----------------------------- | ------------------------------------------------------------ | ------ | ------------------------------------------------------------ | +| blur | number | - | 为当前组件添加内容模糊效果，入参为模糊半径，模糊半径越大越模糊，为0时不模糊。 | +| backdropBlur | number | - | 为当前组件添加背景模糊效果，入参为模糊半径，模糊半径越大越模糊，为0时不模糊。 | +| 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](ts-appendix-enums.md#color) \| string \| [Resource](ts-types.md#resource) | - | 为当前组件添加颜色叠加效果，入参为叠加的颜色。 | +| sepia | number | 0 | 将图像转换为深褐色。入参为图像反转的比例。值为1则完全是深褐色的，值为0图像无变化。 （百分比） | +| 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 23a1f4329db73c2f9b262e2f56f49239d331df8c..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
@@ -1,21 +1,18 @@
# 布局约束
-> **说明：**
-> 从API Version 7开始支持。后续版本如有新增内容，则采用上角标单独标记该内容的起始版本。
-
+通过组件的宽高比和显示优先级约束组件显示效果。
-## 权限列表
-
-无
+> **说明：**
+>
+> 从API Version 7开始支持。后续版本如有新增内容，则采用上角标单独标记该内容的起始版本。
## 属性
-
-| 名称 | 参数说明 | 默认值 | 描述 |
-| -------- | -------- | -------- | -------- |
-| aspectRatio | number | - | 指定当前组件的宽高比。 |
-| displayPriority | number | - | 设置当前组件在布局容器中显示的优先级，当父容器空间不足时，低优先级的组件会被隐藏。> **说明：**
> 仅在Row/Column/Flex(单行)容器组件中生效。 | +| 名称 | 参数说明 | 描述 | +| --------------- | ------ | ---------------------------------------- | +| aspectRatio | number | 指定当前组件的宽高比，aspectRatio = width/height。 | +| displayPriority | number | 设置当前组件在布局容器中显示的优先级，当父容器空间不足时，低优先级的组件会被隐藏。
**说明：**
仅在Row/Column/Flex(单行)容器组件中生效。 | ## 示例 @@ -25,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) => { @@ -57,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) } @@ -75,40 +75,46 @@ struct AspectRatioExample { **图2** 横屏显示
 -``` +```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 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 + // 显示容器大小 + 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 } + ] + @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) @@ -116,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 b3c1c170691fc31b48d5669824562275ac91a3e1..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 @@ -1,5 +1,7 @@ # 位置设置 +设置组件的对齐方式、布局方向和显示位置。 + > **说明：** > > 从API Version 7开始支持。后续版本如有新增内容，则采用上角标单独标记该内容的起始版本。 @@ -8,25 +10,27 @@ ## 属性 -| 名称 | 参数类型 | 描述 | -| ---------- | ------------------------------------------------------------ | ------------------------------------------------------------ | -| align | [Alignment](ts-appendix-enums.md#alignment) | 设置元素内容的对齐方式，只有当设置的width和height大小超过元素本身内容大小时生效。
默认值：Alignment.Center | -| direction | [Direction](ts-appendix-enums.md#direction) | 设置元素水平方向的布局。
默认值：Direction.Auto | -| position | {
x: [Length](ts-types.md#length),
y: [Length](ts-types.md#length)
} | 使用绝对定位，设置元素锚点相对于父容器顶部起点的偏移位置。在布局容器中，设置该属性不影响父容器布局，仅在绘制时进行位置调整。 | -| markAnchor | {
x: [Length](ts-types.md#length),
y: [Length](ts-types.md#length)
} | 设置元素在位置定位时的锚点，以元素顶部起点作为基准点进行偏移。
默认值：
{
x: 0,
y: 1
} | -| offset | {
x: [Length](ts-types.md#length),
y: [Length](ts-types.md#length)
} | 相对布局完成位置坐标偏移量，设置该属性，不影响父容器布局，仅在绘制时进行位置调整。
默认值：
{
x: 0,
y: 1
} | +| 名称 | 参数类型 | 描述 | +| -------- | -------- | -------- | +| 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) | 设置元素在位置定位时的锚点，以元素左上角作为基准点进行偏移。通常配合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) @@ -35,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) @@ -43,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) } } @@ -51,8 +72,9 @@ struct PositionExample { } ``` - + +### 示例2 ```ts // xxx.ets @Entry @@ -60,44 +82,65 @@ struct PositionExample { 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 }) @@ -105,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 3c65b9b1f6591b2b12571864b3ae51444c8d091c..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 @@ -1,5 +1,7 @@ # Menu控制 +为组件绑定弹出式菜单，弹出式菜单以垂直列表形式显示菜单项，可通过长按、点击或鼠标右键触发。 + > **说明：** > > 从API Version 7开始支持。后续版本如有新增内容，则采用上角标单独标记该内容的起始版本。 @@ -8,16 +10,16 @@ ## 属性 -| 名称 | 参数类型 | 描述 | +| 名称 | 参数类型 | 描述 | | ---------------------------- | ------------------------------------------------------------ | ------------------------------------------------------------ | -| bindMenu | Array
responseType: [ResponseType](ts-appendix-enums.md#responsetype8) | 给组件绑定菜单，触发方式为长按或者右键点击，弹出菜单项需要自定义。 | +| bindMenu | Array<[MenuItem](#menuitem)> \| [CustomBuilder](ts-types.md#custombuilder8) | 给组件绑定菜单，点击后弹出菜单。弹出菜单项支持文本和自定义两种功能。 | +| bindContextMenu8+ | content: [CustomBuilder](ts-types.md#custombuilder8),
responseType: [ResponseType](ts-appendix-enums.md#responsetype8) | 给组件绑定菜单，触发方式为长按或者右键点击，弹出菜单项需要自定义。 | ## MenuItem -| 名称 | 类型 | 描述 | -| ------ | ----------------------- | ---------------------- | -| value | string | 菜单项文本。 | +| 名称 | 类型 | 描述 | +| ------ | ----------------------- | ----------- | +| value | string | 菜单项文本。 | | action | () => void | 点击菜单项的事件回调。 | @@ -30,7 +32,6 @@ @Entry @Component struct MenuExample { - build() { Column() { Text('click for Menu') @@ -61,7 +62,7 @@ struct MenuExample { ```ts // xxx.ets -import router from '@system.router' +import router from '@system.router'; @Entry @Component 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 f0ebd348ec68852cc8bcc67d9131c5deacd5a83b..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](ts-types.md#resource) | 元素的不透明度，取值范围为0到1，1表示为不透明，0表示为完全透明。
**说明：**
子组件可以继承父组件的此属性。
默认值：1 | +| 名称 | 参数类型 | 描述 | +| ------- | ---------------------------------------- | ---------------------------------------- | +| 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 bebc47e0ebffe61d08b6edf221ef4f604b595842..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 @@ -1,22 +1,16 @@ # 浮层 +设置组件的遮罩文本。 + > **说明：** > -> 从API Version 7开始支持。后续版本如有新增内容，则采用上角标单独标记该内容的起始版本。 - - -## 权限列表 - -无 - +> 从API Version 7开始支持。后续版本如有新增内容，则采用上角标单独标记该内容的起始版本。 ## 属性 - -| 名称 | 参数类型 | 默认值 | 描述 | -| ------- | ------------------------------------------------------------ | ------------------------------------------------------------ | ------------------------------------------------ | -| 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)为文本基于自身左上角的偏移量。文本默认处于组件左上角。
两者都设置时效果重叠，文本相对于组件方位定位后再基于当前位置文本的左上角进行偏移。 | ## 示例 @@ -33,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 ae882e08ac4b44096bf99dfcb21a15446866ac7a..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,5 +1,7 @@ # Popup控制 +给组件绑定popup弹窗，并设置弹窗内容，交互逻辑和显示状态。 + > **说明：** > > 从API Version 7开始支持。后续版本如有新增内容，则采用上角标单独标记该内容的起始版本。 @@ -8,109 +10,110 @@ ## 接口 -| 名称 | 参数类型 | 描述 | -| --------- | ------------------------------------------------------------ | ------------------------------------------------------------ | -| 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类型说明 -| 名称 | 类型 | 必填 | 描述 | -| --------------- | ------------------------------------------------------------ | ---- | ------------------------------------------------------------ | -| message | string | 是 | 弹窗信息内容。 | -| placementOnTop | boolean | 否 | 是否在组件上方显示，默认值为false。 | -| primaryButton | {
value: string,
action: () => void
} | 否 | 第一个按钮。
value: 弹窗里主按钮的文本。
action: 点击主按钮的回调函数。 | -| secondaryButton | {
value: string,
action: () => void
} | 否 | 第二个按钮。
value: 弹窗里辅助按钮的文本。
action: 点击辅助按钮的回调函数。 | -| onStateChange | (event:{isVisible: boolean }) => void | 否 | 弹窗状态变化事件回调，参数isVisible为弹窗当前的显示状态。 | +| 名称 | 类型 | 必填 | 描述 | +| -------------------------| ------------------------------------------------| -----| ----------------------------------------- | +| message | string | 是 | 弹窗信息内容。 | +| placementOnTop | boolean | 否 | 是否在组件上方显示，默认值为false。 | +| arrowOffset9+ | [Length](ts-types.md#length) | 否 | popup箭头在弹窗处的偏移。箭头在气泡上下方时，默认居左；箭头在气泡左右侧时，默认居上。 | +| primaryButton | {
value: string,
action: () => void
} | 否 | 第一个按钮。
value: 弹窗里主按钮的文本。
action: 点击主按钮的回调函数。 | +| secondaryButton | {
value: string,
action: () => void
} | 否 | 第二个按钮。
value: 弹窗里辅助按钮的文本。
action: 点击辅助按钮的回调函数。 | +| onStateChange | (event: { isVisible: boolean }) => void | 否 | 弹窗状态变化事件回调，参数isVisible为弹窗当前的显示状态。 | ## CustomPopupOptions8+类型说明 -| 名称 | 类型 | 必填 | 描述 | -| ------------- | ------------------------------------------------------- | ---- | ------------------------------------------------------------ | -| builder | [CustomBuilder](ts-types.md#custombuilder8) | 是 | 提示气泡内容的构造器。 | -| placement | [Placement](ts-appendix-enums.md#placement8) | 否 | 气泡组件优先显示的位置，当前位置显示不下时，会自动调整位置。
默认值：Placement.Bottom | -| maskColor | [ResourceColor](ts-types.md#resourcecolor) | 否 | 提示气泡遮障层的颜色。 | -| popupColor | [ResourceColor](ts-types.md#resourcecolor) | 否 | 提示气泡的颜色。 | -| enableArrow | boolean | 否 | 是否显示箭头，只有上、下方向的气泡会显示箭头。
默认值：true | -| autoCancel | boolean | 否 | 页面有操作时，是否自动关闭气泡
默认值：true | -| onStateChange | (event:{isVisible: boolean }) => void | 否 | 弹窗状态变化事件回调，参数为弹窗当前的显示状态。 | +| 名称 | 类型 | 必填 | 描述 | +| -------------------------| ------------------------- | ---- | ---------------------------------------------------- | +| builder | [CustomBuilder](ts-types.md#custombuilder8) | 是 | 提示气泡内容的构造器。 | +| placement | [Placement](ts-appendix-enums.md#placement8) | 否 | 气泡组件优先显示的位置，当前位置显示不下时，会自动调整位置。
默认值：Placement.Bottom | +| arrowOffset9+ | [Length](ts-types.md#length) | 否 | popup箭头在弹窗处的偏移。箭头在气泡上下方时，默认居左；箭头在气泡左右侧时，默认居上。 | +| maskColor | [ResourceColor](ts-types.md#resourcecolor) | 否 | 提示气泡遮障层的颜色。 | +| popupColor | [ResourceColor](ts-types.md#resourcecolor) | 否 | 提示气泡的颜色。 | +| enableArrow | boolean | 否 | 是否显示箭头。
从API Version 9开始，如果箭头所在方位侧的气泡长度不足以显示下箭头，则会默认不显示箭头。比如：placement设置为Left，但气泡高度小于箭头的宽度（32vp），则实际不会显示箭头。
默认值：true | +| autoCancel | boolean | 否 | 页面有操作时，是否自动关闭气泡。
默认值：true | +| onStateChange | (event: { isVisible: boolean }) => void | 否 | 弹窗状态变化事件回调，参数为弹窗当前的显示状态。 | ## 示例 - ```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') - .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') + // PopupOptions 类型设置弹框内容 + Button('PopupOptions') .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('secondaryButton click') + console.info('ok Button click') + } + }, + // 第二个按钮 + secondaryButton: { + value: 'cancle', + action: () => { + this.handlePopup = !this.handlePopup + 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 ff5c7cccc7a293ad4ae0c0856e4f63501a9c16ab..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,5 +1,7 @@ # 尺寸设置 +用于设置组件的宽高、边距。 + > **说明：** > > 从API Version 7开始支持。后续版本如有新增内容，则采用上角标单独标记该内容的起始版本。 @@ -8,15 +10,15 @@ ## 属性 -| 名称 | 参数说明 | 描述 | -| -------------- | ------------------------------------------------------------ | ------------------------------------------------------------ | -| width | [Length](ts-types.md#length) | 设置组件自身的宽度，缺省时使用元素自身内容需要的宽度。 | -| height | [Length](ts-types.md#length) | 设置组件自身的高度，缺省时使用元素自身内容需要的高度。 | -| size | {
width?: [Length](ts-types.md#length),
height?: [Length](ts-types.md#length)
} | 设置高宽尺寸。 | -| padding | [Padding](ts-types.md#padding) \| [Length](ts-types.md#length) | 设置内边距属性。
参数为Length类型时，四个方向内边距同时生效。
默认值：0 | -| margin | [Margin](ts-types.md#margin) \| [Length](ts-types.md#length) | 设置外边距属性。
参数为Length类型时，四个方向外边距同时生效。
默认值：0 | -| 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)
} | 设置约束尺寸，组件布局时，进行尺寸范围限制。
默认值：
{
minWidth: 0,
maxWidth: Infinity,
minHeight: 0,
maxHeight: Infinity
} | -| layoutWeight | number \| string | 容器尺寸确定时，元素与兄弟节点主轴布局尺寸按照权重进行分配，忽略本身尺寸设置，表示自适应占满剩余空间。
默认值：0
**说明：**
仅在Row/Column/Flex布局中生效。 | +| 名称 | 参数说明 | 描述 | +| -------------- | ---------------------------------------- | ---------------------------------------- | +| width | [Length](ts-types.md#length) | 设置组件自身的宽度，缺省时使用元素自身内容需要的宽度。若子组件的宽大于父组件的宽，则会画出父组件的范围。 | +| height | [Length](ts-types.md#length) | 设置组件自身的高度，缺省时使用元素自身内容需要的高度。若子组件的高大于父组件的高，则会画出父组件的范围。 | +| size | {
width?: [Length](ts-types.md#length),
height?: [Length](ts-types.md#length)
} | 设置高宽尺寸。 | +| 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 | 父容器尺寸确定时，设置了layoutWeight属性的子元素与兄弟元素占主轴尺寸按照权重进行分配，忽略元素本身尺寸设置，表示自适应占满剩余空间。
**说明：**
仅在Row/Column/Flex布局中生效。| ## 示例 @@ -29,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) - // 权重0 + // 权重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 6179351068d82c32cd6f58538f47a704ff856fdc..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,28 +1,23 @@ # 文本样式设置 -> **说明：** -> -> 从API Version 7开始支持。后续版本如有新增内容，则采用上角标单独标记该内容的起始版本。 - - 针对包含文本元素的组件，设置文本样式。 +> **说明：** +> +> 从API Version 7开始支持。后续版本如有新增内容，则采用上角标单独标记该内容的起始版本。 -## 权限列表 - -无 ## 属性 -| 名称 | 参数类型 | 默认值 | 描述 | -| ---------- | ------------------------ | --------------------------- | ---------------------------------------- | -| fontColor | Color | - | 设置文本颜色。 | -| fontSize | Length | - | 设置文本尺寸，Length为number类型时，使用fp单位。 | -| fontStyle | [FontStyle](ts-appendix-enums.md#fontstyle) | FontStyle.Normal | 设置文本的字体样式。 | -| fontWeight | number \|[FontWeight](ts-appendix-enums.md#fontweight) | FontWeight.FontWeightNormal | 设置文本的字体粗细，number类型取值[100, 900]，取值间隔为100，默认为400，取值越大，字体越粗。
提供常用枚举值，参考：FontWeight枚举说明。 | -| fontFamily | string | - | 设置文本的字体列表。使用多个字体，使用','进行分割，优先级按顺序生效。例如：'Arial, sans-serif'。 | +| 名称 | 参数类型 | 描述 | +| -----------| ---------------------------------------- | ------------------------------------ | +| 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) | 设置字体列表。默认字体'HarmonyOS Sans'，且当前只支持这种字体。| ## 示例 @@ -35,40 +30,38 @@ struct TextStyleExample { build() { Column({ space: 5 }) { Text('default text') - - Text('text font color red') - .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') + 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) .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 700349d0a0cefe05271e1c2995ecf99dad61b2a0..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开始支持。后续版本如有新增内容，则采用上角标单独标记该内容的起始版本。 @@ -10,18 +11,18 @@ ## 属性 -| 名称 | 参数类型 | 描述 | -| -------------- | --------------------------------------------- | ------------------------------------------------------------ | -| 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对象说明 -| 名称 | 类型 | 必填 | 默认值 | 描述 | -| ------ | ---------------------------- | ---- | ------ | --------------------------------------------------- | -| x | [Length](ts-types.md#length) | 否 | 0vp | 触摸点相对于组件本身左边沿的X坐标。
默认值：0vp | -| y | [Length](ts-types.md#length) | 否 | 0vp | 触摸点相对于组件本身左边沿的Y坐标。
默认值：0vp | -| width | [Length](ts-types.md#length) | 否 | 100% | 触摸热区范围的宽度。
默认值：100% | -| height | [Length](ts-types.md#length) | 否 | 100% | 触摸热区范围的高度。
默认值：100% | +## 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%' | > **说明：** > @@ -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 ba0cbbb206f96b16c4e65e9b031fa49547a4cc9f..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 @@ -1,21 +1,16 @@ # 显隐控制 +控制组件是否可见。 + > **说明：** > -> 从API Version 7开始支持。后续版本如有新增内容，则采用上角标单独标记该内容的起始版本。 - - -## 权限列表 - -无 - +> 从API Version 7开始支持。后续版本如有新增内容，则采用上角标单独标记该内容的起始版本。 ## 属性 - -| 名称 | 参数类型 | 默认值 | 描述 | -| ---------- | ---------- | ------------------ | ------------ | -| visibility | [Visibility](ts-appendix-enums.md#visibility) | Visibility.Visible | 控制当前组件显示或隐藏。 | +| 名称 | 参数类型 | 描述 | +| ---------- | ---------------------------- | ------------------------------------------ | +| visibility | [Visibility](ts-appendix-enums.md#visibility) | 控制当前组件显示或隐藏。注意，即使组件处于隐藏状态，在页面刷新时仍存在重新创建过程，因此当对性能有严格要求时建议使用[条件渲染](../../ui/ts-rending-control-syntax-if-else.md)代替。
默认值：Visibility.Visible| ## 示例 @@ -28,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 ef1cefcaf1bf94a564bf9ff97dc8d7a1153bb523..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,21 +1,18 @@ # Z序控制 +组件的Z序，设置组件的堆叠顺序。 + > **说明：** > > 从API Version 7开始支持。后续版本如有新增内容，则采用上角标单独标记该内容的起始版本。 -## 权限列表 - -无 - - ## 属性 -| 名称 | 参数类型 | 默认值 | 描述 | -| ------ | ------ | ---- | ---------------------------- | -| zIndex | number | 0 | 同一容器中兄弟组件显示层级关系，z值越大，显示层级越高。 | +| 名称 | 参数类型 | 描述 | +| -------- | -------- | -------- | +| zIndex | number | 同一容器中兄弟组件显示层级关系。zIndex值越大，显示层级越高，即zIndex值大的组件会覆盖在zIndex值小的组件上方。 | ## 示例 @@ -28,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 0bf7187ad5d6a3d2c81a3662f6487f269ab27c44..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 @@ -1,20 +1,17 @@ # 组件区域变化事件 +组件区域变化事件指组件显示的尺寸、位置等发生变化时触发的事件。 + > **说明：** > > 从API Version 8开始支持。后续版本如有新增内容，则采用上角标单独标记该内容的起始版本。 -## 权限列表 - -无 - - ## 事件 | 名称 | 支持冒泡 | 功能描述 | | ---------------------------------------- | ---- | ---------------------------------------- | -| onAreaChange(event: (oldValue: Area, newValue: Area) => void) | 否 | 组件区域变化时触发该回调，Area类型描述见[Area](../../ui/ts-types.md#area8)。 | +| onAreaChange(event: (oldValue: [Area](ts-types.md#area8), newValue: [Area](ts-types.md#area8)) => void) | 否 | 组件区域变化时触发该回调。 | ## 示例 @@ -25,7 +22,7 @@ @Component struct AreaExample { @State value: string = 'Text' - @State size1: string = '' + @State sizeValue: string = '' build() { Column() { @@ -36,13 +33,13 @@ struct AreaExample { }) .onAreaChange((oldValue: Area, newValue: Area) => { console.info(`Ace: on area change, oldValue is ${JSON.stringify(oldValue)} value is ${JSON.stringify(newValue)}`) - this.size1 = JSON.stringify(newValue) + this.sizeValue = JSON.stringify(newValue) }) - Text('new area is: \n' + this.size).margin({ right: 30, left: 30 }) + Text('new area is: \n' + this.sizeValue).margin({ right: 30, left: 30 }) } .width('100%').height('100%').margin({ top: 30 }) } } ``` - + \ 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 40ac6e8504339c3674300800aacff8fa67c8ba9b..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 @@ -1,16 +1,12 @@ # 按键事件 -按键事件指组件与键盘、遥控器等按键设备交互时触发的事件。 +按键事件指组件与键盘、遥控器等按键设备交互时触发的事件，适用于所有可交互组件（默认可获焦），例如Button。对于Text，Image等不可获焦组件，可以设置focusable属性为true后使用按键事件。 > **说明：** > > 从API Version 7开始支持。后续版本如有新增内容，则采用上角标单独标记该内容的起始版本。 -## 权限列表 - -无 - ## 事件 @@ -21,16 +17,16 @@ ## KeyEvent对象说明 - | 名称 | 类型 | 描述 | - | ------------------------------------- | --------------------------- | -------------------------- | - | type | [KeyType](ts-appendix-enums.md#keytype) | 按键的类型。 | - | keyCode | number | 按键的键码。 | - | keyText | string | 按键的键值。 | - | keySource | [KeySource](ts-appendix-enums.md#keysource) | 触发当前按键的输入设备类型。 | - | deviceId | number | 触发当前按键的输入设备ID。 | - | metaKey | number | 按键发生时元键的状态，1表示按压态，0表示未按压态。 | - | timestamp | number | 按键发生时的时间戳。 | - | stopPropagation | () => void | 阻塞事件冒泡传递。 | +| 名称 | 类型 | 描述 | +| ------------------------------------- | ---------------------------------------- | -------------------------- | +| type | [KeyType](ts-appendix-enums.md#keytype) | 按键的类型。 | +| [keyCode](../apis/js-apis-keycode.md) | number | 按键的键码。 | +| keyText | string | 按键的键值。 | +| keySource | [KeySource](ts-appendix-enums.md#keysource) | 触发当前按键的输入设备类型。 | +| deviceId | number | 触发当前按键的输入设备ID。 | +| metaKey | number | 按键发生时元键的状态，1表示按压态，0表示未按压态。 | +| timestamp | number | 按键发生时的时间戳。 | +| stopPropagation | () => void | 阻塞事件冒泡传递。 | ## 示例 @@ -61,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 b132dc619ce4271d1cb31e1b95173dc481650c93..a643804f19e9ee415ab663169999946bcafaf672 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 @@ -1,17 +1,14 @@ -# 应用代码文件访问规则 +# 文件访问规则 +应用代码中文件访问方法主要有下面两种： -应用代码文件可通过如下方式访问： +- **相对路径**：使用相对路径引用代码文件，以"../"访问上一级目录，以"./"访问当前目录，也可以省略不写。 +- **绝对路径**：使用当前模块根路径引用代码文件，比如：common/utils/utils。 -- 使用相对路径引用代码文件，比如：上一级目录：../common/utils/utils，当前目录：./common/utils/utils。 -- 使用当前模块根路径引用代码文件，比如：common/utils/utils。 - -- 公共代码文件推荐放在**common**目录下。 ## 示例 - ``` import { FoodData, FoodList } from "../common/utils/utils"; @@ -31,11 +28,10 @@ struct FoodCategoryList { } ``` -导入文件示例： +被导入文件utils.ets： -``` +```ts //common/utils/utils.ets - export class FoodData { name: string; constructor(name: string) { @@ -67,4 +63,4 @@ export struct FoodList { } } } -``` +``` \ No newline at end of file