HarmonyOS自定义标题栏

多喜乐长安宁

已于 2024-01-05 11:25:31 修改

阅读量763

点赞数 9

分类专栏： HarmonyOS 文章标签： harmonyos

于 2024-01-03 15:24:14 首次发布

本文链接：https://blog.csdn.net/qq_57952018/article/details/135364945

版权

HarmonyOS 专栏收录该内容

11 篇文章 5 订阅

订阅专栏

1、封装

在pages文件夹下新建文件夹Components 创建Header.ets

@Component
export struct TitleBar {
  @Link model: TitleBar.Model;
  @BuilderParam customLeftView?: () => any = undefined;
  @BuilderParam customCenterView?: () => any = undefined;
  @BuilderParam customRightView?: () => any = undefined;

  private multipleTitleSwiperController: SwiperController = new SwiperController();
  private multipleTitleDataSource: TitleBar.MultipleTitleDataSource = new TitleBar.MultipleTitleDataSource(this.model.multipleTitleList);

  /**
   * 标题栏两边普通布局
   * @param type
   */
  @Builder normalBothSidesLayout(type: TitleBar.BothSidesLayoutType) {
    Row() {
      // 图标在上方 文字在下方
      if (this.model.leftIconGravity == TitleBar.IconGravity.TOP) {
        Column({
          space: type == TitleBar.BothSidesLayoutType.LEFT ? this.model.leftTitleSpace : this.model.rightTitleSpace
        }) {
          if ((type == TitleBar.BothSidesLayoutType.LEFT && this.model.leftIcon)
          || (type == TitleBar.BothSidesLayoutType.RIGHT && this.model.rightIcon)) {
            Image(type == TitleBar.BothSidesLayoutType.LEFT ? this.model.leftIcon : this.model.rightIcon)
              .objectFit(ImageFit.Auto)
              .width(type == TitleBar.BothSidesLayoutType.LEFT ? this.model.leftIconWidth : this.model.rightIconWidth)
              .height(type == TitleBar.BothSidesLayoutType.LEFT ? this.model.leftIconHeight : this.model.rightIconHeight)
              .padding(type == TitleBar.BothSidesLayoutType.LEFT ? this.model.leftIconPadding : this.model.rightIconPadding)
          }
          Text(type == TitleBar.BothSidesLayoutType.LEFT ? this.model.leftTitleName : this.model.rightTitleName)
            .maxLines(1)
            .fontSize(type == TitleBar.BothSidesLayoutType.LEFT ? this.model.leftTitleFontSize : this.model.rightTitleFontSize)
            .fontWeight(type == TitleBar.BothSidesLayoutType.LEFT ? this.model.leftTitleFontWeight : this.model.rightTitleFontWeight)
            .fontColor(type == TitleBar.BothSidesLayoutType.LEFT ? this.model.leftTitleFontColor : this.model.rightTitleFontColor)
        }
      }
      // 图标在下方 文字在上方
      else if (this.model.leftIconGravity == TitleBar.IconGravity.BOTTOM) {
        Column({
          space: type == TitleBar.BothSidesLayoutType.LEFT ? this.model.leftTitleSpace : this.model.rightTitleSpace
        }) {
          Text(type == TitleBar.BothSidesLayoutType.LEFT ? this.model.leftTitleName : this.model.rightTitleName)
            .maxLines(1)
            .fontSize(type == TitleBar.BothSidesLayoutType.LEFT ? this.model.leftTitleFontSize : this.model.rightTitleFontSize)
            .fontWeight(type == TitleBar.BothSidesLayoutType.LEFT ? this.model.leftTitleFontWeight : this.model.rightTitleFontWeight)
            .fontColor(type == TitleBar.BothSidesLayoutType.LEFT ? this.model.leftTitleFontColor : this.model.rightTitleFontColor)
          if ((type == TitleBar.BothSidesLayoutType.LEFT && this.model.leftIcon)
          || (type == TitleBar.BothSidesLayoutType.RIGHT && this.model.rightIcon)) {
            Image(type == TitleBar.BothSidesLayoutType.LEFT ? this.model.leftIcon : this.model.rightIcon)
              .objectFit(ImageFit.Auto)
              .width(type == TitleBar.BothSidesLayoutType.LEFT ? this.model.leftIconWidth : this.model.rightIconWidth)
              .height(type == TitleBar.BothSidesLayoutType.LEFT ? this.model.leftIconHeight : this.model.rightIconHeight)
              .padding(type == TitleBar.BothSidesLayoutType.LEFT ? this.model.leftIconPadding : this.model.rightIconPadding)
          }
        }
      }
      // 图标在左方 文字在右方
      else if (this.model.leftIconGravity == TitleBar.IconGravity.LEFT) {
        Row({
          space: type == TitleBar.BothSidesLayoutType.LEFT ? this.model.leftTitleSpace : this.model.rightTitleSpace
        }) {
          if ((type == TitleBar.BothSidesLayoutType.LEFT && this.model.leftIcon)
          || (type == TitleBar.BothSidesLayoutType.RIGHT && this.model.rightIcon)) {
            Image(type == TitleBar.BothSidesLayoutType.LEFT ? this.model.leftIcon : this.model.rightIcon)
              .objectFit(ImageFit.Auto)
              .width(type == TitleBar.BothSidesLayoutType.LEFT ? this.model.leftIconWidth : this.model.rightIconWidth)
              .height(type == TitleBar.BothSidesLayoutType.LEFT ? this.model.leftIconHeight : this.model.rightIconHeight)
              .padding(type == TitleBar.BothSidesLayoutType.LEFT ? this.model.leftIconPadding : this.model.rightIconPadding)
          }
          Text(type == TitleBar.BothSidesLayoutType.LEFT ? this.model.leftTitleName : this.model.rightTitleName)
            .maxLines(1)
            .fontSize(type == TitleBar.BothSidesLayoutType.LEFT ? this.model.leftTitleFontSize : this.model.rightTitleFontSize)
            .fontWeight(type == TitleBar.BothSidesLayoutType.LEFT ? this.model.leftTitleFontWeight : this.model.rightTitleFontWeight)
            .fontColor(type == TitleBar.BothSidesLayoutType.LEFT ? this.model.leftTitleFontColor : this.model.rightTitleFontColor)
        }
      }
      // 图标右方 文字在左方
      else if (this.model.leftIconGravity == TitleBar.IconGravity.RIGHT) {
        Row({
          space: type == TitleBar.BothSidesLayoutType.LEFT ? this.model.leftTitleSpace : this.model.rightTitleSpace
        }) {
          Text(type == TitleBar.BothSidesLayoutType.LEFT ? this.model.leftTitleName : this.model.rightTitleName)
            .maxLines(1)
            .fontSize(type == TitleBar.BothSidesLayoutType.LEFT ? this.model.leftTitleFontSize : this.model.rightTitleFontSize)
            .fontWeight(type == TitleBar.BothSidesLayoutType.LEFT ? this.model.leftTitleFontWeight : this.model.rightTitleFontWeight)
            .fontColor(type == TitleBar.BothSidesLayoutType.LEFT ? this.model.leftTitleFontColor : this.model.rightTitleFontColor)
          if ((type == TitleBar.BothSidesLayoutType.LEFT && this.model.leftIcon)
          || (type == TitleBar.BothSidesLayoutType.RIGHT && this.model.rightIcon)) {
            Image(type == TitleBar.BothSidesLayoutType.LEFT ? this.model.leftIcon : this.model.rightIcon)
              .objectFit(ImageFit.Auto)
              .width(type == TitleBar.BothSidesLayoutType.LEFT ? this.model.leftIconWidth : this.model.rightIconWidth)
              .height(type == TitleBar.BothSidesLayoutType.LEFT ? this.model.leftIconHeight : this.model.rightIconHeight)
              .padding(type == TitleBar.BothSidesLayoutType.LEFT ? this.model.leftIconPadding : this.model.rightIconPadding)
          }
        }
      }
    }
    .justifyContent(FlexAlign.Center)
    .alignItems(VerticalAlign.Center)
    .constraintSize({
      minWidth: this.model.titleBarMinHeight,
      minHeight: this.model.titleBarMinHeight,
    })
    .padding(this.model.titleBarNormalPadding)
    .stateStyles({
      normal: {
        .backgroundColor(type == TitleBar.BothSidesLayoutType.LEFT ? this.model.leftTitleStateNormalStyleColor : this.model.rightTitleStateNormalStyleColor)
      },
      pressed: {
        .backgroundColor(type == TitleBar.BothSidesLayoutType.LEFT ? this.model.leftTitleStatePressedStyleColor : this.model.rightTitleStatePressedStyleColor)
      }
    })
    .onClick(() => {
        type == TitleBar.BothSidesLayoutType.LEFT ? this.model.onLeftClickListener() : this.model.onRightClickListener();
    })
  }

