一、页面基础装饰器组件页面必备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属性可开启密码隐藏模式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完成页面跳转多类组件相互配合即可完整实现注册、登录等核心业务页面。一、ArkUI 官方三大核心要素任何一个完整的 ArkUI 页面都离不开Entry、Component、build()三大核心部分三者分工明确、缺一不可相当于页面的 “启动入口”“组件标识” 与 “绘制画布”。1. Entry 页面入口装饰器Entry 用于标记当前自定义组件为应用页面入口被该装饰器修饰的组件可以独立运行作用等同于传统编程语言中的main()主函数。2. Component 组件装饰器Component 是自定义 UI 组件的标识只要是 ArkTS 中用于构建界面的结构体都必须被该装饰器修饰。它告诉编译器当前结构体是一个可渲染的 UI 组件。3. build () 组件构建方法build() 是 UI 绘制的核心方法所有布局、组件、样式代码都必须编写在该方法内部。框架会解析build()中的代码最终渲染为手机、平板等设备上的可视化界面。二、ArkUI 主流布局详细讲解布局组件本质是承载文本、按钮、图片等各类 子组件的容器不同布局组件具备专属的元素排布规则能够满足各式各样的页面排版设计需求。1. Column 垂直线性 布局Column 属于纵向排列布局内部所有子组件默认自上而下依次摆放该布局主轴为垂直方向交叉轴为水平方向是鸿蒙开发里使用最频繁的布局类型常用来搭建个人资料页面、登录界面、条目列表、表单填写页面等场景。常用核心属性说明space快速统一设置所有子组件之间的纵向间隔无需逐个给组件设置外边距代码更简洁、页面间距更规整统一justifyContent控制 主轴垂直方向整体对齐方式可选顶部对齐、垂直居中、底部对齐、平均分配间距等分布局模式alignItems交叉轴水平方向内部子组件对齐方式支持居左、水平居中、居右三种排版效果width / height定义布局容器整体尺寸填写 100% 代表容器宽 / 高铺满父容器全屏backgroundColor给布局容器设置背景颜色方便划分页面不同功能区块视觉分层更清晰2. Row 水平线性布局Row 是从左到右排列子组件的水平布局主轴为水平方向交叉轴为垂直方向。常用来制作导航栏 、按钮组、图标 文字组合、顶部菜单栏等横向排列页面。核心常用属性space设置子组件左右间距justifyContent主轴水平对齐居左、居中、居右alignItems交叉轴垂直对齐居上、居中、居底。3. Stack 层叠布局Stack 为层叠布局子组件默认居中叠加渲染后编写的组件会覆盖先编写的组件无固定横竖排列规则。该布局是实现视觉 叠加效果的核心应用场景十分广泛。典型使用场景海报 Banner、图片叠加文字、头像角标、悬浮按钮、页面水印、弹窗提示等。4. Flex 弹性布局Flex 弹性布局是线性布局的升级版最大优势是自适应屏幕宽度子组件超出容器宽度时自动换行完美适配手机、平板等不同尺寸鸿蒙设备是标签栏、功能分类、流式布局的首选。核心常用属性wrap: FlexWrap.Wrap开启自动换行功能核心属性space统一设置所有子组件间距justifyContent控制整体对齐方式。5.RelativeContainer相对布局RelativeContainer 相对布局不以固定横竖轴排列而是让子组件参照彼此、参照父容器来定位。 简单理解一个组件可以设置「在 A 组件左边 / 右边 / 上边 / 下边」「和父容器左对齐 / 右对齐 / 居中」不受 Column、Row 线性排列限制。核心常用属性left / right / top / bottom左右上下对齐center中心对齐关键字container 代表父容器。三、ArkUI 组件详解1.Swiper轮播图Swiper 轮播组件用来实现多张图片 / 页面自动循环切换支持手动左右滑动、自动播放、指示器小圆点。 它是绝大多数 APP 首页的标配组件。核心常用属性loop:是否循环播放true 无限循环autoPlay:是否自动播放interval:自动播放间隔时间单位毫秒indicator:是否显示底部小圆点指示器index:默认展示第几张页面2.Tabs 标签页导航Tabs 是标签页切换组件由 Tabs外层容器 TabContent标签内容两部分组成。 点击顶部 / 底部标签可快速切换不同内容页面是 APP 主流导航方案。核心常用属性Tabs外层容器控制标签位置、样式、切换逻辑barPosition标签栏位置BarPosition.Top 顶部 / BarPosition.Bottom 底部TabContent每一个标签对应的独立内容区域一一对应标签。3.Button 按钮按钮是 App 中使用频率最高的交互组件主要用来接收用户点击操作触发页面跳转、提交表单、执行功能逻辑。无论是登录页、功能主页、导航栏几乎所有界面都会用到 Button。核心常用属性.backgroundColor()设置按钮背景色统一使用 0xFF6位色值 标准格式.fontSize() / .fontColor()设置按钮文字大小、颜色.borderRadius()设置圆角常规按钮推荐 8~12.enabled(布尔值)false 按钮置灰、禁止点击。4.Radio 单选框核心常用属性group 分组互斥规则 Radio依靠group属性区分组别同 group 内单选框自动互斥不同 group 选中状态独立。checked 默认选中 checked(true/false)设置页面初始默认选中项。布局灵活搭配 Column 垂直排列单选问卷答题、Row 水平排列单选性别 / 标签选择。Radio 尺寸自定义 width/height 调整圆形单选框大小统一页面视觉规格。5.TextInput 输入框核心常用属性group 分组互斥规则 Radio依靠group属性区分组别同 group 内单选框自动互斥不同 group 选中状态独立。checked 默认选中 checked(true/false)设置页面初始默认选中项。布局灵活搭配 Column 垂直排列单选问卷答题、Row 水平排列单选性别 / 标签选择。Radio 尺寸自定义 width/height 调整圆形单选框大小统一页面视觉规格。6.Video 视频播放组件核心知识点支持两类视频源本地 rawfile 短视频、网络在线视频链接自定义封面预览图视频加载完成前展示静态图片配套 VideoController 控制器控制播放、暂停、进度跳转可配置静音、循环播放、自动播放、底部播放控件显示开关自定义视频高度占屏幕 50%自适应页面布局。7.Image 图片加载与美化核心知识点本地图片资源加载 $r(app.media.图片文件名)图片存放路径entry/src/main/resources/media/文件名区分大小写不能带中文空格。图片适配规则 objectFitImageFit.Cover等比例铺满组件区域超出部分裁切简历头像、横幅封面通用ImageFit.Contain完整显示图片留白不裁切圆角裁切 borderRadius(数值)宽高相等时设置一半数值可实现圆形头像普通横幅设置 10~15 柔和圆角。尺寸自适应 支持固定像素 width(320)、百分比 width(90%)适配不同屏幕宽度。多层嵌套排版搭配 Column 垂直图文、Row 水平左右分栏、Stack 图片文字层叠。8.Toggle 开关复选框交互核心知识点Toggle 双类型ToggleType.Switch滑动开关、ToggleType.Checkbox方框复选框通过 type 区分样式。isOn 布尔状态isOn 控制默认选中状态搭配State可监听切换数据驱动 UI 更新。样式自定义selectedColor()修改选中后填充颜色支持 width/height 调整控件大小。id 标识.id()给组件绑定唯一标识方便页面元素区分、获取控件实例。布局排列外层 Column 垂直布局两个 Toggle 上下依次居中展示。
常用组件知识点整理
一、页面基础装饰器组件页面必备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属性可开启密码隐藏模式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完成页面跳转多类组件相互配合即可完整实现注册、登录等核心业务页面。一、ArkUI 官方三大核心要素任何一个完整的 ArkUI 页面都离不开Entry、Component、build()三大核心部分三者分工明确、缺一不可相当于页面的 “启动入口”“组件标识” 与 “绘制画布”。1. Entry 页面入口装饰器Entry 用于标记当前自定义组件为应用页面入口被该装饰器修饰的组件可以独立运行作用等同于传统编程语言中的main()主函数。2. Component 组件装饰器Component 是自定义 UI 组件的标识只要是 ArkTS 中用于构建界面的结构体都必须被该装饰器修饰。它告诉编译器当前结构体是一个可渲染的 UI 组件。3. build () 组件构建方法build() 是 UI 绘制的核心方法所有布局、组件、样式代码都必须编写在该方法内部。框架会解析build()中的代码最终渲染为手机、平板等设备上的可视化界面。二、ArkUI 主流布局详细讲解布局组件本质是承载文本、按钮、图片等各类 子组件的容器不同布局组件具备专属的元素排布规则能够满足各式各样的页面排版设计需求。1. Column 垂直线性 布局Column 属于纵向排列布局内部所有子组件默认自上而下依次摆放该布局主轴为垂直方向交叉轴为水平方向是鸿蒙开发里使用最频繁的布局类型常用来搭建个人资料页面、登录界面、条目列表、表单填写页面等场景。常用核心属性说明space快速统一设置所有子组件之间的纵向间隔无需逐个给组件设置外边距代码更简洁、页面间距更规整统一justifyContent控制 主轴垂直方向整体对齐方式可选顶部对齐、垂直居中、底部对齐、平均分配间距等分布局模式alignItems交叉轴水平方向内部子组件对齐方式支持居左、水平居中、居右三种排版效果width / height定义布局容器整体尺寸填写 100% 代表容器宽 / 高铺满父容器全屏backgroundColor给布局容器设置背景颜色方便划分页面不同功能区块视觉分层更清晰2. Row 水平线性布局Row 是从左到右排列子组件的水平布局主轴为水平方向交叉轴为垂直方向。常用来制作导航栏 、按钮组、图标 文字组合、顶部菜单栏等横向排列页面。核心常用属性space设置子组件左右间距justifyContent主轴水平对齐居左、居中、居右alignItems交叉轴垂直对齐居上、居中、居底。3. Stack 层叠布局Stack 为层叠布局子组件默认居中叠加渲染后编写的组件会覆盖先编写的组件无固定横竖排列规则。该布局是实现视觉 叠加效果的核心应用场景十分广泛。典型使用场景海报 Banner、图片叠加文字、头像角标、悬浮按钮、页面水印、弹窗提示等。4. Flex 弹性布局Flex 弹性布局是线性布局的升级版最大优势是自适应屏幕宽度子组件超出容器宽度时自动换行完美适配手机、平板等不同尺寸鸿蒙设备是标签栏、功能分类、流式布局的首选。核心常用属性wrap: FlexWrap.Wrap开启自动换行功能核心属性space统一设置所有子组件间距justifyContent控制整体对齐方式。5.RelativeContainer相对布局RelativeContainer 相对布局不以固定横竖轴排列而是让子组件参照彼此、参照父容器来定位。 简单理解一个组件可以设置「在 A 组件左边 / 右边 / 上边 / 下边」「和父容器左对齐 / 右对齐 / 居中」不受 Column、Row 线性排列限制。核心常用属性left / right / top / bottom左右上下对齐center中心对齐关键字container 代表父容器。三、ArkUI 组件详解1.Swiper轮播图Swiper 轮播组件用来实现多张图片 / 页面自动循环切换支持手动左右滑动、自动播放、指示器小圆点。 它是绝大多数 APP 首页的标配组件。核心常用属性loop:是否循环播放true 无限循环autoPlay:是否自动播放interval:自动播放间隔时间单位毫秒indicator:是否显示底部小圆点指示器index:默认展示第几张页面2.Tabs 标签页导航Tabs 是标签页切换组件由 Tabs外层容器 TabContent标签内容两部分组成。 点击顶部 / 底部标签可快速切换不同内容页面是 APP 主流导航方案。核心常用属性Tabs外层容器控制标签位置、样式、切换逻辑barPosition标签栏位置BarPosition.Top 顶部 / BarPosition.Bottom 底部TabContent每一个标签对应的独立内容区域一一对应标签。3.Button 按钮按钮是 App 中使用频率最高的交互组件主要用来接收用户点击操作触发页面跳转、提交表单、执行功能逻辑。无论是登录页、功能主页、导航栏几乎所有界面都会用到 Button。核心常用属性.backgroundColor()设置按钮背景色统一使用 0xFF6位色值 标准格式.fontSize() / .fontColor()设置按钮文字大小、颜色.borderRadius()设置圆角常规按钮推荐 8~12.enabled(布尔值)false 按钮置灰、禁止点击。4.Radio 单选框核心常用属性group 分组互斥规则 Radio依靠group属性区分组别同 group 内单选框自动互斥不同 group 选中状态独立。checked 默认选中 checked(true/false)设置页面初始默认选中项。布局灵活搭配 Column 垂直排列单选问卷答题、Row 水平排列单选性别 / 标签选择。Radio 尺寸自定义 width/height 调整圆形单选框大小统一页面视觉规格。5.TextInput 输入框核心常用属性group 分组互斥规则 Radio依靠group属性区分组别同 group 内单选框自动互斥不同 group 选中状态独立。checked 默认选中 checked(true/false)设置页面初始默认选中项。布局灵活搭配 Column 垂直排列单选问卷答题、Row 水平排列单选性别 / 标签选择。Radio 尺寸自定义 width/height 调整圆形单选框大小统一页面视觉规格。6.Video 视频播放组件核心知识点支持两类视频源本地 rawfile 短视频、网络在线视频链接自定义封面预览图视频加载完成前展示静态图片配套 VideoController 控制器控制播放、暂停、进度跳转可配置静音、循环播放、自动播放、底部播放控件显示开关自定义视频高度占屏幕 50%自适应页面布局。7.Image 图片加载与美化核心知识点本地图片资源加载 $r(app.media.图片文件名)图片存放路径entry/src/main/resources/media/文件名区分大小写不能带中文空格。图片适配规则 objectFitImageFit.Cover等比例铺满组件区域超出部分裁切简历头像、横幅封面通用ImageFit.Contain完整显示图片留白不裁切圆角裁切 borderRadius(数值)宽高相等时设置一半数值可实现圆形头像普通横幅设置 10~15 柔和圆角。尺寸自适应 支持固定像素 width(320)、百分比 width(90%)适配不同屏幕宽度。多层嵌套排版搭配 Column 垂直图文、Row 水平左右分栏、Stack 图片文字层叠。8.Toggle 开关复选框交互核心知识点Toggle 双类型ToggleType.Switch滑动开关、ToggleType.Checkbox方框复选框通过 type 区分样式。isOn 布尔状态isOn 控制默认选中状态搭配State可监听切换数据驱动 UI 更新。样式自定义selectedColor()修改选中后填充颜色支持 width/height 调整控件大小。id 标识.id()给组件绑定唯一标识方便页面元素区分、获取控件实例。布局排列外层 Column 垂直布局两个 Toggle 上下依次居中展示。
