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卡片中使用。 | 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 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 .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**图1** 竖屏显示<br> 74 75 76**图2** 横屏显示<br> 77 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 // 显示容器大小 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 // 切换父级容器大小 111 Button(this.container[this.currentIndex].label).backgroundColor(0x317aff) 112 .onClick(() => { 113 this.currentIndex = (this.currentIndex + 1) % this.container.length; 114 }) 115 // 通过变量设置Flex父容器宽度 116 Flex({ justifyContent: FlexAlign.SpaceBetween }) { 117 ForEach(this.children, (item) => { 118 // 使用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 137
