1# 布局约束 2 3通过组件的宽高比和显示优先级约束组件显示效果。 4 5> **说明：** 6> 7> 从API Version 7开始支持。后续版本如有新增内容，则采用上角标单独标记该内容的起始版本。 8 9## aspectRatio 10 11aspectRatio(value: number) 12 13指定当前组件的宽高比。 14 15**卡片能力：** 从API version 9开始，该接口支持在ArkTS卡片中使用。 16 17**系统能力：** SystemCapability.ArkUI.ArkUI.Full 18 19**参数：** 20 21| 参数名 | 类型 | 必填 | 说明 | 22| ------ | ------ | ---- | ------------------------------------------------------------ | 23| value | number | 是 | 指定当前组件的宽高比，aspectRatio = width/height。<br/>API version 9及以前，默认值为：1.0。<br/>API version 10：无默认值。<br/>**说明：**<br/>该属性在不设置值或者设置非法值时不生效。<br/>例如，Row只设置宽度且没有子组件，aspectRatio不设置值或者设置成负数时，此时Row高度为0。 | 24 25## displayPriority 26 27displayPriority(value: number) 28 29设置当前组件在布局容器中显示的优先级。 30 31**卡片能力：** 从API version 9开始，该接口支持在ArkTS卡片中使用。 32 33**系统能力：** SystemCapability.ArkUI.ArkUI.Full 34 35**参数：** 36 37| 参数名 | 类型 | 必填 | 说明 | 38| ------ | ------ | ---- | ------------------------------------------------------------ | 39| value | number | 是 | 设置当前组件在布局容器中显示的优先级，当父容器空间不足时，低优先级的组件会被隐藏。<br/>小数点后的数字不作优先级区分，即区间为[x, x + 1)内的数字视为相同优先级。例如：1.0与1.9为同一优先级。<br/>**说明：** <br/>仅在Row/Column/Flex(单行)容器组件中生效。 | 40 41## pixelRound<sup>11+</sup> 42 43pixelRound(value: PixelRoundPolicy) 44 45指定当前组件的像素级取整对齐方式。 46 47**系统能力：** SystemCapability.ArkUI.ArkUI.Full 48 49**参数：** 50 51| 参数名 | 类型 | 必填 | 说明 | 52| ------ | ------ | ---- | ------------------------------------------------------------ | 53| value | [PixelRoundPolicy](ts-types.md#pixelroundpolicy11) | 是 | 指定当前组件边界取整策略。<br/>**说明：**<br/>该属性用于因浮点数绘制产生视觉异常的场景。| 54 55## 示例 56 57### 示例1 58 59```ts 60// xxx.ets 61@Entry 62@Component 63struct AspectRatioExample { 64 private children: string[] = ['1', '2', '3', '4', '5', '6'] 65 66 build() { 67 Column({ space: 20 }) { 68 Text('using container: row').fontSize(14).fontColor(0xCCCCCC).width('100%') 69 Row({ space: 10 }) { 70 ForEach(this.children, (item:string) => { 71 // 组件宽度 = 组件高度*1.5 = 90 72 Text(item) 73 .backgroundColor(0xbbb2cb) 74 .fontSize(20) 75 .aspectRatio(1.5) 76 .height(60) 77 // 组件高度 = 组件宽度/1.5 = 60/1.5 = 40 78 Text(item) 79 .backgroundColor(0xbbb2cb) 80 .fontSize(20) 81 .aspectRatio(1.5) 82 .width(60) 83 }, (item:string) => item) 84 } 85 .size({ width: "100%", height: 100 }) 86 .backgroundColor(0xd2cab3) 87 .clip(true) 88 89 // grid子元素width/height=3/2 90 Text('using container: grid').fontSize(14).fontColor(0xCCCCCC).width('100%') 91 Grid() { 92 ForEach(this.children, (item:string) => { 93 GridItem() { 94 Text(item) 95 .backgroundColor(0xbbb2cb) 96 .fontSize(40) 97 .width('100%') 98 .aspectRatio(1.5) 99 } 100 }, (item:string) => item) 101 } 102 .columnsTemplate('1fr 1fr 1fr') 103 .columnsGap(10) 104 .rowsGap(10) 105 .size({ width: "100%", height: 165 }) 106 .backgroundColor(0xd2cab3) 107 }.padding(10) 108 } 109} 110``` 111 112**图1** 竖屏显示<br> 113 114 115**图2** 横屏显示<br> 116 117 118### 示例2 119 120```ts 121class ContainerInfo { 122 label: string = ''; 123 size: string = ''; 124} 125 126class ChildInfo { 127 text: string = ''; 128 priority: number = 0; 129} 130 131@Entry 132@Component 133struct DisplayPriorityExample { 134 // 显示容器大小 135 private container: ContainerInfo[] = [ 136 { label: 'Big container', size: '90%' }, 137 { label: 'Middle container', size: '50%' }, 138 { label: 'Small container', size: '30%' } 139 ] 140 private children: ChildInfo[] = [ 141 { text: '1\n(priority:2)', priority: 2 }, 142 { text: '2\n(priority:1)', priority: 1 }, 143 { text: '3\n(priority:3)', priority: 3 }, 144 { text: '4\n(priority:1)', priority: 1 }, 145 { text: '5\n(priority:2)', priority: 2 } 146 ] 147 @State currentIndex: number = 0; 148 149 build() { 150 Column({ space: 10 }) { 151 // 切换父级容器大小 152 Button(this.container[this.currentIndex].label).backgroundColor(0x317aff) 153 .onClick(() => { 154 this.currentIndex = (this.currentIndex + 1) % this.container.length; 155 }) 156 // 通过变量设置Flex父容器宽度 157 Flex({ justifyContent: FlexAlign.SpaceBetween }) { 158 ForEach(this.children, (item:ChildInfo) => { 159 // 使用displayPriority给子组件绑定显示优先级 160 Text(item.text) 161 .width(120) 162 .height(60) 163 .fontSize(24) 164 .textAlign(TextAlign.Center) 165 .backgroundColor(0xbbb2cb) 166 .displayPriority(item.priority) 167 }, (item:ChildInfo) => item.text) 168 } 169 .width(this.container[this.currentIndex].size) 170 .backgroundColor(0xd2cab3) 171 }.width("100%").margin({ top: 50 }) 172 } 173} 174``` 175 176横屏显示 177 178 179 180### 示例3 181 182采用pixelRound指导布局。 183 184```ts 185@Entry 186@Component 187struct PixelRoundExample { 188 build() { 189 Column() { 190 Row() { 191 Row() { 192 } 193 .width('100%') 194 .height('100%') 195 .backgroundColor(Color.Yellow) 196 } 197 .width('300.6px') 198 .height('300.6px') 199 .backgroundColor(Color.Red) 200 .position({x: '200.2px', y: '100.2px'}) 201 .pixelRound({ 202 start:PixelRoundCalcPolicy.FORCE_CEIL, 203 top:PixelRoundCalcPolicy.FORCE_CEIL 204 }) 205 } 206 .width("100%") 207 .height('100%') 208 .backgroundColor('#ffe5e5e5') 209 } 210} 211``` 212**图1** 采用pixelRound指导布局效果图 213 214 215 216**图2** 不用pixelRound指导布局效果图 217 218 219
