步进器组件技术解析文档

一、项目背景概述

本项目是一个基于 Flutter 框架开发的可复用步进器（Stepper）组件示例应用。步进器是一种常见的 UI 交互控件，允许用户通过点击加减按钮来调整数值，广泛应用于数量选择、参数调节、设置项调整等场景。该项目针对 OpenHarmony 平台进行了适配，采用 Material 3 设计语言，提供了高度可定制化的步进器组件，支持自定义初始值、最小值、最大值、按钮尺寸、按钮颜色、文本样式等多种属性。

项目的核心价值在于封装了一个独立的、可复用的步进器组件，开发者只需引入该组件并配置相关参数，即可快速在应用中集成数值调整功能。组件内部管理自身的状态，对外暴露值变化的回调接口，遵循了 Flutter 的组件化设计思想，实现了关注点分离和代码复用。

二、架构分析

整体架构图

架构说明

项目采用了经典的 Flutter 分层架构设计，主要分为三个层次：

1. 应用入口层：负责应用的初始化和全局主题配置，是整个应用的根组件。
2. 页面展示层：主页组件负责页面布局和组织，将多个步进器组件组合展示在同一页面上，形成对比效果。
3. 组件核心层：步进器组件是项目的核心，内部维护自身状态，通过回调函数与外部通信，实现了组件的封装性和独立性。

这种架构的优势在于：组件的高度可复用性、清晰的职责划分、灵活的配置能力，以及良好的可维护性。

三、入口组件流程

应用的启动流程从主函数开始，首先执行全局入口函数，该函数调用 Flutter 的运行应用方法，将根组件挂载到屏幕上。

根组件是一个无状态组件，它的构建方法返回一个 Material 应用组件，配置了应用的标题、主题数据和首页。主题采用 Material 3 设计规范，使用深紫色作为种子色自动生成配色方案，并关闭了调试模式下的右上角横幅。

首页是一个有状态组件，其状态类的构建方法返回一个脚手架组件，包含顶部应用栏和主体内容。主体内容采用居中列布局，从上到下依次展示：标题文本、间距、第一个步进器组件、间距、第二个步进器的标题、第二个步进器组件。

第一个步进器配置了初始值为 5、最小值为 0、最大值为 20、按钮尺寸为 50、按钮颜色为深紫色。第二个步进器配置了初始值为 10、最小值为 0、最大值为 100、按钮尺寸为 40、按钮颜色为绿色，并自定义了文本样式。

这种多实例展示的方式，直观地演示了步进器组件的灵活配置能力，不同参数组合可以产生完全不同的视觉效果和功能表现。

四、核心组件逐段解析

4.1 组件定义与属性

步进器组件继承自有状态组件基类，定义了丰富的可配置属性。初始值属性为整数类型，默认值为 0，控制步进器的起始数值。最小值属性为整数类型，默认值为 0，定义数值的下限边界。最大值属性为整数类型，默认值为 100，定义数值的上限边界。值变化回调为可选的整型值回调函数，当数值发生变化时触发。按钮尺寸为浮点型，默认值为 40.0，控制加减按钮的大小。文本样式为可选的文本样式对象，自定义中间数值的显示样式。按钮颜色为颜色类型，默认值为蓝色，定义按钮的背景颜色。图标颜色为颜色类型，默认值为白色，定义按钮中图标的颜色。

所有属性都通过构造函数传入，支持可选命名参数方式调用，符合 Flutter 的最佳实践。这种设计使得组件在使用时非常灵活，开发者可以根据需要只设置关心的属性，其他属性使用默认值即可。

4.2 状态类与初始化

状态类中维护一个私有整型变量来存储当前数值，使用 late 关键字修饰，表示该变量会在初始化阶段被赋值，后续不会为 null。在初始化状态生命周期方法中，将初始值从组件属性赋值给状态变量。

这一步是必要的，因为组件的属性在运行时可能会被父组件更新，但状态变量需要独立维护以保证组件内部状态的一致性。如果直接使用 widget.initialValue 来显示数值，那么当用户点击按钮修改数值后，下次构建时又会恢复为初始值，这显然不符合预期。

4.3 递减逻辑

递减方法的实现包含边界检查和状态更新两个步骤。首先判断当前值是否大于最小值，如果满足条件，则调用设置状态方法，将数值减一，并调用值变化回调函数通知外部。如果当前值已经等于最小值，则不执行任何操作，按钮也会变为禁用状态。