  /**
   * 标题布局
   */
  @Builder normalCenterLayout() {
    Column({ space: this.model.titleSpace }) {
      // 主标题
      // 跑马灯
      if (this.model.titleTextOverflowType == TitleBar.TitleTextOverflowType.MARQUEE) {
        Marquee({
          start: true,
          src: this.model.titleName
        })
          .fontSize(this.model.titleFontSize)
          .fontColor(this.model.titleFontColor)
          .fontWeight(this.model.titleFontWeight)
      }
      // 垂直跑马灯多文本动态显示效果
      else if (this.model.titleTextOverflowType == TitleBar.TitleTextOverflowType.MULTIPLE) {
        Swiper(this.multipleTitleSwiperController) {
          LazyForEach(this.multipleTitleDataSource, (item: string) => {
            Text(item)
              .maxLines(1)
              .textAlign(this.model.multipleTitleTextAlign)
              .fontSize(this.model.multipleTitleFontSize)
              .fontColor(this.model.multipleTitleFontColor)
              .fontWeight(this.model.multipleTitleFontWeight)
              .textOverflow({ overflow: this.textOverflowConvert(this.model.multipleTitleTextOverflowType) })
              .fontStyle(this.model.multipleTitleTextStyle)
              .width('100%')
          }, item => item)
        }
        .autoPlay(true)
        .interval(this.model.multipleTitlePlayInterval)
        .indicator(false)
        .loop(true)
        .duration(this.model.multipleTitlePlayDuration)
        .itemSpace(this.model.multipleTitlePlayItemSpace)
        .vertical(true)
        .curve(Curve.Linear)
      }
      // 普通文本
      else {
        Text(this.model.titleName)
          .maxLines(1)
          .fontSize(this.model.titleFontSize)
          .fontColor(this.model.titleFontColor)
          .fontWeight(this.model.titleFontWeight)
          .textOverflow({ overflow: this.textOverflowConvert(this.model.titleTextOverflowType) })
          .fontStyle(this.model.titleTextStyle)
      }
      // 副标题
      if (this.model.subTitleName.length != 0) {
        if (this.model.subTitleTextOverflowType == TitleBar.TitleTextOverflowType.MARQUEE) {
          Marquee({
            start: true,
            src: this.model.subTitleName
          })
            .fontSize(this.model.subTitleFontSize)
            .fontColor(this.model.subTitleFontColor)
            .fontWeight(this.model.subTitleFontWeight)
        } else {
          Text(this.model.subTitleName)
            .maxLines(1)
            .fontSize(this.model.subTitleFontSize)
            .fontColor(this.model.subTitleFontColor)
            .fontWeight(this.model.subTitleFontWeight)
            .textOverflow({ overflow: this.textOverflowConvert(this.model.subTitleTextOverflowType) })
            .fontStyle(this.model.subTitleTextStyle)
        }
      }
    }
    .padding(this.model.titleBarNormalPadding)
    .layoutWeight(1)
    .onClick(() => {
      this.model.onTitleClickListener();
    })
  }

