Flutter × HarmonyOS 6 实战：JSON 解析工具 App 的设计与实现

随着 HarmonyOS 6 生态逐步完善，越来越多开发者开始探索 Flutter 在鸿蒙系统上的工程化落地。在实际开发中，工具类应用是验证跨平台能力与 UI 一致性的重要切入点。本文将以一个 JSON 解析工具 App 为例，完整讲解如何基于 Flutter × HarmonyOS 6 实现一个具备 格式化、压缩、校验 等能力的实用工具页面。

在这里插入图片描述

流程如下：

Flutter 鸿蒙适配 SDK 获取
HarmonyOS 工具链环境配置
DevEco Studio 工程加载
API 版本统一处理
Flutter测试完成
HarmonyOS项目成功启动

一、项目背景与目标

在日常开发、接口调试和日志分析过程中，JSON 数据几乎无处不在。然而在移动端或鸿蒙设备上，缺少一个轻量、易用、跨平台一致的 JSON 工具。

本项目的目标包括：

  • 使用 Flutter 构建统一 UI

  • 在 HarmonyOS 6 设备上原生运行

  • 提供完整的 JSON 处理能力

    • JSON 格式化
    • JSON 压缩
    • JSON 合法性校验

  • 保持清晰的状态提示与错误反馈

在这里插入图片描述

二、整体架构设计

运行环境：Windows 10 / Windows 11
目标系统：HarmonyOS 6.0（API 22）
开发工具：DevEco Studio 6.x
Flutter 方案：基于 HarmonyOS Flutter 适配方案
适用人群：具备 Flutter 基础、希望探索鸿蒙生态的开发者

1. 页面结构划分

JSON 解析工具页面主要由三部分组成：

  1. 顶部操作区
    在这里插入图片描述

    • 格式化
    • 压缩
    • 验证
    • 清空

  2. 状态提示区
    在这里插入图片描述

    • 成功提示
    • 错误信息

  3. 主编辑区
    在这里插入图片描述

    • JSON 输入区域
    • 结果输出区域

页面整体采用 Scaffold + Column + Row 布局，保证在鸿蒙设备大屏、横屏场景下仍然具备良好的可读性。

三、核心页面实现（IntroPage）

在这里插入图片描述

页面入口采用 StatefulWidget，以便在 JSON 操作过程中动态更新状态信息。

class IntroPage extends StatefulWidget {
  const IntroPage({super.key});

  @override
  State<IntroPage> createState() => _IntroPageState();
}

1. 状态与控制器设计

final TextEditingController _inputController = TextEditingController();
final TextEditingController _outputController = TextEditingController();

String? _errorMessage;
String _statusMessage = '';

  • 使用 双 TextEditingController

    • 输入区：用户原始 JSON
    • 输出区：处理后的结果

  • errorMessage 与 statusMessage 互斥显示，避免信息混乱

在 HarmonyOS 设备上，文本编辑与光标行为与 Android/iOS 表现一致，Flutter 适配层无需额外处理。

2. 顶部功能按钮区

Wrap(
  spacing: 8,
  runSpacing: 8,
  children: [
    FilledButton.icon(
      onPressed: _formatJson,
      icon: const Icon(Icons.format_align_left),
      label: const Text('格式化'),
    ),
    FilledButton.icon(
      onPressed: _compressJson,
      icon: const Icon(Icons.compress),
      label: const Text('压缩'),
    ),
    FilledButton.icon(
      onPressed: _validateJson,
      icon: const Icon(Icons.check_circle),
      label: const Text('验证'),
    ),
    FilledButton.icon(
      onPressed: _clearAll,
      icon: const Icon(Icons.clear),
      label: const Text('清空'),
    ),
  ],
)

设计要点：

  • 使用 Wrap 而非 Row，在鸿蒙多尺寸设备上自动换行
  • 统一采用 FilledButton.icon，符合 Material 3 设计规范
  • 功能直观，无额外学习成本

3. 状态提示区设计

if (_statusMessage.isNotEmpty || _errorMessage != null)
  Container(
    width: double.infinity,
    padding: const EdgeInsets.all(12),
    color: _errorMessage != null
        ? theme.colorScheme.errorContainer
        : theme.colorScheme.primaryContainer,
    child: Text(
      _errorMessage ?? _statusMessage,
      textAlign: TextAlign.center,
    ),
  )
  • 成功与失败使用 不同语义色
  • 反馈即时，适合工具类应用高频操作场景
  • 在 HarmonyOS 深色/浅色模式下自动适配主题

