按钮 enabled 状态控制：条件启用与禁用样式
前言“海风日记“中多处使用enabled属性控制按钮的启用/禁用状态包括验证码按钮、登录按钮、提交反馈按钮等。本文将从源码出发深入讲解 enabled 状态控制和相应的禁用样式。一、按钮禁用示例1.1 验证码按钮Button(获取验证码) .enabled(!this.codeSent this.phone.length 11)1.2 昵称按钮Button(开始写日记 ) .enabled(this.nickname.trim().length 0)1.3 提交反馈按钮Button(提交反馈) .enabled(this.feedbackText.trim().length 10)二、禁用样式对比2.1 昵称按钮// 启用 .backgroundColor(COLOR_PRIMARY) // 禁用 .backgroundColor(#E0D5C0) // 暖灰色2.2 提交反馈按钮// 启用 .backgroundColor(COLOR_PRIMARY) // 禁用 .backgroundColor(COLOR_BUTTON_DISABLED_BG) // 淡灰 .fontColor(COLOR_BUTTON_DISABLED_TEXT) // 淡灰文字三、enabled 条件汇总按钮启用条件禁用样式获取验证码!codeSent phone.length 11灰色背景立即登录始终可用-开始写日记nickname.trim().length 0暖灰背景提交反馈feedbackText.trim().length 10禁用背景色四、常见问题4.1 按钮禁用后仍然可点击问题设置了enabled(false)但按钮仍然可以点击。原因enabled属性可能被其他手势事件覆盖。解决方案在onClick中增加条件判断。总结本文通过“海风日记“的按钮禁用控制深入讲解了 enabled 属性条件启用表单验证条件禁用样式颜色变化多场景应用验证码、昵称、反馈下一篇文章将深入讲解昵称登录页敬请期待。如果这篇文章对你有帮助欢迎点赞、收藏⭐、关注你的支持是我持续创作的动力相关资源Button 组件文档enabled 属性文档海风日记项目源码[HarmonyOS 开发者官网](https://atomgit.com/openharmony/docs开源鸿蒙跨平台社区
