1# Layout Constraints 2 3Layout constraints refer to constraints on the aspect ratio and display priority of components. 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## aspectRatio 10 11aspectRatio(value: number) 12 13Sets the aspect ratio of the component. 14 15**Widget capability**: Since API version 9, this API is supported in ArkTS widgets. 16 17**System capability**: SystemCapability.ArkUI.ArkUI.Full 18 19**Parameters** 20 21| Name| Type | Mandatory| Description | 22| ------ | ------ | ---- | ------------------------------------------------------------ | 23| value | number | Yes | Aspect ratio of the component, which can be obtained using the following formula: Width/Height.<br>The default value varies by API version.<br>API version 9 and earlier: **1.0**<br>API version 10: none<br>**NOTE**<br>This attribute does not take effect when it is not set or is set to an invalid value.<br>For example, if a **\<Row>** component has only its width set and does not have any child component, then when **aspectRatio** is not set or is set to a negative value, the height of the **\<Row>** component is 0.| 24 25## displayPriority 26 27displayPriority(value: number) 28 29Sets the display priority for the component in the layout container. 30 31**Widget capability**: Since API version 9, this API is supported in ArkTS widgets. 32 33**System capability**: SystemCapability.ArkUI.ArkUI.Full 34 35**Parameters** 36 37| Name| Type | Mandatory| Description | 38| ------ | ------ | ---- | ------------------------------------------------------------ | 39| value | number | Yes | Display priority for the component in the layout container. When the space of the parent container is insufficient, the component with a lower priority is hidden.<br>The digits after the decimal point are not counted in determining the display priority. That is, numbers in the [x, x + 1) range are considered to represent the same priority. For example, **1.0** and **1.9** represent the same priority.<br>**NOTE**<br>This attribute is valid only for the **\<Row>**, **\<Column>**, and **\<Flex>** (single-row) container components.| 40 41## Example 42 43### Example 1 44 45```ts 46// xxx.ets 47@Entry 48@Component 49struct AspectRatioExample { 50 private children: string[] = ['1', '2', '3', '4', '5', '6'] 51 52 build() { 53 Column({ space: 20 }) { 54 Text('using container: row').fontSize(14).fontColor(0xCCCCCC).width('100%') 55 Row({ space: 10 }) { 56 ForEach(this.children, (item:string) => { 57 // Component width = Component height x 1.5 = 90 58 Text(item) 59 .backgroundColor(0xbbb2cb) 60 .fontSize(20) 61 .aspectRatio(1.5) 62 .height(60) 63 // Component height = Component width/1.5 = 60/1.5 = 40 64 Text(item) 65 .backgroundColor(0xbbb2cb) 66 .fontSize(20) 67 .aspectRatio(1.5) 68 .width(60) 69 }, (item:string) => item) 70 } 71 .size({ width: "100%", height: 100 }) 72 .backgroundColor(0xd2cab3) 73 .clip(true) 74 75 // Grid child component width/height = 3/2 76 Text('using container: grid').fontSize(14).fontColor(0xCCCCCC).width('100%') 77 Grid() { 78 ForEach(this.children, (item:string) => { 79 GridItem() { 80 Text(item) 81 .backgroundColor(0xbbb2cb) 82 .fontSize(40) 83 .width('100%') 84 .aspectRatio(1.5) 85 } 86 }, (item:string) => item) 87 } 88 .columnsTemplate('1fr 1fr 1fr') 89 .columnsGap(10) 90 .rowsGap(10) 91 .size({ width: "100%", height: 165 }) 92 .backgroundColor(0xd2cab3) 93 }.padding(10) 94 } 95} 96``` 97 98**Figure 1** Portrait display<br> 99 100 101**Figure 2** Landscape display<br> 102 103 104### Example 2 105 106```ts 107class ContainerInfo { 108 label: string = ''; 109 size: string = ''; 110} 111 112class ChildInfo { 113 text: string = ''; 114 priority: number = 0; 115} 116 117@Entry 118@Component 119struct DisplayPriorityExample { 120 // Display the container size. 121 private container: ContainerInfo[] = [ 122 { label: 'Big container', size: '90%' }, 123 { label: 'Middle container', size: '50%' }, 124 { label: 'Small container', size: '30%' } 125 ] 126 private children: ChildInfo[] = [ 127 { text: '1\n(priority:2)', priority: 2 }, 128 { text: '2\n(priority:1)', priority: 1 }, 129 { text: '3\n(priority:3)', priority: 3 }, 130 { text: '4\n(priority:1)', priority: 1 }, 131 { text: '5\n(priority:2)', priority: 2 } 132 ] 133 @State currentIndex: number = 0; 134 135 build() { 136 Column({ space: 10 }) { 137 // Switch the size of the parent container. 138 Button(this.container[this.currentIndex].label).backgroundColor(0x317aff) 139 .onClick(() => { 140 this.currentIndex = (this.currentIndex + 1) % this.container.length; 141 }) 142 // Set the width for the parent flex container through variables. 143 Flex({ justifyContent: FlexAlign.SpaceBetween }) { 144 ForEach(this.children, (item:ChildInfo) => { 145 // Bind the display priority to the child component through displayPriority. 146 Text(item.text) 147 .width(120) 148 .height(60) 149 .fontSize(24) 150 .textAlign(TextAlign.Center) 151 .backgroundColor(0xbbb2cb) 152 .displayPriority(item.priority) 153 }, (item:ChildInfo) => item.text) 154 } 155 .width(this.container[this.currentIndex].size) 156 .backgroundColor(0xd2cab3) 157 }.width("100%").margin({ top: 50 }) 158 } 159} 160``` 161 162Landscape display in containers of different sizes 163 164 165
