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

阅读时长约 19 分钟 | 难度★★★★☆ | 篇章第 3 篇 · 首页与功能导航对应源码entry/src/main/ets/pages/HomePage.ets前言首页顶部标题栏是用户进入应用后最先看到的功能性区域。玄象项目首页采用RowBlank三段式布局左侧☰菜单按钮、中间玄象标题与今日干支、右侧通知按钮。这种布局结构在 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 三段式布局结构┌──────────────────────────────────────────────┐ │ ☰ 玄象 │ │ 甲辰年│肖龙 │ └──────────────────────────────────────────────┘ ↑ ↑ ↑ 左侧菜单 中间标题 右侧通知段位组件内容左侧Text“☰” 菜单图标中间Column“玄象” 今日干支右侧Text“” 通知图标二、Row 横向布局容器2.1 Row 基本用法Row(){Text(左)Text(中)Text(右)}.width(100%)Row容器让子元素按从左到右的顺序横向排列。2.2 Row 关键属性属性类型含义玄象项目值widthLength容器宽度100%heightLength容器高度默认包裹内容paddingPadding内边距{ left: 16, right: 16, top: 50, bottom: 12 }justifyContentFlexAlign主轴对齐-alignItemsVerticalAlign交叉轴对齐-2.3 padding 内边距详解玄象项目顶部标题栏的padding.padding({left:16,right:16,top:50,bottom:12})方向值含义left16左侧 16vp 内边距right16右侧 16vp 内边距top50顶部 50vp 内边距bottom12底部 12vp 内边距提示玄象项目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实现三段均分的两种方式方式 1Blank玄象项目方案Row(){Text(左)Blank()Text(中)Blank()Text(右)}方式 2justifyContentRow(){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 关键参数参数类型含义玄象项目值spaceLength子元素间距4Column({ space: 4 })让主标题玄象与副标题甲辰年│肖龙间距为 4vp。4.3 嵌套 Column 的设计意图Row ├── Text ☰ ├── Blank ├── Column ← 嵌套 Column │ ├── Text 玄象 │ └── Text 甲辰年│肖龙 ├── Blank └── Text 玄象项目使用嵌套Column的设计意图主标题与副标题垂直堆叠。副标题字号更小颜色更淡形成视觉层次。整个Column在Row中水平居中。五、状态变量 todayGanZhi5.1 状态定义StatetodayGanZhi:string;玄象项目用todayGanZhi存储今日干支字符串。5.2 aboutToAppear 中初始化aboutToAppear():void{this.todayGanZhiLunarCalendar.getTodayGanZhi();// ...}玄象项目在aboutToAppear中调用LunarCalendar.getTodayGanZhi()初始化今日干支。5.3 数据流aboutToAppear ↓ LunarCalendar.getTodayGanZhi() ↓ this.todayGanZhi 甲辰年│肖龙 ↓ State 变化触发 build 重新渲染 ↓ Text(this.todayGanZhi) 显示 甲辰年│肖龙提示玄象项目首页标题栏的今日干支是首页与历法模块的视觉纽带。用户看到甲辰年会自然联想到干支推算功能。六、emoji 图标的兼容性6.1 玄象项目使用的 emojiText(☰)// 菜单八卦中的乾卦符号Text()// 通知玄象项目顶部标题栏使用两个 emoji“☰”八卦中的乾卦符号象征天“”通知铃铛6.2 emoji 字体兼容性emoji 的显示依赖系统字体平台emoji 字体HarmonyOSNoto Color EmojiiOSApple Color EmojiAndroidNoto Color Emoji6.3 emoji 渲染优化emoji 是彩色字体渲染开销高于普通文本。玄象项目仅在标题栏使用 emoji数量少性能无忧。提示玄象项目首页九宫格的星宿乐律图标位置为空字符串可能是设计稿中尚未确定的图标占位。七、字体属性详解7.1 主标题字体属性Text(玄象).fontSize(28).fontWeight(FontWeight.Bold).fontColor(Colors.PRIMARY_GOLD)属性值含义fontSize28字号 28vpfontWeightFontWeight.Bold加粗fontColorColors.PRIMARY_GOLD金色7.2 副标题字体属性Text(this.todayGanZhi).fontSize(14).fontColor(Colors.TEXT_SECONDARY)属性值含义fontSize14字号 14vpfontColorColors.TEXT_SECONDARY次要文字色7.3 视觉层次玄象项目顶部标题栏的视觉层次层级元素字号颜色主“玄象”28金色次“甲辰年│肖龙”14灰色辅“☰” / “”24金色八、顶部标题栏的扩展方向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总结本篇以玄象项目首页顶部标题栏为蓝本深入剖析了 ArkUIRowBlank三段式布局从Row横向布局、Blank弹性占位、Column嵌套居中到padding内边距、状态变量绑定、emoji 兼容性、字体属性详解。掌握这套三段式布局方法论您就能为任何 HarmonyOS 应用打造标准化的顶部标题栏。下一篇《22 · 今日天地卡片border shadow borderRadius 的金边卡片范式》将带您深入玄象项目首页今日天地卡片的实现细节。如果这篇文章对你有帮助欢迎点赞、收藏⭐、关注你的支持是我持续创作的动力相关资源HarmonyOS 官方文档Row 组件HarmonyOS 官方文档Blank 组件HarmonyOS 官方文档Column 组件HarmonyOS 官方文档Padding 类型开源鸿蒙跨平台社区https://openharmonycrossplatform.csdn.net