Flutter JSON数据压缩展示插件json_shrink_widget的使用

Flutter JSON数据压缩展示插件json_shrink_widget的使用

引言

JSON Viewer 是一个用于格式化和显示 JSON 数据的 Flutter 小部件，支持展开和折叠 JSON 节点。它主要用于在应用程序中查看 API 响应数据。

Alt

安装

在 pubspec.yaml 文件中添加依赖项：

dependencies:
  json_shrink_widget: ^1.2.0

基本用法

最简单的使用方法：

JsonShrinkWidget(
  json: jsonString  // 支持 String, Map 和 List 类型
)

高级配置

JsonShrinkWidget 支持以下配置选项：

  • shrink: bool - 是否默认折叠，默认为 false
  • deep: int - JSON 遍历深度级别
  • indentation: String - 缩进字符
  • style: JsonShrinkStyle - 样式配置
  • deepShrink: int - 默认折叠级别
  • showNumber: bool - 是否显示数组/对象元素数量
  • urlSpanBuilder: Function - 自定义 URL 链接显示样式

样式配置示例：

JsonShrinkWidget(
  json: jsonString,
  shrink: true,  // 默认折叠
  deep: 3,       // 遍历 3 层
  indentation: "  ",  // 使用 2 个空格缩进
  style: JsonShrinkStyle(
    // 自定义样式
    keyStyle: TextStyle(color: Colors.blue),
    valueStyle: TextStyle(color: Colors.black),
    symbolStyle: TextStyle(color: Colors.grey)
  ),
  showNumber: true  // 显示元素数量
)

功能特点

  1. 支持多种数据类型

    • JSON 字符串
    • Map
    • List

  2. 灵活的显示控制

    • 点击折叠/展开 JSON 节点
    • 设置默认折叠级别
    • 自定义缩进样式

  3. 用户友好的视觉效果

    • 语法高亮
    • 对齐格式化
    • 可选的元素数量显示

  4. 自定义配置

    • 样式定制
    • URL 链接处理
    • 缩进控制

示例

示例 1：基本 JSON 显示

String jsonStr = '''
{
  "name": "JSON Viewer",
  "version": "1.2.0",
  "author": "infinity"
}
''';

JsonShrinkWidget(
  json: jsonStr
)

示例 2：样式配置

JsonShrinkWidget(
  json: jsonData,
  style: JsonShrinkStyle(
    keyStyle: TextStyle(
      color: Colors.blue,
      fontWeight: FontWeight.bold
    ),
    valueStyle: TextStyle(
      color: Colors.black87
    )
  )
)

示例 3：显示数组元素数量

JsonShrinkWidget(
  json: listData,
  showNumber: true,  // 显示数组长度
  shrink: true      // 默认折叠
)

重要提示

  1. 输入的 JSON 字符串必须是有效的 JSON 格式。
  2. 建议根据数据大小设置适当的遍历深度（deep 参数）。
  3. 对于大型 JSON 数据，建议默认使用折叠模式。
  4. 样式配置完全支持根据应用主题进行自定义。

常见问题

1. JSON 解析失败

  • 检查 JSON 字符串格式是否正确
  • 确认字符串编码为 UTF-8

2. 性能问题

  • 合理控制 deep 参数
  • 对于大数据集，使用折叠模式

3. 样式问题

  • 检查样式配置是否正确
  • 确认 TextStyle 参数

完整示例代码


更多关于Flutter JSON数据压缩展示插件json_shrink_widget的使用的实战教程也可以访问 https://www.itying.com/category-92-b0.html

1 回复

更多关于Flutter JSON数据压缩展示插件json_shrink_widget的使用的实战系列教程也可以访问 https://www.itying.com/category-92-b0.html


当然，以下是如何在Flutter项目中使用json_shrink_widget插件来压缩并展示JSON数据的示例代码。这个插件可以帮助你以更紧凑的方式展示JSON数据，非常适合在调试或展示大量数据时使用。

首先，确保你已经在pubspec.yaml文件中添加了json_shrink_widget依赖：

dependencies:
  flutter:
    sdk: flutter
  json_shrink_widget: ^最新版本号  # 请替换为当前最新版本号

然后，运行flutter pub get来安装依赖。

接下来，在你的Flutter项目中，你可以按照以下步骤使用json_shrink_widget：

  1. 导入必要的包：
import 'package:flutter/material.dart';
import 'package:json_shrink_widget/json_shrink_widget.dart';
import 'dart:convert'; // 用于将JSON字符串转换为Map
  1. 创建示例JSON数据：
final String jsonData = '''
{
  "name": "John Doe",
  "age": 30,
  "address": {
    "street": "123 Main St",
    "city": "Anytown",
    "zipcode": "12345"
  },
  "phoneNumbers": ["123-456-7890", "987-654-3210"]
}
''';
  1. 在UI中使用JsonShrinkWidget：
void main() {
  runApp(MyApp());
}

class MyApp extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    return MaterialApp(
      title: 'Flutter Demo',
      theme: ThemeData(
        primarySwatch: Colors.blue,
      ),
      home: Scaffold(
        appBar: AppBar(
          title: Text('JSON Shrink Widget Demo'),
        ),
        body: Center(
          child: Padding(
            padding: const EdgeInsets.all(16.0),
            child: JsonShrinkWidget(
              data: jsonDecode(jsonData), // 将JSON字符串解码为Map
            ),
          ),
        ),
      ),
    );
  }
}

在这个示例中，我们：

  • 导入了必要的包，包括json_shrink_widget和dart:convert用于JSON处理。
  • 定义了一个示例JSON字符串。
  • 在MyApp的build方法中，使用JsonShrinkWidget来展示解码后的JSON数据。

当你运行这个Flutter应用时，你应该会看到一个紧凑的JSON数据展示，其中嵌套的JSON对象被适当地缩进和格式化以便于阅读，尽管是以压缩的形式。

注意：由于json_shrink_widget的具体实现和API可能会随着版本更新而变化，因此建议查阅最新的插件文档以获取最准确的使用指南和API参考。

回到顶部