鸿蒙flutter第三方库适配 - JSON格式化工具应用

见山是山-见水是水2026-04-15 8:32

JSON格式化工具应用

欢迎加入开源鸿蒙跨平台社区：

https://openharmonycrossplatform.csdn.net

适配的第三方库地址：

一、项目概述

运行效果图



1.1 应用简介

JSON格式化工具是一款专业的JSON数据处理应用，提供JSON格式化、语法高亮、压缩解压、格式校验等功能。用户可以快速美化JSON数据、实时校验格式正确性、查看数据统计信息，是开发者日常工作的得力助手。

应用以优雅的紫色为主色调，象征专业与精致。涵盖格式化、历史记录、工具箱、设置四大模块。用户可以输入JSON数据进行格式化、压缩、排序、扁平化等操作，支持语法高亮显示和实时格式校验。

1.2 核心功能

功能模块 功能描述 实现方式
JSON格式化 美化JSON数据格式 JsonEncoder
语法高亮 不同类型颜色区分 文本解析
压缩解压 JSON压缩与格式化 数据处理
格式校验 实时校验JSON有效性 解析验证
数据统计 字符数、键数、深度 递归计算
历史记录 保存格式化历史 本地存储
JSON排序 按键名排序JSON对象 递归排序
扁平化处理 将嵌套JSON扁平化 路径转换

1.3 缩进样式定义

序号 样式名称 描述 适用场景
1 2空格 每级缩进2个空格 常用格式
2 4空格 每级缩进4个空格 标准格式
3 Tab 每级缩进1个制表符 紧凑格式

1.4 JSON值类型定义

序号 类型名称 颜色 示例
1 字符串 绿色 "hello"
2 数字 蓝色 123, 3.14
3 布尔 橙色 true, false
4 空值 灰色 null
5 键 粉色 "name":
6 对象 紫色 {...}
7 数组 青色 [...]

1.5 技术栈

技术领域 技术选型 版本要求
开发框架 Flutter >= 3.0.0
编程语言 Dart >= 2.17.0
设计规范 Material Design 3 -
状态管理 StatefulWidget -
数据存储 SharedPreferences >= 2.0.0
日期格式 intl >= 0.18.0
目标平台 鸿蒙OS / Web API 21+

1.6 项目结构

复制代码 
lib/
└── main_json_formatter.dart
    ├── JsonFormatterApp                  # 应用入口
    ├── IndentStyle                       # 缩进样式枚举
    ├── JsonValueType                     # JSON值类型枚举
    ├── JsonHistory                       # 历史记录模型
    ├── JsonFormatterHomePage             # 主页面（底部导航）
    ├── _buildFormatterPage               # 格式化页
    ├── _buildHistoryPage                 # 历史记录页
    ├── _buildToolsPage                   # 工具箱页
    ├── _buildSettingsPage                # 设置页
    ├── _formatJson                       # 格式化JSON
    ├── _compressJson                     # 压缩JSON
    ├── _sortJson                         # 排序JSON
    └── _flattenJson                      # 扁平化JSON

二、系统架构

2.1 整体架构图

Data Layer
Business Layer
Presentation Layer
主页面

JsonFormatterHomePage
格式化页
历史记录页
工具箱页
设置页
输入面板
输出面板
操作栏
历史列表
历史操作
统计信息
工具列表
格式化引擎

FormatterEngine
校验引擎

ValidatorEngine
高亮引擎

HighlightEngine
工具引擎

ToolsEngine
JsonHistory

历史记录
IndentStyle

缩进样式

2.2 类图设计

uses
manages
highlights
JsonFormatterApp
+Widget build()
<<enumeration>>
IndentStyle
+String label
+int spaces
+twoSpaces()
+fourSpaces()
+tab()
<<enumeration>>
JsonValueType
+String label
+Color color
+string()
+number()
+boolean()
+nullValue()
+key()
JsonHistory
+String id
+String content
+String preview
+DateTime createdAt
+bool isValid
+fromJson()
+toJson()
JsonFormatterHomePage
+TextEditingController inputController
+TextEditingController outputController
+List<JsonHistory> history
+IndentStyle indentStyle
+bool showLineNumbers
+bool autoFormat
+formatJson()
+compressJson()
+copyOutput()
+pasteFromClipboard()

