设置页面是智能家居 App 里菜单项最多的页面——三组菜单共 12 个选项其中 5 个是可切换的开关7 个是跳转链接。从截图看页面分四个区域顶部用户卡片、设备管理3 项链接、偏好设置5 项开关、系统4 项链接底部有一个红色的退出登录按钮。实现上用了三个 BuilderLink、Toggle、Div把菜单项的两种形态——可跳转的链接和可切换的开关——分别抽象成了独立的 Builder。完整效果数据结构StatenotifyOn:booleantrueStatedarkMode:booleanfalseStateautoUpdate:booleantrueStatevoiceWake:booleantrueStateenergySave:booleanfalse五个State布尔值分别控制五个开关的状态。每个开关都是独立的——修改通知提醒不会影响深色模式。这种每个开关一个变量的做法虽然啰嗦5 个变量但最直观新手也能看懂。更紧凑的做法是用一个对象管理所有开关Statesettings:Recordstring,boolean{notify:true,darkMode:false,autoUpdate:true,voiceWake:true,energySave:false}但 ArkTS 里Record的属性修改不会自动触发State刷新需要额外处理。在当前规模下5 个独立变量是更稳妥的选择。用户卡片Row(){Stack(){Column(){}.width(50).height(50).borderRadius(25).linearGradient({angle:135,colors:[[A,0],[#A78BFA,1]]})Text().fontSize(22)}Column(){Text(我的家).fontSize(16).fontWeight(FontWeight.Bold).fontColor(T1)Text(5个房间 · 17台设备).fontSize(12).fontColor(T3).margin({top:2})}.alignItems(HorizontalAlign.Start).margin({left:14}).layoutWeight(1)SymbolGlyph($r(sys.symbol.chevron_right)).fontSize(14).fontColor([#DDD])}.width(100%).padding(18).backgroundColor(#FFFFFF).borderRadius(18).margin({left:16,right:16,bottom:16}).onClick((){router.pushUrl({url:pages/RoomPage,params:{room:客厅}asRecordstring,Object})})用户卡片的结构和运动健康 App、旅行 App 的个人中心卡片一致——左侧渐变圆头像 中间文字 右侧箭头。点击后跳转到 RoomPage默认显示客厅。5个房间 · 17台设备是硬编码的——没有从ROOMS.length和DEVICES.length动态计算。如果以后数据变化需要手动更新这个字符串。更好的做法是动态拼接Text(ROOMS.length个房间 · DEVICES.length台设备)但在原型阶段写死更省事。三组菜单的分组结构// 设备管理Column({space:0}){Text(设备管理).fontSize(12).fontWeight(FontWeight.Bold).fontColor(T3).width(100%).padding(14).padding({bottom:4})this.Link(,家庭管理,管理房间和设备,(){...})this.Div()this.Link(,语音助手,小爱同学 · 已连接,(){...})this.Div()this.Link(,添加设备,扫描附近的新设备,(){...})}每组菜单用一个Column({ space: 0 })包裹顶部是灰色的组标题12px、T3 颜色下方是菜单项列表。space: 0保证菜单项之间没有额外间距——间距由 Div 分割线控制。组标题用fontSize(12)fontWeight(Bold)fontColor(T3)视觉上比菜单项更小更淡形成明确的主次关系。标题下方的padding({ bottom: 4 })给标题和第一个菜单项之间留了一点呼吸空间。菜单项的两种形态设备管理和系统组用的是Link带右箭头的跳转链接偏好设置组用的是Toggle带开关状态的切换项。两种形态的视觉结构几乎一样——左侧 emoji 中间文字标题 副标题区别只在右侧Link灰色右箭头SymbolGlyphToggle绿色开或灰色关文字Link BuilderBuilderLink(icon:string,label:string,sub:string,action:()void){Row(){Text(icon).fontSize(18).margin({right:12})Column(){Text(label).fontSize(14).fontColor(T1)Text(sub).fontSize(11).fontColor(T3).margin({top:1})}.alignItems(HorizontalAlign.Start).layoutWeight(1)SymbolGlyph($r(sys.symbol.chevron_right)).fontSize(12).fontColor([#DDD])}.width(100%).padding({left:14,right:14,top:12,bottom:12}).onClick(action)}四个参数图标、标题、副标题、回调。副标题用 T3 颜色#BBBBBB和 11px 字号比标题T1、14px更淡更小形成信息层次。右箭头用系统 SymbolGlyph 而不是 emoji视觉上更规范。Toggle BuilderBuilderToggle(icon:string,label:string,sub:string,on:boolean,action:()void){Row(){Text(icon).fontSize(18).margin({right:12})Column(){Text(label).fontSize(14).fontColor(T1)Text(sub).fontSize(11).fontColor(T3).margin({top:1})}.alignItems(HorizontalAlign.Start).layoutWeight(1)Text(on? 开:⚫ 关).fontSize(12).fontColor(on?A:T3)}.width(100%).padding({left:14,right:14,top:12,bottom:12}).onClick(action)}五个参数图标、标题、副标题、开关状态、回调。比 Link 多了一个on参数控制右侧显示 开还是⚫ 关。开关状态文字的颜色也跟随变化——开启时用主色#6C5CE7关闭时用 T3 灰色。这让开关状态不只是文字不同颜色也提供了视觉反馈。和原生 Toggle 组件的区别HarmonyOS 有内置的Toggle组件但这里没有用。原因是内置 Toggle 的样式比较固定——一个滑块在圆形轨道上左右滑动。而这个页面的开关用文字“开”/“关” emoji 圆点来表示视觉上更轻量和菜单项的文字风格更协调。在需要安静的设置页面里文字开关比滑块开关更不抢眼——用户扫一眼就能看到哪些开着哪些关着不需要辨认滑块的位置。分割线 Div BuilderBuilderDiv(){Divider().strokeWidth(0.5).color(#F0EEF4).margin({left:56})}分割线从左侧 56px 开始——跳过了 emoji 图标18px 右边距12px 一点余量让分割线从文字区域开始不会穿过图标。这个margin({ left: 56 })的值和运动健康 App、旅行 App 里的分割线处理方式一致。strokeWidth(0.5)是最细的分割线——0.5vp 在高分辨率屏幕上几乎是一条细线既能分隔菜单项又不会太显眼。退出登录按钮Row(){Text(退出登录).fontSize(15).fontWeight(FontWeight.Bold).fontColor(#FF6B6B)}.width(100%).height(50).backgroundColor(#FFFFFF).borderRadius(18).justifyContent(FlexAlign.Center).margin({left:16,right:16,bottom:30}).onClick((){router.back()})红色文字、居中对齐、独立的白色卡片。点击后只是router.back()——没有实际的退出登录逻辑只是一个 UI 占位。按钮用justifyContent(FlexAlign.Center)让文字水平居中和菜单项的左对齐形成对比。视觉上退出按钮和其他菜单项明显不同——它不是菜单里的一项而是独立的操作。三组菜单的功能映射分组菜单项类型点击行为设备管理家庭管理Link跳转 RoomPage设备管理语音助手Link切换 voiceWake设备管理添加设备Link跳转 RoomPage偏好设置通知提醒Toggle切换 notifyOn偏好设置深色模式Toggle切换 darkMode偏好设置自动更新Toggle切换 autoUpdate偏好设置语音唤醒Toggle切换 voiceWake偏好设置节能模式Toggle切换 energySave系统网络设置Link跳转 RoomPage系统固件更新Link跳转 SecurityPage系统数据统计Link跳转 EnergyPage系统关于Linkrouter.back()12 个菜单项中只有 5 个有实际的状态切换逻辑偏好设置组其他 7 个要么跳转到已有页面要么是空操作。这种少数真实、多数占位的分布是设置页面的典型状态——先把菜单结构搭好功能后面逐步填充。语音助手的特殊行为语音助手在设备管理组里用的是 Link 样式有右箭头但点击行为是切换voiceWake状态——和偏好设置里的语音唤醒切换的是同一个变量。这意味着点击语音助手会同时影响两个菜单项的显示状态因为它们共享State voiceWake。这种两个菜单项控制同一个状态的设计在实际 App 里不太常见但在原型阶段可以接受——它演示了State变量可以在不同 Builder 之间共享。设置页面和其他页面的状态差异设置页面的State变量和其他页面有一个关键区别——它们的修改不会影响其他页面修改notifyOn不会影响首页的任何显示修改darkMode不会真的切换深色主题修改energySave不会影响设备的实际能耗这是因为这些开关目前只控制页面内的显示状态没有接入真实的功能逻辑。在真正的 App 里darkMode需要切换全局主题energySave需要修改设备的运行参数notifyOn需要控制系统的通知权限。这些功能需要通过服务层或全局状态管理来实现不能只靠页面内的State。
