• Home
  • Line#
  • Scopes#
  • Navigate#
  • Raw
  • Download
1# 尺寸设置
2
3用于设置组件的宽高、边距。
4
5>  **说明：**
6>
7>  从API Version 7开始支持。后续版本如有新增内容，则采用上角标单独标记该内容的起始版本。
8
9
10## 属性
11
12
13| 名称           | 参数说明                                                     | 描述                                                         |
14| -------------- | ------------------------------------------------------------ | ------------------------------------------------------------ |
15| width          | [Length](ts-types.md#length)                                 | 设置组件自身的宽度，缺省时使用元素自身内容需要的宽度。若子组件的宽大于父组件的宽，则会画出父组件的范围。<br/>从API version 9开始，该接口支持在ArkTS卡片中使用。 |
16| height         | [Length](ts-types.md#length)                                 | 设置组件自身的高度，缺省时使用元素自身内容需要的高度。若子组件的高大于父组件的高，则会画出父组件的范围。<br/>从API version 9开始，该接口支持在ArkTS卡片中使用。 |
17| size           | {<br/>width?:&nbsp;[Length](ts-types.md#length),<br/>height?:&nbsp;[Length](ts-types.md#length)<br/>} | 设置高宽尺寸。<br/>从API version 9开始，该接口支持在ArkTS卡片中使用。 |
18| padding        | [Padding](ts-types.md#padding)&nbsp;\|&nbsp;[Length](ts-types.md#length) | 设置内边距属性。<br/>参数为Length类型时，四个方向内边距同时生效。<br>默认值：0 <br>padding设置百分比时，上下左右内边距均以父容器的width作为基础值。<br/>从API version 9开始，该接口支持在ArkTS卡片中使用。 |
19| margin         | [Margin](ts-types.md#margin)&nbsp;\|&nbsp;[Length](ts-types.md#length) | 设置外边距属性。<br/>参数为Length类型时，四个方向外边距同时生效。<br>默认值：0 <br>margin设置百分比时，上下左右外边距均以父容器的width作为基础值。<br/>从API version 9开始，该接口支持在ArkTS卡片中使用。 |
20| 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。若设置的minWidth大于maxWidth，则minWidth生效，minHeight与maxHeight同理。<br>默认值：<br>{<br/>minWidth:&nbsp;0,<br/>maxWidth:&nbsp;Infinity,<br/>minHeight:&nbsp;0,<br/>maxHeight:&nbsp;Infinity<br/>}<br/>从API version 9开始，该接口支持在ArkTS卡片中使用。 |
21| layoutWeight   | number&nbsp;\|&nbsp;string                                   | 父容器尺寸确定时，设置了layoutWeight属性的子元素与兄弟元素占主轴尺寸按照权重进行分配，忽略元素本身尺寸设置，表示自适应占满剩余空间。<br>默认值：0<br/>从API version 9开始，该接口支持在ArkTS卡片中使用。<br/>**说明：**<br/>仅在Row/Column/Flex布局中生效。<br/>可选值为大于等于0的数字，或者可以转换为数字的字符串。 |
22
23
24## 示例
25
26```ts
27// xxx.ets
28@Entry
29@Component
30struct SizeExample {
31  build() {
32    Column({ space: 10 }) {
33      Text('margin and padding:').fontSize(12).fontColor(0xCCCCCC).width('90%')
34      Row() {
35        // 宽度80 ,高度80 ,外边距20(蓝色区域），内边距10（白色区域）
36        Row() {
37          Row().size({ width: '100%', height: '100%' }).backgroundColor(Color.Yellow)
38        }
39        .width(80)
40        .height(80)
41        .padding(10)
42        .margin(20)
43        .backgroundColor(Color.White)
44      }.backgroundColor(Color.Blue)
45
46      Text('constraintSize').fontSize(12).fontColor(0xCCCCCC).width('90%')
47      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')
48        .width('90%')
49        .constraintSize({ maxWidth: 200 })
50
51      Text('layoutWeight').fontSize(12).fontColor(0xCCCCCC).width('90%')
52      // 父容器尺寸确定时，设置了layoutWeight的子元素在主轴布局尺寸按照权重进行分配，忽略本身尺寸设置。
53      Row() {
54        // 权重1，占主轴剩余空间1/3
55        Text('layoutWeight(1)')
56          .size({ width: '30%', height: 110 }).backgroundColor(0xFFEFD5).textAlign(TextAlign.Center)
57          .layoutWeight(1)
58        // 权重2，占主轴剩余空间2/3
59        Text('layoutWeight(2)')
60          .size({ width: '30%', height: 110 }).backgroundColor(0xF5DEB3).textAlign(TextAlign.Center)
61          .layoutWeight(2)
62        // 未设置layoutWeight属性，组件按照自身尺寸渲染
63        Text('no layoutWeight')
64          .size({ width: '30%', height: 110 }).backgroundColor(0xD2B48C).textAlign(TextAlign.Center)
65      }.size({ width: '90%', height: 140 }).backgroundColor(0xAFEEEE)
66    }.width('100%').margin({ top: 5 })
67  }
68}
69```
70
71![size](figures/size.png)
72