尧图网站建设 
HarmonyOS 应用 · 室友评价首页深度解析渐变寝室卡与 toFixed 星级展示项目编号50-roommate-rate 技术栈HarmonyOS ArkTS · ArkUI 声明式 UI · Stage 模型 本篇页面首页HomeTab.ets91 行 系列导航一首页· 二评价 · 三数据 · 四我的一、Theme.ets靛蓝主题与评价产品的色彩语义export class C { static readonly bg: string #F2F5FB; static readonly card: string #FFFFFF; static readonly cardSoft: string #F4F6FB; static readonly stroke: string #EAEEF6; static readonly text: string #1C2333; static readonly textSub: string #5A6483; static readonly textDim: string #9AA3BC; static readonly primary: string #5555AA; static readonly primarySoft: string #EAEBF5; static readonly accent: string #7B85C5; static readonly warn: string #FF9F1C; static readonly danger: string #FF5A6E; static readonly ok: string #2BB673; }室友评价的主色是#5555AA靛蓝与寝室投票的#FF6B9D樱花粉、班级任务的#6C5CE7深紫形成区分。靛蓝传递评价/理性/客观的色彩语义——室友评价需要客观打分靛蓝比粉色更中性、比紫色更冷静。warn#FF9F1C橙色用于星级评分——金色星星是评分的通用语义色。二、Index.etsTabs 容器与四 Tab 布局Tabs({ barPosition: BarPosition.End, index: this.current }) { TabContent() { HomeTab() }.tabBar(this.bar(首页, , 0)) TabContent() { Func1Tab() }.tabBar(this.bar(评价, , 1)) TabContent() { Func2Tab() }.tabBar(this.bar(数据, , 2)) TabContent() { ProfileTab() }.tabBar(this.bar(我的, , 3)) } .barBackgroundColor(#FFFFFF) .barHeight(60 this.safeBottom) .scrollable(false) .onChange((idx: number) { this.current idx; }) .width(100%).height(100%).backgroundColor(C.bg)四个 Tab首页()/评价()/数据()/我的()。室友评价的完整流程查看寝室概览 → 评价室友 → 查看数据分析 → 个人设置。三、Roommate interfacescore 浮点评分interface Roommate { id: number; emoji: string; name: string; bed: string; score: number; }五个字段id是 key 锚点emoji是头像图标name是姓名bed是床位score是评分浮点数。score是首页的核心展示字段——驱动星级评分的数值显示。private roommates: Roommate[] [ { id: 1, emoji: , name: 小李我, bed: 1号床, score: 4.8 }, { id: 2, emoji: , name: 阿强, bed: 2号床, score: 4.5 }, { id: 3, emoji: , name: 小明, bed: 3号床, score: 4.2 }, { id: 4, emoji: , name: 大伟, bed: 4号床, score: 4.6 } ];四位室友小李我4.8 / 阿强 4.5 / 小明 4.2 / 大伟 4.6。score是浮点数4.8 而非 5需要toFixed(1)格式化展示。四、DormCard靛蓝渐变寝室概览Builder DormCard() { Row({ space: 14 }) { Text().fontSize(40) Column({ space: 4 }) { Text(紫荆公寓 3-206).fontSize(17).fontWeight(FontWeight.Bold).fontColor(#FFFFFF) Text(4 人寝室 · 寝室和谐度 92%).fontSize(12).fontColor(#FFFFFF).opacity(0.9) }.alignItems(HorizontalAlign.Start).layoutWeight(1) } .width(100%).padding(18).borderRadius(D.rLg) .linearGradient({ angle: 135, colors: [[C.primary, 0.0], [C.accent, 1.0]] }) }40 号 17 号加粗白色寝室名 12 号半透明4 人寝室 · 寝室和谐度 92%。linearGradient135° 从C.primary#5555AA到C.accent#7B85C5靛蓝渐变。92%和谐度与数据页 ScoreCard 的92一致。五、MemberListtoFixed 格式化 ⭐ 星级展示Builder MemberList() { Column({ space: 10 }) { ForEach(this.roommates, (r: Roommate) { Row({ space: 12 }) { Row() { Text(r.emoji).fontSize(24) } .width(48).height(48).backgroundColor(C.primarySoft).borderRadius(24).justifyContent(FlexAlign.Center) Column({ space: 3 }) { Text(r.name).fontSize(14).fontWeight(FontWeight.Medium).fontColor(C.text) Text(r.bed).fontSize(12).fontColor(C.textDim) }.alignItems(HorizontalAlign.Start).layoutWeight(1) Row({ space: 4 }) { Text(⭐).fontSize(14) Text(r.score.toFixed(1)).fontSize(15).fontWeight(FontWeight.Bold).fontColor(C.warn) } } .width(100%).padding(12).backgroundColor(C.card).borderRadius(D.rMd).border({ width: 1, color: C.stroke }) .onClick(() { promptAction.showToast({ message: r.name }); }) }, (r: Roommate) r.id.toString()) }.width(100%) }toFixed(1)格式化浮点评分——本页特色// ⭐ toFixed(1) 格式化分数 Row({ space: 4 }) { Text(⭐).fontSize(14) Text(r.score.toFixed(1)).fontSize(15).fontWeight(FontWeight.Bold).fontColor(C.warn) }r.score是浮点数4.8toFixed(1)保证一位小数展示——即使 score 是整数 5 也显示5.0。C.warn#FF9F1C橙色字——金色星星 橙色数字的评分配色。48×48 浅靛圆头像C.primarySoft#EAEBF5浅靛底 borderRadius(24)正圆 24 号 emoji。整卡onClick弹姓名。六、可演进方向方向现状改法收益评分来源静态 score从评价记录动态平均评分随评价更新点击跳转Toast 姓名跳转室友详情页展示完整评价星级可视化仅数字5 星半星图标展示评分更直观和谐度计算写死 92%从四维度评分加权计算和谐度随数据更新数据源静态 4 人服务端拉取寝室成员真实成员数据首页是室友评价的概览——DormCard 的靛蓝渐变寝室信息 MemberList 的toFixed格式化星级展示。从浮点评分的格式化到 ⭐ 橙色数字的评分配色每一层都有明确的职责边界。系列导航一首页· 二评价 · 三数据 · 四我的 HarmonyOS 应用 · 室友评价首页深度解析：渐变寝室卡与 toFixed 星级展示
HarmonyOS 应用 · 室友评价首页深度解析渐变寝室卡与 toFixed 星级展示项目编号50-roommate-rate 技术栈HarmonyOS ArkTS · ArkUI 声明式 UI · Stage 模型 本篇页面首页HomeTab.ets91 行 系列导航一首页· 二评价 · 三数据 · 四我的一、Theme.ets靛蓝主题与评价产品的色彩语义export class C { static readonly bg: string #F2F5FB; static readonly card: string #FFFFFF; static readonly cardSoft: string #F4F6FB; static readonly stroke: string #EAEEF6; static readonly text: string #1C2333; static readonly textSub: string #5A6483; static readonly textDim: string #9AA3BC; static readonly primary: string #5555AA; static readonly primarySoft: string #EAEBF5; static readonly accent: string #7B85C5; static readonly warn: string #FF9F1C; static readonly danger: string #FF5A6E; static readonly ok: string #2BB673; }室友评价的主色是#5555AA靛蓝与寝室投票的#FF6B9D樱花粉、班级任务的#6C5CE7深紫形成区分。靛蓝传递评价/理性/客观的色彩语义——室友评价需要客观打分靛蓝比粉色更中性、比紫色更冷静。warn#FF9F1C橙色用于星级评分——金色星星是评分的通用语义色。二、Index.etsTabs 容器与四 Tab 布局Tabs({ barPosition: BarPosition.End, index: this.current }) { TabContent() { HomeTab() }.tabBar(this.bar(首页, , 0)) TabContent() { Func1Tab() }.tabBar(this.bar(评价, , 1)) TabContent() { Func2Tab() }.tabBar(this.bar(数据, , 2)) TabContent() { ProfileTab() }.tabBar(this.bar(我的, , 3)) } .barBackgroundColor(#FFFFFF) .barHeight(60 this.safeBottom) .scrollable(false) .onChange((idx: number) { this.current idx; }) .width(100%).height(100%).backgroundColor(C.bg)四个 Tab首页()/评价()/数据()/我的()。室友评价的完整流程查看寝室概览 → 评价室友 → 查看数据分析 → 个人设置。三、Roommate interfacescore 浮点评分interface Roommate { id: number; emoji: string; name: string; bed: string; score: number; }五个字段id是 key 锚点emoji是头像图标name是姓名bed是床位score是评分浮点数。score是首页的核心展示字段——驱动星级评分的数值显示。private roommates: Roommate[] [ { id: 1, emoji: , name: 小李我, bed: 1号床, score: 4.8 }, { id: 2, emoji: , name: 阿强, bed: 2号床, score: 4.5 }, { id: 3, emoji: , name: 小明, bed: 3号床, score: 4.2 }, { id: 4, emoji: , name: 大伟, bed: 4号床, score: 4.6 } ];四位室友小李我4.8 / 阿强 4.5 / 小明 4.2 / 大伟 4.6。score是浮点数4.8 而非 5需要toFixed(1)格式化展示。四、DormCard靛蓝渐变寝室概览Builder DormCard() { Row({ space: 14 }) { Text().fontSize(40) Column({ space: 4 }) { Text(紫荆公寓 3-206).fontSize(17).fontWeight(FontWeight.Bold).fontColor(#FFFFFF) Text(4 人寝室 · 寝室和谐度 92%).fontSize(12).fontColor(#FFFFFF).opacity(0.9) }.alignItems(HorizontalAlign.Start).layoutWeight(1) } .width(100%).padding(18).borderRadius(D.rLg) .linearGradient({ angle: 135, colors: [[C.primary, 0.0], [C.accent, 1.0]] }) }40 号 17 号加粗白色寝室名 12 号半透明4 人寝室 · 寝室和谐度 92%。linearGradient135° 从C.primary#5555AA到C.accent#7B85C5靛蓝渐变。92%和谐度与数据页 ScoreCard 的92一致。五、MemberListtoFixed 格式化 ⭐ 星级展示Builder MemberList() { Column({ space: 10 }) { ForEach(this.roommates, (r: Roommate) { Row({ space: 12 }) { Row() { Text(r.emoji).fontSize(24) } .width(48).height(48).backgroundColor(C.primarySoft).borderRadius(24).justifyContent(FlexAlign.Center) Column({ space: 3 }) { Text(r.name).fontSize(14).fontWeight(FontWeight.Medium).fontColor(C.text) Text(r.bed).fontSize(12).fontColor(C.textDim) }.alignItems(HorizontalAlign.Start).layoutWeight(1) Row({ space: 4 }) { Text(⭐).fontSize(14) Text(r.score.toFixed(1)).fontSize(15).fontWeight(FontWeight.Bold).fontColor(C.warn) } } .width(100%).padding(12).backgroundColor(C.card).borderRadius(D.rMd).border({ width: 1, color: C.stroke }) .onClick(() { promptAction.showToast({ message: r.name }); }) }, (r: Roommate) r.id.toString()) }.width(100%) }toFixed(1)格式化浮点评分——本页特色// ⭐ toFixed(1) 格式化分数 Row({ space: 4 }) { Text(⭐).fontSize(14) Text(r.score.toFixed(1)).fontSize(15).fontWeight(FontWeight.Bold).fontColor(C.warn) }r.score是浮点数4.8toFixed(1)保证一位小数展示——即使 score 是整数 5 也显示5.0。C.warn#FF9F1C橙色字——金色星星 橙色数字的评分配色。48×48 浅靛圆头像C.primarySoft#EAEBF5浅靛底 borderRadius(24)正圆 24 号 emoji。整卡onClick弹姓名。六、可演进方向方向现状改法收益评分来源静态 score从评价记录动态平均评分随评价更新点击跳转Toast 姓名跳转室友详情页展示完整评价星级可视化仅数字5 星半星图标展示评分更直观和谐度计算写死 92%从四维度评分加权计算和谐度随数据更新数据源静态 4 人服务端拉取寝室成员真实成员数据首页是室友评价的概览——DormCard 的靛蓝渐变寝室信息 MemberList 的toFixed格式化星级展示。从浮点评分的格式化到 ⭐ 橙色数字的评分配色每一层都有明确的职责边界。系列导航一首页· 二评价 · 三数据 · 四我的