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