特别注意的是，数值更新和回调触发都放在 setState 的回调函数中执行，这确保了状态更新和回调通知的原子性。当 setState 被调用时，Flutter 框架会标记该组件需要重建，并在下一帧中重新执行构建方法，更新界面显示。

回调函数使用了可选调用语法，这意味着即使用户没有传入回调函数，代码也不会崩溃，体现了良好的容错设计。

4.4 递增逻辑

递增方法与递减方法对称，判断当前值是否小于最大值，如果满足条件，则将数值加一并触发回调。同样的边界检查机制保证了数值的合法性。

这种对称的设计不仅代码结构清晰，也便于维护和扩展。如果后续需要添加步长（每次增加/减少的数量）的功能，只需要同时修改两个方法即可。

4.5 构建方法

构建方法返回一个水平行布局组件，主轴居中对齐。行内包含三个子元素：左侧的减号按钮、中间的数值文本、右侧的加号按钮。按钮与文本之间使用固定宽度的间距盒子进行分隔，保证了布局的整齐美观。

数值文本使用了条件表达式，如果外部传入了自定义文本样式则使用外部样式，否则使用默认的 24 号粗体字样式。这种设计兼顾了灵活性和默认美观性，用户可以根据应用的整体风格来自定义数字的显示效果。

4.6 按钮构建方法

按钮构建方法是一个私有辅助方法，接收图标数据、点击回调和是否启用三个参数。它返回一个容器组件，容器的宽高都等于按钮尺寸，使用圆形边框装饰（圆角半径为按钮尺寸的一半），背景色根据启用状态决定：启用时使用按钮颜色，禁用时显示灰色。

容器内部放置一个图标按钮，图标颜色由属性控制，图标大小为按钮尺寸的 0.6 倍，保证了视觉上的协调比例。当按钮处于禁用状态时，点击回调设置为空，按钮自动呈现禁用的视觉效果。

这种通过 Container 包裹 IconButton 的方式，实现了完全自定义外观的圆形按钮，比直接使用 Flutter 内置的按钮组件更加灵活，可以精确控制按钮的大小、形状、颜色等各个方面。

五、状态管理

本项目采用了 Flutter 原生的状态管理方式，即通过 StatefulWidget 和 setState 来管理组件状态。每个步进器组件独立管理自己的数值状态，这种方式具有以下特点：

1. 局部状态管理：每个步进器实例维护自己的数值状态，互不干扰，父组件不需要关心步进器内部的状态变化。这种局部状态管理方式非常适合 UI 控件类组件，因为它们的状态通常只与自身相关。

2. 回调通信机制：当数值发生变化时，通过 onValueChanged 回调函数通知父组件，父组件可以根据需要做出响应。这种设计实现了数据的单向流动：状态由组件内部维护，变化通过回调向外传递，符合 Flutter 的响应式编程思想。

3. 边界状态处理：当数值达到最小值或最大值时，对应的按钮自动变为禁用状态，颜色变为灰色，用户无法继续点击。这种即时的视觉反馈为用户提供了清晰的交互指引，提升了用户体验。

4. 初始化与生命周期：在 initState 中进行状态初始化，确保组件首次构建时数值正确。组件销毁时无需特殊处理，因为没有定时器或流订阅等需要清理的资源。

这种状态管理方式对于单一组件的局部状态来说是高效且合适的，不需要引入 Provider、Bloc、Riverpod 等复杂的状态管理框架。过度设计往往会增加代码的复杂度和维护成本，而简单直接的方案反而更容易理解和维护。

六、关键代码详解

6.1 边界检查与状态更新

递增和递减方法是组件的核心逻辑，它们体现了防御式编程的思想。在修改状态之前，先进行边界检查，确保数值不会超出允许的范围。然后在 setState 的回调中同时完成数值更新和回调触发，保证状态变化的原子性。

特别值得注意的是，回调函数使用了可选调用运算符，这意味着即使用户没有传入回调函数，代码也不会崩溃，体现了良好的容错设计。这种防御式编程的思想在开发可复用组件时尤为重要，因为组件的使用者可能不会传入所有可选参数。

6.2 按钮的动态样式

按钮构建方法中根据 enabled 参数动态改变按钮的背景颜色和点击回调，这种方式简洁高效。当按钮不可用时，不仅视觉上呈现灰色，交互上也完全禁用，避免了用户的困惑。

