在HarmonyOS Next中开发一个简单的通用标题导航栏
# 在 HarmonyOS Next 中开发简单的通用头部导航栏
在日常页面开发中，大多数页面需要一个头部来显示导航控件和页面信息。为每个页面重复编写这段代码效率低下，并且会导致实现不一致。本指南演示如何创建一个可重用的头部组件。
## 第一步：创建 NavBar 组件
创建一个新的 ArkTS 文件，并使用 `@Component` 装饰器定义自定义组件：
```typescript
import Utils from "../common/utils/Utils";
@Component
export struct NavBar {
// 组件实现将在这里进行
}
```
## 第二步：实现组件属性和 UI
添加属性并构建头部 UI：
```typescript
import Utils from "../common/utils/Utils";
@Component
export struct NavBar {
@Prop title: string = ''; // 头部标题文本
@Prop backImg: string = ''; // 自定义返回按钮图标路径
@Prop bgColor: string = '#FFFFFF'; // 头部背景颜色
@Prop customBack?: () => void; // 自定义返回按钮处理函数
@Prop mode: string = 'center'; // 标题对齐方式：'center' 或 'left'
build() {
Row() {
// 返回按钮部分
Row() {
Image(this.backImg || Utils.getImgPath('home/adult_page_back_black.png'))
.width(Utils.getVp(48))
.height(Utils.getVp(48))
.objectFit(ImageFit.Cover)
}
.onClick(() => {
// 如果提供了自定义处理函数，则使用它，否则使用默认的返回导航
this.customBack ? this.customBack() : router.back();
})
// 标题部分
Row() {
Text(this.title)
.fontColor('#191B27')
.fontSize(Utils.getVp(33))
.fontWeight(FontWeight.Bold)
.textAlign(this.mode === 'center' ? TextAlign.Center : TextAlign.Start)
.width('100%')
}
.margin({ left: this.mode === 'center' ? 0 : Utils.getVp(20) })
.flexShrink(1) // 允许收缩以适应内容
.height('100%')
}
.width('100%')
.padding({ left: Utils.getVp(32), right: Utils.getVp(32) })
.height(Utils.getVp(88))
.backgroundColor(this.bgColor)
}
}
```
## 第三步：在父视图中使用组件
### 居中对齐标题示例：
```typescript
import { NavBar } from './component/NavBar';
@Entry
@Component
struct ParentPage {
build() {
Column() {
NavBar({ title: '页面标题', mode: 'center' })
// 页面内容在这里
}
.width('100%')
.height('100%')
}
}
```
### 左对齐标题示例：
```typescript
import { NavBar } from './component/NavBar';
@Entry
@Component
struct ParentPage {
build() {
Column() {
NavBar({ title: '页面标题', mode: 'left' })
// 页面内容在这里
}
.width('100%')
.height('100%')
}
}
```
## 自定义选项
1. *自定义图标*：传入 `backImg` 属性并指定图像路径
```typescript
NavBar({
title: '设置',
backImg: Utils.getImgPath('icons/custom_back.png')
})
```
2. *自定义背景*：更改头部颜色
```typescript
NavBar({
title: '个人资料',
bgColor: '#F5F5F5'
})
```
3. *自定义返回操作*：重写默认导航
```typescript
NavBar({
title: '结账',
customBack: () => { /* 自定义逻辑 */ }
})
```
## 主要特性
- *响应式设计*：使用 `Utils.getVp()` 适应不同屏幕尺寸
- *灵活布局*：标题对齐选项（居中/左对齐）
- *可定制性*：支持自定义图标、颜色和行为
- *一致的 UI*：确保应用程序中头部外观统一
- *易于集成*：基于属性的简单配置
该实现提供了一个可重用的、可定制的头部组件，消除了代码重复，并确保在整个 HarmonyOS Next 应用程序中提供一致的导航体验。
查看原文
# Developing a Simple Universal Header Navigation Bar in HarmonyOS Next<p>In daily page development, most pages require a header to display navigation controls and page information. Repeating this code for every page is inefficient and leads to inconsistent implementations. This guide demonstrates how to create a reusable header component.<p>## Step 1: Create the NavBar Component<p>Create a new ArkTS file with a `@Component` decorated custom component:<p>```
import Utils from "../../../common/utils/Utils";<p>@Component
export struct NavBar {
// Component implementation will go here
}
```<p>## Step 2: Implement Component Properties and UI<p>Add properties and build the header UI:<p>```
import Utils from "../../../common/utils/Utils";<p>@Component
export struct NavBar {
@Prop title: string = ''; // Header title text
@Prop backImg: string = ''; // Custom back button icon path
@Prop bgColor: string = '#FFFFFF';// Header background color
@Prop customBack?: () => void; // Custom back button handler
@Prop mode: string = 'center'; // Title alignment: 'center' or 'left'<p><pre><code> build() {
Row() {
// Back button section
Row() {
Image(this.backImg || Utils.getImgPath('home/adult_page_back_black.png'))
.width(Utils.getVp(48))
.height(Utils.getVp(48))
.objectFit(ImageFit.Cover)
}
.onClick(() => {
// Use custom handler if provided, else default back navigation
this.customBack ? this.customBack() : router.back();
})
// Title section
Row() {
Text(this.title)
.fontColor('#191B27')
.fontSize(Utils.getVp(33))
.fontWeight(FontWeight.Bold)
.textAlign(this.mode === 'center' ? TextAlign.Center : TextAlign.Start)
.width('100%')
}
.margin({ left: this.mode === 'center' ? 0 : Utils.getVp(20) })
.flexShrink(1) // Allow shrinking to fit content
.height('100%')
}
.width('100%')
.padding({ left: Utils.getVp(32), right: Utils.getVp(32) })
.height(Utils.getVp(88))
.backgroundColor(this.bgColor)
}</code></pre>
}
```<p>## Step 3: Using the Component in Parent Views<p>### Center-aligned Title Example:<p>```
import { NavBar } from './component/NavBar';<p>@Entry
@Component
struct ParentPage {
build() {
Column() {
NavBar({ title: 'Page Title', mode: 'center' })
// Page content here
}
.width('100%')
.height('100%')
}
}
```<p>### Left-aligned Title Example:<p>```
import { NavBar } from './component/NavBar';<p>@Entry
@Component
struct ParentPage {
build() {
Column() {
NavBar({ title: 'Page Title', mode: 'left' })
// Page content here
}
.width('100%')
.height('100%')
}
}
```<p>## Customization Options<p>1. *Custom Icons*: Pass `backImg` property with image path<p><pre><code> ```
NavBar({
title: 'Settings',
backImg: Utils.getImgPath('icons/custom_back.png')
})
```
</code></pre>
2. *Custom Background*: Change header color<p><pre><code> ```
NavBar({
title: 'Profile',
bgColor: '#F5F5F5'
})
```
</code></pre>
3. *Custom Back Action*: Override default navigation<p><pre><code> ```
NavBar({
title: 'Checkout',
customBack: () => { /* Custom logic */ }
})
```
</code></pre>
## Key Features<p>- *Responsive Design*: Adapts to different screen sizes using `Utils.getVp()`
- *Flexible Layout*: Title alignment options (center/left)
- *Customizable*: Supports custom icons, colors, and behaviors
- *Consistent UI*: Ensures uniform header appearance across application
- *Easy Integration*: Simple props-based configuration<p>This implementation provides a reusable, customizable header component that eliminates code duplication and ensures consistent navigation experiences throughout your HarmonyOS Next application.