1# 自适应布局 2 3 4针对常见的开发场景，方舟开发框架提炼了七种自适应布局能力，这些布局可以独立使用，也可多种布局叠加使用。 5 6 7 | 自适应布局类别 | 自适应布局能力 | 使用场景 | 实现方式 | 8| -------- | -------- | -------- | -------- | 9| 自适应拉伸 | [拉伸能力](#拉伸能力) | 容器组件尺寸发生变化时，增加或减小的空间**全部分配**给容器组件内**指定区域**。 | [Flex布局](../../reference/apis-arkui/arkui-ts/ts-universal-attributes-flex-layout.md)的flexGrow和flexShrink属性 | 10| | [均分能力](#均分能力) | 容器组件尺寸发生变化时，增加或减小的空间**均匀分配**给容器组件内**所有空白区域**。 | [Row组件](../../reference/apis-arkui/arkui-ts/ts-container-row.md)、[Column组件](../../reference/apis-arkui/arkui-ts/ts-container-column.md)或[Flex组件](../../reference/apis-arkui/arkui-ts/ts-container-flex.md)的justifyContent属性设置为FlexAlign.SpaceEvenly | 11| 自适应缩放 | [占比能力](#占比能力) | 子组件的宽或高**按照预设的比例**，随容器组件发生变化。 | 基于通用属性的两种实现方式：<br/>- 将子组件的宽高设置为父组件宽高的百分比<br/>- layoutWeight属性 | 12| | [缩放能力](#缩放能力) | 子组件的宽高**按照预设的比例**，随容器组件发生变化，且变化过程中子组件的**宽高比不变**。 | [布局约束](../../reference/apis-arkui/arkui-ts/ts-universal-attributes-layout-constraints.md)的aspectRatio属性 | 13| 自适应延伸 | [延伸能力](#延伸能力) | 容器组件内的子组件，按照其**在列表中的先后顺序**，随容器组件尺寸变化显示或隐藏。 | 基于容器组件的两种实现方式：<br/>- 通过[List组件](../../reference/apis-arkui/arkui-ts/ts-container-list.md)实现<br/>- 通过[Scroll组件](../../reference/apis-arkui/arkui-ts/ts-container-scroll.md)配合[Row组件](../../reference/apis-arkui/arkui-ts/ts-container-row.md)或[Column组件](../../reference/apis-arkui/arkui-ts/ts-container-column.md)实现 | 14| | [隐藏能力](#隐藏能力) | 容器组件内的子组件，按照其**预设的显示优先级**，随容器组件尺寸变化显示或隐藏。**相同显示优先级的子组件同时显示或隐藏**。 | [布局约束](../../reference/apis-arkui/arkui-ts/ts-universal-attributes-layout-constraints.md)的displayPriority属性 | 15| 自适应折行 | [折行能力](#折行能力) | 容器组件尺寸发生变化时，如果布局方向尺寸不足以显示完整内容，**自动换行**。 | [Flex组件](../../reference/apis-arkui/arkui-ts/ts-container-flex.md)的wrap属性设置为FlexWrap.Wrap | 16 17 18下面我们依次介绍这几种自适应布局能力。 19 20 21## 拉伸能力 22 23 24拉伸能力是指容器组件尺寸发生变化时，增加或减小的空间全部分配给容器组件内指定区域。 25 26 27拉伸能力通常通过[Flex布局](../../reference/apis-arkui/arkui-ts/ts-universal-attributes-flex-layout.md)中的flexGrow和flexShrink属性实现，flexGrow和flexShink属性常与flexBasis属性搭配使用，故将这三个属性放在一起介绍。 28 29 30 | 属性 | 类型 | 默认值 | 描述 | 31| -------- | -------- | -------- | -------- | 32| flexGrow | number | 0 | 仅当父容器宽度大于所有子组件宽度的总和时，该属性生效。配置了此属性的子组件，按照比例拉伸，分配父容器的多余空间。 | 33| flexShrink | number | 1 | 仅当父容器宽度小于所有子组件宽度的总和时，该属性生效。配置了此属性的子组件，按照比例收缩，分配父容器的不足空间。 | 34| flexBasis | 'auto' \| [Length](../../reference/apis-arkui/arkui-ts/ts-types.md#length) | 'auto' | 设置组件在Flex容器中主轴方向上基准尺寸。'auto'意味着使用组件原始的尺寸，不做修改。<br/>flexBasis属性不是必须的，通过width或height也可以达到同样的效果。当flexBasis属性与width或height发生冲突时，以flexBasis属性为准。 | 35 36 37> **说明：** 38> - 开发者期望将父容器的剩余空间全部分配给某空白区域时，也可以通过[Blank组件](../../reference/apis-arkui/arkui-ts/ts-basic-components-blank.md)实现。注意仅当父组件为Row\Column\Flex组件时，Blank组件才会生效。 39> 40> - 类Web开发范式也是通过flex-grow和flex-shrink实现拉伸能力，同时也支持配置flex-basis，详见[通用样式](../../reference/apis-arkui/arkui-js/js-components-common-styles.md)。 41> 42> - 类Web开发范式没有提供blank组件，但可以通过div组件模拟blank组件的行为，如“<div style='flex-grow: 1; flex-shrink: 0; flex-basis: 0'></div>”。 43 44**示例1** 45 46 47本示例中的页面由中间的内容区（包含一张图片）以及两侧的留白区组成，各区域的属性配置如下。 48 49* 中间内容区的宽度设置为400vp，同时将flexGrow属性设置为1，flexShrink属性设置为0。 50 51* 两侧留白区的宽度设置为150vp，同时将flexGrow属性设置为0，flexShrink属性设置为1。 52 53由上可知，父容器的基准尺寸是700vp（150vp+400vp+150vp）。 54 55可以通过拖动底部的滑动条改变父容器的尺寸，查看布局变化。 56 57* 当父容器的尺寸大于700vp时，父容器中多余的空间全部分配给中间内容区。 58 59* 当父容器的尺寸小于700vp时，左右两侧的留白区按照“1:1”的比例收缩（即平均分配父容器的不足空间）。 60 61 62 63 64 65 66```ts 67@Entry 68@Component 69struct FlexibleCapabilitySample1 { 70 @State containerWidth: number = 402 71 72 // 底部滑块，可以通过拖拽滑块改变容器尺寸。 73 @Builder slider() { 74 Slider({ value: this.containerWidth, min: 402, max: 1000, style: SliderStyle.OutSet }) 75 .blockColor(Color.White) 76 .width('60%') 77 .onChange((value: number) => { 78 this.containerWidth = value; 79 }) 80 .position({ x: '20%', y: '80%' }) 81 } 82 83 build() { 84 Column() { 85 Column() { 86 Row() { 87 // 通过flexGrow和flexShrink属性，将多余的空间全部分配给图片，将不足的控件全部分配给两侧空白区域。 88 Row().width(150).height(400).backgroundColor('#FFFFFF') 89 .flexGrow(0).flexShrink(1) 90 Image($r("app.media.illustrator")).width(400).height(400) 91 .objectFit(ImageFit.Contain) 92 .backgroundColor("#66F1CCB8") 93 .flexGrow(1).flexShrink(0) 94 Row().width(150).height(400).backgroundColor('#FFFFFF') 95 .flexGrow(0).flexShrink(1) 96 } 97 .width(this.containerWidth) 98 .justifyContent(FlexAlign.Center) 99 .alignItems(VerticalAlign.Center) 100 } 101 102 this.slider() 103 } 104 .width('100%') 105 .height('100%') 106 .backgroundColor('#F1F3F5') 107 .justifyContent(FlexAlign.Center) 108 .alignItems(HorizontalAlign.Center) 109 } 110} 111``` 112 113**示例2** 114 115 116文字和开关的尺寸固定，仅有中间空白区域（Blank组件）随父容器尺寸变化而伸缩。 117 118 119 120 121 122 123```ts 124@Entry 125@Component 126struct FlexibleCapabilitySample2 { 127 @State rate: number = 0.8 128 129 // 底部滑块，可以通过拖拽滑块改变容器尺寸 130 @Builder slider() { 131 Slider({ value: this.rate * 100, min: 30, max: 80, style: SliderStyle.OutSet }) 132 .blockColor(Color.White) 133 .width('60%') 134 .onChange((value: number) => { 135 this.rate = value / 100; 136 }) 137 .position({ x: '20%', y: '80%' }) 138 } 139 140 build() { 141 Column() { 142 Column() { 143 Row() { 144 Text('飞行模式') 145 .fontSize(16) 146 .width(135) 147 .height(22) 148 .fontWeight(FontWeight.Medium) 149 .lineHeight(22) 150 Blank() // 通过Blank组件实现拉伸能力 151 Toggle({ type: ToggleType.Switch }) 152 .width(36) 153 .height(20) 154 } 155 .height(55) 156 .borderRadius(12) 157 .padding({ left: 13, right: 13 }) 158 .backgroundColor('#FFFFFF') 159 .width(this.rate * 100 + '%') 160 } 161 162 this.slider() 163 } 164 .width('100%') 165 .height('100%') 166 .backgroundColor('#F1F3F5') 167 .justifyContent(FlexAlign.Center) 168 .alignItems(HorizontalAlign.Center) 169 } 170} 171``` 172 173 174## 均分能力 175 176 177均分能力是指容器组件尺寸发生变化时，增加或减小的空间均匀分配给容器组件内所有空白区域。它常用于内容数量固定、均分显示的场景，比如工具栏、底部菜单栏等。 178 179 180均分能力可以通过将[Row组件](../../reference/apis-arkui/arkui-ts/ts-container-row.md)、[Column组件](../../reference/apis-arkui/arkui-ts/ts-container-column.md)或[Flex组件](../../reference/apis-arkui/arkui-ts/ts-container-flex.md)的justifyContent属性设置为FlexAlign.SpaceEvenly实现，即子元素在父容器主轴方向等间距布局，相邻元素之间的间距、第一个元素与行首的间距、最后一个元素到行尾的间距都完全一样。 181 182 183> **说明：** 184> - 均分能力还可以通过其它方式实现，如使用[Grid网格组件](../../reference/apis-arkui/arkui-ts/ts-container-grid.md)或在每个组件间添加Blank组件等。 185> 186> - 类Web开发范式中，通过将[div组件](../../reference/apis-arkui/arkui-js/js-components-container-div.md)的justify-content属性设置为space-evenly来实现均分布局。 187 188 189**示例：** 190 191 192父容器尺寸变化过程中，图标及文字的尺寸不变，图标间的间距及图标离左右边缘的距离同时均等改变。 193 194 195 196 197 198 199```ts 200@Entry 201@Component 202struct EquipartitionCapabilitySample { 203 readonly list: number [] = [0, 1, 2, 3] 204 @State rate: number = 0.6 205 206 // 底部滑块，可以通过拖拽滑块改变容器尺寸 207 @Builder slider() { 208 Slider({ value: this.rate * 100, min: 30, max: 60, style: SliderStyle.OutSet }) 209 .blockColor(Color.White) 210 .width('60%') 211 .onChange((value: number) => { 212 this.rate = value / 100 213 }) 214 .position({ x: '20%', y: '80%' }) 215 } 216 217 build() { 218 Column() { 219 Column() { 220 // 均匀分配父容器主轴方向的剩余空间 221 Row() { 222 ForEach(this.list, (item:number) => { 223 Column() { 224 Image($r("app.media.icon")).width(48).height(48).margin({ top: 8 }) 225 Text('App name') 226 .width(64) 227 .height(30) 228 .lineHeight(15) 229 .fontSize(12) 230 .textAlign(TextAlign.Center) 231 .margin({ top: 8 }) 232 .padding({ bottom: 15 }) 233 } 234 .width(80) 235 .height(102) 236 .flexShrink(1) 237 }) 238 } 239 .width('100%') 240 .justifyContent(FlexAlign.SpaceEvenly) 241 // 均匀分配父容器主轴方向的剩余空间 242 Row() { 243 ForEach(this.list, (item:number) => { 244 Column() { 245 Image($r("app.media.icon")).width(48).height(48).margin({ top: 8 }) 246 Text('App name') 247 .width(64) 248 .height(30) 249 .lineHeight(15) 250 .fontSize(12) 251 .textAlign(TextAlign.Center) 252 .margin({ top: 8 }) 253 .padding({ bottom: 15 }) 254 } 255 .width(80) 256 .height(102) 257 .flexShrink(1) 258 }) 259 } 260 .width('100%') 261 .justifyContent(FlexAlign.SpaceEvenly) 262 } 263 .width(this.rate * 100 + '%') 264 .height(222) 265 .padding({ top: 16 }) 266 .backgroundColor('#FFFFFF') 267 .borderRadius(16) 268 269 this.slider() 270 } 271 .width('100%') 272 .height('100%') 273 .backgroundColor('#F1F3F5') 274 .justifyContent(FlexAlign.Center) 275 .alignItems(HorizontalAlign.Center) 276 } 277} 278``` 279 280 281## 占比能力 282 283 284占比能力是指子组件的宽高按照预设的比例，随父容器组件发生变化。 285 286 287占比能力通常有两种实现方式： 288 289 290- 将子组件的宽高设置为父组件宽高的百分比，详见[尺寸设置](../../reference/apis-arkui/arkui-ts/ts-universal-attributes-size.md)及[长度类型](../../reference/apis-arkui/arkui-ts/ts-types.md#length)。 291 292- 通过layoutWeight属性配置互为兄弟关系的组件在父容器主轴方向的布局权重，详见[尺寸设置](../../reference/apis-arkui/arkui-ts/ts-universal-attributes-size.md)。 293 - 当父容器尺寸确定时，其子组件按照开发者配置的权重比例分配父容器中主轴方向的空间。 294 - 仅当父容器是Row、Column或者Flex时，layoutWeight属性才会生效。 295 - 设置layoutWeight属性后，组件本身的尺寸会失效。比如同时设置了.width('40%')和.layoutWeight(1)，那么只有.layoutWeight(1)会生效。 296 297 298layoutWeight存在使用限制，所以实际使用过程中大多通过将子组件宽高设置为父组件的百分比来实现占比能力。 299 300 301> **说明：** 302> - 占比能力在实际开发中使用的非常广泛，可以通过很多不同的方式实现占比能力，如还可以通过[Grid组件](../../reference/apis-arkui/arkui-ts/ts-container-grid.md)的columnsTemplate属性设置网格容器中列的数量及其宽度比例，或通过配置子组件在栅格（本章后文将详细介绍栅格系统）中占据不同的列数来实现占比能力。本小节仅介绍最基础和常用的实现方式，局限性较大或比非常小众的实现方式，本文不做展开介绍。 303> 304> - 类Web开发范式同样支持以百分比的形式设置组件的宽高，详见[通用样式](../../reference/apis-arkui/arkui-js/js-components-common-styles.md)中关于width和height的介绍以及[长度类型介绍](../../reference/apis-arkui/arkui-js/js-appendix-types.md#长度类型)。 305> 306> - 与声明式开发范式中的layoutWeight属性类似，类Web开发范式提供了[flex-weight样式](../../reference/apis-arkui/arkui-js/js-components-common-atomic-layout.md#占比能力)用于配置互为兄弟关系的组件在父容器主轴方向的布局权重。 307 308 309**示例：** 310 311 312简单的播放控制栏，其中“上一首”、“播放/暂停”、“下一首”的layoutWeight属性都设置为1，因此它们按照“1:1:1”的比例均分父容器主轴方向的空间。 313 314 315将三个按钮的.layoutWeight(1)分别替换为.width('33%')、.width('34%')、.width('33%')，也可以实现与当前同样的显示效果。 316 317 318 319 320 321 322```ts 323@Entry 324@Component 325struct ProportionCapabilitySample { 326 @State rate: number = 0.5 327 328 // 底部滑块，可以通过拖拽滑块改变容器尺寸 329 @Builder slider() { 330 Slider({ value: 100, min: 25, max: 50, style: SliderStyle.OutSet }) 331 .blockColor(Color.White) 332 .width('60%') 333 .height(50) 334 .onChange((value: number) => { 335 this.rate = value / 100 336 }) 337 .position({ x: '20%', y: '80%' }) 338 } 339 340 build() { 341 Column() { 342 Column() { 343 Row() { 344 Column() { 345 Image($r("app.media.down")) 346 .width(48) 347 .height(48) 348 } 349 .height(96) 350 .layoutWeight(1) // 设置子组件在父容器主轴方向的布局权重 351 .justifyContent(FlexAlign.Center) 352 .alignItems(HorizontalAlign.Center) 353 354 Column() { 355 Image($r("app.media.pause")) 356 .width(48) 357 .height(48) 358 } 359 .height(96) 360 .layoutWeight(1) // 设置子组件在父容器主轴方向的布局权重 361 .backgroundColor('#66F1CCB8') 362 .justifyContent(FlexAlign.Center) 363 .alignItems(HorizontalAlign.Center) 364 365 Column() { 366 Image($r("app.media.next")) 367 .width(48) 368 .height(48) 369 } 370 .height(96) 371 .layoutWeight(1) // 设置子组件在父容器主轴方向的布局权重 372 .justifyContent(FlexAlign.Center) 373 .alignItems(HorizontalAlign.Center) 374 } 375 .width(this.rate * 100 + '%') 376 .height(96) 377 .borderRadius(16) 378 .backgroundColor('#FFFFFF') 379 } 380 381 this.slider() 382 } 383 .width('100%') 384 .height('100%') 385 .backgroundColor('#F1F3F5') 386 .justifyContent(FlexAlign.Center) 387 .alignItems(HorizontalAlign.Center) 388 } 389} 390``` 391 392 393 394## 缩放能力 395 396 397缩放能力是指子组件的宽高按照预设的比例，随容器组件发生变化，且变化过程中子组件的宽高比不变。 398 399 400缩放能力通过使用百分比布局配合**固定宽高比**（aspectRatio属性）实现当容器尺寸发生变化时，内容自适应调整。 401 402 403可以访问[布局约束](../../reference/apis-arkui/arkui-ts/ts-universal-attributes-layout-constraints.md)，了解aspectRatio属性的详细信息。 404 405 406> **说明：** 407> 类Web开发范式同样提供了[aspect-ratio样式](../../reference/apis-arkui/arkui-js/js-components-common-atomic-layout.md#固定比例)，用于固定组件的宽高比。 408 409 410**示例：** 411 412 413为方便查看效果，示例中特意给Column组件加了边框。可以看到Column组件随着其Flex父组件尺寸变化而缩放的过程中，始终保持预设的宽高比，其中的图片也始终正常显示。 414 415 416 417 418 419 420```ts 421@Entry 422@Component 423struct ScaleCapabilitySample { 424 @State sliderWidth: number = 400 425 @State sliderHeight: number = 400 426 427 // 底部滑块，可以通过拖拽滑块改变容器尺寸 428 @Builder slider() { 429 Slider({ value: this.sliderWidth, min: 100, max: 400, style: SliderStyle.OutSet }) 430 .blockColor(Color.White) 431 .width('60%') 432 .height(50) 433 .onChange((value: number) => { 434 this.sliderWidth = value; 435 }) 436 .position({ x: '20%', y: '80%' }) 437 Slider({ value: this.sliderHeight, min: 100, max: 400, style: SliderStyle.OutSet }) 438 .blockColor(Color.White) 439 .width('60%') 440 .height(50) 441 .onChange((value: number) => { 442 this.sliderHeight = value 443 }) 444 .position({ x: '20%', y: '87%' }) 445 } 446 447 build() { 448 Column() { 449 Column() { 450 Column() { 451 Image($r("app.media.illustrator")).width('100%').height('100%') 452 } 453 .aspectRatio(1) // 固定宽高比 454 .border({ width: 2, color: "#66F1CCB8"}) // 边框，仅用于展示效果 455 } 456 .backgroundColor("#FFFFFF") 457 .height(this.sliderHeight) 458 .width(this.sliderWidth) 459 .justifyContent(FlexAlign.Center) 460 .alignItems(HorizontalAlign.Center) 461 462 this.slider() 463 } 464 .width('100%') 465 .height('100%') 466 .backgroundColor("#F1F3F5") 467 .justifyContent(FlexAlign.Center) 468 .alignItems(HorizontalAlign.Center) 469 } 470} 471``` 472 473 474## 延伸能力 475 476 477延伸能力是指容器组件内的子组件，按照其在列表中的先后顺序，随容器组件尺寸变化显示或隐藏。它可以根据显示区域的尺寸，显示不同数量的元素。 478 479 480延伸能力通常有两种实现方式： 481 482 483- 通过[List组件](../../reference/apis-arkui/arkui-ts/ts-container-list.md)实现。 484 485- 通过[Scroll组件](../../reference/apis-arkui/arkui-ts/ts-container-scroll.md)配合[Row组件](../../reference/apis-arkui/arkui-ts/ts-container-row.md)或[Column组件](../../reference/apis-arkui/arkui-ts/ts-container-column.md)实现。 486 487 488> **说明：** 489> - List、Row或Column组件中子节点的在页面显示时就已经全部完成了布局计算及渲染，只不过受限于父容器尺寸，用户只能看到一部分。随着父容器尺寸增大，用户可以看到的子节点数目也相应的增加。用户还可以通过手指滑动触发列表滑动，查看被隐藏的子节点。 490> 491> - 类Web开发范式同样可以使用[list组件](../../reference/apis-arkui/arkui-js/js-components-container-list.md)实现延伸能力。 492> 493> - 类Web开发范式没有提供scroll组件，但可以将[div组件](../../reference/apis-arkui/arkui-js/js-components-container-div.md)的overflow样式设置为scroll（即div组件主轴方向上子元素的尺寸超过div组件本身的尺寸时进行滚动显示）来模拟scroll组件的行为。 494 495 496**示例：** 497 498 499当父容器的尺寸发生改变时，页面中显示的图标数量随之发生改变。 500 501 502分别通过List组件实现及通过Scroll组件配合Row组件实现。 503 504 505 506 507 508（1）通过List组件实现。 509 510 511 512```ts 513@Entry 514@Component 515struct ExtensionCapabilitySample1 { 516 @State rate: number = 0.60 517 readonly appList: number [] = [0, 1, 2, 3, 4, 5, 6, 7] 518 519 // 底部滑块，可以通过拖拽滑块改变容器尺寸 520 @Builder slider() { 521 Slider({ value: this.rate * 100, min: 8, max: 60, style: SliderStyle.OutSet }) 522 .blockColor(Color.White) 523 .width('60%') 524 .height(50) 525 .onChange((value: number) => { 526 this.rate = value / 100 527 }) 528 .position({ x: '20%', y: '80%' }) 529 } 530 531 build() { 532 Column() { 533 Row({ space: 10 }) { 534 // 通过List组件实现隐藏能力 535 List({ space: 10 }) { 536 ForEach(this.appList, (item:number) => { 537 ListItem() { 538 Column() { 539 Image($r("app.media.icon")).width(48).height(48).margin({ top: 8 }) 540 Text('App name') 541 .width(64) 542 .height(30) 543 .lineHeight(15) 544 .fontSize(12) 545 .textAlign(TextAlign.Center) 546 .margin({ top: 8 }) 547 .padding({ bottom: 15 }) 548 }.width(80).height(102) 549 }.width(80).height(102) 550 }) 551 } 552 .padding({ top: 16, left: 10 }) 553 .listDirection(Axis.Horizontal) 554 .width('100%') 555 .height(118) 556 .borderRadius(16) 557 .backgroundColor(Color.White) 558 } 559 .width(this.rate * 100 + '%') 560 561 this.slider() 562 } 563 .width('100%') 564 .height('100%') 565 .backgroundColor('#F1F3F5') 566 .justifyContent(FlexAlign.Center) 567 .alignItems(HorizontalAlign.Center) 568 } 569} 570``` 571 572 573 （2）通过Scroll组件配合Row组件实现。 574 575```ts 576@Entry 577@Component 578struct ExtensionCapabilitySample2 { 579 private scroller: Scroller = new Scroller() 580 @State rate: number = 0.60 581 @State appList: number [] = [0, 1, 2, 3, 4, 5, 6, 7] 582 583 // 底部滑块，可以通过拖拽滑块改变容器尺寸 584 @Builder slider() { 585 Slider({ value: this.rate * 100, min: 8, max: 60, style: SliderStyle.OutSet }) 586 .blockColor(Color.White) 587 .width('60%') 588 .height(50) 589 .onChange((value: number) => { 590 this.rate = value / 100; 591 }) 592 .position({ x: '20%', y: '80%' }) 593 } 594 595 build() { 596 Column() { 597 // 通过Scroll和Row组件实现隐藏能力 598 Scroll(this.scroller) { 599 Row({ space: 10 }) { 600 ForEach(this.appList, () => { 601 Column() { 602 Image($r("app.media.icon")).width(48).height(48).margin({ top: 8 }) 603 Text('App name') 604 .width(64) 605 .height(30) 606 .lineHeight(15) 607 .fontSize(12) 608 .textAlign(TextAlign.Center) 609 .margin({ top: 8 }) 610 .padding({ bottom: 15 }) 611 612 613 }.width(80).height(102) 614 }) 615 } 616 .padding({ top: 16, left: 10 }) 617 .height(118) 618 .borderRadius(16) 619 .backgroundColor(Color.White) 620 } 621 .scrollable(ScrollDirection.Horizontal) 622 .width(this.rate * 100 + '%') 623 624 this.slider() 625 } 626 .width('100%') 627 .height('100%') 628 .backgroundColor('#F1F3F5') 629 .justifyContent(FlexAlign.Center) 630 .alignItems(HorizontalAlign.Center) 631 } 632} 633``` 634 635 636 637## 隐藏能力 638 639隐藏能力是指容器组件内的子组件，按照其预设的显示优先级，随容器组件尺寸变化显示或隐藏，其中相同显示优先级的子组件同时显示或隐藏。它是一种比较高级的布局方式，常用于分辨率变化较大，且不同分辨率下显示内容有所差异的场景。主要思想是通过增加或减少显示内容，来保持最佳的显示效果。 640 641隐藏能力通过设置**布局优先级**（displayPriority属性）来控制显隐，当布局主轴方向剩余尺寸不足以满足全部元素时，按照布局优先级大小，从小到大依次隐藏，直到容器能够完整显示剩余元素。具有相同布局优先级的元素将同时显示或者隐藏。 642 643可以访问[布局约束](../../reference/apis-arkui/arkui-ts/ts-universal-attributes-layout-constraints.md)，了解displayPriority属性的详细信息。 644 645> **说明：** 646> 类Web开发范式同样支持[display-index样式](../../reference/apis-arkui/arkui-js/js-components-common-atomic-layout.md#隐藏能力)，用于设置布局优先级。 647 648**示例：** 649 650父容器尺寸发生变化时，其子元素按照预设的优先级显示或隐藏。 651 652 653 654 655```ts 656@Entry 657@Component 658struct HiddenCapabilitySample { 659 @State rate: number = 0.45 660 661 // 底部滑块，可以通过拖拽滑块改变容器尺寸 662 @Builder slider() { 663 Slider({ value: this.rate * 100, min: 10, max: 45, style: SliderStyle.OutSet }) 664 .blockColor(Color.White) 665 .width('60%') 666 .height(50) 667 .onChange((value: number) => { 668 this.rate = value / 100 669 }) 670 .position({ x: '20%', y: '80%' }) 671 } 672 673 build() { 674 Column() { 675 Row() { 676 Image($r("app.media.favorite")) 677 .width(48) 678 .height(48) 679 .objectFit(ImageFit.Contain) 680 .margin({ left: 12, right: 12 }) 681 .displayPriority(1) // 布局优先级 682 683 Image($r("app.media.down")) 684 .width(48) 685 .height(48) 686 .objectFit(ImageFit.Contain) 687 .margin({ left: 12, right: 12 }) 688 .displayPriority(2) // 布局优先级 689 690 Image($r("app.media.pause")) 691 .width(48) 692 .height(48) 693 .objectFit(ImageFit.Contain) 694 .margin({ left: 12, right: 12 }) 695 .displayPriority(3) // 布局优先级 696 697 Image($r("app.media.next")) 698 .width(48) 699 .height(48) 700 .objectFit(ImageFit.Contain) 701 .margin({ left: 12, right: 12 }) 702 .displayPriority(2) // 布局优先级 703 704 Image($r("app.media.list")) 705 .width(48) 706 .height(48) 707 .objectFit(ImageFit.Contain) 708 .margin({ left: 12, right: 12 }) 709 .displayPriority(1) // 布局优先级 710 } 711 .width(this.rate * 100 + '%') 712 .height(96) 713 .borderRadius(16) 714 .backgroundColor('#FFFFFF') 715 .justifyContent(FlexAlign.Center) 716 .alignItems(VerticalAlign.Center) 717 718 this.slider() 719 } 720 .width('100%') 721 .height('100%') 722 .backgroundColor('#F1F3F5') 723 .justifyContent(FlexAlign.Center) 724 .alignItems(HorizontalAlign.Center) 725 } 726} 727``` 728 729 730## 折行能力 731 732折行能力是指容器组件尺寸发生变化，当布局方向尺寸不足以显示完整内容时自动换行。它常用于横竖屏适配或默认设备向平板切换的场景。 733 734折行能力通过使用 **Flex折行布局** （将wrap属性设置为FlexWrap.Wrap）实现，当横向布局尺寸不足以完整显示内容元素时，通过折行的方式，将元素显示在下方。 735 736可以访问[Flex组件](../../reference/apis-arkui/arkui-ts/ts-container-flex.md)，了解Flex组件的详细用法。 737 738> **说明：** 739> 类Web开发范式通过将[div组件](../../reference/apis-arkui/arkui-js/js-components-container-div.md)的flex-warp样式设置为wrap来使用折行能力。 740 741**示例：** 742 743父容器中的图片尺寸固定，当父容器尺寸发生变化，其中的内容做自适应换行。 744 745 746 747 748```ts 749@Entry 750@Component 751struct WrapCapabilitySample { 752 @State rate: number = 0.7 753 readonly imageList: Resource [] = [ 754 $r('app.media.flexWrap1'), 755 $r('app.media.flexWrap2'), 756 $r('app.media.flexWrap3'), 757 $r('app.media.flexWrap4'), 758 $r('app.media.flexWrap5'), 759 $r('app.media.flexWrap6') 760 ] 761 762 // 底部滑块，可以通过拖拽滑块改变容器尺寸 763 @Builder slider() { 764 Slider({ value: this.rate * 100, min: 50, max: 70, style: SliderStyle.OutSet }) 765 .blockColor(Color.White) 766 .width('60%') 767 .onChange((value: number) => { 768 this.rate = value / 100 769 }) 770 .position({ x: '20%', y: '87%' }) 771 } 772 773 build() { 774 Flex({ justifyContent: FlexAlign.Center, direction: FlexDirection.Column }) { 775 Column() { 776 // 通过Flex组件warp参数实现自适应折行 777 Flex({ 778 direction: FlexDirection.Row, 779 alignItems: ItemAlign.Center, 780 justifyContent: FlexAlign.Center, 781 wrap: FlexWrap.Wrap 782 }) { 783 ForEach(this.imageList, (item:Resource) => { 784 Image(item).width(183).height(138).padding(10) 785 }) 786 } 787 .backgroundColor('#FFFFFF') 788 .padding(20) 789 .width(this.rate * 100 + '%') 790 .borderRadius(16) 791 } 792 .width('100%') 793 794 this.slider() 795 }.width('100%') 796 .height('100%') 797 .backgroundColor('#F1F3F5') 798 } 799} 800``` 801
