Flutter JSON数据展示插件json_table的使用

json_table 是一个用于在Flutter应用中直接从JSON数据生成表格的插件。它支持列切换、自定义列、嵌套数据展示和分页等功能。

特性

• 手动编码实现，便于学习如何创建简单的表格。
• 支持垂直和水平滚动。
• 支持自定义列，包括默认值、列名、值构建器。
• 支持嵌套数据展示。
• 支持分页。
• 支持行选择颜色和回调。

安装

在 pubspec.yaml 文件的 dependencies: 部分添加以下内容：

dependencies:
  json_table: ^最新版本号

使用方法

导入类

首先需要导入 json_table 包：

import 'package:json_table/json_table.dart';

基本实现

解码你的JSON字符串并传递给 JsonTable 小部件：

final String jsonSample = '[{"id":1},{"id":2}]';
var json = jsonDecode(jsonSample);

// 直接传递 JSON 数据
child: JsonTable(json)

自定义表头和单元格构建器

可以通过 tableHeaderBuilder 和 tableCellBuilder 来自定义表头和单元格的显示效果：

JsonTable(
   json,
   tableHeaderBuilder: (String header) {
     return Container(
       padding: EdgeInsets.symmetric(horizontal: 8.0, vertical: 4.0),
       decoration: BoxDecoration(border: Border.all(width: 0.5), color: Colors.grey[300]),
       child: Text(
         header,
         textAlign: TextAlign.center,
         style: Theme.of(context).textTheme.display1.copyWith(fontWeight: FontWeight.w700, fontSize: 14.0, color: Colors.black87),
       ),
     );
   },
   tableCellBuilder: (value) {
     return Container(
       padding: EdgeInsets.symmetric(horizontal: 4.0, vertical: 2.0),
       decoration: BoxDecoration(border: Border.all(width: 0.5, color: Colors.grey.withOpacity(0.5))),
       child: Text(
         value,
         textAlign: TextAlign.center,
         style: Theme.of(context).textTheme.display1.copyWith(fontSize: 14.0, color: Colors.grey[900]),
       ),
     );
   },
)

自定义列列表

通过传递自定义列列表来控制显示哪些列：

final String jsonSample = '[{"name":"Ram","email":"ram@gmail.com","age":23,"DOB":"1990-12-01"},'
                          '{"name":"Shyam","email":"shyam23@gmail.com","age":18,"DOB":"1995-07-01"},'
                          '{"name":"John","email":"john@gmail.com","age":10,"DOB":"2000-02-24"},'
                          '{"name":"Ram","age":12,"DOB":"2000-02-01"}]';
var json = jsonDecode(jsonSample);

var columns = [
  JsonTableColumn("name", label: "Name"),
  JsonTableColumn("age", label: "Age"),
  JsonTableColumn("DOB", label: "Date of Birth", valueBuilder: formatDOB),
  JsonTableColumn("age", label: "Eligible to Vote", valueBuilder: eligibleToVote),
  JsonTableColumn("email", label: "E-mail", defaultValue: "NA"),
];

// 示例格式化函数
String eligibleToVote(value) {
  if (value >= 18) {
    return "Yes";
  } else
    return "No";
}

child: JsonTable(json, columns: columns)

嵌套数据列表

对于包含嵌套数据的JSON对象，可以使用点号访问嵌套字段：

final String jsonSample = '[{"name":"Ram","email":{"1":"ram@gmail.com"},"age":23,"DOB":"1990-12-01"},'
                           '{"name":"Shyam","email":{"1":"shyam23@gmail.com"},"age":18,"DOB":"1995-07-01"},'
                           '{"name":"John","email":{"1":"john@gmail.com"},"age":10,"DOB":"2000-02-24"}]';
var json = jsonDecode(jsonSample);

var columns = [
  JsonTableColumn("name", label: "Name"),
  JsonTableColumn("age", label: "Age"),
  JsonTableColumn("DOB", label: "Date of Birth", valueBuilder: formatDOB),
  JsonTableColumn("age", label: "Eligible to Vote", valueBuilder: eligibleToVote),
  JsonTableColumn("email.1", label: "E-mail", defaultValue: "NA"),
];

child: JsonTable(json, columns: columns)

列切换和行高亮

可以通过设置 showColumnToggle 实现列切换功能，并通过 allowRowHighlight 和 rowHighlightColor 设置行高亮效果：

JsonTable(
  json,
  showColumnToggle: true,
  allowRowHighlight: true,
  rowHighlightColor: Colors.yellow[500].withOpacity(0.7),
  onRowSelect: (index, map) {
    print(index);
    print(map);
  },
  paginationRowCount: 4,
  columns: columns,
)

示例应用

下面是一个完整的示例应用，展示了如何使用 json_table 插件：

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

void main() => runApp(MyApp());

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

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

class _MyHomePageState extends State<MyHomePage> {
  final String jsonSample = '[{"name":"Ram","email":"ram@gmail.com","age":23,"DOB":"1990-12-01"},'
                            '{"name":"Shyam","email":"shyam23@gmail.com","age":18,"DOB":"1995-07-01"},'
                            '{"name":"John","email":"john@gmail.com","age":10,"DOB":"2000-02-24"},'
                            '{"name":"Ram","age":12,"DOB":"2000-02-01"}]';

  var json;
  bool toggle = false;

  @override
  void initState() {
    super.initState();
    json = jsonDecode(jsonSample);
  }

  @override
  Widget build(BuildContext context) {
    return Scaffold(
      appBar: AppBar(
        title: Text('Json Table Example'),
      ),
      body: Padding(
        padding: EdgeInsets.all(16.0),
        child: Column(
          children: <Widget>[
            Row(
              mainAxisAlignment: MainAxisAlignment.spaceBetween,
              children: <Widget>[
                Text(
                  'Show/Hide Columns',
                  style: Theme.of(context).textTheme.subtitle1,
                ),
                Switch(
                  onChanged: toggleSwitch,
                  value: toggle,
                ),
              ],
            ),
            JsonTable(
              json,
              columns: [
                JsonTableColumn("name", label: "Name"),
                JsonTableColumn("age", label: "Age"),
                JsonTableColumn("DOB", label: "Date of Birth"),
                JsonTableColumn("email", label: "E-mail", defaultValue: "NA"),
              ],
              showColumnToggle: true,
              allowRowHighlight: true,
              rowHighlightColor: Colors.yellow[500].withOpacity(0.7),
              onRowSelect: (index, map) {
                print(index);
                print(map);
              },
            ),
          ],
        ),
      ),
    );
  }

  void toggleSwitch(bool value) {
    setState(() {
      toggle = value;
    });
  }
}

这个示例展示了如何使用 json_table 插件来解析和展示JSON数据，并提供了基本的交互功能如列切换和行高亮。

更多详细信息和示例代码请参考 GitHub。