2.3 页面导航流程

输入JSON
粘贴
格式化
压缩
是
否
复制
保存
清空
应用启动
格式化页面
用户操作
实时校验
从剪贴板粘贴
格式化JSON
压缩JSON
格式正确?
显示有效状态
显示错误信息
显示格式化结果
显示压缩结果
语法高亮
用户操作
复制到剪贴板
保存到历史
清空输入输出
切换到历史页
选择历史记录

2.4 JSON处理流程

输出框 格式化引擎 校验引擎 输入框 用户 输出框 格式化引擎 校验引擎 输入框 用户 alt [JSON有效] [JSON无效] 输入JSON文本 发送文本 返回有效状态 点击格式化 解析JSON 应用缩进样式 显示格式化结果 语法高亮渲染 显示美化后的JSON 返回错误信息 显示错误提示

三、核心模块设计

3.1 数据模型设计

3.1.1 缩进样式枚举 (IndentStyle)
dart 复制代码 
enum IndentStyle {
  twoSpaces(label: '2空格', spaces: 2),
  fourSpaces(label: '4空格', spaces: 4),
  tab(label: 'Tab', spaces: -1);

  final String label;
  final int spaces;
  const IndentStyle({required this.label, required this.spaces});
}
3.1.2 JSON值类型枚举 (JsonValueType)
dart 复制代码 
enum JsonValueType {
  string(label: '字符串', color: Color(0xFF4CAF50)),
  number(label: '数字', color: Color(0xFF2196F3)),
  boolean(label: '布尔', color: Color(0xFFFF9800)),
  nullValue(label: '空值', color: Color(0xFF9E9E9E)),
  key(label: '键', color: Color(0xFFE91E63));

  final String label;
  final Color color;
  const JsonValueType({required this.label, required this.color});
}
3.1.3 历史记录模型 (JsonHistory)
dart 复制代码 
class JsonHistory {
  final String id;
  final String content;
  final String preview;
  final DateTime createdAt;
  final bool isValid;

  const JsonHistory({
    required this.id,
    required this.content,
    required this.preview,
    required this.createdAt,
    required this.isValid,
  });

  factory JsonHistory.fromJson(Map<String, dynamic> json);
  Map<String, dynamic> toJson();
}
3.1.4 JSON值类型分布

45% 25% 15% 10% 3% 2% JSON数据类型分布示例 字符串 数字 对象 数组 布尔 空值

3.2 页面结构设计

3.2.1 主页面布局

JsonFormatterHomePage
IndexedStack
格式化页
历史记录页
工具箱页
设置页
NavigationBar
格式化 Tab
历史 Tab
工具 Tab
设置 Tab

3.2.2 格式化页结构

格式化页
状态栏
主内容区
操作栏
有效性状态
字符统计
输入面板
输出面板
输入框
粘贴按钮
清空按钮
输出显示
复制按钮
语法高亮
缩进选择
格式化按钮
压缩按钮
保存按钮

3.2.3 工具箱页结构

工具箱页
统计卡片
工具列表
颜色说明
字符数
行数
键数量
嵌套深度
JSON排序
JSON转换
扁平化
反扁平化

3.3 格式化逻辑

是
否
否
是
获取输入文本
文本为空?
清空输出
解析JSON
解析成功?
显示错误信息
获取缩进样式
生成缩进字符串
格式化JSON
计算统计数据
显示格式化结果
语法高亮渲染
更新状态

3.4 语法高亮逻辑

引号
数字
字母
其他
获取格式化文本
按行分割
遍历每行
显示行号
解析行内容
字符类型
解析字符串/键
解析数字
解析布尔/空值
普通字符
应用对应颜色
构建TextSpan
渲染高亮行

四、UI设计规范

4.1 配色方案

应用以优雅的紫色为主色调，象征专业与精致：

