1# 尺寸设置 2<!--Kit: ArkUI--> 3<!--Subsystem: ArkUI--> 4<!--Owner: @camlostshi--> 5<!--Designer: @lanshouren--> 6<!--Tester: @liuli0427--> 7<!--Adviser: @HelloCrease--> 8 9设置组件的宽高、边距。 10 11> **说明：** 12> 13> 从API Version 7开始支持。后续版本如有新增内容，则采用上角标单独标记该内容的起始版本。 14> 15> 如果组件的尺寸通过百分比进行设置， 在计算组件尺寸的百分比大小时，参考最近设置了固定大小的祖先节点的尺寸。 16 17## width 18 19width(value: Length): T 20 21设置组件自身的宽度，缺省时使用元素自身内容需要的宽度。若子组件的宽大于父组件的宽，则会画出父组件的范围。 22 23从API version 10开始，该接口支持calc计算特性。 24 25**卡片能力：** 从API version 9开始，该接口支持在ArkTS卡片中使用。 26 27**原子化服务API：** 从API version 11开始，该接口支持在原子化服务中使用。 28 29**系统能力：** SystemCapability.ArkUI.ArkUI.Full 30 31**参数：** 32 33| 参数名 | 类型 | 必填 | 说明 | 34| ----- | ---------------------------- | ---- | ------------------- | 35| value | [Length](ts-types.md#length) | 是 | 要设置的组件宽度。<br/>单位：vp | 36 37**返回值：** 38 39| 类型 | 说明 | 40| --- | --- | 41| T | 返回当前组件。 | 42 43> **说明：** 44> 45> - 在[TextInput](./ts-basic-components-textinput.md)组件中，width设置auto表示自适应文本宽度。 46> 47> - 在[AlphabetIndexer](./ts-container-alphabet-indexer.md)组件中，width设置auto表示自适应宽度最大索引项的宽度。 48 49## height 50 51height(value: Length): T 52 53设置组件自身的高度，缺省时使用元素自身内容需要的高度。若子组件的高大于父组件的高，则会画出父组件的范围。 54 55从API version 10开始，该接口支持calc计算特性。 56 57**卡片能力：** 从API version 9开始，该接口支持在ArkTS卡片中使用。 58 59**原子化服务API：** 从API version 11开始，该接口支持在原子化服务中使用。 60 61**系统能力：** SystemCapability.ArkUI.ArkUI.Full 62 63**参数：** 64 65| 参数名 | 类型 | 必填 | 说明 | 66| ----- | ---------------------------- | ---- | ------------------- | 67| value | [Length](ts-types.md#length) | 是 | 要设置的组件高度。<br/>单位：vp | 68 69**返回值：** 70 71| 类型 | 说明 | 72| --- | --- | 73| T | 返回当前组件。 | 74 75> **说明：** 76> 77> 在[Row](./ts-container-row.md)、[Column](./ts-container-column.md)、[RelativeContainer](./ts-container-relativecontainer.md)组件中，width、height设置auto表示自适应子组件。 78 79## width<sup>15+</sup> 80 81width(widthValue: Length | LayoutPolicy): T 82 83设置组件自身的宽度或水平方向布局策略，缺省时使用元素自身内容需要的宽度。若子组件的宽大于父组件的宽，则会画出父组件的范围。 84 85**卡片能力：** 从API version 15开始，该接口支持在ArkTS卡片中使用。 86 87**原子化服务API：** 从API version 15开始，该接口支持在原子化服务中使用。 88 89**系统能力：** SystemCapability.ArkUI.ArkUI.Full 90 91**参数：** 92 93| 参数名 | 类型 | 必填 | 说明 | 94| ----- | ---------------------------- | ---- | ------------------- | 95| widthValue | [Length](ts-types.md#length) \| [LayoutPolicy](ts-universal-attributes-size.md#layoutpolicy15) | 是 | 要设置的组件宽度。<br/>单位：vp | 96 97**返回值：** 98 99| 类型 | 说明 | 100| --- | --- | 101| T | 返回当前组件。 | 102 103## height<sup>15+</sup> 104 105height(heightValue: Length | LayoutPolicy): T 106 107设置组件自身的高度或垂直方向布局策略，缺省时使用元素自身内容需要的高度。若子组件的高大于父组件的高，则会画出父组件的范围。 108 109**卡片能力：** 从API version 15开始，该接口支持在ArkTS卡片中使用。 110 111**原子化服务API：** 从API version 15开始，该接口支持在原子化服务中使用。 112 113**系统能力：** SystemCapability.ArkUI.ArkUI.Full 114 115**参数：** 116 117| 参数名 | 类型 | 必填 | 说明 | 118| ----- | ---------------------------- | ---- | ------------------- | 119| heightValue | [Length](ts-types.md#length) \| [LayoutPolicy](ts-universal-attributes-size.md#layoutpolicy15) | 是 | 要设置的组件高度。<br/>单位：vp | 120 121**返回值：** 122 123| 类型 | 说明 | 124| --- | --- | 125| T | 返回当前组件。 | 126 127## size 128 129size(value: SizeOptions): T 130 131设置组件自身的宽高尺寸。 132 133从API version 10开始，该接口支持calc计算特性。 134 135**卡片能力：** 从API version 9开始，该接口支持在ArkTS卡片中使用。 136 137**原子化服务API：** 从API version 11开始，该接口支持在原子化服务中使用。 138 139**系统能力：** SystemCapability.ArkUI.ArkUI.Full 140 141**参数：** 142 143| 参数名 | 类型 | 必填 | 说明 | 144| ----- | ------------------------------- | ---- | ----------------- | 145| value | [SizeOptions](ts-types.md#sizeoptions) | 是 | 设置宽高尺寸。<br/>异常值：参数为undefined时，属性设置不生效；其它异常值时，size属性恢复到不配置时的默认行为。<br/>单位：vp | 146 147**返回值：** 148 149| 类型 | 说明 | 150| --- | --- | 151| T | 返回当前组件。 | 152 153## padding 154 155padding(value: Padding | Length | LocalizedPadding): T 156 157设置组件的内边距属性。 158 159从API version 10开始，该接口支持calc计算特性。 160 161**卡片能力：** 从API version 9开始，该接口支持在ArkTS卡片中使用。 162 163**原子化服务API：** 从API version 11开始，该接口支持在原子化服务中使用。 164 165**系统能力：** SystemCapability.ArkUI.ArkUI.Full 166 167**参数：** 168 169| 参数名 | 类型 | 必填 | 说明 | 170| ----- | ---------------------------------------- | ---- | ---------------------------------------- | 171| 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作为基础值。 | 172 173**返回值：** 174 175| 类型 | 说明 | 176| --- | --- | 177| T | 返回当前组件。 | 178 179## margin 180 181margin(value: Margin | Length | LocalizedMargin): T 182 183设置组件的外边距属性。在计算位置时外边距视为组件大小的一部分，从而影响组件位置。 184 185从API version 10开始，该接口支持calc计算特性。 186 187**卡片能力：** 从API version 9开始，该接口支持在ArkTS卡片中使用。 188 189**原子化服务API：** 从API version 11开始，该接口支持在原子化服务中使用。 190 191**系统能力：** SystemCapability.ArkUI.ArkUI.Full 192 193**参数：** 194 195| 参数名 | 类型 | 必填 | 说明 | 196| ------ | ------------------------------------------------------------ | -------- | ------------------------------------------------------------ | 197| 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。 | 198 199**返回值：** 200 201| 类型 | 说明 | 202| --- | --- | 203| T | 返回当前组件。 | 204 205## safeAreaPadding<sup>14+</sup> 206 207safeAreaPadding(paddingValue: Padding | LengthMetrics | LocalizedPadding): T 208 209设置安全区边距属性。允许容器向自身添加组件级安全区域，供子组件延伸，支持[attributeModifier](ts-universal-attributes-attribute-modifier.md#attributemodifier)动态设置属性方法。 210 211**卡片能力：** 从API version 14开始，该接口支持在ArkTS卡片中使用。 212 213**原子化服务API：** 从API version 14开始，该接口支持在原子化服务中使用。 214 215**系统能力：** SystemCapability.ArkUI.ArkUI.Full 216 217**参数：** 218 219| 参数名 | 类型 | 必填 | 说明 | 220| ----- | ---------------------------------------- | ---- | ---------------------------------------- | 221| paddingValue | [Padding](ts-types.md#padding) \| [LengthMetrics](../js-apis-arkui-graphics.md#lengthmetrics12) \| [LocalizedPadding](ts-types.md#localizedpadding12)| 是 | 设置组件的安全区边距。<br/>默认值：0 <br/>单位：vp | 222 223**返回值：** 224 225| 类型 | 说明 | 226| --- | --- | 227| T | 返回当前组件。 | 228 229> **说明：** 230> 231> 当父辈和祖先容器设置了组件级安全区域时，子组件可以感知并利用该区域，称该区域为累计安全区延伸（accumulatedSafeAreaExpand，下文简称SAE），表示子组件在四个方向上各可延伸的长度。当祖辈与更上一级祖辈的safeAreaPadding相邻接（即未被margin、border、padding分隔）时，SAE将递归地向外累积，直至不存在相邻的更外层safeAreaPadding或递归至页面容器外。系统级避让区域（如状态栏、导航条、挖孔区等，详情参见[expandSafeArea](./ts-universal-attributes-expand-safe-area.md)中的说明）可视为页面容器特有的safeAreaPadding，同样参与该延伸范围的计算。 232> 233>通过与其他属性配合使用，可对上述计算得到的组件级安全区区域加以利用。例如，对子组件设置[ignoreLayoutSafeArea](./ts-universal-attributes-expand-safe-area.md#ignorelayoutsafearea20)属性，即可利用SAE延伸组件的布局范围。 234 235## layoutWeight 236 237layoutWeight(value: number | string): T 238 239设置组件的布局权重，使组件在父容器（[Row](./ts-container-row.md)/[Column](./ts-container-column.md)/[Flex](./ts-container-flex.md)）的主轴方向按照权重分配尺寸。 240 241**卡片能力：** 从API version 9开始，该接口支持在ArkTS卡片中使用。 242 243**原子化服务API：** 从API version 11开始，该接口支持在原子化服务中使用。 244 245**系统能力：** SystemCapability.ArkUI.ArkUI.Full 246 247**参数：** 248 249| 参数名 | 类型 | 必填 | 说明 | 250| ----- | -------------------------- | ------- | ---------------------------------------- | 251| value | number \| string | 是 | 父容器尺寸确定时，不设置layoutWeight属性或者layoutWeight属性生效值为0的元素优先占位，这些元素占位后在主轴留下的空间称为主轴剩余空间。设置了layoutWeight属性且layoutWeight属性生效值大于0的子元素会从主轴剩余空间中按照各自所设置的权重占比分配尺寸，分配时会忽略元素本身的尺寸设置。<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布局。 | 252 253**返回值：** 254 255| 类型 | 说明 | 256| --- | --- | 257| T | 返回当前组件。 | 258 259## constraintSize 260 261constraintSize(value: ConstraintSizeOptions): T 262 263设置约束尺寸，组件布局时，进行尺寸范围限制。 264 265从API version 10开始，该接口支持calc计算特性。 266 267**卡片能力：** 从API version 9开始，该接口支持在ArkTS卡片中使用。 268 269**原子化服务API：** 从API version 11开始，该接口支持在原子化服务中使用。 270 271**系统能力：** SystemCapability.ArkUI.ArkUI.Full 272 273**参数：** 274 275| 参数名 | 类型 | 必填 | 说明 | 276| ----- | ---------------------------------------- | ---- | ---------------------------------------- | 277| 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/>异常值：数值开头的字符串仅解析出数字部分，非数值开头的字符串解析为0；其它异常值时，constraintSize属性恢复到不配置时的默认行为。<br/>单位：vp<br/> | 278 279**返回值：** 280 281| 类型 | 说明 | 282| --- | --- | 283| T | 返回当前组件。 | 284 285**constraintSize(minWidth/maxWidth/minHeight/maxHeight)取值对width/height影响：** 286 287| 缺省值 | 结果 | 288| ---------------------------------------- | ---------------------------------------- | 289| \ | width=MAX(minWidth,MIN(maxWidth,width))<br/>height=MAX(minHeight,MIN(maxHeight,height)) | 290| maxWidth、maxHeight | width=MAX(minWidth,width)<br/>height=MAX(minHeight,height) | 291| minWidth、minHeight | width=MIN(maxWidth,width)<br/>height=MIN(maxHeight,height) | 292| width、height | 若minWidth<maxWidth，组件自身布局逻辑生效，width取值范围为[minWidth,maxWidth]；否则，width=MAX(minWidth,maxWidth)。<br/>若minHeight<maxHeight，组件自身布局逻辑生效，height取值范围为[minHeight,maxHeight]；否则，height=MAX(minHeight,maxHeight)。 | 293| width与maxWidth、height与maxHeight | width=minWidth<br/>height=minHeight | 294| width与minWidth、height与minHeight | 组件自身布局逻辑生效，width取值约束为不大于maxWidth。<br/>组件自身布局逻辑生效，height取值约束为不大于maxHeight。 | 295| minWidth与maxWidth、minHeight与maxHeight | width以所设值为基础，根据其他布局属性发生可能的拉伸或者压缩。<br/>height以所设值为基础，根据其他布局属性发生可能的拉伸或者压缩。| 296| width与minWidth与maxWidth | 使用父容器传递的布局限制进行布局。 | 297| height与minHeight与maxHeight | 使用父容器传递的布局限制进行布局。 | 298 299## LayoutPolicy<sup>15+</sup> 300 301用于组件宽度和高度的布局策略。 302 303**系统能力：** SystemCapability.ArkUI.ArkUI.Full 304 305| 名称 | 类型 | 只读 | 可选 | 说明 | 306| --------- | ------ | ---- | ---- |---------- | 307| matchParent | [LayoutPolicy](ts-universal-attributes-size.md#layoutpolicy15) | 是 | 否 | 当前组件自适应父组件布局时，其大小与父组件内容区相等，不包括padding，border和safeAreaPadding。<br>**卡片能力：** 从API version 15开始，该接口支持在ArkTS卡片中使用。 <br>**原子化服务API：** 从API version 15开始，该接口支持在原子化服务中使用。| 308| wrapContent<sup>20+</sup> | [LayoutPolicy](ts-universal-attributes-size.md#layoutpolicy15) | 是 | 否 | 当前组件自适应子组件（内容）时，其大小与子组件（内容）相等，并且其大小受父组件内容区大小约束。<br>**卡片能力：** 从API version 20开始，该接口支持在ArkTS卡片中使用。 <br>**原子化服务API：** 从API version 20开始，该接口支持在原子化服务中使用。| 309| fixAtIdealSize<sup>20+</sup> | [LayoutPolicy](ts-universal-attributes-size.md#layoutpolicy15) | 是 | 否 | 当前组件自适应子组件（内容）时，其大小与子组件（内容）相等，并且其大小不受父组件内容区大小约束。<br>**卡片能力：** 从API version 20开始，该接口支持在ArkTS卡片中使用。 <br>**原子化服务API：** 从API version 20开始，该接口支持在原子化服务中使用。| 310 311> **说明：** 312> 313> - LayoutPolicy支持设置三种布局策略：matchParent（自适应父组件布局）、wrapContent（根据内容自适应但不超过父组件尺寸的布局）和fixAtIdealSize（根据内容自适应，可能超过父组件尺寸的布局）。具体示例代码参见[设置布局策略](./ts-universal-attributes-size.md#示例5设置布局策略)。 314> 315> - wrapContent和fixAtIdealSize场景，组件无法通过内容确定大小时，如果组件大小有默认值，则按照默认值进行测算；如果没有默认值，则按照宽高(0,0)进行测算。 316> 317> - 容器设置wrapContent，并且有子组件设置matchParent时，容器先由确定大小的子组件撑大，设置matchParent的子组件再匹配容器大小；如果没有确定大小的子组件，容器和子组件大小均为0。 318> 319> - LayoutPolicy优先级低于constraintSize。 320 321## 示例 322 323### 示例1（设置组件的宽高和边距） 324 325设置组件的宽度、高度、内边距及外边距。 326 327```ts 328// xxx.ets 329@Entry 330@Component 331struct SizeExample { 332 build() { 333 Column({ space: 10 }) { 334 Text('margin and padding:').fontSize(12).fontColor(0xCCCCCC).width('90%') 335 Row() { 336 // 宽度80 ,高度80 ,外边距20(蓝色区域），上下左右的内边距分别为5、15、10、20（白色区域） 337 Row() { 338 Row() 339 .size({ width: '100%', height: '100%' }) 340 .backgroundColor(Color.Yellow) 341 } 342 .width(80) 343 .height(80) 344 .padding({ top: 5, left: 10, bottom: 15, right: 20 }) 345 .margin(20) 346 .backgroundColor(Color.White) 347 }.backgroundColor(Color.Blue) 348 349 Text('constraintSize') 350 .fontSize(12) 351 .fontColor(0xCCCCCC) 352 .width('90%') 353 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') 354 .width('90%') 355 .constraintSize({ maxWidth: 200 }) 356 357 Text('layoutWeight') 358 .fontSize(12) 359 .fontColor(0xCCCCCC) 360 .width('90%') 361 // 父容器尺寸确定时，设置了layoutWeight的子元素在主轴布局尺寸按照权重进行分配，忽略本身尺寸设置。 362 Row() { 363 // 权重1，占主轴剩余空间1/3 364 Text('layoutWeight(1)') 365 .size({ width: '30%', height: 110 }).backgroundColor(0xFFEFD5).textAlign(TextAlign.Center) 366 .layoutWeight(1) 367 // 权重2，占主轴剩余空间2/3 368 Text('layoutWeight(2)') 369 .size({ width: '30%', height: 110 }).backgroundColor(0xF5DEB3).textAlign(TextAlign.Center) 370 .layoutWeight(2) 371 // 未设置layoutWeight属性，组件按照自身尺寸渲染 372 Text('no layoutWeight') 373 .size({ width: '30%', height: 110 }).backgroundColor(0xD2B48C).textAlign(TextAlign.Center) 374 } 375 .size({ width: '90%', height: 140 }) 376 .backgroundColor(0xAFEEEE) 377 // calc计算特性 378 Text('calc:') 379 .fontSize(12) 380 .fontColor(0xCCCCCC) 381 .width('90%') 382 Text('calc test') 383 .fontSize(50) 384 .fontWeight(FontWeight.Bold) 385 .backgroundColor(0xFFFAF0) 386 .textAlign(TextAlign.Center) 387 .margin('calc(25vp*2)') 388 // width和height设置百分比时，以父容器的width和height作为基础值。 389 .size({ width: 'calc(90%)', height: 'calc(50vp + 10%)' }) 390 } 391 .width('100%') 392 .margin({ top: 5 }) 393 } 394} 395``` 396 397 398 399### 示例2（LocalizedPadding和LocalizedMargin类型的使用） 400 401使用LocalizedPadding类型和LocalizedMargin类型定义padding和margin属性。 402 403```ts 404// xxx.ets 405import { LengthMetrics } from '@kit.ArkUI' 406 407@Entry 408@Component 409struct SizeExample { 410 build() { 411 Column({ space: 10 }) { 412 Text('margin and padding:') 413 .fontSize(12) 414 .fontColor(0xCCCCCC) 415 .width('90%') 416 Row() { 417 // 宽度80 ,高度80 ,上下开始结束的外边距40、20、30、10(蓝色区域），上下开始结束的内边距分别为5、15、10、20（白色区域） 418 Row() { 419 Row() 420 .size({ width: '100%', height: '100%' }) 421 .backgroundColor(Color.Yellow) 422 } 423 .width(80) 424 .height(80) 425 .padding({ 426 top: LengthMetrics.vp(5), 427 bottom: LengthMetrics.vp(15), 428 start: LengthMetrics.vp(10), 429 end: LengthMetrics.vp(20) 430 }) 431 .margin({ 432 top: LengthMetrics.vp(40), 433 bottom: LengthMetrics.vp(20), 434 start: LengthMetrics.vp(30), 435 end: LengthMetrics.vp(10) 436 }) 437 .backgroundColor(Color.White) 438 } 439 .backgroundColor(Color.Blue) 440 } 441 .width('100%') 442 .margin({ top: 5 }) 443 } 444} 445``` 446 447从左至右显示语言示例图 448 449 450 451从右至左显示语言示例图 452 453 454 455### 示例3（设置安全区） 456 457对容器设置组件级安全区。 458 459```ts 460// xxx.ets 461import { LengthMetrics } from '@kit.ArkUI'; 462 463@Entry 464@Component 465struct SafeAreaPaddingExample { 466 build() { 467 Column() { 468 Column() { 469 Column() 470 .width("100%") 471 .height("100%") 472 .backgroundColor(Color.Pink) 473 } 474 .width(200) 475 .height(200) 476 .backgroundColor(Color.Yellow) 477 .borderWidth(10) 478 .padding(10) 479 .safeAreaPadding(LengthMetrics.vp(40)) 480 } 481 .height('100%') 482 .width('100%') 483 } 484} 485``` 486 487 488 489### 示例4（使用attributeModifier动态设置安全区） 490 491使用attributeModifier对容器设置组件级安全区。 492 493```ts 494// xxx.ets 495class MyModifier implements AttributeModifier<CommonAttribute> { 496 applyNormalAttribute(instance: CommonAttribute): void { 497 instance.safeAreaPadding({ 498 left: 10, 499 top: 20, 500 right: 30, 501 bottom: 40 502 }) 503 } 504} 505 506@Entry 507@Component 508struct SafeAreaPaddingExample { 509 @State modifier: MyModifier = new MyModifier() 510 511 build() { 512 Column() { 513 Column() { 514 Column() 515 .width("100%") 516 .height("100%") 517 .backgroundColor(Color.Pink) 518 } 519 .width(200) 520 .height(200) 521 .backgroundColor(Color.Yellow) 522 .borderWidth(10) 523 .padding(10) 524 .attributeModifier(this.modifier) 525 } 526 .height('100%') 527 .width('100%') 528 } 529} 530``` 531 532 533 534### 示例5（设置布局策略） 535 536对容器大小设置布局策略。 537 538```ts 539// xxx.ets 540@Entry 541@Component 542struct LayoutPolicyExample { 543 build() { 544 Column() { 545 Column() { 546 // matchParent生效时，当前组件会与其父组件内容区大小（180vp * 180vp）相等，同时依旧受自身constraintSize（150vp * 150vp）约束，因此当前组件大小为150vp * 150vp 547 Text("matchParent") 548 Flex() 549 .backgroundColor('rgb(0, 74, 175)') 550 .width(LayoutPolicy.matchParent) 551 .height(LayoutPolicy.matchParent) 552 .constraintSize({ maxWidth: 150, maxHeight: 150 }) 553 554 // wrapContent生效时，当前组件会与其子组件大小（300vp * 300vp）相等，但不能超过父组件内容大小（180vp * 180vp）且会受自身constraintSize（250vp * 250vp）约束，因此当前组件大小为180vp * 180vp 555 Text("wrapContent") 556 Row() { 557 Flex() 558 .width(300) 559 .height(300) 560 } 561 .backgroundColor('rgb(39, 135, 217)') 562 .width(LayoutPolicy.wrapContent) 563 .height(LayoutPolicy.wrapContent) 564 .constraintSize({ maxWidth: 250, maxHeight: 250 }) 565 566 // 从API version 20开始，layoutPolicy支持wrapContent和fixAtIdealSize。fixAtIdealSize生效时，当前组件会与其子组件大小（300vp * 300vp）相等，可以超过父组件内容大小（180vp * 180vp）但会受自身constraintSize（250vp * 250vp）约束，因此当前组件大小为250vp * 250vp 567 Text("fixAtIdealSize") 568 569 Row() { 570 Flex() 571 .width(300) 572 .height(300) 573 } 574 .backgroundColor('rgb(240, 250, 255)') 575 .width(LayoutPolicy.fixAtIdealSize) 576 .height(LayoutPolicy.fixAtIdealSize) 577 .constraintSize({ maxWidth: 250, maxHeight: 250 }) 578 } 579 .width(200) 580 .height(200) 581 .padding(10) 582 } 583 .width("100%") 584 .height("100%") 585 } 586} 587``` 588 589
