当前位置：首页 > news >正文

HarmonyOS7 通知设置页用开关组：ArkUI/ArkTS 实战拆解

news 2026/7/27 23:47:23

文章目录

- - 前言
  - 为什么这个问题经常被写乱
  - 分组建议
  - 实现步骤
  - ArkUI/ArkTS 示例
  - 关键代码说明
  - 保存和同步注意点
  - 通知开关要解释选择后果
  - 小结

前言

通知设置页最怕两种情况：开关太多没有分组，或者每个开关文案都很像。用户并不想研究系统设计，他们只想知道打开后会收到什么、关闭后会错过什么。我会把通知设置做成分组列表，每个开关有标题和解释。

开关组不是把 Toggle 排成一列，而是把选择后果说清楚。

本文用“消息通知设置”做例子。订单、安全和营销通知的优先级不同，不能简单放在同一个无说明列表里。

为什么这个问题经常被写乱

通知设置页用开关组这类内容很容易被写成“代码能跑就算讲完了”，但对初学者来说，这恰恰是最不够的地方。真正让人卡住的，往往不是某个组件名记不住，而是不知道这段代码为什么要这样拆、状态为什么要这样放、以后需求变化时应该从哪里改。

所以这篇文章不只想给你一个能跑的例子，更想把背后的判断过程讲清楚。你只要把这个判断过程吃透，后面自己改页面、补需求、查问题时，心里会稳很多。

分组建议

分组	例子
重要通知	订单、支付、安全
营销通知	优惠、活动、推荐
提醒方式	声音、振动、横幅

实现步骤

每个开关项都要有 key、标题、说明和值。
重要通知和营销通知分组展示，降低理解成本。
切换时用 key 更新目标项，不直接修改旧对象。
重要通知可以增加二次确认或风险说明。
保存时只提交变更项，避免覆盖其他端更新。

ArkUI/ArkTS 示例

classNoticeOption{key:string=''title:string=''desc:string=''group:string=''enabled:boolean=falseconstructor(key:string,title:string,desc:string,group:string,enabled:boolean){this.key=keythis.title=titlethis.desc=descthis.group=groupthis.enabled=enabled}}@Entry@Componentstruct NoticeSettingPage{@Stateoptions:NoticeOption[]=[newNoticeOption('order','订单状态','支付、发货、退款进度提醒','重要通知',true),newNoticeOption('safe','账号安全','异地登录和密码变更提醒','重要通知',true),newNoticeOption('promo','优惠活动','优惠券、会员日和营销活动','营销通知',false),newNoticeOption('sound','声音提醒','收到通知时播放提示音','提醒方式',true)]privatetoggle(key:string,value:boolean):void{this.options=this.options.map((item:NoticeOption)=>{returnitem.key===key?newNoticeOption(item.key,item.title,item.desc,item.group,value):item})}privategroupOptions(group:string):NoticeOption[]{returnthis.options.filter((item:NoticeOption)=>item.group===group)}@BuilderOptionRow(item:NoticeOption){Row(){Column({space:4}){Text(item.title).fontSize(16).fontWeight(FontWeight.Medium)Text(item.desc).fontSize(12).fontColor('#777777')}.alignItems(HorizontalAlign.Start)Blank()Toggle({type:ToggleType.Switch,isOn:item.enabled}).onChange((value:boolean)=>this.toggle(item.key,value))}.padding(14).backgroundColor('#FFFFFF')}build(){Column({space:14}){Text('通知设置').fontSize(24).fontWeight(FontWeight.Bold)Text('建议保留订单和安全提醒，营销通知可按需关闭。').fontSize(13).fontColor('#777777')ForEach(['重要通知','营销通知','提醒方式'],(group:string)=>{Text(group).fontSize(16).fontWeight(FontWeight.Medium)Column(){ForEach(this.groupOptions(group),(item:NoticeOption)=>{this.OptionRow(item)Divider().color('#EEEEEE')},(item:NoticeOption)=>item.key)}.borderRadius(12).clip(true)},(group:string)=>group)}.padding(16).backgroundColor('#F5F6FA').height('100%')}}

关键代码说明

NoticeOption把标题、说明和开关值放在一起，设置项不会只剩一个看不懂的布尔值。

toggle()用 key 更新单项，避免直接修改数组里的对象导致刷新不明确。

说明文案比开关本身更重要，用户需要知道关闭后影响什么。

保存和同步注意点

场景	建议处理
用户快速连续切换	本地立即反馈，保存按钮防重复
重要通知关闭	给出风险说明
保存失败	回滚或提示用户重试
多端设置冲突	以后端最新配置为准并重新拉取

设置页看起来只是本地开关，实际经常要和服务端配置同步。UI 状态、保存状态、服务端状态最好分清楚，不要让 Toggle 一切换就假装已经永久生效。