鸿蒙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、案 例

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