• Home
  • Line#
  • Scopes#
  • Navigate#
  • Raw
  • Download
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
10## Attributes
11
12| Name             | Type  | Description                                      |
13| --------------- | ------ | ---------------------------------------- |
14| aspectRatio     | number | Aspect ratio of the component, which can be obtained using the following formula: Width/Height.<br>Since API version 9, this API is supported in ArkTS widgets.<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.|
15| displayPriority | number | 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>Since API version 9, this API is supported in ArkTS widgets.<br>**NOTE**<br>This attribute is valid only for the **\<Row>**, **\<Column>**, and **\<Flex>** (single-row) container components.|
16
17## Example
18
19### Example 1
20
21```ts
22// xxx.ets
23@Entry
24@Component
25struct AspectRatioExample {
26  private children: string[] = ['1', '2', '3', '4', '5', '6']
27
28  build() {
29    Column({ space: 20 }) {
30      Text('using container: row').fontSize(14).fontColor(0xCCCCCC).width('100%')
31      Row({ space: 10 }) {
32        ForEach(this.children, (item:string) => {
33          // Component width = Component height x 1.5 = 90
34          Text(item)
35            .backgroundColor(0xbbb2cb)
36            .fontSize(20)
37            .aspectRatio(1.5)
38            .height(60)
39          // Component height = Component width/1.5 = 60/1.5 = 40
40          Text(item)
41            .backgroundColor(0xbbb2cb)
42            .fontSize(20)
43            .aspectRatio(1.5)
44            .width(60)
45        }, (item:string) => item)
46      }
47      .size({ width: "100%", height: 100 })
48      .backgroundColor(0xd2cab3)
49      .clip(true)
50
51      // Grid child component width/height = 3/2
52      Text('using container: grid').fontSize(14).fontColor(0xCCCCCC).width('100%')
53      Grid() {
54        ForEach(this.children, (item:string) => {
55          GridItem() {
56            Text(item)
57              .backgroundColor(0xbbb2cb)
58              .fontSize(40)
59              .width('100%')
60              .aspectRatio(1.5)
61          }
62        }, (item:string) => item)
63      }
64      .columnsTemplate('1fr 1fr 1fr')
65      .columnsGap(10)
66      .rowsGap(10)
67      .size({ width: "100%", height: 165 })
68      .backgroundColor(0xd2cab3)
69    }.padding(10)
70  }
71}
72```
73
74**Figure 1** Portrait display<br>
75![en-us_image_0000001219744205](figures/en-us_image_0000001219744205.PNG)
76
77**Figure 2** Landscape display<br>
78![en-us_image_0000001174264382](figures/en-us_image_0000001174264382.PNG)
79
80### Example 2
81
82```ts
83class ContainerInfo {
84  label: string = '';
85  size: string = '';
86}
87
88class ChildInfo {
89  text: string = '';
90  priority: number = 0;
91}
92
93@Entry
94@Component
95struct DisplayPriorityExample {
96  // Display the container size.
97  private container: ContainerInfo[] = [
98    { label: 'Big container', size: '90%' },
99    { label: 'Middle container', size: '50%' },
100    { label: 'Small container', size: '30%' }
101  ]
102  private children: ChildInfo[] = [
103    { text: '1\n(priority:2)', priority: 2 },
104    { text: '2\n(priority:1)', priority: 1 },
105    { text: '3\n(priority:3)', priority: 3 },
106    { text: '4\n(priority:1)', priority: 1 },
107    { text: '5\n(priority:2)', priority: 2 }
108  ]
109  @State currentIndex: number = 0;
110
111  build() {
112    Column({ space: 10 }) {
113      // Switch the size of the parent container.
114      Button(this.container[this.currentIndex].label).backgroundColor(0x317aff)
115        .onClick(() => {
116          this.currentIndex = (this.currentIndex + 1) % this.container.length;
117        })
118      // Set the width for the parent flex container through variables.
119      Flex({ justifyContent: FlexAlign.SpaceBetween }) {
120        ForEach(this.children, (item:ChildInfo) => {
121          // Bind the display priority to the child component through displayPriority.
122          Text(item.text)
123            .width(120)
124            .height(60)
125            .fontSize(24)
126            .textAlign(TextAlign.Center)
127            .backgroundColor(0xbbb2cb)
128            .displayPriority(item.priority)
129        }, (item:ChildInfo) => item.text)
130      }
131      .width(this.container[this.currentIndex].size)
132      .backgroundColor(0xd2cab3)
133    }.width("100%").margin({ top: 50 })
134  }
135}
136```
137
138Landscape display in containers of different sizes
139
140![en-us_image_0000001212058504](figures/en-us_image_0000001212058504.gif)
141