前言“海风日记“的隐私密码页面展示了三态页面设计未设置状态、输入密码状态和已设置状态三种状态共享同一个页面组件。本文将从源码出发深入讲解三态页面设计的实现。一、三态切换逻辑State hasPassword: boolean false State isSettingMode: boolean false // 三态判断 if (!this.hasPassword !this.isSettingMode) { // 状态 1未设置 this.unsetState() } else if (this.isSettingMode) { // 状态 2输入密码 this.settingState() } else { // 状态 3已设置 this.settedState() }二、状态 1未设置Column({ space: 16 }) { Stack() { Circle().width(80).height(80).fill(#FFF3E0) Text().fontSize(36) } Text(尚未设置隐私密码).fontSize(18).fontColor(COLOR_TEXT_MAIN).fontWeight(FontWeight.Bold) Text(设置密码后每次进入应用需要验证密码).fontSize(14).fontColor(COLOR_TEXT_HINT) Button(设置密码) .width(100%).height(50).fontSize(17).fontColor(#FFFFFF) .backgroundColor(COLOR_PRIMARY).borderRadius(BTN_RADIUS_FULL) .onClick(() { this.isSettingMode true; this.password }) }三、状态 2输入密码Column({ space: 16 }) { Text(this.stepTitle).fontSize(20).fontColor(COLOR_TEXT_MAIN).fontWeight(FontWeight.Bold) Text(this.stepDesc).fontSize(14).fontColor(COLOR_TEXT_HINT) // 6 位密码圆点 Row({ space: 12 }) { ForEach([0, 1, 2, 3, 4, 5], (i: number) { Column() { if (this.password.length i) { Circle().width(14).height(14).fill(COLOR_PRIMARY) } } .width(46).height(56).backgroundColor(COLOR_CARD_BG).borderRadius(10) .border({ width: 1.5, color: this.password.length i ? COLOR_PRIMARY : #E0E0E0 }) .justifyContent(FlexAlign.Center) }) } // 数字键盘 Column() { ForEach(this.KEY_ROWS, (row: string[]) { Row() { ForEach(row, (key: string) { Column() { if (key del) { SymbolGlyph($r(sys.symbol.delete_left)).fontSize(20) } else if (key.length 0) { Text(key).fontSize(22).fontColor(COLOR_TEXT_MAIN) } } .layoutWeight(1).height(64) .backgroundColor(key.length 0 ? COLOR_CARD_BG : COLOR_BG_PAGE) .onClick(() this.handleKey(key)) }) } }) } }四、状态 3已设置Column({ space: 16 }) { Row({ space: 8 }) { Text(✓).fontSize(16).fontColor(#4CAF50) Text(已开启隐私保护).fontSize(15).fontColor(#4CAF50) } Column() { Row() { Text(修改密码).fontSize(15).fontColor(COLOR_TEXT_MAIN).layoutWeight(1) SymbolGlyph($r(sys.symbol.chevron_right)).fontSize(14) } .onClick(() { this.isSettingMode true this.stepTitle 修改隐私密码 this.password }) Row() { Text(关闭密码).fontSize(15).fontColor(#D06060).layoutWeight(1) } .onClick(() { this.hasPassword false }) } }五、总结本文通过“海风日记“的隐私密码页面深入讲解了三态页面设计的实现三态切换State 条件判断未设置引导用户设置密码输入密码密码圆点 数字键盘已设置修改/关闭密码如果这篇文章对你有帮助欢迎点赞、收藏⭐、关注你的支持是我持续创作的动力相关资源State 装饰器文档Circle 组件文档海风日记项目源码[HarmonyOS 开发者官网](https://atomgit.com/openharmony/docs开源鸿蒙跨平台社区
三态页面设计：未设置/输入中/已设置状态切换
前言“海风日记“的隐私密码页面展示了三态页面设计未设置状态、输入密码状态和已设置状态三种状态共享同一个页面组件。本文将从源码出发深入讲解三态页面设计的实现。一、三态切换逻辑State hasPassword: boolean false State isSettingMode: boolean false // 三态判断 if (!this.hasPassword !this.isSettingMode) { // 状态 1未设置 this.unsetState() } else if (this.isSettingMode) { // 状态 2输入密码 this.settingState() } else { // 状态 3已设置 this.settedState() }二、状态 1未设置Column({ space: 16 }) { Stack() { Circle().width(80).height(80).fill(#FFF3E0) Text().fontSize(36) } Text(尚未设置隐私密码).fontSize(18).fontColor(COLOR_TEXT_MAIN).fontWeight(FontWeight.Bold) Text(设置密码后每次进入应用需要验证密码).fontSize(14).fontColor(COLOR_TEXT_HINT) Button(设置密码) .width(100%).height(50).fontSize(17).fontColor(#FFFFFF) .backgroundColor(COLOR_PRIMARY).borderRadius(BTN_RADIUS_FULL) .onClick(() { this.isSettingMode true; this.password }) }三、状态 2输入密码Column({ space: 16 }) { Text(this.stepTitle).fontSize(20).fontColor(COLOR_TEXT_MAIN).fontWeight(FontWeight.Bold) Text(this.stepDesc).fontSize(14).fontColor(COLOR_TEXT_HINT) // 6 位密码圆点 Row({ space: 12 }) { ForEach([0, 1, 2, 3, 4, 5], (i: number) { Column() { if (this.password.length i) { Circle().width(14).height(14).fill(COLOR_PRIMARY) } } .width(46).height(56).backgroundColor(COLOR_CARD_BG).borderRadius(10) .border({ width: 1.5, color: this.password.length i ? COLOR_PRIMARY : #E0E0E0 }) .justifyContent(FlexAlign.Center) }) } // 数字键盘 Column() { ForEach(this.KEY_ROWS, (row: string[]) { Row() { ForEach(row, (key: string) { Column() { if (key del) { SymbolGlyph($r(sys.symbol.delete_left)).fontSize(20) } else if (key.length 0) { Text(key).fontSize(22).fontColor(COLOR_TEXT_MAIN) } } .layoutWeight(1).height(64) .backgroundColor(key.length 0 ? COLOR_CARD_BG : COLOR_BG_PAGE) .onClick(() this.handleKey(key)) }) } }) } }四、状态 3已设置Column({ space: 16 }) { Row({ space: 8 }) { Text(✓).fontSize(16).fontColor(#4CAF50) Text(已开启隐私保护).fontSize(15).fontColor(#4CAF50) } Column() { Row() { Text(修改密码).fontSize(15).fontColor(COLOR_TEXT_MAIN).layoutWeight(1) SymbolGlyph($r(sys.symbol.chevron_right)).fontSize(14) } .onClick(() { this.isSettingMode true this.stepTitle 修改隐私密码 this.password }) Row() { Text(关闭密码).fontSize(15).fontColor(#D06060).layoutWeight(1) } .onClick(() { this.hasPassword false }) } }五、总结本文通过“海风日记“的隐私密码页面深入讲解了三态页面设计的实现三态切换State 条件判断未设置引导用户设置密码输入密码密码圆点 数字键盘已设置修改/关闭密码如果这篇文章对你有帮助欢迎点赞、收藏⭐、关注你的支持是我持续创作的动力相关资源State 装饰器文档Circle 组件文档海风日记项目源码[HarmonyOS 开发者官网](https://atomgit.com/openharmony/docs开源鸿蒙跨平台社区
