开发工具： 华为云码道

本文配套仓库： 上游 herisetiawan00/json-component；
鸿蒙适配后仓库：https://atomgit.com/oh-flutter/json-component

本文配套仓库：https://atomgit.com/oh-flutter/json-component（TAG：0.0.3-ohos-0.0.1-beta.1，分支：main），文中示例代码位于仓库 example/ 目录。

在这里插入图片描述

什么是 JSON 驱动动态组件？ 在传统 Flutter 开发中，界面由 Dart 代码中的 Widget 树静态描述，每次界面变更都需要重新编译发版。JSON 驱动动态组件则将界面结构以 JSON 数据描述，由运行时解释器动态构建对应的 Widget 树——开发者只需在服务端下发一段 JSON，客户端即可实时渲染出最新界面，无需重新编译。这种方式在动态化运营、A/B 测试、服务端驱动 UI 等场景中极具价值。

把界面交给 JSON 来描述、把状态交给数据来驱动，是动态化运营、服务端驱动 UI 与 A/B 测试场景下的高频需求：注册一个组件构造器、用 JSON 描述界面结构、用状态驱动实时更新。鸿蒙应用同样需要这个能力。本文介绍如何使用鸿蒙化适配后的 Flutter 三方库 json_component，用 initialize() + register() + build() 三步在鸿蒙 App 内实现 JSON 驱动的动态组件渲染，支持多组件注册、状态驱动更新与模板变量绑定，并附上 OpenHarmony-6.1.1.120 真机的完整实测记录。

一、最终运行效果

应用启动后，页面自上而下渲染出五个 JSON 驱动的动态组件：标题文本、用户/角色卡片（带切换按钮）、计数器卡片、适配信息卡片、核心能力列表。点击"切换用户 / 角色"按钮，用户卡片实时更新姓名与角色；点击计数器的"+1"和"重置"按钮，计数器实时变化——全部由 JsonComponent.setState() 驱动，无需重建页面。

获取复制后显示剪贴板内容 获取复制后显示剪贴板内容 获取复制后显示剪贴板内容 获取复制后显示剪贴板内容 获取复制后显示剪贴板内容

验证点结果
应用启动，Flutter 页面正常渲染五个动态组件通过
点击"切换用户 / 角色"按钮，用户卡片实时更新 name / role通过
点击计数器"+1"按钮，数字递增；点击"重置"按钮，归零通过
模板变量 $state.name / $state.role 正确解析为当前状态值通过
全程无需申请任何敏感权限通过

鸿蒙技术点：FlutterPage 与 XComponent
鸿蒙侧的 Flutter 渲染入口是 FlutterPage 组件，它内部封装了 XComponent——OpenHarmony 提供的底层渲染画布组件。XComponent 通过 NAPI 桥接 C++ 引擎层，将 Flutter 的 Skia 渲染管线挂载到鸿蒙的渲染树中，使 Dart 层的 Widget 树在鸿蒙设备上完整渲染。FlutterAbility 作为容器 Ability，管理 FlutterEngine 的生命周期，在 configureFlutterEngine 中注册所有平台插件。

二、json_component 是什么

json_component 原库（pub.dev，作者 herisetiawan00）是一个 JSON 到 Flutter Widget 的动态组件解释器：开发者用 JSON 描述组件结构（_id / _state / _key），通过 JsonComponent.register() 注册组件构造器，再调用 JsonComponent.build() 动态渲染 Widget；状态更新通过 JsonComponent.setState() 与模板变量（$state.xxx）实现。鸿蒙适配版在其基础上新增了 OpenHarmony / HarmonyOS 平台支持，Dart 层零改动，仅新增 OHOS 平台原生插件桩实现。

