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

    0、效果图

    自定义通用标题栏

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

    支持自定义视图；

    支持搜索功能

    一、CommTitleBar代码
    1. import router from '@ohos.router';
    2. import { Constants } from '../../constants/Constants';
    3. import { StyleConstants } from '../../constants/StyleConstants'
    4. import { toast } from '../../utils/ToastUtils';
    5.  
    6. @Component
    7. export struct CommonTitleBar {
    8.   @State titleBarHeight: number = 50; // 标题栏高度
    9.   @State showBottomLine: boolean = true; //  是否显示标题栏底部的分割线
    10.   titleBarColor: ResourceColor = '#f5f5f5'; // 标题栏颜色
    11.   bottomLineColor: ResourceColor = "#DDDDDD"; // 标题栏分割线颜色
    12.  
    13.   @State leftType: number = Constants.TYPE_LEFT_IMAGE_VIEW; // 左侧视图类型：无|文字|按钮|自定义视图，默认显示返回按钮
    14.   @State leftText: string = '左侧文字'; // 左侧文字leftType= textView有效
    15.   @State leftMargin: number | string = 12; // 左侧间距
    16.   leftTextColor: ResourceColor = "#000000"; // 左侧文字颜色
    17.   @State leftTextSize: number | string = 16; // 左侧文字大小
    18.   leftImageResource: string | PixelMap | Resource = $r('app.media.img_back_black'); // 左侧返回图片
    19.   @BuilderParam leftCustomView: () => void; // 左侧自定义View
    20.   onClickLeftText?: () => void; // 左侧文字点击事件
    21.   onClickLeftImage?: () => void; // 左侧图片点击事件
    22.  
    23.   @State rightType: number = Constants.TYPE_RIGHT_NONE; // 右侧视图类型：无|文字|按钮|自定义视图，默认无视图
    24.   @State rightText: string = '右侧文字'; // 右侧文字leftType= textView有效
    25.   @State rightMargin: number | string = 12; // 右侧间距
    26.   rightTextColor: ResourceColor = "#000000"; // 右侧文字颜色
    27.   @State rightTextSize: number | string = 16; // 右侧文字大小
    28.   rightImageResource: string | PixelMap | Resource = $r('app.media.img_back_black'); // 右侧图片
    29.   @BuilderParam rightCustomView: () => void; // 右侧自定义View
    30.   onClickRightText?: () => void; // 右侧文字点击事件
    31.   onClickRightImage?: () => void; // 右侧图片点击事件
    32.  
    33.   @State centerType: number = Constants.TYPE_CENTER_TEXT_VIEW; // 居中视图类型：无|文字|按钮|自定义视图，默认文字视图
    34.   @State centerText: string = '居中文字'; // 居中文字leftType= textView有效
    35.   centerTextColor: ResourceColor = "#000000"; // 居中文字颜色
    36.   @State centerTextSize: number | string = 16; // 居中文字大小
    37.   centerImageResource: string | PixelMap | Resource = $r('app.media.img_back_black'); // 居中图片
    38.   @State searchLeftMargin: number | string = 12; // 右侧间距
    39.   @State searchRightMargin: number | string = 12; // 右侧间距
    40.   @BuilderParam centerCustomView: () => void; // 居中自定义View
    41.   onClickCenterText?: () => void; //  居中文字点击事件
    42.   onClickCenterImage?: () => void; // 居中图片点击事件
    43.   @State value: string = ''; // 居中搜索框默认文本
    44.   @State placeholder: string = '请输入关键字'; // 居中搜索框提示文本
    45.   @State searchButton: string = ''; // 居中搜索框提示文本
    46.   onSubmitSearch?: (value: string) => void; // 点击搜索图标、搜索按钮或者按下软键盘搜索按钮时触发该回调
    47.   onChangeSearch?: (value: string) => void; // 输入内容发生变化时，触发该回调
    48.  
    49.   build() {
    50.     RelativeContainer() {
    51.       if (this.leftType === Constants.TYPE_LEFT_TEXT_VIEW) {
    52.         Text(this.leftText)
    53.           .alignRules({
    54.             left: { anchor: "__container__", align: HorizontalAlign.Start },
    55.             center: { anchor: "__container__", align: VerticalAlign.Center }
    56.           })
    57.           .margin({
    58.             left: this.leftMargin
    59.           })
    60.           .fontColor(this.leftTextColor)
    61.           .fontSize(this.leftTextSize)
    62.           .maxLines(1)
    63.           .onClick(() => {
    64.             if (this.onClickLeftText !== undefined) {
    65.               this.onClickLeftText();
    66.             }
    67.           })
    68.           .id('left')
    69.       }
    70.       else if (this.leftType === Constants.TYPE_LEFT_IMAGE_VIEW) {
    71.         Image(this.leftImageResource)
    72.           .height(18)
    73.           .alignRules({
    74.             left: { anchor: "__container__", align: HorizontalAlign.Start },
    75.             center: { anchor: "__container__", align: VerticalAlign.Center }
    76.           })
    77.           .margin({
    78.             left: this.leftMargin
    79.           })
    80.           .onClick(() => {
    81.             if (this.onClickLeftImage !== undefined) {
    82.               this.onClickLeftImage();
    83.             } else {
    84.               router.back()
    85.             }
    86.           })
    87.           .id('left')
    88.       }
    89.       else if (this.leftType === Constants.TYPE_LEFT_CUSTOM_VIEW) {
    90.         Column() {
    91.           this.leftCustomView()
    92.         }.alignRules({
    93.           left: { anchor: "__container__", align: HorizontalAlign.Start },
    94.           center: { anchor: "__container__", align: VerticalAlign.Center }
    95.         })
    96.         .margin({
    97.           left: this.leftMargin
    98.         })
    99.         .id('left')
    100.       }
    101.  
    102.       if (this.rightType === Constants.TYPE_RIGHT_TEXT_VIEW) {
    103.         Text(this.rightText)
    104.           .alignRules({
    105.             right: { anchor: "__container__", align: HorizontalAlign.End },
    106.             center: { anchor: "__container__", align: VerticalAlign.Center }
    107.           })
    108.           .margin({
    109.             right: this.rightMargin
    110.           })
    111.           .fontColor(this.rightTextColor)
    112.           .fontSize(this.rightTextSize)
    113.           .maxLines(1)
    114.           .onClick(() => {
    115.             if (this.onClickRightText !== undefined) {
    116.               this.onClickRightText();
    117.             }
    118.           })
    119.           .id('right')
    120.       }
    121.       else if (this.rightType === Constants.TYPE_RIGHT_IMAGE_VIEW) {
    122.         Image(this.rightImageResource)
    123.           .height(18)
    124.           .alignRules({
    125.             right: { anchor: "__container__", align: HorizontalAlign.End },
    126.             center: { anchor: "__container__", align: VerticalAlign.Center }
    127.           })
    128.           .margin({
    129.             right: this.rightMargin
    130.           })
    131.           .onClick(() => {
    132.             if (this.onClickRightImage !== undefined) {
    133.               this.onClickRightImage();
    134.             } else {
    135.               toast("点击了")
    136.             }
    137.           })
    138.           .id('right')
    139.       }
    140.       else if (this.rightType === Constants.TYPE_RIGHT_CUSTOM_VIEW) {
    141.         Column() {
    142.           this.rightCustomView()
    143.         }.alignRules({
    144.           right: { anchor: "__container__", align: HorizontalAlign.End },
    145.           center: { anchor: "__container__", align: VerticalAlign.Center }
    146.         })
    147.         .margin({
    148.           right: this.rightMargin
    149.         })
    150.         .id('right')
    151.       }
    152.  
    153.       if (this.centerType === Constants.TYPE_CENTER_TEXT_VIEW) {
    154.         Text(this.centerText)
    155.           .alignRules({
    156.             middle: { anchor: "__container__", align: HorizontalAlign.Center },
    157.             center: { anchor: "__container__", align: VerticalAlign.Center }
    158.           })
    159.           .fontColor(this.centerTextColor)
    160.           .fontSize(this.centerTextSize)
    161.           .maxLines(1)
    162.           .onClick(() => {
    163.             if (this.onClickCenterText !== undefined) {
    164.               this.onClickCenterText();
    165.             }
    166.           })
    167.           .id('center_text')
    168.       }
    169.       else if (this.centerType === Constants.TYPE_CENTER_IMAGE_VIEW) {
    170.         Image(this.centerImageResource)
    171.           .height(18)
    172.           .alignRules({
    173.             middle: { anchor: "__container__", align: HorizontalAlign.Center },
    174.             center: { anchor: "__container__", align: VerticalAlign.Center }
    175.           })
    176.           .onClick(() => {
    177.             if (this.onClickRightImage !== undefined) {
    178.               this.onClickRightImage();
    179.             } else {
    180.               toast("点击了")
    181.             }
    182.           })
    183.           .id('center_image')
    184.       }
    185.       else if (this.centerType === Constants.TYPE_CENTER_CUSTOM_VIEW) {
    186.         Column() {
    187.           this.centerCustomView()
    188.         }.alignRules({
    189.           middle: { anchor: "__container__", align: HorizontalAlign.Center },
    190.           center: { anchor: "__container__", align: VerticalAlign.Center }
    191.         })
    192.         .id('center_custom')
    193.       }
    194.       else if (this.centerType === Constants.TYPE_CENTER_SEARCH_VIEW) {
    195.         Column() {
    196.           Search({
    197.             value: this.value,
    198.             placeholder: this.placeholder,
    199.           })
    200.             .height(38)
    201.             .searchButton(this.searchButton)
    202.             .onSubmit((value: string) => {
    203.               this.onSubmitSearch(value);
    204.             })
    205.             .onChange((value: string) => {
    206.               this.onChangeSearch(value);
    207.             })
    208.         }
    209.         .alignRules({
    210.           left: { anchor: "left", align: HorizontalAlign.End },
    211.           right: { anchor: "right", align: HorizontalAlign.Start },
    212.           center: { anchor: "__container__", align: VerticalAlign.Center },
    213.         })
    214.         .margin({
    215.           left: this.searchLeftMargin,
    216.           right: this.searchRightMargin
    217.         })
    218.         .id('center_search')
    219.       }
    220.     }
    221.     .width(StyleConstants.FULL_WIDTH)
    222.     .height(this.titleBarHeight)
    223.     .backgroundColor(this.titleBarColor)
    224.     .border({
    225.       width: { bottom: this.showBottomLine ? '1vp' : '0' },
    226.     })
    227.     .borderColor(this.bottomLineColor)
    228.   }
    229. }
    230.  
    Constants:
    1.   // 自定义标题栏
    2.   static readonly TYPE_LEFT_NONE: number = 0;
    3.   static readonly TYPE_LEFT_TEXT_VIEW: number = 1;
    4.   static readonly TYPE_LEFT_IMAGE_VIEW: number = 2;
    5.   static readonly TYPE_LEFT_CUSTOM_VIEW: number = 3;
    6.  
    7.   static readonly TYPE_RIGHT_NONE: number = 0;
    8.   static readonly TYPE_RIGHT_TEXT_VIEW: number = 1;
    9.   static readonly TYPE_RIGHT_IMAGE_VIEW: number = 2;
    10.   static readonly TYPE_RIGHT_CUSTOM_VIEW: number = 3;
    11.  
    12.   static readonly TYPE_CENTER_NONE: number = 0;
    13.   static readonly TYPE_CENTER_TEXT_VIEW: number = 1;
    14.   static readonly TYPE_CENTER_IMAGE_VIEW: number = 2;
    15.   static readonly TYPE_CENTER_CUSTOM_VIEW: number = 3;
    16.   static readonly TYPE_CENTER_SEARCH_VIEW: number = 4;
    二、调用方法
    1. import { CommonTitleBar, Constants, StyleConstants, toast } from '@ohos/common'
    2.  
    3. @Component
    4. export struct Contact {
    5.   @Builder leftBuilder() {
    6.     Row() {
    7.       Text('自定义')
    8.         .onClick(() => {
    9.           toast('点击自定义')
    10.         })
    11.       Image($r('app.media.img_select'))
    12.         .height(20)
    13.     }
    14.   }
    15.  
    16.   @Builder rightBuilder() {
    17.     Row() {
    18.       Text('自定义')
    19.         .onClick(() => {
    20.           toast('点击自定义')
    21.         })
    22.       Image($r('app.media.img_select'))
    23.         .height(20)
    24.     }
    25.   }
    26.  
    27.   @Builder centerBuilder() {
    28.     Row() {
    29.       Text('自定义')
    30.         .onClick(() => {
    31.           toast('点击自定义')
    32.         })
    33.       Image($r('app.media.img_select'))
    34.         .height(20)
    35.     }
    36.   }
    37.  
    38.   build() {
    39.     Column() {
    40.       CommonTitleBar({
    41.         leftType: Constants.TYPE_LEFT_CUSTOM_VIEW,
    42.         leftCustomView: this.leftBuilder,
    43.         leftText: "企业通讯录",
    44.         rightType: Constants.TYPE_RIGHT_CUSTOM_VIEW,
    45.         rightCustomView: this.rightBuilder,
    46.         rightText: '确定',
    47.         centerType: Constants.TYPE_CENTER_SEARCH_VIEW,
    48.         centerText: "居中",
    49.         centerCustomView: this.centerBuilder,
    50.         onClickLeftText: (): void => {
    51.           toast('AAA')
    52.         },
    53.         onClickLeftImage: (): void => {
    54.           toast('onClickLeftImage')
    55.         },
    56.         onSubmitSearch: (value): void => {
    57.           toast(value);
    58.         },
    59.         onChangeSearch: (value): void => {
    60.           toast(value);
    61.         }
    62.       })
    63.     }
    64.     .width(StyleConstants.FULL_WIDTH)
    65.     .height(StyleConstants.FULL_WIDTH)
    66.   }
    67. }

  • 相关阅读:
    MySQL索引失效场景以及解决方案
    线上AB实验的日志分析
    swift语言用哪种库适合做爬虫？
    springboot整合shiro问题
    关于go协程超时退出控制条件与方式分析
    dart 学习 之 异常
    入门力扣自学笔记119 C++ （题目编号640）
    2023年云南省职业院校技能大赛中职组 “网络安全”赛项竞赛任务书
    时间空间复杂度分析--选择排序算法
    链路负载均衡之全局选路策略
  • 原文地址：https://blog.csdn.net/qq_41374940/article/details/138169425