  @Builder blankLayout() {
    Row() {
      Blank()
    }
    .constraintSize({
      minWidth: this.model.titleBarMinHeight,
      minHeight: this.model.titleBarMinHeight,
    })
  }

  textOverflowConvert(type: TitleBar.TitleTextOverflowType): TextOverflow {
    if (type == TitleBar.TitleTextOverflowType.NONE) {
      return TextOverflow.None;
    } else if (type == TitleBar.TitleTextOverflowType.CLIP) {
      return TextOverflow.Clip;
    } else if (type == TitleBar.TitleTextOverflowType.ELLIPSIS) {
      return TextOverflow.Ellipsis;
    } else {
      return TextOverflow.None;
    }
  }

  aboutToAppear() {
    this.model.showLeftSideLayout = !(this.model.leftTitleName.length == 0 && this.model.leftIcon == null);
    this.model.showRightSideLayout = !(this.model.rightTitleName.length == 0 && this.model.rightIcon == null);
  }

  build() {
    Row() {
      // 左边布局
      if (this.customLeftView) {
        this.customLeftView()
      } else {
        if (this.model.showLeftSideLayout) {
          this.normalBothSidesLayout(TitleBar.BothSidesLayoutType.LEFT)
        } else {
          this.blankLayout()
        }
      }

      // 中间布局
      if (this.customCenterView) {
        this.customCenterView()
      } else {
        this.normalCenterLayout()
      }

      // 右边布局
      if (this.customRightView) {
        this.customRightView()
      } else {
        if (this.model.showRightSideLayout) {
          this.normalBothSidesLayout(TitleBar.BothSidesLayoutType.RIGHT)
        } else {
          this.blankLayout()
        }
      }
    }
    .alignItems(VerticalAlign.Center)
    .backgroundColor(this.model.titleBarBackground)
    .width('100%')
    .constraintSize({
      minHeight: this.model.titleBarMinHeight,
    })
    .border({
      width: {
        bottom: this.model.titleBarBottomLineHeight
      },
      color: {
        bottom: this.model.titleBarBottomLineColor
      }
    })
    .linearGradient(this.model.titleBarLinearGradient)
  }
}

