HarmonyOS 布局实践1 常用TitleBar实现

往期知识点整理

• 鸿蒙（HarmonyOS）北向开发知识点记录~
• 被裁员后，踏上了鸿蒙开发求职之路
• 持续更新中……

背景

TitleBar是日常开发中最常用的组件，每个应用可能拥有不同的风格，但是整体样式不外乎三块区域：

1. 左侧返回区域
2. 中间标题区域
3. 右侧按钮区域

下面截取了我的华为应用的TitleBar效果图：

微信内容区域居中，我的华为内容区域靠左。在我们实际的开发中可能这两种情况都会遇到，我们封装一个TitleBar实现下面功能：

1. 最左侧支持返回按钮 + 文案
2. 右侧可以最多有两个按钮
3. 中间标题内容区域可以自适应占位，不要超过左侧和右侧区域，可以控制居左或者居中

布局容器选择

整体效果两边固定中间撑开，在Android中我们首先想到RelativeLayout，HarmonyOS 也提供了类似的相对布局RelativeContainer。RelativeContainer支持容器内部的子元素设置相对位置关系，适用于界面复杂场景的情况，对多个子组件进行对齐和排列。子元素支持指定兄弟元素作为锚点，也支持指定父容器作为锚点，基于锚点做相对位置布局。

RelativeContainer提供了锚点和对齐方式两种概念：

• 锚点：通过锚点设置当前元素基于哪个元素确定位置。锚点设置是指设置子元素相对于父元素或兄弟元素的位置依赖关系。在水平方向上，可以设置left、middle、right的锚点。在竖直方向上，可以设置top、center、bottom的锚点。必须为RelativeContainer及其子元素设置ID，用于指定锚点信息。RelativeContainer布局ID默认为“container”，其余子元素的ID通过id属性设置。不设置id的组件能显示，但是不能被其他子组件作为锚点，相对布局容器会为其拼接id，此id的规律无法被应用感