HarmonyOS运动健康——训练页面交互与动作详情

从训练页面点击一个动作跳转到动作详情页。这个流程涉及两个页面的数据传递和交互衔接WorkoutPage负责展示动作列表和训练计划选择ExerciseDetail负责展示单个动作的完整信息。两个页面通过路由参数连接——WorkoutPage传入动作IDExerciseDetail根据ID加载数据。完整效果WorkoutPage训练计划选择与动作列表计划选择器的交互训练计划选择器是横向滚动的Row每个计划卡片固定100px宽。选中状态通过两个属性区分背景色从白色变成半透明彩色边框从1px浅灰变成1.5px彩色。.backgroundColor(this.selectedPlan plan.id ? plan.color 15 : CW) .border({ width: this.selectedPlan plan.id ? 1.5 : 1, color: this.selectedPlan plan.id ? plan.color : #F0EEF4 })点击卡片时做两件事更新selectedPlan触发UI重渲染同时调用getExercisesForPlan(plan)更新动作列表。但从截图来看切换计划后动作列表没有变化——这可能是因为ForEach用的是EXERCISES全局数组而不是this.planExercises当前计划的动作。动作列表的布局每个动作行是Row结构左侧56×56图标 中间三行信息 右侧箭头。信息区的三行文字是动作名称14px加粗深色——最醒目用户第一眼看到目标肌群11px灰色maxLines:1——次要信息截断不影响理解训练详情行红色难度标签 灰色时长 灰色卡路里——三个属性用文字拼接Row() { Text(ex.difficulty).fontSize(10).fontColor(A) .padding({ left: 6, right: 6, top: 1, bottom: 1 }) .backgroundColor(#FFF0F0).borderRadius(4) Text( ex.duration 分钟).fontSize(10).fontColor(T2) Text( · ex.calories 千卡).fontSize(10).fontColor(T2) }.margin({ top: 4 })难度标签用红色文字浅红背景视觉上最醒目。时长和卡路里用灰色小字视觉层级较低。这种难度突出、数据弱化的设计让用户快速判断这个动作难不难而不是纠结具体数字。点击跳转.onClick(() { router.pushUrl({ url: pages/ExerciseDetail, params: { id: ex.id } as Recordstring,Object }) })点击动作行跳转到ExerciseDetail页面传入id参数。as Recordstring,Object是类型断言——router.getParams()返回的是Recordstring, Object需要断言才能访问具体字段。从截图来看训练计划页面有三个计划卡片7分钟晨练、核心强化、力量突破下方是六个动作俯卧撑、深蹲、平板支撑、波比跳、哑铃弯举、仰卧起坐。选中核心强化时卡片有绿色边框和浅绿背景。ExerciseDetail动作详情页数据加载State ex: Exercise | undefined undefined aboutToAppear(): void { const p router.getParams() as Recordstring, Object if (p p[id]) this.ex getExerciseById(p[id] as number) }从路由参数中读取id调用getExerciseById(id)获取动作数据。State ex初始值是undefined——如果路由参数中没有id或者找不到对应的动作页面不会渲染任何内容。这里有一个防御性设计if (this.ex)条件渲染整个页面内容。如果ex是undefined页面只显示空的Column和背景色。不会崩溃但用户看到的是空白页面——更好的做法是显示动作不存在的提示。页面结构Column() { // Header返回按钮标题 if (this.ex) { Scroll() { Column() { // 图标区 // 标签行 // 目标肌群 // 动作步骤 } } } }和WorkoutPage一样的Header结构左侧返回按钮右侧标题。但ExerciseDetail没有底部导航栏——它是子页面用户看完详情后返回WorkoutPage不需要底部导航。图标区Text(this.ex.icon).fontSize(80).width(100%).height(160).textAlign(TextAlign.Center) .backgroundColor(#F5F5F7).borderRadius(20)80px的emoji图标放在160px高的浅灰色区域内。textAlign(TextAlign.Center)让emoji水平居中Column的默认垂直居中让emoji垂直居中。borderRadius(20)让灰色区域有圆角。这个区域占据了屏幕上半部分的大量空间——目的是让用户一眼看到这是什么动作。emoji在不同设备上的渲染效果不同但80px的大尺寸能保证辨识度。标签行Row() { this.Tag(⏱ this.ex.duration 分钟, A) this.Tag( this.ex.calories 千卡, #FF9F43) this.Tag( this.ex.difficulty, #5DADE2) }.width(100%).margin({ top: 16, bottom: 12 }).justifyContent(FlexAlign.Start)三个标签横向排列分别用红、橙、蓝色。每个标签是emoji文字的组合和训练计划页面的难度标签类似但更大fontSize: 12, padding: 10×5。Tag BuilderBuilder Tag(text: string, color: string) { Text(text).fontSize(12).fontColor(color).padding({ left: 10, right: 10, top: 5, bottom: 5 }) .backgroundColor(color 12).borderRadius(8).margin({ right: 8 }) }Tag Builder接收文本和颜色生成一个带圆角背景的标签。color 12是约7%透明度的彩色背景margin({ right: 8 })让标签之间有间距。这个Builder的设计和WorkoutPage的难度标签思路一致——用color 十六进制透明度做背景色。但ExerciseDetail的标签更大padding 10×5 vs 6×1因为详情页有更多空间。目标肌群Text(目标肌群).fontSize(16).fontWeight(FontWeight.Bold).fontColor(T1).width(100%).margin({ bottom: 8 }) Text(this.ex.muscles).fontSize(14).fontColor(T2)两行文字标题16px加粗 内容14px灰色。标题用width(100%)确保占满整行内容紧跟其后。从截图来看“目标肌群显示为胸肌·肱三头肌·核心”——用中文中间点分隔多个肌群。这是WorkoutData中定义的数据格式详情页直接展示。动作步骤Text(动作步骤).fontSize(16).fontWeight(FontWeight.Bold).fontColor(T1).width(100%).margin({ top: 16, bottom: 10 }) ForEach(this.ex.steps, (step: string, idx: number) { Row() { Column() { Text((idx1).toString()).fontSize(12).fontWeight(FontWeight.Bold).fontColor(Color.White) } .width(24).height(24).borderRadius(12).backgroundColor(A) .justifyContent(FlexAlign.Center).alignItems(HorizontalAlign.Center) Text(step).fontSize(14).fontColor(T1).margin({ left: 12 }).layoutWeight(1) }.width(100%).padding(12).backgroundColor(#FFFFFF).borderRadius(12).margin({ bottom: 8 }) })每个步骤由两部分组成左侧红色圆形编号 右侧步骤文字。红色圆形编号24×24的红色圆形居中显示白色数字。borderRadius(12)是宽度的一半确保是正圆。justifyContent(FlexAlign.Center).alignItems(HorizontalAlign.Center)让数字在圆形内居中。步骤文字14px深色文字margin({ left: 12 })和编号保持间距layoutWeight(1)占据剩余空间。步骤卡片每个步骤是白色背景12px圆角12px内边距。步骤之间用margin({ bottom: 8 })分隔。从截图来看俯卧撑有四个步骤双手撑地与肩同宽身体保持直线屈肘下降至胸部接近地面推起回到起始位置每个步骤卡片独立视觉上像任务清单——用户可以逐个步骤阅读完成后在心里打勾。两个页面的数据流首页 → [点击训练卡片] → WorkoutPage → [点击动作行] → ExerciseDetail 传入planId 传入id数据流是单向的首页传planId给WorkoutPageWorkoutPage传id给ExerciseDetail。每个页面只接收自己需要的数据不依赖上上个页面的状态。WorkoutPage的aboutToAppear接收planId后设置selectedPlanWorkoutData根据planId返回对应的训练计划。ExerciseDetail的aboutToAppear接收id后调用getExerciseById(id)获取动作详情。这种逐级传递的模式比全局状态更简单——不需要AppStorage或PersistentStorage每个页面只关心自己的路由参数。缺点是如果需要跨页面共享数据比如用户正在训练的动作就需要额外的状态管理方案。踩坑记录ex的undefined处理。State ex: Exercise | undefined undefined初始值是undefinedaboutToAppear中如果找不到对应的动作ex保持undefined。页面的if (this.ex)条件渲染避免了崩溃但用户看到的是空白页面。更好的做法是显示一个动作不存在的提示或者用router.back()返回上一页。emoji在不同设备的渲染差异。标签行用emoji⏱代替图标。emoji在不同鸿蒙设备上可能显示为不同样式——有些是彩色的有些是黑白的。如果要上线需要用SymbolGlyph或自定义图标替代。步骤编号的居中实现。红色圆形编号用justifyContent(FlexAlign.Center).alignItems(HorizontalAlign.Center)实现居中。Column的默认方向是垂直的justifyContent控制垂直居中alignItems控制水平居中。如果用Row而不是Column居中逻辑会反过来。训练详情行的字符串拼接。WorkoutPage中动作列表的训练详情行用字符串拼接 ex.duration 分钟和 · ex.calories 千卡。前面的空格和中间点是分隔符但空格宽度受字体影响不够精确。ExerciseDetail的标签用独立的Tag Builder每个标签有自己的padding和margin间距更可控。滚动区域的高度计算。ExerciseDetail的Scroll占据layoutWeight(1)——扣除Header后的全部空间。Scroll内部的Column没有固定高度会根据内容自动撑开。如果内容超过屏幕高度Scroll会处理滚动。但如果内容太少比如只有两三个步骤底部会有大量空白。Blank().height(30)在底部加了30px的间距避免最后一个步骤卡片紧贴屏幕底部。训练页面到动作详情的跳转是运动健康App的核心交互路径。WorkoutPage负责选择选计划、选动作ExerciseDetail负责展示展示完整信息。两个页面通过路由参数连接数据单向流动各自只关心自己的职责。这种选择→详情的模式在几乎所有App中都存在——电商的商品列表→商品详情、新闻的文章列表→文章详情——核心逻辑是一样的列表页承载浏览和筛选详情页承载深度阅读和操作。