本文解析 ImportantDays 项目中的第三个 Tab 页面MinePage包括统计卡片设计、通知权限管理、清除通知功能、版本信息展示以及设置页面的整体布局和交互设计。一、页面定位MinePage是应用的设置和管理页面提供应用信息展示统计数据卡片通知权限开关清除通知功能版本信息二、组件定义ComponentV2exportstruct MinePage{manager:ImportantDayManagerImportantDayManager.getInstance();LocalnotificationEnabled:booleanfalse;aboutToAppear():void{this.checkNotificationStatus();}}状态变量变量说明manager重要日管理器单例notificationEnabled通知权限状态初始化页面出现时检查通知权限状态同步 Toggle 开关。三、build 方法整体结构build(){Scroll(){Column(){// 1. 头部图标 应用名 标语Column(){...}// 2. 统计卡片this.statsCard()// 3. 设置列表this.settingsSection()// 4. 关于this.aboutSection()}}.scrollBar(BarState.Off).expandSafeArea([SafeAreaType.SYSTEM],[SafeAreaEdge.TOP])}布局层次Scroll └── Column ├── 头部图标 名称 标语 ├── statsCard统计卡片 ├── settingsSection设置列表 └── aboutSection关于信息四、头部设计Column(){Text().fontSize(48).margin({bottom:8})Text(重要日).fontSize(22).fontWeight(FontWeight.Bold).fontColor(#333333)Text(记录每一个值得期待的日子).fontSize(13).fontColor(#999999).margin({top:4})}.padding({top:32,bottom:32}).backgroundColor(#FAFAFA)视觉效果┌────────────────────────────┐ │ │ │ │ │ 重要日 │ │ 记录每一个值得期待的日子 │ │ │ └────────────────────────────┘日历 emoji 作为应用图标应用名称 22vp 粗体标语 13vp 灰色五、统计卡片BuilderstatsCard(){Row(){Column(){Text(${this.manager.getStats().total}).fontSize(28).fontWeight(FontWeight.Bold).fontColor(#FF6B6B)Text(全部).fontSize(12).fontColor(#999999).margin({top:2})}.layoutWeight(1)Column(){Text(${this.manager.getStats().upcoming}).fontSize(28).fontWeight(FontWeight.Bold).fontColor(#4ECDC4)Text(即将到来).fontSize(12).fontColor(#999999).margin({top:2})}.layoutWeight(1)Column(){Text(${this.manager.getStats().today}).fontSize(28).fontWeight(FontWeight.Bold).fontColor(#F7DC6F)Text(今天).fontSize(12).fontColor(#999999).margin({top:2})}.layoutWeight(1)Column(){Text(${this.manager.getStats().past}).fontSize(28).fontWeight(FontWeight.Bold).fontColor(#999999)Text(已过).fontSize(12).fontColor(#999999).margin({top:2})}.layoutWeight(1)}.padding({top:20,bottom:20}).backgroundColor(#FFFFFF).borderRadius(12).margin({left:16,right:16,top:16}).shadow({radius:4,color:#10000000,offsetX:0,offsetY:2})}统计项设计统计项颜色说明全部#FF6B6B红总数主题色即将到来#4ECDC4青需要关注今天#F7DC6F黄特别提示已过#999999灰弱化与列表页统计的对比列表页和我的页都显示统计数据但设计不同特性列表页 statsBar我的页 statsCard字体大小20vp28vp布局SpaceAroundlayoutWeight(1)背景透明白色圆角卡片阴影无有颜色与我的页不同与列表页不同注意两个页面的统计颜色略有不同列表页全部用灰色我的页全部用红色这是设计上的小差异。卡片样式.borderRadius(12).shadow({radius:4,color:#10000000,offsetX:0,offsetY:2})白色圆角卡片配轻微阴影营造浮起效果。六、设置列表BuildersettingsSection(){Column(){Text(设置).fontSize(14).fontColor(#999999).margin({left:4,bottom:8,top:24})// 通知设置Row(){Text(通知提醒).fontSize(15).fontColor(#333333).layoutWeight(1)Toggle({type:ToggleType.Switch,isOn:this.notificationEnabled}).selectedColor(#FF6B6B).onChange((on:boolean){this.toggleNotification(on);})}.height(52).padding({left:16,right:16}).backgroundColor(#FFFFFF).borderRadius(12)Divider().color(#F0F0F0).margin({left:16,right:16})// 清除所有通知Row(){Text(清除所有通知).fontSize(15).fontColor(#333333).layoutWeight(1)Text().fontSize(16).fontColor(#CCCCCC)}.height(52).padding({left:16,right:16}).backgroundColor(#FFFFFF).borderRadius(12).onClick((){NotificationUtil.cancelAll();})}.padding({left:16,right:16}).alignItems(HorizontalAlign.Start)}设置项设计设置 ┌────────────────────────────┐ │ 通知提醒 [开关] │ ├────────────────────────────┤ │ 清除所有通知 │ └────────────────────────────┘通知开关Toggle({type:ToggleType.Switch,isOn:this.notificationEnabled}).selectedColor(#FF6B6B).onChange((on:boolean){this.toggleNotification(on);})开关处理逻辑privateasynctoggleNotification(on:boolean):Promisevoid{if(on){constresultawaitNotificationUtil.requestPermission();this.notificationEnabledresult;}else{this.notificationEnabledfalse;}}开启通知调用requestPermission()请求系统权限用户授权 →notificationEnabled true用户拒绝 →notificationEnabled falseToggle 自动回弹关闭通知直接设置notificationEnabled false注意这里只是更新 UI 状态不会撤销系统权限清除通知.onClick((){NotificationUtil.cancelAll();})点击清除所有已发布的通知。七、关于部分BuilderaboutSection(){Column(){Text(关于).fontSize(14).fontColor(#999999).margin({left:4,bottom:8,top:24})Row(){Text(版本).fontSize(15).fontColor(#333333).layoutWeight(1)Text(1.0.0).fontSize(14).fontColor(#999999)}.height(52).padding({left:16,right:16}).backgroundColor(#FFFFFF).borderRadius(12)Text(重要日日历应用 v1.0.0\n支持倒数/正数、提醒通知、自定义颜色、日历标记).fontSize(12).fontColor(#CCCCCC).textAlign(TextAlign.Center).margin({top:16,bottom:32})}.padding({left:16,right:16}).alignItems(HorizontalAlign.Start)}关于部分布局关于 ┌────────────────────────────┐ │ 版本 1.0.0│ └────────────────────────────┘ 重要日日历应用 v1.0.0 支持倒数/正数、提醒通知、自定义颜色、日历标记八、通知权限管理详解权限检查privateasynccheckNotificationStatus():Promisevoid{this.notificationEnabledawaitNotificationUtil.checkPermission();}在aboutToAppear中调用确保 Toggle 状态与实际权限一致。权限请求流程用户打开通知开关 ↓ toggleNotification(true) ↓ NotificationUtil.requestPermission() ↓ notificationManager.requestEnableNotification() ↓ 系统弹出权限对话框 ↓ ├── 允许 → 返回 true → Toggle 保持开启 └── 拒绝 → 返回 false → Toggle 回弹到关闭权限与提醒的关系通知权限 系统级开关 ↓ checkAndSendReminders() 中检查 ↓ if (!hasPermission) return; // 无权限则不发通知 ↓ 有权限 → 遍历需要提醒的重要日 → 发布通知九、设置项的 UI 规范统一行高所有设置项行高统一为 52vp.height(52)统一内边距.padding({left:16,right:16})统一圆角.borderRadius(12)分割线Divider().color(#F0F0F0).margin({left:16,right:16})浅灰色分割线左右缩进与文字对齐。十、总结MinePage的设计体现了以下原则信息分区头部 → 统计 → 设置 → 关于层次分明设置规范化统一行高、内边距、圆角权限管理Toggle 开关联动系统权限请求实时统计统计卡片实时反映数据状态简洁克制不过度设计聚焦核心功能我的页面虽然功能简单但它是用户管理应用设置的唯一入口设计质量直接影响用户对应用的信任感。