几个对使用者友好的特点：

  • 纯 Dart 核心：组件注册、构建、状态驱动、模板变量全部为纯 Dart 实现，不依赖任何平台 API，逻辑在六端完全一致；
  • 零权限：OHOS 平台桩仅通过 @ohos.deviceInfo 基础能力返回系统版本号，不需要在 module.json5 中申请任何敏感权限；
  • 状态驱动更新：通过 setState(key, state) 合并更新组件状态，ValueNotifier + ValueListenableBuilder 实现局部刷新，无需重建整个页面；
  • 模板变量：在 JSON 值前加 $state. 前缀，运行时自动解析为状态树中的对应值，支持多层嵌套路径；
  • 跨平台一套代码：Android、iOS、鸿蒙、macOS、Windows、Linux、Web 共用同一套 API，运行在哪端就按哪端的方式渲染。

接口说明

名称描述类型参数类型返回值必填鸿蒙平台支持
JsonComponent.initialize初始化单例静态方法—void是是
JsonComponent.register注册组件构造器静态方法String id, ComponentBuilder buildervoid是是
JsonComponent.containsId判断组件是否已注册静态方法String idbool否是
JsonComponent.setState更新组件状态静态方法String key, ComponentState statevoid否是
JsonComponent.clear清空所有注册静态方法—void否是
JsonComponent.build构建组件 Widget静态方法BuildContext, ComponentJson, [ComponentContext]Widget是是

组件 JSON 结构

Key必填唯一说明
_id是是组件标识符，必须已通过 register() 注册
_state视情况否组件的初始状态，为 Map<String, dynamic>
_key视情况是用于状态更新的组件标识符，setState() 据此定位

三、环境准备

本文所有实测均在以下环境完成：

项版本说明
Flutter（ohos 版）3.3.0+（ohos channel）主验证环境，真机实测
Dart SDK>= 3.4.4最低要求
编译 SDK5.1.0(18)宿主工程 compatibleSdkVersion 同值，保留带括号的旧格式
真机OpenHarmony-6.1.1.120（API 24）分辨率 1084 × 2412

鸿蒙技术点：compatibleSdkVersion 与 API Level
compatibleSdkVersion 是鸿蒙工程 build-profile.json5 中的关键字段，声明应用的最低兼容 API 版本。鸿蒙的 API 版本与系统版本一一对应：5.1.0(18) 对应 API 18，6.1.0(23) 对应 API 23，6.1.1.120 对应 API 24。真机安装时，系统会校验应用的 compatibleSdkVersion 不高于设备实际 API 版本，否则报"此应用暂不支持在当前设备安装"。

两点提醒：

  • 编译鸿蒙目标需要使用 ohos 版 Flutter SDK，普通 Flutter SDK 无法编译 ohos 产物；
  • 若在真机上安装应用报"此应用暂不支持在当前设备安装"，是宿主工程的 compatibleSdkVersion 高于设备 API 导致的，与插件无关，处理方式见 FAQ Q3。

四、引入依赖

进入工程目录，在 pubspec.yaml 中添加 git 依赖：

dependencies:
  json_component:
    git:
      url: https://atomgit.com/oh-flutter/json-component.git
      # ref: 根据下方表格选择不同框架适配的 TAG 版本
      ref: 0.0.3-ohos-0.0.1-beta.1

执行命令拉取依赖：

flutter pub get

TAG 命名规则：原库版本-ohos-版本号-beta.x。

Flutter 框架版本TAG 名称分支名
3.440.0.3-ohos-0.0.1-beta.1main

说明：该 TAG 已在 OpenHarmony-6.1.1.120（API 24）真机上实测通过。compatibleSdkVersion 设为 5.1.0(18) 即可在 API 24 真机安装运行。

五、代码接入

5.1 导入库

import 'package:json_component/json_component.dart';

导入后即可使用 JsonComponent 类、BaseJsonComponent 基类、ComponentJson / ComponentState / ComponentContext 类型定义，以及 StringExtension 扩展（提供 withContext() 方法）。

5.2 初始化与注册组件

void main() {
  JsonComponent.initialize();
  JsonComponent.register('text', TextComponent.fromJson);
  JsonComponent.register('user_card', UserCardComponent.fromJson);
  JsonComponent.register('counter', CounterComponent.fromJson);
  JsonComponent.register('info_card', InfoCardComponent.fromJson);
  JsonComponent.register('list', ListComponent.fromJson);

  runApp(const MyApp());
}