按钮的圆角使用 BorderRadius.circular(widget.buttonSize / 2) 来实现完美圆形，无论按钮尺寸如何变化，都能保持圆形外观，这是一个巧妙的设计技巧。如果使用固定的圆角值，当按钮尺寸变化时，圆形效果就会失真。

按钮的图标大小设置为按钮尺寸的 0.6 倍，这个比例是经过精心设计的，既能保证图标清晰可见，又不会显得过于拥挤或空旷。这种相对尺寸的设计思路，使得组件在不同尺寸下都能保持良好的视觉比例。

6.3 文本样式的优雅降级

中间数值的文本样式采用了条件表达式：widget.textStyle ?? 默认样式。这种模式在 Flutter 开发中非常常见，它允许用户自定义样式，同时在用户没有提供自定义样式时使用合理的默认值，兼顾了灵活性和易用性。

默认样式使用了 24 号字体和粗体字重，使得数值在各种屏幕尺寸下都能清晰可读。颜色使用了默认的文本颜色，与整体主题保持一致。

七、技术总结

本项目展示了如何使用 Flutter 构建一个高质量、可复用的 UI 组件。通过对步进器组件的深入分析，我们可以总结出以下技术要点和设计思想：

组件化设计思想：将步进器封装为独立的 StatefulWidget，对外暴露配置属性和回调接口，对内隐藏实现细节，是 Flutter 开发中的最佳实践之一。这种设计使得组件可以在不同的场景下重复使用，大大提高了开发效率。

状态管理的简洁性：对于局部状态，使用原生的 setState 机制即可满足需求，不需要过度设计引入复杂的状态管理库。简单的方案往往是最好的方案。开发者应该根据实际需求选择合适的状态管理方式，而不是盲目追求流行的技术方案。

可定制化与默认值：通过提供丰富的可配置属性和合理的默认值，组件既能满足简单场景的快速使用需求，又能应对复杂场景的个性化定制需求。这是可复用组件设计的核心原则之一。

边界处理与用户体验：对最小值和最大值的边界进行完善处理，包括禁用按钮、灰色显示等，体现了对用户体验的细致关注。一个好的组件不仅要功能正确，还要有良好的交互体验。

Material 3 设计规范：项目采用最新的 Material 3 设计语言，使用 ColorScheme.fromSeed 自动生成配色方案，使应用具有现代化的视觉效果。Material 3 提供了更加丰富的色彩系统和组件样式，能够打造出更加精美的用户界面。

OpenHarmony 兼容性：项目针对 OpenHarmony 平台进行了适配，使用纯 Flutter 实现，不依赖特定平台的原生代码，确保了跨平台的一致性和可移植性。这意味着同一套代码可以在多个平台上运行，大大降低了开发和维护成本。

代码组织与可读性：项目代码结构清晰，命名规范，注释恰当，便于阅读和理解。私有方法使用下划线前缀，公共属性使用描述性名称，这些细节都体现了良好的编码规范。

总的来说，这个步进器组件项目虽然代码量不大，但麻雀虽小五脏俱全，涵盖了 Flutter 组件开发的核心概念和最佳实践，是学习 Flutter 组件化开发的优秀范例。通过深入分析这个项目，开发者可以掌握组件封装、状态管理、属性配置、用户交互等多方面的技能，为开发更复杂的 Flutter 应用打下坚实的基础。

Flutter for OpenHarmony 实战：步进器组件实现

前言：跨生态开发的新机遇

在移动开发领域，我们总是面临着选择与适配。今天，你的Flutter应用在Android和iOS上跑得正欢，明天可能就需要考虑一个新的平台：HarmonyOS（鸿蒙）。这不是一道选答题，而是很多团队正在面对的现实。

Flutter的优势很明确——写一套代码，就能在两个主要平台上运行，开发体验流畅。而鸿蒙代表的是下一个时代的互联生态，它不仅仅是手机系统，更着眼于未来全场景的体验。将现有的Flutter应用适配到鸿蒙，听起来像是一个“跨界”任务，但它本质上是一次有价值的技术拓展：让产品触达更多用户，也让技术栈覆盖更广。

