HarmonyOS 布局实践1 常用TitleBar实现

HarmonyOS 布局实践1 常用TitleBar实现

背景

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的规律无法被应用感知，所以无法直接使用。
• 对齐方式：通过对齐方式，设置当前元素是基于锚点的上中下对齐，还是基于锚点的左中右对齐。

注意：不要互相依赖，环形依赖时会导致容器内子组件全部不绘制。同方向上两个以上位置设置锚点，但锚点位置逆序时此子组件大小为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})  
}

展示效果如下：

符合预期。右侧要展示两个按钮时，我们用一个容器给包裹起来：

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})  
}

效果：

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

发现右侧布局占满了整个宽度，怎么回事呢？
原来是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})  
}

效果恢复正常：

总结

本文以常用Titlebar控件的布局方式介绍了HarmonyOS常用的相对布局RelativeContainer的特性和属性。并且介绍了Flex与Row布局的一个自适应子节点能力的区别：Row可以自适应子节点宽度，Flex不可以，会撑满整个父布局宽度。