当前位置：首页 > news >正文

HarmonyOS NEXT开发：UI导航栏组件-NavigationBarView

news 来源：原创 2024/9/20 1:09:32

NavigationBarView 是什么？

NavigationBarView是ArkTS上的UI自定义导航栏组件，内置了导航栏的返回按钮、标题、搜索入口、右侧按钮等常用微功能。

NavigationBarView结构展示

NavigationBarView                 
├── back
│   ├── back_icon
│   ├── back_title
├── centerContent
│   ├── nav_title
│   ├── nav_search
│      ├── search_icon                  
│      ├── search_placeholder
├── rightItems
│   ├── firstItem
│   ├── secondItem 
│   ├── thirdItem

创作背景

ArkTS不像Swift语言一样，没有存在栈容器导航栏，每个页面都需要自定义创建，虽然是一个很简单的组件定制，但也需要耽误一点时间。本着再小的工作量也需要有人做的态度，以及响应官方共建三方库组件的号召，在下不才，花点时间做出来大家一起用。在不影响当前版本的情况下，以后的迭代争取支持链式修改属性。

安装与使用

配置

在DevEco Studio内使用NavigationBarView
环境
- ArkTS-3.2.12.5 +
- API9 +
工程级package.json内配置:

"dependencies": {"@maple/navigationbarview": "1.0.5"
}

安装

ohpm i @maple/navigationbarview

使用

/** 导入 */
import { NavigationBarView } from '@maple/navigationbarview'build() {/** 举例：只使用标题 */NavigationBarView({title: "Hello World",showBack: false})
}

属性说明

No.	属性	说明
1	title	导航栏标题
2	titleFont	标题字体大小
3	titleColor	标题字体颜色
4	titleFontWeight	标题字体粗细
5	showBack	是否显示返回按钮
6	backImage	返回图标
7	backImageColor	返回图标的颜色
8	backImageSize	返回图标的大小
9	backImageLeftMargin	返回图标距离左侧屏幕的间距
10	backTitle	返回按钮的标题
11	backTitleColor	返回按钮的标题字体颜色
12	backTitleFont	返回按钮的标题字体大小
13	backTitleFontWeight	返回按钮的标题字体粗细
14	backTitleLeftMargin	返回按钮标题距离返回图标的间距
15	contentToCenter	中间内容是否保持居中
16	contentHorizontalSpace	中间内容距离两侧的间距
17	centerContentAlign	中间内容的对齐方式，可通过该值修改contentToCenter=false下title居左显示
18	searchPlaceholder	搜索框文本占位符
19	searchPlaceholderFontColor	搜索框文本占位符的字体颜色
20	searchPlaceholderFontSize	搜索框文本占位符的字体大小
21	searchPlaceholderFontWeight	搜索框文本占位符的字体粗细
22	searchImage	搜索框图标
23	searchImageColor	搜索框图标的颜色
24	searchImageSize	搜索框图标的大小
25	searchImageLeftMargin	搜索框图标距离左侧的间距
26	searchPlaceholderMargin	搜索框文本占位符的周边间距
27	searchBackgroundColor	搜索框的背景颜色
28	searchBarRadius	搜索框的圆角，默认为内容的高度
29	rightFirstImage	从右侧屏幕往左的第一个按钮的图片
30	rightSecondImage	从右侧屏幕往左的第二个按钮的图片
31	rightThirdImage	从右侧屏幕往左的第三个按钮的图片
32	rightImageSize	右侧功能按钮的图标大小，宽高都是该值
33	rightImageBoxWidth	右侧功能按钮的事件点击区域宽度，高度跟随内容的高度
34	rightImagesOnScreenRightMargin	右侧功能按钮距离右侧屏幕的间距
35	contentHeight	内容的高度
36	contentBottomSpace	内容距离底部的间距
37	navHeight	导航栏的总高度，该高度参考的程序为【我的华为】App
38	backClick	返回按钮的点击事件，如果存在返回标题，点击返回标题也会触发该事件
39	searchClick	搜索框的点击事件
40	rightFirstImageClick	从右侧屏幕往左的第一个按钮的点击事件
41	rightSecondImageClick	从右侧屏幕往左的第二个按钮的点击事件
42	rightThirdImageClick	从右侧屏幕往左的第三个按钮的点击事件
43	@BuilderParam centerContent	⭐️替换中间的内容文本，替换后，需要自己实现【标题】或【搜索框】
44	@BuilderParam rightFirstImageContent	⭐️从右侧屏幕往左的第一个按钮的内容替换，一般可用来改为文本控件或者组合图标（双层图标），通过设置rightImageBoxWidth来拉开间距
45	@BuilderParam rightSecondImageContent	⭐️从右侧屏幕往左的第二个按钮的内容替换，一般可用来改为文本控件或者组合图标（双层图标），通过设置rightImageBoxWidth来拉开间距
46	@BuilderParam rightThirdImageContent	⭐️从右侧屏幕往左的第三个按钮的内容替换，一般可用来改为文本控件或者组合图标（双层图标），通过设置rightImageBoxWidth来拉开间距

举例

效果图例

内容支持替换

build() {Column() {NavigationBarView({centerContent: () => {this.navigationBarTitleBuilder()},rightFirstImageContent: () => {this.rightFirstImageContentBuilder()}})}}@Builder navigationBarTitleBuilder() {// 可自定义中间的内容Text("替换后的组件演示").fontSize(16)}@Builder rightFirstImageContentBuilder() {// 可自定义功能按钮的内容Image($r("sys.media.ohos_app_icon")).objectFit(ImageFit.Contain).width(20).height(20)}

最后

小编在之前的鸿蒙系统扫盲中，有很多朋友给我留言，不同的角度的问了一些问题，我明显感觉到一点，那就是许多人参与鸿蒙开发，但是又不知道从哪里下手，因为资料太多，太杂，无从选择。有很多小伙伴不知道学习哪些鸿蒙开发技术？不知道需要重点掌握哪些鸿蒙应用开发知识点？而且学习时频繁踩坑，最终浪费大量时间。所以有一份实用的鸿蒙（HarmonyOS NEXT）文档用来跟着学习是非常有必要的。

为了确保高效学习，建议规划清晰的学习路线

GitCode - 全球开发者的开源社区,开源代码托管平台希望这一份鸿蒙学习文档能够给大家带来帮助~

鸿蒙（HarmonyOS NEXT）最新学习路线