颜色类型 色值 用途
主色 #7B1FA2 (Purple) 导航、主题元素
辅助色 #9C27B0 卡片背景
第三色 #BA68C8 标签背景
强调色 #E1BEE7 分隔线
背景色 #FAFAFA 页面背景
卡片背景 #FFFFFF 信息卡片
成功色 #4CAF50 有效状态
错误色 #F44336 错误状态

4.2 JSON类型配色

JSON类型 色值 视觉效果
字符串 #4CAF50 绿色
数字 #2196F3 蓝色
布尔 #FF9800 橙色
空值 #9E9E9E 灰色
键 #E91E63 粉色

4.3 字体规范

元素 字号 字重 颜色
页面标题 24px Bold 主色
面板标题 14px Bold #000000
JSON文本 13px Regular 等宽字体
提示文字 12px Regular #666666
错误信息 12px Regular 错误色
行号 12px Regular #9E9E9E

4.4 组件规范

4.4.1 格式化界面
复制代码 
┌─────────────────────────────────────┐
│  ✓ JSON有效      输入: 256 输出: 512 │
├─────────────────────────────────────┤
│  ┌─────────────┐ ┌─────────────┐   │
│  │ 输入        │ │ 输出        │   │
│  │ [粘贴][清空]│ │ [复制]      │   │
│  ├─────────────┤ ├─────────────┤   │
│  │ {           │ │ 1  {        │   │
│  │ "name":"xx" │ │ 2    "name":│   │
│  │ }           │ │ 3  }        │   │
│  └─────────────┘ └─────────────┘   │
├─────────────────────────────────────┤
│  [2空格 ▼]  [格式化] [压缩] [保存]  │
└─────────────────────────────────────┘
4.4.2 历史记录卡片
复制代码 
┌─────────────────────────────────────┐
│  ✓ {"name":"test","age":25}...      │
│     2024-03-15 10:30:00        🗑️  │
└─────────────────────────────────────┘
4.4.3 统计卡片
复制代码 
┌─────────────────────────────────────┐
│  JSON统计                           │
│                                     │
│  字符数          512                │
│  行数            25                 │
│  键数量          12                 │
│  嵌套深度        3                  │
└─────────────────────────────────────┘
4.4.4 颜色说明卡片
复制代码 
┌─────────────────────────────────────┐
│  颜色说明                           │
│                                     │
│  ■ 字符串  ■ 数字  ■ 布尔  ■ 空值   │
│  ■ 键                              │
└─────────────────────────────────────┘

五、核心功能实现

5.1 JSON格式化实现

dart 复制代码 
void _formatJson() {
  final input = _inputController.text.trim();
  if (input.isEmpty) {
    setState(() {
      _outputController.clear();
      _errorMessage = null;
      _isValid = false;
    });
    return;
  }

  try {
    final parsed = jsonDecode(input);
    final indent = _indentStyle.spaces == -1
        ? '\t'
        : ' ' * _indentStyle.spaces;
    final formatted = JsonEncoder.withIndent(indent).convert(parsed);
    
    setState(() {
      _outputController.text = formatted;
      _errorMessage = null;
      _isValid = true;
    });
  } catch (e) {
    setState(() {
      _errorMessage = _parseError(e.toString());
      _isValid = false;
    });
  }
}

5.2 JSON压缩实现

dart 复制代码 
void _compressJson() {
  final input = _inputController.text.trim();
  if (input.isEmpty) return;

  try {
    final parsed = jsonDecode(input);
    final compressed = jsonEncode(parsed);
    setState(() {
      _outputController.text = compressed;
      _isValid = true;
    });
  } catch (e) {
    setState(() {
      _errorMessage = _parseError(e.toString());
      _isValid = false;
    });
  }
}

5.3 语法高亮实现