export namespace TitleBar {


/**
 * 标题栏样式
 */
  export enum BarStyle {
    // 日间主题样式
    LIGHT = 1,
    // 夜间主题样式
    NIGHT = 2,
    // 透明主题样式实现
    TRANSPARENT = 3,
    // 渐变色样式实现
    LINEARGRADIENT = 4,
  }

  /**
   * 标题文本超长时处理显示策略
   */
  export enum TitleTextOverflowType {
    // 文本超长时不进行裁剪。
    NONE = 0,
    // 文本超长时显示不下的文本用省略号代替。
    ELLIPSIS = 1,
    // 文本超长时进行裁剪显示。
    CLIP = 2,
    // 文本超长时跑马灯显示
    MARQUEE = 3,
    // 垂直跑马灯多文本动态显示效果
    MULTIPLE = 4,
  }

  /**
   * 左右两边的操作布局类型 左 右
   */
  export enum BothSidesLayoutType {
    LEFT = 1,
    RIGHT = 2,
  }

  /**
   * 左右图标位置 上 下 左 右
   */
  export enum IconGravity {
    TOP = 1,
    BOTTOM = 2,
    LEFT = 3,
    RIGHT = 4,
  }

  export class Model {

    // 标题栏 Padding
    titleBarNormalPadding: number | Resource = 5;
    // 标题栏最小高度
    titleBarMinHeight: number | Resource = 55;
    // 标题栏样式
    titleBarStyle: BarStyle = BarStyle.LIGHT;
    // 标题栏背景色
    titleBarBackground: ResourceColor = Color.White;
    // 标题栏底部线条颜色
    titleBarBottomLineColor: ResourceColor = 0xFFECECEC;
    // 标题栏底部线条高度
    titleBarBottomLineHeight:  number | Resource = 0.35;
    // 标题栏渐变色
    titleBarLinearGradient: any = null;
    /***************************************************************
     * 中间标题
     ***************************************************************/
    // 布局项间距
    titleSpace: string | number = 2;
    // 标题名称
    titleName: string = "";
    // 标题颜色
    titleFontColor: ResourceColor = Color.Black;
    // 标题大小
    titleFontSize: number | string | Resource = 18;
    // 标题文字粗细
    titleFontWeight: number | FontWeight | string = FontWeight.Normal;
    // 标题文本超长时处理显示策略
    titleTextOverflowType: TitleTextOverflowType = TitleTextOverflowType.ELLIPSIS;
    // 字体样式设置 Normal 标准 Italic 斜体
    titleTextStyle: FontStyle = FontStyle.Normal;