不过，这条路走起来并不像听起来那么简单。Flutter和鸿蒙，从底层的架构到上层的工具链，都有着各自的设计逻辑。会遇到一些具体的问题：代码如何组织？原有的功能在鸿蒙上如何实现？那些平台特有的能力该怎么调用？更实际的是，从编译打包到上架部署，整个流程都需要重新摸索。
这篇文章想做的，就是把这些我们趟过的路、踩过的坑，清晰地摊开给你看。我们不会只停留在“怎么做”，还会聊到“为什么得这么做”，以及“如果出了问题该往哪想”。这更像是一份实战笔记，源自真实的项目经验，聚焦于那些真正卡住过我们的环节。

无论你是在为一个成熟产品寻找新的落地平台，还是从一开始就希望构建能面向多端的应用，这里的思路和解决方案都能提供直接的参考。理解了两套体系之间的异同，掌握了关键的衔接技术，不仅能完成这次迁移，更能积累起应对未来技术变化的能力。

混合工程结构深度解析

项目目录架构

当Flutter项目集成鸿蒙支持后，典型的项目结构会发生显著变化。以下是经过ohos_flutter插件初始化后的项目结构：

my_flutter_harmony_app/
├── lib/                          # Flutter业务代码（基本不变）
│   ├── main.dart                 # 应用入口
│   ├── home_page.dart           # 首页
│   └── utils/
│       └── platform_utils.dart  # 平台工具类
├── pubspec.yaml                  # Flutter依赖配置
├── ohos/                         # 鸿蒙原生层（核心适配区）
│   ├── entry/                    # 主模块
│   │   └── src/main/
│   │       ├── ets/              # ArkTS代码
│   │       │   ├── MainAbility/
│   │       │   │   ├── MainAbility.ts       # 主Ability
│   │       │   │   └── MainAbilityContext.ts
│   │       │   └── pages/
│   │       │       ├── Index.ets           # 主页面
│   │       │       └── Splash.ets          # 启动页
│   │       ├── resources/        # 鸿蒙资源文件
│   │       │   ├── base/
│   │       │   │   ├── element/  # 字符串等
│   │       │   │   ├── media/    # 图片资源
│   │       │   │   └── profile/  # 配置文件
│   │       │   └── en_US/        # 英文资源
│   │       └── config.json       # 应用核心配置
│   ├── ohos_test/               # 测试模块
│   ├── build-profile.json5      # 构建配置
│   └── oh-package.json5         # 鸿蒙依赖管理
└── README.md

目录

• 前言：跨生态开发的新机遇
• 混合工程结构深度解析
• 展示效果图片
• 功能代码实现
• 本次开发中容易遇到的问题
• 总结本次开发中用到的技术点

展示效果图片

flutter 实时预览 效果展示

运行到鸿蒙虚拟设备中效果展示

功能代码实现

步进器组件设计与实现

步进器是一种常见的用户界面组件，用于在一定范围内增加或减少数值。在本次开发中，我们实现了一个高度可定制的步进器组件，具体实现如下：

组件结构设计

步进器组件采用 StatefulWidget 实现，因为它需要维护内部状态（当前数值）。组件包含以下核心属性：

• initialValue：初始数值
• minValue：最小值限制
• maxValue：最大值限制
• onValueChanged：数值变化回调
• buttonSize：按钮大小
• textStyle：文本样式
• buttonColor：按钮颜色
• iconColor：图标颜色

核心代码实现

import 'package:flutter/material.dart';

class StepperWidget extends StatefulWidget {
  final int initialValue;
  final int minValue;
  final int maxValue;
  final ValueChanged<int>? onValueChanged;
  final double buttonSize;
  final TextStyle? textStyle;
  final Color buttonColor;
  final Color iconColor;

  const StepperWidget({
    super.key,
    this.initialValue = 0,
    this.minValue = 0,
    this.maxValue = 100,
    this.onValueChanged,
    this.buttonSize = 40.0,
    this.textStyle,
    this.buttonColor = Colors.blue,
    this.iconColor = Colors.white,
  });

  @override
  State<StepperWidget> createState() => _StepperWidgetState();
}

class _StepperWidgetState extends State<StepperWidget> {
  late int _value;

  @override
  void initState() {
    super.initState();
    _value = widget.initialValue;
  }

  void _decrement() {
    if (_value > widget.minValue) {
      setState(() {
        _value--;
        widget.onValueChanged?.call(_value);
      });
    }
  }

  void _increment() {
    if (_value < widget.maxValue) {
      setState(() {
        _value++;
        widget.onValueChanged?.call(_value);
      });
    }
  }

