尧图网页设计 
HarmonyOS 应用 · 寝室投票首页深度解析ended 布尔位与双态投票按钮项目编号49-dorm-vote 技术栈HarmonyOS ArkTS · ArkUI 声明式 UI · Stage 模型 本篇页面首页HomeTab.ets94 行 系列导航一首页· 二创建 · 三投票 · 四结果一、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 #FF6B9D; static readonly primarySoft: string #FCE7EF; static readonly accent: string #FF9DBA; static readonly warn: string #FF9F1C; static readonly danger: string #FF5A6E; static readonly ok: string #2BB673; }寝室投票的主色是#FF6B9D樱花粉与班级任务的#6C5CE7深紫、班费管理的#00A862翡翠绿形成区分。粉色传递轻社交/生活化/友好的色彩语义——寝室投票是生活场景外卖/值日/空调/电影粉色比紫色更亲切、比绿色更活泼。primarySoft#FCE7EF浅粉做图块背景。二、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首页(️)/创建(➕)/投票(✅)/结果()。投票的完整生命周期查看投票 → 创建投票 → 参与投票 → 查看结果。三、Vote interfaceended 布尔位interface Vote { id: number; emoji: string; title: string; options: number; voted: number; total: number; ended: boolean; }七个字段id是 key 锚点emoji是投票图标title是问题options是选项数voted是已投人数total是总人数ended是是否已结束的布尔位。ended是首页的核心状态字段——驱动按钮的双态变化。private votes: Vote[] [ { id: 1, emoji: , title: 今晚点什么外卖, options: 4, voted: 3, total: 4, ended: false }, { id: 2, emoji: , title: 本周谁值日打扫, options: 4, voted: 4, total: 4, ended: true }, { id: 3, emoji: ❄️, title: 空调温度调到几度, options: 3, voted: 2, total: 4, ended: false }, { id: 4, emoji: , title: 周末一起看什么电影, options: 5, voted: 1, total: 4, ended: false } ];四个投票覆盖寝室生活场景外卖3/4 进行中、值日4/4 已结束、空调2/4 进行中、电影1/4 进行中。ended交替 false/true验证按钮双态的渲染正确性。值日投票voted: 4 total: 4全员投完自动结束。四、Banner粉色渐变品牌头Builder Banner() { Row({ space: 12 }) { Text(️).fontSize(38) Column({ space: 4 }) { Text(民主寝室一起决定).fontSize(16).fontWeight(FontWeight.Bold).fontColor(#FFFFFF) Text(4 人寝室 · 3 个进行中投票).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]] }) }38 号 ️ 16 号加粗白色标语民主寝室一起决定 12 号半透明统计。linearGradient135° 从C.primary#FF6B9D到C.accent#FF9DBA粉色渐变传递轻社交的氛围。3 个进行中投票实时统计ended false的数量。五、VoteListended 驱动的双态按钮Builder VoteList() { Column({ space: 12 }) { ForEach(this.votes, (v: Vote) { Row({ space: 12 }) { Row() { Text(v.emoji).fontSize(26) } .width(50).height(50).backgroundColor(C.primarySoft).borderRadius(D.rSm).justifyContent(FlexAlign.Center) Column({ space: 4 }) { Text(v.title).fontSize(15).fontWeight(FontWeight.Medium).fontColor(C.text).maxLines(1) .textOverflow({ overflow: TextOverflow.Ellipsis }) Text(v.options 个选项 · v.voted / v.total 人已投).fontSize(12).fontColor(C.textDim) }.alignItems(HorizontalAlign.Start).layoutWeight(1) Text(v.ended ? 已结束 : 投票).fontSize(12) .fontColor(v.ended ? C.textDim : #FFFFFF) .padding({ left: 14, right: 14, top: 7, bottom: 7 }) .backgroundColor(v.ended ? C.cardSoft : C.primary).borderRadius(D.rSm) .onClick(() { promptAction.showToast({ message: v.ended ? 查看结果 : 参与投票 }); }) } .width(100%).padding(14).backgroundColor(C.card).borderRadius(D.rMd).border({ width: 1, color: C.stroke }) }, (v: Vote) v.id.toString()) }.width(100%) }ended驱动双态按钮——文案、字色、底色三路分支// 文案已结束 vs 投票 Text(v.ended ? 已结束 : 投票) // 字色灰色 vs 白色 .fontColor(v.ended ? C.textDim : #FFFFFF) // 底色浅灰 vs 粉色 .backgroundColor(v.ended ? C.cardSoft : C.primary)ended true时按钮已结束灰字浅灰底视觉弱化点击弹查看结果ended false时按钮投票白字粉底CTA 突出点击弹参与投票——已结束的投票不可再投。50×50 粉色图块C.primarySoft浅粉底 26 号 emojiborderRadius(D.rSm)小圆角。标题maxLines(1)Ellipsis单行省略。副标题4 个选项 · 3/4 人已投把选项数与投票进度合并为一句。六、可演进方向方向现状改法收益投票跳转Toast 占位跳转投票 Tab / 结果 Tab功能闭环自动结束静态 endedvoted total 或倒计时自动结束状态自动流转进度条纯文字 3/4卡片内嵌 voted/total 进度条投票进度可视化数据源静态 4 条服务端拉取 实时刷新多人同步投票分类筛选无进行中/已结束分段筛选快速定位首页是寝室投票的概览——Banner 的粉色渐变 VoteList 的ended驱动双态按钮。从条件渲染的状态按钮到maxLines的溢出处理每一层都有明确的职责边界。系列导航一首页· 二创建 · 三投票 · 四结果 HarmonyOS 应用 · 寝室投票首页深度解析：ended 布尔位与双态投票按钮
HarmonyOS 应用 · 寝室投票首页深度解析ended 布尔位与双态投票按钮项目编号49-dorm-vote 技术栈HarmonyOS ArkTS · ArkUI 声明式 UI · Stage 模型 本篇页面首页HomeTab.ets94 行 系列导航一首页· 二创建 · 三投票 · 四结果一、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 #FF6B9D; static readonly primarySoft: string #FCE7EF; static readonly accent: string #FF9DBA; static readonly warn: string #FF9F1C; static readonly danger: string #FF5A6E; static readonly ok: string #2BB673; }寝室投票的主色是#FF6B9D樱花粉与班级任务的#6C5CE7深紫、班费管理的#00A862翡翠绿形成区分。粉色传递轻社交/生活化/友好的色彩语义——寝室投票是生活场景外卖/值日/空调/电影粉色比紫色更亲切、比绿色更活泼。primarySoft#FCE7EF浅粉做图块背景。二、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首页(️)/创建(➕)/投票(✅)/结果()。投票的完整生命周期查看投票 → 创建投票 → 参与投票 → 查看结果。三、Vote interfaceended 布尔位interface Vote { id: number; emoji: string; title: string; options: number; voted: number; total: number; ended: boolean; }七个字段id是 key 锚点emoji是投票图标title是问题options是选项数voted是已投人数total是总人数ended是是否已结束的布尔位。ended是首页的核心状态字段——驱动按钮的双态变化。private votes: Vote[] [ { id: 1, emoji: , title: 今晚点什么外卖, options: 4, voted: 3, total: 4, ended: false }, { id: 2, emoji: , title: 本周谁值日打扫, options: 4, voted: 4, total: 4, ended: true }, { id: 3, emoji: ❄️, title: 空调温度调到几度, options: 3, voted: 2, total: 4, ended: false }, { id: 4, emoji: , title: 周末一起看什么电影, options: 5, voted: 1, total: 4, ended: false } ];四个投票覆盖寝室生活场景外卖3/4 进行中、值日4/4 已结束、空调2/4 进行中、电影1/4 进行中。ended交替 false/true验证按钮双态的渲染正确性。值日投票voted: 4 total: 4全员投完自动结束。四、Banner粉色渐变品牌头Builder Banner() { Row({ space: 12 }) { Text(️).fontSize(38) Column({ space: 4 }) { Text(民主寝室一起决定).fontSize(16).fontWeight(FontWeight.Bold).fontColor(#FFFFFF) Text(4 人寝室 · 3 个进行中投票).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]] }) }38 号 ️ 16 号加粗白色标语民主寝室一起决定 12 号半透明统计。linearGradient135° 从C.primary#FF6B9D到C.accent#FF9DBA粉色渐变传递轻社交的氛围。3 个进行中投票实时统计ended false的数量。五、VoteListended 驱动的双态按钮Builder VoteList() { Column({ space: 12 }) { ForEach(this.votes, (v: Vote) { Row({ space: 12 }) { Row() { Text(v.emoji).fontSize(26) } .width(50).height(50).backgroundColor(C.primarySoft).borderRadius(D.rSm).justifyContent(FlexAlign.Center) Column({ space: 4 }) { Text(v.title).fontSize(15).fontWeight(FontWeight.Medium).fontColor(C.text).maxLines(1) .textOverflow({ overflow: TextOverflow.Ellipsis }) Text(v.options 个选项 · v.voted / v.total 人已投).fontSize(12).fontColor(C.textDim) }.alignItems(HorizontalAlign.Start).layoutWeight(1) Text(v.ended ? 已结束 : 投票).fontSize(12) .fontColor(v.ended ? C.textDim : #FFFFFF) .padding({ left: 14, right: 14, top: 7, bottom: 7 }) .backgroundColor(v.ended ? C.cardSoft : C.primary).borderRadius(D.rSm) .onClick(() { promptAction.showToast({ message: v.ended ? 查看结果 : 参与投票 }); }) } .width(100%).padding(14).backgroundColor(C.card).borderRadius(D.rMd).border({ width: 1, color: C.stroke }) }, (v: Vote) v.id.toString()) }.width(100%) }ended驱动双态按钮——文案、字色、底色三路分支// 文案已结束 vs 投票 Text(v.ended ? 已结束 : 投票) // 字色灰色 vs 白色 .fontColor(v.ended ? C.textDim : #FFFFFF) // 底色浅灰 vs 粉色 .backgroundColor(v.ended ? C.cardSoft : C.primary)ended true时按钮已结束灰字浅灰底视觉弱化点击弹查看结果ended false时按钮投票白字粉底CTA 突出点击弹参与投票——已结束的投票不可再投。50×50 粉色图块C.primarySoft浅粉底 26 号 emojiborderRadius(D.rSm)小圆角。标题maxLines(1)Ellipsis单行省略。副标题4 个选项 · 3/4 人已投把选项数与投票进度合并为一句。六、可演进方向方向现状改法收益投票跳转Toast 占位跳转投票 Tab / 结果 Tab功能闭环自动结束静态 endedvoted total 或倒计时自动结束状态自动流转进度条纯文字 3/4卡片内嵌 voted/total 进度条投票进度可视化数据源静态 4 条服务端拉取 实时刷新多人同步投票分类筛选无进行中/已结束分段筛选快速定位首页是寝室投票的概览——Banner 的粉色渐变 VoteList 的ended驱动双态按钮。从条件渲染的状态按钮到maxLines的溢出处理每一层都有明确的职责边界。系列导航一首页· 二创建 · 三投票 · 四结果