    // 子标题名称
    subTitleName: string = "";
    // 子标题颜色
    subTitleFontColor: ResourceColor = Color.Black;
    // 子标题大小
    subTitleFontSize: number | string | Resource = 12;
    // 子标题文字粗细
    subTitleFontWeight: number | FontWeight | string = FontWeight.Normal;
    // 子标题文本超长时处理显示策略
    subTitleTextOverflowType: TitleTextOverflowType = TitleTextOverflowType.ELLIPSIS;
    // 子标题字体样式设置 Normal 标准 Italic 斜体
    subTitleTextStyle: FontStyle = FontStyle.Normal;


    // 标题栏点击回调
    onTitleClickListener: () => void = () => {
    };
    /***************************************************************
     * 垂直跑马灯多文本动态显示效果
     ***************************************************************/
    multipleTitleList: string[] = [''];
    // 垂直跑马灯多文本动态显示标题颜色
    multipleTitleFontColor: ResourceColor = Color.Black;
    // 垂直跑马灯多文本动态显示标题大小
    multipleTitleFontSize: number | string | Resource = 18;
    // 垂直跑马灯多文本动态显示标题文字粗细
    multipleTitleFontWeight: number | FontWeight | string = FontWeight.Normal;
    // 垂直跑马灯多文本动态显示标题文本超长时处理显示策略
    multipleTitleTextOverflowType: TitleTextOverflowType = TitleTextOverflowType.ELLIPSIS;
    // 垂直跑马灯多文本动态显示字体样式设置 Normal 标准 Italic 斜体
    multipleTitleTextStyle: FontStyle = FontStyle.Normal;
    // 垂直跑马灯多文本动态显示文字显示位置
    multipleTitleTextAlign: TextAlign = TextAlign.Start;
    // 垂直跑马灯多文本动态显示文字播放 Interval 间隔
    multipleTitlePlayInterval: number = 2000;
    // 垂直跑马灯多文本动态显示文字播放 Duration
    multipleTitlePlayDuration: number = 2000;
    // 垂直跑马灯多文本动态显示文字播放 ItemSpace
    multipleTitlePlayItemSpace: number = 5;
    /***************************************************************
     * 左边按钮
     ***************************************************************/
    // 左边布局项间距
    leftTitleSpace: string | number = 2;
    // 左边标题多态样式 Normal
    leftTitleStateNormalStyleColor: ResourceColor = Color.White;
    // 左边标题多态样式 Pressed
    leftTitleStatePressedStyleColor: ResourceColor = Color.Grey;
    // 显示左边布局
    showLeftSideLayout: boolean = true;
    // 左边背景色
    leftTitleBackground: ResourceColor = Color.White;

    // 左边按钮标题名称
    leftTitleName: string = "";
    // 左边按钮标题颜色
    leftTitleFontColor: ResourceColor = Color.Black;
    // 左边按钮标题文字大小
    leftTitleFontSize: number | string | Resource = 16;
    // 左边按钮标题文字粗细
    leftTitleFontWeight: number | FontWeight | string = FontWeight.Normal;

    // 左边按钮图标
    leftIcon: string | PixelMap | Resource = $r('app.media.left_back_black');
    // 左边按钮图标宽度
    leftIconWidth: number | string | Resource = 20;
    // 左边按钮图标高度
    leftIconHeight: number | string | Resource = 20;
    // 左边按钮图标 Padding
    leftIconPadding: Padding | Length = 0;
    // 左边按钮图标位置
    leftIconGravity: IconGravity = IconGravity.LEFT;

    // 左边点击回调
    onLeftClickListener: () => void = () => {
    };
    /***************************************************************
     * 右边按钮
     ***************************************************************/
    // 右边布局项间距
    rightTitleSpace: string | number = 2;
    // 右边标题多态样式 Normal
    rightTitleStateNormalStyleColor: ResourceColor = Color.White;
    // 右边标题多态样式 Pressed
    rightTitleStatePressedStyleColor: ResourceColor = Color.Grey;
    // 显示右边布局
    showRightSideLayout: boolean = true;
    // 右边背景色
    rightTitleBackground: ResourceColor = Color.White;

