Flutter JSON解析插件flutter_json的使用

Flutter JSON

Flutter JSON 插件允许你在应用中以交互式的分层树结构来渲染任何有效的JSON数据。它支持懒加载子节点，提供更好的性能，并且提供了广泛的自定义选项来调整样式和外观。

Features

• 支持渲染任意有效的JSON。
• 懒加载树结构以提高性能。
• 通过索引实现快速导航，方便展开和折叠复杂结构中的节点。
• 自定义外观选项包括初始展开深度、展开/折叠状态图标、每个节点缩进、字体样式和粗细、颜色方案等。
• 支持隐藏特定键的值。
• 即使是大型JSON（测试到25MB），也能保持性能不受影响。

Usage

要使用此插件中的JsonWidget组件，在你的应用程序中导入包并创建一个JsonWidget，传入你想要展示的JSON数据以及外观设置。

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

void main() {
  runApp(const MyApp());
}

class MyApp extends StatelessWidget {
  const MyApp({super.key});

  @override
  Widget build(BuildContext context) {
    return MaterialApp(
      title: "Flutter JSON Demo",
      theme: ThemeData(),
      home: const MyHomePage(),
    );
  }
}

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

  @override
  State<MyHomePage> createState() => _MyHomePageState();
}

class _MyHomePageState extends State<MyHomePage> {
  late final JsonController _controller;

  @override
  void initState() {
    super.initState();
    _controller = JsonController();
  }

  @override
  Widget build(BuildContext context) {
    return Scaffold(
      appBar: AppBar(
        title: const Text("JSON Example"),
      ),
      body: Column(
        children: [
          Padding(
            padding: const EdgeInsets.all(8.0),
            child: Row(
              children: [
                TextButton.icon(
                  onPressed: () => _controller.expandAllNodes(),
                  icon: const Icon(Icons.unfold_more),
                  label: const Text("Expand all"),
                ),
                TextButton.icon(
                  onPressed: () => _controller.collapseAllNodes(),
                  icon: const Icon(Icons.unfold_less),
                  label: const Text("Collapse All"),
                ),
              ],
            ),
          ),
          Expanded(
            child: JsonWidget(
              controller: _controller,
              json: json.decode(jsonString),
              initialExpandDepth: 2,
              hiddenKeys: const ["hiddenField"],
            ),
          ),
        ],
      ),
    );
  }

  @override
  void dispose() {
    _controller.dispose();
    super.dispose();
  }
}

const String jsonString = """
{
  "id": 1,
  "name": "John Doe",
  "email": "johndoe@example.com",
  "phone": "+1-202-555-0123",
  "address": {
    "street": "123 Main St",
    "city": "Anytown",
    "state": "CA",
    "zip": "12345"
  },
  "orders": [
    {
      "id": 1001,
      "items": [
        {
          "id": "A001",
          "name": "Widget A",
          "quantity": 2,
          "price": 9.99
        },
        {
          "id": "B002",
          "name": "Widget B",
          "quantity": 1,
          "price": 14.99
        }
      ],
      "total": 34.97,
      "status": "shipped"
    },
    {
      "id": 1002,
      "items": [
        {
          "id": "C003",
          "name": "Widget C",
          "quantity": 3,
          "price": 4.99,
          "hiddenField": "This field will be hidden"
        }
      ],
      "total": 14.97,
      "status": "pending"
    }
  ],
  "hiddenField": "This field will be hidden as well"
}
""";

Customization

你可以根据需要自定义JSON Tree Widget的外观和样式。以下是一些可用属性：

• json: 要渲染为树的输入JSON。
• initialExpandDepth: 初始展开的节点深度。
• expandIcon: 展开节点时使用的图标，默认为箭头图标。
• collapseIcon: 折叠节点时使用的图标，默认为箭头图标。
• nodeIndent: 每个节点的缩进量。
• additionalLeafIndent: 叶节点（无子节点）的额外缩进量。
• fontStyle: 文本的字体样式。
• fontWeight: 文本的字体粗细。
• hiddenKeys: 需要隐藏的键列表，这些键对应的值将不会被显示。
• 各种针对不同类型数据的颜色参数。

有关所有可用属性的完整列表，请参阅官方文档。

Current Limitations (due to lazy loading)

• 需要有一个限定的高度。
• 强制固定宽度约束以便支持水平滚动。

Planned improvements

计划中的改进包括但不限于：

• 提供返回SliverList的组件版本。
• 整合即将推出的TwoDimensionalScrollable特性。

Additional information

如果你有任何关于这个库的问题或遇到问题，请随时在GitHub上提交issue。我们也欢迎任何形式的贡献，比如提交修复bug或者改进功能的pull request。

Acknowledgments

该插件受到cleveroad/cr_json_widget的启发。