企业官网建设流程全解析

前言

“海风日记“的账号设置页面使用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 类型

三、隐私密码跳转

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 开关的实现：

1. ToggleType.Switch：滑动开关
2. selectedColor：选中态颜色
3. onChange 回调：状态更新
4. 隐私密码跳转：设置密码入口

下一篇文章将深入讲解PhoneBindPage 手机绑定，敬请期待。

如果这篇文章对你有帮助，欢迎点赞👍、收藏⭐、关注🔔，你的支持是我持续创作的动力！

相关资源：

• Toggle 组件文档
• Router 路由文档
• 海风日记项目源码
• [HarmonyOS 开发者官网](https://atomgit.com/openharmony/docs
• 开源鸿蒙跨平台社区