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（           scrollDirection：Axis.horizo​​ntal，           子代：集装箱（             子：DataTable（

          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

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'];
}

Answer 2

另一种方法是使用代码生成器。
以下源代码是由工具生成的。

class Person {
  final int count;
  final int next;
  final int previous;
  final List<Result> result;

  Person({this.count, this.next, this.previous, this.result});

  factory Person.fromJson(Map<String, dynamic> json) {
    return Person(
      count: json['count'] as int,
      next: json['next'] as int,
      previous: json['previous'] as int,
      result: _toObjectList(json['result'], (e) => Result.fromJson(e)),
    );
  }

  Map<String, dynamic> toJson() {
    return {
      'count': count,
      'next': next,
      'previous': previous,
      'result': _fromList(result, (e) => e.toJson()),
    };
  }
}

class Result {
  final String cusadress;
  final String cusname;
  final String id;

  Result({this.cusadress, this.cusname, this.id});

  factory Result.fromJson(Map<String, dynamic> json) {
    return Result(
      cusadress: json['cusadress'] as String,
      cusname: json['cusname'] as String,
      id: json['id'] as String,
    );
  }

  Map<String, dynamic> toJson() {
    return {
      'cusadress': cusadress,
      'cusname': cusname,
      'id': id,
    };
  }
}

List _fromList(data, Function(dynamic) toJson) {
  if (data == null) {
    return null;
  }
  var result = [];
  for (var element in data) {
    var value;
    if (element != null) {
      value = toJson(element);
    }
    result.add(value);
  }
  return result;
}

List<T> _toObjectList<T>(data, T Function(Map<String, dynamic>) fromJson) {
  if (data == null) {
    return null;
  }
  var result = <T>[];
  for (var element in data) {
    T value;
    if (element != null) {
      value = fromJson(element as Map<String, dynamic>);
    }
    result.add(value);
  }
  return result;
}

/*
Person:
  next: int
  previous: int
  count: int
  result: List<Result>

Result:
  id: String
  cusname: String
  cusadress: String
*/

使用示例：

import 'dart:convert';

import 'json_objects.dart';

void main() {
  var json = jsonDecode(_source) as Map<String, dynamic>;
  var person = Person.fromJson(json);
  for (var customer in person.result) {
    print('Name: ${customer.cusname}');
    print('Address: ${customer.cusadress}');
  }
}

final _source = r'''
{
    "next": null,
    "previous": null,
    "count": 2,
    "result": [
        {
            "id": "1",
            "cusname": "jhon",
            "cusadress": "somewhere "
        },
        {
            "id": "2",
            "cusname": "jhon2",
            "cusadress": "somewhere2 "
        }
    ]
}''';

结果：

Name: jhon
Address: somewhere 
Name: jhon2
Address: somewhere2

Answer 3

这是数据表小部件中的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: body(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(),
        ),
    );
  }

希望这可以为您提供帮助！