1# 布局约束 2<!--Kit: ArkUI--> 3<!--Subsystem: ArkUI--> 4<!--Owner: @camlostshi--> 5<!--Designer: @lanshouren--> 6<!--Tester: @liuli0427--> 7<!--Adviser: @HelloCrease--> 8 9通过组件的宽高比和显示优先级约束组件显示效果。 10 11> **说明：** 12> 13> 从API Version 7开始支持。后续版本如有新增内容，则采用上角标单独标记该内容的起始版本。 14 15## aspectRatio 16 17aspectRatio(value: number): T 18 19指定当前组件的宽高比，aspectRatio=width/height。 20- 仅设置width、aspectRatio时，height=width/aspectRatio。 21- 仅设置height、aspectRatio时，width=height*aspectRatio。 22- 同时设置width、height和aspectRatio时，height不生效，height=width/aspectRatio。 23 24设置aspectRatio属性后，组件宽高会受父组件内容区大小限制，[constraintSize](ts-universal-attributes-size.md#constraintsize)的优先级高于aspectRatio。 25 26**卡片能力：** 从API version 9开始，该接口支持在ArkTS卡片中使用。 27 28**原子化服务API：** 从API version 11开始，该接口支持在原子化服务中使用。 29 30**系统能力：** SystemCapability.ArkUI.ArkUI.Full 31 32**参数：** 33 34| 参数名 | 类型 | 必填 | 说明 | 35| ------ | ------ | ---- | ------------------------------------------------------------ | 36| value | number | 是 | 指定当前组件的宽高比。<br/>API version 9及以前，默认值为：1.0。<br/>API version 10：无默认值。<br/>**说明：**<br/>该属性在不设置值或者设置非法值(小于等于0)时不生效。<br/>例如，Row只设置宽度且没有子组件，aspectRatio不设置值或者设置成负数时，此时Row高度为0。 | 37 38**返回值：** 39 40| 类型 | 说明 | 41| --- | --- | 42| T | 返回当前组件。 | 43 44## displayPriority 45 46displayPriority(value: number): T 47 48设置当前组件在布局容器中显示的优先级。 49 50**卡片能力：** 从API version 9开始，该接口支持在ArkTS卡片中使用。 51 52**原子化服务API：** 从API version 11开始，该接口支持在原子化服务中使用。 53 54**系统能力：** SystemCapability.ArkUI.ArkUI.Full 55 56**参数：** 57 58| 参数名 | 类型 | 必填 | 说明 | 59| ------ | ------ | ---- | ------------------------------------------------------------ | 60| 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数值越大，优先级越高。若父容器空间不足，隐藏低优先级子组件。若某一优先级的子组件被隐藏，则优先级更低的子组件也都被隐藏。 | 61 62**返回值：** 63 64| 类型 | 说明 | 65| --- | --- | 66| T | 返回当前组件。 | 67 68## 示例 69 70### 示例1（设置组件宽高比） 71 72通过aspectRatio设置不同的宽高比。 73 74```ts 75// xxx.ets 76@Entry 77@Component 78struct AspectRatioExample { 79 private children: string[] = ['1', '2', '3', '4', '5', '6'] 80 81 build() { 82 Column({ space: 20 }) { 83 Text('using container: row').fontSize(14).fontColor(0xCCCCCC).width('100%') 84 Row({ space: 10 }) { 85 ForEach(this.children, (item:string) => { 86 // 组件宽度 = 组件高度*1.5 = 90 87 Text(item) 88 .backgroundColor(0xbbb2cb) 89 .fontSize(20) 90 .aspectRatio(1.5) 91 .height(60) 92 // 组件高度 = 组件宽度/1.5 = 60/1.5 = 40 93 Text(item) 94 .backgroundColor(0xbbb2cb) 95 .fontSize(20) 96 .aspectRatio(1.5) 97 .width(60) 98 }, (item:string) => item) 99 } 100 .size({ width: "100%", height: 100 }) 101 .backgroundColor(0xd2cab3) 102 .clip(true) 103 104 // grid子元素width/height=3/2 105 Text('using container: grid').fontSize(14).fontColor(0xCCCCCC).width('100%') 106 Grid() { 107 ForEach(this.children, (item:string) => { 108 GridItem() { 109 Text(item) 110 .backgroundColor(0xbbb2cb) 111 .fontSize(40) 112 .width('100%') 113 .aspectRatio(1.5) 114 } 115 }, (item:string) => item) 116 } 117 .columnsTemplate('1fr 1fr 1fr') 118 .columnsGap(10) 119 .rowsGap(10) 120 .size({ width: "100%", height: 165 }) 121 .backgroundColor(0xd2cab3) 122 }.padding(10) 123 } 124} 125``` 126 127**图1** 竖屏显示<br> 128 129 130**图2** 横屏显示<br> 131 132 133### 示例2（设置组件显示优先级） 134 135使用displayPriority为子组件设置显示优先级。 136 137```ts 138class ContainerInfo { 139 label: string = ''; 140 size: string = ''; 141} 142 143class ChildInfo { 144 text: string = ''; 145 priority: number = 0; 146} 147 148@Entry 149@Component 150struct DisplayPriorityExample { 151 // 显示容器大小 152 private container: ContainerInfo[] = [ 153 { label: 'Big container', size: '90%' }, 154 { label: 'Middle container', size: '50%' }, 155 { label: 'Small container', size: '30%' } 156 ] 157 private children: ChildInfo[] = [ 158 { text: '1\n(priority:2)', priority: 2 }, 159 { text: '2\n(priority:1)', priority: 1 }, 160 { text: '3\n(priority:3)', priority: 3 }, 161 { text: '4\n(priority:1)', priority: 1 }, 162 { text: '5\n(priority:2)', priority: 2 } 163 ] 164 @State currentIndex: number = 0; 165 166 build() { 167 Column({ space: 10 }) { 168 // 切换父级容器大小 169 Button(this.container[this.currentIndex].label).backgroundColor(0x317aff) 170 .onClick(() => { 171 this.currentIndex = (this.currentIndex + 1) % this.container.length; 172 }) 173 // 通过变量设置Flex父容器宽度 174 Flex({ justifyContent: FlexAlign.SpaceBetween }) { 175 ForEach(this.children, (item:ChildInfo) => { 176 // 使用displayPriority给子组件绑定显示优先级 177 Text(item.text) 178 .width(120) 179 .height(60) 180 .fontSize(24) 181 .textAlign(TextAlign.Center) 182 .backgroundColor(0xbbb2cb) 183 .displayPriority(item.priority) 184 }, (item:ChildInfo) => item.text) 185 } 186 .width(this.container[this.currentIndex].size) 187 .backgroundColor(0xd2cab3) 188 }.width("100%").margin({ top: 50 }) 189 } 190} 191``` 192 193横屏显示 194 195 196
