1# 布局约束
2
3通过组件的宽高比和显示优先级约束组件显示效果。
4
5>  **说明：**
6>
7>  从API Version 7开始支持。后续版本如有新增内容，则采用上角标单独标记该内容的起始版本。
8
9## aspectRatio
10
11aspectRatio(value: number)
12
13指定当前组件的宽高比，aspectRatio=width/height。
14- 仅设置width、aspectRatio时，height=width/aspectRatio。
15- 仅设置height、aspectRatio时，width=height*aspectRatio。
16- 同时设置width、height和aspectRatio时，height不生效，height=width/aspectRatio。
17
18设置aspectRatio属性后，组件宽高会受父组件内容区大小限制。
19
20**卡片能力：** 从API version 9开始，该接口支持在ArkTS卡片中使用。
21
22**原子化服务API：** 从API version 11开始，该接口支持在原子化服务中使用。
23
24**系统能力：** SystemCapability.ArkUI.ArkUI.Full
25
26**参数：**
27
28| 参数名 | 类型   | 必填 | 说明                                                         |
29| ------ | ------ | ---- | ------------------------------------------------------------ |
30| value  | number | 是   | 指定当前组件的宽高比。<br/>API version 9及以前，默认值为：1.0。<br/>API version 10：无默认值。<br/>**说明：**<br/>该属性在不设置值或者设置非法值时不生效。<br/>例如，Row只设置宽度且没有子组件，aspectRatio不设置值或者设置成负数时，此时Row高度为0。 |
31
32## displayPriority
33
34displayPriority(value: number)
35
36设置当前组件在布局容器中显示的优先级。
37
38**卡片能力：** 从API version 9开始，该接口支持在ArkTS卡片中使用。
39
40**原子化服务API：** 从API version 11开始，该接口支持在原子化服务中使用。
41
42**系统能力：** SystemCapability.ArkUI.ArkUI.Full
43
44**参数：**
45
46| 参数名 | 类型   | 必填 | 说明                                                         |
47| ------ | ------ | ---- | ------------------------------------------------------------ |
48| value  | number | 是   | 设置当前组件在布局容器中显示的优先级。<br/>默认值：1<br/>**说明：**<br/>仅在[Row](./ts-container-row.md)/[Column](./ts-container-column.md)/[Flex(单行)](./ts-container-flex.md)容器组件中生效。<br/> 小数点后的数字不作优先级区分，即区间为[x, x + 1)内的数字视为相同优先级。例如：1.0与1.9为同一优先级。<br/>子组件的displayPriority均不大于1时，优先级没有区别。<br/>当子组件的displayPriority大于1时，displayPriority数值越大，优先级越高。若父容器空间不足，隐藏低优先级子组件。若某一优先级的子组件被隐藏，则优先级更低的子组件也都被隐藏。 |
49
50## 示例
51
52### 示例1（设置组件宽高比）
53
54通过aspectRatio设置不同的宽高比。
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          // 组件宽度 = 组件高度*1.5 = 90
69          Text(item)
70            .backgroundColor(0xbbb2cb)
71            .fontSize(20)
72            .aspectRatio(1.5)
73            .height(60)
74          // 组件高度 = 组件宽度/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子元素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**图1** 竖屏显示<br>
110![zh-cn_image_0000001219744205](figures/zh-cn_image_0000001219744205.PNG)
111
112**图2** 横屏显示<br>
113![zh-cn_image_0000001174264382](figures/zh-cn_image_0000001174264382.PNG)
114
115### 示例2（设置组件显示优先级）
116
117使用displayPriority给子组件绑定显示优先级。
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  // 显示容器大小
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      // 切换父级容器大小
151      Button(this.container[this.currentIndex].label).backgroundColor(0x317aff)
152        .onClick(() => {
153          this.currentIndex = (this.currentIndex + 1) % this.container.length;
154        })
155      // 通过变量设置Flex父容器宽度
156      Flex({ justifyContent: FlexAlign.SpaceBetween }) {
157        ForEach(this.children, (item:ChildInfo) => {
158          // 使用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
175横屏显示
176
177![zh-cn_image_0000001219662667](figures/zh-cn_image_0000001219662667.gif)
178