Flutter JSON格式化与查看插件nice_json的使用

发布于 1周前 作者 vueper 来自 Flutter

Flutter JSON格式化与查看插件nice_json的使用

这是一个简单的库,用于打印人类可读的JSON,看起来比默认编码器生成的更美观。

问题

标准JSON编码器的行为常常会导致文件中出现大量的换行符和单个整数在单独一行上,例如:

final data = {
  'a': [0, 1],
  'b': [
    [0, 1],
    [2, 3]
  ]
};
String json = JsonEncoder.withIndent(' ').convert(data);
print(json);

这将生成类似以下的输出:

{
 "a": [
  0,
  1
 ],
 "b": [
  [
   0,
   1
  ],
  [
   2,
   3
  ]
 ]
}

虽然这是有效的JSON,但阅读起来并不方便。

解决方案

我们可以使用niceJson函数来改进JSON的可读性。例如:

String json = niceJson(data);
print(json);

输出结果将是:

{
 "a": [0, 1],
 "b": [[0, 1], [2, 3]]
}

这样更加美观易读!

功能与参数

最大内容长度与最大行长度

maxContentLength定义了单个条目的值的最大长度。 maxLineLength定义了包括缩进和键在内的整个行的最大长度。 如果在构建压缩编码时超过这些限制,则会扩展该值。

最小深度

minDepth是最小深度,在达到该深度之前,值不会被压缩。默认情况下,这是1,意味着整个JSON表示不能简单地成为单行,但在根级别之后的所有内容都会被压缩。 例如,如果你设置为2,可以实现这样的行为:

final data = {
  'a': {'hello': 'world'},
  'foo': {'bar': 1, 'baz': 2},
  'b': [
    [0, 1],
    2,
    3,
  ],
};
String json = niceJson(data, minDepth: 2);

输出结果将是:

{
 "a": {
  "hello": "world"
 },
 "foo": {
  "bar": 1,
  "baz": 2
 },
 "b": [
  [0, 1],
  2,
  3
 ]
}
``

而不是`minDepth: 1`的情况:

```json
{
 "a": {"hello": "world"},
 "foo": {"bar": 1, "baz": 2},
 "b": [[0, 1], 2, 3]
}
``

#### 总是展开特定键

`alwaysExpandKeys`接受一个包含应始终展开其值的键名列表,无论长度如何。

例如:

```dart
final data = {
  'a': {'hello': 'world'},
  'b': {'foo': 'bar'},
};
String json = niceJson(data, alwaysExpandKeys: ['b']);

输出结果将是:

{
 "a": {"hello": "world"},
 "b": {
  "foo": "bar"
 }
}
``

而不是:

```json
{
 "a": {"hello": "world"},
 "b": {"foo": "bar"}
}
``

还可以通过点符号访问嵌套键。例如:

```dart
Map<String, dynamic> data = {
  'a': {
    'x': [1, 2],
    'y': [3, 4],
  },
  'b': {
    'x': [5, 6],
    'y': [7, 8],
  },
};
String json = niceJson(data, minDepth: 2, alwaysExpandKeys: ['a.x']);

输出结果将是:

{
 "a": {
  "x": [
   1,
   2
  ],
  "y": [3, 4]
 },
 "b": {
  "x": [5, 6],
  "y": [7, 8]
 }
}
``

或者使用通配符:

```dart
String json = niceJson(data, minDepth: 2, alwaysExpandKeys: ['*.x']);

输出结果将是:

{
 "a": {
  "x": [
   1,
   2
  ],
  "y": [3, 4]
 },
 "b": {
  "x": [
   5,
   6
  ],
  "y": [7, 8]
 }
}
``

双通配符(`**`)可以匹配多个层次。例如,`a.*.e`不会匹配`a.b.c.d.e`,但`a.**.e`会。

列表索引也适用:

```dart
Map<String, dynamic> data = {
  'a': [
    [0, 1, 2],
    [3, 4, 5],
  ],
  'b': [
    [0, 1],
    [2, 3],
  ],
};
String json = niceJson(data, minDepth: 2, alwaysExpandKeys: ['*.0']);

输出结果将是:

{
 "a": [
  [
   0,
   1,
   2
  ],
  [3, 4, 5]
 ],
 "b": [
  [
   0,
   1
  ],
  [2, 3]
 ]
}
``

### 即将推出的功能

#### 最大嵌套层级

一个期望的功能是只允许单行上的一定数量的嵌套层级,例如:

```json
{
 "a": [0, 1],
 "b": [
  [0, 1],
  [2, 3]
 ]
}
``

这可能在Dart 3.0之后添加,因为这将使这种类型的记录处理变得更加方便。

### 完整示例

下面是完整的示例代码,展示了如何使用`nice_json`插件进行JSON格式化:

```dart
import 'package:nice_json/nice_json.dart';