initialize() 创建 JsonComponent 的私有单例实例，后续所有静态方法（register / build / setState / clear / containsId）都操作这个单例。register(id, builder) 将组件 ID 与构造器函数绑定——构造器接收 ComponentJson（即 Map<String, dynamic>），返回 BaseJsonComponent 子类实例。重复注册同一 ID 会抛出 ComponentRegisteredException。

鸿蒙技术点：FlutterAbility 与插件注册
在鸿蒙侧，EntryAbility 继承 FlutterAbility，在 configureFlutterEngine 中调用 GeneratedPluginRegistrant.registerWith(flutterEngine)，将 JsonComponentPlugin 实例添加到 FlutterEngine 的插件列表中。FlutterEngine 启动时遍历插件列表，调用每个插件的 onAttachedToEngine，建立 MethodChannel。这一过程对 Dart 层透明——Dart 侧无需感知平台插件的注册细节。

5.3 定义组件

每个组件继承 BaseJsonComponent，在 fromJson 构造器中从 JSON 解析字段，在 build 方法中返回 Widget：

class TextComponent extends BaseJsonComponent {
  final String text;

  TextComponent.fromJson(super.json)
      : text = json['text'] ?? '',
        super.fromJson();

  @override
  Widget build(BuildContext context, ComponentContext cContext) {
    return Text(
      text.withContext(cContext),
      textAlign: TextAlign.center,
      style: const TextStyle(fontSize: 18, fontWeight: FontWeight.w500),
    );
  }
}

BaseJsonComponent 的 fromJson 构造器从 JSON 中提取三个公共字段：_id（组件标识）、_key（状态更新键）、_state（初始状态）。子类在此基础上解析自己的业务字段。build(context, cContext) 接收 ComponentContext——一个包含当前组件状态的 Map，通过 withContext() 将模板变量（如 $state.value）解析为真实值。

代码逐段分析：withContext 模板变量解析
StringExtension.withContext() 是模板变量的核心。它检测字符串是否以 $ 开头，若是，则截取后续部分按 . 分割为路径数组，逐层在 cContext 中查找对应值。例如 $state.name 会被拆分为 ['state', 'name']，先取 cContext['state']，再取 ['name']，最终返回状态中的 name 值。若任一层级为 null，则原样返回字符串本身，避免运行时崩溃。

5.4 状态驱动更新

class CounterComponent extends BaseJsonComponent {
  CounterComponent.fromJson(super.json) : super.fromJson();

  @override
  Widget build(BuildContext context, ComponentContext cContext) {
    final count = (cContext['state']?['count'] as num?)?.toInt() ?? 0;

    return Card(
      child: Padding(
        padding: const EdgeInsets.all(16),
        child: Column(
          mainAxisSize: MainAxisSize.min,
          children: [
            Text('当前计数：$count',
                style: const TextStyle(fontSize: 22, fontWeight: FontWeight.bold)),
            const SizedBox(height: 12),
            Wrap(
              spacing: 8,
              children: [
                FilledButton(
                  onPressed: key == null
                      ? null
                      : () => JsonComponent.setState(key!, {'count': count + 1}),
                  child: const Text('+1'),
                ),
                OutlinedButton(
                  onPressed: key == null
                      ? null
                      : () => JsonComponent.setState(key!, {'count': 0}),
                  child: const Text('重置'),
                ),
              ],
            ),
          ],
        ),
      ),
    );
  }
}

计数器组件没有额外字段，完全由 _state 驱动。build 方法从 cContext['state']['count'] 读取当前计数值。点击"+1"按钮时，调用 JsonComponent.setState(key!, {'count': count + 1})——setState 将新状态与旧状态合并（{...oldState, ...newState}），通过 ValueNotifier 通知 ValueListenableBuilder 重建组件。

代码逐段分析：ComponentBuilderWidget 状态管理
ComponentBuilderWidget 是一个 StatefulWidget，在 initState 中创建 ValueNotifier<ComponentState> 并注册 _updateState 回调到 JsonComponent._registeredState 字典中（键为组件的 _key）。当外部调用 JsonComponent.setState(key, state) 时，实际触发的是 _updateState，它将新状态与旧状态浅合并后赋值给 ValueNotifier，触发 ValueListenableBuilder 重建。dispose 时移除回调并释放 ValueNotifier，避免内存泄漏。

