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

Flutter 鸿蒙三方库适配指南

第二章：Flutter 相关知识基础

前言：在第一章中，我们要了解了 Flutter 适配鸿蒙的背景与趋势。本章我们将深入技术细节，回顾与适配工作紧密相关的 Flutter 基础知识，并对比 Flutter 与鸿蒙原生开发框架 ArkUI 的异同，为后续的三方库迁移打下坚实基础。

---

一、 Flutter 三层架构体系

理解 Flutter 的架构是进行鸿蒙适配的关键，因为适配工作的本质主要发生在架构的底层。

1. Framework 层（Dart 层）

• 定位：面向开发者的最上层，使用 Dart 语言实现。
• 内容：
  • 提供了丰富的 UI 组件库，包括 Material Design（安卓风格）和 Cupertino（iOS 风格）。
  • 包含手势、动画、绘图等核心逻辑。
  • 适配意义：开发者编写的业务代码主要位于此层。在鸿蒙适配中，这一层通常不需要大量修改，因为它是平台无关的。

2. Engine 层（C/C++ 层）

• 定位：Flutter 的核心引擎，主要由 C++ 编写。
• 内容：
  • 渲染引擎：Skia 或 Impeller。负责底层的图形渲染、GPU 加速。
  • Dart 虚拟机 (Dart VM)：负责代码的解释与执行。
  • 文本排版：处理文字的布局与显示。
• 适配意义：这一层负责将 Framework 层生成的指令转化为具体的像素绘制指令。

3. Embedder 层（平台适配层）

• 定位：负责 Flutter 引擎与具体操作系统的交互。
• 内容：
  • 提供渲染 Surface 设置。
  • 处理线程管理。
  • 插件通信：处理 Platform Channels。
• 适配原理：Flutter 之所以能运行在鸿蒙系统上，核心就在于鸿蒙社区（如 OpenHarmony SIG）重写了这一层。 通过 C++ 代码实现了 Flutter Engine 与 HarmonyOS 底层系统（如输入事件、窗口系统、Vsync 信号）的对接。

---

二、 Dart 语言基础回顾

Flutter 采用 Dart 作为开发语言，而在 ArkUI 中主要使用 ArkTS。了解 Dart 基础有助于理解两种语言的转换逻辑。

1. 语言特性

• 静态类型：Dart 是一门强类型的静态语言，但也支持类型推断。
• 类似 JS 与 Java：如果你有 Java 或 JavaScript 的经验，上手 Dart 会非常快。

2. 基础语法示例

// 变量声明
const String hello = 'Hello'; // 编译时常量
final int age = 18; // 运行时常量

// 类定义
class Person {
  // 属性
  String name;
  int age;

  // 构造函数
  Person(this.name, this.age);

  // 方法
  String getName() {
    return name;
  }
}

// 使用
void main() {
  var p = Person('Alice', 20);
  print(p.getName());
}

---

三、 Flutter 与 ArkUI 的核心对比

在进行迁移适配时，我们需要了解 Flutter 与鸿蒙原生 UI 框架（ArkUI）的区别，以便做出正确的技术选型。

维度	Flutter	ArkUI
开发语言	Dart	ArkTS (基于 TypeScript 扩展)
UI 构建方式	声明式 UI (Widget 嵌套)	声明式 UI (链式调用)
渲染机制	自绘引擎 (Skia/Impeller)。自带渲染管线，一致性高。	系统原生渲染。使用鸿蒙系统底层的渲染服务，性能上限更高，与系统结合更紧密。
通信机制	Platform Channel (异步消息传递) / FFI	NAPI (模块化开发，直接调用系统 C/C++ 接口)
热重载	成熟稳定，体验极佳 (Stateful Hot Reload)	支持热重载与实时预览，正在快速完善中。
生态现状	成熟 (pub.dev 拥有海量插件)	处于快速发展期 (OHPM)，核心能力已覆盖。
适用场景	需要高度多端一致性 (iOS/Android/Web/Harmony)	追求极致性能、深度系统整合、分布式流转特性。

---

四、 语法实战对比：Hello World

通过一个简单的计数器或 Hello World 页面，我们可以直观地看到两种框架在代码风格上的差异。

1. Flutter 写法 (嵌套式)

Flutter 倾向于使用 Widget 嵌套 来描述布局结构。

import 'package:flutter/material.dart';

// 主入口
void main() => runApp(MyApp());

class MyApp extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    return MaterialApp(
      title: 'Flutter Demo',
      home: Scaffold(
        appBar: AppBar(title: Text('Hello')),
        body: Center(
          child: Column( // 布局嵌套
            children: <Widget>[
              Text('Hello World', style: TextStyle(fontSize: 50)),
              SizedBox(height: 20), // 使用 SizedBox 做间距
              ElevatedButton(
                child: Text('Click me'),
                onPressed: () {
                  // 事件处理
                  print('Clicked'); 
                },
              ),
            ],
          ),
        ),
      ),
    );
  }
}

2. ArkUI 写法 (链式调用)

ArkUI 倾向于使用 链式属性配置，结构看起来更加扁平。

// 装饰器标记入口与组件
@Entry
@Component
struct Hello {
  // 状态管理
  @State myText: string = 'World';

  build() {
    Column() { // 容器组件
      Text(`Hello ${this.myText}`)
        .fontSize(50) // 链式调用设置属性
      
      Divider() // 分割线

      Button('Click me')
        .width(100)
        .height(50)
        .margin({ top: 20 }) // 使用 margin 设置间距
        .onClick(() => {
          // 状态改变自动驱动 UI 刷新
          this.myText = 'ArkUI'; 
        })
    }
    .width('100%') // 设置容器属性
    .height('100%')
  }
}

3. 关键差异总结

• 结构：Flutter 是 Parent(child: Child()) 的深度嵌套；ArkUI 是 Component().attribute() 的链式结构。
• 状态管理：Flutter 使用 setState(() {}) 手动触发重建；ArkUI 使用 @State 装饰器，数据变化自动驱动视图更新。
• 间距：Flutter 常用 SizedBox 或 Padding 组件占位；ArkUI 常用 .margin() 或 .padding() 属性配置。

---

五、 本章总结

本章我们重点学习了：

1. Flutter 的三层架构：理解 Embedder 层是鸿蒙适配的核心。
2. Dart 语言基础：Flutter 开发的基石。
3. 技术选型对比：Flutter 胜在跨平台一致性，ArkUI 胜在原生性能与分布式能力。
4. 代码风格差异：从嵌套式写法（Flutter）到链式写法（ArkUI）的思维转换。

下一章预告：
我们将深入 ArkTS 相关知识基础，详细讲解鸿蒙原生的开发语言特性，为编写 Platform Channel 的原生端代码做好准备。