TTMusic/entry/src/main/ets/view/TitleBar.ets

@Component
export struct TitleBar {
  @Link model: TitleBar.Model;
  @BuilderParam customLeftView?: CustomBuilder;
  @BuilderParam customCenterView?: CustomBuilder;
  @BuilderParam customRightView?: CustomBuilder;

  private multipleTitleSwiperController: SwiperController = new SwiperController();
  private multipleTitleDataSource: TitleBar.MultipleTitleDataSource = new TitleBar.MultipleTitleDataSource(this.model.multipleTitleList);
  @State opacityItem:number = 1

  /**
   * 标题栏两边普通布局
   * @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)
              .opacity(type == TitleBar.BothSidesLayoutType.LEFT ?this.model.opacityLeft:1)
              .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)
              .opacity(type == TitleBar.BothSidesLayoutType.LEFT ?this.model.opacityLeft:1)
              .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)
              .opacity(type == TitleBar.BothSidesLayoutType.LEFT ?this.model.opacityLeft:1)
              .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)
              .opacity(type == TitleBar.BothSidesLayoutType.LEFT ?this.model.opacityLeft:1)
              .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,
    })
    .opacity(this.opacityItem)  // 绑定透明度
    .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
        })
          // .opacity(this.model.opacityLeft)
          .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: string) => 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)
            // .opacity(this.model.opacityLeft)
          .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)
    .expandSafeArea([SafeAreaType.SYSTEM], [SafeAreaEdge.TOP])
    .width('100%')
    .constraintSize({
      minHeight: this.model.titleBarMinHeight,
    })
    .border({
      width: {
        bottom: this.model.titleBarBottomLineHeight
      },
      color: {
        bottom: this.model.titleBarBottomLineColor
      }
    })
    .linearGradient({
      angle: this.model.titleBarLinearGradient.angle,
      direction: this.model.titleBarLinearGradient.direction,
      colors: this.model.titleBarLinearGradient.colors,
      repeating: this.model.titleBarLinearGradient.repeating
    })
  }
}

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 {
    opacityLeft: number = 1; // 控制透明度的状态变量
    // 标题栏 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: TitleBarLinearGradient = new TitleBarLinearGradient();
    /***************************************************************
     * 中间标题
     ***************************************************************/
    // 布局项间距
    titleSpace: string | number = 2;
    // 标题名称
    titleName: string = "";
    // 标题颜色
    titleFontColor: ResourceColor = Color.Black;
    // 标题大小
    titleFontSize: number | string | Resource = 16;
    // 标题文字粗细
    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 | null = $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.Black;
    // 右边标题多态样式 Pressed
    rightTitleStatePressedStyleColor: ResourceColor = Color.Grey;
    // 显示右边布局
    showRightSideLayout: boolean = true;
    // 右边背景色
    rightTitleBackground: ResourceColor = Color.Blue;

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

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

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

    constructor(isDark?:boolean) {
      this.barStyleTransform(isDark?BarStyle.NIGHT: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;
      console.log('Heanup: TitleBar背景色：'+JSON.stringify(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: TitleBarLinearGradient): 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 | null): Model {
      this.leftIcon = value;
      return this;
    }

    setLeftIconMain(value: string | PixelMap | Resource | null): Model {
      animateTo({ duration: 200,curve:'EaseInOut' }, () => { this.opacityLeft  = 0.4; });
      setTimeout(() => {
        this.leftIcon = value;
        animateTo({ duration: 200,curve:'EaseInOut' }, () => { this.opacityLeft  = 1; });

      }, 200);

      return this;
    }


    setLeftIconMainNoAnimate(value: string | PixelMap | Resource | null): 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 | null): 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) {

      this.setTitleBarBackground($r('app.color.title_bar_bg'));
      this.setTitleFontColor($r('app.color.title_text'));
      this.setTitleBarBottomLineColor($r('app.color.title_bar_bottom_line'));

      this.setLeftTitleStateNormalStyleColor($r('app.color.title_bar_bg'));
      this.setLeftTitleStatePressedStyleColor($r('app.color.title_bar_pressed'));
      this.setLeftIcon($r('app.media.left_back_black'));
      this.setLeftTitleFontColor($r('app.color.title_left_text'));

      this.setRightTitleStateNormalStyleColor($r('app.color.title_bar_bg'));
      this.setRightTitleStatePressedStyleColor($r('app.color.title_bar_pressed'));
      this.setRightTitleFontColor($r('app.color.title_right_text'));

    }
  }

  export class TitleBarLinearGradient {
    angle?: number | string;
    direction?: GradientDirection;
    colors?: Array<[
      ResourceColor,
      number
    ]>;
    repeating?: boolean;
  }

  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): Object {
      return this.multipleTitleList[index];
    }

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

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

export default TitleBar