5.5 使用组件

const ComponentJson userJson = {
  '_id': 'user_card',
  '_key': 'user-card-key',
  '_state': {'name': 'David', 'role': 'Flutter Developer'},
};

JsonComponent.build(context, userJson);

build 方法从 JSON 中读取 _id，在注册表中查找对应构造器，调用构造器创建组件实例，然后返回 ComponentBuilderWidget——它内部管理组件的生命周期与状态。_key 用于后续 setState 定位；_state 提供初始状态值。

5.6 动态切换用户

const List<Map<String, dynamic>> _users = [
  {'name': 'David', 'role': 'Flutter Developer'},
  {'name': 'Alice', 'role': 'UI Designer'},
  {'name': 'Bob', 'role': 'QA Engineer'},
];

void _switchUser() {
  setState(() {
    _userIndex = (_userIndex + 1) % _users.length;
  });
  JsonComponent.setState('user-card-key', _users[_userIndex]);
}

点击"切换用户 / 角色"按钮时，_switchUser 轮换用户索引并调用 setState('user-card-key', {name, role})。用户卡片组件的 build 方法从 cContext['state'] 读取 name 和 role，渲染头像首字母、姓名与角色。状态更新后，ValueListenableBuilder 自动重建卡片，无需重建整个页面。

鸿蒙技术点：ValueNotifier 在鸿蒙上的行为一致性
ValueNotifier 是 Flutter Foundation 层的轻量级状态管理工具，继承自 ChangeNotifier。在鸿蒙平台上，Flutter Engine 的 C++ 层完整实现了 ChangeNotifier 的通知机制：监听器注册、移除、通知全部由引擎层统一管理，Dart 层的 ValueNotifier 行为在鸿蒙上与 Android/iOS 完全一致。这意味着基于 ValueListenableBuilder 的局部刷新模式在鸿蒙上无需任何适配。

5.7 实战：服务端下发 JSON 动态渲染信息卡片

实际业务中常见的场景是服务端下发一段 JSON，客户端动态渲染出信息卡片。下面是一个可直接使用的组件定义与 JSON 示例：

class InfoCardComponent extends BaseJsonComponent {
  final String title;
  final List<Map<String, dynamic>> fields;

  InfoCardComponent.fromJson(super.json)
      : title = json['title'] ?? '',
        fields = (json['fields'] as List?)?.cast<Map<String, dynamic>>() ?? [],
        super.fromJson();

  @override
  Widget build(BuildContext context, ComponentContext cContext) {
    return Card(
      child: Padding(
        padding: const EdgeInsets.all(16),
        child: Column(
          crossAxisAlignment: CrossAxisAlignment.start,
          children: [
            Text(title, style: const TextStyle(fontSize: 16, fontWeight: FontWeight.bold)),
            const Divider(),
            ...fields.map(
              (f) => Padding(
                padding: const EdgeInsets.symmetric(vertical: 4),
                child: Row(
                  mainAxisAlignment: MainAxisAlignment.spaceBetween,
                  children: [
                    Text('${f['label']}'),
                    Text('${f['value']}'.withContext(cContext),
                        style: const TextStyle(fontWeight: FontWeight.w600)),
                  ],
                ),
              ),
            ),
          ],
        ),
      ),
    );
  }
}

对应的 JSON 数据：

const ComponentJson infoJson = {
  '_id': 'info_card',
  'title': '适配信息',
  'fields': [
    {'label': '目标平台', 'value': 'OpenHarmony 6.1.1 (API 24)'},
    {'label': '组件框架', 'value': 'json_component v0.0.3'},
    {'label': '用户状态', 'value': '\$state.name / \$state.role'},
  ],
};

fields 中的 value 支持模板变量：$state.name 会在运行时被解析为当前状态中 name 字段的值。若组件未设置 _key 和 _state，则模板变量原样返回字符串本身。

六、运行与验证