  @override
  Widget build(BuildContext context) {
    return Row(
      mainAxisAlignment: MainAxisAlignment.center,
      children: [
        _buildButton(
          icon: Icons.remove,
          onPressed: _decrement,
          enabled: _value > widget.minValue,
        ),
        const SizedBox(width: 20),
        Text(
          '$_value',
          style: widget.textStyle ??
              TextStyle(
                fontSize: 24,
                fontWeight: FontWeight.bold,
              ),
        ),
        const SizedBox(width: 20),
        _buildButton(
          icon: Icons.add,
          onPressed: _increment,
          enabled: _value < widget.maxValue,
        ),
      ],
    );
  }

  Widget _buildButton({
    required IconData icon,
    required VoidCallback onPressed,
    required bool enabled,
  }) {
    return Container(
      width: widget.buttonSize,
      height: widget.buttonSize,
      decoration: BoxDecoration(
        color: enabled ? widget.buttonColor : Colors.grey,
        borderRadius: BorderRadius.circular(widget.buttonSize / 2),
      ),
      child: IconButton(
        icon: Icon(icon, color: widget.iconColor),
        onPressed: enabled ? onPressed : null,
        iconSize: widget.buttonSize * 0.6,
      ),
    );
  }
}

组件使用方法

在首页中，我们展示了两个不同样式的步进器实例：

import 'package:flutter/material.dart';
import 'stepper_widget.dart';

void main() {
  runApp(const MyApp());
}

class MyApp extends StatelessWidget {
  const MyApp({super.key});

  @override
  Widget build(BuildContext context) {
    return MaterialApp(
      title: 'Flutter for openHarmony',
      theme: ThemeData(
        colorScheme: ColorScheme.fromSeed(seedColor: Colors.deepPurple),
        useMaterial3: true,
      ),
      debugShowCheckedModeBanner: false,
      home: const MyHomePage(title: 'Flutter for openHarmony'),
    );
  }
}

class MyHomePage extends StatefulWidget {
  const MyHomePage({super.key, required this.title});

  final String title;

  @override
  State<MyHomePage> createState() => _MyHomePageState();
}

class _MyHomePageState extends State<MyHomePage> {
  @override
  Widget build(BuildContext context) {
    return Scaffold(
      appBar: AppBar(
        title: Text(widget.title),
      ),
      body: Center(
        child: Column(
          mainAxisAlignment: MainAxisAlignment.center,
          children: <Widget>[
            const Text(
              'Stepper Widget Example',
              style: TextStyle(fontSize: 24, fontWeight: FontWeight.bold),
            ),
            const SizedBox(height: 40),
            StepperWidget(
              initialValue: 5,
              minValue: 0,
              maxValue: 20,
              onValueChanged: (value) {
                // Handle value change
              },
              buttonSize: 50,
              buttonColor: Colors.deepPurple,
            ),
            const SizedBox(height: 60),
            const Text(
              'Customized Stepper',
              style: TextStyle(fontSize: 20, fontWeight: FontWeight.bold),
            ),
            const SizedBox(height: 20),
            StepperWidget(
              initialValue: 10,
              minValue: 0,
              maxValue: 100,
              buttonSize: 40,
              buttonColor: Colors.green,
              textStyle: const TextStyle(
                fontSize: 20,
                fontWeight: FontWeight.bold,
                color: Colors.green,
              ),
            ),
          ],
        ),
      ),
    );
  }
}

开发注意事项

1. 状态管理：使用 StatefulWidget 管理内部数值状态，确保数值变化能够触发 UI 更新
2. 边界检查：在增加或减少数值时，需要检查是否达到最小值或最大值，避免数值溢出
3. 用户体验：当达到边界值时，对应按钮应变为禁用状态，提供清晰的视觉反馈
4. 可定制性：通过暴露多个属性，允许开发者根据具体需求定制组件外观
5. 代码规范：使用 super.key 简化构造函数，遵循 Dart 语言最佳实践

本次开发中容易遇到的问题

1. 组件状态管理问题

   • 问题描述：在实现步进器时，若使用 StatelessWidget，数值变化将无法正确显示
   • 解决方案：使用 StatefulWidget 并通过 setState 方法更新状态，确保 UI 能够响应数值变化

2. 边界值处理问题

   • 问题描述：未正确处理最小值和最大值边界，可能导致数值超出预期范围
   • 解决方案：在 _decrement 和 _increment 方法中添加边界检查，确保数值始终在设定范围内

