1# 布局约束 2 3通过组件的宽高比和显示优先级约束组件显示效果。 4 5> **说明：** 6> 7> 从API Version 7开始支持。后续版本如有新增内容，则采用上角标单独标记该内容的起始版本。 8 9 10## 属性 11 12| 名称 | 参数说明 | 描述 | 13| --------------- | ------ | ---------------------------------------- | 14| aspectRatio | number | 指定当前组件的宽高比，aspectRatio = width/height。<br/>从API version 9开始，该接口支持在ArkTS卡片中使用。<br/>API version 9及以前，默认值为：1.0。<br/>API version 10：无默认值。<br/>**说明：**<br/>该属性在不设置值或者设置非法值时不生效。<br/>例如，Row只设置宽度且没有子组件，aspectRatio不设置值或者设置成负数时，此时Row高度为0。 | 15| displayPriority | number | 设置当前组件在布局容器中显示的优先级，当父容器空间不足时，低优先级的组件会被隐藏。<br/>小数点后的数字不作优先级区分，即区间为[x, x + 1)内的数字视为相同优先级。例如：1.0与1.9为同一优先级。<br/>从API version 9开始，该接口支持在ArkTS卡片中使用。<br/>**说明：**<br/>仅在Row/Column/Flex(单行)容器组件中生效。 | 16 17## 示例 18 19### 示例1 20 21```ts 22// xxx.ets 23@Entry 24@Component 25struct AspectRatioExample { 26 private children: string[] = ['1', '2', '3', '4', '5', '6'] 27 28 build() { 29 Column({ space: 20 }) { 30 Text('using container: row').fontSize(14).fontColor(0xCCCCCC).width('100%') 31 Row({ space: 10 }) { 32 ForEach(this.children, (item:string) => { 33 // 组件宽度 = 组件高度*1.5 = 90 34 Text(item) 35 .backgroundColor(0xbbb2cb) 36 .fontSize(20) 37 .aspectRatio(1.5) 38 .height(60) 39 // 组件高度 = 组件宽度/1.5 = 60/1.5 = 40 40 Text(item) 41 .backgroundColor(0xbbb2cb) 42 .fontSize(20) 43 .aspectRatio(1.5) 44 .width(60) 45 }, (item:string) => item) 46 } 47 .size({ width: "100%", height: 100 }) 48 .backgroundColor(0xd2cab3) 49 .clip(true) 50 51 // grid子元素width/height=3/2 52 Text('using container: grid').fontSize(14).fontColor(0xCCCCCC).width('100%') 53 Grid() { 54 ForEach(this.children, (item:string) => { 55 GridItem() { 56 Text(item) 57 .backgroundColor(0xbbb2cb) 58 .fontSize(40) 59 .width('100%') 60 .aspectRatio(1.5) 61 } 62 }, (item:string) => item) 63 } 64 .columnsTemplate('1fr 1fr 1fr') 65 .columnsGap(10) 66 .rowsGap(10) 67 .size({ width: "100%", height: 165 }) 68 .backgroundColor(0xd2cab3) 69 }.padding(10) 70 } 71} 72``` 73 74**图1** 竖屏显示<br> 75 76 77**图2** 横屏显示<br> 78 79 80### 示例2 81 82```ts 83class ContainerInfo { 84 label: string = ''; 85 size: string = ''; 86} 87 88class ChildInfo { 89 text: string = ''; 90 priority: number = 0; 91} 92 93@Entry 94@Component 95struct DisplayPriorityExample { 96 // 显示容器大小 97 private container: ContainerInfo[] = [ 98 { label: 'Big container', size: '90%' }, 99 { label: 'Middle container', size: '50%' }, 100 { label: 'Small container', size: '30%' } 101 ] 102 private children: ChildInfo[] = [ 103 { text: '1\n(priority:2)', priority: 2 }, 104 { text: '2\n(priority:1)', priority: 1 }, 105 { text: '3\n(priority:3)', priority: 3 }, 106 { text: '4\n(priority:1)', priority: 1 }, 107 { text: '5\n(priority:2)', priority: 2 } 108 ] 109 @State currentIndex: number = 0; 110 111 build() { 112 Column({ space: 10 }) { 113 // 切换父级容器大小 114 Button(this.container[this.currentIndex].label).backgroundColor(0x317aff) 115 .onClick(() => { 116 this.currentIndex = (this.currentIndex + 1) % this.container.length; 117 }) 118 // 通过变量设置Flex父容器宽度 119 Flex({ justifyContent: FlexAlign.SpaceBetween }) { 120 ForEach(this.children, (item:ChildInfo) => { 121 // 使用displayPriority给子组件绑定显示优先级 122 Text(item.text) 123 .width(120) 124 .height(60) 125 .fontSize(24) 126 .textAlign(TextAlign.Center) 127 .backgroundColor(0xbbb2cb) 128 .displayPriority(item.priority) 129 }, (item:ChildInfo) => item.text) 130 } 131 .width(this.container[this.currentIndex].size) 132 .backgroundColor(0xd2cab3) 133 }.width("100%").margin({ top: 50 }) 134 } 135} 136``` 137 138横屏显示 139 140 141
