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, which can be obtained using the following formula: width/height.
14- If only **width** and **aspectRatio** are set, the height is calculated using the following formula: width/aspectRatio.
15- If only **height** and **aspectRatio** are set, the width is calculated using the following formula: height x aspectRatio.
16- If **width**, **height**, and **aspectRatio** are all set, the explicitly set height is ignored, and the effective height is calculated using the following formula: width/aspectRatio.
17
18After **aspectRatio** is set, the width and height of the component are constrained by the size of the parent component's content area.
19
20**Widget capability**: This API can be used in ArkTS widgets since API version 9.
21
22**Atomic service API**: This API can be used in atomic services since API version 11.
23
24**System capability**: SystemCapability.ArkUI.ArkUI.Full
25
26**Parameters**
27
28| Name| Type  | Mandatory| Description                                                        |
29| ------ | ------ | ---- | ------------------------------------------------------------ |
30| value  | number | Yes  | Aspect ratio of the component.<br>The default value varies by API version.<br>API version 9 and earlier: **1.0**<br><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.|
31
32## displayPriority
33
34displayPriority(value: number)
35
36Sets the display priority for the component in the layout container.
37
38**Widget capability**: This API can be used in ArkTS widgets since API version 9.
39
40**Atomic service API**: This API can be used in atomic services since API version 11.
41
42**System capability**: SystemCapability.ArkUI.ArkUI.Full
43
44**Parameters**
45
46| Name| Type  | Mandatory| Description                                                        |
47| ------ | ------ | ---- | ------------------------------------------------------------ |
48| value  | number | Yes  | Display priority of the component in the layout container.<br>Default value: **1**<br>**NOTE**<br>This parameter is only effective in [Row](./ts-container-row.md), [Column](./ts-container-column.md), and [Flex (single-line)](./ts-container-flex.md) container components.<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>If the **displayPriority** value of all child components is not greater than 1, there is no difference in priority.<br>When the **displayPriority** value of a child component is greater than 1, a larger value indicates higher priority. If the parent container does not have enough space, child components with lower priority are hidden. If child components of a certain priority are hidden, those with an even lower priority are also hidden.|
49
50## Example
51
52### Example 1: Setting the Component Aspect Ratio
53
54This example illustrates how to use the **aspectRatio** attribute to set different aspect ratios for a component.
55
56```ts
57// xxx.ets
58@Entry
59@Component
60struct AspectRatioExample {
61  private children: string[] = ['1', '2', '3', '4', '5', '6']
62
63  build() {
64    Column({ space: 20 }) {
65      Text('using container: row').fontSize(14).fontColor(0xCCCCCC).width('100%')
66      Row({ space: 10 }) {
67        ForEach(this.children, (item:string) => {
68          // Component width = Component height x 1.5 = 90
69          Text(item)
70            .backgroundColor(0xbbb2cb)
71            .fontSize(20)
72            .aspectRatio(1.5)
73            .height(60)
74          // Component height = Component width/1.5 = 60/1.5 = 40
75          Text(item)
76            .backgroundColor(0xbbb2cb)
77            .fontSize(20)
78            .aspectRatio(1.5)
79            .width(60)
80        }, (item:string) => item)
81      }
82      .size({ width: "100%", height: 100 })
83      .backgroundColor(0xd2cab3)
84      .clip(true)
85
86      // Grid child component width/height = 3/2
87      Text('using container: grid').fontSize(14).fontColor(0xCCCCCC).width('100%')
88      Grid() {
89        ForEach(this.children, (item:string) => {
90          GridItem() {
91            Text(item)
92              .backgroundColor(0xbbb2cb)
93              .fontSize(40)
94              .width('100%')
95              .aspectRatio(1.5)
96          }
97        }, (item:string) => item)
98      }
99      .columnsTemplate('1fr 1fr 1fr')
100      .columnsGap(10)
101      .rowsGap(10)
102      .size({ width: "100%", height: 165 })
103      .backgroundColor(0xd2cab3)
104    }.padding(10)
105  }
106}
107```
108
109**Figure 1** Portrait display<br>
110![en-us_image_0000001219744205](figures/en-us_image_0000001219744205.PNG)
111
112**Figure 2** Landscape display<br>
113![en-us_image_0000001174264382](figures/en-us_image_0000001174264382.PNG)
114
115### Example 2: Setting the Component Display Priority
116
117This example shows how to use **displayPriority** to assign display priorities to child components.
118
119```ts
120class ContainerInfo {
121  label: string = '';
122  size: string = '';
123}
124
125class ChildInfo {
126  text: string = '';
127  priority: number = 0;
128}
129
130@Entry
131@Component
132struct DisplayPriorityExample {
133  // Display the container size.
134  private container: ContainerInfo[] = [
135    { label: 'Big container', size: '90%' },
136    { label: 'Middle container', size: '50%' },
137    { label: 'Small container', size: '30%' }
138  ]
139  private children: ChildInfo[] = [
140    { text: '1\n(priority:2)', priority: 2 },
141    { text: '2\n(priority:1)', priority: 1 },
142    { text: '3\n(priority:3)', priority: 3 },
143    { text: '4\n(priority:1)', priority: 1 },
144    { text: '5\n(priority:2)', priority: 2 }
145  ]
146  @State currentIndex: number = 0;
147
148  build() {
149    Column({ space: 10 }) {
150      // Switch the size of the parent container.
151      Button(this.container[this.currentIndex].label).backgroundColor(0x317aff)
152        .onClick(() => {
153          this.currentIndex = (this.currentIndex + 1) % this.container.length;
154        })
155      // Set the width for the parent flex container through variables.
156      Flex({ justifyContent: FlexAlign.SpaceBetween }) {
157        ForEach(this.children, (item:ChildInfo) => {
158          // Bind the display priority to the child component through displayPriority.
159          Text(item.text)
160            .width(120)
161            .height(60)
162            .fontSize(24)
163            .textAlign(TextAlign.Center)
164            .backgroundColor(0xbbb2cb)
165            .displayPriority(item.priority)
166        }, (item:ChildInfo) => item.text)
167      }
168      .width(this.container[this.currentIndex].size)
169      .backgroundColor(0xd2cab3)
170    }.width("100%").margin({ top: 50 })
171  }
172}
173```
174
175Landscape display in containers of different sizes
176
177![en-us_image_0000001212058504](figures/en-us_image_0000001212058504.gif)
178