dart 复制代码 
Widget _buildHighlightedLine(String line) {
  final spans = <TextSpan>[];
  
  for (int i = 0; i < line.length; i++) {
    final char = line[i];
    
    if (char == '"') {
      // 解析字符串或键
      int endQuote = line.indexOf('"', i + 1);
      if (endQuote != -1) {
        final quoted = line.substring(i, endQuote + 1);
        bool isKey = endQuote + 1 < line.length && line[endQuote + 1] == ':';
        
        spans.add(TextSpan(
          text: quoted,
          style: TextStyle(
            color: isKey ? JsonValueType.key.color : JsonValueType.string.color,
          ),
        ));
        i = endQuote;
      }
    } else if (RegExp(r'[0-9-]').hasMatch(char)) {
      // 解析数字
      // ...
    }
    // 其他类型处理...
  }
  
  return Text.rich(TextSpan(children: spans));
}

5.4 JSON排序实现

dart 复制代码 
dynamic _sortObject(dynamic data) {
  if (data is Map) {
    final sortedKeys = data.keys.map((k) => k.toString()).toList()..sort();
    final sortedMap = <String, dynamic>{};
    for (var key in sortedKeys) {
      sortedMap[key] = _sortObject(data[key]);
    }
    return sortedMap;
  } else if (data is List) {
    return data.map((item) => _sortObject(item)).toList();
  }
  return data;
}

5.5 JSON扁平化实现

dart 复制代码 
void _flattenObject(dynamic data, String prefix, Map<String, dynamic> result) {
  if (data is Map) {
    data.forEach((key, value) {
      final newKey = prefix.isEmpty ? key.toString() : '$prefix.$key';
      _flattenObject(value, newKey, result);
    });
  } else if (data is List) {
    for (int i = 0; i < data.length; i++) {
      final newKey = '$prefix[$i]';
      _flattenObject(data[i], newKey, result);
    }
  } else {
    result[prefix] = data;
  }
}

六、交互设计

6.1 格式化流程

输出框 格式化器 校验器 输入框 用户 输出框 格式化器 校验器 输入框 用户 alt [格式正确] [格式错误] 输入JSON 实时校验 显示有效状态 点击格式化 显示结果 显示错误位置

6.2 历史记录流程

点击保存
创建历史记录
截取预览文本
保存到列表
持久化存储
点击历史记录
加载内容
填充到输入框
自动格式化
删除历史记录
从列表移除
更新持久化存储

6.3 工具操作流程

点击格式化
点击排序
点击扁平化
点击复制
输入JSON
格式化
显示结果
排序
扁平化
复制

七、扩展功能规划

7.1 后续版本规划

2024-01-07 2024-01-14 2024-01-21 2024-01-28 2024-02-04 2024-02-11 2024-02-18 2024-02-25 2024-03-03 2024-03-10 2024-03-17 2024-03-24 基础UI框架 格式化功能 语法高亮 历史记录 工具箱功能 设置选项 文件导入导出 JSON Path查询 格式转换 V1.0 基础版本 V1.1 增强版本 V1.2 进阶版本 JSON格式化工具开发计划

7.2 功能扩展建议

7.2.1 文件操作

文件功能：

  • 导入JSON文件
  • 导出格式化结果
  • 批量处理文件
  • 拖拽上传文件
7.2.2 高级功能

高级功能：

  • JSON Path查询
  • JSON Schema验证
  • JSON Diff比较
  • JSON转其他格式
7.2.3 编辑功能

编辑功能：

  • 树形编辑器
  • 折叠展开节点
  • 查找替换功能
  • 撤销重做操作

八、注意事项

8.1 开发注意事项

  1. 性能优化：大JSON文件处理时注意内存占用

  2. 错误处理：提供清晰的错误位置和提示信息

  3. 用户体验：实时反馈格式校验结果

  4. 数据安全：敏感数据不应保存到历史记录

  5. 兼容性：支持各种JSON格式变体

8.2 常见问题

问题 原因 解决方案
格式化失败 JSON格式错误 检查引号、括号匹配
语法高亮不显示 输出为空 先格式化JSON
历史记录丢失 应用数据被清除 定期备份重要数据
复制失败 输出为空 先格式化JSON
排序结果异常 数据类型不一致 检查数据结构

8.3 使用技巧

📝 JSON格式化工具使用技巧 📝