3. 按钮禁用状态问题

   • 问题描述：当达到边界值时，按钮仍可点击，用户体验不佳
   • 解决方案：根据当前数值与边界值的关系，动态设置按钮的 enabled 属性

4. 样式定制问题

   • 问题描述：组件样式固定，无法适应不同场景的需求
   • 解决方案：通过构造函数参数暴露样式相关属性，允许开发者根据需要定制

5. 代码规范问题

   • 问题描述：未遵循 Dart 语言最佳实践，代码可读性和维护性较差
   • 解决方案：使用 super.key 简化构造函数，添加适当的注释，保持代码结构清晰

总结本次开发中用到的技术点

1. Flutter 组件开发

   • 使用 StatefulWidget 和 State 管理组件状态
   • 自定义构造函数，支持多个可选参数
   • 通过 setState 方法更新 UI

2. 布局与样式

   • 使用 Row 和 Column 进行基本布局
   • 通过 Container 和 BoxDecoration 自定义按钮样式
   • 使用 IconButton 实现按钮点击功能
   • 通过 TextStyle 定制文本外观

3. 用户交互

   • 实现按钮点击事件处理
   • 通过回调函数 ValueChanged<int> 通知父组件数值变化
   • 动态禁用边界按钮，提升用户体验

4. 代码组织

   • 将步进器组件抽离为独立文件 stepper_widget.dart
   • 在主文件 main.dart 中引用并使用组件
   • 遵循 Dart 语言代码规范，保持代码清晰易读

5. 跨平台适配

   • 利用 Flutter 的跨平台特性，确保组件在 OpenHarmony 上正常运行
   • 避免使用平台特定的 API，保证代码的可移植性

通过本次开发，我们不仅实现了一个功能完整、可定制性强的步进器组件，还掌握了 Flutter 组件开发的核心技术和最佳实践，为后续在 OpenHarmony 平台上开发更多复杂组件积累了经验。

flutter_openHarmony（简称 Flutter‑OH）

注意：不是Google官方产物，是OpenHarmony社区TPC组织维护的Flutter引擎移植版本。把Flutter的Dart/Skia引擎做底层改造，让Flutter应用可以直接编译输出 HAP包，跑在OpenHarmony/纯血鸿蒙设备上，不需要依赖Android兼容层。

简单讲：一套Dart/Flutter业务代码，可以同时编译 Android、iOS、OpenHarmony（HAP）。

核心原理

对Flutter Engine做Embedder嵌入适配，对接OpenHarmony Rosen图形管线、UIAbility生命周期，通过MethodChannel实现 Dart ↔ ArkTS双向通信，Flutter自绘UI渲染到鸿蒙Surface，复用方舟编译器、系统权限、分布式能力。

• Dart业务代码几乎不变
• 底层引擎适配鸿蒙图形、线程、生命周期
• 输出产物是标准HAP应用包，可上架鸿蒙应用市场

主要优势

1. 存量Flutter项目低成本接入鸿蒙生态
   纯Dart业务、纯Widget界面几乎不用改代码即可编译出鸿蒙HAP；只有带Android/iOS原生桥接的插件，才需要做鸿蒙适配替换。已经有成熟Flutter App，想快速覆盖鸿蒙设备，不用全部重写ArkTS。

2. 多端UI高度一致性
   Flutter自绘渲染，不受各平台控件差异影响，手机、平板、车机界面表现统一；滚动、动画、首页各类动效（轮播、吸顶、骨架屏、入场动画）跨平台表现一致，和你前面问的App首页各种效果可以一套代码全部实现。

3. 继承Flutter完整开发体验
   保留热重载、DevTools调试、完整Widget组件库；pub.dev海量纯Dart三方库直接复用，是鸿蒙跨端方案里三方库最丰富的方案。提供定制CLI，一条命令完成编译、真机调试、打包HAP。

4. 可调用OpenHarmony原生系统能力
   支持调用分布式软总线、分布式数据KV、原子化服务、鸿蒙权限体系、硬件能力；Flutter页面和ArkTS原生页面可以混合开发、互相跳转，复杂原生逻辑继续写ArkTS，UI业务交给Flutter实现。

5. 全场景设备覆盖
   支持OpenHarmony手机、平板、智慧屏、车机等设备，适合需要多终端统一UI的业务。引擎做了懒加载，跟随UIAbility生命周期启停，控制内存占用，减少后台资源消耗。