以下为 demo 工程的真机实测记录。仓库中 example 的 Bundle Name 为 com.example.ohos_example_scaffold。

设备项值
机型OpenHarmony 真机
系统版本OpenHarmony-6.1.1.120
API 版本24
分辨率1084 × 2412

6.1 验证一：多组件渲染

安装、启动 demo 并验证页面渲染：

# 构建 hap 后安装
hdc install entry-default-signed.hap

# 启动 demo
hdc shell aa start -b com.example.ohos_example_scaffold -a EntryAbility

应用启动后，Flutter 页面自上而下渲染出五个动态组件：标题文本"JsonComponent 动态组件演示"、用户/角色卡片（David / Flutter Developer）、计数器卡片（当前计数：0）、适配信息卡片、核心能力列表。所有组件均由 JSON 描述，通过 JsonComponent.build() 动态构建。

在这里插入图片描述

6.2 验证二：状态驱动更新

在已启动的 demo 上，模拟用户交互：

# 模拟点击"切换用户 / 角色"按钮
hdc shell uitest uiInput click 542 1200

# 模拟点击计数器"+1"按钮
hdc shell uitest uiInput click 542 1600

点击"切换用户 / 角色"后，用户卡片的姓名从 David 变为 Alice、角色从 Flutter Developer 变为 UI Designer，头像首字母从 D 变为 A——全部由 JsonComponent.setState('user-card-key', {name, role}) 驱动，ValueListenableBuilder 局部重建，页面其他组件不受影响。

点击计数器"+1"按钮后，计数从 0 变为 1，继续点击递增——由 JsonComponent.setState('counter-key', {'count': count + 1}) 驱动，状态合并后触发重建。

在这里插入图片描述

在这里插入图片描述
在这里插入图片描述

6.3 验证三：模板变量解析

适配信息卡片中第三行 value 为 $state.name / $state.role，在用户为 David 时显示为 David / Flutter Developer，切换为 Alice 后实时变为 Alice / UI Designer——证明 withContext() 模板变量解析在鸿蒙上行为一致。

在这里插入图片描述

实测结论：

验证点结果
应用启动，Flutter 页面正常渲染五个动态组件通过
点击"切换用户 / 角色"按钮，用户卡片实时更新 name / role通过
点击计数器"+1"按钮，数字递增；点击"重置"按钮，归零通过
模板变量 $state.name / $state.role 正确解析为当前状态值通过
全程无需申请任何敏感权限通过

以下是操作的视屏，可以参考一下：

Example 启动授权 Example 启动授权

七、工作原理

整个调用链路如下：

Dart: JsonComponent.build(context, json)
  → 从 json['_id'] 查找已注册的 ComponentBuilder
    → 调用 builder(json) 构造 BaseJsonComponent 子类实例
      → 返回 ComponentBuilderWidget（StatefulWidget）
        → initState: 创建 ValueNotifier(_state), 注册 _updateState 回调
          → ValueListenableBuilder 监听 ValueNotifier
            → 组件 build(context, cContext) 渲染 Widget

Dart: JsonComponent.setState(key, state)
  → 从 _registeredState[key] 查找回调
    → 调用 _updateState(state)
      → _stateNotifier.value = {...old, ...new}（状态合并）
        → ValueListenableBuilder 触发重建
          → 组件 build(context, cContext) 用新状态重新渲染

Dart: "字符串".withContext(cContext)
  → 检测是否以 '$' 开头
    → 截取路径, 按 '.' 分割
      → 逐层在 cContext 中查找
        → 返回最终值（或原样返回）

ArkTS: JsonComponentPlugin.onMethodCall("getPlatformVersion")
  → deviceInfo.osFullName
    → result.success("OpenHarmony " + osFullName)

Dart 侧的组件注册、构建、状态管理全部为纯 Dart 实现，不经过任何平台通道。平台侧（OHOS）仅保留 getPlatformVersion 桩实现，通过 MethodChannel('json_component') 暴露，返回 "OpenHarmony " + deviceInfo.osFullName。

