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

0、效果图

自定义通用标题栏

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

支持自定义视图；

支持搜索功能

一、CommTitleBar代码
import router from '@ohos.router';
import { Constants } from '../../constants/Constants';
import { StyleConstants } from '../../constants/StyleConstants'
import { toast } from '../../utils/ToastUtils';@Component
export struct CommonTitleBar {@State titleBarHeight: number = 50; // 标题栏高度@State showBottomLine: boolean = true; //  是否显示标题栏底部的分割线titleBarColor: ResourceColor = '#f5f5f5'; // 标题栏颜色bottomLineColor: ResourceColor = "#DDDDDD"; // 标题栏分割线颜色@State leftType: number = Constants.TYPE_LEFT_IMAGE_VIEW; // 左侧视图类型：无|文字|按钮|自定义视图，默认显示返回按钮@State leftText: string = '左侧文字'; // 左侧文字leftType= textView有效@State leftMargin: number | string = 12; // 左侧间距leftTextColor: ResourceColor = "#000000"; // 左侧文字颜色@State leftTextSize: number | string = 16; // 左侧文字大小leftImageResource: string | PixelMap | Resource = $r('app.media.img_back_black'); // 左侧返回图片@BuilderParam leftCustomView: () => void = null; // 左侧自定义ViewonClickLeftText?: () => void; // 左侧文字点击事件onClickLeftImage?: () => void; // 左侧图片点击事件@State rightType: number = Constants.TYPE_RIGHT_NONE; // 右侧视图类型：无|文字|按钮|自定义视图，默认无视图@State rightText: string = '右侧文字'; // 右侧文字leftType= textView有效@State rightMargin: number | string = 12; // 右侧间距rightTextColor: ResourceColor = "#000000"; // 右侧文字颜色@State rightTextSize: number | string = 16; // 右侧文字大小rightImageResource: string | PixelMap | Resource = $r('app.media.img_back_black'); // 右侧图片@BuilderParam rightCustomView: () => void = null; // 右侧自定义ViewonClickRightText?: () => void; // 右侧文字点击事件onClickRightImage?: () => void; // 右侧图片点击事件@State centerType: number = Constants.TYPE_CENTER_TEXT_VIEW; // 居中视图类型：无|文字|按钮|自定义视图，默认文字视图@State centerText: string = '居中文字'; // 居中文字leftType= textView有效centerTextColor: ResourceColor = "#000000"; // 居中文字颜色@State centerTextSize: number | string = 16; // 居中文字大小centerImageResource: string | PixelMap | Resource = $r('app.media.img_back_black'); // 居中图片@State searchLeftMargin: number | string = 12; // 右侧间距@State searchRightMargin: number | string = 12; // 右侧间距@BuilderParam centerCustomView: () => void = null; // 居中自定义ViewonClickCenterText?: () => void; //  居中文字点击事件onClickCenterImage?: () => void; // 居中图片点击事件@State value: string = ''; // 居中搜索框默认文本@State placeholder: string = '请输入关键字'; // 居中搜索框提示文本@State searchButton: string = ''; // 居中搜索框提示文本onSubmitSearch?: (value: string) => void; // 点击搜索图标、搜索按钮或者按下软键盘搜索按钮时触发该回调onChangeSearch?: (value: string) => void; // 输入内容发生变化时，触发该回调build() {RelativeContainer() {if (this.leftType === Constants.TYPE_LEFT_TEXT_VIEW) {Text(this.leftText).alignRules({left: { anchor: "__container__", align: HorizontalAlign.Start },center: { anchor: "__container__", align: VerticalAlign.Center }}).margin({left: this.leftMargin}).fontColor(this.leftTextColor).fontSize(this.leftTextSize).maxLines(1).onClick(() => {if (this.onClickLeftText !== undefined) {this.onClickLeftText();}}).id('left')}else if (this.leftType === Constants.TYPE_LEFT_IMAGE_VIEW) {Image(this.leftImageResource).height(18).alignRules({left: { anchor: "__container__", align: HorizontalAlign.Start },center: { anchor: "__container__", align: VerticalAlign.Center }}).margin({left: this.leftMargin}).onClick(() => {if (this.onClickLeftImage !== undefined) {this.onClickLeftImage();} else {router.back()}}).id('left')}else if (this.leftType === Constants.TYPE_LEFT_CUSTOM_VIEW) {Column() {this.leftCustomView()}.alignRules({left: { anchor: "__container__", align: HorizontalAlign.Start },center: { anchor: "__container__", align: VerticalAlign.Center }}).margin({left: this.leftMargin}).id('left')}if (this.rightType === Constants.TYPE_RIGHT_TEXT_VIEW) {Text(this.rightText).alignRules({right: { anchor: "__container__", align: HorizontalAlign.End },center: { anchor: "__container__", align: VerticalAlign.Center }}).margin({right: this.rightMargin}).fontColor(this.rightTextColor).fontSize(this.rightTextSize).maxLines(1).onClick(() => {if (this.onClickRightText !== undefined) {this.onClickRightText();}}).id('right')}else if (this.rightType === Constants.TYPE_RIGHT_IMAGE_VIEW) {Image(this.rightImageResource).height(18).alignRules({right: { anchor: "__container__", align: HorizontalAlign.End },center: { anchor: "__container__", align: VerticalAlign.Center }}).margin({right: this.rightMargin}).onClick(() => {if (this.onClickRightImage !== undefined) {this.onClickRightImage();} else {toast("点击了")}}).id('right')}else if (this.rightType === Constants.TYPE_RIGHT_CUSTOM_VIEW) {Column() {this.rightCustomView()}.alignRules({right: { anchor: "__container__", align: HorizontalAlign.End },center: { anchor: "__container__", align: VerticalAlign.Center }}).margin({right: this.rightMargin}).id('right')}if (this.centerType === Constants.TYPE_CENTER_TEXT_VIEW) {Text(this.centerText).alignRules({middle: { anchor: "__container__", align: HorizontalAlign.Center },center: { anchor: "__container__", align: VerticalAlign.Center }}).fontColor(this.centerTextColor).fontSize(this.centerTextSize).maxLines(1).onClick(() => {if (this.onClickCenterText !== undefined) {this.onClickCenterText();}}).id('center_text')}else if (this.centerType === Constants.TYPE_CENTER_IMAGE_VIEW) {Image(this.centerImageResource).height(18).alignRules({middle: { anchor: "__container__", align: HorizontalAlign.Center },center: { anchor: "__container__", align: VerticalAlign.Center }}).onClick(() => {if (this.onClickRightImage !== undefined) {this.onClickRightImage();} else {toast("点击了")}}).id('center_image')}else if (this.centerType === Constants.TYPE_CENTER_CUSTOM_VIEW) {Column() {this.centerCustomView()}.alignRules({middle: { anchor: "__container__", align: HorizontalAlign.Center },center: { anchor: "__container__", align: VerticalAlign.Center }}).id('center_custom')}else if (this.centerType === Constants.TYPE_CENTER_SEARCH_VIEW) {Column() {Search({value: this.value,placeholder: this.placeholder,}).height(38).searchButton(this.searchButton).onSubmit((value: string) => {this.onSubmitSearch(value);}).onChange((value: string) => {this.onChangeSearch(value);})}.alignRules({left: { anchor: "left", align: HorizontalAlign.End },right: { anchor: "right", align: HorizontalAlign.Start },center: { anchor: "__container__", align: VerticalAlign.Center },}).margin({left: this.searchLeftMargin,right: this.searchRightMargin}).id('center_search')}}.width(StyleConstants.FULL_WIDTH).height(this.titleBarHeight).backgroundColor(this.titleBarColor).border({width: { bottom: this.showBottomLine ? '1vp' : '0' },}).borderColor(this.bottomLineColor)}
}
Constants:
  // 自定义标题栏static readonly TYPE_LEFT_NONE: number = 0;static readonly TYPE_LEFT_TEXT_VIEW: number = 1;static readonly TYPE_LEFT_IMAGE_VIEW: number = 2;static readonly TYPE_LEFT_CUSTOM_VIEW: number = 3;static readonly TYPE_RIGHT_NONE: number = 0;static readonly TYPE_RIGHT_TEXT_VIEW: number = 1;static readonly TYPE_RIGHT_IMAGE_VIEW: number = 2;static readonly TYPE_RIGHT_CUSTOM_VIEW: number = 3;static readonly TYPE_CENTER_NONE: number = 0;static readonly TYPE_CENTER_TEXT_VIEW: number = 1;static readonly TYPE_CENTER_IMAGE_VIEW: number = 2;static readonly TYPE_CENTER_CUSTOM_VIEW: number = 3;static readonly TYPE_CENTER_SEARCH_VIEW: number = 4;