    // 右边按钮标题名称
    rightTitleName: string = "";
    // 右边按钮标题颜色
    rightTitleFontColor: ResourceColor = Color.Black;
    // 右边按钮标题文字大小
    rightTitleFontSize: number | string | Resource = 16;
    // 右边按钮标题文字粗细
    rightTitleFontWeight: number | FontWeight | string = FontWeight.Normal;

    // 右边按钮图标
    rightIcon: string | PixelMap | Resource = null;
    // 右边按钮图标宽度
    rightIconWidth: number | string | Resource = 20;
    // 右边按钮图标高度
    rightIconHeight: number | string | Resource = 20;
    // 右边按钮图标 Padding
    rightIconPadding: Padding | Length = 0;
    // 右边按钮图标位置
    rightIconGravity: IconGravity = IconGravity.LEFT;

    // 右边点击回调
    onRightClickListener: () => void = () => {
    };

    constructor() {
      this.barStyleTransform(BarStyle.LIGHT);
    }

    setTitleBarNormalPadding(value: number | Resource): Model {
      this.titleBarNormalPadding = value;
      return this;
    }

    setTitleBarMinHeight(value: number | Resource): Model {
      this.titleBarMinHeight = value;
      return this;
    }

    setTitleBarStyle(value: BarStyle): Model {
      this.titleBarStyle = value;
      this.barStyleTransform(value);
      return this;
    }

    setTitleBarBackground(value: ResourceColor): Model {
      this.titleBarBackground = value;
      return this;
    }

    setTitleBarBottomLineHeight(value: number | Resource): Model {
      this.titleBarBottomLineHeight = value;
      return this;
    }

    setTitleBarBottomLineColor(value: ResourceColor): Model {
      this.titleBarBottomLineColor = value;
      return this;
    }

    setShowTitleBarBottomLine(value: boolean): Model {
      this.titleBarBottomLineHeight = value ? 0.35 : 0;
      return this;
    }

    setTitleBarLinearGradient(value: any): Model {
      this.titleBarLinearGradient = value;
      return this;
    }
    /***************************************************************
     * 中间标题
     ***************************************************************/
    setTitleSpace(value: string | number): Model {
      this.titleSpace = value;
      return this;
    }

    setTitleName(value: string): Model {
      this.titleName = value;
      return this;
    }

    setTitleFontColor(value: ResourceColor): Model {
      this.titleFontColor = value;
      return this;
    }

    setTitleFontSize(value: number | string | Resource): Model {
      this.titleFontSize = value;
      return this;
    }

    setTitleFontWeight(value: number | FontWeight | string): Model {
      this.titleFontWeight = value;
      return this;
    }

    setTitleTextOverflowType(value: TitleTextOverflowType): Model {
      this.titleTextOverflowType = value;
      return this;
    }

    setTitleTextStyle(value: FontStyle): Model {
      this.titleTextStyle = value;
      return this;
    }

    setSubTitleName(value: string): Model {
      this.subTitleName = value;
      return this;
    }

    setSubTitleFontColor(value: ResourceColor): Model {
      this.subTitleFontColor = value;
      return this;
    }

    setSubTitleFontSize(value: number | string | Resource): Model {
      this.subTitleFontSize = value;
      return this;
    }

    setSubTitleFontWeight(value: number | FontWeight | string): Model {
      this.subTitleFontWeight = value;
      return this;
    }

    setSubTitleTextOverflowType(value: TitleTextOverflowType): Model {
      this.subTitleTextOverflowType = value;
      return this;
    }

    setSubTitleTextStyle(value: FontStyle): Model {
      this.subTitleTextStyle = value;
      return this;
    }

    setOnTitleClickListener(callback: () => void): Model {
      this.onTitleClickListener = callback
      return this
    }
    /***************************************************************
     * 垂直跑马灯多文本动态显示效果
     ***************************************************************/
    setMultipleTitleList(value: string[]): Model {
      this.multipleTitleList = value;
      return this;
    }

    setMultipleTitleFontColor(value: ResourceColor): Model {
      this.multipleTitleFontColor = value;
      return this;
    }

    setMultipleTitleFontSize(value:  number | string | Resource): Model {
      this.multipleTitleFontSize = value;
      return this;
    }

