• 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
22
23## 示例
24
25```ts
26// xxx.ets
27@Entry
28@Component
29struct SizeExample {
30  build() {
31    Column({ space: 10 }) {
32      Text('margin and padding:').fontSize(12).fontColor(0xCCCCCC).width('90%')
33      Row() {
34        // 宽度80 ,高度80 ,外边距20(蓝色区域），内边距10（白色区域）
35        Row() {
36          Row().size({ width: '100%', height: '100%' }).backgroundColor(Color.Yellow)
37        }
38        .width(80)
39        .height(80)
40        .padding(10)
41        .margin(20)
42        .backgroundColor(Color.White)
43      }.backgroundColor(Color.Blue)
44
45      Text('constraintSize').fontSize(12).fontColor(0xCCCCCC).width('90%')
46      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')
47        .width('90%')
48        .constraintSize({ maxWidth: 200 })
49
50      Text('layoutWeight').fontSize(12).fontColor(0xCCCCCC).width('90%')
51      // 父容器尺寸确定时，设置了layoutWeight的子元素在主轴布局尺寸按照权重进行分配，忽略本身尺寸设置。
52      Row() {
53        // 权重1，占主轴剩余空间1/3
54        Text('layoutWeight(1)')
55          .size({ width: '30%', height: 110 }).backgroundColor(0xFFEFD5).textAlign(TextAlign.Center)
56          .layoutWeight(1)
57        // 权重2，占主轴剩余空间2/3
58        Text('layoutWeight(2)')
59          .size({ width: '30%', height: 110 }).backgroundColor(0xF5DEB3).textAlign(TextAlign.Center)
60          .layoutWeight(2)
61        // 未设置layoutWeight属性，组件按照自身尺寸渲染
62        Text('no layoutWeight')
63          .size({ width: '30%', height: 110 }).backgroundColor(0xD2B48C).textAlign(TextAlign.Center)
64      }.size({ width: '90%', height: 140 }).backgroundColor(0xAFEEEE)
65    }.width('100%').margin({ top: 5 })
66  }
67}
68```
69
70![size](figures/size.png)
71