HarmonyOS应用《玄象》开发实战：HomePage 顶部标题栏的 Row + Blank 三段式布局

阅读时长：约 19 分钟 | 难度：★★★★☆ | 篇章：第 3 篇 · 首页与功能导航
对应源码：entry/src/main/ets/pages/HomePage.ets

前言

首页顶部标题栏是用户进入应用后最先看到的功能性区域。玄象项目首页采用Row+Blank三段式布局：左侧"☰"菜单按钮、中间"玄象"标题与今日干支、右侧"🔔"通知按钮。这种布局结构在 ArkUI 中极为常见，掌握Row横向布局、Blank弹性占位、Column嵌套居中三大技巧，您就能为任何 HarmonyOS 应用打造标准化的顶部标题栏。

提示：三段式布局是移动端顶部导航的"事实标准"——左侧返回/菜单、中间标题、右侧操作按钮。玄象项目用最简代码实现了这一标准布局。

一、HomePage 完整源码概览

1.1 顶部标题栏源码

build(){Column(){// 顶部标题栏Row(){Text('☰').fontSize(24).fontColor(Colors.PRIMARY_GOLD)Blank()Column({space:4}){Text('玄象').fontSize(28).fontWeight(FontWeight.Bold).fontColor(Colors.PRIMARY_GOLD)Text(this.todayGanZhi).fontSize(14).fontColor(Colors.TEXT_SECONDARY)}Blank()Text('🔔').fontSize(24).fontColor(Colors.PRIMARY_GOLD)}.width('100%').padding({left:16,right:16,top:50,bottom:12})}}

1.2 三段式布局结构

┌──────────────────────────────────────────────┐ │ ☰ 玄象 🔔 │ │ 甲辰年│肖龙 │ └──────────────────────────────────────────────┘ ↑ ↑ ↑ 左侧菜单 中间标题 右侧通知

二、Row 横向布局容器

2.1 Row 基本用法

Row(){Text('左')Text('中')Text('右')}.width('100%')

Row容器让子元素按从左到右的顺序横向排列。

2.2 Row 关键属性

2.3 padding 内边距详解

玄象项目顶部标题栏的padding：

.padding({left:16,right:16,top:50,bottom:12})

提示：玄象项目top: 50是为了避开状态栏（手机顶部约 24-50vp 是状态栏区域）。在生产环境，应通过window.getWindowAvoidArea动态获取安全区域。

三、Blank 弹性占位

3.1 Blank 的作用

Blank是 ArkUI 的弹性占位组件，在Row或Column中填充剩余空间。

Row(){Text('左')Blank()// ← 弹性占位Text('右')}

Blank让"左"贴左、"右"贴右，中间被Blank撑开。

3.2 玄象项目双 Blank 布局

Row(){Text('☰')// 左侧Blank()// 弹性占位 1Column(){...}// 中间Blank()// 弹性占位 2Text('🔔')// 右侧}

两个Blank平均分配剩余空间，让中间Column居中。

3.3 Blank vs justifyContent

实现"三段均分"的两种方式：

方式 1：Blank（玄象项目方案）

Row(){Text('左')Blank()Text('中')Blank()Text('右')}

方式 2：justifyContent

Row(){Text('左')Text('中')Text('右')}.justifyContent(FlexAlign.SpaceEvenly)

玄象项目选择Blank的原因：

• 中间Column内容垂直，需独立居中。
• Blank方案对中间内容的水平居中更精确。

提示：若中间内容是简单Text，两种方案效果一致。若中间是Column多行内容，Blank方案更可控。

四、Column 嵌套居中

4.1 中间 Column 结构

Column({space:4}){Text('玄象').fontSize(28).fontWeight(FontWeight.Bold).fontColor(Colors.PRIMARY_GOLD)Text(this.todayGanZhi).fontSize(14).fontColor(Colors.TEXT_SECONDARY)}

4.2 Column 关键参数

Column({ space: 4 })让主标题"玄象"与副标题"甲辰年│肖龙"间距为 4vp。

4.3 嵌套 Column 的设计意图

Row ├── Text "☰" ├── Blank ├── Column ← 嵌套 Column │ ├── Text "玄象" │ └── Text "甲辰年│肖龙" ├── Blank └── Text "🔔"

玄象项目使用嵌套Column的设计意图：

• 主标题与副标题垂直堆叠。
• 副标题字号更小，颜色更淡，形成视觉层次。
• 整个Column在Row中水平居中。

五、状态变量 todayGanZhi

5.1 状态定义

@StatetodayGanZhi:string='';

玄象项目用todayGanZhi存储今日干支字符串。

5.2 aboutToAppear 中初始化

aboutToAppear():void{this.todayGanZhi=LunarCalendar.getTodayGanZhi();// ...}

玄象项目在aboutToAppear中调用LunarCalendar.getTodayGanZhi()初始化今日干支。

5.3 数据流

aboutToAppear ↓ LunarCalendar.getTodayGanZhi() ↓ this.todayGanZhi = '甲辰年│肖龙' ↓ @State 变化触发 build 重新渲染 ↓ Text(this.todayGanZhi) 显示 "甲辰年│肖龙"

提示：玄象项目首页标题栏的"今日干支"是首页与历法模块的视觉纽带。用户看到"甲辰年"会自然联想到干支推算功能。

六、emoji 图标的兼容性

6.1 玄象项目使用的 emoji

Text('☰')// 菜单（八卦中的乾卦符号）Text('🔔')// 通知

玄象项目顶部标题栏使用两个 emoji：

• “☰”：八卦中的乾卦符号，象征天
• “🔔”：通知铃铛

6.2 emoji 字体兼容性

emoji 的显示依赖系统字体：

6.3 emoji 渲染优化

emoji 是彩色字体，渲染开销高于普通文本。玄象项目仅在标题栏使用 emoji，数量少，性能无忧。

提示：玄象项目首页九宫格的"星宿""乐律"图标位置为空字符串，可能是设计稿中尚未确定的图标占位。

七、字体属性详解

7.1 主标题字体属性

Text('玄象').fontSize(28).fontWeight(FontWeight.Bold).fontColor(Colors.PRIMARY_GOLD)

7.2 副标题字体属性

Text(this.todayGanZhi).fontSize(14).fontColor(Colors.TEXT_SECONDARY)

7.3 视觉层次

玄象项目顶部标题栏的视觉层次：

八、顶部标题栏的扩展方向

8.1 添加搜索框

Row(){Text('☰')TextInput({placeholder:'搜索星宿/卦象'}).layoutWeight(1).backgroundColor(Colors.BG_CARD).borderRadius(20)Text('🔔')}

8.2 添加返回按钮

Row(){Text('←').onClick(()=>router.back())Blank()Text('星宿详情')Blank()Text('⋯')}

8.3 添加下拉菜单

Row(){Text('☰').onClick(()=>this.showSideMenu())Blank()Text('玄象')Blank()Text('🔔').onClick(()=>this.showNotifications())}

九、玄象项目标题栏设计原则

9.1 简约原则

玄象项目顶部标题栏仅 3 个元素（菜单 + 标题 + 通知），符合"少即是多"的设计哲学。

9.2 对称原则

[☰] [Blank] [Column] [Blank] [🔔] 左 占位 中 占位 右

左右两侧元素等宽（24vp 字号），视觉对称。

9.3 一致原则

玄象项目所有页面的标题栏遵循统一规范：

• 高度 50vp（顶部安全距离）
• 字号 28vp（主标题）
• 颜色Colors.PRIMARY_GOLD

总结

本篇以玄象项目首页顶部标题栏为蓝本，深入剖析了 ArkUIRow+Blank三段式布局：从Row横向布局、Blank弹性占位、Column嵌套居中，到padding内边距、状态变量绑定、emoji 兼容性、字体属性详解。掌握这套三段式布局方法论，您就能为任何 HarmonyOS 应用打造标准化的顶部标题栏。

下一篇：《22 · "今日天地"卡片：border + shadow + borderRadius 的金边卡片范式》，将带您深入玄象项目首页"今日天地"卡片的实现细节。

如果这篇文章对你有帮助，欢迎点赞👍、收藏⭐、关注🔔，你的支持是我持续创作的动力！

相关资源：

• HarmonyOS 官方文档：Row 组件
• HarmonyOS 官方文档：Blank 组件
• HarmonyOS 官方文档：Column 组件
• HarmonyOS 官方文档：Padding 类型
• 开源鸿蒙跨平台社区：https://openharmonycrossplatform.csdn.net