• 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              .height(160)
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<br>
74![en-us_image_0000001256978379](figures/en-us_image_0000001256978379.gif)
75
76**Figure 2** Landscape display<br>
77![en-us_image_0000001212218476](figures/en-us_image_0000001212218476.gif)
78
79```ts
80class ContainerInfo {
81  label: string = '';
82  size: string = '';
83}
84
85class ChildInfo {
86  text: string = '';
87  priority: number = 0;
88}
89
90@Entry
91@Component
92struct DisplayPriorityExample {
93  // Display the container size.
94  private container: ContainerInfo[] = [
95    { label: 'Big container', size: '90%' },
96    { label: 'Middle container', size: '50%' },
97    { label: 'Small container', size: '30%' }
98  ]
99  private children: ChildInfo[] = [
100    { text: '1\n(priority:2)', priority: 2 },
101    { text: '2\n(priority:1)', priority: 1 },
102    { text: '3\n(priority:3)', priority: 3 },
103    { text: '4\n(priority:1)', priority: 1 },
104    { text: '5\n(priority:2)', priority: 2 }
105  ]
106  @State currentIndex: number = 0;
107
108  build() {
109    Column({ space: 10 }) {
110      // Switch the size of the parent container.
111      Button(this.container[this.currentIndex].label).backgroundColor(0x317aff)
112        .onClick(() => {
113          this.currentIndex = (this.currentIndex + 1) % this.container.length;
114        })
115      // Set the width for the parent flex container through variables.
116      Flex({ justifyContent: FlexAlign.SpaceBetween }) {
117        ForEach(this.children, (item) => {
118          // Bind the display priority to the child component through displayPriority.
119          Text(item.text)
120            .width(120)
121            .height(60)
122            .fontSize(24)
123            .textAlign(TextAlign.Center)
124            .backgroundColor(0xbbb2cb)
125            .displayPriority(item.priority)
126        }, item => item.text)
127      }
128      .width(this.container[this.currentIndex].size)
129      .backgroundColor(0xd2cab3)
130    }.width("100%").margin({ top: 50 })
131  }
132}
133
134```
135
136![en-us_image_0000001212058504](figures/en-us_image_0000001212058504.gif)
137