【HarmonyOS】自定义组件之ArkUI实现通用标题栏组件

原创 于 2023-05-04 10:09:36 发布 · 1.9k 阅读 · 3 ·
CC 4.0 BY-SA版权
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
文章标签：

#harmonyos #华为 #java

本文档介绍了如何使用 ArkTS 在 HarmonyOS 中实现一个通用标题栏组件。组件包含左侧文本按钮、中间文本和右侧图片按钮，详细阐述了自定义组件的创建过程和属性定义，并提供了在其他页面引用组件的示例。

摘要生成于 C知道 ，由 DeepSeek-R1 满血版支持， 前往体验 >

【关键字】

标题栏、常用内置组件整合、ArkUI、自定义组件

1、写在前面

在上一篇文章中我们通过Java语言实现了一个通用的标题栏组件，有需要的可以看下，文章地址：

华为开发者论坛

现在很多朋友都已经转战ArkTS语言了，那么今天就来使用ArkTS实现一个同样的通用标题栏组件，样式选择还和之前保持一致，左侧文本按钮、中间文本、右侧图片按钮，关于样式，大家可以自行根据项目实际需求进行修改，废话不多说，下面进入代码实战吧！

2、自定义标题栏

首先，新建一个CommonTitleBar.ets文件，在该文件中封装通用标题栏组件：

cke_501.png

然后，定义标题栏组件需要的相关属性：

cke_1153.png

最后，在标题栏组件类中使用内置组件拼装组合，创建上面定义

