HarmonyOS运动健康——个人中心页面

个人中心是运动健康App的我的页面。用户从首页底部导航我的跳转到这里查看个人资料、运动统计、快捷入口。这个页面的任务是让用户看到我运动了多少和我能去哪里——上方是个人身份和数据下方是功能导航。页面结构分为三部分顶部导航栏、用户信息卡片、统计数据行、功能菜单列表。从上到下信息从我是谁到我做了什么再到我能做什么。完整效果导航栏Row() { Row() { SymbolGlyph($r(sys.symbol.chevron_left)).fontSize(20).fontColor([T1]) }.width(34).height(34).borderRadius(17).backgroundColor(rgba(0,0,0,0.03)) .justifyContent(FlexAlign.Center).onClick(() { router.back() }) Text(我的).fontSize(20).fontWeight(FontWeight.Bold).fontColor(T1) .margin({ left: 10 }).layoutWeight(1) Text(⚙️).fontSize(20) }.width(100%).padding({ left: 16, right: 16, top: 12, bottom: 8 })导航栏和其他页面保持一致——左边返回按钮中间标题。但右边多了一个⚙️设置图标。和社区页面的发布按钮、用户主页的关注按钮一样导航栏右侧是全局操作区——每个页面可以放不同的按钮。⚙️设置图标目前没有绑定onClick——点击不会跳转到设置页面。菜单列表里有一个设置入口和导航栏的⚙️功能重复。实际项目中应该二选一要么导航栏放设置入口要么菜单列表放不需要两个地方都有。用户信息卡片Row() { Stack() { Column() {}.width(64).height(64).borderRadius(32) .linearGradient({ angle: 135, colors: [[A, 0], [#FF9F43, 1]] }) Text().fontSize(28) } Column() { Text(运动达人).fontSize(20).fontWeight(FontWeight.Bold).fontColor(T1) Text(连续运动 15 天 · 超越 89% 的用户).fontSize(12).fontColor(T3).margin({ top: 2 }) }.alignItems(HorizontalAlign.Start).margin({ left: 14 }).layoutWeight(1) Text(编辑 ›).fontSize(12).fontColor(A) }.width(100%).padding(20).backgroundColor(#FFFFFF).borderRadius(18) .margin({ left: 16, right: 16, bottom: 16 })用户卡片是一个白色圆角Row左边头像、中间名字和标签、右边编辑按钮。头像的Stack实现Stack() { Column() {}.width(64).height(64).borderRadius(32) .linearGradient({ angle: 135, colors: [[A, 0], [#FF9F43, 1]] }) Text().fontSize(28) }头像用Stack实现——底层是一个64×64的圆形填充红到橙的渐变色上层是emoji文字。Stack的默认对齐是居中所以emoji自动居中在渐变圆上。这种渐变背景emoji前景的头像设计和首页右上角的头像一致——整个App用同一套头像风格。64×64是个人中心的尺寸首页是42×42用户主页是100×100。同一个元素在不同页面有不同尺寸符合信息层级。编辑按钮Text(编辑 ›).fontSize(12).fontColor(A)红色文字右箭头暗示可点击。但没有绑定onClick——点击不会跳转到编辑页面。这是原型阶段的典型做法UI元素存在但交互留到后续实现。统计数据行Row({ space: 8 }) { this.Stat(累计运动, 156, 天, A) this.Stat(累计消耗, 48,920, 千卡, #FF9F43) this.Stat(完成训练, 342, 次, #5DADE2) }.width(100%).padding({ left: 16, right: 16 }).margin({ bottom: 16 })三个统计卡片并排用space: 8控制间距。每个卡片展示一个核心指标。Stat BuilderBuilder Stat(label: string, value: string, unit: string, color: string) { Column() { Text(value).fontSize(24).fontWeight(FontWeight.Bold).fontColor(color) Text(unit).fontSize(10).fontColor(T3) Text(label).fontSize(11).fontColor(T2).margin({ top: 2 }) }.layoutWeight(1).padding(14).backgroundColor(#FFFFFF).borderRadius(14) }每个统计卡片由三行文字组成数值24px加粗彩色、单位10px灰色、标签11px灰色。数值最醒目单位和标签视觉层级较低。和ProgressPage的SCard Builder对比属性ProfilePage StatProgressPage SCard数值字号24px28px单位位置第二行第二行标签位置第三行第三行padding14px16px圆角14px16px个人中心的Stat比进度页的SCard略小——因为个人中心是概览进度页是详情。同一个数据在不同页面有不同的展示尺寸符合信息层级。三个统计指标指标数值单位颜色含义累计运动156天A红色总运动天数累计消耗48,920千卡#FF9F43橙色总卡路里消耗完成训练342次#5DADE2蓝色总训练次数颜色和首页、进度页保持一致红色运动/步数橙色卡路里蓝色训练。用户看到红色就联想到运动不管在哪个页面。48920千卡的千位分隔符是硬编码的——直接在字符串里写了逗号。和ProgressPage的76532步一样没有动态格式化。如果数字变化需要手动改字符串。功能菜单列表Column({ space: 0 }) { this.Menu(运动记录, , () { router.pushUrl({ url: pages/ProgressPage }) }) this.Div() this.Menu(饮食记录, ️, () { router.pushUrl({ url: pages/MealPage }) }) this.Div() this.Menu(我的成就, , () { }) this.Div() this.Menu(身体数据, , () { }) this.Div() this.Menu(目标设置, , () { }) this.Div() this.Menu(设置, ⚙️, () { }) }.width(100%).backgroundColor(#FFFFFF).borderRadius(18) .margin({ left: 16, right: 16 })六个菜单项每项之间用Divider分隔。整个菜单区域是一个白色圆角卡片。Menu BuilderBuilder Menu(label: string, icon: string, action: () void) { Row() { Text(icon).fontSize(18).margin({ right: 14 }) Text(label).fontSize(14).fontColor(T1).layoutWeight(1) SymbolGlyph($r(sys.symbol.chevron_right)).fontSize(12).fontColor([#DDD]) }.width(100%).padding({ left: 18, right: 18, top: 14, bottom: 14 }) .onClick(action) }每个菜单项是一个Row左边emoji图标、中间文字、右边右箭头SymbolGlyph。layoutWeight(1)让文字区域撑满中间空间右箭头被推到最右边。右箭头用SymbolGlyph($r(sys.symbol.chevron_right))——和返回按钮的sys.symbol.chevron_left是同一套图标。左箭头返回右箭头前进这是通用的导航语义。菜单项的功能映射菜单项图标跳转目标状态运动记录ProgressPage已实现饮食记录️MealPage已实现我的成就无未实现身体数据无未实现目标设置无未实现设置⚙️无未实现六个菜单中只有两个有实际跳转——运动记录去ProgressPage饮食记录去MealPage。其余四个的action是空函数() { }点击没有反应。这是原型阶段的正常状态先搭好UI框架再逐步填充功能。Div BuilderBuilder Div() { Divider().strokeWidth(0.5).color(#F0EEF4).margin({ left: 52 }) }分割线用Divider组件0.5px宽浅灰色。margin({ left: 52 })让分割线从图标右侧开始——不延伸到左边的emoji图标下方。52px的计算18pxpadding-left 18pxicon fontSize 14pxmargin-right 约2px余量。这种缩进分割线是列表设计的常见手法——分割线只在文字区域下方不在图标下方。视觉上更干净图标区域保持完整。页面整体结构Column() { // 导航栏固定 Row() { ... } // 内容区可滚动 Scroll() { Column() { // 用户卡片 // 统计数据 // 功能菜单 } }.width(100%).layoutWeight(1) }.width(100%).height(100%)和其他页面一样的结构导航栏在Scroll外面固定内容在Scroll里面可滚动。layoutWeight(1)让Scroll占据导航栏以外的所有空间。和社区页面对比社区页面的Scroll里是ForEach渲染的帖子列表个人中心的Scroll里是固定结构卡片统计菜单。前者是动态内容后者是静态结构。静态结构不需要ForEach直接写死就行。Builder的复用个人中心用了三个BuilderStat、Menu、Div。它们的职责清晰Stat统计数据卡片数值单位标签Menu菜单项图标文字箭头点击事件Div分割线0.5px缩进这三个Builder只在ProfilePage内部使用——没有导出到其他页面。但Stat的结构和ProgressPage的SCard几乎一样数值单位标签Menu的结构和社区页面的关注按钮有相似之处文字背景色圆角。如果要跨页面复用应该把这些Builder抽到components目录下。但原型阶段每个页面自己定义Builder更简单——不需要考虑接口设计、参数兼容性等问题。过早抽象反而会增加理解成本。和其他页面的导航关系个人中心从首页底部导航的我的按钮跳转过来。底部导航有5个按钮首页、训练、进度、社区、我的。我的是第5个。个人中心内部的菜单又跳转到其他页面运动记录→ProgressPage饮食记录→MealPage。这意味着用户可以从我的→运动记录→ProgressPage绕了一圈到达进度页。和直接从底部导航点进度效果一样但路径更长。这种多入口到达同一页面的设计是正常的——用户可以从不同路径到达ProgressPage每个路径的上下文不同。从首页点运动记录是我想看今天的运动数据从我的点运动记录是我想看我的运动历史。同一个页面不同的用户意图。踩坑记录导航栏右侧的⚙️没有功能。导航栏右边放了一个⚙️图标菜单列表底部也有一个设置入口。两处功能重复且都没有实现。实际项目应该只保留一个——要么导航栏放图标要么菜单列表放文字入口。统计数字的千位分隔符硬编码。48,920的逗号是字符串里直接写的不是动态格式化的。如果数字变化比如从48920变成100000需要手动改代码。和ProgressPage的76,532步同样的问题。Div的margin-left计算。分割线的margin({ left: 52 })是手动计算的——如果Menu的padding或图标尺寸变化52px可能不再对齐。更稳健的做法是用Row包裹分割线让分割线从图标右侧开始而不是用固定margin。空菜单项的用户体验。四个菜单项我的成就、身体数据、目标设置、设置点击没有反应。用户点击后没有任何反馈——既没有跳转也没有提示功能开发中。真实项目应该加一个toast提示或禁用状态避免用户困惑。头像Stack的层级。Stack默认居中对齐emoji自动居中在渐变圆上。但如果emoji尺寸变化比如换成图片可能需要调整对齐方式。Stack的默认行为是后添加的元素在上层这里先放渐变圆再放emoji顺序正确。个人中心是运动健康App中结构最简单的页面——没有复杂布局、没有动态数据、没有网络请求。它的价值在于信息聚合把分散在各处的数据运动天数、卡路里消耗、训练次数汇总到一个页面把分散的功能入口运动记录、饮食记录、设置排列成一个菜单。从技术角度看这个页面是Builder模式的最佳练习——Stat、Menu、Div三个Builder各司其职build方法干净整洁。如果说社区页面是状态管理的综合考试个人中心就是组件拆分的基础练习。