华为鸿蒙应用--封装通用标题栏：CommonTitleBar（鸿蒙工具）-ArkTs

注：该版本为API9，最新Next版本在这里：Harmony Next -- 通用标题栏：高度自定义，可设置沉浸式状态，正常状态下为：左侧返回、居中标题，左中右均可自定义视图。_鸿蒙 navdestination 标题居中-CSDN博客

0、效果图

自定义通用标题栏

支持左、中、右常规标题栏设置；

支持自定义视图；

支持搜索功能

一、CommTitleBar代码

import router from '@ohos.router';
import { Constants } from '../../constants/Constants';
import { StyleConstants } from '../../constants/StyleConstants'
import { toast } from '../../utils/ToastUtils';

@Component
export struct CommonTitleBar {
  @State titleBarHeight: number = 50; // 标题栏高度
  @State showBottomLine: boolean = true; //  是否显示标题栏底部的分割线
  titleBarColor: ResourceColor = '#f5f5f5'; // 标题栏颜色
  bottomLineColor: ResourceColor = "#DDDDDD"; // 标题栏分割线颜色

  @State leftType: number = Constants.TYPE_LEFT_IMAGE_VIEW; // 左侧视图类型：无|文字|按钮|自定义视图，默认显示返回按钮
  @State leftText: string = '左侧文字'; // 左侧文字leftType= textView有效
  @State leftMargin: number | string = 12; // 左侧间距
  leftTextColor: ResourceColor = "#000000"; // 左侧文字颜色
  @State leftTextSize: number | string = 16; // 左侧文字大小
  leftImageResource: string | PixelMap | Resource = $r('app.media.img_back_black'); // 左侧返回图片
  @BuilderParam leftCustomView: () => void = null; // 左侧自定义View
  onClickLeftText?: () => void; // 左侧文字点击事件
  onClickLeftImage?: () => void; // 左侧图片点击事件

  @State rightType: number = Constants.TYPE_RIGHT_NONE; // 右侧视图类型：无|文字|按钮|自定义视图，默认无视图
  @State rightText: string = '右侧文字'; // 右侧文字leftType= textView有效
  @State rightMargin: number | string = 12; // 右侧间距
  rightTextColor: ResourceColor = "#000000"; // 右侧文字颜色
  @State rightTextSize: number | string = 16; // 右侧文字大小
  rightImageResource: string | PixelMap | Resource = $r('app.media.img_back_black'); // 右侧图片
  @BuilderParam rightCustomView: () => void = null; // 右侧自定义View
  onClickRightText?: () => v