HarmonyOS 布局实践1 常用TitleBar实现
往期知识点整理[*] 鸿蒙（HarmonyOS）北向开辟知识点记载~
[*] 被裁人后，踏上了鸿蒙开辟求职之路
[*] 连续更新中……
配景
TitleBar是日常开辟中最常用的组件，每个应用可能拥有不同的风格，但是整体样式不外乎三块地区：
[*]左侧返回地区
[*]中间标题地区
[*]右侧按钮地区
下面截取了我的华为应用的TitleBar效果图：
https://img-blog.csdnimg.cn/img_convert/64c721a1d0e585f0690c9ced28b3fd3d.webp?x-oss-process=image/format,png
微信内容地区居中，我的华为内容地区靠左。在我们实际的开辟中可能这两种情况都会遇到，我们封装一个TitleBar实现下面功能：
[*]最左侧支持返回按钮 + 文案
[*]右侧可以最多有两个按钮
[*]中间标题内容地区可以自顺应占位，不要超过左侧和右侧地区，可以控制居左或者居中
布局容器选择
整体效果两边固定中间撑开，在Android中我们首先想到RelativeLayout，HarmonyOS 也提供了雷同的相对布局RelativeContainer。RelativeContainer支持容器内部的子元素设置相对位置关系，实用于界面复杂场景的情况，对多个子组件进行对齐和排列。子元素支持指定兄弟元素作为锚点，也支持指定父容器作为锚点，基于锚点做相对位置布局。
RelativeContainer提供了锚点和对齐方式两种概念：
[*]锚点：通过锚点设置当前元素基于哪个元素确定位置。锚点设置是指设置子元素相对于父元素或兄弟元素的位置依赖关系。在水平方向上，可以设置left、middle、right的锚点。在竖直方向上，可以设置top、center、bottom的锚点。必须为RelativeContainer及其子元素设置ID，用于指定锚点信息。RelativeContainer布局ID默认为“container”，其余子元素的ID通过id属性设置。不设置id的组件能显示，但是不能被其他子组件作为锚点，相对布局容器会为其拼接id，此id的规律无法被应用感知，以是无法直接使用。
[*]对齐方式：通过对齐方式，设置当前元素是基于锚点的上中下对齐，还是基于锚点的左中右对齐。
注意：不要相互依赖，环形依赖时会导致容器内子组件全部不绘制。同方向上两个以上位置设置锚点，但锚点位置逆序时此子组件大小为0，即不绘制。
布局实现
父布局使用RelativeContainer，然后左右分别设置按钮相对父布局的左侧和右侧，中间容器分别相对左右布局的右左，整体布局如下：
build() {
RelativeContainer() {
Text('左侧')
.fontSize(10)
.fontWeight(FontWeight.Bold)
.id("base_title_left_container")
.alignRules({
bottom: { anchor: "__container__", align: VerticalAlign.Bottom },
left: { anchor: "__container__", align: HorizontalAlign.Start }
})
Text('右侧')
.fontSize(10)
.fontWeight(FontWeight.Bold)
.id("base_title_right_container")
.alignRules({
bottom: { anchor: "__container__", align: VerticalAlign.Bottom },
right: { anchor: "__container__", align: HorizontalAlign.End }
})
// .backgroundColor('#00ff00')
Row(){
Text('中间内容')
.fontSize(10)
.fontWeight(FontWeight.Bold)
}.alignRules({
bottom: { anchor: "__container__", align: VerticalAlign.Bottom },
left: { anchor: "base_title_left_container", align: HorizontalAlign.End },
right: { anchor: "base_title_right_container", align: HorizontalAlign.Start }
}).backgroundColor('#ff0000')
}
.height('40')
.width('100%')
.backgroundColor('#ccc')
.margin({top:100})
}
展示效果如下：
https://img-blog.csdnimg.cn/img_convert/e3d50a4d655b98747c9faad3bda64ca7.webp?x-oss-process=image/format,png
符合预期。右侧要展示两个按钮时，我们用一个容器给包裹起来：
build() {
RelativeContainer() {
Text('左侧')
.fontSize(10)
.fontWeight(FontWeight.Bold)
.id("base_title_left_container")
.alignRules({
bottom: { anchor: "__container__", align: VerticalAlign.Bottom },
left: { anchor: "__container__", align: HorizontalAlign.Start }
})
Flex({ justifyContent: FlexAlign.End, alignItems: ItemAlign.Center }) {
Text('右侧2')
.fontSize(10)
.fontWeight(FontWeight.Bold)
Text('右侧1')
.fontSize(10)
.fontWeight(FontWeight.Bold)
}
.id("base_title_right_container")
.alignRules({
bottom: { anchor: "__container__", align: VerticalAlign.Bottom },
right: { anchor: "__container__", align: HorizontalAlign.End }
})
// .backgroundColor('#00ff00')
Row(){
Text('中间内容')
.fontSize(10)
.fontWeight(FontWeight.Bold)
}.alignRules({
bottom: { anchor: "__container__", align: VerticalAlign.Bottom },
left: { anchor: "base_title_left_container", align: HorizontalAlign.End },
right: { anchor: "base_title_right_container", align: HorizontalAlign.Start }
}).backgroundColor('#ff0000')
}
.height('40')
.width('100%')
.backgroundColor('#ccc')
.margin({top:100})
}
效果：
https://img-blog.csdnimg.cn/img_convert/a0dedaa4f647586b77affa290faa1b26.webp?x-oss-process=image/format,png
发现中间内容不展示了，给右侧容器增加配景致后：
https://img-blog.csdnimg.cn/img_convert/32cca22bbeeddef8707f462870e2b071.webp?x-oss-process=image/format,png
发现右侧布局占满了整个宽度，怎么回事呢？ 原来是Flex不能自顺应子节点，我们换成另一个容器Row后：
build() {
RelativeContainer() {
Text('左侧')
.fontSize(10)
.fontWeight(FontWeight.Bold)
.id("base_title_left_container")
.alignRules({
bottom: { anchor: "__container__", align: VerticalAlign.Bottom },
left: { anchor: "__container__", align: HorizontalAlign.Start }
})
Row() {
Text('右侧2')
.fontSize(10)
.fontWeight(FontWeight.Bold)
Text('右侧1')
.fontSize(10)
.fontWeight(FontWeight.Bold)
}
.id("base_title_right_container")
.alignRules({
bottom: { anchor: "__container__", align: VerticalAlign.Bottom },
right: { anchor: "__container__", align: HorizontalAlign.End }
})
.backgroundColor('#00ff00')
Row(){
Text('中间内容')
.fontSize(10)
.fontWeight(FontWeight.Bold)
}.alignRules({
bottom: { anchor: "__container__", align: VerticalAlign.Bottom },
left: { anchor: "base_title_left_container", align: HorizontalAlign.End },
right: { anchor: "base_title_right_container", align: HorizontalAlign.Start }
}).backgroundColor('#ff0000')
}
.height('40')
.width('100%')
.backgroundColor('#ccc')
.margin({top:100})
}
效果恢复正常：
https://img-blog.csdnimg.cn/img_convert/37f3f88b252d9974c602492449fe3df4.webp?x-oss-process=image/format,png
总结
本文以常用Titlebar控件的布局方式先容了HarmonyOS常用的相对布局RelativeContainer的特性和属性。而且先容了Flex与Row布局的一个自顺应子节点本领的区别：Row可以自顺应子节点宽度，Flex不可以，会撑满整个父布局宽度。
末了
总是有很多小伙伴反馈说：鸿蒙开辟不知道学习哪些技能？不知道需要重点掌握哪些鸿蒙开辟知识点？ 为了解决大家这些学习烦恼。在这准备了一份很实用的鸿蒙全栈开辟学习路线与学习文档给大家用来跟着学习。
针对一些列因素，整理了一套纯血版鸿蒙（HarmonyOS Next）全栈开辟技能的学习路线，包含了鸿蒙开辟必掌握的核心知识要点，内容有（OpenHarmony多媒体技能、Napi组件、OpenHarmony内核、OpenHarmony驱动开辟、系统定制移植……等）技能知识点。
https://img-blog.csdnimg.cn/img_convert/d3d128e5efb21ca5b57ff96115388506.webp?x-oss-process=image/format,png
《鸿蒙 (Harmony OS)开辟学习手册》（共计892页）:https://gitcode.com/HarmonyOS_MN/733GH/overview
如何快速入门？
1.基本概念
2.构建第一个ArkTS应用
3.……
https://i-blog.csdnimg.cn/direct/43225e87b7a54407a65b8250b9ee94c8.png
鸿蒙开辟口试真题（含参考答案）:
https://i-blog.csdnimg.cn/direct/86cc41a1de0247329011c1537e67be11.png
《OpenHarmony源码解析》:
[*]搭建开辟情况
[*]Windows 开辟情况的搭建
[*]Ubuntu 开辟情况搭建
[*]Linux 与 Windows 之间的文件共享
[*]……
[*]系统架构分析
[*]构建子系统
[*]启动流程
[*]子系统
[*]分布式任务调度子系统
[*]分布式通讯子系统
[*]驱动子系统
[*]……
https://img-blog.csdnimg.cn/img_convert/b2a7c0f56b33ef83d8199a6e53e443f2.png
OpenHarmony 装备开辟学习手册:https://gitcode.com/HarmonyOS_MN/733GH/overview
https://img-blog.csdnimg.cn/img_convert/35b4e458bb0a8a3bb1c75278c7493fd5.jpeg
免责声明：如果侵犯了您的权益，请联系站长，我们会及时删除侵权内容，谢谢合作！更多信息从访问主页：qidao123.com:ToB企服之家，中国第一个企服评测及商务社交产业平台。
页:
[1]