devbox
你好赵伟
这个屌丝很懒，什么也没留下！
关注作者
热门标签
热门文章
当前位置:   article > 正文

HarmonyOS自定义标题栏_鸿蒙 设置 窗口 标题

作者：你好赵伟 | 2024-03-13 08:53:45

赞

踩

鸿蒙 设置 窗口 标题

1、封装

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

  1. @Component
  2. export struct TitleBar {
  3.   @Link model: TitleBar.Model;
  4.   @BuilderParam customLeftView?: () => any = undefined;
  5.   @BuilderParam customCenterView?: () => any = undefined;
  6.   @BuilderParam customRightView?: () => any = undefined;
  7.  
  8.   private multipleTitleSwiperController: SwiperController = new SwiperController();
  9.   private multipleTitleDataSource: TitleBar.MultipleTitleDataSource = new TitleBar.MultipleTitleDataSource(this.model.multipleTitleList);
  10.  
  11.   /**
  12.    * 标题栏两边普通布局
  13.    * @param type
  14.    */
  15.   @Builder normalBothSidesLayout(type: TitleBar.BothSidesLayoutType) {
  16.     Row() {
  17.       // 图标在上方 文字在下方
  18.       if (this.model.leftIconGravity == TitleBar.IconGravity.TOP) {
  19.         Column({
  20.           space: type == TitleBar.BothSidesLayoutType.LEFT ? this.model.leftTitleSpace : this.model.rightTitleSpace
  21.         }) {
  22.           if ((type == TitleBar.BothSidesLayoutType.LEFT && this.model.leftIcon)
  23.           || (type == TitleBar.BothSidesLayoutType.RIGHT && this.model.rightIcon)) {
  24.             Image(type == TitleBar.BothSidesLayoutType.LEFT ? this.model.leftIcon : this.model.rightIcon)
  25.               .objectFit(ImageFit.Auto)
  26.               .width(type == TitleBar.BothSidesLayoutType.LEFT ? this.model.leftIconWidth : this.model.rightIconWidth)
  27.               .height(type == TitleBar.BothSidesLayoutType.LEFT ? this.model.leftIconHeight : this.model.rightIconHeight)
  28.               .padding(type == TitleBar.BothSidesLayoutType.LEFT ? this.model.leftIconPadding : this.model.rightIconPadding)
  29.           }
  30.           Text(type == TitleBar.BothSidesLayoutType.LEFT ? this.model.leftTitleName : this.model.rightTitleName)
  31.             .maxLines(1)
  32.             .fontSize(type == TitleBar.BothSidesLayoutType.LEFT ? this.model.leftTitleFontSize : this.model.rightTitleFontSize)
  33.             .fontWeight(type == TitleBar.BothSidesLayoutType.LEFT ? this.model.leftTitleFontWeight : this.model.rightTitleFontWeight)
  34.             .fontColor(type == TitleBar.BothSidesLayoutType.LEFT ? this.model.leftTitleFontColor : this.model.rightTitleFontColor)
  35.         }
  36.       }
  37.       // 图标在下方 文字在上方
  38.       else if (this.model.leftIconGravity == TitleBar.IconGravity.BOTTOM) {
  39.         Column({
  40.           space: type == TitleBar.BothSidesLayoutType.LEFT ? this.model.leftTitleSpace : this.model.rightTitleSpace
  41.         }) {
  42.           Text(type == TitleBar.BothSidesLayoutType.LEFT ? this.model.leftTitleName : this.model.rightTitleName)
  43.             .maxLines(1)
  44.             .fontSize(type == TitleBar.BothSidesLayoutType.LEFT ? this.model.leftTitleFontSize : this.model.rightTitleFontSize)
  45.             .fontWeight(type == TitleBar.BothSidesLayoutType.LEFT ? this.model.leftTitleFontWeight : this.model.rightTitleFontWeight)
  46.             .fontColor(type == TitleBar.BothSidesLayoutType.LEFT ? this.model.leftTitleFontColor : this.model.rightTitleFontColor)
  47.           if ((type == TitleBar.BothSidesLayoutType.LEFT && this.model.leftIcon)
  48.           || (type == TitleBar.BothSidesLayoutType.RIGHT && this.model.rightIcon)) {
  49.             Image(type == TitleBar.BothSidesLayoutType.LEFT ? this.model.leftIcon : this.model.rightIcon)
  50.               .objectFit(ImageFit.Auto)
  51.               .width(type == TitleBar.BothSidesLayoutType.LEFT ? this.model.leftIconWidth : this.model.rightIconWidth)
  52.               .height(type == TitleBar.BothSidesLayoutType.LEFT ? this.model.leftIconHeight : this.model.rightIconHeight)
  53.               .padding(type == TitleBar.BothSidesLayoutType.LEFT ? this.model.leftIconPadding : this.model.rightIconPadding)
  54.           }
  55.         }
  56.       }
  57.       // 图标在左方 文字在右方
  58.       else if (this.model.leftIconGravity == TitleBar.IconGravity.LEFT) {
  59.         Row({
  60.           space: type == TitleBar.BothSidesLayoutType.LEFT ? this.model.leftTitleSpace : this.model.rightTitleSpace
  61.         }) {
  62.           if ((type == TitleBar.BothSidesLayoutType.LEFT && this.model.leftIcon)
  63.           || (type == TitleBar.BothSidesLayoutType.RIGHT && this.model.rightIcon)) {
  64.             Image(type == TitleBar.BothSidesLayoutType.LEFT ? this.model.leftIcon : this.model.rightIcon)
  65.               .objectFit(ImageFit.Auto)
  66.               .width(type == TitleBar.BothSidesLayoutType.LEFT ? this.model.leftIconWidth : this.model.rightIconWidth)
  67.               .height(type == TitleBar.BothSidesLayoutType.LEFT ? this.model.leftIconHeight : this.model.rightIconHeight)
  68.               .padding(type == TitleBar.BothSidesLayoutType.LEFT ? this.model.leftIconPadding : this.model.rightIconPadding)
  69.           }
  70.           Text(type == TitleBar.BothSidesLayoutType.LEFT ? this.model.leftTitleName : this.model.rightTitleName)
  71.             .maxLines(1)
  72.             .fontSize(type == TitleBar.BothSidesLayoutType.LEFT ? this.model.leftTitleFontSize : this.model.rightTitleFontSize)
  73.             .fontWeight(type == TitleBar.BothSidesLayoutType.LEFT ? this.model.leftTitleFontWeight : this.model.rightTitleFontWeight)
  74.             .fontColor(type == TitleBar.BothSidesLayoutType.LEFT ? this.model.leftTitleFontColor : this.model.rightTitleFontColor)
  75.         }
  76.       }
  77.       // 图标右方 文字在左方
  78.       else if (this.model.leftIconGravity == TitleBar.IconGravity.RIGHT) {
  79.         Row({
  80.           space: type == TitleBar.BothSidesLayoutType.LEFT ? this.model.leftTitleSpace : this.model.rightTitleSpace
  81.         }) {
  82.           Text(type == TitleBar.BothSidesLayoutType.LEFT ? this.model.leftTitleName : this.model.rightTitleName)
  83.             .maxLines(1)
  84.             .fontSize(type == TitleBar.BothSidesLayoutType.LEFT ? this.model.leftTitleFontSize : this.model.rightTitleFontSize)
  85.             .fontWeight(type == TitleBar.BothSidesLayoutType.LEFT ? this.model.leftTitleFontWeight : this.model.rightTitleFontWeight)
  86.             .fontColor(type == TitleBar.BothSidesLayoutType.LEFT ? this.model.leftTitleFontColor : this.model.rightTitleFontColor)
  87.           if ((type == TitleBar.BothSidesLayoutType.LEFT && this.model.leftIcon)
  88.           || (type == TitleBar.BothSidesLayoutType.RIGHT && this.model.rightIcon)) {
  89.             Image(type == TitleBar.BothSidesLayoutType.LEFT ? this.model.leftIcon : this.model.rightIcon)
  90.               .objectFit(ImageFit.Auto)
  91.               .width(type == TitleBar.BothSidesLayoutType.LEFT ? this.model.leftIconWidth : this.model.rightIconWidth)
  92.               .height(type == TitleBar.BothSidesLayoutType.LEFT ? this.model.leftIconHeight : this.model.rightIconHeight)
  93.               .padding(type == TitleBar.BothSidesLayoutType.LEFT ? this.model.leftIconPadding : this.model.rightIconPadding)
  94.           }
  95.         }
  96.       }
  97.     }
  98.     .justifyContent(FlexAlign.Center)
  99.     .alignItems(VerticalAlign.Center)
  100.     .constraintSize({
  101.       minWidth: this.model.titleBarMinHeight,
  102.       minHeight: this.model.titleBarMinHeight,
  103.     })
  104.     .padding(this.model.titleBarNormalPadding)
  105.     .stateStyles({
  106.       normal: {
  107.         .backgroundColor(type == TitleBar.BothSidesLayoutType.LEFT ? this.model.leftTitleStateNormalStyleColor : this.model.rightTitleStateNormalStyleColor)
  108.       },
  109.       pressed: {
  110.         .backgroundColor(type == TitleBar.BothSidesLayoutType.LEFT ? this.model.leftTitleStatePressedStyleColor : this.model.rightTitleStatePressedStyleColor)
  111.       }
  112.     })
  113.     .onClick(() => {
  114.         type == TitleBar.BothSidesLayoutType.LEFT ? this.model.onLeftClickListener() : this.model.onRightClickListener();
  115.     })
  116.   }
  117.  
  118.   /**
  119.    * 标题布局
  120.    */
  121.   @Builder normalCenterLayout() {
  122.     Column({ space: this.model.titleSpace }) {
  123.       // 主标题
  124.       // 跑马灯
  125.       if (this.model.titleTextOverflowType == TitleBar.TitleTextOverflowType.MARQUEE) {
  126.         Marquee({
  127.           start: true,
  128.           src: this.model.titleName
  129.         })
  130.           .fontSize(this.model.titleFontSize)
  131.           .fontColor(this.model.titleFontColor)
  132.           .fontWeight(this.model.titleFontWeight)
  133.       }
  134.       // 垂直跑马灯多文本动态显示效果
  135.       else if (this.model.titleTextOverflowType == TitleBar.TitleTextOverflowType.MULTIPLE) {
  136.         Swiper(this.multipleTitleSwiperController) {
  137.           LazyForEach(this.multipleTitleDataSource, (item: string) => {
  138.             Text(item)
  139.               .maxLines(1)
  140.               .textAlign(this.model.multipleTitleTextAlign)
  141.               .fontSize(this.model.multipleTitleFontSize)
  142.               .fontColor(this.model.multipleTitleFontColor)
  143.               .fontWeight(this.model.multipleTitleFontWeight)
  144.               .textOverflow({ overflow: this.textOverflowConvert(this.model.multipleTitleTextOverflowType) })
  145.               .fontStyle(this.model.multipleTitleTextStyle)
  146.               .width('100%')
  147.           }, item => item)
  148.         }
  149.         .autoPlay(true)
  150.         .interval(this.model.multipleTitlePlayInterval)
  151.         .indicator(false)
  152.         .loop(true)
  153.         .duration(this.model.multipleTitlePlayDuration)
  154.         .itemSpace(this.model.multipleTitlePlayItemSpace)
  155.         .vertical(true)
  156.         .curve(Curve.Linear)
  157.       }
  158.       // 普通文本
  159.       else {
  160.         Text(this.model.titleName)
  161.           .maxLines(1)
  162.           .fontSize(this.model.titleFontSize)
  163.           .fontColor(this.model.titleFontColor)
  164.           .fontWeight(this.model.titleFontWeight)
  165.           .textOverflow({ overflow: this.textOverflowConvert(this.model.titleTextOverflowType) })
  166.           .fontStyle(this.model.titleTextStyle)
  167.       }
  168.       // 副标题
  169.       if (this.model.subTitleName.length != 0) {
  170.         if (this.model.subTitleTextOverflowType == TitleBar.TitleTextOverflowType.MARQUEE) {
  171.           Marquee({
  172.             start: true,
  173.             src: this.model.subTitleName
  174.           })
  175.             .fontSize(this.model.subTitleFontSize)
  176.             .fontColor(this.model.subTitleFontColor)
  177.             .fontWeight(this.model.subTitleFontWeight)
  178.         } else {
  179.           Text(this.model.subTitleName)
  180.             .maxLines(1)
  181.             .fontSize(this.model.subTitleFontSize)
  182.             .fontColor(this.model.subTitleFontColor)
  183.             .fontWeight(this.model.subTitleFontWeight)
  184.             .textOverflow({ overflow: this.textOverflowConvert(this.model.subTitleTextOverflowType) })
  185.             .fontStyle(this.model.subTitleTextStyle)
  186.         }
  187.       }
  188.     }
  189.     .padding(this.model.titleBarNormalPadding)
  190.     .layoutWeight(1)
  191.     .onClick(() => {
  192.       this.model.onTitleClickListener();
  193.     })
  194.   }
  195.  
  196.   @Builder blankLayout() {
  197.     Row() {
  198.       Blank()
  199.     }
  200.     .constraintSize({
  201.       minWidth: this.model.titleBarMinHeight,
  202.       minHeight: this.model.titleBarMinHeight,
  203.     })
  204.   }
  205.  
  206.   textOverflowConvert(type: TitleBar.TitleTextOverflowType): TextOverflow {
  207.     if (type == TitleBar.TitleTextOverflowType.NONE) {
  208.       return TextOverflow.None;
  209.     } else if (type == TitleBar.TitleTextOverflowType.CLIP) {
  210.       return TextOverflow.Clip;
  211.     } else if (type == TitleBar.TitleTextOverflowType.ELLIPSIS) {
  212.       return TextOverflow.Ellipsis;
  213.     } else {
  214.       return TextOverflow.None;
  215.     }
  216.   }
  217.  
  218.   aboutToAppear() {
  219.     this.model.showLeftSideLayout = !(this.model.leftTitleName.length == 0 && this.model.leftIcon == null);
  220.     this.model.showRightSideLayout = !(this.model.rightTitleName.length == 0 && this.model.rightIcon == null);
  221.   }
  222.  
  223.   build() {
  224.     Row() {
  225.       // 左边布局
  226.       if (this.customLeftView) {
  227.         this.customLeftView()
  228.       } else {
  229.         if (this.model.showLeftSideLayout) {
  230.           this.normalBothSidesLayout(TitleBar.BothSidesLayoutType.LEFT)
  231.         } else {
  232.           this.blankLayout()
  233.         }
  234.       }
  235.  
  236.       // 中间布局
  237.       if (this.customCenterView) {
  238.         this.customCenterView()
  239.       } else {
  240.         this.normalCenterLayout()
  241.       }
  242.  
  243.       // 右边布局
  244.       if (this.customRightView) {
  245.         this.customRightView()
  246.       } else {
  247.         if (this.model.showRightSideLayout) {
  248.           this.normalBothSidesLayout(TitleBar.BothSidesLayoutType.RIGHT)
  249.         } else {
  250.           this.blankLayout()
  251.         }
  252.       }
  253.     }
  254.     .alignItems(VerticalAlign.Center)
  255.     .backgroundColor(this.model.titleBarBackground)
  256.     .width('100%')
  257.     .constraintSize({
  258.       minHeight: this.model.titleBarMinHeight,
  259.     })
  260.     .border({
  261.       width: {
  262.         bottom: this.model.titleBarBottomLineHeight
  263.       },
  264.       color: {
  265.         bottom: this.model.titleBarBottomLineColor
  266.       }
  267.     })
  268.     .linearGradient(this.model.titleBarLinearGradient)
  269.   }
  270. }
  271.  
  272. export namespace TitleBar {
  273.  
  274.  
  275. /**
  276.  * 标题栏样式
  277.  */
  278.   export enum BarStyle {
  279.     // 日间主题样式
  280.     LIGHT = 1,
  281.     // 夜间主题样式
  282.     NIGHT = 2,
  283.     // 透明主题样式实现
  284.     TRANSPARENT = 3,
  285.     // 渐变色样式实现
  286.     LINEARGRADIENT = 4,
  287.   }
  288.  
  289.   /**
  290.    * 标题文本超长时处理显示策略
  291.    */
  292.   export enum TitleTextOverflowType {
  293.     // 文本超长时不进行裁剪。
  294.     NONE = 0,
  295.     // 文本超长时显示不下的文本用省略号代替。
  296.     ELLIPSIS = 1,
  297.     // 文本超长时进行裁剪显示。
  298.     CLIP = 2,
  299.     // 文本超长时跑马灯显示
  300.     MARQUEE = 3,
  301.     // 垂直跑马灯多文本动态显示效果
  302.     MULTIPLE = 4,
  303.   }
  304.  
  305.   /**
  306.    * 左右两边的操作布局类型 左 右
  307.    */
  308.   export enum BothSidesLayoutType {
  309.     LEFT = 1,
  310.     RIGHT = 2,
  311.   }
  312.  
  313.   /**
  314.    * 左右图标位置 上 下 左 右
  315.    */
  316.   export enum IconGravity {
  317.     TOP = 1,
  318.     BOTTOM = 2,
  319.     LEFT = 3,
  320.     RIGHT = 4,
  321.   }
  322.  
  323.   export class Model {
  324.  
  325.     // 标题栏 Padding
  326.     titleBarNormalPadding: number | Resource = 5;
  327.     // 标题栏最小高度
  328.     titleBarMinHeight: number | Resource = 55;
  329.     // 标题栏样式
  330.     titleBarStyle: BarStyle = BarStyle.LIGHT;
  331.     // 标题栏背景色
  332.     titleBarBackground: ResourceColor = Color.White;
  333.     // 标题栏底部线条颜色
  334.     titleBarBottomLineColor: ResourceColor = 0xFFECECEC;
  335.     // 标题栏底部线条高度
  336.     titleBarBottomLineHeight:  number | Resource = 0.35;
  337.     // 标题栏渐变色
  338.     titleBarLinearGradient: any = null;
  339.     /***************************************************************
  340.      * 中间标题
  341.      ***************************************************************/
  342.     // 布局项间距
  343.     titleSpace: string | number = 2;
  344.     // 标题名称
  345.     titleName: string = "";
  346.     // 标题颜色
  347.     titleFontColor: ResourceColor = Color.Black;
  348.     // 标题大小
  349.     titleFontSize: number | string | Resource = 18;
  350.     // 标题文字粗细
  351.     titleFontWeight: number | FontWeight | string = FontWeight.Normal;
  352.     // 标题文本超长时处理显示策略
  353.     titleTextOverflowType: TitleTextOverflowType = TitleTextOverflowType.ELLIPSIS;
  354.     // 字体样式设置 Normal 标准 Italic 斜体
  355.     titleTextStyle: FontStyle = FontStyle.Normal;
  356.  
  357.     // 子标题名称
  358.     subTitleName: string = "";
  359.     // 子标题颜色
  360.     subTitleFontColor: ResourceColor = Color.Black;
  361.     // 子标题大小
  362.     subTitleFontSize: number | string | Resource = 12;
  363.     // 子标题文字粗细
  364.     subTitleFontWeight: number | FontWeight | string = FontWeight.Normal;
  365.     // 子标题文本超长时处理显示策略
  366.     subTitleTextOverflowType: TitleTextOverflowType = TitleTextOverflowType.ELLIPSIS;
  367.     // 子标题字体样式设置 Normal 标准 Italic 斜体
  368.     subTitleTextStyle: FontStyle = FontStyle.Normal;
  369.  
  370.  
  371.     // 标题栏点击回调
  372.     onTitleClickListener: () => void = () => {
  373.     };
  374.     /***************************************************************
  375.      * 垂直跑马灯多文本动态显示效果
  376.      ***************************************************************/
  377.     multipleTitleList: string[] = [''];
  378.     // 垂直跑马灯多文本动态显示标题颜色
  379.     multipleTitleFontColor: ResourceColor = Color.Black;
  380.     // 垂直跑马灯多文本动态显示标题大小
  381.     multipleTitleFontSize: number | string | Resource = 18;
  382.     // 垂直跑马灯多文本动态显示标题文字粗细
  383.     multipleTitleFontWeight: number | FontWeight | string = FontWeight.Normal;
  384.     // 垂直跑马灯多文本动态显示标题文本超长时处理显示策略
  385.     multipleTitleTextOverflowType: TitleTextOverflowType = TitleTextOverflowType.ELLIPSIS;
  386.     // 垂直跑马灯多文本动态显示字体样式设置 Normal 标准 Italic 斜体
  387.     multipleTitleTextStyle: FontStyle = FontStyle.Normal;
  388.     // 垂直跑马灯多文本动态显示文字显示位置
  389.     multipleTitleTextAlign: TextAlign = TextAlign.Start;
  390.     // 垂直跑马灯多文本动态显示文字播放 Interval 间隔
  391.     multipleTitlePlayInterval: number = 2000;
  392.     // 垂直跑马灯多文本动态显示文字播放 Duration
  393.     multipleTitlePlayDuration: number = 2000;
  394.     // 垂直跑马灯多文本动态显示文字播放 ItemSpace
  395.     multipleTitlePlayItemSpace: number = 5;
  396.     /***************************************************************
  397.      * 左边按钮
  398.      ***************************************************************/
  399.     // 左边布局项间距
  400.     leftTitleSpace: string | number = 2;
  401.     // 左边标题多态样式 Normal
  402.     leftTitleStateNormalStyleColor: ResourceColor = Color.White;
  403.     // 左边标题多态样式 Pressed
  404.     leftTitleStatePressedStyleColor: ResourceColor = Color.Grey;
  405.     // 显示左边布局
  406.     showLeftSideLayout: boolean = true;
  407.     // 左边背景色
  408.     leftTitleBackground: ResourceColor = Color.White;
  409.  
  410.     // 左边按钮标题名称
  411.     leftTitleName: string = "";
  412.     // 左边按钮标题颜色
  413.     leftTitleFontColor: ResourceColor = Color.Black;
  414.     // 左边按钮标题文字大小
  415.     leftTitleFontSize: number | string | Resource = 16;
  416.     // 左边按钮标题文字粗细
  417.     leftTitleFontWeight: number | FontWeight | string = FontWeight.Normal;
  418.  
  419.     // 左边按钮图标
  420.     leftIcon: string | PixelMap | Resource = $r('app.media.left_back_black');
  421.     // 左边按钮图标宽度
  422.     leftIconWidth: number | string | Resource = 20;
  423.     // 左边按钮图标高度
  424.     leftIconHeight: number | string | Resource = 20;
  425.     // 左边按钮图标 Padding
  426.     leftIconPadding: Padding | Length = 0;
  427.     // 左边按钮图标位置
  428.     leftIconGravity: IconGravity = IconGravity.LEFT;
  429.  
  430.     // 左边点击回调
  431.     onLeftClickListener: () => void = () => {
  432.     };
  433.     /***************************************************************
  434.      * 右边按钮
  435.      ***************************************************************/
  436.     // 右边布局项间距
  437.     rightTitleSpace: string | number = 2;
  438.     // 右边标题多态样式 Normal
  439.     rightTitleStateNormalStyleColor: ResourceColor = Color.White;
  440.     // 右边标题多态样式 Pressed
  441.     rightTitleStatePressedStyleColor: ResourceColor = Color.Grey;
  442.     // 显示右边布局
  443.     showRightSideLayout: boolean = true;
  444.     // 右边背景色
  445.     rightTitleBackground: ResourceColor = Color.White;
  446.  
  447.     // 右边按钮标题名称
  448.     rightTitleName: string = "";
  449.     // 右边按钮标题颜色
  450.     rightTitleFontColor: ResourceColor = Color.Black;
  451.     // 右边按钮标题文字大小
  452.     rightTitleFontSize: number | string | Resource = 16;
  453.     // 右边按钮标题文字粗细
  454.     rightTitleFontWeight: number | FontWeight | string = FontWeight.Normal;
  455.  
  456.     // 右边按钮图标
  457.     rightIcon: string | PixelMap | Resource = null;
  458.     // 右边按钮图标宽度
  459.     rightIconWidth: number | string | Resource = 20;
  460.     // 右边按钮图标高度
  461.     rightIconHeight: number | string | Resource = 20;
  462.     // 右边按钮图标 Padding
  463.     rightIconPadding: Padding | Length = 0;
  464.     // 右边按钮图标位置
  465.     rightIconGravity: IconGravity = IconGravity.LEFT;
  466.  
  467.     // 右边点击回调
  468.     onRightClickListener: () => void = () => {
  469.     };
  470.  
  471.     constructor() {
  472.       this.barStyleTransform(BarStyle.LIGHT);
  473.     }
  474.  
  475.     setTitleBarNormalPadding(value: number | Resource): Model {
  476.       this.titleBarNormalPadding = value;
  477.       return this;
  478.     }
  479.  
  480.     setTitleBarMinHeight(value: number | Resource): Model {
  481.       this.titleBarMinHeight = value;
  482.       return this;
  483.     }
  484.  
  485.     setTitleBarStyle(value: BarStyle): Model {
  486.       this.titleBarStyle = value;
  487.       this.barStyleTransform(value);
  488.       return this;
  489.     }
  490.  
  491.     setTitleBarBackground(value: ResourceColor): Model {
  492.       this.titleBarBackground = value;
  493.       return this;
  494.     }
  495.  
  496.     setTitleBarBottomLineHeight(value: number | Resource): Model {
  497.       this.titleBarBottomLineHeight = value;
  498.       return this;
  499.     }
  500.  
  501.     setTitleBarBottomLineColor(value: ResourceColor): Model {
  502.       this.titleBarBottomLineColor = value;
  503.       return this;
  504.     }
  505.  
  506.     setShowTitleBarBottomLine(value: boolean): Model {
  507.       this.titleBarBottomLineHeight = value ? 0.35 : 0;
  508.       return this;
  509.     }
  510.  
  511.     setTitleBarLinearGradient(value: any): Model {
  512.       this.titleBarLinearGradient = value;
  513.       return this;
  514.     }
  515.     /***************************************************************
  516.      * 中间标题
  517.      ***************************************************************/
  518.     setTitleSpace(value: string | number): Model {
  519.       this.titleSpace = value;
  520.       return this;
  521.     }
  522.  
  523.     setTitleName(value: string): Model {
  524.       this.titleName = value;
  525.       return this;
  526.     }
  527.  
  528.     setTitleFontColor(value: ResourceColor): Model {
  529.       this.titleFontColor = value;
  530.       return this;
  531.     }
  532.  
  533.     setTitleFontSize(value: number | string | Resource): Model {
  534.       this.titleFontSize = value;
  535.       return this;
  536.     }
  537.  
  538.     setTitleFontWeight(value: number | FontWeight | string): Model {
  539.       this.titleFontWeight = value;
  540.       return this;
  541.     }
  542.  
  543.     setTitleTextOverflowType(value: TitleTextOverflowType): Model {
  544.       this.titleTextOverflowType = value;
  545.       return this;
  546.     }
  547.  
  548.     setTitleTextStyle(value: FontStyle): Model {
  549.       this.titleTextStyle = value;
  550.       return this;
  551.     }
  552.  
  553.     setSubTitleName(value: string): Model {
  554.       this.subTitleName = value;
  555.       return this;
  556.     }
  557.  
  558.     setSubTitleFontColor(value: ResourceColor): Model {
  559.       this.subTitleFontColor = value;
  560.       return this;
  561.     }
  562.  
  563.     setSubTitleFontSize(value: number | string | Resource): Model {
  564.       this.subTitleFontSize = value;
  565.       return this;
  566.     }
  567.  
  568.     setSubTitleFontWeight(value: number | FontWeight | string): Model {
  569.       this.subTitleFontWeight = value;
  570.       return this;
  571.     }
  572.  
  573.     setSubTitleTextOverflowType(value: TitleTextOverflowType): Model {
  574.       this.subTitleTextOverflowType = value;
  575.       return this;
  576.     }
  577.  
  578.     setSubTitleTextStyle(value: FontStyle): Model {
  579.       this.subTitleTextStyle = value;
  580.       return this;
  581.     }
  582.  
  583.     setOnTitleClickListener(callback: () => void): Model {
  584.       this.onTitleClickListener = callback
  585.       return this
  586.     }
  587.     /***************************************************************
  588.      * 垂直跑马灯多文本动态显示效果
  589.      ***************************************************************/
  590.     setMultipleTitleList(value: string[]): Model {
  591.       this.multipleTitleList = value;
  592.       return this;
  593.     }
  594.  
  595.     setMultipleTitleFontColor(value: ResourceColor): Model {
  596.       this.multipleTitleFontColor = value;
  597.       return this;
  598.     }
  599.  
  600.     setMultipleTitleFontSize(value:  number | string | Resource): Model {
  601.       this.multipleTitleFontSize = value;
  602.       return this;
  603.     }
  604.  
  605.     setMultipleTitleFontWeight(value: number | FontWeight | string): Model {
  606.       this.multipleTitleFontWeight = value;
  607.       return this;
  608.     }
  609.  
  610.     setMultipleTitleTextOverflowType(value: TitleTextOverflowType): Model {
  611.       this.multipleTitleTextOverflowType = value;
  612.       return this;
  613.     }
  614.  
  615.     setMultipleTitleTextStyle(value: FontStyle): Model {
  616.       this.multipleTitleTextStyle = value;
  617.       return this;
  618.     }
  619.  
  620.     setMultipleTitleTextAlign(value: TextAlign): Model {
  621.       this.multipleTitleTextAlign = value;
  622.       return this;
  623.     }
  624.  
  625.     setMultipleTitlePlayInterval(value: number): Model {
  626.       this.multipleTitlePlayInterval = value;
  627.       return this;
  628.     }
  629.  
  630.     setMultipleTitlePlayDuration(value: number): Model {
  631.       this.multipleTitlePlayDuration = value;
  632.       return this;
  633.     }
  634.  
  635.     setMultipleTitlePlayItemSpace(value: number): Model {
  636.       this.multipleTitlePlayItemSpace = value;
  637.       return this;
  638.     }
  639.     /***************************************************************
  640.      * 左边按钮
  641.      ***************************************************************/
  642.     setLeftTitleStateNormalStyleColor(value: ResourceColor): Model {
  643.       this.leftTitleStateNormalStyleColor = value;
  644.       return this;
  645.     }
  646.  
  647.     setLeftTitleStatePressedStyleColor(value: ResourceColor): Model {
  648.       this.leftTitleStatePressedStyleColor = value;
  649.       return this;
  650.     }
  651.  
  652.     setLeftTitleSpace(value: string | number): Model {
  653.       this.leftTitleSpace = value;
  654.       return this;
  655.     }
  656.  
  657.     setShowLeftSideLayout(value: boolean): Model {
  658.       this.showLeftSideLayout = value;
  659.       return this;
  660.     }
  661.  
  662.     setLeftTitleName(value: string): Model {
  663.       this.leftTitleName = value;
  664.       return this;
  665.     }
  666.  
  667.     setLeftTitleFontColor(value: ResourceColor): Model {
  668.       this.leftTitleFontColor = value;
  669.       return this;
  670.     }
  671.  
  672.     setLeftTitleFontSize(value: number | string | Resource): Model {
  673.       this.leftTitleFontSize = value;
  674.       return this;
  675.     }
  676.  
  677.     setLeftTitleFontWeight(value: number | FontWeight | string): Model {
  678.       this.leftTitleFontWeight = value;
  679.       return this;
  680.     }
  681.  
  682.     setLeftIcon(value: string | PixelMap | Resource): Model {
  683.       this.leftIcon = value;
  684.       return this;
  685.     }
  686.  
  687.     setLeftIconWidth(value: number | string | Resource): Model {
  688.       this.leftIconWidth = value;
  689.       return this;
  690.     }
  691.  
  692.     setLeftIconHeight(value: number | string | Resource): Model {
  693.       this.leftIconHeight = value;
  694.       return this;
  695.     }
  696.  
  697.     setLeftIconPadding(value: Padding | Length): Model {
  698.       this.leftIconPadding = value;
  699.       return this;
  700.     }
  701.  
  702.     setLeftIconGravity(value: IconGravity): Model {
  703.       this.leftIconGravity = value;
  704.       return this;
  705.     }
  706.  
  707.     setOnLeftClickListener(callback: () => void): Model {
  708.       this.onLeftClickListener = callback
  709.       return this
  710.     }
  711.  
  712.     setLeftTitleBackground(value: ResourceColor): Model {
  713.       this.leftTitleBackground = value;
  714.       return this;
  715.     }
  716.  
  717.     /***************************************************************
  718.      * 右边按钮
  719.      ***************************************************************/
  720.     setRightTitleStateNormalStyleColor(value: ResourceColor): Model {
  721.       this.rightTitleStateNormalStyleColor = value;
  722.       return this;
  723.     }
  724.  
  725.     setRightTitleStatePressedStyleColor(value: ResourceColor): Model {
  726.       this.rightTitleStatePressedStyleColor = value;
  727.       return this;
  728.     }
  729.  
  730.     setRightTitleSpace(value: string | number): Model {
  731.       this.rightTitleSpace = value;
  732.       return this;
  733.     }
  734.  
  735.     setShowRightSideLayout(value: boolean): Model {
  736.       this.showRightSideLayout = value;
  737.       return this;
  738.     }
  739.  
  740.     setRightTitleName(value: string): Model {
  741.       this.rightTitleName = value;
  742.       return this;
  743.     }
  744.  
  745.     setRightTitleFontColor(value: ResourceColor): Model {
  746.       this.rightTitleFontColor = value;
  747.       return this;
  748.     }
  749.  
  750.     setRightTitleFontSize(value: number | string | Resource): Model {
  751.       this.rightTitleFontSize = value;
  752.       return this;
  753.     }
  754.  
  755.     setRightTitleFontWeight(value: number | FontWeight | string): Model {
  756.       this.rightTitleFontWeight = value;
  757.       return this;
  758.     }
  759.  
  760.     setRightIcon(value: string | PixelMap | Resource): Model {
  761.       this.rightIcon = value;
  762.       return this;
  763.     }
  764.  
  765.     setRightIconWidth(value: number | string | Resource): Model {
  766.       this.rightIconWidth = value;
  767.       return this;
  768.     }
  769.  
  770.     setRightIconHeight(value: number | string | Resource): Model {
  771.       this.rightIconHeight = value;
  772.       return this;
  773.     }
  774.  
  775.     setRightIconPadding(value: Padding | Length): Model {
  776.       this.rightIconPadding = value;
  777.       return this;
  778.     }
  779.  
  780.     setRightIconGravity(value: IconGravity): Model {
  781.       this.rightIconGravity = value;
  782.       return this;
  783.     }
  784.  
  785.     setOnRightClickListener(callback: () => void): Model {
  786.       this.onRightClickListener = callback
  787.       return this
  788.     }
  789.  
  790.     setRightTitleBackground(value: ResourceColor): Model {
  791.       this.rightTitleBackground = value;
  792.       return this;
  793.     }
  794.  
  795.     /**
  796.      * 标题样式转换
  797.      * @param value
  798.      */
  799.     private barStyleTransform(value: BarStyle) {
  800.       switch (value) {
  801.         case TitleBar.BarStyle.LIGHT:
  802.           this.setTitleBarBackground(0xFFFFFFFF);
  803.           this.setTitleFontColor(0xFF222222);
  804.  
  805.           this.setLeftTitleStateNormalStyleColor(0xFFFFFFFF);
  806.           this.setLeftTitleStatePressedStyleColor(0x0C000000);
  807.           this.setLeftIcon($r('app.media.left_back_black'));
  808.           this.setLeftTitleFontColor(0xFF666666);
  809.  
  810.           this.setRightTitleStateNormalStyleColor(0xFFFFFFFF);
  811.           this.setRightTitleStatePressedStyleColor(0x0C000000);
  812.           this.setRightTitleFontColor(0xFFA4A4A4);
  813.           break;
  814.         case TitleBar.BarStyle.NIGHT:
  815.           this.setTitleBarBackground(0xFF000000);
  816.           this.setTitleFontColor(0xEEFFFFFF);
  817.  
  818.           this.setLeftTitleStateNormalStyleColor(0x00000000);
  819.           this.setLeftTitleStatePressedStyleColor(0x66FFFFFF);
  820.           this.setLeftIcon($r('app.media.left_back_white'));
  821.           this.setLeftTitleFontColor(0xCCFFFFFF);
  822.  
  823.           this.setRightTitleStateNormalStyleColor(0x00000000);
  824.           this.setRightTitleStatePressedStyleColor(0x66FFFFFF);
  825.           this.setRightTitleFontColor(0xCCFFFFFF);
  826.           break;
  827.         case TitleBar.BarStyle.TRANSPARENT:
  828.           this.setTitleBarBackground(Color.Transparent);
  829.           this.setTitleFontColor(0xFFFFFFFF);
  830.  
  831.           this.setLeftTitleStateNormalStyleColor(Color.Transparent);
  832.           this.setLeftTitleStatePressedStyleColor(0x22000000);
  833.           this.setLeftIcon(null);
  834.           this.setLeftTitleFontColor(0xFFFFFFFF);
  835.  
  836.           this.setRightTitleStateNormalStyleColor(Color.Transparent);
  837.           this.setRightTitleStatePressedStyleColor(0x22000000);
  838.           this.setRightTitleFontColor(0xFFFFFFFF);
  839.           break;
  840.         case TitleBar.BarStyle.LINEARGRADIENT:
  841.           this.setTitleBarBackground(Color.Transparent);
  842.           this.setTitleFontColor(0xFFFFFFFF);
  843.  
  844.           this.setLeftTitleStateNormalStyleColor(Color.Transparent);
  845.           this.setLeftTitleStatePressedStyleColor(0x22000000);
  846.           this.setLeftIcon(null);
  847.           this.setLeftTitleFontColor(0xFFFFFFFF);
  848.  
  849.           this.setRightTitleStateNormalStyleColor(Color.Transparent);
  850.           this.setRightTitleStatePressedStyleColor(0x22000000);
  851.           this.setRightTitleFontColor(0xFFFFFFFF);
  852.           break;
  853.         default:
  854.           break;
  855.       }
  856.     }
  857.   }
  858.  
  859.   export class MultipleTitleDataSource implements IDataSource {
  860.     private multipleTitleList: string[] = [];
  861.     private listener: DataChangeListener;
  862.  
  863.     constructor(list: string[]) {
  864.       this.multipleTitleList = list;
  865.     }
  866.  
  867.     totalCount(): number {
  868.       return this.multipleTitleList.length;
  869.     }
  870.  
  871.     getData(index: number): any {
  872.       return this.multipleTitleList[index];
  873.     }
  874.  
  875.     registerDataChangeListener(listener: DataChangeListener): void {
  876.       this.listener = listener;
  877.     }
  878.  
  879.     unregisterDataChangeListener() {
  880.       this.listener = null;
  881.     }
  882.   }
  883. }
  884.  
  885. export default TitleBar

2、使用

  1. import { TitleBar } from '../Components/Header'
  2.  
  3. @State model1: TitleBar.Model = new TitleBar.Model()
  4.     .setOnLeftClickListener(() => {
  5.       router.back()
  6.     })
  7.     .setLeftTitleName("返回")
  8.     .setTitleName("咨询订单")
  9. build() {
  10.     TitleBar({ model: $model1 })
  11. }

3、效果

部分内容转载：https://www.wpsshop.cn/w/你好赵伟/article/detail/228594

推荐阅读
相关标签

Copyright © 2003-2013 www.wpsshop.cn 版权所有，并保留所有权利。

  

闽ICP备14008679号