一、页面基础装饰器组件页面必备Component 装饰器作用标记结构体为 ArkUI 自定义页面 / 组件只有添加该标识结构体内部才能使用 build () 构建 UI 界面。 示例Component struct LoginPage{}Entry 装饰器作用搭配 Component 使用标记当前页面为独立可访问入口能被路由跳转、预览器直接渲染所有跳转页面都必须添加。 示例Entry Component struct Register{}State 状态装饰器作用实现数据与 UI 双向绑定修饰变量后变量修改会同步刷新页面输入框、开关等交互组件都依赖它存储数据。 示例State username:string二、基础布局容器组件7 大类Column 垂直布局容器将内部所有组件从上至下竖向排列支持设置组件间距、水平垂直对齐方式适合表单、注册登录页面。 示例页面外层整体用 Column 包裹用户名、密码输入框、按钮。Row 水平布局容器内部组件从左到右横向单行排列可设置水平间距、上下对齐适合一行内文字 输入框的组合。 示例用户名文字和 TextInput 输入框放在同一个 Row 中横向展示。Stack 层叠容器组件按照书写顺序分层叠加后写组件覆盖在前层之上实现图片浮文字、遮罩效果。 示例底层放图片上层叠加半透明文字。Flex 弹性布局容器支持自动换行容器宽度不足时组件自动换行适配数量不固定的标签、小图标。Grid 网格容器划分固定行列等分宫格子组件必须包裹 GridItem用于规整九宫格菜单、相册。List 滚动列表容器自带垂直滚动能力子组件包裹 ListItem适合大量重复数据性能优于普通 Column。 示例新闻列表、商品列表。RelativeContainer 相对布局容器通过 id 绑定定位规则组件可参照父容器或其他组件自由摆放自由度最高。三、文本与媒体展示组件Text 文本组件用于展示文字内容支持字号、字体颜色、加粗、居中、外边距等样式绑定 onClick 可实现点击跳转。 示例Text(已有账号立即登录)Image 图片组件加载本地资源文件夹 media 下的图片使用 $r (app.media. 图片名 ) 引入可设置宽高、圆角做成圆形头像。 示例页面顶部圆形头像图片。四、表单输入交互组件TextInput 文本输入框接收用户输入内容通过 text 绑定 State 变量实现双向同步placeholder 设置输入提示type 设置 Password 模式隐藏密码onChange 实时监听输入变化。 示例用户名输入框、密码输入框。Toggle 开关组件提供切换按钮样式绑定布尔类型 State 变量用于实现记住密码、开关设置类功能。 示例登录页面 “记住密码” 切换开关。五、按钮与弹窗组件Button 按钮组件可自定义宽高、圆角、内边距绑定 onClick 点击事件执行表单校验、页面跳转、清空输入等逻辑。 示例注册按钮、清空按钮、返回按钮。AlertDialog 弹窗提示组件调用静态 show 方法弹出提示框配置标题 title、提示信息 message用于反馈注册 / 登录成功、失败结果。 示例注册密码不一致时弹出失败弹窗。六、循环渲染组件ForEach 循环组件接收数组与回调函数批量生成重复 UI简化列表、网格多元素重复编写代码。 示例Grid 网格内批量生成多个功能格子。七、组件通用样式与交互方法通用样式width、height 设置尺寸padding 内边距、margin 外边距borderRadius 圆角backgroundColor 背景色通用交互.onClick () 监听点击事件所有可点击组件都支持该方法路由组件router 路由模块不属于 UI 组件负责页面跳转pushUrl 携带 url 页面路径、params 跨页面传参。整体总结ArkTS 组件分为页面装饰器、布局容器、展示组件、表单交互组件、弹窗、循环渲染六大类。开发时通过布局容器嵌套各类基础组件搭建页面搭配 State 实现数据响应onClick 完成交互AlertDialog 实现消息反馈router 实现页面跳转多种组件组合即可完成注册、登录完整业务页面。
