HarmonyOS开发：UI自定义导航栏组件-NavigationBarView

本文链接：https://blog.csdn.net/DMZDAMS/article/details/140637935

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	返回按钮的标题