二、调用方法
import { CommonTitleBar, Constants, StyleConstants, toast } from '@ohos/common'@Component
export struct Contact {@Builder leftBuilder() {Row() {Text('自定义').onClick(() => {toast('点击自定义')})Image($r('app.media.img_select')).height(20)}}@Builder rightBuilder() {Row() {Text('自定义').onClick(() => {toast('点击自定义')})Image($r('app.media.img_select')).height(20)}}@Builder centerBuilder() {Row() {Text('自定义').onClick(() => {toast('点击自定义')})Image($r('app.media.img_select')).height(20)}}build() {Column() {CommonTitleBar({leftType: Constants.TYPE_LEFT_CUSTOM_VIEW,leftCustomView: this.leftBuilder,leftText: "企业通讯录",rightType: Constants.TYPE_RIGHT_CUSTOM_VIEW,rightCustomView: this.rightBuilder,rightText: '确定',centerType: Constants.TYPE_CENTER_SEARCH_VIEW,centerText: "居中",centerCustomView: this.centerBuilder,onClickLeftText: (): void => {toast('AAA')},onClickLeftImage: (): void => {toast('onClickLeftImage')},onSubmitSearch: (value): void => {toast(value);},onChangeSearch: (value): void => {toast(value);}})}.width(StyleConstants.FULL_WIDTH).height(StyleConstants.FULL_WIDTH)}
}