鸿蒙技术点：FlutterPlugin 与 MethodCallHandler 接口
鸿蒙侧的 JsonComponentPlugin 实现了 FlutterPlugin 和 MethodCallHandler 两个接口。FlutterPlugin 的 onAttachedToEngine 在插件挂载到引擎时被调用，用于创建 MethodChannel 并设置自身为回调处理器；onDetachedFromEngine 在卸载时清理通道。MethodCallHandler 的 onMethodCall 处理来自 Dart 层的方法调用——收到 getPlatformVersion 时通过 @ohos.deviceInfo 读取系统版本号并回传，未实现的方法返回 notImplemented()。所有调用包裹在 try/catch 中，异常时返回错误码 JsonComponentError。

鸿蒙侧插件实现（ArkTS）核心代码：

import deviceInfo from '@ohos.deviceInfo';
import {
  FlutterPlugin, FlutterPluginBinding, MethodCall,
  MethodCallHandler, MethodChannel, MethodResult,
} from '@ohos/flutter_ohos';

export default class JsonComponentPlugin implements FlutterPlugin, MethodCallHandler {
  private channel: MethodChannel | null = null;

  getUniqueClassName(): string {
    return "JsonComponentPlugin"
  }

  onAttachedToEngine(binding: FlutterPluginBinding): void {
    this.channel = new MethodChannel(binding.getBinaryMessenger(), "json_component");
    this.channel.setMethodCallHandler(this)
  }

  onDetachedFromEngine(binding: FlutterPluginBinding): void {
    if (this.channel != null) {
      this.channel.setMethodCallHandler(null)
    }
  }

  onMethodCall(call: MethodCall, result: MethodResult): void {
    try {
      if (call.method == "getPlatformVersion") {
        result.success("OpenHarmony " + deviceInfo.osFullName)
      } else {
        result.notImplemented()
      }
    } catch (e) {
      result.error("JsonComponentError", "Failed to handle method call: " + JSON.stringify(e), null)
    }
  }
}

代码逐段分析：deviceInfo 导入方式
@ohos.deviceInfo 的 .d.ts 类型声明文件末尾是 export default deviceInfo（命名空间默认导出），因此必须使用 import deviceInfo from '@ohos.deviceInfo' 默认导入语法。若误写为 import { deviceInfo } from '@ohos.deviceInfo'（命名导入），ArkTS 编译器会直接报错 Module '"@ohos.deviceInfo"' has no exported member 'deviceInfo'。deviceInfo.osFullName 返回完整系统版本名（如 OpenHarmony-6.1.1.120），属于 SystemCapability.Startup.SystemInfo 基础能力，无需任何权限。

鸿蒙技术点：GeneratedPluginRegistrant 自动生成机制
GeneratedPluginRegistrant.ets 由 Flutter 工具链根据 pubspec.yaml 中的 ohos 平台配置自动生成。当 flutter pub get 解析到 json_component 依赖声明了 ohos: pluginClass: JsonComponentPlugin 时，工具会在宿主工程的 example/ohos/entry/src/main/ets/plugins/ 下生成注册代码，将 new JsonComponentPlugin() 添加到 FlutterEngine 的插件列表。开发者无需手动编写注册逻辑——这正是 Flutter 插件生态在鸿蒙上无缝衔接的关键机制。

八、常见问题

Q1：JsonComponent() 构造器报错怎么办？

JsonComponent 的构造器是私有的（JsonComponent._()），外部无法直接实例化。正确用法是调用 JsonComponent.initialize() 创建单例，然后通过静态方法 register / build / setState / clear / containsId 操作。initialize() 必须在 register 和 build 之前调用。

Q2：setState 后组件没有更新？

检查组件 JSON 中是否设置了 _key 字段。_key 是 setState 定位组件的键——若 JSON 中没有 _key，ComponentBuilderWidget 不会注册 _updateState 回调，setState 调用后无法找到目标组件。确保 setState 的第一个参数与组件 JSON 中的 _key 值完全一致。

Q3：真机安装 demo 时提示"此应用暂不支持在当前设备安装"？

