ToB企服应用市场:ToB评测及商务社交产业平台

标题: HarmonyOS 布局实践1 常用TitleBar实现 [打印本页]
作者: 诗林    时间: 2024-10-19 23:38
标题: HarmonyOS 布局实践1 常用TitleBar实现
往期知识点整理


配景

TitleBar是日常开辟中最常用的组件，每个应用可能拥有不同的风格，但是整体样式不外乎三块地区：
下面截取了我的华为应用的TitleBar效果图：

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

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

注意：不要相互依赖，环形依赖时会导致容器内子组件全部不绘制。同方向上两个以上位置设置锚点，但锚点位置逆序时此子组件大小为0，即不绘制。
布局实现

父布局使用RelativeContainer，然后左右分别设置按钮相对父布局的左侧和右侧，中间容器分别相对左右布局的右左，整体布局如下：
  1. build() {  
  2.   RelativeContainer() {  
  3.     Text('左侧')  
  4.       .fontSize(10)  
  5.       .fontWeight(FontWeight.Bold)  
  6.       .id("base_title_left_container")  
  7.       .alignRules({  
  8.         bottom: { anchor: "__container__", align: VerticalAlign.Bottom },  
  9.         left: { anchor: "__container__", align: HorizontalAlign.Start }  
  10.       })  
  12.     Text('右侧')  
  13.         .fontSize(10)  
  14.         .fontWeight(FontWeight.Bold)  
  15.     .id("base_title_right_container")  
  16.       .alignRules({  
  17.         bottom: { anchor: "__container__", align: VerticalAlign.Bottom },  
  18.         right: { anchor: "__container__", align: HorizontalAlign.End }  
  19.       })  
  20.       // .backgroundColor('#00ff00')  
  21.     Row(){  
  22.       Text('中间内容')  
  23.         .fontSize(10)  
  24.         .fontWeight(FontWeight.Bold)  
  26.     }.alignRules({  
  27.       bottom: { anchor: "__container__", align: VerticalAlign.Bottom },  
  28.       left: { anchor: "base_title_left_container", align: HorizontalAlign.End },  
  29.       right: { anchor: "base_title_right_container", align: HorizontalAlign.Start }  
  30.     }).backgroundColor('#ff0000')  
  32.   }  
  33.   .height('40')  
  34.   .width('100%')  
  35.   .backgroundColor('#ccc')  
  36.   .margin({top:100})  
  37. }
复制代码
展示效果如下：

符合预期。右侧要展示两个按钮时，我们用一个容器给包裹起来：
  1. build() {  
  2.   RelativeContainer() {  
  3.     Text('左侧')  
  4.       .fontSize(10)  
  5.       .fontWeight(FontWeight.Bold)  
  6.       .id("base_title_left_container")  
  7.       .alignRules({  
  8.         bottom: { anchor: "__container__", align: VerticalAlign.Bottom },  
  9.         left: { anchor: "__container__", align: HorizontalAlign.Start }  
  10.       })  
  12.     Flex({ justifyContent: FlexAlign.End, alignItems: ItemAlign.Center }) {  
  13.       Text('右侧2')  
  14.         .fontSize(10)  
  15.         .fontWeight(FontWeight.Bold)  
  16.       Text('右侧1')  
  17.         .fontSize(10)  
  18.         .fontWeight(FontWeight.Bold)  
  19.     }  
  20.     .id("base_title_right_container")  
  21.       .alignRules({  
  22.         bottom: { anchor: "__container__", align: VerticalAlign.Bottom },  
  23.         right: { anchor: "__container__", align: HorizontalAlign.End }  
  24.       })  
  25.       // .backgroundColor('#00ff00')  
  26.     Row(){  
  27.       Text('中间内容')  
  28.         .fontSize(10)  
  29.         .fontWeight(FontWeight.Bold)  
  31.     }.alignRules({  
  32.       bottom: { anchor: "__container__", align: VerticalAlign.Bottom },  
  33.       left: { anchor: "base_title_left_container", align: HorizontalAlign.End },  
  34.       right: { anchor: "base_title_right_container", align: HorizontalAlign.Start }  
  35.     }).backgroundColor('#ff0000')  
  37.   }  
  38.   .height('40')  
  39.   .width('100%')  
  40.   .backgroundColor('#ccc')  
  41.   .margin({top:100})  
  42. }
