华为鸿蒙应用--封装通用标题栏：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个具有相同特性的数据元素的有限序列。 线性表是一种在实际中广泛使用的数据结构，常见的线性表：顺序表、链表、栈、队列、字符串... 线性表在逻辑上是线性结构，也就说是连续的…
阅读更多...
Github进行fork后如何与原仓库同步[解决git clone 太慢的问题]

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

前言 fork了一个仓库以后怎么同步源仓库的代码？ 先说一下git clone太慢的问题，可以通过代理拉取代码，具体请看： https://gitclone.com/ 步骤 1、执行命令 git remote -v 查看你的远程仓库的路径。 以一个实际例子说明&#x…
阅读更多...
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（气候变化下东北地区农业绿水安全风险评估） 第一作者及…
阅读更多...
猫咪冻干究竟怎么选不踩雷？这几款生骨肉冻干一定适合你家喵

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

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

栈和队列总结

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

揭秘Linux文件系统

前言 在上一篇文件描述符详解中谈论的都是打开的文件，但是在我们的系统中不仅有打开的文件还有许多未打开的文件，那么这些未打开的文件又该如何理解呢?阅读完本篇文章相信你会得到答案。 如果觉得文章内容对你有所帮助的话，可以给博主一键三…
阅读更多...
新装电脑Flutter环境部署坑汇总(持续更新)

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

1.本地安装，安装fvm的坑 本人电脑使用windows ，安装fvm则一般使用choco安装，那么首先需要安装choco,打开powershell/或者cmd运行以下命令： Set-ExecutionPolicy Bypass -Scope Process -Force; [System.Net.ServicePointManager…
阅读更多...
图像置乱加密-Arnold加密算法

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

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

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

报错： 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…
阅读更多...
某宝因SSL证书过期无法正常访问，证书过期问题频发企业如何破局？

某宝因SSL证书过期无法正常访问，证书过期问题频发企业如何破局？

近日，有网友发现，某宝网站无法正常访问，出现“此连接非私人连接”提示，而导致此类提示的罪魁祸首是因为SSL证书过期！其实，近年来，因SSL证书过期导致的网站无法正常访问的事件频频发生&#xff0…
阅读更多...
vue2—— mixin 超级详细！！!

vue2—— mixin 超级详细！！!

mixin Mixin是面向对象程序设计语言中的类，提供了方法的实现。其他类可以访问mixin类的方法而不必成为其子类 Mixin类通常作为功能模块使用，在需要该功能时“混入”，有利于代码复用又避免了多继承的复杂 vue中的mixin 先来看一下官方定义 mi…
阅读更多...
YOLO-yolov5构建数据集

YOLO-yolov5构建数据集

1.收集数据集 创建一个dataset文件夹用来存放图片数据集。 我这里使用的图片数据集，是对一段视频进行抽帧得到的200张狗狗图片。 在dataset文件夹下新建images和labels文件夹，并将200张狗狗图片放入images中。 2.标注数据集 2.1安装标注工具labelimg…
阅读更多...
Jenkins邮件发送失败问题解决

Jenkins邮件发送失败问题解决

如下提示为 Extended E-mail Notification开启Debug模式下显示的错误信息， (Debug模式设置方法：Dashboard-> manage Jenkins->configure System)DEBUG SMTP: Attempt to authenticate using mechanisms: LOGIN PLAIN DIGEST-MD5 NTLM XOAUTH2 DEB…
阅读更多...
OpenCV——Bernsen局部阈值二值化方法

OpenCV——Bernsen局部阈值二值化方法

目录 一、Bernsen算法1、算法概述2、参考文献二、代码实现三、结果展示Bernsen局部阈值二值化方法由CSDN点云侠原创，爬虫自重。如果你不是在点云侠的博客中看到该文章，那么此处便是不要脸的爬虫。 一、Bernsen算法 1、算法概述 Bernsen 算法是另一种流行的局部阈值二值化方…
阅读更多...
网络相关知识总结

网络相关知识总结

1、网口设置 网口设置IP，即操作/etc/sysconfig/network-scripts路径下的ifcfg-xx文件 主要参数详解： DEVICE:网口名 ONBOOT：表示启动系统时是否激活网卡，yes为激活，no不激活 HWADDR:mac值 DEFROUTE://默认路由设置…
阅读更多...
Docker容器：docker基础

Docker容器：docker基础

目录 一.docker前言 云计算服务模式 关于 docker 产品 虚拟化产品有哪些？ ① 寄居架构 ② 源生架构 虚拟化技术概述 主流虚拟化产品对比 1. VMware系列 2. KVM/OpenStack 3. Xen 4. 其他半/全虚拟化产品 二. docker 的相关知识 1. docker 的概念 doc…
阅读更多...
[linux网络编程]UDP协议和TCP协议的使用

[linux网络编程]UDP协议和TCP协议的使用

目录 看以下内容前，你要先了解main函数带参数有什么用、 了解socket的相关函数接口 如果不了解socket的相关函数接口请先看我这篇文章 main函数带参数有什么用 UDP udp_server 1.生成socket文件描述符 2.填充sockaddr_in信息 3.bind 4.发（收&…
阅读更多...
学习100个Unity Shader (14) ---透明效果

学习100个Unity Shader (14) ---透明效果

文章目录 渲染队列透明度测试（Alpha Test）效果Shader 透明度混合（Alpha Blending）效果Shader 参考 渲染队列 由”Queue“ 标签决定，索引号越小越早被渲染： 名称队列索引号Background1000Geometry2000Alph…
阅读更多...
从虚拟化走向云原生，红帽OpenShift“一手托两家”

从虚拟化走向云原生，红帽OpenShift“一手托两家”

汽车行业已经迈入“软件定义汽车”的新时代。吉利汽车很清醒地意识到，只有通过云原生技术和数字化转型，才能巩固其作为中国领先汽车制造商的地位。 和很多传统企业一样，吉利汽车在走向云原生的过程中也经历了稳态业务与敏态业务并存带来的前所…
阅读更多...
推荐文章
最新文章

Copyright @ 2022~2023