ArkUI

该文解析了基于HarmonyOS ArkUI 3.0与TypeScript开发的用户登录页面。页面采用声明式UI与分层组件架构，通过@Entry、@Component、@State等装饰器实现状态驱动的界面更新。核心功能包括手机号非空及格式校验（正则表达式）、实时错误反馈、防重复提交的登录流程，并展示输入框封装、按钮加载态切换、条件渲染成功视图等关键实现。文章还详解了以#1FA485为主色的视觉规范、响应式布局策略及性能优化思路，如最小化状态管理、减少嵌套层级。整体架构清晰，是学习ArkUI声明式开发、表单验证与移动端界面设计的实用范例。

本文解析基于 HarmonyOS ArkUI 开发的注册页面 textinput1.ets，展示声明式 UI 与响应式状态管理的最佳实践。页面采用分层组件结构，使用 @State 管理账号、密码、邮箱及提交状态，通过条件渲染切换注册表单与成功视图。关键技术包括：TextInput 的 onChange 双向绑定、按钮加载状态与防重复提交、setTimeout 模拟网络请求、$r() 资源引用，以及统一绿色主题与百分比布局的响应式设计。文章还涵盖性能优化要点，如最小化状态变量、减少嵌套和条件渲染。该范例架构清晰，适合开发者学习用 ArkUI 快速构建高质量移动端表单界面。

自定义文本样式 ps：必须配合 maxLines 使用，用来控制文本超出容器范围时的显示方式 写法 .textOverflow({overflow:TextOverflow.None}) TextOverflow.None

创建文本 Text('你好') Resources文本 Text($r('app.string.fankunle')) //引用的是项目目录下的 \entry\src\main\resources\base\element\string.json 中的name为fankunle的

objectFit ImageFit ImageFit.contain 效果：保持图片的宽高比，让图片完整显示在容器内，不会裁剪。 特点：图片会按比例缩小 / 放大，直到刚好有一边触碰到容器边界，另一边留白。 场景：需要完整显示图片、不裁剪内

图片 关键词：image 1、加载图片资源 image支持加载 存档图 多媒体像素图 两种类型 其中存档图类型数据源可以分为本地资源、网络资源、resource资源、媒体库源和base64 本地资源：

Scroll 垂直延申 作用：在一屏放不下时会出现滚动条 注意：默认滚屏方向时竖向 Scroll 水平延申 如果需要

Column-垂直 row-左右

// 标记当前组件为【页面入口】 // 作用：应用启动后，第一个显示的页面就是这个组件 @Entry // 标记当前结构为【自定义UI组件】，是ArkTS的页面基础结构 @Component struct Wx { // build() 方法：页面所有布局、样式、内容都必须写在这里 bui

什么是组件 组件是独立的代码块，具有特定功能和样式，并且可以在页面中独立使用和重复使用。ArkUI为开发者提供了可以直接在程序中使用的组件，通过组件可以快速构建UI，提高