企业官网建设流程全解析

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

App 21「在线问卷调查」我的 Tab（ProfileTab），是个人中心页。结构最简洁——渐变用户卡（📊 问卷达人 + 已创建 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 个 @Builder（UserCard / 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（关于）。

与系列其他个人中心对比：

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 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重叠稍多——**"重叠 = 卡片叠加悬浮"**的视觉。

三、StatRow：4 栏统计

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 栏的"问卷平台视角"：

"我的问卷/填写记录/收集份数/进行中"——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"）。

四、MenuList：5 项菜单

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 下载），"模板收藏"是高频用户的效率工具（不必每次从零创建）——"特色菜单 = 业务核心功能"。

>箭头（单字符）——与 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）：

App 21 是系列 @State 最少的应用（2 个）——"任务型应用 = 少状态"——问卷平台不需要复杂的游戏化/社交/筛选逻辑，核心是"创建 + 填写"两个动作。

七、数据一致性

4 栏统计与首页/数据页的关系：

"2,860 收集份数"vs"1,256 总填写数"——2,860 是 8 份问卷的累计收集（不同问卷各自的"收集数"之和），1,256 是"当前查看的这份问卷"的填写数——"总和 vs 单个"的层级关系自洽（2,860 > 1,256 = 当前问卷的 1,256 份包含在 8 份的 2,860 累计中）——数据层级关系正确。

八、"任务型应用"的个人中心设计

App 21 的个人中心是"任务型应用"的代表，与"内容型/社交型"个人中心的差异：

"任务型 = 业务化、社区型 = 游戏化"——读者设计自己的产品时，先想清楚"用户是来做任务还是来玩"——做任务 = 简洁个人中心；玩 = 复杂个人中心。

真实项目的"任务型"应用：钉钉打卡、问卷星、记分宝、番茄钟——"简洁个人中心"更适合"实用工具"。

系列个人中心复杂度排序（从简到繁）：

App 21 以 4 个 @Builder + 0 个 @State 成为系列最简个人中心——"问卷平台不需要游戏化"——用户来"创建/填写问卷"，不需要"签到/等级/成就"——"功能越聚焦，个人中心越简洁"。

"4 块结构"的通用性——UserCard（身份）+ StatRow（数据）+ MenuList（操作）+ About（版本）——这 4 块是个人中心的"最小可用集"——任何 App 的个人中心至少需要这 4 块——App 21 把"最小可用集"做到了极致。