json - 我们如何将 JSON 与数据表一起使用?
问题描述
我是 Flutter 的新手,但我为学习项目所需的一切做了很多工作。
我有一个服务器使用 HTTP 发送的 JSON:
[{"equipe1":"PSG","equipe2":"DIJON","type_prono":"1N2"},{"equipe1":"MONACO","equipe2":"REIMS","type_prono":"1N2"},{"equipe1":"TOULOUSE","equipe2":"RENNES","type_prono":"1N2"},{"equipe1":"MONTPELLIER","equipe2":"STRASBOURG","type_prono":"1N2"},{"equipe1":"AMIENS","equipe2":"METZ","type_prono":"1N2"},{"equipe1":"BREST","equipe2":"ANGERS","type_prono":"1N2"},{"equipe1":"LORIENT","equipe2":"CHAMBLY","type_prono":"1N2"}]
我尝试将它设置为一个数据表小部件,但它看起来很复杂。
现在这是我的整个代码:
import 'package:flutter/material.dart';
import 'dart:convert';
import 'package:http/http.dart' as http;
import 'dart:async';
// Create a Form widget.
class Affiche_grille extends StatefulWidget {
@override
Affiche_grille_State createState() {
return Affiche_grille_State();
}
}
// Create a corresponding State class.
// This class holds data related to the form.
class Affiche_grille_State extends State<Affiche_grille> {
@override
final _formKey = GlobalKey<FormState>();
Grille_display() async {
// SERVER LOGIN API URL
var url = 'http://www.axis-medias.fr/game_app/display_grid.php';
// Store all data with Param Name.
var data = {'id_grille': 1};
// Starting Web API Call.
var response = await http.post(url, body: json.encode(data));
// Getting Server response into variable.
var match = json.decode(response.body);
}
Widget build(BuildContext context) {
// Build a Form widget using the _formKey created above.
var listmatch = Grille_display();
return Form(
key: _formKey,
child: Column(
crossAxisAlignment: CrossAxisAlignment.start,
children: <Widget>[
DataTable(
columnSpacing: 20,
columns: [
DataColumn(
label: Text("Eq 1"),
numeric: false,
tooltip: "",
),
DataColumn(
label: Text("Eq 2"),
numeric: false,
tooltip: "",
),
DataColumn(
label: Text("Type pro"),
numeric: false,
tooltip: "",
),
],
rows: EquipeList.map((equipe_detail) => DataRow(
cells: [
DataCell(
Text(equipe_detail['equipe1'].toString()),
),
DataCell(
Text(equipe_detail['equipe2'].toString()),
),
DataCell(
Text(equipe_detail['type_prono'].toString()),
),
]),
).toList(),
)
],
)
);
}
}
class Match_detail {
String equipe1;
String equipe2;
String typeProno;
Match_detail({this.equipe1, this.equipe2, this.typeProno});
Match_detail.fromJson(Map<String, dynamic> json) {
equipe1 = json['equipe1'];
equipe2 = json['equipe2'];
typeProno = json['type_prono'];
}
Map<String, dynamic> toJson() {
final Map<String, dynamic> data = new Map<String, dynamic>();
data['equipe1'] = this.equipe1;
data['equipe2'] = this.equipe2;
data['type_prono'] = this.typeProno;
return data;
}
}
class EquipeList {
List<Match_detail> breeds;
EquipeList({this.breeds});
factory EquipeList.fromJson(List<dynamic> json) {
return EquipeList(
breeds: json
.map((e) => Match_detail.fromJson(e as Map<String, dynamic>))
.toList());
}
}
它不起作用:(它说我:错误:方法'map'没有为类'EquipeList'定义。([flutter_app] lib的undefined_method
解决方案
您可以在下面复制粘贴运行完整代码
您可以使用包https://pub.dev/packages/json_table
工作演示
完整代码
import 'package:flutter/material.dart';
import 'dart:convert';
import 'package:json_table/json_table.dart';
class SimpleTable extends StatefulWidget {
@override
_SimpleTableState createState() => _SimpleTableState();
}
class _SimpleTableState extends State<SimpleTable> {
final String jsonSample =
'[{"equipe1":"PSG","equipe2":"DIJON","type_prono":"1N2"},{"equipe1":"MONACO","equipe2":"REIMS","type_prono":"1N2"},{"equipe1":"TOULOUSE","equipe2":"RENNES","type_prono":"1N2"},{"equipe1":"MONTPELLIER","equipe2":"STRASBOURG","type_prono":"1N2"},{"equipe1":"AMIENS","equipe2":"METZ","type_prono":"1N2"},{"equipe1":"BREST","equipe2":"ANGERS","type_prono":"1N2"},{"equipe1":"LORIENT","equipe2":"CHAMBLY","type_prono":"1N2"}]';
bool toggle = true;
@override
Widget build(BuildContext context) {
var json = jsonDecode(jsonSample);
return Scaffold(
body: Container(
padding: EdgeInsets.all(16.0),
child: toggle
? Column(
children: [
JsonTable(
json,
showColumnToggle: true,
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]),
),
);
},
allowRowHighlight: true,
rowHighlightColor: Colors.yellow[500].withOpacity(0.7),
paginationRowCount: 20,
),
SizedBox(
height: 20.0,
),
Text("Simple table which creates table direclty from json")
],
)
: Center(
child: Text(getPrettyJSONString(jsonSample)),
),
),
floatingActionButton: FloatingActionButton(
child: Icon(Icons.grid_on),
onPressed: () {
setState(
() {
toggle = !toggle;
},
);
}),
);
}
String getPrettyJSONString(jsonObject) {
JsonEncoder encoder = new JsonEncoder.withIndent(' ');
String jsonString = encoder.convert(json.decode(jsonObject));
return jsonString;
}
}
void main() => runApp(MyApp());
class MyApp extends StatelessWidget {
@override
Widget build(BuildContext context) {
return MaterialApp(
title: 'Flutter Demo',
theme: ThemeData(
primarySwatch: Colors.blue,
),
home: SimpleTable(),
);
}
}
推荐阅读
- python - 在 django 上处理选择多个
- java - 用给定的一组线段计算最大距离,形成粘三角形
- javascript - 所有大写字母和所有非字母字符的正则表达式是什么
- c# - C#中具有列表值的字典的类型转换
- c++ - C++ 继承模板特化
- php - PHPUnit + Composer 文件夹结构 git vs server deploy
- maven - 如何使用 Maven 从 pom.xml 中的 settings.xml 访问元素?
- python - 错误:不支持的操作数类型 -: 'list' 和 'int'
- c++ - 我的输出总是相同的,但我应该根据我在“efektywnosctypu”中插入的数字给出不同的答案
- ocaml - Ocaml hacl-star-raw 软件包:安装失败