如何在flutter中打印一个api响应键和一个同时打印在DataTable中的值?(要打印DataColumn中的Ke

Question

=>我想打印"；标题"；以及"；值"；在DataColumn 中

=>并且在DataRow 中有要打印的值

我想打印"；键"；以及它们的"；值"；两者都在DataTable中。首先打印"；键"；在DataColumn中；值"；在DataRow中。这是我用来调用的Api链接"https://run.mocky.io/v3/23d7180b-7fba-4f31-a968-187f62ad68d9">

import 'dart:convert';
import "package:flutter/material.dart";
import 'package:http/http.dart' as http;
class HorizontalTable extends StatefulWidget {
HorizontalTable({Key key}) : super(key: key);
@override
State<HorizontalTable> createState() => _HorizontalTableState();
}
class _HorizontalTableState extends State<HorizontalTable> {
List<dynamic> ColumnsList = [];
List<dynamic> rowsList = [];
var decode;
@override
void initState() {
fetchStopEventData();
decode[0].forEach((key, value) {
print(key);
ColumnsList.add(
<DataColumn>[
DataColumn(label: Text('${key}')),
],
);
});
decode.forEach((dataRow) {
Map<String, DataCell> DataCellMap = {};
dataRow.forEach((key, value) {
print("$key : $value");
DataCellMap.addAll({key.toString(): DataCell(value)});
});
print("-------------------------------");
rowsList.add(<DataRow>[DataRow(cells: DataCellMap.values)]);
});
super.initState();
}
@override
Widget build(BuildContext context) {
return Scaffold(
body: SingleChildScrollView(
child: DataTable(
headingTextStyle: TextStyle(
fontWeight: FontWeight.normal,
fontSize: 12,
color: Colors.grey.shade600),
dataTextStyle: TextStyle(
fontWeight: FontWeight.normal,
fontSize: 12,
color: Colors.grey.shade600),
headingRowHeight: 25,
dataRowHeight: 25,
headingRowColor: MaterialStateColor.resolveWith(
(states) {
return Colors.grey.shade100;
},
),
dividerThickness: 1.0,
columnSpacing: 0.0,
horizontalMargin: 5.0,
showBottomBorder: false,
decoration: BoxDecoration(
border: Border.all(
width: 0.5,
color: Colors.grey.shade500,
)),

columns: ColumnsList,
rows: rowsList,

),
),
);
}

fetchStopEventData() async {
try {
final response = await http.get(
Uri.parse(
'https://run.mocky.io/v3/23d7180b-7fba-4f31-a968-187f62ad68d9'),
);
if (response.statusCode == 200) {
decode = jsonDecode(response.body.toString());
decode[0].forEach((key, value) {
print(key);
ColumnsList.add(key);
});
decode.forEach((dataRow) {
dataRow.forEach((key, value) {
print("Data Table: $key : $value");
});
print("-------------------------------");
});
} else {
throw Exception('Failed to load data');
}
} catch (e) {
print('Something went wrong : ${e.toString()}');
}
}
}

Answer 1

下面是一个例子：

class DataTablePage extends StatelessWidget {
DataTablePage({Key? key}) : super(key: key);
final apiData =  [
{
"Title": "NUMBER",
"Value": "07588"
},
{
"Title": "NR_2",
"Value": "255"
},
{
"Title": "FIRST NAME",
"Value": "Josheph"
},
{
"Title": "NAME",
"Value": "Loise"
}
];
@override
Widget build(BuildContext context) {
return Scaffold(
body: SafeArea(
child: SingleChildScrollView(
scrollDirection: Axis.horizontal,
child: DataTable(
columns: getColumns(apiData.first),
rows: getRows(apiData),
),
),
),
);
}
getColumns(Map<String, dynamic> map) {
List<dynamic> titles = [];
map.forEach((key, value) {
titles.add(key);
});
return titles
.map(
(e) => DataColumn(
label: Align(
alignment: Alignment.center,
child: Text(
e,
style: const TextStyle(
fontWeight: FontWeight.bold,
),
),
),
),
)
.toList();
}

getRows(List<Map<String, dynamic>> data) {
List<List<dynamic>> lists = [];
List<DataRow> rowList = [];
List<List<DataCell>> cells = [];
for (int i = 0; i < data.length; i++) {
lists.add(<dynamic>[]);
}
int i = 0;
for (var element in data) {
element.forEach((key, value) {
lists[i].add(value);
});
i++;
}
for (int j = 0; j < lists.length; j++) {
cells.add(<DataCell>[]);
}
for (int i = 0; i < lists.length; i++) {
for (int j = 0; j < lists[i].length; j++) {
cells[i].add(DataCell(
Text(lists[i][j]),
));
}
}
for (int k = 0; k < cells.length; ++k) {
rowList.add(
DataRow(
cells: cells[k],
color: k.isEven
? MaterialStateColor.resolveWith((states) => Colors.white)
: MaterialStateColor.resolveWith(
(states) => const Color(0xffFAF9F6),
),
),
);
}
return rowList;
}
}

Answer 2

import 'package:flutter/material.dart';
void main() => runApp(const MyApp());
class MyApp extends StatelessWidget {
const MyApp({Key? key}) : super(key: key);
static const String _title = 'Flutter Code Sample';
@override
Widget build(BuildContext context) {
return MaterialApp(
title: _title,
home: Scaffold(
appBar: AppBar(title: const Text(_title)),
body: const MyStatelessWidget(),
),
);
}
}
class MyStatelessWidget extends StatelessWidget {
const MyStatelessWidget({Key? key}) : super(key: key);
@override
Widget build(BuildContext context) {
return DataTable(
columns: const <DataColumn>[
DataColumn(
label: Text(
'Title',
style: TextStyle(fontStyle: FontStyle.italic),
),
),
DataColumn(
label: Text(
'Value',
style: TextStyle(fontStyle: FontStyle.italic),
),
),

],
rows: const <DataRow>[
for(map in apiData)
DataRow(
cells: <DataCell>[
DataCell(map['Title']),
DataCell(map['Value']),
],
),
],
);
}
}