Json 表格小部件

这个 Flutter 包提供了一个 Json 表格小部件，可以直接从 json (Map) 显示表格。还支持列切换。

JsonTable JsonTable JsonTable JsonTable

? 安装

在 pubspec.yaml 的 dependencies: 部分，添加以下行

Version

dependencies:
  json_table: <latest version>

❔ 用法

导入此类

import 'package:json_table/json_table.dart';

添加 Json 表格小部件

  • 接受 Map作为输入。只需解码你的 json 数组字符串并将其传递给 JsonTable。无需转换为模型。
  • 用于创建列标题构建器的选项。这基本上返回一个用作表格列标题的小部件
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]),
      ),
    );
  }
  • 还支持切换列。用户可以自定义要显示的列
 showColumnToggle: true
JsonTable

- 原生实现

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

//Simply pass this json to JsonTable
child: JsonTable(json)

- 使用 HEADER 和 CELL 小部件构建器实现

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]),
       ),
     );
   },
 )

前往示例代码: simple_table.dart

- 使用自定义列列表实现

  • 传递自定义列列表以控制在表格中显示的列
  • 列表项必须使用 JsonTableColumn 类构建
  • JsonTableColumn 提供 4 个参数，即：
JsonTableColumn("age", label: "Eligible to Vote", valueBuilder: eligibleToVote, defaultValue:"NA")
  • 第一个参数是从数据中提取的字段/键
  • label: 要显示的列标题标签
  • defaultValue: 当数据或键为空时使用
  • valueBuilder: 用于获取格式化值，例如日期等
JsonTable 
//Decode your json string
final String jsonSample='[{"id":1},{"id":2}]';
var json = jsonDecode(jsonSample);
//Create your column list
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"),
    ];
//Simply pass this column list to JsonTable
child: JsonTable(json,columns: columns)

//Example of valueBuilder
String eligibleToVote(value) {
    if (value >= 18) {
      return "Yes";
    } else
      return "No";
}

前往示例代码: custom_column_table.dart

主要亮点

  • 构建的表格不是 Flutter 的原生 DataTable。
  • 表格是手动编码的，因此在学习如何在 Flutter 中手动创建简单表格方面非常有意义
  • 支持垂直和水平滚动
  • 支持自定义列，包括默认值、列名、值构建器

待办事项

  • [X] 自定义标题列表参数。这将有助于仅显示标题列表中提到的键
  • [X] 添加对 JSON 对象中缺失键的支持
  • [X] 添加对日期自动格式化的支持
  • [X] 必须更改提取列标题的逻辑。不要依赖第一个对象
  • [ ] 分页支持等。如果此表格可以替换为 Flutter 的原生 DataTable 将会很好
  • [ ] 添加将标题行更改为左侧垂直行的选项

GitHub

https://github.com/apgapg/json_table