【组件】自定义页面顶部标题栏组件，可动态设置标题、左右操作按钮icon及点击事件

使用自己封装的标题栏容器组件，可以满足页面常用的顶部标题栏功能及样式的需求。
常见的标题栏

1. 返回按钮+标题
   
2. 返回按钮+标题+功能按钮
   
3. 关闭/取消按钮+标题+确认/完成按钮
   
   组件TitleContainer.ets代码如下：

@Preview
@Component
export default struct TitleContainer {
  // 返回按钮图片
  private backImg: string | Resource = $r("app.media.icon_cancel");
  // 返回按钮点击事件
  private backFunc?: () => void;
  // 标题
  private title: string | Resource = "标题";
  // 关闭按钮点击事件
  @BuilderParam closeHandle?: () => void;

  build() {
    Row() {
      // 返回按钮
      Button() {
        Image(this.backImg == null ? $r("app.media.icon_back") : this.backImg)
          .objectFit(ImageFit.Fill);
      }
      .width(24)
      .height(24)
      .backgroundColor("#00000000")
      .onClick(() => {
        this.backFunc ? this.backFunc : router.back();
      });

      // 标题
      Text(this.title)
        .fontSize(20)
        .lineHeight(28)
        .fontColor("#182431")
        .fontWeight(FontWeight.Bold)
        .margin({ left: 16 });

      // 占位
      Blank()

      if (this.closeHandle) {
        this.closeHandle();
      }
    }
    .width("100%")
    .height(56)
    .padding({
      left: 24,
      right: 24
    })
  }
}

使用组件的页面Home.ets代码如下：

@Entry
@Component
struct Home {
  @State message: string = '主页面'
  build() {
    Row() {
      Column() {
        TitleContainer({
          title: "Hello World",
          closeHandle: () => {
          } })
          .backgroundColor(Color.White)
        Text(this.message)
          .fontSize(50)
          .fontWeight(FontWeight.Bold)
          .fontColor(Color.White)
          .margin({ top: 50 })
      }
      .width('100%')
    }
    .height('100%')
    .alignItems(VerticalAlign.Top)
    .backgroundColor(Color.Gray)
  }
}

预览效果如下：
组件预览

使用组件的页面预览