鸿蒙UI研发——组件的自适应拉伸

1、概 述

针对常见的开发场景，ArkUI开发框架提供了非常多的自适应布局能力，这些布局可以独立使用，也可多种布局叠加使用。本文针对ArkUI提供的拉伸能力做简单讨论。

拉伸能力是指容器组件尺寸发生变化时，增加或减小的空间全部分配给容器组件内指定区域。效果类似如下：

做过前端开发的朋友应该使用过Flex布局，这是一个非常常用的布局方式，类似的，ArkUI也提供了Flex布局，我们在ArkUI中，可以借助flexGrow和flexShrink属性可以方便地实现自适应拉伸能力。

2、Flex布局实现拉伸能力

拉伸能力通常通过Flex布局中的flexGrow和flexShrink属性实现，flexGrow和flexShrink属性常与flexBasis属性搭配使用，这三个属性介绍如下：

属性	类型	描述
flexGrow	number	默认为：0 仅当父容器宽度大于所有子组件宽度的总和时，该属性生效。配置了此属性的子组件，按照比例拉伸，分配父容器的多余空间。
flexShrink	number	默认为：1 仅当父容器宽度小于所有子组件宽度的总和时，该属性生效。配置了此属性的子组件，按照比例收缩，分配父容器的不足空间。
flexBasis	'auto' | Length	默认为：'auto' 设置组件在Flex容器中主轴方向上基准尺寸。 'auto'意味着使用组件原始的尺寸，不做修改。flexBasis属性不是必须的，通过width或height也可以达到同样的效果。当flexBasis属性与width或height发生冲突时，以flexBasis属性为准。

3、案 例

本示例中的页面由中间的内容区（包含一张图片）以及两侧的留白区组成，各区域的属性配置如下。

• 中间内容区的宽度设置为100vp，同时将flexGrow属性设置为1，flexShrink属性设置为0。

• 两侧留白区的宽度设置为100vp，同时将flexGrow属性设置为0，flexShrink属性设置为1。

由上可知，父容器的基准尺寸是300vp（100vp+100vp+100vp）。我们可以通过拖动底部的滑动条改变父容器的尺寸，查看布局变化。

• 当父容器的尺寸大于300vp时，父容器中多余的空间全部分配给中间内容区。

• 当父容器的尺寸小于300vp时，左右两侧的留白区按照“1:1”的比例收缩（即平均分配父容器的不足空间）。

效果如下：

代码如下(25、30、34行代码)：

@Entry

4、one more thing..

如果我们期望将父容器的剩余空间全部分配给某空白区域时，也可以通过Blank组件实现。

??注意：

当仅当父组件为Row\Column\Flex组件时，Blank组件才会生效。

一个通过Blank实现拉伸效果的示例如下：

代码如下（27行代码）：​​​​​​​

@Entry