    setMultipleTitleFontWeight(value: number | FontWeight | string): Model {
      this.multipleTitleFontWeight = value;
      return this;
    }

    setMultipleTitleTextOverflowType(value: TitleTextOverflowType): Model {
      this.multipleTitleTextOverflowType = value;
      return this;
    }

    setMultipleTitleTextStyle(value: FontStyle): Model {
      this.multipleTitleTextStyle = value;
      return this;
    }

    setMultipleTitleTextAlign(value: TextAlign): Model {
      this.multipleTitleTextAlign = value;
      return this;
    }

    setMultipleTitlePlayInterval(value: number): Model {
      this.multipleTitlePlayInterval = value;
      return this;
    }

    setMultipleTitlePlayDuration(value: number): Model {
      this.multipleTitlePlayDuration = value;
      return this;
    }

    setMultipleTitlePlayItemSpace(value: number): Model {
      this.multipleTitlePlayItemSpace = value;
      return this;
    }
    /***************************************************************
     * 左边按钮
     ***************************************************************/
    setLeftTitleStateNormalStyleColor(value: ResourceColor): Model {
      this.leftTitleStateNormalStyleColor = value;
      return this;
    }

    setLeftTitleStatePressedStyleColor(value: ResourceColor): Model {
      this.leftTitleStatePressedStyleColor = value;
      return this;
    }

    setLeftTitleSpace(value: string | number): Model {
      this.leftTitleSpace = value;
      return this;
    }

    setShowLeftSideLayout(value: boolean): Model {
      this.showLeftSideLayout = value;
      return this;
    }

    setLeftTitleName(value: string): Model {
      this.leftTitleName = value;
      return this;
    }

    setLeftTitleFontColor(value: ResourceColor): Model {
      this.leftTitleFontColor = value;
      return this;
    }

    setLeftTitleFontSize(value: number | string | Resource): Model {
      this.leftTitleFontSize = value;
      return this;
    }

    setLeftTitleFontWeight(value: number | FontWeight | string): Model {
      this.leftTitleFontWeight = value;
      return this;
    }

    setLeftIcon(value: string | PixelMap | Resource): Model {
      this.leftIcon = value;
      return this;
    }

    setLeftIconWidth(value: number | string | Resource): Model {
      this.leftIconWidth = value;
      return this;
    }

    setLeftIconHeight(value: number | string | Resource): Model {
      this.leftIconHeight = value;
      return this;
    }

    setLeftIconPadding(value: Padding | Length): Model {
      this.leftIconPadding = value;
      return this;
    }

    setLeftIconGravity(value: IconGravity): Model {
      this.leftIconGravity = value;
      return this;
    }

    setOnLeftClickListener(callback: () => void): Model {
      this.onLeftClickListener = callback
      return this
    }

    setLeftTitleBackground(value: ResourceColor): Model {
      this.leftTitleBackground = value;
      return this;
    }

    /***************************************************************
     * 右边按钮
     ***************************************************************/
    setRightTitleStateNormalStyleColor(value: ResourceColor): Model {
      this.rightTitleStateNormalStyleColor = value;
      return this;
    }

    setRightTitleStatePressedStyleColor(value: ResourceColor): Model {
      this.rightTitleStatePressedStyleColor = value;
      return this;
    }

    setRightTitleSpace(value: string | number): Model {
      this.rightTitleSpace = value;
      return this;
    }

    setShowRightSideLayout(value: boolean): Model {
      this.showRightSideLayout = value;
      return this;
    }

    setRightTitleName(value: string): Model {
      this.rightTitleName = value;
      return this;
    }

    setRightTitleFontColor(value: ResourceColor): Model {
      this.rightTitleFontColor = value;
      return this;
    }

    setRightTitleFontSize(value: number | string | Resource): Model {
      this.rightTitleFontSize = value;
      return this;
    }

    setRightTitleFontWeight(value: number | FontWeight | string): Model {
      this.rightTitleFontWeight = value;
      return this;
    }

    setRightIcon(value: string | PixelMap | Resource): Model {
      this.rightIcon = value;
      return this;
    }

    setRightIconWidth(value: number | string | Resource): Model {
      this.rightIconWidth = value;
      return this;
    }

