diff --git a/zh-cn/application-dev/reference/arkui-ts/figures/sidebarContainer1.gif b/zh-cn/application-dev/reference/arkui-ts/figures/sidebarContainer1.gif new file mode 100644 index 0000000000000000000000000000000000000000..a4aa68ab14725566201a701b3fd10e6e11a868f3 Binary files /dev/null and b/zh-cn/application-dev/reference/arkui-ts/figures/sidebarContainer1.gif differ diff --git a/zh-cn/application-dev/reference/arkui-ts/figures/sidebarContainer2.gif b/zh-cn/application-dev/reference/arkui-ts/figures/sidebarContainer2.gif new file mode 100644 index 0000000000000000000000000000000000000000..bd91fd96b60f83ca9b1afd0bd6e61390b311b520 Binary files /dev/null and b/zh-cn/application-dev/reference/arkui-ts/figures/sidebarContainer2.gif differ diff --git a/zh-cn/application-dev/reference/arkui-ts/figures/sidebarcontainer.png b/zh-cn/application-dev/reference/arkui-ts/figures/sidebarcontainer.png deleted file mode 100644 index 3ffdcfd3f49600ab53aa5b2a1fb11c4ce5078386..0000000000000000000000000000000000000000 Binary files a/zh-cn/application-dev/reference/arkui-ts/figures/sidebarcontainer.png and /dev/null differ diff --git a/zh-cn/application-dev/reference/arkui-ts/figures/textExp1.png b/zh-cn/application-dev/reference/arkui-ts/figures/textExp1.png new file mode 100644 index 0000000000000000000000000000000000000000..15d8410388040337f52a039f946d20f3cc0504fc Binary files /dev/null and b/zh-cn/application-dev/reference/arkui-ts/figures/textExp1.png differ diff --git a/zh-cn/application-dev/reference/arkui-ts/figures/textExp2.png b/zh-cn/application-dev/reference/arkui-ts/figures/textExp2.png new file mode 100644 index 0000000000000000000000000000000000000000..f6d1aa365e071f3064e25fe45afa4ce4efcddb65 Binary files /dev/null and b/zh-cn/application-dev/reference/arkui-ts/figures/textExp2.png differ diff --git a/zh-cn/application-dev/reference/arkui-ts/figures/zh-cn_image_0000001174422918.gif b/zh-cn/application-dev/reference/arkui-ts/figures/zh-cn_image_0000001174422918.gif deleted file mode 100644 index 8b359a2d036a69fd442145d55e23031755c925c1..0000000000000000000000000000000000000000 Binary files a/zh-cn/application-dev/reference/arkui-ts/figures/zh-cn_image_0000001174422918.gif and /dev/null differ diff --git a/zh-cn/application-dev/reference/arkui-ts/figures/zh-cn_image_0000001219864155.gif b/zh-cn/application-dev/reference/arkui-ts/figures/zh-cn_image_0000001219864155.gif deleted file mode 100644 index 627fff6c85420f981d9ae844d0e53a77d254ac7c..0000000000000000000000000000000000000000 Binary files a/zh-cn/application-dev/reference/arkui-ts/figures/zh-cn_image_0000001219864155.gif and /dev/null differ 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 59ea8bf4922847804e96d2dad708696fb5885d85..c2fa88f621581a8f6d4e97251a341ee2019e8a71 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 @@ -44,8 +44,8 @@ ScrollBar(value: { scroller: Scroller, direction?: ScrollBarDirection, state?: B @Entry @Component struct ScrollBarExample { - private scroller: Scroller = new Scroller() - private arr: number[] = [0, 1, 2, 3, 4, 5, 6, 7, 8, 9] + private scroller: Scroller = new Scroller(); + private arr: number[] = [0, 1, 2, 3, 4, 5, 6, 7, 8, 9]; build() { Column() { 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 055451e0feea7c6140d477b19e42ed09a352c661..7ae1069f787a189102acc00b989cc8d25dc125d8 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 @@ -61,7 +61,7 @@ struct SelectExample { .selectedOptionFont({ size: 40, weight: 500, family: 'serif', style: FontStyle.Normal }) .optionFont({ size: 30, weight: 400, family: 'serif', style: FontStyle.Normal }) .onSelect((index: number) => { - console.info("Select:" + index) + console.info("Select:" + index); }) } } 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 3362e271b8c4e1f03dfef68bbb857bfa6df00d76..79498c8d67311ba7ff356a9c90e8358c80dd6c1d 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 @@ -28,12 +28,12 @@ Text(content?: string | Resource) | 名称 | 参数类型 | 描述 | | ----------------------- | ----------------------------------- | ------------------------------------------- | -| textAlign | [TextAlign](ts-appendix-enums.md#textalign) | 设置多行文本的文本对齐方式。
默认值：TextAlign.Start | +| 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 | 设置文本基线的偏移量。 | +| baselineOffset | number \| string | 设置文本基线的偏移量，默认值0。 | | letterSpacing | number \| string | 设置文本字符间距。 | | minFontSize | number \| string \| [Resource](ts-types.md#resource) | 设置文本最小显示字号。 | | maxFontSize | number \| string \| [Resource](ts-types.md#resource) | 设置文本最大显示字号。 | @@ -47,6 +47,8 @@ Text(content?: string | Resource) ## 示例 +### 示例1 +textAlign，textOverflow，maxLines，lineHeight使用示例。 ```ts // xxx.ets @Entry @@ -54,77 +56,184 @@ Text(content?: string | Resource) struct TextExample1 { build() { Flex({ direction: FlexDirection.Column, alignItems: ItemAlign.Start, justifyContent: FlexAlign.SpaceBetween }) { - Text('lineHeight').fontSize(9).fontColor(0xCCCCCC) - Text('This is the text with the line height set This is the text with the line height set This is the text with the line height set.') - .lineHeight(25).fontSize(12).border({ width: 1 }).padding(10) + // 文本水平方向对齐方式设置 + // 单行文本 + Text('textAlign').fontSize(9).fontColor(0xCCCCCC) + Text('TextAlign set to Center.') + .textAlign(TextAlign.Center) + .fontSize(12) + .border({ width: 1 }) + .padding(10) + .width('100%') + Text('TextAlign set to Start.') + .textAlign(TextAlign.Start) + .fontSize(12) + .border({ width: 1 }) + .padding(10) + .width('100%') + Text('TextAlign set to End.') + .textAlign(TextAlign.End) + .fontSize(12) + .border({ width: 1 }) + .padding(10) + .width('100%') - Text('TextOverflow').fontSize(9).fontColor(0xCCCCCC) - Text('This is the setting of textOverflow to none text content This is the setting of textOverflow to none text content.') + // 多行文本 + Text('This is the text content with textAlign set to Center.') + .textAlign(TextAlign.Center) + .fontSize(12) + .border({ width: 1 }) + .padding(10) + .width('100%') + Text('This is the text content with textAlign set to Start.') + .textAlign(TextAlign.Start) + .fontSize(12) + .border({ width: 1 }) + .padding(10) + .width('100%') + Text('This is the text content with textAlign set to End.') + .textAlign(TextAlign.End) + .fontSize(12) + .border({ width: 1 }) + .padding(10) + .width('100%') + + + // 文本超长时显示方式 + Text('TextOverflow+maxLines').fontSize(9).fontColor(0xCCCCCC) + // 超出maxLines截断内容展示 + Text('This is the setting of textOverflow to Clip text content This is the setting of textOverflow to None text content. This is the setting of textOverflow to Clip text content This is the setting of textOverflow to None text content.') .textOverflow({ overflow: TextOverflow.None }) - .fontSize(12).border({ width: 1 }).padding(10) - Text('This is the setting of textOverflow to Clip text content This is the setting of textOverflow to Clip text content.') - .textOverflow({ overflow: TextOverflow.Clip }) - .maxLines(1).fontSize(12).border({ width: 1 }).padding(10) - Text('This is set textOverflow to Ellipsis text content This is set textOverflow to Ellipsis text content.'.split('').join('\u200B')) + .maxLines(1) + .fontSize(12) + .border({ width: 1 }) + .padding(10) + + // 超出maxLines展示省略号 + Text('This is set textOverflow to Ellipsis text content This is set textOverflow to Ellipsis text content.'.split('') + .join('\u200B')) .textOverflow({ overflow: TextOverflow.Ellipsis }) - .maxLines(1).fontSize(12).border({ width: 1 }).padding(10) + .maxLines(1) + .fontSize(12) + .border({ width: 1 }) + .padding(10) - Text('decoration').fontSize(9).fontColor(0xCCCCCC) - Text('This is the text content with the decoration set to Underline and the color set to Red.') - .decoration({ type: TextDecorationType.Underline, color: Color.Red }) + Text('lineHeight').fontSize(9).fontColor(0xCCCCCC) + Text('This is the text with the line height set. This is the text with the line height set.') .fontSize(12).border({ width: 1 }).padding(10) - Text('This is the text content with the decoration set to LineThrough and the color set to Red.') - .decoration({ type: TextDecorationType.LineThrough, color: Color.Red }) - .fontSize(12).border({ width: 1 }).padding(10) - Text('This is the text content with the decoration set to Overline and the color set to Red.') - .decoration({ type: TextDecorationType.Overline, color: Color.Red }) + Text('This is the text with the line height set. This is the text with the line height set.') .fontSize(12).border({ width: 1 }).padding(10) + .lineHeight(20) }.height(600).width(350).padding({ left: 35, right: 35, top: 35 }) } } ``` +![textExp1](figures/textExp1.png) -![zh-cn_image_0000001219864155](figures/zh-cn_image_0000001219864155.gif) - +### 示例2 +decoration，baselineOffset，letterSpacing，textCase使用示例： ```ts -// xxx.ets @Entry @Component struct TextExample2 { build() { Flex({ direction: FlexDirection.Column, alignItems: ItemAlign.Start, justifyContent: FlexAlign.SpaceBetween }) { + Text('decoration').fontSize(9).fontColor(0xCCCCCC) + Text('This is the text content with the decoration set to LineThrough and the color set to Red.') + .decoration({ + type: TextDecorationType.LineThrough, + color: Color.Red + }) + .fontSize(12) + .border({ width: 1 }) + .padding(10) + .width('100%') + + + Text('This is the text content with the decoration set to Overline and the color set to Red.') + .decoration({ + type: TextDecorationType.Overline, + color: Color.Red + }) + .fontSize(12) + .border({ width: 1 }) + .padding(10) + .width('100%') + + + Text('This is the text content with the decoration set to Underline and the color set to Red.') + .decoration({ + type: TextDecorationType.Underline, + color: Color.Red + }) + .fontSize(12) + .border({ width: 1 }) + .padding(10) + .width('100%') + + // 文本基线偏移 + Text('baselineOffset').fontSize(9).fontColor(0xCCCCCC) + Text('This is the text content with baselineOffset 0.') + .baselineOffset(0) + .fontSize(12) + .border({ width: 1 }) + .padding(10) + .width('100%') + Text('This is the text content with baselineOffset 30.') + .baselineOffset(30) + .fontSize(12) + .border({ width: 1 }) + .padding(10) + .width('100%') + Text('This is the text content with baselineOffset -20.') + .baselineOffset(-20) + .fontSize(12) + .border({ width: 1 }) + .padding(10) + .width('100%') + + // 文本字符间距 + Text('letterSpacing').fontSize(9).fontColor(0xCCCCCC) + Text('This is the text content with letterSpacing 0.') + .letterSpacing(0) + .fontSize(12) + .border({ width: 1 }) + .padding(10) + .width('100%') + Text('This is the text content with letterSpacing 3.') + .letterSpacing(3) + .fontSize(12) + .border({ width: 1 }) + .padding(10) + .width('100%') + Text('This is the text content with letterSpacing -1.') + .letterSpacing(-1) + .fontSize(12) + .border({ width: 1 }) + .padding(10) + .width('100%') + Text('textCase').fontSize(9).fontColor(0xCCCCCC) Text('This is the text content with textCase set to Normal.') .textCase(TextCase.Normal) - .fontSize(12).border({ width: 1 }).padding(10).width('100%') + .fontSize(12) + .border({ width: 1 }) + .padding(10) + .width('100%') + // 文本全小写展示 Text('This is the text content with textCase set to LowerCase.') .textCase(TextCase.LowerCase) - .fontSize(12).border({ width: 1 }).padding(10).width('100%') + .fontSize(12) + .border({ width: 1 }) + .padding(10) + .width('100%') + // 文本全大写展示 Text('This is the text content with textCase set to UpperCase.') .textCase(TextCase.UpperCase) .fontSize(12).border({ width: 1 }).padding(10) - Text('textAlign').fontSize(9).fontColor(0xCCCCCC) - Text('This is the text content with textAlign set to Center.') - .textAlign(TextAlign.Center) - .fontSize(12).border({ width: 1 }).padding(10).width('100%') - Text('This is the text content with textAlign set to Start.') - .textAlign(TextAlign.Start) - .fontSize(12).border({ width: 1 }).padding(10).width('100%') - Text('This is the text content with textAlign set to End.') - .textAlign(TextAlign.End) - .fontSize(12).border({ width: 1 }).padding(10).width('100%') - - Text('baselineOffset').fontSize(9).fontColor(0xCCCCCC) - Text('This is the text content with baselineOffset set to 10.') - .baselineOffset(10).fontSize(12).border({ width: 1 }).padding(10).width('100%') - Text('This is the text content with baselineOffset set to 30.') - .baselineOffset(30).fontSize(12).border({ width: 1 }).padding(10).width('100%') - Text('This is the text content with baselineOffset set to -10.') - .baselineOffset(-10).fontSize(12).border({ width: 1 }).padding(10).width('100%') }.height(700).width(350).padding({ left: 35, right: 35, top: 35 }) } } ``` - -![zh-cn_image_0000001174422918](figures/zh-cn_image_0000001174422918.gif) +![textExp1](figures/textExp2.png) 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 feea880eb6a5486c8bbf2263ecfdc93bcb520ed6..67ca4f9ba5dbe8e217c59b5bbd7fd549dbade31b 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 @@ -48,14 +48,14 @@ TextPicker(options?: {range: string[]|Resource, selected?: number, value?: strin @Entry @Component struct TextPickerExample { - private select: number = 1 - private fruits: string[] = ['apple1', 'orange2', 'peach3', 'grape4'] + private select: number = 1; + private fruits: string[] = ['apple1', 'orange2', 'peach3', 'grape4']; build() { Column() { TextPicker({range: this.fruits, selected: this.select}) .onChange((value: string, index: number) => { - console.info('Picker item changed, value: ' + value + ', index: ' + index) + console.info('Picker item changed, value: ' + value + ', index: ' + index); }) } } 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 d03a2a041999f38c12d8dad5d2cd1f70e8656a7d..06b80c46bafca15944c3de474a6262e36cc32f77 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 @@ -50,8 +50,8 @@ Refresh\(value: \{ refreshing: boolean, offset?: number | string , fr @Entry @Component struct RefreshExample { - @State isRefreshing: boolean = false - @State counter: number = 0 + @State isRefreshing: boolean = false; + @State counter: number = 0; build() { Column() { @@ -61,14 +61,14 @@ struct RefreshExample { .margin(10) } .onStateChange((refreshStatus: RefreshStatus) => { - console.info('Refresh onStatueChange state is ' + refreshStatus) + console.info('Refresh onStatueChange state is ' + refreshStatus); }) .onRefreshing(() => { setTimeout(() => { - this.counter++ - this.isRefreshing = false + this.counter++; + this.isRefreshing = false; }, 1000) - console.log('onRefreshing test') + console.log('onRefreshing test'); }) } } diff --git a/zh-cn/application-dev/reference/arkui-ts/ts-container-sidebarcontainer.md b/zh-cn/application-dev/reference/arkui-ts/ts-container-sidebarcontainer.md index 3ef11f73e3e90adfc0eccd69fa76bbf51027be4d..4b92197e06d287a71eb73d2119eee436813d10a1 100644 --- a/zh-cn/application-dev/reference/arkui-ts/ts-container-sidebarcontainer.md +++ b/zh-cn/application-dev/reference/arkui-ts/ts-container-sidebarcontainer.md @@ -20,27 +20,27 @@ SideBarContainer( type?: SideBarContainerType ) | 参数名 | 参数类型 | 必填 | 参数描述 | | -------- | -------- | -------- | -------- | -| type | SideBarContainerType | 否 | 设置侧边栏的显示类型。
默认值：SideBarContainerType.Embed | +| type | [SideBarContainerType](#SideBarContainerType枚举说明) | 否 | 设置侧边栏的显示类型。
默认值：SideBarContainerType.Embed | ## SideBarContainerType枚举说明 | 名称 | 描述 | | -------- | -------- | | Embed | 侧边栏嵌入到组件内，和内容区并列显示。 | -| Overlay | 侧边栏浮在内容区上面。 | +| Overlay | 侧边栏悬浮在内容区上面显示。 | ## 属性 | 名称 | 参数类型 | 描述 | | -------- | -------- | -------- | -| showSideBar | boolean | 设置是否显示侧边栏。
默认值：true | -| controlButton | ButtonStyle | 设置侧边栏控制按钮的属性。 | +| showSideBar | boolean | 设置是否显示侧边栏。
默认值：false | +| controlButton | [ButtonStyle](#buttonstyle对象说明) | 设置侧边栏控制按钮的属性，包括定位，尺寸，图表等。 | | showControlButton | boolean | 设置是否显示控制按钮。
默认值：true | -| sideBarWidth | number \| Length9+ | 设置侧边栏的宽度。
默认值：200，单位vp | -| minSideBarWidth | number \| Length9+ | 设置侧边栏最小宽度。
默认值：200，单位vp | -| maxSideBarWidth | number \| Length9+ | 设置侧边栏最大宽度。
默认值：280，单位vp | +| sideBarWidth | number \| [Length](ts-types.md#length) | 设置侧边栏的宽度。
默认值：200，单位vp | +| minSideBarWidth | number \| [Length](ts-types.md#length) | 设置侧边栏最小宽度。
默认值：200，单位vp | +| maxSideBarWidth | number \| [Length](ts-types.md#length) | 设置侧边栏最大宽度。
默认值：280，单位vp | | autoHide9+ | boolean | 设置当侧边栏拖拽到小于最小宽度后，是否自动隐藏。
默认值：true | -| sideBarPosition9+ | SideBarPosition | 设置侧边栏显示位置。
默认值：SideBarPosition.Start | +| sideBarPosition9+ | [SideBarPosition](#sidebarposition9枚举说明) | 设置侧边栏显示位置。
默认值：SideBarPosition.Start | ## ButtonStyle对象说明 @@ -59,13 +59,6 @@ SideBarContainer( type?: SideBarContainerType ) | Start | 侧边栏位于容器左侧。 | | End | 侧边栏位于容器右侧。 | -## SideBarPosition9+枚举说明 - -| 名称 | 描述 | -| -------- | -------- | -| Start | 侧边栏位于容器左侧。 | -| End | 侧边栏位于容器右侧。 | - ## 事件 | 名称 | 功能描述 | @@ -80,14 +73,13 @@ SideBarContainer( type?: SideBarContainerType ) @Entry @Component struct SideBarContainerExample { - normalIcon : Resource = $r("app.media.icon") - selectedIcon: Resource = $r("app.media.icon") - @State arr: number[] = [1, 2, 3] - @State current: number = 1 + normalIcon: Resource = $r("app.media.icon"); + selectedIcon: Resource = $r("app.media.icon"); + @State arr: number[] = [1, 2, 3]; + @State current: number = 1; build() { - SideBarContainer(SideBarContainerType.Embed) - { + SideBarContainer(SideBarContainerType.Embed) { Column() { ForEach(this.arr, (item, index) => { Column({ space: 5 }) { @@ -98,28 +90,41 @@ struct SideBarContainerExample { .fontFamily('source-sans-pro,cursive,sans-serif') } .onClick(() => { - this.current = item + this.current = item; }) }, item => item) }.width('100%') .justifyContent(FlexAlign.SpaceEvenly) .backgroundColor('#19000000') - Column() { - Text('SideBarContainer content text1').fontSize(25) - Text('SideBarContainer content text2').fontSize(25) + Text('SideBarContainer content text.').fontSize(20) } .margin({ top: 50, left: 20, right: 30 }) } - .sideBarWidth(150) - .minSideBarWidth(50) - .maxSideBarWidth(300) + .showSideBar(true) // 显示侧边栏 + .controlButton({ + width: 30, + height: 30, + left: 30, + top: 30 + }) // 控制按钮属性 + .showControlButton(true) // 展示控制按钮 + .sideBarWidth(150) // 侧边栏宽度 + .minSideBarWidth(50) // 侧边栏最小宽度 + .maxSideBarWidth(300) //侧边栏最大宽度 + .autoHide(true) + .sideBarPosition(SideBarPosition.Start) //侧边栏位于容器左侧 .onChange((value: boolean) => { - console.info('status:' + value) + console.info('status:' + value); }) } } ``` +SideBarContainerType为Embed效果如下： + +![](figures/sidebarContainer1.gif) + +SideBarContainerType为Ovelay时效果如下： -![](figures/sidebarcontainer.png) +![](figures/sidebarContainer2.gif) diff --git a/zh-cn/application-dev/reference/arkui-ts/ts-universal-attributes-click.md b/zh-cn/application-dev/reference/arkui-ts/ts-universal-attributes-click.md index d1610c4254088fc5cb2dc1497ad665de8f80cb49..6df927abab9572f70a4d3d3374aad1ea960b88be 100644 --- a/zh-cn/application-dev/reference/arkui-ts/ts-universal-attributes-click.md +++ b/zh-cn/application-dev/reference/arkui-ts/ts-universal-attributes-click.md @@ -22,22 +22,22 @@ @Entry @Component struct TouchAbleExample { - @State text1: string = '' - @State text2: string = '' + @State text1: string = ''; + @State text2: string = ''; build() { Stack() { Rect() .fill(Color.Gray).width(150).height(150) .onClick(() => { - console.info(this.text1 = 'Rect Clicked') + console.info(this.text1 = 'Rect Clicked'); }) .overlay(this.text1, { align: Alignment.Bottom, offset: { x: 0, y: 20 } }) Ellipse() .fill(Color.Pink).width(150).height(80) .touchable(false) // 点击Ellipse区域，不会打印 “Ellipse Clicked” .onClick(() => { - console.info(this.text2 = 'Ellipse Clicked') + console.info(this.text2 = 'Ellipse Clicked'); }) .overlay(this.text2, { align: Alignment.Bottom, offset: { x: 0, y: 20 } }) }.margin(100)