HarmonyOS 应用 · 班费管理首页深度解析余额渐变卡与 isIncome 收支双态项目编号47-class-fund 技术栈HarmonyOS ArkTS · ArkUI 声明式 UI · Stage 模型 本篇页面首页HomeTab.ets103 行 系列导航一首页· 二收支 · 三成员 · 四统计一、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 #00A862; static readonly primarySoft: string #E0F5EB; static readonly accent: string #4BC98A; static readonly warn: string #FF9F1C; static readonly danger: string #FF5A6E; static readonly ok: string #2BB673; }班费管理的主色是#00A862翡翠绿与通讯录的#0984E3亮蓝、签到墙的#FDCB6E暖黄形成区分。绿色传递财务/金钱/收益的色彩语义——班费是集体资金绿色比蓝色更贴近钱的联想。danger#FF5A6E红色用于支出ok#2BB673绿色用于收入——收支双色的财务惯例。二、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首页()/收支()/成员()/统计()。Tab 图标直接用 emoji 表达功能域—— 余额、 记账、 成员、 统计财务管理的四个核心环节。三、Record interfaceisIncome 收支方向布尔位interface Record { id: number; emoji: string; title: string; amount: number; isIncome: boolean; time: string; }六个字段id是 key 锚点emoji是记录图标title是摘要amount是金额isIncome是收入还是支出的布尔位time是日期。isIncome是首页的核心状态字段——驱动金额的正负号与红绿色双态变化。private records: Record[] [ { id: 1, emoji: , title: 班费收缴40人, amount: 2000, isIncome: true, time: 9月1日 }, { id: 2, emoji: , title: 中秋活动采购, amount: 480, isIncome: false, time: 9月10日 }, { id: 3, emoji: , title: 运动会物资, amount: 320, isIncome: false, time: 10月15日 }, { id: 4, emoji: , title: 班级团建费用, amount: 650, isIncome: false, time: 11月2日 } ];四条记录1 笔收入班费收缴 2000 3 笔支出中秋 480 / 运动会 320 / 团建 650。余额 2000 - 480 - 320 - 650 550与 BalanceCard 的550.00一致。四、页面骨架Header BalanceCard RecordListbuild() { Column() { this.Header() Scroll() { Column({ space: 14 }) { this.BalanceCard() this.SectionTitle(近期收支) this.RecordList() } .width(100%) .padding({ left: D.pad, right: D.pad, top: 14, bottom: D.pad this.safeBottom 20 }) } .layoutWeight(1).scrollBar(BarState.Off).align(Alignment.Top) } .width(100%).height(100%).backgroundColor(C.bg) }Header 在 Scroll 外固定Scroll 内三块BalanceCard渐变余额卡 SectionTitle分区标题 全部 RecordList收支记录列表。五、BalanceCard绿色渐变余额 收支双栏Builder BalanceCard() { Column({ space: 16 }) { Column({ space: 6 }) { Text(班费余额元).fontSize(13).fontColor(#FFFFFF).opacity(0.9) Text(550.00).fontSize(34).fontWeight(FontWeight.Bold).fontColor(#FFFFFF) }.alignItems(HorizontalAlign.Start).width(100%) Row() { Column({ space: 4 }) { Text(总收入).fontSize(12).fontColor(#FFFFFF).opacity(0.9) Text(¥2000).fontSize(16).fontWeight(FontWeight.Bold).fontColor(#FFFFFF) }.alignItems(HorizontalAlign.Start).layoutWeight(1) Column({ space: 4 }) { Text(总支出).fontSize(12).fontColor(#FFFFFF).opacity(0.9) Text(¥1450).fontSize(16).fontWeight(FontWeight.Bold).fontColor(#FFFFFF) }.alignItems(HorizontalAlign.Start).layoutWeight(1) }.width(100%) } .width(100%).padding(20).borderRadius(D.rLg) .linearGradient({ angle: 135, colors: [[C.primary, 0.0], [C.accent, 1.0]] }) }34 号大数字550.00班费余额——大数字是财务产品的核心视觉用户一眼看到还剩多少钱。34 号字比其他项目的统计数字大了近一倍因为余额是班费管理的第一指标。双栏总收入/总支出layoutWeight(1)等分16 号加粗白色金额。linearGradient135° 从C.primary#00A862到C.accent#4BC98A绿色渐变传递资金的视觉语义。六、SectionTitleBlank 撑开的标题行Builder SectionTitle(title: string) { Row() { Text(title).fontSize(16).fontWeight(FontWeight.Bold).fontColor(C.text) Blank() Text(全部 ).fontSize(12).fontColor(C.textDim) }.width(100%) }Blank()在中间撑开——左侧标题贴左、右侧全部 贴右。Blank是 ArkUI 的弹性占位组件类似 CSS 的flex: 1比layoutWeight(1)更语义化。七、RecordListisIncome 驱动的红绿双态金额Builder RecordList() { Column({ space: 10 }) { ForEach(this.records, (r: Record) { Row({ space: 12 }) { Row() { Text(r.emoji).fontSize(22) } .width(44).height(44).backgroundColor(C.cardSoft).borderRadius(22).justifyContent(FlexAlign.Center) Column({ space: 3 }) { Text(r.title).fontSize(14).fontColor(C.text).maxLines(1) .textOverflow({ overflow: TextOverflow.Ellipsis }) Text(r.time).fontSize(12).fontColor(C.textDim) }.alignItems(HorizontalAlign.Start).layoutWeight(1) Text((r.isIncome ? : -) ¥ r.amount).fontSize(15).fontWeight(FontWeight.Bold) .fontColor(r.isIncome ? C.ok : C.danger) } .width(100%).padding(12).backgroundColor(C.card).borderRadius(D.rMd).border({ width: 1, color: C.stroke }) }, (r: Record) r.id.toString()) }.width(100%) }isIncome驱动双态变化——符号与颜色两路分支// 符号 vs - Text((r.isIncome ? : -) ¥ r.amount) // 颜色绿色 vs 红色 .fontColor(r.isIncome ? C.ok : C.danger)isIncome true时金额显示¥2000绿色C.okisIncome false时显示-¥480红色C.danger——收入绿、支出红是财务产品的通用色彩惯例。标题maxLines(1)Ellipsis单行省略保证卡片高度一致。八、可演进方向方向现状改法收益余额计算写死 550从 records 动态求和余额自动更新记录跳转无 onClick点击进入记录详情展示完整信息全部入口全部 无事件跳转收支 Tab查看全部记录数据源静态 4 条服务端拉取 分页真实班费数据时间排序数组顺序固定按时间倒序排序最新记录在前首页是班费管理的概览——BalanceCard 的绿色渐变余额 RecordList 的红绿双态收支记录。从isIncome驱动的符号/颜色双分支到 34 号大数字的余额展示每一层都有明确的职责边界。系列导航一首页· 二收支 · 三成员 · 四统计