鸿蒙原生应用开发实战：问卷调查我的页 —— 最简四块结构的个人中心写法

鸿蒙原生应用开发实战问卷调查我的页 —— 最简四块结构的个人中心写法App 21「在线问卷调查」我的 TabProfileTab是个人中心页。结构最简洁——渐变用户卡 问卷达人 已创建 8 份问卷 4 栏统计我的问卷 8/填写记录 36/收集份数 2,860/进行中 3 5 菜单我的问卷/填写记录/数据导出/模板收藏/设置 About。本篇基于21-online-survey/entry/src/main/ets/pages/ProfileTab.ets约 127 行逐段拆解附 4 张实机截图。一、整体结构4 个 Builder 的精简个人中心ProfileTab 是系列最简洁的个人中心——4 个 BuilderUserCard / StatRow / MenuList / About无 WeekChart、无 AchievementWall、无签到build() { 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关于。与系列其他个人中心对比AppBuilder 数周图成就墙签到13/17 音乐/志愿6✓✓伪14/15/16 运动/环保/商城6✓✓真18 社交6✓✓真exp19 摄影6✓✓真exp20 阅读6✓✓伪21 问卷4✗✗✗App 21 我的页最简——4 块只有身份/统计/菜单/关于无周图、无成就墙、无签到——任务型应用的个人中心不需要成就系统任务完成后用户已得到业务价值不需要游戏化徽章激励——成就/签到是内容型/社区型 App 的专属社交/阅读/摄影需要激励让用户持续任务型 App 用户因为要做事而回来。项目源码开源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(已创建 8 份问卷).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]] }) }与系列其他 UserCard 的差异App头像等级经验条签到13/17Stack 头像等级Lv.4 徽章74% 进度条伪签到14/15/16/18/19复杂多元素Lv.5-8状态化进度条真签到20Stack 头像等级Lv.474% 进度条伪签到2164×64 单 emoji✗✗✗App 21 UserCard 是系列最简——只有 emoji 头像 问卷达人昵称 8 份问卷 Slogan——无等级、无经验条、无签到——任务型个人中心不需要游戏化。#33FFFFFF半透明白色头像底rgba(255,255,255,0.2)写法——系列同款与 App 18/19/20 的半透明白一致。问卷达人昵称——称号型身份与 App 19摄影爱好者同款——达人是兴趣社区常用的等级标签问卷达人暗示做过很多问卷——称号 业务身份。已创建 8 份问卷Slogan——业务型 Slogan不用活跃用户/已使用 X 天的时长叙事——个人价值 我做了多少贡献——问卷 Slogan 创作者身份与首页/数据页的创作者视角一致。bottom: 44较大的底部 padding——给 StatRow 的margin({ top: -24 })留出上浮空间——UserCard bottom: 44 StatRow margin top: -24 20vp 实际重叠——比 App 14/15/16 的bottom: 16 margin: -28 12vp重叠稍多——**重叠 卡片叠加悬浮**的视觉。三、StatRow4 栏统计StatRow 是 4 栏统计同系列标准Builder StatRow() { Row() { ForEach(this.stats, (s: StatItem) { Column({ space: 4 }) { Text(s.value).fontSize(18).fontWeight(FontWeight.Bold).fontColor(C.text) Text(s.label).fontSize(11).fontColor(C.textDim) } .layoutWeight(1) }, (s: StatItem) s.label) } .width(92%) .padding({ top: 14, bottom: 14 }) .backgroundColor(C.card) .borderRadius(D.rMd) .border({ width: 1, color: C.stroke }) .margin({ top: -24 }) }4 栏数据private stats: StatItem[] [ { value: 8, label: 我的问卷 }, { value: 36, label: 填写记录 }, { value: 2,860, label: 收集份数 }, { value: 3, label: 进行中 } ];4 栏的问卷平台视角数字标签含义8我的问卷用户创建了 8 份问卷36填写记录用户参与填写了 36 份问卷2,860收集份数用户的问卷被填了 2,860 次3进行中还有 3 份问卷在进行中我的问卷/填写记录/收集份数/进行中——4 个统计项对应创作者 填写者双重视角创作者视角我的问卷 8 / 收集份数 2,860 / 进行中 3我创建 我收到的回答填写者视角填写记录 36我参与的双重视角是问卷平台的特色——用户既是创作者发布问卷又是填写者参与他人问卷——问卷平台是双向 UGC应用类似小红书/知乎的既是创作者也是读者——4 栏统计展现这种双向身份。8 份问卷收集 2,860 份——每份问卷平均 357 份回复2,860/8——创作者影响力——真实问卷平台平均 300 份回复是中等活跃创作者水平。width(92%)92% 宽 margin({ top: -24 })负边距——UserCard底部让出 24vp 给 StatRow上浮——与 App 14/15/16 同款卡片叠加。注意4 栏同色C.text深色不是彩色数字——颜色留给状态——问卷统计的 4 数字没有好/坏语义不像满意度 98% 那种统一深色更稳重。StatRow 的layoutWeight(1)等宽布局——4 个 Column 各占 1/4 宽度数字 标签垂直排列Column({ space: 4 })——与 App 14/15/16/18/19/20 的 StatRow 完全一致的4 栏等宽模式——系列标准化的好处用户跨 App 操作时无需重新学习统计栏的视觉布局。ForEach的key用s.label——标签唯一我的问卷/填写记录/收集份数/进行中互不重复——用 label 做 key 比 value 更稳定value 可能重复如多个统计都是3。四、MenuList5 项菜单MenuList 是 5 项菜单最简版菜单列表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 }) }5 项菜单private menus: MenuItem[] [ { id: 1, emoji: , title: 我的问卷 }, { id: 2, emoji: , title: 填写记录 }, { id: 3, emoji: , title: 数据导出 }, { id: 4, emoji: , title: 模板收藏 }, { id: 5, emoji: ⚙️, title: 设置 } ];注意菜单与 App 13/17/20 同款——emoji 标题 箭头无图标块、无副标题、无角标——最简菜单模式。5 项菜单的问卷平台特色菜单业务 我的问卷创作者管理 填写记录填写者历史 数据导出问卷特色导出 Excel/CSV 模板收藏问卷特色收藏模板复用⚙️ 设置通用数据导出/模板收藏是问卷平台的两个特色菜单——导出数据是创作者核心需求分析完要 Excel 下载模板收藏是高频用户的效率工具不必每次从零创建——特色菜单 业务核心功能。箭头单字符——与 App 13 的›单字符›不同App 21 用半角大于号——箭头字符选择是设计自由——两者视觉效果接近但›看起来更轻盈更细的笔画看起来更硬朗更粗。Divider().color(C.stroke).strokeWidth(0.5)超细分隔线——同 App 18/19 款式——超细线 高级感。if (idx this.menus.length - 1)最后一条不加线——用 idx 判断更可靠而不是m.id length如果 m.id 不连续会失效。五、About版本信息About 是简洁的双行版本信息Builder About() { Column({ space: 4 }) { Text(在线问卷调查).fontSize(12).fontColor(C.textDim) Text(Version 1.0.0).fontSize(11).fontColor(C.textDim).opacity(0.7) } .width(100%).margin({ top: 24 }) }在线问卷调查 / Version 1.0.0——与 App 18/19/20 同款App 名 版本号——但更简洁没有© 2024 团队版权行。opacity(0.7)让版本号行比 App 名行更淡——**版本号 弱信息**视觉弱化。六、State 数量 0最简个人中心ProfileTab0 个 State——所有数据private不可变。这是系列第四个0 State个人中心App 13/17/20/21同时App 21 是最简的 0 State 个人中心4 块 vs 6 块——**无交互 纯展示**的极致。4 个 Tab 的 State 分布App 21页面State类型首页1activeCat分类筛选创建1qType题型联动数据0纯展示我的0纯展示App 21 是系列 State 最少的应用2 个——任务型应用 少状态——问卷平台不需要复杂的游戏化/社交/筛选逻辑核心是创建 填写两个动作。七、数据一致性4 栏统计与首页/数据页的关系统计我的页其他页我的问卷 8✓Func1Tab 创建问卷累计填写记录 36✓用户参与填写的累计首页没展示收集份数 2,860✓Func2Tab 数据页1,256 总填写数是其中之一进行中 3✓首页 SurveyList 中进行中状态的问卷恰好 3 份2,860 收集份数vs1,256 总填写数——2,860 是 8 份问卷的累计收集不同问卷各自的收集数之和1,256 是当前查看的这份问卷的填写数——总和 vs 单个的层级关系自洽2,860 1,256 当前问卷的 1,256 份包含在 8 份的 2,860 累计中——数据层级关系正确。八、任务型应用的个人中心设计App 21 的个人中心是任务型应用的代表与内容型/社交型个人中心的差异维度任务型App 21内容型/社交型App 18/19核心完成任务持续使用激励业务价值游戏化等级/签到/成就个人卡简化头像昵称业务身份复杂Lv/经验/签到/成就墙统计业务数字任务/填写/收集资产数字粉丝/互动/积分菜单业务操作导出/收藏资产管理充值/会员周图无行为数据签名我做了什么我用了多久任务型 业务化、社区型 游戏化——读者设计自己的产品时先想清楚用户是来做任务还是来玩——做任务 简洁个人中心玩 复杂个人中心。真实项目的任务型应用钉钉打卡、问卷星、记分宝、番茄钟——简洁个人中心更适合实用工具。系列个人中心复杂度排序从简到繁AppBuilder 数State 数复杂度21 问卷40最简17 志愿40简洁13 音乐50简洁20 阅读50简洁14 运动61中等15 环保60中等16 商城61中等18 社交72复杂19 摄影71复杂App 21 以 4 个 Builder 0 个 State 成为系列最简个人中心——问卷平台不需要游戏化——用户来创建/填写问卷不需要签到/等级/成就——功能越聚焦个人中心越简洁。4 块结构的通用性——UserCard身份 StatRow数据 MenuList操作 About版本——这 4 块是个人中心的最小可用集——任何 App 的个人中心至少需要这 4 块——App 21 把最小可用集做到了极致。