在 HarmonyOS Next 中开发一个简单的通用头部导航栏
1 分•作者: flfljh•7 个月前
# 在 HarmonyOS Next 中开发一个简单的通用标题导航栏
<p>在日常的页面开发中，大多数页面都需要一个标题栏来显示导航控件和页面信息。为每个页面重复编写这些代码效率低下，并且会导致实现不一致。本指南演示了如何创建一个可重用的标题组件。</p>
<p>## 步骤 1：创建 NavBar 组件</p>
<p>创建一个新的 ArkTS 文件，使用 `@Component` 装饰的自定义组件：</p>
```
import Utils from "../../../common/utils/Utils";
@Component
export struct NavBar {
// 组件实现将在此处
}
```
<p>## 步骤 2：实现组件属性和 UI</p>
<p>添加属性并构建标题 UI：</p>
```
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)
}
}
```
<p>## 步骤 3：在父视图中使用组件</p>
<p>### 居中对齐标题示例：</p>
```
import { NavBar } from './component/NavBar';
@Entry
@Component
struct ParentPage {
build() {
Column() {
NavBar({ title: '页面标题', mode: 'center' })
// 页面内容在这里
}
.width('100%')
.height('100%')
}
}
```
<p>### 左对齐标题示例：</p>
```
import { NavBar } from './component/NavBar';
@Entry
@Component
struct ParentPage {
build() {
Column() {
NavBar({ title: '页面标题', mode: 'left' })
// 页面内容在这里
}
.width('100%')
.height('100%')
}
}
```
<p>## 自定义选项</p>
<p>1. *自定义图标*：使用图像路径传递 `backImg` 属性</p>
```
NavBar({
title: '设置',
backImg: Utils.getImgPath('icons/custom_back.png')
})
```
<p>2. *自定义背景*：更改标题颜色</p>
```
NavBar({
title: '个人资料',
bgColor: '#F5F5F5'
})
```
<p>3. *自定义返回操作*：覆盖默认导航</p>
```
NavBar({
title: '结账',
customBack: () => { /* 自定义逻辑 */ }
})
```
<p>## 主要特性</p>
- *响应式设计*：使用 `Utils.getVp()` 适应不同的屏幕尺寸
- *灵活的布局*：标题对齐选项（居中/左对齐）
- *可定制*：支持自定义图标、颜色和行为
- *一致的 UI*：确保应用程序中统一的标题外观
- *易于集成*：基于 props 的简单配置
<p>此实现提供了一个可重用的、可定制的标题组件，消除了代码重复，并确保在整个 HarmonyOS Next 应用程序中提供一致的导航体验。</p>
查看原文
# 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.