鸿蒙原生应用 ArkUI 实战实验室预约我的页 —— 任务型个人中心的四块写法App 23「实验室设备预约」我的 TabProfileTab是个人中心页——最简 4 块结构渐变用户卡 科研达人 累计使用 36 小时 4 栏统计预约记录 18/使用时长 36h/收藏设备 4/待使用 2 5 菜单预约记录/使用记录/设备收藏/联系管理员/设置 About实验室设备预约 v1.0.0。与 App 21/22 我的页同构4 块最简 92% 宽 负边距悬浮——是任务型应用的典型个人中心。本篇基于23-lab-booking/entry/src/main/ets/pages/ProfileTab.ets约 101 行逐段拆解附 4 张实机截图。一、整体结构4 个 Builder 的最简个人中心ProfileTab 是系列最简洁的个人中心——4 个 Builderbuild() { Column() { Scroll() { Column() { this.UserCard() this.StatRow() this.MenuList() this.About() } .width(100%) .padding({ bottom: D.pad this.safeBottom 20 }) } .layoutWeight(1).scrollBar(BarState.Off).align(Alignment.Top) } .width(100%).height(100%).backgroundColor(C.bg) }4 块顺序UserCard身份→ StatRow数据→ MenuList资产→ About关于。与 App 21 问卷/App 22 投票我的页 100% 同构——任务型个人中心模板第 3 次复用21/22/23 连续 3 个 App 都是4 块最简——任务型 App 个人中心 4 块成为系列的稳定模式。项目源码开源https://gitee.com/codenestFlow/HarmonyOSHub二、UserCard深青渐变 科研达人UserCard 是简洁的横向用户卡Builder UserCard() { Row({ space: 14 }) { Row() { Text().fontSize(32) } .width(64).height(64).backgroundColor(#33FFFFFF).borderRadius(32).justifyContent(FlexAlign.Center) Column({ space: 5 }) { Text(科研达人).fontSize(18).fontWeight(FontWeight.Bold).fontColor(#FFFFFF) Text(累计使用 36 小时).fontSize(12).fontColor(#FFFFFF).opacity(0.85) }.alignItems(HorizontalAlign.Start).layoutWeight(1) } .width(100%) .padding({ top: this.safeTop 30, left: D.pad, right: D.pad, bottom: 44 }) .linearGradient({ angle: 135, colors: [[C.primary, 0.0], [C.accent, 1.0]] }) }关键设计64×64 正圆头像borderRadius(32)—— 系列标准 显微镜 emoji—— 科研设备视觉符号呼应 App 主题实验室科研达人称号—— 称号型身份App 19摄影爱好者/App 21问卷达人/App 22投票达人同款——业务 达人累计使用 36 小时 Slogan——业务型 Slogan累计使用 科研时长——与 StatRow使用时长 36h一致 ✓深青 135° 渐变——linearGradient主题色累计使用 36 小时—— 科研人员的核心指标实验时长——科研达人的称号靠使用时长支撑36 小时 做过 36 小时实验。bottom: 44给 StatRowmargin: -24留 20vp 实际重叠——卡片叠加悬浮。渐变背景的135° 对角线解析linearGradient({ angle: 135, colors: [[C.primary, 0.0], [C.accent, 1.0]] })—— 135° 意味着渐变从左上角到右下角。为什么选 135° 而非 90°垂直或 0°水平90° 垂直渐变上深下浅视觉重心偏上适合标题栏但用户卡需要整体均匀0° 水平渐变左深右浅横向动感强但与头像在左、文字在右的布局冲突135° 对角渐变左上深 → 右下浅与头像左上 文字右侧的视觉流一致——深色区域恰好衬托头像浅色区域衬托文字——渐变方向 内容流向#33FFFFFF半透明头像底色——#33 20% 不透明度白色在深青渐变上形成**磨砂玻璃效果**——头像区域不抢渐变主色但提供视觉边界——半透明叠加是渐变背景上的标准头像处理。opacity(0.85)Slogan 淡化—— 称号fontColor(#FFFFFF)全不透明主信息Sloganopacity(0.85)次信息——同色不同透明度实现层级区分比用不同颜色更和谐。三、StatRow4 栏统计StatRow 是 4 栏统计与 App 21/22 同款private stats: StatItem[] [ { value: 18, label: 预约记录 }, { value: 36, label: 使用时长(h) }, { value: 4, label: 收藏设备 }, { value: 2, label: 待使用 } ];4 栏的科研预约视角数字标签含义18预约记录累计预约 18 次36使用时长(h)累计使用 36 小时4收藏设备收藏 4 台常用设备2待使用2 条待使用的预约预约记录 使用时长 收藏设备 待使用—— 科研人员的 4 个核心指标预约记录 18—— 活跃度约过多少次使用时长 36h—— 投入度用了多久收藏设备 4—— 偏好常用设备待使用 2—— 待办待处理的预约使用时长 36h UserCard Slogan 的数据来源 ✓ ——用户卡 Slogan 统计指标跨组件呼应App 22 同款设计。4 栏同色C.text深色—— 颜色留给状态。width(92%)margin({ top: -24 })—— 与 App 21/22 同款卡片叠加。浮动卡片的负边距设计解析StatRow 的margin({ top: -24 })是负边距悬浮的核心——统计卡向上侵入UserCard 的bottom: 44padding 区域形成 20vp 的视觉重叠UserCardbottom: 44—— 底部留白 44vpStatRowmargin: -24—— 向上偏移 24vp实际重叠 44 - 24 20vp —— 统计卡骑在用户卡底部为什么用负边距而非 Stack 叠层Stack 方案Stack() { UserCard(); StatRow().offset({ y: -24 }) }—— 需要额外容器且 Scroll 内 Stack 布局复杂负边距方案Column() { UserCard(); StatRow().margin({ top: -24 }) }——Column 流式布局 负边距微调代码更简洁负边距悬浮是系列个人中心的标志性技法——App 21/22/23 连续 3 个 App 使用同一方案——Column 负 margin比Stack offset更适合 Scroll 内的卡片叠加。4 栏等宽布局Row()layoutWeight(1)每栏——4 栏自动等分 92% 宽度——Row layoutWeight是等宽栏的标准写法比 Grid 更灵活不需要计算列数。四、MenuList5 项菜单MenuList 是 5 项菜单与 App 21/22 同款结构private menus: MenuItem[] [ { id: 1, emoji: , title: 预约记录 }, { id: 2, emoji: , title: 使用记录 }, { id: 3, emoji: ⭐, title: 设备收藏 }, { id: 4, emoji: , title: 联系管理员 }, { id: 5, emoji: ⚙️, title: 设置 } ];5 项菜单的实验室业务覆盖菜单业务 预约记录历史预约 使用记录设备使用日志⭐ 设备收藏常用设备 联系管理员实验室特色设备故障/权限申请⚙️ 设置通用联系管理员是实验室预约的特色菜单——设备出问题/需要权限时联系实验室管理员——特色菜单 业务核心对比 App 21数据导出、App 22投票统计。5 项按使用频次排序预约记录高频→ 使用记录中→ 设备收藏中→ 联系管理员低频→ 设置低频。箭头 emoji 标题三件套 —— 最简菜单结构。菜单项的分组逻辑缺失分析App 23 的 5 项菜单是扁平列表——没有分组。真实实验室预约 App 的菜单通常需要分组第一组我的记录预约记录 / 使用记录 / 设备收藏第二组帮助联系管理员第三组系统设置分组的好处用户快速定位——记录类在上、帮助在中、系统在下——功能分组 认知减负。真实项目的分组实现// 菜单分组用 Section 分隔 Column() { // 第一组记录 this.MenuSection([menus[0], menus[1], menus[2]]) // 间距 12vp Blank().height(12) // 第二组帮助 this.MenuSection([menus[3]]) Blank().height(12) // 第三组系统 this.MenuSection([menus[4]]) }App 23 的简化5 项菜单放一个卡片——扁平 分组——当菜单项 ≤ 5 时扁平可接受超过 5 项建议分组。五、MenuList 结构与 AboutMenuList 与 App 21/22 同款结构92% 宽 Divider 0.5vp 箭头Builder MenuList() { Column() { ForEach(this.menus, (m: MenuItem, idx: number) { Row({ space: 12 }) { Text(m.emoji).fontSize(18) Text(m.title).fontSize(14).fontColor(C.text).layoutWeight(1) Text().fontSize(14).fontColor(C.textDim) } .width(100%).padding({ left: 14, right: 14, top: 14, bottom: 14 }) .onClick(() { promptAction.showToast({ message: m.title }); }) if (idx this.menus.length - 1) { Divider().color(C.stroke).strokeWidth(0.5) } }, (m: MenuItem) m.title) } .width(92%).margin({ top: 16 }).backgroundColor(C.card).borderRadius(D.rMd).border({ width: 1, color: C.stroke }) }About是实验室设备预约 / Version 1.0.0双行与 App 21/22 同款——opacity(0.7)版本号淡化。Divider 分割线的最后一项跳过逻辑if (idx this.menus.length - 1) { Divider() }——最后一项不画分割线。这是列表分割线的标准写法为什么不用border-bottom—— 最后一项会有多余的底线视觉上断开为什么不用Divider()无条件渲染—— 同上最后一项底部多一条线idx length - 1条件渲染——只在项与项之间画线首尾无线 ——分割线 项间分隔而非项底装饰strokeWidth(0.5)的细线选择—— 0.5vp 比 1vp 更精致——细分割线 高级感iOS 设置页同款 0.5vp 细线——粗线1vp显得廉价细线0.5vp显得精致。color(C.stroke)用主题色—— 不硬编码#E0E0E0——分割线跟随主题暗色模式自动适配。六、State 数量 0系列第 7 个0 State 个人中心ProfileTab0 个 State—— 所有数据private不可变。这是系列第七个0 State个人中心App 13/17/20/21/22/23 各数据页——展示型页面 0 State规律持续成立。4 个 Tab 的 State 分布App 23页面State类型首页1activeCat分类 Chip设备0纯展示详情预约1slot时段真单选我的0纯展示App 23 是任务型 2 状态的代表——首页/预约各 1 个状态分类/时段设备/我的纯展示。七、数据一致性累计使用 36 小时 StatRow使用时长 36h ✓——Slogan 与统计精确对应。待使用 2vs 预约页记录今天/明天 2 条待使用✓——我的页待使用 2 预约页待使用 2 条——跨页数据一致。预约记录 18vs 预约页 4 条记录——18 是累计含已结束、4 条是近期列表——**统计累计 vs 列表近期**口径合理。八、与 App 21/22 我的页的三连同构App 21 问卷、App 22 投票、App 23 实验室——3 个任务型 App的个人中心 100% 同构组件App 21问卷App 22投票App 23实验室UserCard 问卷达人️ 投票达人 科研达人Slogan已创建 8 份参与 28 次累计使用 36 小时StatRow我的问卷/填写/收集/进行创建/参与/历史/进行预约/时长/收藏/待使用MenuList我的问卷/填写/导出/模板/设置参与/创建/历史/统计/设置预约/使用/收藏/管理员/设置About在线问卷调查校园投票管理实验室设备预约3 连任务型 App证明4 块个人中心是任务型应用的稳定模板——读者做任何任务型产品工具/预约/打卡可直接套用。九、累计使用 36 小时的 Slogan 设计App 23 UserCard Slogan累计使用 36 小时值得从文案角度分析累计使用 X 小时是科研/工具类 App 的投入型 SloganApp 22 投票参与 28 次投票次数型App 23 实验室累计使用 36 小时时长型次数 vs 时长的选择次数参与 28 次——适合任务型一次一个动作时长使用 36 小时——适合投入型科研要长时间投入科研达人的身份靠时长支撑——36 小时实验 做了 36 小时科研——时长的积累感比次数的完成感更适合科研。Slogan 的3 要素系列标准数字36——精确可信动词累计使用——投入描述单位小时——量纲明确**数字 动词 单位**是投入型 Slogan 的标准——读者做工具/科研/学习类 App 时用累计 X 小时比已使用 X 天更有投入感。十、4 栏统计的科研视角App 23 的 4 栏统计预约记录/使用时长/收藏设备/待使用——科研工作者的数据画像数字维度科研含义预约记录 18行为预约了多少次设备使用时长 36h投入在实验室花了多少时间收藏设备 4偏好常用哪几台设备待使用 2待办还有哪些预约没去行为 投入 偏好 待办4 维度——完整刻画科研工作者的实验室使用画像——对比 App 21 问卷的创建参与收集进行双向 UGC 视角——统计维度跟随业务角色。真实项目的统计聚合// 统计从预约记录聚合 const stats { 预约记录: bookings.length, 使用时长: bookings.reduce((sum, b) sum b.duration, 0), 收藏设备: favorites.length, 待使用: bookings.filter(b b.status 待使用).length };统计 业务数据的聚合——不是硬编码而是从预约记录/收藏列表实时计算——**数据驱动统计**是真实项目的正确做法。十一、联系管理员菜单的人工兜底App 23 的 联系管理员菜单是**人工兜底入口**——工具类 App 的必备设计人工兜底的价值自动流程解决 80%预约/查询/统计人工兜底解决 20%设备故障/权限问题/特殊需求联系管理员的 3 种形态电话 图标暗示——最直接在线客服IM 聊天工单系统提交问题管理员处理真实实验预约 App 的联系管理员场景设备故障显微镜坏了权限申请特殊设备需要导师批准时段调整临时改预约异常处理设备损坏报告人工兜底 用户安全网——工具类 App 必须留人工入口——机器做不到的、人来做。十二、App 23 与科研数字化的完整闭环App 23 实验室预约是科研数字化的一个环节——完整科研数字化生态设备预约App 23→ 实验数据 → 论文写作 → 成果管理 ↑ ↓ └──────── 成果反哺新设备采购 ←────┘科研数字化的 3 层基础设施App 23——设备/场地/耗材的预约管理数据采集进阶——实验数据自动记录传感器知识管理进阶——文献/笔记/论文App 24 研究管理App 23 是科研基础设施的最简版本——读者做科研数字化产品时从设备预约最刚需切入是最佳路径——先解决预约、再扩展数据。真实科研数字化产品如超级计算平台的预约模块——设备预约 数据 计费 审批的完整系统——App 23 是它的预约子模块。十三、总结App 23 我的页解析完毕。4 块最简结构UserCard StatRow MenuList About 深青渐变 4 栏统计 5 菜单是核心组件。科研达人的业务身份 累计使用 36 小时的投入型 Slogan 预约/时长/收藏/待使用4 维画像 联系管理员人工兜底——是实验室预约类 App 个人中心的典型设计。与 App 21/22 我的页 100% 同构——任务型个人中心模板第 3 次复用证明4 块最简是任务型应用的稳定模式。0 State 个人中心——纯展示页所有数据硬编码在private数组中真实项目应从数据库聚合。