• Home
  • Line#
  • Scopes#
  • Navigate#
  • Raw
  • Download
1# Layout Constraints
2
3
4> ![icon-note.gif](public_sys-resources/icon-note.gif) **NOTE**
5> This attribute is supported since API version 7. Updates will be marked with a superscript to indicate their earliest API version.
6
7
8## Required Permissions
9
10None
11
12
13## Attributes
14
15
16  | Name | Type | Default Value | Description |
17| -------- | -------- | -------- | -------- |
18| aspectRatio | number | - | Specifies an aspect ratio for the current component. |
19| displayPriority | number | - | Sets a display priority for the current component in the layout container. When the space of the parent container is insufficient, the component with a lower priority is hidden.<br/>> ![icon-note.gif](public_sys-resources/icon-note.gif) **NOTE**<br/>> This parameter is valid only for the Row/Column/Flex (single-row) container component. |
20
21
22## Example
23
24
25```
26@Entry
27@Component
28struct AspectRatioExample {
29  private children : string[] = ['1', '2', '3', '4', '5', '6']
30
31  build() {
32    Column({space: 20}) {
33      Text('using container: row').fontSize(14).fontColor(0xCCCCCC).width('100%')
34      Row({space: 10}) {
35        ForEach(this.children, (item) => {
36          Text(item)
37            .backgroundColor(0xbbb2cb)
38            .fontSize(20)
39            .aspectRatio(1.5)
40            .height(60)
41          Text(item)
42            .backgroundColor(0xbbb2cb)
43            .fontSize(20)
44            .aspectRatio(1.5)
45            .width(60)
46        }, item=>item)
47      }
48      .size({width: "100%", height: 100})
49      .backgroundColor(0xd2cab3)
50      .clip(true)
51
52      Text('using container: grid').fontSize(14).fontColor(0xCCCCCC).width('100%')
53      Grid() {
54        ForEach(this.children, (item) => {
55          GridItem() {
56            Text(item)
57              .backgroundColor(0xbbb2cb)
58              .fontSize(40)
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  **Figure1** Portrait display
74  ![en-us_image_0000001256978379](figures/en-us_image_0000001256978379.gif)
75
76  **Figure2** Landscape display
77  ![en-us_image_0000001212218476](figures/en-us_image_0000001212218476.gif)
78
79
80```
81class ContainerInfo {
82  label : string = ''
83  size : string = ''
84}
85
86class ChildInfo {
87  text : string = ''
88  priority : number = 0
89}
90
91@Entry
92@Component
93struct DisplayPriorityExample {
94  private container : ContainerInfo[] = [
95    {label: 'Big container', size: '90%'},
96    {label: 'Middle container', size: '50%'},
97    {label: 'Small container', size: '30%'}]
98  private children : ChildInfo[] = [
99    {text: '1\n(priority:2)', priority: 2},
100    {text: '2\n(priority:1)', priority: 1},
101    {text: '3\n(priority:3)', priority: 3},
102    {text: '4\n(priority:1)', priority: 1},
103    {text: '5\n(priority:2)', priority: 2}]
104  @State currentIndex : number = 0
105
106  build() {
107    Column({space: 10}) {
108      Button(this.container[this.currentIndex].label).backgroundColor(0x317aff)
109        .onClick((event: ClickEvent) => {
110          this.currentIndex = (this.currentIndex + 1) % this.container.length
111        })
112      Flex({justifyContent: FlexAlign.SpaceBetween}) {
113        ForEach(this.children, (item)=>{
114          Text(item.text)
115            .width(120)
116            .height(60)
117            .fontSize(24)
118            .textAlign(TextAlign.Center)
119            .backgroundColor(0xbbb2cb)
120            .displayPriority(item.priority)
121        }, item=>item.text)
122      }
123      .width(this.container[this.currentIndex].size)
124      .backgroundColor(0xd2cab3)
125    }.width("100%").margin({top:50})
126  }
127}
128
129```
130
131![en-us_image_0000001212058504](figures/en-us_image_0000001212058504.gif)
132