【Flutter 鸿蒙三方库适配指南】第三章：ArkTS 相关知识基础

最新推荐文章于 2025-12-05 13:53:12 发布

原创最新推荐文章于 2025-12-05 13:53:12 发布 · 679 阅读

3 ·

CC 4.0 BY-SA版权

文章标签：

#flutter #harmonyos

Flutter 同时被 2 个专栏收录

16 篇文章

订阅专栏

OpenHarmony

4 篇文章

订阅专栏

Flutter 鸿蒙三方库适配指南

第三章：ArkTS 相关知识基础

前言：在上一章中，我们了解了 Flutter 的架构基础。为了编写 Flutter 的鸿蒙插件（Plugin），我们需要通过 Platform Channel 与鸿蒙原生进行通信。因此，掌握鸿蒙原生开发语言 ArkTS 及其 UI 框架 ArkUI 是必不可少的环节。本章将重点介绍 ArkTS 的核心概念、语法特性以及与 Flutter 的异同。

一、 ArkTS 语言概述

1. 什么是 ArkTS？

ArkTS 是鸿蒙生态（HarmonyOS）的主力应用开发语言。

起源：它基于 TypeScript (TS) 扩展而来，继承了 TS 的基本语法。
扩展：在 TS 的基础上，ArkTS 扩展了 声明式 UI 描述、状态管理 等能力。
限制：为了追求更高的性能（AOT 编译优化），ArkTS 对 TS 进行了严格的子集限制（强制使用静态类型），摒弃了 JS/TS 中过于灵活但影响性能的动态特性。

2. 为什么需要学习 ArkTS？

在 Flutter 鸿蒙适配过程中，虽然 UI 和业务逻辑主要由 Flutter (Dart) 承担，但在以下场景必须使用 ArkTS：

插件开发：调用鸿蒙系统原生能力（如相机、蓝牙、传感器）。
生命周期管理：处理应用在鸿蒙系统中的启动、暂停、销毁等事件。
原生视图嵌入：使用 PlatformView 嵌入鸿蒙原生组件（如地图、WebView）。

二、 ArkTS 语言基础

ArkTS 保留了 TS 的核心语法，如果你熟悉 TypeScript 或 JavaScript，上手会非常快。

1. 变量与常量

let：声明变量（可变）。
const：声明常量（不可变）。
强制类型：ArkTS 强调静态类型，变量声明时必须确定类型，且不可随意更改。

let message: string = 'Hello World';
const maxCount: number = 100;
// message = 123; // 报错，类型不匹配

2. 类与接口

与 Dart 类似，ArkTS 面向对象。

class Person {
  name: string;
  age: number;

  constructor(name: string, age: number) {
    this.name = name;
    this.age = age;
  }
}

3. 严格的类型约束（与标准 TS 的区别）

从 HarmonyOS API 10+ 开始，ArkTS 实施了更严格的静态类型检查，以配合 ArkCompiler 进行性能优化：

禁用 any 和 unknown：不能使用不确定的类型。
禁用 var：只能使用 let 或 const。
运行时优化：由于类型确定，编译器可以直接生成高效的字节码，无需像 V8 引擎那样进行复杂的运行时推断。

三、 ArkUI 开发框架基础

ArkUI 是鸿蒙的声明式 UI 开发框架，类似于 Flutter 的 Widget 体系，但语法风格有所不同。

1. 核心装饰器

@Entry：标记当前组件为页面的入口（类似于 Flutter 的 Scaffold 或页面级 Widget）。
@Component：标记一个自定义组件（类似于 Flutter 的 StatelessWidget 或 StatefulWidget）。
@State：标记组件内部的状态变量。当该变量改变时，UI 会自动刷新（类似于 Flutter 的 setState 机制，但更自动化）。

2. UI 描述结构 (build 方法)

ArkUI 使用 build() 方法来描述界面结构，采用 链式调用 来设置属性。

Hello World 代码示例解析：

@Entry
@Component
struct HelloPage {
  // 定义状态变量
  @State myText: string = 'World';

  // UI 构建方法
  build() {
    // 布局容器：列（类似于 Flutter 的 Column）
    Column() {
      // 文本组件
      Text(`Hello ${this.myText}`)
        .fontSize(50) // 属性设置：字号
        .fontColor(Color.Black) // 属性设置：颜色
      
      // 分割线
      Divider()
      
      // 按钮组件
      Button('Click Me')
        .width(100)
        .height(50)
        .margin({ top: 20 }) // 属性设置：外边距
        .onClick(() => {
          // 事件处理：修改状态，触发 UI 刷新
          this.myText = 'ArkUI';
        })
    }
    .width('100%') // 设置容器宽度
    .height('100%') // 设置容器高度
  }
}

四、 Flutter 与 ArkUI 的深度对比

对于 Flutter 开发者，理解两者的异同有助于快速切换思维。

1. UI 描述风格

Flutter (嵌套式)：属性通常作为构造函数的参数传入。

// Flutter
Container(
  width: 100,
  child: Text('Hello'),
)

ArkUI (链式调用)：属性通过 . 操作符链式设置，结构更扁平。
```
// ArkUI
Text('Hello')
  .width(100)
```

2. 状态管理

Flutter：显式调用 setState(() {}) 来通知框架重绘。
ArkUI：使用 @State 装饰变量，直接赋值 this.val = x 即可自动触发关联组件的更新（响应式）。

3. 渲染机制 (核心差异)

Flutter：自绘引擎。Flutter 使用 Skia/Impeller 直接向 GPU 发送指令，绘制每一个像素。它不依赖系统的原生控件，因此在不同系统上表现高度一致。
ArkUI：系统原生渲染。ArkUI 的组件最终映射为鸿蒙系统的原生渲染节点。它与系统结合更紧密，能更好地利用系统级特性（如分布式流转、系统级动效），理论性能上限更高。

4. 开发生态

Flutter：拥有 Pub.dev，全球开发者众多，生态极其成熟。
ArkUI：依托 OHPM (OpenHarmony Package Manager)，生态正在快速起步阶段。

五、总结与建议

语言学习：如果你熟悉 Dart 或 TypeScript，ArkTS 的学习曲线非常平缓。重点注意其 静态类型系统的强制性。
适配重心：
- 在编写三方库适配时，你主要会和 ArkTS 的逻辑层 打交道（调用 API、处理数据）。
- ArkUI 的 UI 层 知识主要用于理解鸿蒙原生的视图结构，或者在开发 PlatformView（原生视图）时使用。
性能观：ArkTS 的设计初衷是为了解决 JS/TS 在移动端性能不足的问题，通过静态分析实现高性能运行，这也是鸿蒙系统流畅度的保障。

下一章预告：
第四章将进入实战环节，教大家如何在 MacOS 环境 下搭建 Flutter 鸿蒙开发环境，正式开始代码编写。