如何将 TableRow 动态添加到 Table 中？答案

【问题标题】：How to add TableRow into Table dynamically?如何将 TableRow 动态添加到 Table 中？
【发布时间】：2021-11-06 22:50:31
【问题描述】：

我正在尝试在我的表中动态添加 Row。但不是添加行，它只是更新我的行值。

Json 测试响应。

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

我的 API 函数按 Add 按钮我试图在我的表中添加测试名称和他们的数据

   Future<void> GetTestFee() async {
var jsonResponse;
if (encTestId.isNotEmpty) {
  var response = await http.post(
      Uri.parse("http://myapitp.in/api/api/endpoint"),
      body: ({
        'EncPartnerId': encLabId,
        'EncTestId': encTestId,

      }));
  if (response.statusCode == 200) {
    print("Correct");
    print(response.body);
    jsonResponse = json.decode(response.body.toString());
    print(jsonResponse);
    getTestFeeObj=GetTestFeeMap.fromJson(jsonResponse);

  } else {
    throw Exception("Faild to fetch");
  }
} else {
  throw Exception("Faild to fetch");
}
return GetTestFee();

}

然后将其打印为 DataTable。我认为这不是正确的方法。我也尝试在 build 方法中预先创建一个空列表，List<TableRow> tableRows = []; 但不知道如何在该列表中填充数据。

  SingleChildScrollView(
            scrollDirection: Axis.horizontal,
            child: DataTable(
              columnSpacing: 13.0,
              columns: <DataColumn>[
                //DataColumn(label: Text("encPartnerId")),
                //DataColumn(label: Text("encTestId")),
                DataColumn(label: Text("TestName")),
                DataColumn(label: Text("Fee")),
                DataColumn(label: Text("Discounted Fee")),
                DataColumn(label: Text("Booking Fee")),
              ],
             rows: <DataRow>[
              DataRow(
                 cells: <DataCell>[
                // DataCell(Text(user?.encPartnerId ?? 'encPartnerId')),
                // DataCell(Text(user?.encTestId ?? 'encPartnerId')),
                DataCell(Container(child: Text(testName?? '',overflow: TextOverflow.ellipsis))),
                DataCell(Text(getTestFeeObj?.fee ?? '')),
                DataCell(Text(getTestFeeObj?.discountedFee ?? '')),
                DataCell(Text(getTestFeeObj?.bookingFee ?? '')),
               ],
              )
             ]
             ),
          )

【问题讨论】：

您传递给rows 的数组当前被硬编码为单个DataRow。如果您希望它显示更多行，则需要以编程方式生成额外的行。
是的，我设法纠正了它。感谢 DevCommunity 中像你这样的人！我拿了一个空的 ArrayList[]，每次调用我的 API 时都将项目添加到这个数组中，并且在表中我只是映射到这些项目。
@Abion47 您应该将答案作为答案发布，Toujo 应该将其标记为正确，这样其他人就会浪费时间尝试回答已经解决的问题
好的！我将在这里回答我自己的问题。

标签： json flutter api dart

【解决方案1】：

Json 响应

 {
  "EncPartnerId": "LEuT1eIlpryry",
  "EncTestId": "U4exk+vfMyry",
  "Fee": "100",
  "DiscountedFee": "80",
  "BookingFee": "50"
 }

我的 JSON 响应模型类

  class GetTestFeeMap { // Need this class
  String? encPartnerId;
  String? encTestId;
  int? fee;
  int? discountedFee;
  int? bookingFee;

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

  GetTestFeeMap.fromJson(Map<String, dynamic> json) {
    encPartnerId = json['EncPartnerId'];
    encTestId = json['EncTestId'];
    //fee = json['Fee'];
    fee = int.parse(json['Fee']);
    // discountedFee = json['DiscountedFee'];
    discountedFee = int.parse(json['DiscountedFee']);
    //bookingFee = json['BookingFee'];
    bookingFee = int.parse(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;
  }
}

我在state中取了一个空List[]

List<GetTestFeeMap> reponseArray = []; // 存储 API 响应 ||稍后以表格形式显示考试费用

获取 API 响应后将其添加到列表中

 var response = await http.post(
   Uri.parse("http://ytyttiiiuiu.in/api/myapi/GetTestFee"),
   body: ({
     'EncPartnerId': encLabId,
     'EncTestId': encTestId
     }));
 if (response.statusCode == 200) {
  print("Correct");
   print(response.body);
   jsonResponse = json.decode(response.body.toString());
   print(jsonResponse);

   getTestFeeObj=GetTestFeeMap.fromJson(jsonResponse);
   reponseModel.add(getTestFeeObj) // Here adding my response to list[]

然后将这些数据映射到我的 DataTable 中

 child: DataTable(
                  columnSpacing: 13.0,
                  columns: <DataColumn>[
                    DataColumn(label: Text("Fee")),
                    DataColumn(label: Text("Discounted Fee")),
                    DataColumn(label: Text("Booking Fee")),
                  ],
                  rows: reponseArray.map((testRowData) {
                    return DataRow(cells: [
                      DataCell(Text(testRowData.fee!.toString())),
                      DataCell(Text(testRowData.discountedFee!.toString())),
                      DataCell(Text(testRowData.bookingFee!.toString()))
                    ]);
                  }).toList()),

【讨论】：