Skip to content

D
Docs

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

通知 161
Star 293
Fork 28
D
Docs
提交 77245e13 编写于 作者: S sienna1128
浏览文件
操作

update docs 

Signed-off-by: Nsienna1128 <lixiaoyan45@huawei.com>
上级 2ae61809
显示空白变更内容
内联 并排
Showing with 212 addition and 189 deletion
zh-cn/application-dev/reference/arkui-ts/ts-universal-attributes-layout-constraints.md
浏览文件 @ 77245e13
......@@ -3,21 +3,16 @@
通过组件的宽高比和显示优先级约束组件显示效果。
> **说明：**
>
> 从API Version 7开始支持。后续版本如有新增内容，则采用上角标单独标记该内容的起始版本。
## 权限列表
无
## 属性
| 名称 | 参数说明 | 默认值 | 描述 |
| -------- | -------- | -------- | -------- |
| aspectRatio | number | - | 指定当前组件的宽高比。 |
| displayPriority | number | - | 设置当前组件在布局容器中显示的优先级，当父容器空间不足时，低优先级的组件会被隐藏。<br/>>&nbsp;&nbsp;**说明：**<br/>>&nbsp;仅在Row/Column/Flex(单行)容器组件中生效。 |
| 名称 | 参数说明 | 描述 |
| --------------- | ------ | ---------------------------------------- |
| aspectRatio | number | 指定当前组件的宽高比，aspectRatio = width/height。 |
| displayPriority | number | 设置当前组件在布局容器中显示的优先级，当父容器空间不足时，低优先级的组件会被隐藏。<br/>**说明：**<br/>仅在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 })
}
}
......
zh-cn/application-dev/reference/arkui-ts/ts-universal-attributes-location.md
浏览文件 @ 77245e13
......@@ -3,24 +3,21 @@
设置组件的对齐方式、布局方向和显示位置。
> **说明：**
>
> 从API Version 7开始支持。后续版本如有新增内容，则采用上角标单独标记该内容的起始版本。
## 权限列表
无
## 属性
| 名称 | 参数类型 | 默认值 | 描述 |
| -------- | -------- | -------- | -------- |
| align | [Alignment](ts-appendix-enums.md#alignment) | Center | 设置元素内容的对齐方式，只有当设置的width和height大小超过元素本身内容大小时生效。 |
| direction | [Direction](ts-appendix-enums.md#direction) | Auto | 设置元素水平方向的布局，可选值参照Direction枚举说明。 |
| position | {<br/>x:&nbsp;Length,<br/>y:&nbsp;Length<br/>} | - | 使用绝对定位，设置元素锚点相对于父容器顶部起点偏移位置。在布局容器中，设置该属性不影响父容器布局，仅在绘制时进行位置调整。 |
| markAnchor | {<br/>x:&nbsp;Length,<br/>y:&nbsp;Length<br/>} | {<br/>x:&nbsp;0,<br/>y:&nbsp;0<br/>} | 设置元素在位置定位时的锚点，以元素顶部起点作为基准点进行偏移。 |
| offset | {<br/>x:&nbsp;Length,<br/>y:&nbsp;Length<br/>} | {<br/>x:&nbsp;0,<br/>y:&nbsp;0<br/>} | 相对布局完成位置坐标偏移量，设置该属性，不影响父容器布局，仅在绘制时进行位置调整。 |
| 名称 | 参数类型 | 描述 |
| -------- | -------- | -------- |
| align | [Alignment](ts-appendix-enums.md#alignment) | 设置元素内容的对齐方式，当元素的width和height大小大于元素本身内容大小时生效。<br/>默认值：Alignment.Center |
| direction | [Direction](ts-appendix-enums.md#direction) | 设置元素水平方向的布局。<br/>默认值：Direction.Auto |
| position | [Position](ts-types.md#position8) | 使用绝对定位，设置元素左上角相对于父容器左上角偏移位置。在布局容器中，设置该属性不影响父容器布局，仅在绘制时进行位置调整。 |
| markAnchor | [Position](ts-types.md#position8) | 相对定位，设置元素最终定位点，以元素顶部起点作为基准点进行偏移。<br/>默认值：<br/>{<br/>x: 0,<br/>y: 1<br/>} |
| offset | [Position](ts-types.md#position8) | 相对布局完成位置坐标偏移量，设置该属性，不影响父容器布局，仅在绘制时进行位置调整。<br/>默认值：<br/>{<br/>x: 0,<br/>y: 1<br/>} |
| alignRules<sup>9+</sup> | {<br/>left?: { anchor: string, align: [HorizontalAlign](ts-appendix-enums.md#horizontalalign) };<br/>right?: { anchor: string, align: [HorizontalAlign](ts-appendix-enums.md#horizontalalign) };<br/>middle?: { anchor: string, align: [HorizontalAlign](ts-appendix-enums.md#horizontalalign) };<br/>top?: { anchor: string, align: [VerticalAlign](ts-appendix-enums.md#verticalalign) };<br/>bottom?: { anchor: string, align: [VerticalAlign](ts-appendix-enums.md#verticalalign) };<br/>center?: { anchor: string, align: [VerticalAlign](ts-appendix-enums.md#verticalalign) }<br/>} | 指定相对容器的对齐规则。<br/>-&nbsp;left：设置左对齐参数。<br/>-&nbsp;right：设置右对齐参数。<br/>-&nbsp;middle：设置中间对齐的参数。<br/>-&nbsp;top：设置顶部对齐的参数。<br/>-&nbsp;bottom：设置底部对齐的参数。<br/>-&nbsp;center：设置中心对齐的参数。<br/>**说明：**<br/>-&nbsp;anchor：设置作为锚点的组件的id值。<br>-&nbsp;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)
zh-cn/application-dev/reference/arkui-ts/ts-universal-attributes-opacity.md
浏览文件 @ 77245e13
# 透明度设置
> **说明：**
> 从API Version 7开始支持。后续版本如有新增内容，则采用上角标单独标记该内容的起始版本。
设置组件的透明度。
## 权限列表
无
> **说明：**
>
> 从API Version 7开始支持。后续版本如有新增内容，则采用上角标单独标记该内容的起始版本。
## 属性
| 名称 | 参数类型 | 默认值 | 描述 |
| -------- | -------- | -------- | -------- |
| opacity | number&nbsp;\|&nbsp;[Resource](../../ui/ts-types.md#resource类型) | 1 | 元素的不透明度，取值范围为0到1，1表示为不透明，0表示为完全透明。 |
| 名称 | 参数类型 | 描述 |
| ------- | ---------------------------------------- | ---------------------------------------- |
| opacity | number&nbsp;\|&nbsp;[Resource](ts-types.md#resource) | 元素的不透明度，取值范围为0到1，1表示不透明，0表示完全透明, 达到隐藏组件效果，但是在布局中占位，与[Visibility](ts-universal-attributes-visibility.md).Hidden效果相似<br>默认值：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)
zh-cn/application-dev/reference/arkui-ts/ts-universal-attributes-overlay.md
浏览文件 @ 77245e13
......@@ -3,21 +3,18 @@
设置组件的遮罩文本。
> **说明：**
>
> 从API Version 7开始支持。后续版本如有新增内容，则采用上角标单独标记该内容的起始版本。
## 权限列表
无
## 属性
| 名称 | 参数类型 | 描述 |
| ------- | ----------------------------- | ------------------------- |
| overlay | value:&nbsp;string,<br/>options?:&nbsp;{<br/>align?:&nbsp;[Alignment](ts-appendix-enums.md#alignment),&nbsp;<br/>offset?:&nbsp;{<br> x?:&nbsp;number,<br> y?:&nbsp;number<br> }<br/>} | 在当前组件上，增加遮罩文本，布局与当前组件相同。<br>默认值：<br>{<br/>align:&nbsp;Alignment.Center,<br/>offset:&nbsp;{0,&nbsp;0}<br/>} |
| 名称 | 参数类型 | 默认值 | 描述 |
| -------- | -------- | -------- | -------- |
| overlay | value:&nbsp;string,<br/>options?:&nbsp;{<br/>align?:&nbsp;[Alignment](ts-appendix-enums.md#alignment),&nbsp;<br/>offset?:&nbsp;{x?:&nbsp;number, y?:&nbsp;number}<br/>} | {<br/>align:&nbsp;Alignment.Center,<br/>offset:&nbsp;{0,&nbsp;0}<br/>} | 在当前组件上，增加遮罩文本，布局与当前组件相同。 |
| overlay | value:&nbsp;string,<br/>options?:&nbsp;{<br/>align?:&nbsp;[Alignment](ts-appendix-enums.md#alignment),&nbsp;<br/>offset?:&nbsp;{x?:&nbsp;number, y?:&nbsp;number}<br/>} | {<br/>align:&nbsp;Alignment.Center,<br/>offset:&nbsp;{0,&nbsp;0}<br/>} | 在当前组件上，增加遮罩文本。<br/> value: 遮罩文本内容。<br/>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 })
......
zh-cn/application-dev/reference/arkui-ts/ts-universal-attributes-size.md
浏览文件 @ 77245e13
# 尺寸设置
用于设置组件的宽高、边距等显示尺寸进行设置。
用于设置组件的宽高、边距。
> **说明：**
>
> 从API Version 7开始支持。后续版本如有新增内容，则采用上角标单独标记该内容的起始版本。
## 权限列表
无
## 属性
| 名称 | 参数说明 | 默认值 | 描述 |
| -------- | -------- | -------- | -------- |
| width | Length | - | 设置组件自身的宽度，缺省时使用元素自身内容需要的宽度。 |
| height | Length | - | 设置组件自身的高度，缺省时使用元素自身内容需要的高度。 |
| size | {<br/>width?:&nbsp;Length,<br/>height?:&nbsp;Length<br/>} | - | 设置高宽尺寸。 |
| padding | {<br/>top?:&nbsp;Length,<br/>right?:&nbsp;Length,<br/>bottom?:&nbsp;Length,<br/>left?:&nbsp;Length<br/>}&nbsp;\|&nbsp;Length | 0 | 设置内边距属性。<br/>参数为Length类型时，四个方向内边距同时生效。 |
| margin | {<br/>top?:&nbsp;Length,<br/>right?:&nbsp;Length,<br/>bottom?:&nbsp;Length,<br/>left?:&nbsp;Length<br/>}<br/>\|&nbsp;Length | 0 | 设置外边距属性。<br/>参数为Length类型时，四个方向外边距同时生效。 |
| constraintSize | {<br/>minWidth?:&nbsp;Length,<br/>maxWidth?:&nbsp;Length,<br/>minHeight?:&nbsp;Length,<br/>maxHeight?:&nbsp;Length<br/>} | {<br/>minWidth:&nbsp;0,<br/>maxWidth:&nbsp;Infinity,<br/>minHeight:&nbsp;0,<br/>maxHeight:&nbsp;Infinity<br/>} | 设置约束尺寸，组件布局时，进行尺寸范围限制。constraintSize的优先级高于Width和Height。 |
| layoutWeight | number&nbsp;\|&nbsp;string | 0 | 容器尺寸确定时，元素与兄弟节点主轴布局尺寸按照权重进行分配，忽略本身尺寸设置，表示自适应占满剩余空间。<br/>>&nbsp;&nbsp;**说明：**<br/>>&nbsp;仅在Row/Column/Flex布局中生效。 |
| 名称 | 参数说明 | 描述 |
| -------------- | ---------------------------------------- | ---------------------------------------- |
| width | [Length](ts-types.md#length) | 设置组件自身的宽度，缺省时使用元素自身内容需要的宽度。若子组件的宽大于父组件的宽，则会画出父组件的范围。 |
| height | [Length](ts-types.md#length) | 设置组件自身的高度，缺省时使用元素自身内容需要的高度。若子组件的高大于父组件的高，则会画出父组件的范围。 |
| size | {<br/>width?:&nbsp;[Length](ts-types.md#length),<br/>height?:&nbsp;[Length](ts-types.md#length)<br/>} | 设置高宽尺寸。 |
| padding | [Padding](ts-types.md#padding)&nbsp;\|&nbsp;[Length](ts-types.md#length) | 设置内边距属性，默认无内边距。<br/>参数为Length类型时，上下左右内边距同时生效。 <br/>参数为Padding对象时，可以分别设置上下左右的内边距。<br/>当padding设置百分比时，上下左右内边距均以父容器的width作为基础值。 |
| margin | [Margin](ts-types.md#margin)&nbsp;\|&nbsp;[Length](ts-types.md#length) | 设置外边距属性，默认无外边距。<br/>参数为Length类型时，上下左右外边距同时生效。<br/>参数为Margin对象时，可以分别设置上下左右的外边距。<br/>margin设置百分比时，上下左右内边距均以父容器的width作为基础值。|
| constraintSize | {<br/>minWidth?:&nbsp;[Length](ts-types.md#length),<br/>maxWidth?:&nbsp;[Length](ts-types.md#length),<br/>minHeight?:&nbsp;[Length](ts-types.md#length),<br/>maxHeight?:&nbsp;[Length](ts-types.md#length)<br/>} | 设置约束尺寸，组件布局时，进行尺寸范围限制。constraintSize的优先级高于Width和Height。<br>默认值：<br>{<br/>minWidth:&nbsp;0,<br/>maxWidth:&nbsp;Infinity,<br/>minHeight:&nbsp;0,<br/>maxHeight:&nbsp;Infinity<br/>} |
| layoutWeight | number&nbsp;\|&nbsp;string | 父容器尺寸确定时，设置了layoutWeight属性的子元素与兄弟元素占主轴尺寸按照权重进行分配，忽略元素本身尺寸设置，表示自适应占满剩余空间。<br>**说明：**<br/>仅在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)
zh-cn/application-dev/reference/arkui-ts/ts-universal-attributes-text-style.md
浏览文件 @ 77245e13
......@@ -5,24 +5,18 @@
> 从API Version 7开始支持。后续版本如有新增内容，则采用上角标单独标记该内容的起始版本。
针对包含文本元素的组件，设置文本样式。
## 权限列表
无
针对包含文本元素的组件，设置字体样式。
## 属性
| 名称 | 参数类型 | 默认值 | 描述 |
| -------- | -------- | -------- | -------- |
| fontColor | [ResourceColor](../../ui/ts-types.md) | - | 设置文本颜色。 |
| fontSize | Length&nbsp;\|&nbsp;[Resource](../../ui/ts-types.md#resource类型) | - | 设置文本尺寸，Length为number类型时，使用fp单位。 |
| fontStyle | [FontStyle](ts-appendix-enums.md#fontstyle) | FontStyle.Normal | 设置文本的字体样式。 |
| fontWeight | number&nbsp;\|&nbsp;[FontWeight](ts-appendix-enums.md#fontweight)&nbsp;\|&nbsp;string | FontWeight.FontWeightNormal | 设置文本的字体粗细，number类型取值[100,&nbsp;900]，取值间隔为100，默认为400，取值越大，字体越粗。<br/>提供常用枚举值，参考：FontWeight枚举说明。 |
| fontFamily | string&nbsp;\|&nbsp;[Resource](../../ui/ts-types.md#resource类型) | - | 设置文本的字体列表。使用多个字体，使用','进行分割，优先级按顺序生效。例如：'Arial,&nbsp;sans-serif'。 |
| 名称 | 参数类型 | 描述 |
| -----------| ---------------------------------------- | ------------------------------------ |
| fontColor | [ResourceColor](ts-types.md#resourcecolor) | 设置文本颜色。 |
| fontSize | Length&nbsp;\|&nbsp;[Resource](ts-types.md#resource) | 设置文本尺寸，Length为number类型时，使用fp单位。 |
| fontStyle | [FontStyle](ts-appendix-enums.md#fontstyle) | 设置文本的字体样式。<br>默认值：FontStyle.Normal |
| fontWeight | number&nbsp;\|&nbsp;[FontWeight](ts-appendix-enums.md#fontweight)&nbsp;\|&nbsp;string | 设置文本的字体粗细，number类型取值[100,&nbsp;900]，取值间隔为100，默认为400，取值越大，字体越粗。<br/>默认值：FontWeight.Normal |
| fontFamily | string&nbsp;\|&nbsp;[Resource](ts-types.md#resource) | 设置文本的字体列表。使用多个字体，使用','进行分割，优先级按顺序生效。例如：'Arial,&nbsp;sans-serif'。 |
## 示例
......
zh-cn/application-dev/reference/arkui-ts/ts-universal-attributes-visibility.md
浏览文件 @ 77245e13
......@@ -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)代替。<br>默认值：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)
zh-cn/application-dev/reference/arkui-ts/ts-universal-attributes-z-order.md
浏览文件 @ 77245e13
# Z序控制
组件的Z序，指明了该组件在堆叠组件中的位置。
组件的Z序，设置组件的堆叠顺序，具有较高堆叠顺序的元素在堆叠顺序较低的元素前面。
> **说明：**
>
> 从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)
zh-cn/application-dev/reference/arkui-ts/ts-universal-component-area-change-event.md
浏览文件 @ 77245e13
......@@ -3,19 +3,15 @@
组件区域变化事件指组件显示的尺寸、位置等发生变化时触发的事件。
> **说明：**
>
> 从API Version 8开始支持。后续版本如有新增内容，则采用上角标单独标记该内容的起始版本。
## 权限列表
无
## 事件
| 名称 | 支持冒泡 | 功能描述 |
| ---------------------------------------- | ---- | ---------------------------------------- |
| onAreaChange(event:&nbsp;(oldValue:&nbsp;Area,&nbsp;newValue:&nbsp;Area)&nbsp;=&gt;&nbsp;void) | 否 | 组件区域变化时触发该回调，Area类型描述见[Area](../../ui/ts-types.md#area8)。 |
| onAreaChange(event:&nbsp;(oldValue:&nbsp;[Area](ts-types.md#area8),&nbsp;newValue:&nbsp;[Area](ts-types.md#area8))&nbsp;=&gt;&nbsp;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 })
}
......
zh-cn/application-dev/reference/arkui-ts/ts-universal-component-visible-area-change-event.md
浏览文件 @ 77245e13
# 组件可见区域变化事件
组件可见区域变化事件指组件在屏幕中显示的面积变化，提供了判断组件是否完全或部分显示在屏幕中的能力，通常适用于像广告曝光埋点之类的场景。
组件可见区域是指组件在屏幕中显示的区域，组件可见区域变化事件提供了判断组件是否完全或部分显示在屏幕中的能力，适用于广告曝光埋点之类的场景。
> **说明：** 从API Version 9开始支持。后续版本如有新增内容，则采用上角标单独标记该内容的起始版本。
## 权限列表
无
> **说明：**
>
> 从API Version 9开始支持。后续版本如有新增内容，则采用上角标单独标记该内容的起始版本。
## 事件
| 名称 | 功能描述 |
| -------- | -------- |
| ---------------------------------------- | ---------------------------------------- |
| onVisibleAreaChange(ratios: Array\<number>, event: (isVisible: boolean, currentRatio: number) => void) | 组件可见区域变化时触发该回调。<br/>-ratios：阈值数组。其中，每个阈值代表组件可见面积（即组件在屏幕显示区的面积）与组件自身面积的比值。当组件可见面积与自身面积的比值大于或小于阈值时，均会触发该回调。每个阈值的取值范围为[0.0, 1.0]，如果开发者设置的阈值超出该范围，则会实际取值0.0或1.0.<br/>-isVisible：表示组件的可见面积与自身面积的比值是否大于阈值，true表示大于，false表示小于。<br/>-currentRatio：触发回调时，组件可见面积与自身面积的比值。 |
......
Markdown is supported
0% 或 .
You are about to add 0 people to the discussion. Proceed with caution.
先完成此消息的编辑！
想要评论请 注册 或