JSON格式化工具应用

---

欢迎加入开源鸿蒙跨平台社区：
https://openharmonycrossplatform.csdn.net

适配的第三方库地址：

• shared_preferences - https://pub.dev/packages/shared_preferences
• animations - https://pub.dev/packages/animations
• file_selector - https://pub.dev/packages/file_selector
• cross_file - https://pub.dev/packages/cross_file

一、项目概述

运行效果图

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 整体架构图

2.2 类图设计

2.3 页面导航流程

2.4 JSON处理流程

---

三、核心模块设计

3.1 数据模型设计

3.1.1 缩进样式枚举 (IndentStyle)

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)

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)

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值类型分布

3.2 页面结构设计

3.2.1 主页面布局

3.2.2 格式化页结构

3.2.3 工具箱页结构

3.3 格式化逻辑

3.4 语法高亮逻辑

---

四、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格式化实现

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压缩实现

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 语法高亮实现

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排序实现

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扁平化实现

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 格式化流程

6.2 历史记录流程

6.3 工具操作流程

---

七、扩展功能规划

7.1 后续版本规划

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 运行命令

# 查看可用设备
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数据处理助手

---