• Home
  • Line#
  • Scopes#
  • Navigate#
  • Raw
  • Download
1# 布局约束
2
3通过组件的宽高比和显示优先级约束组件显示效果。
4
5>  **说明：**
6>
7>  从API Version 7开始支持。后续版本如有新增内容，则采用上角标单独标记该内容的起始版本。
8
9
10## 属性
11
12| 名称              | 参数说明   | 描述                                       |
13| --------------- | ------ | ---------------------------------------- |
14| aspectRatio     | number | 指定当前组件的宽高比，aspectRatio = width/height。                              |
15| displayPriority | number | 设置当前组件在布局容器中显示的优先级，当父容器空间不足时，低优先级的组件会被隐藏。<br/>**说明：**<br/>仅在Row/Column/Flex(单行)容器组件中生效。 |
16
17
18## 示例
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          // 组件宽度 = 组件高度*1.5 = 90
33          Text(item)
34            .backgroundColor(0xbbb2cb)
35            .fontSize(20)
36            .aspectRatio(1.5)
37            .height(60)
38          // 组件高度 = 组件宽度/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子元素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              .aspectRatio(1.5)
59          }
60        }, item => item)
61      }
62      .columnsTemplate('1fr 1fr 1fr')
63      .columnsGap(10)
64      .rowsGap(10)
65      .size({ width: "100%", height: 165 })
66      .backgroundColor(0xd2cab3)
67    }.padding(10)
68  }
69}
70```
71
72**图1** 竖屏显示<br>
73![zh-cn_image_0000001219744205](figures/zh-cn_image_0000001219744205.gif)
74
75**图2** 横屏显示<br>
76![zh-cn_image_0000001174264382](figures/zh-cn_image_0000001174264382.gif)
77
78```ts
79class ContainerInfo {
80  label: string = '';
81  size: string = '';
82}
83
84class ChildInfo {
85  text: string = '';
86  priority: number = 0;
87}
88
89@Entry
90@Component
91struct DisplayPriorityExample {
92  // 显示容器大小
93  private container: ContainerInfo[] = [
94    { label: 'Big container', size: '90%' },
95    { label: 'Middle container', size: '50%' },
96    { label: 'Small container', size: '30%' }
97  ]
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  ]
105  @State currentIndex: number = 0;
106
107  build() {
108    Column({ space: 10 }) {
109      // 切换父级容器大小
110      Button(this.container[this.currentIndex].label).backgroundColor(0x317aff)
111        .onClick(() => {
112          this.currentIndex = (this.currentIndex + 1) % this.container.length;
113        })
114      // 通过变量设置Flex父容器宽度
115      Flex({ justifyContent: FlexAlign.SpaceBetween }) {
116        ForEach(this.children, (item) => {
117          // 使用displayPriority给子组件绑定显示优先级
118          Text(item.text)
119            .width(120)
120            .height(60)
121            .fontSize(24)
122            .textAlign(TextAlign.Center)
123            .backgroundColor(0xbbb2cb)
124            .displayPriority(item.priority)
125        }, item => item.text)
126      }
127      .width(this.container[this.currentIndex].size)
128      .backgroundColor(0xd2cab3)
129    }.width("100%").margin({ top: 50 })
130  }
131}
132
133```
134
135![zh-cn_image_0000001219662667](figures/zh-cn_image_0000001219662667.gif)
136