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/>单位：vp<br/>从API version 9开始，该接口支持在ArkTS卡片中使用。<br />从API version 10开始，该接口支持calc计算特性。 | 16| height | [Length](ts-types.md#length) | 设置组件自身的高度，缺省时使用元素自身内容需要的高度。若子组件的高大于父组件的高，则会画出父组件的范围。<br/>单位：vp<br/>从API version 9开始，该接口支持在ArkTS卡片中使用。<br />从API version 10开始，该接口支持calc计算特性。 | 17| size | {<br/>width?: [Length](ts-types.md#length),<br/>height?: [Length](ts-types.md#length)<br/>} | 设置高宽尺寸。<br/>单位：vp<br/>从API version 9开始，该接口支持在ArkTS卡片中使用。<br />从API version 10开始，该接口支持calc计算特性。 | 18| padding | [Padding](ts-types.md#padding) \| [Length](ts-types.md#length) | 设置内边距属性。<br/>参数为Length类型时，四个方向内边距同时生效。<br>默认值：0 <br>单位：vp<br/>padding设置百分比时，上下左右内边距均以父容器的width作为基础值。<br/>从API version 9开始，该接口支持在ArkTS卡片中使用。<br />从API version 10开始，该接口支持calc计算特性。 | 19| margin | [Margin](ts-types.md#margin) \| [Length](ts-types.md#length) | 设置外边距属性。<br/>参数为Length类型时，四个方向外边距同时生效。<br>默认值：0 <br>单位：vp<br/>margin设置百分比时，上下左右外边距均以父容器的width作为基础值。在Row、Column、Flex交叉轴上布局时，子组件交叉轴的大小与margin的和为整体。<br/>例如Column容器宽100，其中子组件宽50，margin left为10，right为20，子组件实际的水平方向offset为20。<br/>从API version 9开始，该接口支持在ArkTS卡片中使用。<br />从API version 10开始，该接口支持calc计算特性。 | 20| layoutWeight | number \| string | 父容器尺寸确定时，设置了layoutWeight属性的子元素与兄弟元素占主轴尺寸按照权重进行分配，忽略元素本身尺寸设置，表示自适应占满剩余空间。<br/>默认值：0<br/>从API version 9开始，该接口支持在ArkTS卡片中使用。<br/>**说明：**<br/>仅在Row/Column/Flex布局中生效。<br/>可选值为大于等于0的数字，或者可以转换为数字的字符串。 | 21| constraintSize | {<br/>minWidth?: [Length](ts-types.md#length),<br/>maxWidth?: [Length](ts-types.md#length),<br/>minHeight?: [Length](ts-types.md#length),<br/>maxHeight?: [Length](ts-types.md#length)<br/>} | 设置约束尺寸，组件布局时，进行尺寸范围限制。constraintSize的优先级高于Width和Height。取值结果参考[constraintSize取值对width/height影响](ts-universal-attributes-size.md#constraintsize取值对widthheight影响)。<br>默认值：<br>{<br/>minWidth: 0,<br/>maxWidth: Infinity,<br/>minHeight: 0,<br/>maxHeight: Infinity<br/>}<br/>单位：vp<br/>从API version 9开始，该接口支持在ArkTS卡片中使用。<br />从API version 10开始，该接口支持calc计算特性。 | 22 23> **说明：** 24> 25> 在Row、Column、RelativeContainer组件中，width、height设置auto表示自适应子组件。在TextInput组件中，width设置auto表示自适应文本宽度。 26 27## constraintSize取值对width/height影响 28 29| 缺省值 | 结果 | 30| ---------------------------------------- | ------------------ | 31| / | max(minWidth/minHeight, min(maxWidth/maxHeight, width/height)) | 32| maxWidth/maxHeight | max(minWidth/minHeight, width/height) | 33| minWidth/minHeight | min(maxWidth/maxHeight, width/height) | 34|width/height|maxWidth/maxHeight > minWidth/minHeight时使用组件自身布局逻辑，<br/>结果在maxWidth/maxHeight与minWidth/minHeight之间。<br/> 其他情况结果为max(minWidth/minHeight, maxWidth/maxHeight)。 | 35|maxWidth/maxHeight && width/height| minWidth/minHeight | 36|minWidth/minHeight && width/height| 使用组件自身布局逻辑，最终结果不超过maxWidth/maxHeight | 37|maxWidth/maxHeight && minWidth/minHeight| width/height，根据其他布局属性可能拉伸或者压缩。 | 38|maxWidth/maxHeight && minWidth/minHeight && width/height|使用父容器传递的布局限制进行布局。| 39 40## 示例 41 42```ts 43// xxx.ets 44@Entry 45@Component 46struct SizeExample { 47 build() { 48 Column({ space: 10 }) { 49 Text('margin and padding:').fontSize(12).fontColor(0xCCCCCC).width('90%') 50 Row() { 51 // 宽度80 ,高度80 ,外边距20(蓝色区域），上下左右的内边距分别为5、15、10、20（白色区域） 52 Row() { 53 Row().size({ width: '100%', height: '100%' }).backgroundColor(Color.Yellow) 54 } 55 .width(80) 56 .height(80) 57 .padding({ top: 5, left: 10, bottom: 15, right: 20 }) 58 .margin(20) 59 .backgroundColor(Color.White) 60 }.backgroundColor(Color.Blue) 61 62 Text('constraintSize').fontSize(12).fontColor(0xCCCCCC).width('90%') 63 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') 64 .width('90%') 65 .constraintSize({ maxWidth: 200 }) 66 67 Text('layoutWeight').fontSize(12).fontColor(0xCCCCCC).width('90%') 68 // 父容器尺寸确定时，设置了layoutWeight的子元素在主轴布局尺寸按照权重进行分配，忽略本身尺寸设置。 69 Row() { 70 // 权重1，占主轴剩余空间1/3 71 Text('layoutWeight(1)') 72 .size({ width: '30%', height: 110 }).backgroundColor(0xFFEFD5).textAlign(TextAlign.Center) 73 .layoutWeight(1) 74 // 权重2，占主轴剩余空间2/3 75 Text('layoutWeight(2)') 76 .size({ width: '30%', height: 110 }).backgroundColor(0xF5DEB3).textAlign(TextAlign.Center) 77 .layoutWeight(2) 78 // 未设置layoutWeight属性，组件按照自身尺寸渲染 79 Text('no layoutWeight') 80 .size({ width: '30%', height: 110 }).backgroundColor(0xD2B48C).textAlign(TextAlign.Center) 81 }.size({ width: '90%', height: 140 }).backgroundColor(0xAFEEEE) 82 // calc计算特性 83 Text('calc:').fontSize(12).fontColor(0xCCCCCC).width('90%') 84 Text('calc test') 85 .fontSize(50) 86 .fontWeight(FontWeight.Bold) 87 .backgroundColor(0xFFFAF0) 88 .textAlign(TextAlign.Center) 89 .margin('calc(25vp*2)') 90 .size({ width: 'calc(90%)', height: 'calc(50vp + 10%)' }) 91 }.width('100%').margin({ top: 5 }) 92 } 93} 94``` 95 96 97
