【flutter for open harmony】第三方库Flutter 鸿蒙版 JSON格式化 实战指南（适配 1.0.0）✨

Flutter 三方库 cached_network_image 的鸿蒙化适配与实战指南
欢迎加入开源鸿蒙跨平台社区： https://openharmonycrossplatform.csdn.net

本文详细介绍如何在Flutter鸿蒙应用中实现JSON格式化功能，支持格式化和压缩。

一、前言

JSON格式化是开发中常用的工具，用于美化和压缩JSON数据。本文将带领大家使用Flutter开发一个JSON格式化应用。

二、效果展示

2.1 功能特性

功能	描述
JSON格式化	美化JSON显示
JSON压缩	压缩JSON去除空白
错误提示	显示JSON格式错误
一键复制	复制格式化结果

三、项目背景与目标

3.1 项目背景

在API调试、数据查看中，JSON格式化是必备工具。

3.2 项目目标

• 实现JSON格式化
• 实现JSON压缩
• 提供错误提示

四、技术架构设计

4.1 核心技术

• json: JSON编解码库
• JsonEncoder: JSON编码器
• TextField: 文本输入

4.2 实现原理

使用Dart的json库解析和编码JSON，通过JsonEncoder实现格式化输出。

五、详细实现

5.1 Flutter端实现

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

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

  @override
  State<JsonFormatterPage> createState() => _JsonFormatterPageState();
}

class _JsonFormatterPageState extends State<JsonFormatterPage> {
  final TextEditingController _inputController = TextEditingController();
  final TextEditingController _outputController = TextEditingController();

  void _format() {
    try {
      final decoded = json.decode(_inputController.text);
      final formatted = const JsonEncoder.withIndent('  ').convert(decoded);
      _outputController.text = formatted;
    } catch (e) {
      // 错误处理
    }
  }

  @override
  Widget build(BuildContext context) {
    return Scaffold(
      appBar: AppBar(title: const Text('JSON格式化')),
      body: Column(
        children: [
          TextField(controller: _inputController),
          ElevatedButton(onPressed: _format, child: const Text('格式化')),
          TextField(controller: _outputController, readOnly: true),
        ],
      ),
    );
  }
}

5.2 UI界面实现

UI采用Material Design 3风格，左右并排显示输入和输出。

六、核心功能解析

6.1 JSON格式化

使用JsonEncoder格式化：

final formatted = const JsonEncoder.withIndent('  ').convert(decoded);

6.2 JSON压缩

直接编码不添加缩进：

final compressed = json.encode(decoded);

七、实际应用场景

• API调试：查看API返回的JSON
• 数据查看：美化JSON数据
• 配置编辑：编辑JSON配置文件

八、优化建议

1. 语法高亮：添加JSON语法高亮
2. 树形展示：树形结构展示JSON
3. 历史记录：保存格式化历史

九、常见问题与解决方案

9.1 格式错误

问题：JSON格式不正确

解决方案：显示详细的错误信息

9.2 大文件处理

问题：大JSON文件卡顿

解决方案：使用异步处理

十、总结

本文详细介绍了Flutter鸿蒙JSON格式化的实现，包括格式化、压缩等核心技术。通过本实例，掌握了json库的使用方法。

十一、参考资料

• Dart json库
• JSON格式规范