这是宿主工程的 compatibleSdkVersion 高于真机 API 版本导致的安装校验失败，与插件无关。将 build-profile.json5 中的 compatibleSdkVersion 调整为不高于真机 API 的版本（如 5.1.0(18)，注意保留带括号的旧格式）即可。本文配套仓库的 example 已用此配置在 OpenHarmony-6.1.1.120（API 24）真机上安装实测通过。

Q4：重复注册同一组件 ID 报错？

register(id, builder) 检测到 ID 已存在时会抛出 ComponentRegisteredException。若需要重新注册，先调用 JsonComponent.clear() 清空所有注册，或使用 containsId(id) 提前判断。在 App 生命周期内，通常在 main() 中注册一次即可。

Q5：模板变量 $state.xxx 没有被解析？

模板变量解析依赖 withContext(cContext) 方法。确保在组件的 build 方法中，对包含 $state. 前缀的字符串调用了 .withContext(cContext)。若未调用，字符串将原样输出。另外，cContext 中的 state 键必须存在且包含对应路径的值，否则 withContext 在路径为 null 时原样返回字符串。

Q6：鸿蒙侧 getPlatformVersion 返回什么？

返回 "OpenHarmony " + deviceInfo.osFullName，例如 "OpenHarmony OpenHarmony-6.1.1.120"。这与 Android 返回 "Android 13"、iOS 返回 "iOS 16.1" 的格式对齐——<平台> <版本>。该值通过 MethodChannel('json_component') 的 getPlatformVersion 方法获取，属于系统基础能力，无需任何权限。

九、结语

回顾一下：在 pubspec.yaml 中以 git TAG 引入 json_component，调用 JsonComponent.initialize() 初始化单例，register() 注册组件构造器，build() 用 JSON 动态渲染 Widget，setState() 驱动状态实时更新——五个步骤即可在鸿蒙 App 内实现 JSON 驱动的动态组件渲染。组件注册、构建、状态管理、模板变量全部为纯 Dart 实现，在 Android、iOS、鸿蒙、macOS、Windows、Linux、Web 六端行为完全一致；OHOS 平台桩仅提供 getPlatformVersion 版本标识，零权限、零侵入。已在 OpenHarmony-6.1.1.120（API 24）真机完整实测，多组件渲染、状态驱动更新、模板变量解析全部通过。

使用中发现任何问题，欢迎到配套仓库提 Issue，也欢迎发 PR 共建。

相关链接

欢迎加入 CPF-Flutter 鸿蒙社区，社区入口、环境搭建指南和本文相关链接统一放在这里：

附：json_component 核心能力对照表

能力维度实现方式鸿蒙表现跨平台一致性
组件注册JsonComponent.register(id, builder)纯 Dart，一致六端完全一致
动态构建JsonComponent.build(context, json)纯 Dart，一致六端完全一致
状态更新JsonComponent.setState(key, state)ValueNotifier 驱动，一致六端完全一致
模板变量String.withContext(cContext)$state.path 解析，一致六端完全一致
状态合并{...oldState, ...newState}浅合并，一致六端完全一致
局部刷新ValueListenableBuilder引擎层支持，一致六端完全一致
平台版本MethodChannel('json_component')OpenHarmony osFullName格式对齐各平台
权限要求无无敏感权限六端均无
# harmonyos # json # 华为 # flutter # 开源 # 交互
Logo
人工智能6S服务平台

作为“人工智能6S店”的官方数字引擎，为AI开发者与企业提供一个覆盖软硬件全栈、一站式门户。

更多推荐

cover

HarmonyOS 7 鸿蒙电脑外接屏适配：px 与 vp 混用导致断点错判，怎样验证换屏后的布局

avatar 人工智能6S服务平台
cover

HarmonyOS鸿蒙App 增加可折叠 JSON 树形浏览器，支持任意嵌套结构展开收起、自动展开层级控制、自定义节点渲染回调，纯 Dart 零权限即插即用 —— json_viewer 鸿蒙使用指南

avatar 人工智能6S服务平台
cover

Flutter JSON树形展示插件鸿蒙适配实战：json_viewer空安全改造与OpenHarmony全平台兼容落地

avatar 人工智能6S服务平台