diff --git a/zh-cn/application-dev/reference/arkui-ts/figures/align.png b/zh-cn/application-dev/reference/arkui-ts/figures/align.png new file mode 100644 index 0000000000000000000000000000000000000000..beed805dbff1ec1526bf034c011cf2c7b926eae8 Binary files /dev/null and b/zh-cn/application-dev/reference/arkui-ts/figures/align.png differ diff --git a/zh-cn/application-dev/reference/arkui-ts/figures/nozindex.png b/zh-cn/application-dev/reference/arkui-ts/figures/nozindex.png new file mode 100644 index 0000000000000000000000000000000000000000..f45fc5a75d1a71c6cdc4b35d7707b270770bbc68 Binary files /dev/null and b/zh-cn/application-dev/reference/arkui-ts/figures/nozindex.png differ diff --git a/zh-cn/application-dev/reference/arkui-ts/figures/opacity.png b/zh-cn/application-dev/reference/arkui-ts/figures/opacity.png new file mode 100644 index 0000000000000000000000000000000000000000..d95114ede941db77cf865d3fab288f602ddcc1d0 Binary files /dev/null and b/zh-cn/application-dev/reference/arkui-ts/figures/opacity.png differ diff --git a/zh-cn/application-dev/reference/arkui-ts/figures/position.png b/zh-cn/application-dev/reference/arkui-ts/figures/position.png new file mode 100644 index 0000000000000000000000000000000000000000..0c9e34bf611b4d51a49875d71f23fef24d6e2571 Binary files /dev/null and b/zh-cn/application-dev/reference/arkui-ts/figures/position.png differ diff --git a/zh-cn/application-dev/reference/arkui-ts/figures/size.png b/zh-cn/application-dev/reference/arkui-ts/figures/size.png new file mode 100644 index 0000000000000000000000000000000000000000..5170abe9fb68747018cecc57e27df68806bafac4 Binary files /dev/null and b/zh-cn/application-dev/reference/arkui-ts/figures/size.png differ diff --git a/zh-cn/application-dev/reference/arkui-ts/figures/visibility.png b/zh-cn/application-dev/reference/arkui-ts/figures/visibility.png new file mode 100644 index 0000000000000000000000000000000000000000..89018fade9d9bef19dfc8a55d4477ba309353871 Binary files /dev/null and b/zh-cn/application-dev/reference/arkui-ts/figures/visibility.png differ diff --git a/zh-cn/application-dev/reference/arkui-ts/figures/zindex.png b/zh-cn/application-dev/reference/arkui-ts/figures/zindex.png new file mode 100644 index 0000000000000000000000000000000000000000..8ce5723c4b47443c258ef6a6ffd0cb96296bb3a2 Binary files /dev/null and b/zh-cn/application-dev/reference/arkui-ts/figures/zindex.png differ 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 e60e84f306d7ad0e3a658b0c1fc18a2807458078..5a405eb21f549deeab2138e2bf8b240a3e4d9997 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 @@ -3,21 +3,16 @@ 通过组件的宽高比和显示优先级约束组件显示效果。 > **说明：** -> 从API Version 7开始支持。后续版本如有新增内容，则采用上角标单独标记该内容的起始版本。 - - -## 权限列表 - -无 +> +> 从API Version 7开始支持。后续版本如有新增内容，则采用上角标单独标记该内容的起始版本。 ## 属性 - -| 名称 | 参数说明 | 默认值 | 描述 | -| -------- | -------- | -------- | -------- | -| aspectRatio | number | - | 指定当前组件的宽高比。 | -| displayPriority | number | - | 设置当前组件在布局容器中显示的优先级，当父容器空间不足时，低优先级的组件会被隐藏。
>  **说明：**
> 仅在Row/Column/Flex(单行)容器组件中生效。 | +| 名称 | 参数说明 | 描述 | +| --------------- | ------ | ---------------------------------------- | +| aspectRatio | number | 指定当前组件的宽高比，aspectRatio = width/height。 | +| displayPriority | number | 设置当前组件在布局容器中显示的优先级，当父容器空间不足时，低优先级的组件会被隐藏。
**说明：**
仅在Row/Column/Flex(单行)容器组件中生效。 | ## 示例 @@ -27,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) => { @@ -59,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) } @@ -79,40 +77,44 @@ struct AspectRatioExample { ```ts class ContainerInfo { - label : string = '' - size : string = '' + label: string = '' + size: string = '' } class ChildInfo { - text : string = '' - priority : number = 0 + text: string = '' + priority: number = 0 } @Entry @Component struct DisplayPriorityExample { - private container : ContainerInfo[] = [ - {label: 'Big container', size: '90%'}, - {label: 'Middle container', size: '50%'}, - {label: 'Small container', size: '30%'} + // 显示容器大小 + private container: ContainerInfo[] = [ + { label: 'Big container', size: '90%' }, + { label: 'Middle container', size: '50%' }, + { label: 'Small container', size: '30%' } ] - private children : ChildInfo[] = [ - {text: '1\n(priority:2)', priority: 2}, - {text: '2\n(priority:1)', priority: 1}, - {text: '3\n(priority:3)', priority: 3}, - {text: '4\n(priority:1)', priority: 1}, - {text: '5\n(priority:2)', priority: 2} + private children: ChildInfo[] = [ + { text: '1\n(priority:2)', priority: 2 }, + { text: '2\n(priority:1)', priority: 1 }, + { text: '3\n(priority:3)', priority: 3 }, + { text: '4\n(priority:1)', priority: 1 }, + { text: '5\n(priority:2)', priority: 2 } ] - @State currentIndex : number = 0 + @State currentIndex: number = 0 build() { - Column({space: 10}) { + Column({ space: 10 }) { + // 切换父级容器大小 Button(this.container[this.currentIndex].label).backgroundColor(0x317aff) - .onClick((event: ClickEvent) => { + .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) @@ -120,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 2420c855d9ca1cc6c00ff298d718b1ec69e2f18b..9cb4a5ff2f163a9e2e0cae047440b51ca577f58d 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 @@ -3,24 +3,21 @@ 设置组件的对齐方式、布局方向和显示位置。 > **说明：** -> 从API Version 7开始支持。后续版本如有新增内容，则采用上角标单独标记该内容的起始版本。 - - -## 权限列表 - -无 +> +> 从API Version 7开始支持。后续版本如有新增内容，则采用上角标单独标记该内容的起始版本。 ## 属性 -| 名称 | 参数类型 | 默认值 | 描述 | -| -------- | -------- | -------- | -------- | -| align | [Alignment](ts-appendix-enums.md#alignment) | Center | 设置元素内容的对齐方式，只有当设置的width和height大小超过元素本身内容大小时生效。 | -| direction | [Direction](ts-appendix-enums.md#direction) | Auto | 设置元素水平方向的布局，可选值参照Direction枚举说明。 | -| position | {
x: Length,
y: Length
} | - | 使用绝对定位，设置元素锚点相对于父容器顶部起点偏移位置。在布局容器中，设置该属性不影响父容器布局，仅在绘制时进行位置调整。 | -| markAnchor | {
x: Length,
y: Length
} | {
x: 0,
y: 0
} | 设置元素在位置定位时的锚点，以元素顶部起点作为基准点进行偏移。 | -| offset | {
x: Length,
y: Length
} | {
x: 0,
y: 0
} | 相对布局完成位置坐标偏移量，设置该属性，不影响父容器布局，仅在绘制时进行位置调整。 | +| 名称 | 参数类型 | 描述 | +| -------- | -------- | -------- | +| align | [Alignment](ts-appendix-enums.md#alignment) | 设置元素内容的对齐方式，当元素的width和height大小大于元素本身内容大小时生效。
默认值：Alignment.Center | +| direction | [Direction](ts-appendix-enums.md#direction) | 设置元素水平方向的布局。
默认值：Direction.Auto | +| position | [Position](ts-types.md#position8) | 使用绝对定位，设置元素左上角相对于父容器左上角偏移位置。在布局容器中，设置该属性不影响父容器布局，仅在绘制时进行位置调整。 | +| markAnchor | [Position](ts-types.md#position8) | 相对定位，设置元素最终定位点，以元素顶部起点作为基准点进行偏移。
默认值：
{
x: 0,
y: 1
} | +| offset | [Position](ts-types.md#position8) | 相对布局完成位置坐标偏移量，设置该属性，不影响父容器布局，仅在绘制时进行位置调整。
默认值：
{
x: 0,
y: 1
} | +| 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：设置相对于锚点组件的对齐方式。 | ## 示例 @@ -29,11 +26,11 @@ // 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) @@ -42,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) @@ -50,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) } } @@ -58,54 +72,74 @@ struct PositionExample { } ``` -![zh-cn_image_0000001174264368](figures/zh-cn_image_0000001174264368.gif) +![align.png](figures/align.png) ```ts // xxx.ets @Entry @Component struct PositionExample2 { - build() { Column({ space: 20 }) { + // 设置子组件左上角相对于父组件左上角的偏移位置 Text('position').fontSize(12).fontColor(0xCCCCCC).width('90%') - Row({ space: 20 }) { - Text('1').size({ width: '45%', height: '50' }).backgroundColor(0xdeb887).border({ width: 1 }) .fontSize(16) - Text('2 position(25, 15)') - .size({ width: '60%', height: '30' }).backgroundColor(0xbbb2cb).border({ width: 1 }) - .fontSize(16).align(Alignment.Start) - .position({ x: 25, y: 15 }) + Row() { + Text('1').size({ width: '30%', height: '50' }).backgroundColor(0xdeb887).border({ width: 1 }).fontSize(16) + Text('2 position(30, 10)') + .size({ width: '60%', height: '30' }) + .backgroundColor(0xbbb2cb) + .border({ width: 1 }) + .fontSize(16) + .align(Alignment.Start) + .position({ x: 30, y: 10 }) Text('3').size({ width: '45%', height: '50' }).backgroundColor(0xdeb887).border({ width: 1 }).fontSize(16) Text('4 position(50%, 70%)') - .size({ width: '50%', height: '50' }).backgroundColor(0xbbb2cb).border({ width: 1 }).fontSize(16) + .size({ width: '50%', height: '50' }) + .backgroundColor(0xbbb2cb) + .border({ width: 1 }) + .fontSize(16) .position({ x: '50%', y: '70%' }) }.width('90%').height(100).border({ width: 1, style: BorderStyle.Dashed }) + // 相对于起点偏移，其中x为最终定位点距离起点水平方向间距，x>0往左，反之向右。 + // y为最终定位点距离起点垂直方向间距，y>0向上，反之向下 Text('markAnchor').fontSize(12).fontColor(0xCCCCCC).width('90%') Stack({ alignContent: Alignment.TopStart }) { Row() .size({ width: '100', height: '100' }) .backgroundColor(0xdeb887) - Image($r('app.media.ic_health_heart')) + Text('text') .size({ width: 25, height: 25 }) + .backgroundColor(Color.Green) .markAnchor({ x: 25, y: 25 }) - Image($r('app.media.ic_health_heart')) + Text('text') .size({ width: 25, height: 25 }) - .markAnchor({ x: 25, y: 25 }) - .position({ x: '100%', y: '100%' }) + .backgroundColor(Color.Green) + .markAnchor({ x: -100, y: -25 }) + Text('text') + .size({ width: 25, height: 25 }) + .backgroundColor(Color.Green) + .markAnchor({ x: 25, y: -25 }) }.margin({ top: 25 }).border({ width: 1, style: BorderStyle.Dashed }) + // 相对定位，x>0向右偏移，反之向左，y>0向下偏移，反之向上 Text('offset').fontSize(12).fontColor(0xCCCCCC).width('90%') Row() { Text('1').size({ width: '15%', height: '50' }).backgroundColor(0xdeb887).border({ width: 1 }).fontSize(16) - Text('2\noffset(15, 15)') - .size({ width: 120, height: '50' }).backgroundColor(0xbbb2cb).border({ width: 1 }) - .fontSize(16).align(Alignment.Start) - .offset({ x: 15, y: 15 }) + Text('2 offset(15, 30)') + .size({ width: 120, height: '50' }) + .backgroundColor(0xbbb2cb) + .border({ width: 1 }) + .fontSize(16) + .align(Alignment.Start) + .offset({ x: 15, y: 30 }) Text('3').size({ width: '15%', height: '50' }).backgroundColor(0xdeb887).border({ width: 1 }).fontSize(16) - Text('4\noffset(-10%, 20%)') - .size({ width: 150, height: '50' }) .backgroundColor(0xbbb2cb).border({ width: 1 }).fontSize(16) - .offset({ x: '-10%', y: '20%' }) + Text('4offset(-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 }) @@ -113,4 +147,4 @@ struct PositionExample2 { } ``` -![zh-cn_image_0000001174104392](figures/zh-cn_image_0000001174104392.gif) +![position.png](figures/position.png) 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 aa285f3ccb765adc4c27712a8182b1838a6f2d8b..7cbeabbe32f30ae357ae8e683ac2b69346419f90 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 @@ -1,23 +1,18 @@ # 透明度设置 -> **说明：** -> 从API Version 7开始支持。后续版本如有新增内容，则采用上角标单独标记该内容的起始版本。 - - 设置组件的透明度。 - -## 权限列表 - -无 +> **说明：** +> +> 从API Version 7开始支持。后续版本如有新增内容，则采用上角标单独标记该内容的起始版本。 ## 属性 -| 名称 | 参数类型 | 默认值 | 描述 | -| -------- | -------- | -------- | -------- | -| opacity | number \| [Resource](../../ui/ts-types.md#resource类型) | 1 | 元素的不透明度，取值范围为0到1，1表示为不透明，0表示为完全透明。 | +| 名称 | 参数类型 | 描述 | +| ------- | ---------------------------------------- | ---------------------------------------- | +| opacity | number \| [Resource](ts-types.md#resource) | 元素的不透明度，取值范围为0到1，1表示不透明，0表示完全透明, 达到隐藏组件效果，但是在布局中占位，与[Visibility](ts-universal-attributes-visibility.md).Hidden效果相似
默认值：1 | ## 示例 @@ -35,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 }) @@ -42,4 +41,4 @@ struct OpacityExample { } ``` -![zh-cn_image_0000001219662647](figures/zh-cn_image_0000001219662647.gif) +![opacity.png](figures/opacity.png) 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 46c242c454ce64ba344588d96356971e649c5728..5615560b293786cc59377977822b2c4adb27ddcf 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 @@ -3,21 +3,18 @@ 设置组件的遮罩文本。 > **说明：** +> > 从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}
} | 在当前组件上，增加遮罩文本，布局与当前组件相同。 | - +| 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)为文本基于左上角的偏移量。默认居中于组件。 | ## 示例 @@ -32,9 +29,12 @@ struct OverlayExample { Text('floating layer') .fontSize(12).fontColor(0xCCCCCC).maxLines(1) Column() { - Image($r('app.media.img')) + Text().backgroundColor(Color.Red) .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-size.md b/zh-cn/application-dev/reference/arkui-ts/ts-universal-attributes-size.md index 6c807d77f2bd40fc776f5a13fe4e770af314c6b3..35083e084df3e14fb1f655afd60478363e0d6b1d 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,28 +1,24 @@ # 尺寸设置 -用于设置组件的宽高、边距等显示尺寸进行设置。 +用于设置组件的宽高、边距。 > **说明：** -> 从API Version 7开始支持。后续版本如有新增内容，则采用上角标单独标记该内容的起始版本。 - - -## 权限列表 - -无 +> +> 从API Version 7开始支持。后续版本如有新增内容，则采用上角标单独标记该内容的起始版本。 ## 属性 -| 名称 | 参数说明 | 默认值 | 描述 | -| -------- | -------- | -------- | -------- | -| width | Length | - | 设置组件自身的宽度，缺省时使用元素自身内容需要的宽度。 | -| height | Length | - | 设置组件自身的高度，缺省时使用元素自身内容需要的高度。 | -| size | {
width?: Length,
height?: Length
} | - | 设置高宽尺寸。 | -| padding | {
top?: Length,
right?: Length,
bottom?: Length,
left?: Length
} \| Length | 0 | 设置内边距属性。
参数为Length类型时，四个方向内边距同时生效。 | -| margin | {
top?: Length,
right?: Length,
bottom?: Length,
left?: Length
}
\| Length | 0 | 设置外边距属性。
参数为Length类型时，四个方向外边距同时生效。 | -| constraintSize | {
minWidth?: Length,
maxWidth?: Length,
minHeight?: Length,
maxHeight?: Length
} | {
minWidth: 0,
maxWidth: Infinity,
minHeight: 0,
maxHeight: Infinity
} | 设置约束尺寸，组件布局时，进行尺寸范围限制。constraintSize的优先级高于Width和Height。 | -| 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类型时，上下左右内边距同时生效。
参数为Padding对象时，可以分别设置上下左右的内边距。
当padding设置百分比时，上下左右内边距均以父容器的width作为基础值。 | +| margin | [Margin](ts-types.md#margin) \| [Length](ts-types.md#length) | 设置外边距属性，默认无外边距。
参数为Length类型时，上下左右外边距同时生效。
参数为Margin对象时，可以分别设置上下左右的外边距。
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布局中生效。| ## 示例 @@ -35,30 +31,41 @@ struct SizeExample { build() { Column({ space: 10 }) { Text('margin and padding:').fontSize(12).fontColor(0xCCCCCC).width('90%') - // 宽度80 ,高度80 ,内外边距20 Row() { + // 宽度80 ,高度80 ,外边距20(蓝色区域），内边距10（白色区域） Row() { - Row().size({ width: '100%', height: '100%' }).backgroundColor(0xAFEEEE) - }.width(80).height(80).padding(20).margin(20).backgroundColor(0xFDF5E6) - }.backgroundColor(0xFFA500) + Row().size({ width: '100%', height: '100%' }).backgroundColor(Color.Yellow) + } + .width(80) + .height(80) + .padding(10) + .margin(20) + .backgroundColor(Color.White) + }.backgroundColor(Color.Blue) + + Text('constraintSize').fontSize(12).fontColor(0xCCCCCC).width('90%') + Text('this is a Text.this is a Text.this is a Text.this is a Text.this is a Text.this is a Text.this is a Text.this is a Text.this is a Text.this is a Text.this is a Text.this is a Text.this is a Text.this is a Text.this is a Text') + .width('90%') + .constraintSize({ maxWidth: 200 }) Text('layoutWeight').fontSize(12).fontColor(0xCCCCCC).width('90%') - // 容器尺寸确定时，元素与兄弟节点主轴布局尺寸按照权重进行分配，忽略本身尺寸设置。 + // 父容器尺寸确定时，设置了layoutWeight的子元素在主轴布局尺寸按照权重进行分配，忽略本身尺寸设置。 Row() { - // 权重1 + // 权重1，占主轴剩余空间1/3 Text('layoutWeight(1)') .size({ width: '30%', height: 110 }).backgroundColor(0xFFEFD5).textAlign(TextAlign.Center) .layoutWeight(1) - // 权重2 + // 权重2，占主轴剩余空间2/3 Text('layoutWeight(2)') .size({ width: '30%', height: 110 }).backgroundColor(0xF5DEB3).textAlign(TextAlign.Center) .layoutWeight(2) - // 权重默认0 + // 未设置layoutWeight属性，组件按照自身尺寸渲染 Text('no layoutWeight') .size({ width: '30%', height: 110 }).backgroundColor(0xD2B48C).textAlign(TextAlign.Center) }.size({ width: '90%', height: 140 }).backgroundColor(0xAFEEEE) }.width('100%').margin({ top: 5 }) - }} + } +} ``` -![zh-cn_image_0000001174264384](figures/zh-cn_image_0000001174264384.gif) +![Size.png](figures/Size.png) 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 900ed973ab009749201d7b351eef5e4c58a04008..30da982b6ac9a9f39af7a497c37f772ff5f59cc4 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 @@ -5,24 +5,18 @@ > 从API Version 7开始支持。后续版本如有新增内容，则采用上角标单独标记该内容的起始版本。 -针对包含文本元素的组件，设置文本样式。 - - -## 权限列表 - -无 - +针对包含文本元素的组件，设置字体样式。 ## 属性 -| 名称 | 参数类型 | 默认值 | 描述 | -| -------- | -------- | -------- | -------- | -| fontColor | [ResourceColor](../../ui/ts-types.md) | - | 设置文本颜色。 | -| fontSize | Length \| [Resource](../../ui/ts-types.md#resource类型) | - | 设置文本尺寸，Length为number类型时，使用fp单位。 | -| fontStyle | [FontStyle](ts-appendix-enums.md#fontstyle) | FontStyle.Normal | 设置文本的字体样式。 | -| fontWeight | number \| [FontWeight](ts-appendix-enums.md#fontweight) \| string | FontWeight.FontWeightNormal | 设置文本的字体粗细，number类型取值[100, 900]，取值间隔为100，默认为400，取值越大，字体越粗。
提供常用枚举值，参考：FontWeight枚举说明。 | -| fontFamily | string \| [Resource](../../ui/ts-types.md#resource类型) | - | 设置文本的字体列表。使用多个字体，使用','进行分割，优先级按顺序生效。例如：'Arial, sans-serif'。 | +| 名称 | 参数类型 | 描述 | +| -----------| ---------------------------------------- | ------------------------------------ | +| fontColor | [ResourceColor](ts-types.md#resourcecolor) | 设置文本颜色。 | +| fontSize | Length \| [Resource](ts-types.md#resource) | 设置文本尺寸，Length为number类型时，使用fp单位。 | +| fontStyle | [FontStyle](ts-appendix-enums.md#fontstyle) | 设置文本的字体样式。
默认值：FontStyle.Normal | +| fontWeight | number \| [FontWeight](ts-appendix-enums.md#fontweight) \| string | 设置文本的字体粗细，number类型取值[100, 900]，取值间隔为100，默认为400，取值越大，字体越粗。
默认值：FontWeight.Normal | +| fontFamily | string \| [Resource](ts-types.md#resource) | 设置文本的字体列表。使用多个字体，使用','进行分割，优先级按顺序生效。例如：'Arial, sans-serif'。 | ## 示例 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 b0abcabf9ed01aad3ccd2a3c55b3bb92d89d2540..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 @@ -3,20 +3,14 @@ 控制组件是否可见。 > **说明：** +> > 从API Version 7开始支持。后续版本如有新增内容，则采用上角标单独标记该内容的起始版本。 - -## 权限列表 - -无 - - ## 属性 - -| 名称 | 参数类型 | 默认值 | 描述 | -| -------- | -------- | -------- | -------- | -| visibility | [Visibility](ts-appendix-enums.md#visibility) | Visibility.Visible | 控制当前组件显示或隐藏。注意，即使组件处于隐藏状态，在页面刷新时仍存在重新创建过程，因此当对性能有严格要求时建议使用[条件渲染](../../ui/ts-rending-control-syntax-if-else.md)代替。| +| 名称 | 参数类型 | 描述 | +| ---------- | ---------------------------- | ------------------------------------------ | +| visibility | [Visibility](ts-appendix-enums.md#visibility) | 控制当前组件显示或隐藏。注意，即使组件处于隐藏状态，在页面刷新时仍存在重新创建过程，因此当对性能有严格要求时建议使用[条件渲染](../../ui/ts-rending-control-syntax-if-else.md)代替。
默认值：Visibility.Visible| ## 示例 @@ -29,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 }) } } ``` -![zh-cn_image_0000001174104390](figures/zh-cn_image_0000001174104390.gif) +![visibility.png](figures/visibility.png) 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 2bd3623df2a7b695f535b9acd91a252fb017f8b0..f9559393ab0a291a59f88339a48a235afef9d303 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,22 +1,18 @@ # Z序控制 -组件的Z序，指明了该组件在堆叠组件中的位置。 +组件的Z序，设置组件的堆叠顺序，具有较高堆叠顺序的元素在堆叠顺序较低的元素前面。 > **说明：** -> 从API Version 7开始支持。后续版本如有新增内容，则采用上角标单独标记该内容的起始版本。 - - -## 权限列表 - -无 +> +> 从API Version 7开始支持。后续版本如有新增内容，则采用上角标单独标记该内容的起始版本。 ## 属性 -| 名称 | 参数类型 | 默认值 | 描述 | -| -------- | -------- | -------- | -------- | -| zIndex | number | 0 | 同一容器中兄弟组件显示层级关系，z值越大，显示层级越高。 | +| 名称 | 参数类型 | 描述 | +| -------- | -------- | -------- | +| zIndex | number | 同一容器中兄弟组件显示层级关系。zIndex值越大，显示层级越高，即zIndex值大的组件会覆盖在zIndex值小的组件上方。 | ## 示例 @@ -30,19 +26,21 @@ struct ZIndexExample { Column() { Stack() { // stack会重叠组件, 默认后定义的在最上面 - Text('first child, zIndex(2)') - .size({width: '40%', height: '30%'}).backgroundColor(0xbbb2cb) + 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的效果 +![nozindex.png](figures/nozindex.png) +Stack容器子组件设置zIndex后效果 +![zindex.png](figures/zindex.png) -![zh-cn_image_0000001174582860](figures/zh-cn_image_0000001174582860.png) 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 361699d2968608ae2aef7dc3eb9a9831145d3a8c..fb78261211c4b65798427d16c61372b017f0c043 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 @@ -3,19 +3,15 @@ 组件区域变化事件指组件显示的尺寸、位置等发生变化时触发的事件。 > **说明：** +> > 从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) | 否 | 组件区域变化时触发该回调。 | ## 示例 @@ -26,7 +22,7 @@ @Component struct AreaExample { @State value: string = 'Text' - @State size1: string = '' + @State sizeValue: string = '' build() { Column() { @@ -37,9 +33,9 @@ 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 }) } diff --git a/zh-cn/application-dev/reference/arkui-ts/ts-universal-component-visible-area-change-event.md b/zh-cn/application-dev/reference/arkui-ts/ts-universal-component-visible-area-change-event.md index 97c10547361437bc146d9a87415ca15cb837b00d..a8d1ea0a269c89ff6eff8dbb6aec9a04675a13ef 100644 --- a/zh-cn/application-dev/reference/arkui-ts/ts-universal-component-visible-area-change-event.md +++ b/zh-cn/application-dev/reference/arkui-ts/ts-universal-component-visible-area-change-event.md @@ -1,18 +1,16 @@ # 组件可见区域变化事件 -组件可见区域变化事件指组件在屏幕中显示的面积变化，提供了判断组件是否完全或部分显示在屏幕中的能力，通常适用于像广告曝光埋点之类的场景。 +组件可见区域是指组件在屏幕中显示的区域，组件可见区域变化事件提供了判断组件是否完全或部分显示在屏幕中的能力，适用于广告曝光埋点之类的场景。 -> **说明：** 从API Version 9开始支持。后续版本如有新增内容，则采用上角标单独标记该内容的起始版本。 - -## 权限列表 - -无 +> **说明：** +> +> 从API Version 9开始支持。后续版本如有新增内容，则采用上角标单独标记该内容的起始版本。 ## 事件 -| 名称 | 功能描述 | -| -------- | -------- | +| 名称 | 功能描述 | +| ---------------------------------------- | ---------------------------------------- | | onVisibleAreaChange(ratios: Array\, event: (isVisible: boolean, currentRatio: number) => void) | 组件可见区域变化时触发该回调。
-ratios：阈值数组。其中，每个阈值代表组件可见面积（即组件在屏幕显示区的面积）与组件自身面积的比值。当组件可见面积与自身面积的比值大于或小于阈值时，均会触发该回调。每个阈值的取值范围为[0.0, 1.0]，如果开发者设置的阈值超出该范围，则会实际取值0.0或1.0.
-isVisible：表示组件的可见面积与自身面积的比值是否大于阈值，true表示大于，false表示小于。
-currentRatio：触发回调时，组件可见面积与自身面积的比值。 |