1# 尺寸设置 2 3用于设置组件的宽高、边距。 4 5> **说明：** 6> 7> 从API Version 7开始支持。后续版本如有新增内容，则采用上角标单独标记该内容的起始版本。 8 9## width 10 11width(value: Length) 12 13设置组件自身的宽度，缺省时使用元素自身内容需要的宽度。若子组件的宽大于父组件的宽，则会画出父组件的范围。 14 15从API version 10开始，该接口支持calc计算特性。 16 17**卡片能力：** 从API version 9开始，该接口支持在ArkTS卡片中使用。 18 19**系统能力：** SystemCapability.ArkUI.ArkUI.Full 20 21**参数：** 22 23| 参数名 | 类型 | 必填 | 说明 | 24| ----- | ---------------------------- | ---- | ------------------- | 25| value | [Length](ts-types.md#length) | 是 | 要设置的组件宽度。<br/>单位：vp | 26 27## height 28 29height(value: Length) 30 31设置组件自身的高度，缺省时使用元素自身内容需要的高度。若子组件的高大于父组件的高，则会画出父组件的范围。 32 33从API version 10开始，该接口支持calc计算特性。 34 35**卡片能力：** 从API version 9开始，该接口支持在ArkTS卡片中使用。 36 37**系统能力：** SystemCapability.ArkUI.ArkUI.Full 38 39**参数：** 40 41| 参数名 | 类型 | 必填 | 说明 | 42| ----- | ---------------------------- | ---- | ------------------- | 43| value | [Length](ts-types.md#length) | 是 | 要设置的组件高度。<br/>单位：vp | 44 45> **说明：** 46> 47> 在Row、Column、RelativeContainer组件中，width、height设置auto表示自适应子组件。在TextInput组件中，width设置auto表示自适应文本宽度。 48 49## Size 50 51size(value: SizeOptions) 52 53设置高宽尺寸。 54 55从API version 10开始，该接口支持calc计算特性。 56 57**卡片能力：** 从API version 9开始，该接口支持在ArkTS卡片中使用。 58 59**系统能力：** SystemCapability.ArkUI.ArkUI.Full 60 61**参数：** 62 63| 参数名 | 类型 | 必填 | 说明 | 64| ----- | ------------------------------- | ---- | ----------------- | 65| value | [SizeOptions](#sizeoptions对象说明) | 是 | 设置高宽尺寸。<br/>单位：vp | 66 67## padding 68 69padding(value: Padding | Length) 70 71设置内边距属性。 72 73从API version 10开始，该接口支持calc计算特性。 74 75**卡片能力：** 从API version 9开始，该接口支持在ArkTS卡片中使用。 76 77**系统能力：** SystemCapability.ArkUI.ArkUI.Full 78 79**参数：** 80 81| 参数名 | 类型 | 必填 | 说明 | 82| ----- | ---------------------------------------- | ---- | ---------------------------------------- | 83| value | [Padding](ts-types.md#padding) \| [Length](ts-types.md#length) | 是 | 设置组件的内边距。<br/>参数为Length类型时，四个方向内边距同时生效。<br/>默认值：0 <br/>单位：vp<br/>padding设置百分比时，上下左右内边距均以父容器的width作为基础值。 | 84 85## margin 86 87margin(value: margin | Length) 88 89设置外边距属性。 90 91从API version 10开始，该接口支持calc计算特性。 92 93**卡片能力：** 从API version 9开始，该接口支持在ArkTS卡片中使用。 94 95**系统能力：** SystemCapability.ArkUI.ArkUI.Full 96 97**参数：** 98 99| 参数名 | 类型 | 必填 | 说明 | 100| ------ | ------------------------------------------------------------ | -------- | ------------------------------------------------------------ | 101| value | [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，子组件水平方向偏移10。 | 102 103## layoutWeight 104 105layoutWeight(value: number | string) 106 107对子组件进行重新布局。 108 109**卡片能力：** 从API version 9开始，该接口支持在ArkTS卡片中使用。 110 111**系统能力：** SystemCapability.ArkUI.ArkUI.Full 112 113**参数：** 114 115| 参数名 | 类型 | 必填 | 说明 | 116| ----- | -------------------------- | ------- | ---------------------------------------- | 117| value | number \| string | 是 | 父容器尺寸确定时，设置了layoutWeight属性的子元素与兄弟元素占主轴尺寸按照权重进行分配，忽略元素本身尺寸设置，表示自适应占满剩余空间。<br/>默认值：0<br/>**说明：** <br/>仅在Row/Column/Flex布局中生效。<br/>可选值为大于等于0的数字，或者可以转换为数字的字符串。 | 118 119## constraintSize 120 121constraintSize(value: ConstraintSizeOptions) 122 123设置约束尺寸，组件布局时，进行尺寸范围限制。 124 125从API version 10开始，该接口支持calc计算特性。 126 127**卡片能力：** 从API version 9开始，该接口支持在ArkTS卡片中使用。 128 129**系统能力：** SystemCapability.ArkUI.ArkUI.Full 130 131**参数：** 132 133| 参数名 | 类型 | 必填 | 说明 | 134| ----- | ---------------------------------------- | ---- | ---------------------------------------- | 135| value | [ConstraintSizeOptions](ts-types.md#constraintsizeoptions) | 是 | 设置约束尺寸。constraintSize的优先级高于Width和Height。取值结果参考constraintSize取值对width/height影响。<br/>默认值：<br/>{<br/>minWidth: 0,<br/>maxWidth: Infinity,<br/>minHeight: 0,<br/>maxHeight: Infinity<br/>}<br/>单位：vp<br/> | 136 137**constraintSize取值对width/height影响** 138 139| 缺省值 | 结果 | 140| ---------------------------------------- | ---------------------------------------- | 141| / | max(minWidth/minHeight, min(maxWidth/maxHeight, width/height)) | 142| maxWidth/maxHeight | max(minWidth/minHeight, width/height) | 143| minWidth/minHeight | min(maxWidth/maxHeight, width/height) | 144| width/height | maxWidth/maxHeight > minWidth/minHeight时使用组件自身布局逻辑，<br/>结果在maxWidth/maxHeight与minWidth/minHeight之间。<br/> 其他情况结果为max(minWidth/minHeight, maxWidth/maxHeight)。 | 145| maxWidth/maxHeight && width/height | minWidth/minHeight | 146| minWidth/minHeight && width/height | 使用组件自身布局逻辑，最终结果不超过maxWidth/maxHeight | 147| maxWidth/maxHeight && minWidth/minHeight | width/height，根据其他布局属性可能拉伸或者压缩。 | 148| maxWidth/maxHeight && minWidth/minHeight && width/height | 使用父容器传递的布局限制进行布局。 | 149 150## SizeOptions对象说明 151 152从API version 9开始，该接口支持在ArkTS卡片中使用。 153 154| 参数名 | 类型 | 必填 | 说明 | 155| ----- | ---------------------------------------- | ---- | ---------------------------------------- | 156| width | [Length](ts-types.md#length) | 否 | 设置组件宽度。 | 157| height | [Length](ts-types.md#length) | 否 | 设置组件高度。 | 158 159## ConstraintSizeOptions对象说明 160 161从API version 9开始，该接口支持在ArkTS卡片中使用。 162 163| 参数名 | 类型 | 必填 | 说明 | 164| ----- | ---------------------------------------- | ---- | ---------------------------------------- | 165| minWidth | [Length](ts-types.md#length) | 否 | 设置组件最小宽度。 | 166| maxWidth | [Length](ts-types.md#length) | 否 | 设置组件最大宽度。 | 167| minHeight | [Length](ts-types.md#length) | 否 | 设置组件最小高度。 | 168| maxHeight | [Length](ts-types.md#length) | 否 | 设置组件最大高度。 | 169 170> **说明：** 171> 172> 在Row、Column、RelativeContainer组件中，width、height设置auto表示自适应子组件。在TextInput组件中，width设置auto表示自适应文本宽度。 173 174## 示例 175 176```ts 177// xxx.ets 178@Entry 179@Component 180struct SizeExample { 181 build() { 182 Column({ space: 10 }) { 183 Text('margin and padding:').fontSize(12).fontColor(0xCCCCCC).width('90%') 184 Row() { 185 // 宽度80 ,高度80 ,外边距20(蓝色区域），上下左右的内边距分别为5、15、10、20（白色区域） 186 Row() { 187 Row().size({ width: '100%', height: '100%' }).backgroundColor(Color.Yellow) 188 } 189 .width(80) 190 .height(80) 191 .padding({ top: 5, left: 10, bottom: 15, right: 20 }) 192 .margin(20) 193 .backgroundColor(Color.White) 194 }.backgroundColor(Color.Blue) 195 196 Text('constraintSize').fontSize(12).fontColor(0xCCCCCC).width('90%') 197 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') 198 .width('90%') 199 .constraintSize({ maxWidth: 200 }) 200 201 Text('layoutWeight').fontSize(12).fontColor(0xCCCCCC).width('90%') 202 // 父容器尺寸确定时，设置了layoutWeight的子元素在主轴布局尺寸按照权重进行分配，忽略本身尺寸设置。 203 Row() { 204 // 权重1，占主轴剩余空间1/3 205 Text('layoutWeight(1)') 206 .size({ width: '30%', height: 110 }).backgroundColor(0xFFEFD5).textAlign(TextAlign.Center) 207 .layoutWeight(1) 208 // 权重2，占主轴剩余空间2/3 209 Text('layoutWeight(2)') 210 .size({ width: '30%', height: 110 }).backgroundColor(0xF5DEB3).textAlign(TextAlign.Center) 211 .layoutWeight(2) 212 // 未设置layoutWeight属性，组件按照自身尺寸渲染 213 Text('no layoutWeight') 214 .size({ width: '30%', height: 110 }).backgroundColor(0xD2B48C).textAlign(TextAlign.Center) 215 }.size({ width: '90%', height: 140 }).backgroundColor(0xAFEEEE) 216 // calc计算特性 217 Text('calc:').fontSize(12).fontColor(0xCCCCCC).width('90%') 218 Text('calc test') 219 .fontSize(50) 220 .fontWeight(FontWeight.Bold) 221 .backgroundColor(0xFFFAF0) 222 .textAlign(TextAlign.Center) 223 .margin('calc(25vp*2)') 224 .size({ width: 'calc(90%)', height: 'calc(50vp + 10%)' }) 225 }.width('100%').margin({ top: 5 }) 226 } 227} 228``` 229 230 231
