Flutter获取的JSON数组

获取Json数据

可以利用Flutter的插件dio，可以看官网的教程
这个很简单，这里不再举例，获取出来的数据应该类似于这种形式
[{},{},{}…]

解析Json数组

首先写一个对应的类

//CSDN dart语言好像不能高亮
//获取的数据大概是下面这个样子
//[{"total":"200","classroom":"212d","building":"千佛山1号楼","status":{"1":"上课","2":"上课","3":"上课","4":"上课","5":"上课","6":"上课"}},{"total":"200","classroom":"312d","building":"千佛山1号楼","status":{"1":"上课","2":"上课","3":"上课","4":"上课","5":"上课","6":"上课"}},{"total":"200","classroom":"412d","building":"千佛山1号楼","status":{"1":"上课","2":"上课","3":"上课","4":"上课","5":"上课","6":"上课"}}]
//对于每一个元素写一个对应的类
class ClassroomData {
  String classroom;
  List<String> status = List(); //嵌套List内容的读取
  //这里相当于定义了一个解析方法
  //Map<String, dynamic> json可以通过json.decode(String data)来获取
  ClassroomData.fromJson(Map<String, dynamic> json) {
    classroom = json["classroom"];
    status.add(json["status"]["1"]);
    status.add(json["status"]["2"]);
    status.add(json["status"]["3"]);
    status.add(json["status"]["4"]);
    status.add(json["status"]["5"]);
    status.add(json["status"]["6"]);//格式化json数据
/*    print(classroom + status.toString());
		212d[上课, 上课, 上课, 上课, 上课, 上课]
		312d[上课, 上课, 上课, 上课, 上课, 上课]
		412d[上课, 上课, 上课, 上课, 上课, 上课]
			*/
  }

将Json数组转为List

直接上代码

List classroomJson = JsonDecoder().convert(response.toString());
List<ClassroomData> classroomsData = List();
classroomsData = classroomJson.map((e) => ClassroomData.fromJson(e)).toList();//格式化json数据到类classroomDate

之后返回在这个类的List便于表格填充

绘制表格

绘制表格可以利用flutter的Table或者DataTable组件

绘制Table组件

//假设classroomDatas是全局变量，是刚刚格式化好的List数据

Table getTable() { //构建表格
  return Table(
    children: getTableData(),
    border: TableBorder.all(
      color: Colors.green,
      width: 2.0,
      style: BorderStyle.solid,
    ),
    defaultVerticalAlignment: TableCellVerticalAlignment.middle,
  );
} //这是创建表格框架

List<TableRow> getTableData() {
  List<TableRow> tableData = List();
  tableData.add(TableRow(children: [ //装填表头
  //取决于你的类里的数据
  ]));
  classroomDates.forEach((e) {
    tableData.add(TableRow( //装填数据
      children: [
       //取决于你的类里的数据，以及你想输出的数据
      ]
    ));
  });
  return tableData;
}

这里要注意及时判断返回的数据是否为空，可能因为接口或者网络的原因未能获取正确的数据

DataTable

//代码与刚才类似
DataTable getDataTable() { //构建表格
  return DataTable(
      columns: [ //输出列表的头部
			//n个数据
    rows: classroomDates.map((f) {
      return DataRow(//创建列表的行列
          cells: getCells(f),
      );
    }).toList(),
  );
}

List<DataCell> getCells (ClassroomData f) { //获取每一个表格的数据
  List<DataCell> cells = List();
  cells.add(DataCell(Text(f.classroom)));
  f.status.forEach((e) => cells.add(DataCell(Text(e)))); //这里cell要装填出n个数据，与上面一致
  return cells;
} 

这里要注意及时判断返回的数据是否为空，可能因为接口或者网络的原因未能获取正确的数据

还要保证columns的数据的数量和rows中数据的cells数量相同，否则会报错

关联表格与数据

这里以Table为例

ListView( //使用ListView在表格数据较大的时候可以滑动
	children: <Widget>[classroomDates == null ?  //判断非空
	Center(child: Text("欢迎使用",style: TextStyle(fontSize: 30,color: Colors.blue),) ,)
	: getTable(),],)

踩坑后记

1.网络数据无法获取或者填充错误

本来以为是本地传数据时除了错误，后来发现时网络请求和填充数据异步进行，导致填充空数据，于是加入了非空判断后填充数据

2.获取的数据不显示到表格里

这里就不得不说StatefulWidget了，具体的用法就不讲了，总之要在获取网络数据后，用setState()更新数据
setState最好不要用async关键字，setState()内轻易不要用wait。可以单开一个函数处理耗时操作，只需要返回处理过后的非Future<>数据就可以了

3.表格显示部分数据

解法：参上利用ListView

4.数据装填失败

看一下自己的写的解析数据的类是不是和Table中填充数据用不一致的地方，比如嵌套的List没有考虑
——————————————————————————
——————————————————————————