HarmonyOS 鸿蒙Next中“仿抖音快手”App开发技术分享（三）利用相对布局叠加交互图标

HarmonyOS 鸿蒙Next中“仿抖音快手”App开发技术分享（三）利用相对布局叠加交互图标

上一节我们利用photoAccessHelper实现了从相册挑选视频的功能，但在短视频APP界面，视频画面上还叠加了若干交互图标，包括但不限于：点赞、收藏、评论、分享等等。那么在某个组件上叠加显示其他组件，就用到了相对布局这个容器。

鸿蒙SDK提供的相对布局叫做RelativeContainer组件，相对布局内部的各个子组件按照指定位置排列，如果两个子组件同时覆盖了某块区域，后来的子组件画面将覆盖先来的子组件画面。

所谓相对布局，指的是内部组件相对于其他组件来决定自身的位置。而被其他组件拿来参考位置的标记组件，鸿蒙系统称之为锚点。这个锚点既可能是子组件的上级容器也就是相对布局，也可能是子组件的平级组件。

对于相对布局的锚点标识，SDK固定分配了"container"表示当前RelativeContainer组件。对于内部组件的锚点标识，则需提前给锚点组件分配id，也就是在引入锚点组件时添加".id(‘tx_center’)"，其中tx_center可替换为自己定义的锚点标识。

RelativeContainer的子组件通过alignRules方法指定自身的相对位置，该方法有middle和center两个参数，其中middle用于设置水平方向的位置，center用于设置垂直方向的位置。不管是水平方向还是垂直方向，都要指定当前方向的锚点标识anchor，以及该方向上的对齐方式align。具体的alignRules方法调用格式如下所示：

.alignRules({
  middle:{ anchor: '水平方向的锚点标识', align: 水平方向的对齐方式}, // middle表示水平方向
  center:{ anchor: '垂直方向的锚点标识', align: 垂直方向的对齐方式} // center表示垂直方向
})

若想让某个子组件位于相对布局的正中央，则可调用下面的alignRules方法。在水平和垂直两个方向上都把上级容器__container__作为锚点，对齐方式也都采用了居中对齐。

.alignRules({
  middle:{ anchor: '__container__', align: HorizontalAlign.Center},
  center:{ anchor: '__container__', align: VerticalAlign.Center}
})

水平方向的对齐方式除了HorizontalAlign.Center表示居中对齐，还有HorizontalAlign.Start表示靠左对齐，以及HorizontalAlign.End表示靠右对齐。垂直方向的对齐方式除了VerticalAlign.Center表示居中对齐，还有VerticalAlign.Top表示靠上对齐，以及VerticalAlign.Bottom表示靠下对齐。

除了以上级容器作为锚点，还能以平级组件作为锚点，注意锚点组件要提前分配id标识，然后目标组件在alignRules方法的anchor属性设置锚点的id，表示参考该id的锚点组件来决定自身位置。比如下面代码先放入一个居中的文本组件，再放入两个参考中央文本位置的另外两个文本组件。

RelativeContainer() {
  Text('我在中间').fontSize(17)
    .id('tx_center') // 锚点组件需要分配id标识
    .alignRules({
      middle:{ anchor: '__container__', align: HorizontalAlign.Center},
      center:{ anchor: '__container__', align: VerticalAlign.Center}
    })
  Text('中间上面').fontSize(17)
    .backgroundColor('#ffff00')
    .alignRules({
      left:{ anchor: 'tx_center', align: HorizontalAlign.Start},
      bottom:{ anchor: 'tx_center', align: VerticalAlign.Top}
    })
  Text('中间右边').fontSize(17)
    .backgroundColor('#ffff00')
    .alignRules({
      left:{ anchor: 'tx_center', align: HorizontalAlign.End},
      top:{ anchor: 'tx_center', align: VerticalAlign.Top}
    })
}
.width('100%').height(300)

从上面代码可知，第一个文本组件相对于上级容器居中放置，并且分配了tx_center的id标识。第二个和第三个文本组件都参考了第一个名叫tx_center的平级组件，且第二个文本组件与tx_center锚点朝左朝上对齐，第三个文本组件与tx_center锚点朝右朝上对齐。完整的相对布局效果如下所示。

下一篇文章会介绍如何使用滑块Swiper来轮播图片。