本文来自互联网用户投稿，该文观点仅代表作者本人，不代表本站立场。本站仅提供信息存储空间服务，不拥有所有权，不承担相关法律责任。如若转载，请注明出处：http://www.mzph.cn/pingmian/4465.shtml

如若内容造成侵权/违法违规/事实不符，请联系多彩编程网进行投诉反馈email:809451989@qq.com，一经查实，立即删除！

相关文章

数据结构 - 顺序表

数据结构 - 顺序表

一. 线性表的概念 线性表（linear list）是n个具有相同特性的数据元素的有限序列。 线性表是一种在实际中广泛使用的数据结构，常见的线性表：顺序表、链表、栈、队列、字符串... 线性表在逻辑上是线性结构，也就说是连续的…
阅读更多...
django小技巧

django小技巧

1、django model中的表注释和字段注释迁移到数据库中 参考链接：https://blog.csdn.net/htsssss/article/details/131932381
阅读更多...
调用示例、python语言调用翔云发票查验接口、发票OCR接口

调用示例、python语言调用翔云发票查验接口、发票OCR接口

python语言调用翔云发票查验接口、发票OCR接口其实方法很简单，只需要能看懂开发代码，然后在翔云开发者中，下载所需要的语言开发示例，更换产品参数即可。 发票管理是企业日常工作中不可或缺的一环，但传统的发票查验和识…
阅读更多...
Github进行fork后如何与原仓库同步[解决git clone 太慢的问题]

