1# Size 2 3The size attributes set the width, height, and margin of a component. 4 5> **NOTE** 6> 7> The APIs of this module are supported since API version 7. Updates will be marked with a superscript to indicate their earliest API version. 8 9## width 10 11width(value: Length) 12 13Sets the width of the component. By default, the width required to fully hold the component content is used. If the width of the component is greater than that of the parent container, the component will be drawn beyond the parent container scope. 14 15Since API version 10, this API supports the calc calculation feature. 16 17**Widget capability**: Since API version 9, this feature is supported in ArkTS widgets. 18 19**System capability**: SystemCapability.ArkUI.ArkUI.Full 20 21**Parameters** 22 23| Name | Type | Mandatory | Description | 24| ----- | ---------------------------- | ---- | ------------------- | 25| value | [Length](ts-types.md#length) | Yes | Width of the component to set.<br>Unit: vp| 26 27## height 28 29height(value: Length) 30 31Sets the height of the component. By default, the height required to fully hold the component content is used. If the height of the component is greater than that of the parent container, the component will be drawn beyond the parent container scope. 32 33Since API version 10, this API supports the calc calculation feature. 34 35**Widget capability**: Since API version 9, this feature is supported in ArkTS widgets. 36 37**System capability**: SystemCapability.ArkUI.ArkUI.Full 38 39**Parameters** 40 41| Name | Type | Mandatory | Description | 42| ----- | ---------------------------- | ---- | ------------------- | 43| value | [Length](ts-types.md#length) | Yes | Height of the component to set.<br>Unit: vp| 44 45> **NOTE** 46> 47> For the **\<Row>**, **\<Column>**, and **\<RelativeContainer>** components, the **auto** option of **width** and **height** means to adapt to their child components. For the **\<TextInput>** component, the **auto** option of **width** means to adapt to the text width. 48 49## Size 50 51size(value: SizeOptions) 52 53Sets the size of the component. 54 55Since API version 10, this API supports the calc calculation feature. 56 57**Widget capability**: Since API version 9, this feature is supported in ArkTS widgets. 58 59**System capability**: SystemCapability.ArkUI.ArkUI.Full 60 61**Parameters** 62 63| Name | Type | Mandatory | Description | 64| ----- | ------------------------------- | ---- | ----------------- | 65| value | [SizeOptions](#sizeoptions) | Yes | Size of the component to set.<br>Unit: vp| 66 67## padding 68 69padding(value: Padding | Length) 70 71Sets the padding of the component. 72 73Since API version 10, this API supports the calc calculation feature. 74 75**Widget capability**: Since API version 9, this feature is supported in ArkTS widgets. 76 77**System capability**: SystemCapability.ArkUI.ArkUI.Full 78 79**Parameters** 80 81| Name | Type | Mandatory | Description | 82| ----- | ---------------------------------------- | ---- | ---------------------------------------- | 83| value | [Padding](ts-types.md#padding) \| [Length](ts-types.md#length) | Yes | Padding of the component to set.<br>When the parameter is of the **Length** type, the four paddings take effect.<br>Default value: **0**<br>Unit: vp<br>When **padding** is set to a percentage, the width of the parent container is used as the basic value.| 84 85## margin 86 87margin(value: margin | Length) 88 89Sets the margin of the component. 90 91Since API version 10, this API supports the calc calculation feature. 92 93**Widget capability**: Since API version 9, this feature is supported in ArkTS widgets. 94 95**System capability**: SystemCapability.ArkUI.ArkUI.Full 96 97**Parameters** 98 99| Name | Type | Mandatory | Description | 100| ----- | ---------------------------------------- | ------- | ---------------------------------------- | 101| value | [Margin](ts-types.md#margin) \| [Length](ts-types.md#length) | Yes| Margin of the component to set.<br>When the parameter is of the **Length** type, the four margins take effect.<br>Default value: **0**<br>Unit: vp<br>When **margin** is set to a percentage, the width of the parent container is used as the basic value. When child components are laid out along the cross axis of the **\<Row>**, **\<Column>**, or **\<Flex>** container, the cross axis size of the child components and the margins add up to the total size of the container.<br>For example, if the width of the **\<Column>** container is 100, the width of the child component is 50, the left margin is 10, and the right margin is 20, then the actual horizontal offset of the child component is 20.| 102 103## layoutWeight 104 105layoutWeight(value: number | string) 106 107Sets the weight of the component during layout. 108 109**Widget capability**: Since API version 9, this feature is supported in ArkTS widgets. 110 111**System capability**: SystemCapability.ArkUI.ArkUI.Full 112 113**Parameters** 114 115| Name | Type | Mandatory | Description | 116| ----- | -------------------------- | ------- | ---------------------------------------- | 117| value | number \| string | Yes| Weight of the component during layout. When the container size is determined, the container space is allocated along the main axis among the component and sibling components based on the layout weight, and the component size setting is ignored.<br>Default value: **0**<br>**NOTE**<br>This attribute is valid only for the **\<Row>**, **\<Column>**, and **\<Flex>** layouts.<br>The value can be a number greater than or equal to 0 or a string that can be converted to a number.| 118 119## constraintSize 120 121constraintSize(value: ConstraintSizeOptions) 122 123Sets the constraint size of the component, which is used to limit the size range during component layout. 124 125Since API version 10, this API supports the calc calculation feature. 126 127**Widget capability**: Since API version 9, this feature is supported in ArkTS widgets. 128 129**System capability**: SystemCapability.ArkUI.ArkUI.Full 130 131**Parameters** 132 133| Name | Type | Mandatory | Description | 134| ----- | ---------------------------------------- | ---- | ---------------------------------------- | 135| value | [ConstraintSizeOptions](#constraintsizeoptions) | Yes | Constraint size of the component to set. **constraintSize** takes precedence over **width** and **height**. See **Impact of constraintSize on width/height**.<br>Default value:<br>{<br>minWidth: 0,<br>maxWidth: Infinity,<br>minHeight: 0,<br>maxHeight: Infinity<br>}<br>Unit: vp<br>| 136 137**Impact of constraintSize on width/height** 138 139| Default Value | Result | 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 | In the case of maxWidth/maxHeight > minWidth/minHeight, the layout logic of the component is used,<br>and the result is between maxWidth/maxHeight and minWidth/minHeight.<br> In other cases, the result is max(minWidth/minHeight, maxWidth/maxHeight).| 145| maxWidth/maxHeight && width/height | minWidth/minHeight | 146| minWidth/minHeight && width/height | The layout logic of the component is used. The final result does not exceed maxWidth/maxHeight. | 147| maxWidth/maxHeight && minWidth/minHeight | Width/Height, which may be stretched or compressed based on other layout attributes. | 148| maxWidth/maxHeight && minWidth/minHeight && width/height | The layout restrictions passed by the parent container are used for layout. | 149 150## SizeOptions 151 152Since API version 9, this API is supported in ArkTS widgets. 153 154| Name | Type | Mandatory | Description | 155| ----- | ---------------------------------------- | ---- | ---------------------------------------- | 156| width | [Length](ts-types.md#length) | No| Component width.| 157| height | [Length](ts-types.md#length) | No| Component height.| 158 159## ConstraintSizeOptions 160 161Since API version 9, this API is supported in ArkTS widgets. 162 163| Name | Type | Mandatory | Description | 164| ----- | ---------------------------------------- | ---- | ---------------------------------------- | 165| minWidth | [Length](ts-types.md#length) | No| Minimum width of the component.| 166| maxWidth | [Length](ts-types.md#length) | No| Maximum width of the component.| 167| minHeight | [Length](ts-types.md#length) | No| Minimum height of the component.| 168| maxHeight | [Length](ts-types.md#length) | No| Maximum height of the component.| 169 170> **NOTE** 171> 172> For the **\<Row>**, **\<Column>**, and **\<RelativeContainer>** components, the **auto** option of **width** and **height** means to adapt to their child components. For the **\<TextInput>** component, the **auto** option of **width** means to adapt to the text width. 173 174## Example 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 // Width: 80; height: 80; margin: 20 (blue area); top, bottom, left, and right paddings: 5, 15, 10, and 20 (white area) 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 // When the container size is determined, the component occupies the space along the main axis based on the layout weight, and the component size setting is ignored. 203 Row() { 204 // Weight 1: The component occupies 1/3 of the remaining space along the main axis. 205 Text('layoutWeight(1)') 206 .size({ width: '30%', height: 110 }).backgroundColor(0xFFEFD5).textAlign(TextAlign.Center) 207 .layoutWeight(1) 208 // Weight 2: The component occupies 2/3 of the remaining space along the main axis. 209 Text('layoutWeight(2)') 210 .size({ width: '30%', height: 110 }).backgroundColor(0xF5DEB3).textAlign(TextAlign.Center) 211 .layoutWeight(2) 212 // If layoutWeight is not set, the component is rendered based on its own size setting. 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 calculation feature 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
