ArkUI入门教程

更新时间:2025-03-05 10:03 来源:乐柠教育 浏览量:


ArkUI 是鸿蒙生态(HarmonyOS)应用开发的 UI 开发框架,基于声明式编程范式,提供了丰富的组件和布局能力,让开发者能够高效构建跨设备的应用界面。以下是 ArkUI 的入门指南:

一、ArkUI 核心特点

  1. 声明式 UI:通过描述 “UI 是什么” 而非 “如何实现” 来构建界面,语法简洁直观。
  2. 跨设备适配:一套代码可适配手机、平板、智能手表等多种鸿蒙设备。
  3. 组件化开发:提供丰富的基础组件和容器组件,支持自定义组件复用。
  4. 数据驱动 UI:状态数据变化时,UI 会自动更新,无需手动操作 DOM。

二、第一个 ArkUI 页面(基础结构)

使用 ArkTS 语言编写的 ArkUI 页面基本结构如下:

代码解析
  • @Entry:标记当前组件为应用的入口页面。
  • @Component:声明一个自定义组件,可复用在其他页面。
  • build():组件的 UI 渲染逻辑,所有 UI 元素都在其中定义。
  • 布局容器(如 Column):控制子组件的排列方式(垂直、水平等)。
  • 基础组件(如 TextButton):构成界面的基本元素,通过属性(fontSizewidth)设置样式。
  • @State:声明组件内部的状态变量,修改后会自动更新关联的 UI。

三、常用组件与布局

1. 基础组件(UI 元素)

组件 作用 常用属性
Text 显示文本 fontSizefontColorfontWeight
Button 交互按钮 type(按钮类型)、onClick(点击事件)
Image 显示图片 widthheightsrc(图片路径)
TextField 输入框 hint(提示文本)、onChange(内容变化事件)
Checkbox 复选框 checked(是否选中)、onChange

2. 容器组件(布局控制)

组件 作用 常用属性
Column 垂直排列子组件 justifyContent(垂直对齐方式)、alignItems(水平对齐方式)
Row 水平排列子组件 同上(方向改为水平)
List 列表展示 space(项间距)、onScroll(滚动事件)
Tabs 标签页切换 index(当前选中标签)、onChange

四、状态管理(核心机制)

ArkUI 采用数据驱动 UI,常用状态装饰器:
  • @State:组件内部状态,修改时仅刷新当前组件。
  • @Prop:父子组件单向传值(父→子)。
  • @Link:父子组件双向绑定(父↔子)。
     

五、开发环境搭建

  1. 下载安装 DevEco Studio(鸿蒙官方 IDE):华为开发者联盟
  2. 安装鸿蒙 SDK:打开 DevEco Studio,在设置中自动下载对应版本的 SDK。
  3. 创建项目:选择 “Application”→“Empty Ability”,语言选择 “ArkTS”,即可生成基础项目结构。
  4. 运行:连接鸿蒙设备或启动模拟器,点击运行按钮(▶️)预览效果。

六、入门实践建议

  1. 从简单组件开始:先熟悉 TextButtonColumn 等基础组件的用法。
  2. 练习状态管理:通过计数器、开关按钮等小案例理解 @State@Link 的作用。
  3. 尝试布局组合:用 Column+Row 实现简单页面布局,再学习 ListTabs 等复杂容器。
  4. 查阅官方文档ArkUI 开发指南 提供了详细的组件说明和示例。
ArkUI 的核心是 “声明式” 和 “数据驱动”,掌握这两个思想后,就能快速上手鸿蒙应用的界面开发。
 
其它相关资讯