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