AccountSettingsPage：Toggle 开关 + 生物识别与隐私锁

前言“海风日记“的账号设置页面使用Toggle组件实现生物识别登录和隐私保护锁的开关控制。本文将从AccountSettingsPage.ets源码出发深入讲解 Toggle 开关的实现。一、Toggle 开关State bioAuth: boolean false State privacyLock: boolean false Row() { Column({ space: 2 }) { Text(生物识别登录).fontSize(14).fontColor(COLOR_TEXT_MAIN) Text(使用指纹或面容 ID 解锁).fontSize(11).fontColor(COLOR_TEXT_HINT) } .layoutWeight(1).alignItems(HorizontalAlign.Start) Toggle({ type: ToggleType.Switch, isOn: this.bioAuth }) .onChange((v) { this.bioAuth v }) .selectedColor(COLOR_PRIMARY) } .width(100%).padding({ left: PAGE_PADDING, right: PAGE_PADDING }).height(60)二、ToggleType 类型类型外观适用场景ToggleType.Switch滑动开关设置开关ToggleType.Checkbox复选框多选ToggleType.Button按钮单选三、隐私密码跳转Row() { Column({ space: 2 }) { Text(设置隐私密码).fontSize(14).fontColor(COLOR_TEXT_MAIN) Text(管理 6 位数字密码).fontSize(11).fontColor(COLOR_TEXT_HINT) } .layoutWeight(1).alignItems(HorizontalAlign.Start) SymbolGlyph($r(sys.symbol.chevron_right)).fontSize(14).fontColor([COLOR_TEXT_HINT]) } .width(100%).height(60) .padding({ left: PAGE_PADDING, right: PAGE_PADDING }) .onClick(() { router.pushUrl({ url: pages/privacy/PrivacyPasswordPage }) })四、selectedColor 属性Tggle({ type: ToggleType.Switch, isOn: this.bioAuth }) .selectedColor(COLOR_PRIMARY) // 选中态橙色五、常见问题5.1 Toggle 状态不更新问题点击 Toggle 后状态没有变化。原因State变量未正确绑定。解决方案在onChange回调中更新State变量。总结本文通过“海风日记“的账号设置页深入讲解了 Toggle 开关的实现ToggleType.Switch滑动开关selectedColor选中态颜色onChange 回调状态更新隐私密码跳转设置密码入口下一篇文章将深入讲解PhoneBindPage 手机绑定敬请期待。如果这篇文章对你有帮助欢迎点赞、收藏⭐、关注你的支持是我持续创作的动力相关资源Toggle 组件文档Router 路由文档海风日记项目源码[HarmonyOS 开发者官网](https://atomgit.com/openharmony/docs开源鸿蒙跨平台社区