四、输入 / 输出编辑卡片封装

为了减少重复代码，输入区与输出区抽象为统一组件：

Widget _buildInputOutputCard(
  BuildContext context, {
  required String title,
  required TextEditingController controller,
  bool readOnly = false,
  VoidCallback? onChanged,
})

核心特性

  • 使用 Card + TextField 组合

  • 支持多行、自动扩展

  • JSON 采用等宽字体（Monaco），提升可读性

  • 底部实时显示：

    • 字符数
    • 数据大小（bytes）
Text(
  '字符数: ${controller.text.length}, '
  '大小: ${JsonToolkit.getSizeInBytes(controller.text)} bytes',
)

这在调试接口请求体时非常实用。

五、JSON 处理核心逻辑

JSON 操作统一委托给 JsonToolkit，页面层只负责 UI 与状态管理。

1. JSON 格式化

void _formatJson() {
  final input = _inputController.text.trim();
  if (input.isEmpty) {
    _showError('请先输入JSON数据');
    return;
  }

  try {
    final formattedJson = JsonToolkit.format(input);
    _outputController.text = formattedJson;
    _showStatus('JSON格式化成功');
  } catch (e) {
    _showError(e.toString());
  }
}

2. JSON 压缩

void _compressJson() {
  final input = _inputController.text.trim();
  if (input.isEmpty) {
    _showError('请先输入JSON数据');
    return;
  }

  try {
    final compressedJson = JsonToolkit.compress(input);
    _outputController.text = compressedJson;
    _showStatus('JSON压缩成功');
  } catch (e) {
    _showError(e.toString());
  }
}

3. JSON 校验

void _validateJson() {
  final input = _inputController.text.trim();
  if (input.isEmpty) {
    _showError('请先输入JSON数据');
    return;
  }

  if (JsonToolkit.isValid(input)) {
    _showStatus('JSON格式正确');
  } else {
    final error = JsonToolkit.getValidationError(input);
    _showError('JSON格式错误: $error');
  }
}

这种 工具类 + UI 解耦 的设计方式，非常适合后期拓展：

  • JSON → YAML
  • JSON → Dart Model
  • JSON Path 查询

六、Flutter × HarmonyOS 6 实践总结

通过这个 JSON 解析工具，可以清晰地看到：

  1. Flutter 在 HarmonyOS 6 上具备完整 UI 与交互能力
  2. 工具类应用非常适合作为 Flutter 鸿蒙适配的切入点
  3. 合理的组件拆分与工具抽象，有助于长期维护
  4. Material 3 设计语言在鸿蒙系统中表现一致、稳定

本文以一个 JSON 解析工具为例，完整展示了 Flutter 在 HarmonyOS 6 环境下进行 App 开发的实际落地过程。从页面结构设计、组件封装，到 JSON 业务逻辑的解耦实现，可以看出 Flutter 在鸿蒙系统上已经具备较高的成熟度与可用性。通过合理的 UI 布局与状态管理，该工具在多尺寸鸿蒙设备上依然保持了良好的交互体验与视觉一致性。

在工程实践层面，采用“页面负责交互、工具类负责逻辑”的设计思路，不仅提升了代码可维护性，也为后续功能扩展（如 JSON 转模型、数据对比、格式转换等）预留了空间。同时，基于 Material 3 的组件体系在 HarmonyOS 6 上运行稳定，降低了跨平台适配成本。

总体而言，Flutter × HarmonyOS 6 已经能够支撑实际可用的工具型应用开发。对于希望在鸿蒙生态中实现多端复用、快速交付的开发者来说，这是一个值得投入和深入实践的技术组合。

如果你正在探索 Flutter + HarmonyOS 6 的真实落地方案，不妨从这样一个小而完整的工具 App 开始，逐步扩展到更复杂的业务场景。

# flutter # harmonyos # json
Logo
HarmonyOS开发者社区

讨论HarmonyOS开发技术，专注于API与组件、DevEco Studio、测试、元服务和应用上架分发等。

更多推荐

cover

React Native 鸿蒙跨平台开发：实现Excel数据表格

avatar HarmonyOS开发者社区
cover

Flutter 框架跨平台鸿蒙开发——Framework层Rendering子系统详解

avatar HarmonyOS开发者社区
cover

React Native 鸿蒙跨平台开发：虚拟列表代码实现加载

avatar HarmonyOS开发者社区