Github进行fork后如何与原仓库同步[解决git clone 太慢的问题]

前言 fork了一个仓库以后怎么同步源仓库的代码？ 先说一下git clone太慢的问题，可以通过代理拉取代码，具体请看： https://gitclone.com/ 步骤 1、执行命令 git remote -v 查看你的远程仓库的路径。 以一个实际例子说明&#x…
阅读更多...
23种设计模式简单记录

23种设计模式简单记录

23种设计模式主要分为三大类：创建型模式、结构型模式和行为型模式。下面是这些设计模式的概览： 创建型模式（Creational Patterns） 单例模式（Singleton）：确保一个类只有一个实例，并…
阅读更多...
Swift - Hello World

Swift - Hello World

文章目录 Swift - Hello World1. Hello World Swift - Hello World 1. Hello World 不用编写main函数，Swift将全局范围内的首句可执行代码作为程序入口一句代码尾部可以省略分号（;），多句代码写到同一行时必须用分号（…
阅读更多...
docker容器通俗理解

docker容器通俗理解

前言 如果大家没使用过Docker,就在电脑上下载一个VMware Workstation Pro，创建一个虚拟机安装一个windows操作一下感受一下,为什么我的电脑上还以再安装一台windows主机？其实你可以理解为Docker就是Linux系统的一个虚拟机软件。 我的Windows也可以安装…
阅读更多...
【高校科研前沿】东北地理所孙敬轩博士为一作在《中国科学：地球科学（中英文版）》发文：气候变化下东北地区农业绿水安全风险评估

【高校科研前沿】东北地理所孙敬轩博士为一作在《中国科学：地球科学（中英文版）》发文：气候变化下东北地区农业绿水安全风险评估

目录 01 文章简介 02 研究内容 03 文章引用 04 期刊简介 01 文章简介 论文名称：Risk assessment of agricultural green water security in Northeast China under climate change（气候变化下东北地区农业绿水安全风险评估） 第一作者及…
阅读更多...
unity计算三维空间下点到线，点到面，线到线，线到面，面到面最短距离的点的方法

unity计算三维空间下点到线，点到面，线到线，线到面，面到面最短距离的点的方法

通用的一个方法GetDistance&#xff0c;计算两个点的距离&#xff0c;不开平方 /// <summary> /// 获取两个点的距离&#xff0c;不开平方 /// </summary> /// <param name"a"></param> /// <param name"b"></param>…
阅读更多...
猫咪冻干究竟怎么选不踩雷？这几款生骨肉冻干一定适合你家喵

猫咪冻干究竟怎么选不踩雷？这几款生骨肉冻干一定适合你家喵

315中国之声的报道揭示了河北省邢台市南和区某宠粮代工厂的“行业秘密”&#xff0c;这无疑给广大宠物主人敲响了警钟。配料表上标注的鸡肉含量高达52%&#xff0c;新鲜鸡小胸占20%&#xff0c;然而所谓的鲜鸡肉实际上却是鸡肉粉。我们养宠物本是为了心灵上的慰藉&#xff0c;但…
阅读更多...
栈和队列总结

栈和队列总结

文章目录 前言一、栈和队列的实现1.栈的具体实现2.循环顺序队列的具体实现 二、栈和队列总结总结 前言 T_T此专栏用于记录数据结构及算法的&#xff08;痛苦&#xff09;学习历程&#xff0c;便于日后复习&#xff08;这种事情不要啊&#xff09;。所用教材为《数据结构 C语言版…
阅读更多...
揭秘Linux文件系统

揭秘Linux文件系统

前言 在上一篇文件描述符详解中谈论的都是打开的文件&#xff0c;但是在我们的系统中不仅有打开的文件还有许多未打开的文件&#xff0c;那么这些未打开的文件又该如何理解呢?阅读完本篇文章相信你会得到答案。 如果觉得文章内容对你有所帮助的话&#xff0c;可以给博主一键三…
阅读更多...
langfuse使用零星记录

