在这里插入图片描述

JSON格式化工具是开发者日常工作中不可缺少的工具，它能够美化、压缩和验证JSON数据。一个好用的JSON工具不仅要功能完善，还要有良好的用户体验。

JSON处理的核心架构

JSON格式化工具需要处理用户输入的JSON文本，进行解析、验证和格式化。让我们看看页面的基本结构：

import 'dart:convert';
import 'package:flutter/material.dart';
import 'package:flutter/services.dart';
import 'package:flutter_screenutil/flutter_screenutil.dart';
import 'package:get/get.dart';

class _JsonFormatterPageState extends State<JsonFormatterPage> {
  final TextEditingController _inputController = TextEditingController();
  String formattedJson = '';
  String errorMessage = '';
  bool isValid = false;

状态管理的设计包含了JSON处理的所有关键信息。输入控制器管理用户输入，formattedJson存储格式化结果，errorMessage记录解析错误，isValid标识JSON是否有效。在我的开发经验中，这种清晰的状态分离让JSON工具的功能实现变得更加可控和可维护。

实时JSON验证的实现

JSON的验证需要实时进行，让用户能够立即发现语法错误：

@override
void initState() {
  super.initState();
  _inputController.addListener(_formatJson);
}

void _formatJson() {
  setState(() {
    errorMessage = '';
    isValid = false;
    formattedJson = '';
    
    if (_inputController.text.trim().isEmpty) {
      return;
    }

监听器的设置确保了任何输入变化都会触发重新验证和格式化。这种实时反馈让用户能够立即发现JSON语法问题，大大提升了调试效率。在实际项目中，我发现这种即时验证能够避免很多因为格式错误导致的API调用失败。

    try {
      final dynamic jsonObject = json.decode(_inputController.text);
      const encoder = JsonEncoder.withIndent('  ');
      formattedJson = encoder.convert(jsonObject);
      isValid = true;
    } catch (e) {
      errorMessage = 'JSON格式错误: $e';
    }
  });
}

JSON解析和格式化使用了Dart标准库的json.decode和JsonEncoder。JsonEncoder.withIndent(' ')使用两个空格作为缩进，这是JSON格式化的标准做法，既保持了可读性又不会过度占用空间。

异常处理捕获了JSON解析错误，并以用户友好的方式显示。这种设计让用户能够快速定位JSON语法问题，而不是面对晦涩的系统错误信息。

多功能操作按钮的设计

JSON工具需要提供多种操作选项：

appBar: AppBar(
  title: const Text('JSON格式化工具'),
  backgroundColor: Theme.of(context).primaryColor,
  foregroundColor: Colors.white,
  actions: [
    IconButton(
      icon: const Icon(Icons.content_paste),
      onPressed: _pasteFromClipboard,
      tooltip: '粘贴',
    ),
    IconButton(
      icon: const Icon(Icons.copy),
      onPressed: _copyToClipboard,
      tooltip: '复制',
    ),
    IconButton(
      icon: const Icon(Icons.clear),
      onPressed: _clearAll,
      tooltip: '清空',
    ),
  ],
),

工具栏按钮提供了常用的操作功能。粘贴按钮让用户可以快速导入剪贴板中的JSON数据，复制按钮方便导出格式化结果，清空按钮提供了快速重置功能。这种设计灵感来自于主流的代码编辑器，让用户感到熟悉和便捷。

JSON压缩功能的实现

除了美化，JSON工具还需要提供压缩功能：

void _minifyJson() {
  if (!isValid) return;
  
  try {
    final dynamic jsonObject = json.decode(_inputController.text);
    setState(() {
      formattedJson = json.encode(jsonObject);
    });
  } catch (e) {
    // Handle error
  }
}

压缩功能通过直接使用json.encode()实现，它会生成没有多余空格和换行的紧凑JSON。这个功能在需要减少数据传输大小时非常有用，特别是在移动应用的网络请求中。

输入区域的用户体验设计

JSON输入区域需要提供良好的编辑体验：

Container(
  height: 200.h,
  child: TextFormField(
    controller: _inputController,
    decoration: InputDecoration(
      border: const OutlineInputBorder(),
      hintText: '粘贴或输入JSON数据...',
      suffixIcon: isValid 
        ? const Icon(Icons.check_circle, color: Colors.green)
        : errorMessage.isNotEmpty 
          ? const Icon(Icons.error, color: Colors.red)
          : null,
    ),
    maxLines: null,
    expands: true,
    style: TextStyle(
      fontFamily: 'monospace',
      fontSize: 14.sp,
    ),
  ),
),

多行输入通过maxLines: null和expands: true实现，让用户可以输入大段的JSON数据。等宽字体提高了JSON结构的可读性，这对于复杂的嵌套JSON特别重要。

状态图标提供了即时的视觉反馈，绿色勾号表示JSON有效，红色错误图标表示存在语法错误。这种直观的状态指示能够让用户快速了解当前输入的有效性。

错误信息的详细显示

当JSON存在语法错误时，需要提供详细的错误信息：

if (errorMessage.isNotEmpty) ...[
  SizedBox(height: 8.h),
  Container(
    padding: EdgeInsets.all(12.w),
    decoration: BoxDecoration(
      color: Colors.red[50],
      borderRadius: BorderRadius.circular(8),
      border: Border.all(color: Colors.red[200]!),
    ),
    child: Row(
      children: [
        Icon(Icons.error, color: Colors.red, size: 20.sp),
        SizedBox(width: 8.w),
        Expanded(
          child: Text(
            errorMessage,
            style: TextStyle(
              color: Colors.red[700],
              fontSize: 14.sp,
            ),
          ),
        ),
      ],
    ),
  ),
],

错误容器使用了红色主题的设计，包含图标和文字说明。这种设计让错误信息更加醒目，帮助用户快速识别问题。浅红色背景和深红色边框的搭配既突出了错误状态，又不会过于刺眼。

格式化结果的展示

格式化后的JSON需要以易读的方式展示：

Expanded(
  child: Container(
    width: double.infinity,
    padding: EdgeInsets.all(16.w),
    decoration: BoxDecoration(
      color: Colors.grey[100],
      borderRadius: BorderRadius.circular(8),
      border: Border.all(color: Colors.grey[300]!),
    ),
    child: formattedJson.isEmpty
      ? Center(
          child: Text(
            '输入有效的JSON数据查看格式化结果',
            style: TextStyle(
              color: Colors.grey[600],
              fontSize: 14.sp,
            ),
          ),
        )
      : SingleChildScrollView(
          child: SelectableText(
            formattedJson,
            style: TextStyle(
              fontFamily: 'monospace',
              fontSize: 14.sp,
            ),
          ),
        ),
  ),
),

结果容器使用了与输入区域相似的样式，保持了视觉一致性。SelectableText让用户可以选择和复制部分内容，提升了使用便利性。这种设计考虑了用户可能只需要复制JSON中某个特定字段的场景。

剪贴板操作的实现

剪贴板功能是JSON工具的重要特性：

void _copyToClipboard() {
  if (formattedJson.isNotEmpty) {
    Clipboard.setData(ClipboardData(text: formattedJson));
    Get.snackbar(
      '成功',
      'JSON已复制到剪贴板',
      snackPosition: SnackPosition.BOTTOM,
    );
  }
}

void _pasteFromClipboard() async {
  final clipboardData = await Clipboard.getData('text/plain');
  if (clipboardData?.text != null) {
    _inputController.text = clipboardData!.text!;
  }
}

异步粘贴操作处理了剪贴板数据的获取。复制操作提供了即时反馈，让用户知道操作已成功完成。在实际使用中，这种明确的反馈能够增强用户的操作信心。

示例数据的提供

为了方便用户测试，我们提供了示例JSON数据：

void _useExample() {
  const exampleJson = '''
{
  "name": "张三",
  "age": 30,
  "city": "北京",
  "skills": ["Flutter", "Dart", "JavaScript"],
  "address": {
    "street": "中关村大街",
    "number": 123,
    "zipCode": "100080"
  },
  "isActive": true,
  "projects": [
    {
      "id": 1,
      "title": "移动应用开发",
      "status": "进行中"
    }
  ]
}''';
  _inputController.text = exampleJson;
}

示例数据包含了各种JSON数据类型：字符串、数字、布尔值、数组和对象。这个完整的示例帮助用户快速了解工具的功能，同时也可以作为JSON结构的参考模板。

操作按钮的动态显示

根据当前状态动态显示操作按钮：

Row(
  children: [
    Expanded(
      child: Text(
        '格式化结果',
        style: TextStyle(
          fontSize: 18.sp,
          fontWeight: FontWeight.bold,
        ),
      ),
    ),
    if (isValid) ...[
      TextButton(
        onPressed: _minifyJson,
        child: const Text('压缩'),
      ),
      TextButton(
        onPressed: _formatJson,
        child: const Text('美化'),
      ),
    ],
  ],
),

条件显示确保操作按钮只在JSON有效时出现，避免了无效操作的困扰。美化和压缩按钮让用户可以在不同的格式间快速切换，满足不同场景的需求。

清空功能的实现

提供快速清空所有内容的功能：

void _clearAll() {
  setState(() {
    _inputController.clear();
    formattedJson = '';
    errorMessage = '';
    isValid = false;
  });
}

清空操作重置了所有相关状态，让用户可以快速开始新的JSON处理任务。这种一键重置的功能在处理多个JSON文件时特别有用。

输入提示的用户引导

输入框提供了清晰的使用指导：

hintText: '粘贴或输入JSON数据...',

提示文本简洁明了地说明了工具的使用方法，降低了新用户的学习成本。这种引导性的设计对于工具类应用特别重要。

响应式布局的考虑

界面布局需要适应不同的屏幕尺寸：

Padding(
  padding: EdgeInsets.all(16.w),
  child: Column(
    crossAxisAlignment: CrossAxisAlignment.start,
    children: [
      Text(
        '输入JSON',
        style: TextStyle(
          fontSize: 18.sp,
          fontWeight: FontWeight.bold,
        ),
      ),

响应式设计使用了flutter_screenutil库来适配不同屏幕尺寸。这种设计确保了应用在各种设备上都能提供一致的用户体验。

总结

通过精心设计的JSON格式化工具，我们为开发者提供了一个功能完善、易于使用的JSON处理工具。实时验证让用户能够立即发现语法错误，多种操作模式满足了不同的使用需求，剪贴板集成提升了工作效率，友好的错误提示帮助用户快速定位问题。

JSON格式化工具虽然功能看似简单，但在实际开发中却是不可或缺的。良好的工具设计不仅能提升工作效率，还能减少因为格式问题导致的错误，让开发过程更加顺畅。在我的开发实践中，这样的工具极大地提升了API调试和数据处理的效率，特别是在处理复杂嵌套JSON结构的时候。

实际应用价值体现在日常开发的各个环节。无论是调试API响应、配置文件编辑，还是数据格式转换，JSON格式化工具都能够提供即时的帮助和验证。这种工具化的思维方式，正是现代软件开发追求效率和准确性的重要体现。

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

# flutter # json # javascript
Logo
开源鸿蒙跨平台开发者社区

开源鸿蒙跨平台开发社区汇聚开发者与厂商，共建“一次开发，多端部署”的开源生态，致力于降低跨端开发门槛，推动万物智联创新。

更多推荐

cover

Flutter 框架跨平台鸿蒙开发——Card网格布局

avatar 开源鸿蒙跨平台开发者社区
cover

Flutter 框架跨平台鸿蒙开发——Icon综合应用

avatar 开源鸿蒙跨平台开发者社区
cover

Flutter 框架跨平台鸿蒙开发——Card交互设计

avatar 开源鸿蒙跨平台开发者社区