格式化技巧

  • 使用自动格式化提高效率
  • 选择合适的缩进样式
  • 注意JSON格式规范
  • 及时保存常用JSON

校验技巧

  • 关注错误位置提示
  • 检查引号是否闭合
  • 验证括号是否匹配
  • 注意数据类型正确

工具使用

  • 排序便于查找字段
  • 扁平化便于分析结构
  • 历史记录快速恢复
  • 统计信息了解数据规模

九、运行说明

9.1 环境要求

环境 版本要求
Flutter SDK >= 3.0.0
Dart SDK >= 2.17.0
鸿蒙OS API 21+
Web浏览器 Chrome 90+

9.2 运行命令

bash 复制代码 
# 查看可用设备
flutter devices

# 运行到Web服务器
flutter run -d web-server -t lib/main_json_formatter.dart --web-port 8147

# 运行到鸿蒙设备
flutter run -d 127.0.0.1:5555 lib/main_json_formatter.dart

# 代码分析
flutter analyze lib/main_json_formatter.dart

十、总结

JSON格式化工具是一款专业的JSON数据处理应用，提供JSON格式化、语法高亮、压缩解压、格式校验等功能。应用支持多种缩进样式，实时校验JSON有效性，提供语法高亮显示，帮助开发者快速处理JSON数据。

核心功能涵盖JSON格式化、语法高亮、压缩解压、格式校验、数据统计、历史记录、JSON排序、扁平化处理八大模块。用户可以输入JSON数据进行格式化、压缩、排序、扁平化等操作，支持语法高亮显示和实时格式校验，是开发者日常工作的得力助手。

应用采用 Material Design 3 设计规范，以优雅的紫色为主色调，象征专业与精致。通过本应用，希望能够为开发者提供便捷的JSON处理解决方案，提升开发效率。

JSON格式化工具------专业的JSON数据处理助手

相关推荐
lpfasd1232 小时前
Flutter 2026：从跨平台UI到AI原生全栈开发平台的蜕变
flutter·ui·ai-native
互联网散修2 小时前
鸿蒙应用开发UI基础第三十九节：触摸事件与手势交互全解 - 从基础解析到实战演示
交互·harmonyos·手势与触摸
「、皓子~2 小时前
海狸IM技术升级：从Uniapp到Flutter的跨平台重构之路
flutter·重构·golang·uni-app·im·社交软件
张风捷特烈2 小时前
GetX 之死 | 8 年从未用过，以后将不会再用
android·前端·flutter
梁山好汉（Ls_man）2 小时前
鸿蒙应用如何新建页面
华为·harmonyos·鸿蒙·arkui
想你依然心痛2 小时前
HarmonyOS 5.0金融科技开发实战：构建硬件级安全数字钱包与分布式智能支付系统
安全·金融·harmonyos
Dontla2 小时前
JWT认证流程（JSON Web Token）
前端·数据库·json
「、皓子~3 小时前
Flutter赋能海狸IM：打造高性能跨平台移动体验
flutter
HwJack203 小时前
HarmonyOS UI 开发中的 EventHub：终结“回调地狱”的通信轻骑兵
ui·华为·harmonyos
热门推荐
012026年4月技术前沿：AI大模型爆发、智能体革命与量子安全新纪元02GitHub 镜像站点03一周AI热点速览（2026.03.31-04.06）：GPT-6曝光、谷歌开源Gemma 4、资本狂飙与模型军备竞赛04GPT-6核心能力解析及与现有主流大模型对比05基于 Docker 部署 Hermes Agent 并接入飞书机器人的完整指南06零成本！Ollama本地部署国产大模型全指南（支持Kimi-K2.5/GLM-5/Qwen，新手秒上手）07免费！不限量！用opencode接入英伟达（NVIDIA）大模型，轻松打造你的 AI 编程助手08AI Weekly | 2026年4月第二周 · GitHub热门项目与AI发展趋势深度解析09CodeBuddy与WorkBuddy深度对比：腾讯两款AI工具差异及实操指南10从限购到畅通：GLM-5.1 Coding Plan接入攻略