langfuse使用零星记录

目录 前言 一、langfuse是什么&#xff1f; 二、使用零星记录 1.评估打分 2.score的问题与解决 总结 前言 langfuse使用过程的一些坑点&#xff0c;做一些记录&#xff0c;便于日后回顾查找&#xff0c;也为同样在学习的小伙伴们异同一些可能的帮助。 期望在学习使用一…
阅读更多...
centos7.9离线安装rke2

centos7.9离线安装rke2

使用rke2安装k8s,master节点有三台&#xff0c;agent节点一台&#xff0c;三台master通过etcd存储保证master节点的高可用&#xff0c;使用nginx对master进行负载均衡。 主机清单如下 ip主机名称用途192.168.16.72node72server节点192.168.16.73node73master节点192.168.16.7…
阅读更多...
常用excel操作笔记

常用excel操作笔记

一、表达式 1. 查找excel中一列值出现在另外一列中 IF(SUMPRODUCT(--(ISNUMBER(SEARCH($A$1:$A$101,C2)))),1,0) 2.计算某个字符出现的次数 LEN(G2)-LEN(SUBSTITUTE(G2,">",))1 3.拼接字符串 C2&"|"&A2 4.根据当前日期生成19位id TEXT(TODAY…
阅读更多...
MySQL语句，使用replace替换数据后，有小数时，使用round等方法无法取整

MySQL语句，使用replace替换数据后，有小数时，使用round等方法无法取整

15.55这个数字 replace替换数据后乘以100&#xff0c;在Navicat中运行&#xff0c;是显示整数 但是在Python中调用SQL语句&#xff0c;使用replace替换数据并乘以100后&#xff0c;会显示有一位小数&#xff0c;并且使用round等方法无法取整 最终采用cast函数将replace后的数…
阅读更多...
新装电脑Flutter环境部署坑汇总(持续更新)

新装电脑Flutter环境部署坑汇总(持续更新)

1.本地安装&#xff0c;安装fvm的坑 本人电脑使用windows &#xff0c;安装fvm则一般使用choco安装&#xff0c;那么首先需要安装choco,打开powershell/或者cmd运行以下命令&#xff1a; Set-ExecutionPolicy Bypass -Scope Process -Force; [System.Net.ServicePointManager…
阅读更多...
5.2 海思SS928开发 - kernle开发 - 构建脚本

5.2 海思SS928开发 - kernle开发 - 构建脚本

5.2 kernle开发 - 构建脚本 SS928 kernel 提供了 makefile 用于 kernel 构建。想要得到最后的内核镜像&#xff0c;还要经过许多步骤&#xff0c;每次都手敲命令的话&#xff0c;会把我累死。自己实现一个构建脚本&#xff0c;支持以下常用功能即可&#xff1a; 构建内核镜像配…
阅读更多...
图像置乱加密-Arnold加密算法

图像置乱加密-Arnold加密算法

置乱加密是另一种较常用的加密方法&#xff0c;现也被许多文献选用&#xff0c;置乱加密可以是以像素为单位进行全局置乱&#xff0c;该方式打乱了图像像素值的位置&#xff0c;使其图像内容失去相关性&#xff0c;达到保护的目的。也可以是以块为单位进行置乱&#xff0c;该方…
阅读更多...
Kafka报错ERROR Exiting Kafka due to fatal exception during startup

Kafka报错ERROR Exiting Kafka due to fatal exception during startup

报错&#xff1a; ERROR Exiting Kafka due to fatal exception during startup. (kafka.Kafka$) kafka.common.InconsistentClusterIdException: The Cluster ID FSzSO50oTLCRhRnRylihcg doesnt match stored clusterId Some(0oSLohwtQZWbIi73YUMs8g) in meta.properties. Th…
阅读更多...
最新文章

Copyright @ 2022~2023