第一章 ArkUI初探：鸿蒙系统简介、ArkUI框架概述、开发环境搭建

大家好，我是你们这门课的老师。在正式开始敲代码之前，我想先跟你聊聊鸿蒙和ArkUI。说实话，我刚接触ArkUI时，心里也犯过嘀咕——这玩意儿跟Android、iOS到底有啥不一样？但真正用起来之后，我发现它确实有自己的一套逻辑。今天这一章，我们就先把这些基础概念理清楚，再把开发环境搭好。

1.1 鸿蒙系统简介

鸿蒙系统，全称HarmonyOS，是华为开发的一款面向全场景的分布式操作系统。你想想看，手机、平板、手表、电视、车机，甚至智能家居设备，都能跑在同一个系统上。这跟Android那种“手机专用、平板专用”的思路完全不同。

我个人觉得，鸿蒙最大的亮点在于“分布式”。什么意思呢？就是多个设备可以互相协作。比如你在手机上编辑文档，走到电脑前，文档自动流转到电脑上继续编辑。这种体验，我在Android生态里几乎没见过。

鸿蒙系统有几个关键特性：

  • 分布式架构：设备之间可以共享硬件能力，比如用手机摄像头给电视做视频通话。
  • 一次开发，多端部署：你写一套代码，可以跑在手机、平板、手表等多种设备上。
  • 统一OS，弹性部署：系统可以根据设备硬件配置，裁剪或增加功能模块。

核心要点：鸿蒙不是Android的替代品，而是一个全新的、面向万物互联的操作系统。如果你之前做过Android开发，你会发现ArkUI的声明式UI跟Jetpack Compose有点像，但底层逻辑完全不同。

1.2 ArkUI框架概述

ArkUI是鸿蒙系统原生的UI开发框架。说白了，它就是用来构建用户界面的工具集。你写界面时，不需要像传统方式那样操作DOM或View树，而是用声明式的方式描述UI。

什么叫声明式？举个例子：

// 传统方式（伪代码）
Button button = new Button("点击我");
button.setOnClickListener(...);
layout.addView(button);

// ArkUI声明式方式
Button("点击我")
    .onClick(() => { ... })

看到区别了吗？声明式写法更直观，你只需要告诉框架“我要一个按钮，它被点击时做什么”，剩下的交给框架处理。我在项目中遇到过不少新手，刚转过来时总想着“我要手动控制UI状态”，其实完全没必要。

ArkUI的核心组件包括：

  • 基础组件：Text、Image、Button、TextField等，跟其他框架类似。
  • 布局组件：Column、Row、Stack、Flex等，用来排列子组件。
  • 容器组件：Scroll、Swiper、List等，提供滚动、滑动等交互能力。
  • 状态管理：@State、@Prop、@Link等装饰器，用来管理组件状态。

我的建议：刚开始学ArkUI时，别急着看所有组件。先把Column、Row、Text、Button这四个玩熟，能搭出90%的界面。剩下的遇到再查文档。

1.3 开发环境搭建（DevEco Studio安装与配置）

好，理论说完了，咱们来点实际的。要开发鸿蒙应用，你需要安装DevEco Studio。这是华为官方提供的IDE，基于IntelliJ IDEA社区版定制。

1.3.1 下载与安装

首先，去华为开发者官网下载DevEco Studio。注意选择对应你操作系统的版本（Windows、macOS、Linux都支持）。下载完成后，直接双击安装包，一路Next就行。

嗯，这里要注意：安装路径不要有中文或空格。我曾经因为路径里带了个“项目”两个字，导致模拟器死活启动不了，折腾了半天才发现是路径问题。

1.3.2 配置SDK与模拟器

安装完成后，第一次启动DevEco Studio，它会提示你配置SDK。建议你选择最新稳定版，别追最新版，容易踩坑。

配置步骤：

  1. 打开DevEco Studio，点击“Configure” -> “SDK Manager”。
  2. 在SDK Manager中，勾选你需要的API版本（比如API 9或API 10）。
  3. 点击“Apply”开始下载。这个过程可能需要几分钟，取决于你的网速。
  4. 下载完成后，配置模拟器。点击“Tools” -> “Device Manager”，创建一个新的模拟器。

避坑指南：我曾经在模拟器配置上浪费过一整天。如果你发现模拟器启动后黑屏或卡死，先检查一下你的电脑是否开启了硬件虚拟化（VT-x/AMD-V）。Windows用户可以在任务管理器的“性能”标签页查看。如果没开启，去BIOS里打开它。

1.3.3 创建第一个项目

环境配好了，我们来创建第一个ArkUI项目：

  1. 点击“Create New Project”。
  2. 选择“Empty Ability”模板，这是最基础的模板。
  3. 填写项目名称（比如“HelloArkUI”）、包名、保存路径。
  4. 选择“Language”为“ArkTS”（这是ArkUI的推荐语言）。
  5. 点击“Finish”，等待项目初始化完成。

项目创建完成后，你会看到这样的目录结构：

HelloArkUI/
├── entry/
│   ├── src/
│   │   ├── main/
│   │   │   ├── ets/
│   │   │   │   ├── pages/
│   │   │   │   │   └── Index.ets
│   │   │   │   └── app.ets
│   │   │   └── resources/
│   │   └── module.json5
│   └── build-profile.json5
└── build-profile.json5

打开 Index.ets 文件，你会看到一段默认代码：

@Entry
@Component
struct Index {
  @State message: string = 'Hello World'

  build() {
    Column() {
      Text(this.message)
        .fontSize(30)
        .fontWeight(FontWeight.Bold)
    }
    .width('100%')
    .height('100%')
  }
}

这段代码做了三件事：

  • 定义了一个名为 Index 的组件。
  • 声明了一个状态变量 message，初始值为 "Hello World"。
  • 在 build() 方法中，用 Column 和 Text 组件构建界面。

点击右上角的“Run”按钮，选择模拟器，你就能看到“Hello World”显示在屏幕上了。嗯，这一刻是不是有点小激动？

总结一下：今天这一章，我们了解了鸿蒙系统的分布式特性，认识了ArkUI的声明式开发方式，并且成功搭建了开发环境、跑通了第一个应用。从下一章开始，我们会深入ArkUI的组件和布局，一步步做出真正可用的界面。

最后，如果你在搭建环境时遇到任何问题，别慌。大部分问题都可以通过重启IDE或重新下载SDK解决。实在不行，去华为开发者论坛搜一下，基本都有答案。

好，今天就到这里。下一章我们讲ArkUI的基础组件，到时候见。

← 上一章 📖 返回目录 下一章 →