enum CatColour {
  black,
  white,
  orange,
  grey;
}

void main(List<String> args) {
  Map<String, dynamic> data = {
    'a': [0, 1],
    'b': [
      [0, 1],
      [2, 3],
    ],
    'bools': [true, false],
    'person': {'first_name': 'Alexander', 'last_name': 'Baker'},
    'cats': ['gau', 'saturn', 'yipyip', 'morgana'],
    'catscatscatscatscatscatscatscatscatscatscatscats': [
      'gau',
      'saturn',
      'yipyip',
      'morgana'
    ],
    'kittens': ['boy', 'violet', 'pumpkin'],
    'mixedList': [
      'boy',
      ['violet', 'pumpkin'],
      [1111111, 2222222, 3333333, 4444444, 5555555],
      {'name': 'saturn', 'age': 3, 'species': 'cat', 'colour': CatColour.white},
    ],
    'locations': {
      'loc1': {'x': 0, 'y': -1.5},
      'loc2': {'x': -6.1, 'y': 2},
    },
    'book': 'a really really really really really long'
        ' string will obviously not get wrapped at all',
    'people': [
      {
        'name': 'Alice',
        'numbers': [1, 2, 3],
        'friends': ['Bob', 'Charlie'],
      },
      {
        'name': 'Bob',
        'numbers': [4, 5, 6],
        'friends': ['Alice', 'Charlie'],
      },
    ],
  };

  String json = niceJson(data,
      alwaysExpandKeys: ['kittens', 'locations.loc2', 'people.*.friends']);
  print(json);
}

更多关于Flutter JSON格式化与查看插件nice_json的使用的实战系列教程也可以访问 https://www.itying.com/category-92-b0.html

1 回复

更多关于Flutter JSON格式化与查看插件nice_json的使用的实战系列教程也可以访问 https://www.itying.com/category-92-b0.html


当然,以下是如何在Flutter项目中使用nice_json插件来格式化与查看JSON数据的示例代码。nice_json插件是一个用于在Flutter应用中格式化并美观地展示JSON数据的工具。

1. 添加依赖

首先,在你的pubspec.yaml文件中添加nice_json依赖:

dependencies:
  flutter:
    sdk: flutter
  nice_json: ^x.y.z  # 替换为最新版本号,可以在pub.dev上查找最新版本

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

2. 导入插件

在你的Dart文件中导入nice_json插件:

import 'package:nice_json/nice_json.dart';

3. 使用NiceJson组件

假设你有一个JSON字符串,你想在Flutter应用中格式化并显示它。你可以使用NiceJson组件来实现这一点。

以下是一个完整的示例代码:

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

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

class MyApp extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    return MaterialApp(
      title: 'Flutter NiceJson Example',
      theme: ThemeData(
        primarySwatch: Colors.blue,
      ),
      home: MyHomePage(),
    );
  }
}

class MyHomePage extends StatefulWidget {
  @override
  _MyHomePageState createState() => _MyHomePageState();
}

class _MyHomePageState extends State<MyHomePage> {
  final String jsonData = '''
  {
    "name": "John Doe",
    "age": 30,
    "isStudent": false,
    "courses": [
      "Math",
      "Science",
      "History"
    ],
    "address": {
      "street": "123 Main St",
      "city": "Anytown",
      "state": "CA"
    }
  }
  ''';

  @override
  Widget build(BuildContext context) {
    return Scaffold(
      appBar: AppBar(
        title: Text('NiceJson Example'),
      ),
      body: Padding(
        padding: const EdgeInsets.all(16.0),
        child: NiceJson(
          data: jsonData,
          theme: NiceJsonTheme(
            backgroundColor: Colors.white,
            textStyle: TextStyle(fontSize: 14),
            keyStyle: TextStyle(color: Colors.blue, fontWeight: FontWeight.bold),
            stringValueStyle: TextStyle(color: Colors.green),
            numberValueStyle: TextStyle(color: Colors.red),
            booleanValueStyle: TextStyle(color: Colors.purple),
            nullValueStyle: TextStyle(color: Colors.grey, decoration: TextDecoration.lineThrough),
          ),
        ),
      ),
    );
  }
}

解释

  1. 添加依赖:在pubspec.yaml文件中添加nice_json依赖。
  2. 导入插件:在你的Dart文件中导入nice_json
  3. 使用NiceJson组件:在UI中使用NiceJson组件来显示格式化的JSON数据。你可以通过data属性传递JSON字符串,并通过theme属性自定义显示样式。

自定义样式

在上面的示例中,我们自定义了NiceJsonTheme,你可以根据需要调整各种文本样式,如背景色、文本颜色、字体大小等。

这样,你就可以在Flutter应用中方便地格式化并展示JSON数据了。希望这个示例对你有帮助!

回到顶部