复制代码
效果：

发现中间内容不展示了，给右侧容器增加配景致后：

发现右侧布局占满了整个宽度，怎么回事呢？ 原来是Flex不能自顺应子节点，我们换成另一个容器Row后：
  1. build() {  
  2.   RelativeContainer() {  
  3.     Text('左侧')  
  4.       .fontSize(10)  
  5.       .fontWeight(FontWeight.Bold)  
  6.       .id("base_title_left_container")  
  7.       .alignRules({  
  8.         bottom: { anchor: "__container__", align: VerticalAlign.Bottom },  
  9.         left: { anchor: "__container__", align: HorizontalAlign.Start }  
  10.       })  
  12.     Row() {  
  13.       Text('右侧2')  
  14.         .fontSize(10)  
  15.         .fontWeight(FontWeight.Bold)  
  16.       Text('右侧1')  
  17.         .fontSize(10)  
  18.         .fontWeight(FontWeight.Bold)  
  19.     }  
  20.     .id("base_title_right_container")  
  21.       .alignRules({  
  22.         bottom: { anchor: "__container__", align: VerticalAlign.Bottom },  
  23.         right: { anchor: "__container__", align: HorizontalAlign.End }  
  24.       })  
  25.       .backgroundColor('#00ff00')  
  26.     Row(){  
  27.       Text('中间内容')  
  28.         .fontSize(10)  
  29.         .fontWeight(FontWeight.Bold)  
  31.     }.alignRules({  
  32.       bottom: { anchor: "__container__", align: VerticalAlign.Bottom },  
  33.       left: { anchor: "base_title_left_container", align: HorizontalAlign.End },  
  34.       right: { anchor: "base_title_right_container", align: HorizontalAlign.Start }  
  35.     }).backgroundColor('#ff0000')  
  37.   }  
  38.   .height('40')  
  39.   .width('100%')  
  40.   .backgroundColor('#ccc')  
  41.   .margin({top:100})  
  42. }
复制代码
效果恢复正常：

总结

本文以常用Titlebar控件的布局方式先容了HarmonyOS常用的相对布局RelativeContainer的特性和属性。而且先容了Flex与Row布局的一个自顺应子节点本领的区别：Row可以自顺应子节点宽度，Flex不可以，会撑满整个父布局宽度。
末了

总是有很多小伙伴反馈说：鸿蒙开辟不知道学习哪些技能？不知道需要重点掌握哪些鸿蒙开辟知识点？ 为了解决大家这些学习烦恼。在这准备了一份很实用的鸿蒙全栈开辟学习路线与学习文档给大家用来跟着学习。
针对一些列因素，整理了一套纯血版鸿蒙（HarmonyOS Next）全栈开辟技能的学习路线，包含了鸿蒙开辟必掌握的核心知识要点，内容有（OpenHarmony多媒体技能、Napi组件、OpenHarmony内核、OpenHarmony驱动开辟、系统定制移植……等）技能知识点。

《鸿蒙 (Harmony OS)开辟学习手册》（共计892页）:https://gitcode.com/HarmonyOS_MN/733GH/overview

如何快速入门？

1.基本概念
2.构建第一个ArkTS应用
3.……

鸿蒙开辟口试真题（含参考答案）:


《OpenHarmony源码解析》:



OpenHarmony 装备开辟学习手册:https://gitcode.com/HarmonyOS_MN/733GH/overview



免责声明：如果侵犯了您的权益，请联系站长，我们会及时删除侵权内容，谢谢合作！更多信息从访问主页：qidao123.com:ToB企服之家，中国第一个企服评测及商务社交产业平台。



欢迎光临 ToB企服应用市场:ToB评测及商务社交产业平台 (https://dis.qidao123.com/) Powered by Discuz! X3.4