Flutter FutureBuilder 数据表

Question

这是我的模特

`    class Sale {
  final dynamic next;
  final dynamic previous;
  final int count;
  final List<Results> results;
  Sale({this.next, this.previous, this.count, this.results});
  factory Sale.fromJson(Map<String, dynamic> json) {
    return Sale(
      next: json['next'],
      previous: json['previous'],
      count: json['count'],
      results: parsedResult(json),
    );
  }
  static List<Results> parsedResult(resultJson) {
    var list = resultJson['results'] as List;
    List<Results> resultList =
        list.map((data) => Results.fromJson(data)).toList();
    return resultList;
  }
}

class Results {
  final int id;    
  final String cname;     
  Results(
      {this.id,          
      this.cname,

      });
  factory Results.fromJson(Map<String, dynamic> json) {
    return Results(
      id: json['id'],      
      cname: json['cname'],

    );
  }
}
 `

这里一切正常

`     Future<Sale> getData() async{
    final prefs = await SharedPreferences.getInstance();
    final k = "key";
    final v = prefs.get(k) ?? 0;
   var response = await http.get("$saleUrl/?format=json",
     headers: {'Accept': 'application/json', 'Authorization': 'Token $v'
     },

    );
    var data = json.decode(utf8.decode(response.bodyBytes));
    Sale sale = new Sale.fromJson(data);
    print("Result: ${sale.results}");
    print("lno : ${sale.results[0].lnochar} ${sale.results[0].lnoint}");
    print("customer name:${sale.results[0].cname}");
    print("reseller name:${sale.results[0].cname}");
    return sale;

  }
`

但我想使用未来的构建器将此数据添加到 dataTable 小部件 这是我未来的建设者功能

`    FutureBuilder(
            future: apiService.getData(),
            builder: (BuildContext context,AsyncSnapshot snapshot) {
              if (snapshot.hasData) {
                return body(snapshot.data);
              } else {
                return Center(
                  child: CircularProgressIndicator(),
                );
              }
            }
        ), 

this is dataTable widget
小部件主体（地图数据）{ 打印（数据['结果']）； 返回 SingleChildScrollView( 滚动方向：Axis.horizo​​ntal， 孩子：容器（ 孩子：数据表（

          columns: <DataColumn>[

            DataColumn(
              label: Text('Customer name'),
            ),
            DataColumn(
              label: Text('Customer adress'),
            ),

            DataColumn(
              label: Text('Edit || Delete', style: TextStyle(fontSize: 18),),
            ),
          ],
          rows: <DataRow>[
            DataRow(
              cells: [

                DataCell(Text(data['cname'])),
                DataCell(Text(data['cadress'])),
                Dat
                DataCell(Row(
                  mainAxisAlignment: MainAxisAlignment.start,
                  children: <Widget>[

                    IconButton(icon: Icon(Icons.edit),
                      color: Colors.yellow,
                      onPressed: () {},),

                    IconButton(icon: Icon(Icons.delete), color: Colors.red
                      , onPressed: ()=> apiService.deleteData(data['id']),)
                  ],
                )),
              ],
            ),
          ],
        ),
      ),
    );
  }

}
`

我不知道如何在表格行中调用已解析的 json 数据

Answer 1

以下是数据表小部件中 Future 类型示例的演示：

return Scaffold(
      appBar: AppBar(
        title: Text("Sale list"),
      ),
      body: FutureBuilder(
        future: apiService.getData(),
        builder: (context, snapshot) {
          if(!snapshot.hasData) {
            return Center(child: CircularProgressIndicator());
          }

          if(snapshot.hasData) {
          return Column(
            mainAxisSize: MainAxisSize.min,
            mainAxisAlignment: MainAxisAlignment.center,
            verticalDirection: VerticalDirection.down,
            children: <Widget>[
              Expanded(
                child: Container(
                    padding: EdgeInsets.all(5),
                    child: dataBody(snapshot.data)
                ),
              )
            ],
          );
                    }
  
          return Center();
            
        },
      ),
    );

SingleChildScrollView dataBody(List<Sale> listSales) {
    return SingleChildScrollView(
      scrollDirection: Axis.vertical,
      child: DataTable(
          sortColumnIndex: 0,
          showCheckboxColumn: false,
          columns: [
            DataColumn(
                label: Text("Next"),
                numeric: false,
                tooltip: "Next"
            ),
            DataColumn(
              label: Text("Previous"),
              numeric: false,
              tooltip: "Previous",
            ),
          ],
          rows: listSales
              .map(
                (sale) => DataRow(
                onSelectChanged: (b) {
                  print(sale.next);
                },
                cells: [
                  DataCell(
                      Text(sale.next)
                  ),
                  DataCell(
                    Text(sale.previous),
                  ),
                ]),
          )
              .toList(),
        ),
    );
  }

希望对你有帮助！

Answer 2

class PersonModel {
  final int next;
  final int previous;
  final int count;
  final List<ResultModel> result;

  PersonModel.fromJson(Map<String, dynamic> parsedJson)
      : next = parsedJson['next'],
        previous = parsedJson['previous'],
        count = parsedJson['count'],
        result = (parsedJson['result'] as List).map((json) => ResultModel.fromJSON(json)).toList();
}

class ResultModel {
  final int id;
  final String cusname;
  final String cusaddress;

  ResultModel.fromJson(Map<String, dynamic> parsedJson)
      : id = parsedJson['id'],
        cusname = parsedJson['cusname'],
        cusaddress = parsedJson['cusaddress'];
}