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**原子化服务API：** 从API version 11开始，该接口支持在原子化服务中使用。 20 21**系统能力：** SystemCapability.ArkUI.ArkUI.Full 22 23**参数：** 24 25| 参数名 | 类型 | 必填 | 说明 | 26| ----- | ---------------------------- | ---- | ------------------- | 27| value | [Length](ts-types.md#length) | 是 | 要设置的组件宽度。<br/>单位：vp | 28 29> **说明：** 30> 31> - 在[TextInput](./ts-basic-components-textinput.md)组件中，width设置auto表示自适应文本宽度。 32> 33> - 在[AlphabetIndexer](./ts-container-alphabet-indexer.md)组件中，width设置auto表示自适应宽度最大索引项的宽度。 34 35## height 36 37height(value: Length) 38 39设置组件自身的高度，缺省时使用元素自身内容需要的高度。若子组件的高大于父组件的高，则会画出父组件的范围。 40 41从API version 10开始，该接口支持calc计算特性。 42 43**卡片能力：** 从API version 9开始，该接口支持在ArkTS卡片中使用。 44 45**原子化服务API：** 从API version 11开始，该接口支持在原子化服务中使用。 46 47**系统能力：** SystemCapability.ArkUI.ArkUI.Full 48 49**参数：** 50 51| 参数名 | 类型 | 必填 | 说明 | 52| ----- | ---------------------------- | ---- | ------------------- | 53| value | [Length](ts-types.md#length) | 是 | 要设置的组件高度。<br/>单位：vp | 54 55> **说明：** 56> 57> 在[Row](./ts-container-row.md)、[Column](./ts-container-column.md)、[RelativeContainer](./ts-container-relativecontainer.md)组件中，width、height设置auto表示自适应子组件。 58 59## width<sup>15+</sup> 60 61width(widthValue: Length | LayoutPolicy) 62 63设置组件自身的宽度或水平方向布局策略，缺省时使用元素自身内容需要的宽度。若子组件的宽大于父组件的宽，则会画出父组件的范围。 64 65**卡片能力：** 从API version 15开始，该接口支持在ArkTS卡片中使用。 66 67**原子化服务API：** 从API version 15开始，该接口支持在原子化服务中使用。 68 69**系统能力：** SystemCapability.ArkUI.ArkUI.Full 70 71**参数：** 72 73| 参数名 | 类型 | 必填 | 说明 | 74| ----- | ---------------------------- | ---- | ------------------- | 75| widthValue | [Length](ts-types.md#length) \| [LayoutPolicy](ts-types.md#layoutpolicy15) | 是 | 要设置的组件宽度。<br/>单位：vp | 76 77## height<sup>15+</sup> 78 79height(heightValue: Length | LayoutPolicy) 80 81设置组件自身的高度或垂直方向布局策略，缺省时使用元素自身内容需要的高度。若子组件的高大于父组件的高，则会画出父组件的范围。 82 83**卡片能力：** 从API version 15开始，该接口支持在ArkTS卡片中使用。 84 85**原子化服务API：** 从API version 15开始，该接口支持在原子化服务中使用。 86 87**系统能力：** SystemCapability.ArkUI.ArkUI.Full 88 89**参数：** 90 91| 参数名 | 类型 | 必填 | 说明 | 92| ----- | ---------------------------- | ---- | ------------------- | 93| heightValue | [Length](ts-types.md#length) \| [LayoutPolicy](ts-types.md#layoutpolicy15) | 是 | 要设置的组件高度。<br/>单位：vp | 94 95> **说明：** 96> 97> [Row](./ts-container-row.md)和[Column](./ts-container-column.md)组件的width、height属性支持设置[LayoutPolicy](ts-types.md#layoutpolicy15)类型参数。 98 99## size 100 101size(value: SizeOptions) 102 103设置高宽尺寸。 104 105从API version 10开始，该接口支持calc计算特性。 106 107**卡片能力：** 从API version 9开始，该接口支持在ArkTS卡片中使用。 108 109**原子化服务API：** 从API version 11开始，该接口支持在原子化服务中使用。 110 111**系统能力：** SystemCapability.ArkUI.ArkUI.Full 112 113**参数：** 114 115| 参数名 | 类型 | 必填 | 说明 | 116| ----- | ------------------------------- | ---- | ----------------- | 117| value | [SizeOptions](#sizeoptions对象说明) | 是 | 设置高宽尺寸。<br/>单位：vp | 118 119## padding 120 121padding(value: Padding | Length | LocalizedPadding) 122 123设置内边距属性。 124 125从API version 10开始，该接口支持calc计算特性。 126 127**卡片能力：** 从API version 9开始，该接口支持在ArkTS卡片中使用。 128 129**原子化服务API：** 从API version 11开始，该接口支持在原子化服务中使用。 130 131**系统能力：** SystemCapability.ArkUI.ArkUI.Full 132 133**参数：** 134 135| 参数名 | 类型 | 必填 | 说明 | 136| ----- | ---------------------------------------- | ---- | ---------------------------------------- | 137| value | [Padding](ts-types.md#padding) \| [Length](ts-types.md#length) \| [LocalizedPadding](ts-types.md#localizedpadding12)<sup>12+</sup>| 是 | 设置组件的内边距。<br/>参数为Length类型时，四个方向内边距同时生效。<br/>默认值：0 <br/>单位：vp<br/>padding设置百分比时，上下左右内边距均以父容器的width作为基础值。 | 138 139## margin 140 141margin(value: Margin | Length | LocalizedMargin) 142 143设置外边距属性。 144 145从API version 10开始，该接口支持calc计算特性。 146 147**卡片能力：** 从API version 9开始，该接口支持在ArkTS卡片中使用。 148 149**原子化服务API：** 从API version 11开始，该接口支持在原子化服务中使用。 150 151**系统能力：** SystemCapability.ArkUI.ArkUI.Full 152 153**参数：** 154 155| 参数名 | 类型 | 必填 | 说明 | 156| ------ | ------------------------------------------------------------ | -------- | ------------------------------------------------------------ | 157| value | [Margin](ts-types.md#margin) \| [Length](ts-types.md#length) \| [LocalizedMargin](ts-types.md#localizedmargin12)<sup>12+</sup> | 是 | 设置组件的外边距。<br/>参数为Length类型时，四个方向外边距同时生效。<br/>默认值：0 <br/>单位：vp<br/>margin设置百分比时，上下左右外边距均以父容器的width作为基础值。在[Row](./ts-container-row.md)、[Column](./ts-container-column.md)、[Flex](./ts-container-flex.md)交叉轴上布局时，子组件交叉轴的大小与margin的和为整体。<br/>例如Column容器宽100，其中子组件宽50，margin left为10，right为20，子组件水平方向偏移10。 | 158 159## safeAreaPadding<sup>14+</sup> 160 161safeAreaPadding(value: Padding | LengthMetrics | LocalizedPadding) 162 163设置安全区边距属性。允许容器向自身添加组件级安全区域，供子组件延伸。 164 165**卡片能力：** 从API version 14开始，该接口支持在ArkTS卡片中使用。 166 167**原子化服务API：** 从API version 14开始，该接口支持在原子化服务中使用。 168 169**系统能力：** SystemCapability.ArkUI.ArkUI.Full 170 171**参数：** 172 173| 参数名 | 类型 | 必填 | 说明 | 174| ----- | ---------------------------------------- | ---- | ---------------------------------------- | 175| paddingValue | [Padding](ts-types.md#padding) \| [LengthMetrics](../js-apis-arkui-graphics.md#lengthmetrics12) \| [LocalizedPadding](ts-types.md#localizedpadding12)| 是 | 设置组件的安全区边距。<br/>默认值：0 <br/>单位：vp | 176 177## layoutWeight 178 179layoutWeight(value: number | string) 180 181设置组件的布局权重，使用该属性的组件在父容器（[Row](./ts-container-row.md)/[Column](./ts-container-column.md)/[Flex](./ts-container-flex.md)）的主轴方向按照权重分配尺寸。 182 183**卡片能力：** 从API version 9开始，该接口支持在ArkTS卡片中使用。 184 185**原子化服务API：** 从API version 11开始，该接口支持在原子化服务中使用。 186 187**系统能力：** SystemCapability.ArkUI.ArkUI.Full 188 189**参数：** 190 191| 参数名 | 类型 | 必填 | 说明 | 192| ----- | -------------------------- | ------- | ---------------------------------------- | 193| value | number \| string | 是 | 父容器尺寸确定时，设置了layoutWeight属性的子元素与兄弟元素占主轴尺寸按照权重进行分配，忽略元素本身尺寸设置，表示自适应占满剩余空间。<br/>默认值：0<br/>**说明：** <br/>仅在[Row](./ts-container-row.md)/[Column](./ts-container-column.md)/[Flex](./ts-container-flex.md)布局中生效。<br/>可选值为大于等于0的数字，或者可以转换为数字的字符串。<br/>如果容器中有子元素设置了layoutWeight属性，且设置的属性值大于0，则所有子元素不会再基于flexShrink和flexGrow布局。 | 194 195## constraintSize 196 197constraintSize(value: ConstraintSizeOptions) 198 199设置约束尺寸，组件布局时，进行尺寸范围限制。 200 201从API version 10开始，该接口支持calc计算特性。 202 203**卡片能力：** 从API version 9开始，该接口支持在ArkTS卡片中使用。 204 205**原子化服务API：** 从API version 11开始，该接口支持在原子化服务中使用。 206 207**系统能力：** SystemCapability.ArkUI.ArkUI.Full 208 209**参数：** 210 211| 参数名 | 类型 | 必填 | 说明 | 212| ----- | ---------------------------------------- | ---- | ---------------------------------------- | 213| 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/> | 214 215**constraintSize(minWidth/maxWidth/minHeight/maxHeight)取值对width/height影响：** 216 217| 缺省值 | 结果 | 218| ---------------------------------------- | ---------------------------------------- | 219| \ | width=MAX(minWidth,MIN(maxWidth,width))<br/>height=MAX(minHeight,MIN(maxHeight,height)) | 220| maxWidth、maxHeight | width=MAX(minWidth,width)<br/>height=MAX(minHeight,height) | 221| minWidth、minHeight | width=MIN(maxWidth,width)<br/>height=MIN(maxHeight,height) | 222| width、height | 若minWidth<maxWidth，组件自身布局逻辑生效，width取值范围为[minWidth,maxWidth]；否则，width=MAX(minWidth,maxWidth)。<br/>若minHeight<maxHeight，组件自身布局逻辑生效，height取值范围为[minHeight,maxHeight]；否则，height=MAX(minHeight,maxHeight)。 | 223| width与maxWidth、height与maxHeight | width=minWidth<br/>height=minHeight | 224| width与minWidth、height与minHeight | 组件自身布局逻辑生效，width取值约束为不大于maxWidth。<br/>组件自身布局逻辑生效，height取值约束为不大于maxHeight。 | 225| minWidth与maxWidth、minHeight与maxHeight | width以所设值为基础，根据其他布局属性发生可能的拉伸或者压缩。<br/>height以所设值为基础，根据其他布局属性发生可能的拉伸或者压缩。| 226| width与minWidth与maxWidth | 使用父容器传递的布局限制进行布局。 | 227| height与minHeight与maxHeight | 使用父容器传递的布局限制进行布局。 | 228 229## SizeOptions对象说明 230 231**卡片能力：** 从API version 9开始，该接口支持在ArkTS卡片中使用。 232 233**原子化服务API：** 从API version 11开始，该接口支持在原子化服务中使用。 234 235| 参数名 | 类型 | 必填 | 说明 | 236| ----- | ---------------------------------------- | ---- | ---------------------------------------- | 237| width | [Length](ts-types.md#length) | 否 | 设置组件宽度。 | 238| height | [Length](ts-types.md#length) | 否 | 设置组件高度。 | 239 240## ConstraintSizeOptions对象说明 241 242**卡片能力：** 从API version 9开始，该接口支持在ArkTS卡片中使用。 243 244**原子化服务API：** 从API version 11开始，该接口支持在原子化服务中使用。 245 246| 参数名 | 类型 | 必填 | 说明 | 247| ----- | ---------------------------------------- | ---- | ---------------------------------------- | 248| minWidth | [Length](ts-types.md#length) | 否 | 设置组件最小宽度。 | 249| maxWidth | [Length](ts-types.md#length) | 否 | 设置组件最大宽度。 | 250| minHeight | [Length](ts-types.md#length) | 否 | 设置组件最小高度。 | 251| maxHeight | [Length](ts-types.md#length) | 否 | 设置组件最大高度。 | 252 253> **说明：** 254> 255> 在[Row](./ts-container-row.md)、[Column](./ts-container-column.md)、[RelativeContainer](./ts-container-relativecontainer.md)组件中，width、height设置auto表示自适应子组件。在[TextInput](./ts-basic-components-textinput.md)组件中，width设置auto表示自适应文本宽度。 256 257## 示例 258 259### 示例1（设置组件的宽高和边距） 260 261设置组件的宽度和高度，以及内边距和外边距。 262 263```ts 264// xxx.ets 265@Entry 266@Component 267struct SizeExample { 268 build() { 269 Column({ space: 10 }) { 270 Text('margin and padding:').fontSize(12).fontColor(0xCCCCCC).width('90%') 271 Row() { 272 // 宽度80 ,高度80 ,外边距20(蓝色区域），上下左右的内边距分别为5、15、10、20（白色区域） 273 Row() { 274 Row().size({ width: '100%', height: '100%' }).backgroundColor(Color.Yellow) 275 } 276 .width(80) 277 .height(80) 278 .padding({ top: 5, left: 10, bottom: 15, right: 20 }) 279 .margin(20) 280 .backgroundColor(Color.White) 281 }.backgroundColor(Color.Blue) 282 283 Text('constraintSize').fontSize(12).fontColor(0xCCCCCC).width('90%') 284 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') 285 .width('90%') 286 .constraintSize({ maxWidth: 200 }) 287 288 Text('layoutWeight').fontSize(12).fontColor(0xCCCCCC).width('90%') 289 // 父容器尺寸确定时，设置了layoutWeight的子元素在主轴布局尺寸按照权重进行分配，忽略本身尺寸设置。 290 Row() { 291 // 权重1，占主轴剩余空间1/3 292 Text('layoutWeight(1)') 293 .size({ width: '30%', height: 110 }).backgroundColor(0xFFEFD5).textAlign(TextAlign.Center) 294 .layoutWeight(1) 295 // 权重2，占主轴剩余空间2/3 296 Text('layoutWeight(2)') 297 .size({ width: '30%', height: 110 }).backgroundColor(0xF5DEB3).textAlign(TextAlign.Center) 298 .layoutWeight(2) 299 // 未设置layoutWeight属性，组件按照自身尺寸渲染 300 Text('no layoutWeight') 301 .size({ width: '30%', height: 110 }).backgroundColor(0xD2B48C).textAlign(TextAlign.Center) 302 }.size({ width: '90%', height: 140 }).backgroundColor(0xAFEEEE) 303 // calc计算特性 304 Text('calc:').fontSize(12).fontColor(0xCCCCCC).width('90%') 305 Text('calc test') 306 .fontSize(50) 307 .fontWeight(FontWeight.Bold) 308 .backgroundColor(0xFFFAF0) 309 .textAlign(TextAlign.Center) 310 .margin('calc(25vp*2)') 311 // width和height设置百分比时，以父容器的width和height作为基础值。 312 .size({ width: 'calc(90%)', height: 'calc(50vp + 10%)' }) 313 }.width('100%').margin({ top: 5 }) 314 } 315} 316``` 317 318 319 320### 示例2（LocalizedPadding和LocalizedMargin类型的使用） 321 322padding和margin属性使用LocalizedPadding类型和LocalizedMargin类型。 323 324```ts 325// xxx.ets 326import { LengthMetrics } from '@kit.ArkUI' 327 328@Entry 329@Component 330struct SizeExample { 331 build() { 332 Column({ space: 10 }) { 333 Text('margin and padding:').fontSize(12).fontColor(0xCCCCCC).width('90%') 334 Row() { 335 // 宽度80 ,高度80 ,上下开始结束的外边距40、20、30、10(蓝色区域），上下开始结束的内边距分别为5、15、10、20（白色区域） 336 Row() { 337 Row().size({ width: '100%', height: '100%' }).backgroundColor(Color.Yellow) 338 } 339 .width(80) 340 .height(80) 341 .padding({ 342 top: LengthMetrics.vp(5), 343 bottom: LengthMetrics.vp(15), 344 start: LengthMetrics.vp(10), 345 end: LengthMetrics.vp(20) 346 }) 347 .margin({ 348 top: LengthMetrics.vp(40), 349 bottom: LengthMetrics.vp(20), 350 start: LengthMetrics.vp(30), 351 end: LengthMetrics.vp(10) 352 }) 353 .backgroundColor(Color.White) 354 }.backgroundColor(Color.Blue) 355 }.width('100%').margin({ top: 5 }) 356 } 357} 358``` 359 360从左至右显示语言示例图 361 362 363 364从右至左显示语言示例图 365 366 367 368### 示例3（设置安全区） 369 370对容器设置组件级安全区。 371 372```ts 373// xxx.ets 374import { LengthMetrics } from '@kit.ArkUI'; 375 376@Entry 377@Component 378struct SafeAreaPaddingExample { 379 build() { 380 Column() { 381 Column() { 382 Column() 383 .width("100%") 384 .height("100%") 385 .backgroundColor(Color.Pink) 386 } 387 .width(200) 388 .height(200) 389 .backgroundColor(Color.Yellow) 390 .borderWidth(10) 391 .padding(10) 392 .safeAreaPadding(LengthMetrics.vp(40)) 393 } 394 .height('100%') 395 .width('100%') 396 } 397} 398``` 399 400