    setRightIconHeight(value: number | string | Resource): Model {
      this.rightIconHeight = value;
      return this;
    }

    setRightIconPadding(value: Padding | Length): Model {
      this.rightIconPadding = value;
      return this;
    }

    setRightIconGravity(value: IconGravity): Model {
      this.rightIconGravity = value;
      return this;
    }

    setOnRightClickListener(callback: () => void): Model {
      this.onRightClickListener = callback
      return this
    }

    setRightTitleBackground(value: ResourceColor): Model {
      this.rightTitleBackground = value;
      return this;
    }

    /**
     * 标题样式转换
     * @param value
     */
    private barStyleTransform(value: BarStyle) {
      switch (value) {
        case TitleBar.BarStyle.LIGHT:
          this.setTitleBarBackground(0xFFFFFFFF);
          this.setTitleFontColor(0xFF222222);

          this.setLeftTitleStateNormalStyleColor(0xFFFFFFFF);
          this.setLeftTitleStatePressedStyleColor(0x0C000000);
          this.setLeftIcon($r('app.media.left_back_black'));
          this.setLeftTitleFontColor(0xFF666666);

          this.setRightTitleStateNormalStyleColor(0xFFFFFFFF);
          this.setRightTitleStatePressedStyleColor(0x0C000000);
          this.setRightTitleFontColor(0xFFA4A4A4);
          break;
        case TitleBar.BarStyle.NIGHT:
          this.setTitleBarBackground(0xFF000000);
          this.setTitleFontColor(0xEEFFFFFF);

          this.setLeftTitleStateNormalStyleColor(0x00000000);
          this.setLeftTitleStatePressedStyleColor(0x66FFFFFF);
          this.setLeftIcon($r('app.media.left_back_white'));
          this.setLeftTitleFontColor(0xCCFFFFFF);

          this.setRightTitleStateNormalStyleColor(0x00000000);
          this.setRightTitleStatePressedStyleColor(0x66FFFFFF);
          this.setRightTitleFontColor(0xCCFFFFFF);
          break;
        case TitleBar.BarStyle.TRANSPARENT:
          this.setTitleBarBackground(Color.Transparent);
          this.setTitleFontColor(0xFFFFFFFF);

          this.setLeftTitleStateNormalStyleColor(Color.Transparent);
          this.setLeftTitleStatePressedStyleColor(0x22000000);
          this.setLeftIcon(null);
          this.setLeftTitleFontColor(0xFFFFFFFF);

          this.setRightTitleStateNormalStyleColor(Color.Transparent);
          this.setRightTitleStatePressedStyleColor(0x22000000);
          this.setRightTitleFontColor(0xFFFFFFFF);
          break;
        case TitleBar.BarStyle.LINEARGRADIENT:
          this.setTitleBarBackground(Color.Transparent);
          this.setTitleFontColor(0xFFFFFFFF);

          this.setLeftTitleStateNormalStyleColor(Color.Transparent);
          this.setLeftTitleStatePressedStyleColor(0x22000000);
          this.setLeftIcon(null);
          this.setLeftTitleFontColor(0xFFFFFFFF);

          this.setRightTitleStateNormalStyleColor(Color.Transparent);
          this.setRightTitleStatePressedStyleColor(0x22000000);
          this.setRightTitleFontColor(0xFFFFFFFF);
          break;
        default:
          break;
      }
    }
  }

  export class MultipleTitleDataSource implements IDataSource {
    private multipleTitleList: string[] = [];
    private listener: DataChangeListener;

    constructor(list: string[]) {
      this.multipleTitleList = list;
    }

    totalCount(): number {
      return this.multipleTitleList.length;
    }

    getData(index: number): any {
      return this.multipleTitleList[index];
    }

    registerDataChangeListener(listener: DataChangeListener): void {
      this.listener = listener;
    }

    unregisterDataChangeListener() {
      this.listener = null;
    }
  }
}

export default TitleBar

2、使用

import { TitleBar } from '../Components/Header'

@State model1: TitleBar.Model = new TitleBar.Model()
    .setOnLeftClickListener(() => {
      router.back()
    })
    .setLeftTitleName("返回")
    .setTitleName("咨询订单")
build() {
    TitleBar({ model: $model1 })
}