最低0.47元/天 解锁文章
博客
【HarmonyOS】元服务和APP的相互跳转、相互成就
05-31 2844
这些原生APP仿佛有一大堆话憋在肚子里，试图通过右上方的提示气泡呼唤用户，仿佛再说：点我，点我。随着鸿蒙生态的发展，各种类型的应用都已经可以在Harmony OS上无差异的运行，面对鸿蒙新兴元服务的兴起，各大厂家可能都在考虑一个问题：如果已经有APP了，有必要再开发一款元服务吗？（二）充分利用元服务的各种接入方式和免安装的特点抢先服务用户，抢占用户；（一）通过APP引导用户添加元服务到桌面，即可以让用户使用更加方便；有了元服务再逐步引导用户下载APP享用更丰富的APP能力，跟用户深度绑定；
博客
【HarmonyOS】hap包在多台设备中安装和HarmonyOS应用含多个module安装问题
05-30 4142
若您的应用已在AGC上申请应用，需要使用手动签名方式，将应用appid与签名信息关联，在发布HarmonyOS应用前，建议您在本地进行调试，您需要提前申请相应的调试证书与调试Profile给HAP进行签名后，才可安装到设备上运行。注意：一个帐号最多可申请两个调试证书，您需要至少预留一个调试证书位置才可自动签名成功，若您自动签名失败，请检查您的帐号中“证书管理”是否已申请了两个调试证书。若您的应用创建多个module，需要同事安装多个模块的hap包到设备中，您可参考下方步骤配置后，再重新运行项目。
博客
【快应用】多语言适配案例
05-30 1769
多个资源文件会按一定顺序进行匹配，例如：对于zh-CN，则按zh-CN -> zh -> zh-* -> defaults的顺序匹配，其中zh-*匹配到多个，则按字母升序区分大小写排序。快应用平台的能力会覆盖多个国家地区，平台支持多语言的能力后，可以让一个快应同时支持多个语言版本的切换，开发者无需开发多个不同语言的源码项目，避免给项目维护带来困难。使用系统默认的语言，开发者配置多语言的方式非常简单，只需要定义资源与引用资源两个步骤即可。1、资源文件的定义，即资源文件的创建。
博客
【HarmonyOS】初识低代码平台开发元服务
05-30 2075
OK，通过上述几个步骤我们就已经完成了这个轮播图的低代码开发了。创建项目的过程这里就不再赘述了，详情可以参考上文中的指导文档。HarmonyOS、低代码平台、元服务开发、拖拽式开发。
博客
【AGC】云监控日志服务查询不到Logger日志相关问题
05-29 1455
后来咨询了cp的项目ID和函数是事件函数，在后台查询到cp的云函数并没注册上去，在后台手动给注册上去了，解决问题。在使用云监控功能时，虽然创建项目后会自动开通云监控，但是需要cp先开通云函数，才能在云监控中看到Logger日志。开发者反馈在使用AGC云监控，填写了Logger日志，但是在云监控的日志服务查不到的问题。云函数按要求写了Logger日志，但是在云监控的日志服务页面查询不到，监控大盘页面也没有调用记录。但是cp反馈是有云监控权限的，排除这个可能性。
博客
【HMS Core】Health Kit关于获取历史数据问题
05-29 1548
如果用户已授权一年的权限，则可以查询用户授权时间前一年内的健康数据。应用已经开通了历史数据访问权限，同时用户在授权页面已经勾选了”历史数据“项，然后我们是调用healthkit的rest接口查询健康数据，那么是否用户授权之前一年的健康数据都能被查询到呢？REST API 周的历史数据权限：https://www.huawei.com/healthkit/historydata.open.week。需要申请历史数据权限，使用历史数据权限，需要在认证鉴权时的scope参数中添加历史数据权限，供用户选择授权。
博客
【HarmonyOS】【FAQ】HarmonyOS应用开发相关问题解答（二）
05-26 2177
不可以，申请LOCATION_IN_BACKGROUND权限必须同时申请LOCATION权限，两个权限一起申请的时候，弹出权限确认框，用户可以选择“仅在使用期间允许”和“始终允许”；海外版本较国内版本而言更新较慢，暂不推荐海外开发者使用国内较高版本，因为高版本相关SDK并未推送至海外，可能会导致部分SDK无法下载。此问题在API 9已解决，旧版本无法回合可采取其他方式规避，如：获取焦点软键盘弹起后，可将表单位置上移。此外，可以看下DataAbility功能，支持不同的应用间共享文件。
博客
【快应用】响应式布局适配横竖屏或折叠屏
05-26 1843
当前开发者在开发快应用时，往往将designWidth设置为设备屏幕的宽度，这时，应用的内容会随着设备宽度的变大而拉伸显示，导致在大屏、横屏、折叠屏展开时显示效果不好。通过使用快应用的响应式布局能力开发新应用或者改造已有应用，可以使快应用在手机、平板、智慧屏等各种尺寸的设备都有良好的展示效果。根据屏幕的宽度来判断一行渲染几张图片，以下示例实现了根据屏幕宽度来控制list展示列数的效果。在折叠屏合起和展开的效果如下，可以看出页面各元素尺寸在展开时明显变大了。响应式布局、折叠屏、横竖屏。
博客
【HMS Core】【ML Kit】活体检测FAQ合集
05-25 2369
欲了解更多更全技术文章，欢迎访问https://developer.huawei.com/consumer/cn/forum/?网站下载自己应用的“agconnect-services.json”文件，拷贝到示例工程的应用级根目录下。修改示例工程中应用级“build.gradle”文件中的applicationId为您自己的应用包名。（具体何时更新，请关注官网动态）您可先扫描图片中二维码下载APK测试，动态活体检测需按照APK上述提示测试。活体检测暂不支持横屏、分配检测（后续是否支持，请持续关注官网动态）
博客
【HarmonyOS】低代码元服务开发中的地图实现
05-25 1868
2、这边我们将示例中的代码，拷贝到新建的文件demo.html中，将demo.html文件放置于HarmonyOS工程的资源目录下（entry/src/main/resources/rawfile/）。）集成了地图但是并没有通过SDK的方式导入的地图，使用的是WebView+本地html+腾讯Javascript API GL的方式实现的地图，下面给大家讲述一下具体实现的流程。然后我们需要实现的是WebView加载本地Html，在官网我们可以找到加载资源文件和本地文件的方法（这正好解决了我们的问题。
博客
【HMS Core】音频编辑服务音频分离一直提示1007模型文件下载失败
05-24 716
2、在AppGallery Connect中检查应用的视频编辑服务开关是否开启。如果未开启，请在AppGallery Connect中开启，开关开启后受缓存影响，需要等待一段时间才会生效。3、在AppGallery Connect中检查是否配置了签名信息，并确认打包Apk的签名信息是否与AppGallery Connect中配置的一致，重新添加签名信息后，受缓存影响，需要等待一段时间才会生效。1、在代码中检查鉴权信息是否已设置。4、检查素材数据是否已编排，请参见“编排素材”章节。
博客
【快应用】如何实现地图位置点实时刷新
05-24 858
欲了解更多更全技术文章，欢迎访问https://developer.huawei.com/consumer/cn/forum/?需要对地图上点的文本弹框做显示设置（把markers-callout子属性的display设置为always），并对坐标位置变化做回调弹出文本显示处理。如下图所示，地图上点的位置坐标已发生变化，但是文本弹框还显示在原位置，并没有显示在新位置。快应用map组件中，地图上点的文本弹框不能跟随点的位置变化。1、将markers第一个点的值赋给一个临时变量。
博客
【AGC】云调试上传rpk包相关问题
05-19 787
建议开发者在使用AGC-云调试安装rpk包时，不安装快应用加载器（后台会自动安装），申请到设备后直接安装快应用安装包，以避免出现问题。开发者反馈在使用AGC云调试，上传rpk测试包时出现提示报错：安装失败，UNKNOWN_ERROR。这边使用开发者提供的测试包安装，按照正常步骤是可以正常安装。所以分析是开发者在云调试测试机上的安装步骤存在问题。出现故障的手机型号以及操作系统版本：华为nova4。在AGC-云调试使用云真机测试rpk包提示错误。使用真机测试包体能正常安装进入游戏。
博客
【HarmonyOS】【JS】小白的鸿蒙学习之路2--小小的图片啊，动呀动起来
05-19 1498
4、上面所有的组件都定义了class属性，它对应的样式都定义在index.css中。index.hml：此文件定义了index页面的布局、index页面中用到的组件，以及这些组件的层级关系。index.js：此文件定义了index页面的业务逻辑，比如数据绑定、事件处理等。en-US.json：此文件定义了在英文模式下页面显示的变量内容。zh-CN.json：此文件定义了在中文模式下页面显示的变量内容。index.css：此文件定义了index页面的样式。image组件、动画。
博客
【HarmonyOS】元服务混淆打包以及反混淆mapping文件生成
05-18 2093
当我们使用混淆配置后，对外发布的应用运行在手机上时，发生异常的报错也不会是原来的包名和类名，都会变成a.b.c这种混淆后代码，行号也会发生变化。在HarmonyOS元服务开发中，我们也可以通过开启混淆提高应用的安全性和压缩包体积。Android中的mapping.txt 文件会在 模块/outputs/mapping/release/mapping.txt 中，但是通过相同的方法我们在DevEco Studio工程目录下是找不到mapping.txt，这是为什么呢？
博客
【HarmonyOS】DevEco Studio 3.1 Beta2下载SDK失败，报错error notarget No matching version found for @webassembl
05-18 1294
DevEco Studio 3.1 Beta2版本，下载API 9 SDK时，npm install下载时报错"error notarget No matching version found for @webassemblyjs/[email protected]."，如下图所示。可能原因：npm缓存机制导致找不到@webassemblyjs/[email protected]版本，下载SDK时依赖@webassemblyjs/ast最新版本，下载@webassemblyjs/[email protected]版本失败导致下载SDK失败。
博客
【AGC】新版鸿蒙崩溃SDK集成使用方法
05-18 1419
我们知道AGC的Crash SDK都是需要强制集成华为分析SDK的，在使用时的崩溃数据上报都要依靠分析服务来完成，这就容易受到限制，有时出现无数据的情况就要依次排查崩溃SDK与分析SDK，比较麻烦。而就在不久前，鸿蒙崩溃的SDK做了全面更新，上报信息不再依赖华为分析服务SDK，并且后台数据展示也做了更新。在项目列表中找到您的项目，在项目下的应用列表中选择您需要启用崩溃服务的应用。现在鸿蒙崩溃SDK后台数据展示界面也与现在的Android应用不同了，做出了更细致的更新，下面向大家展示上报的崩溃数据界面。
博客
【AGC】接入分发和运营分析相关问题
05-16 793
事件参数参考链接：https://developer.huawei.com/consumer/cn/doc/development/HMSCore-Guides/user-behavior-0000001050745157#section3491121008。4、参数下的值的个数是否有限制，从实时概览-今日事件数-具体参数统计-下载（步骤见附件）的表格里面只展示的50条参数值的数据，实际的参数值我上传了上1000条。还是说今日的数据只展示/下载这么多，明天看事件分析的时候能看到全部的参数值。
博客
【HarmonyOS】这些HarmonyOS应用开发的问题你都了解吗？
05-16 1253
{"alive":true,"densityDPI":480,"densityPixels":3,"height":2376,"id":0,"name":"内置屏幕","refreshRate":60.000004,"rotation":0,"scaledDensity":3,"state":2,"width":1152,"xDPI":461.318,"yDPI":457.2}信息也不是当前从设置中读取的，设置里面的宽高拿到的是物理设备的，和我们真是的设备是有区别的。如何获取正确的屏幕分辨率？
博客
【HMS Core】Health Kit如何获取跑步锻炼记录的轨迹记录？
05-16 1037
使用接口，"/healthkit/v1/activityRecords"，可以正常获取跑步记录，但是里面没有附带轨迹数据，应该怎么获取每条记录的轨迹记录数据呢？
评论 1
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值