我可以在 Flutter 中使用 DataTable 以表格格式显示我的 JSON 数据吗？

Question

我在 cosole 中成功获得了 JSON 响应。尝试在颤振中使用DataTable 以表格格式显示它。 我尝试使用这个package，但它只接受 JSON 数组列表格式。但我的 JSON 不在数组列表中。

我的 JSON 响应只是一个 <Map> 我应该使用什么语法在表格中显示它？

{
"EncPartnerId": "LEuT1eIlpLEMAAkZme3wpQ==",
"EncTestId": "U4exk+vfMGrn7cjNUa/PBw==",
"Fee": "100",
"DiscountedFee": "80",
"BookingFee": "50"
}

我的 API 函数：

Future<void> GetTestFee() async {
var jsonResponse;
if (encTestId.isNotEmpty) {
  var response = await http.post(
      Uri.parse("http://medbo.digitalicon.in/api/medboapi/GetTestFee"),
      body: ({
        'EncPartnerId': "LEuT1eIlpLEMAAkZme3wpQ==",
        'EncTestId': "U4exk+vfMGrn7cjNUa/PBw==",

      }));
  if (response.statusCode == 200) {
    print("Correct");
    print(response.body);
    jsonResponse = json.decode(response.body.toString());
    print(jsonResponse);
    //Navigator.push(context,MaterialPageRoute(builder: (context) => DieticianAfterDateSelectPage( rresponse: DieticianEncBookingIdModel.fromJson(jsonResponse),)));
     ScaffoldMessenger.of(context)
        .showSnackBar(SnackBar(content: Text("Test Added")));
  } else {
    throw Exception("Faild to fetch");
  }
} else {
  throw Exception("Faild to fetch");
}

 }

然后插入 Dummy 数据如何显示我的 JSON 响应数据？我应该使用ListView.builder?

Container(
   child: Column(
    children:[
        DataTable(
              columns: <DataColumn>[
              DataColumn(label: Text("Test Name")),
              DataColumn(label: Text("Fee")),
              DataColumn(label: Text("Discounted Fee")),
              ],

              rows: <DataRow>[
                DataRow(
                   cells: <DataCell>[
                   DataCell(Text("jjj")),
                   DataCell(Text("jsjf")),
                   DataCell(Text("jsjf")),
               ]
             )
          ]
        )
     ]
  )

) 

Answer 1

您可以像这样将 json 数据映射到数据表

class User {
String? encPartnerId;
String? encTestId;
String? fee;
String? discountedFee;
String? bookingFee;

User(
  {this.encPartnerId,
  this.encTestId,
  this.fee,
  this.discountedFee,
  this.bookingFee});

User.fromJson(Map<String, dynamic> json) {
  encPartnerId = json['EncPartnerId'];
  encTestId = json['EncTestId'];
  fee = json['Fee'];
  discountedFee = json['DiscountedFee'];
  bookingFee = json['BookingFee'];
}

Map<String, dynamic> toJson() {
  final Map<String, dynamic> data = new Map<String, dynamic>();
  data['EncPartnerId'] = this.encPartnerId;
  data['EncTestId'] = this.encTestId;
  data['Fee'] = this.fee;
  data['DiscountedFee'] = this.discountedFee;
  data['BookingFee'] = this.bookingFee;
  return data;
 }
}

class DataTableEg extends StatefulWidget {
const DataTableEg({Key? key}) : super(key: key);

@override
_DataTableEgState createState() => _DataTableEgState();
}

class _DataTableEgState extends State<DataTableEg> {
 User? user;

@override
void initState() {
  super.initState();
  getData();
 }

 void getData() {
 // final response=         //your api call
 // user=User.fromJson(response.body);
 }
 @override
 Widget build(BuildContext context) {
   return DataTable(columns: <DataColumn>[
    DataColumn(label: Text("EncPartnerId")),
    DataColumn(label: Text("EncTestId")),
    ], rows: <DataRow>[
    DataRow(cells: <DataCell>[
    DataCell(Text(user?.encPartnerId ?? '')),
    DataCell(Text(user?.encTestId ?? '')),
    ])
  ]);
}
}