首页 > 解决方案 > 如何在flutter的列表视图构建器中显示一个json数组,该数组通过flutter中的调用方法从本机端接收

问题描述

我试图在列表视图构建器中显示一个数组数据列表,这些数据从本机端发送到通过调用的方法颤动,但它没有显示在屏幕上,这是我调用的方法代码:

    static const platform =
      const MethodChannel('app.uitc.com.rootscan/sf_action');

  Future<List<SyncDownResponseModel>> handleOlatformMethodChannel() async {
    platform.setMethodCallHandler((methodCall) async {
      if (methodCall.method == 'nativeToFlutter') {
        getDataFromSf(methodCall.arguments);
     
      }
    });
  }

这是将json数组转换为列表的代码

Future<List<SyncDownResponseModel>> getDataFromSf(String json) async {
  
    {
      List<dynamic> data = jsonDecode(json);
      List<SyncDownResponseModel> users =
          data.map((data) => SyncDownResponseModel.fromJson(data)).toList();
      setState(() {
        syncDownData = data;


      });
      return users;
    }
    
  }

这是 Jsson 数组的模态类:

class SyncDownResponseModel {
  Attributes attributes;
  String id;
  String lastModifiedDate;
  String firstName;
  String lastName;
  String title;
  String mobilePhone;
  String email;
  String department;
  String homePhone;
  int iSyncId;
  bool bLocal;
  bool bLocallyCreated;
  bool bLocallyUpdated;
  bool bLocallyDeleted;
  int iSoupEntryId;
  int iSoupLastModifiedDate;

  SyncDownResponseModel(
      this.attributes,
      this.id,
      this.lastModifiedDate,
      this.firstName,
      this.lastName,
      this.title,
      this.mobilePhone,
      this.email,
      this.department,
      this.homePhone,
      this.iSyncId,
      this.bLocal,
      this.bLocallyCreated,
      this.bLocallyUpdated,
      this.bLocallyDeleted,
      this.iSoupEntryId,
      this.iSoupLastModifiedDate);

  SyncDownResponseModel.fromJson(Map<String, dynamic> json) {
    attributes = json['attributes'] != null
        ? new Attributes.fromJson(json['attributes'])
        : null;
    id = json['Id'];
    lastModifiedDate = json['LastModifiedDate'];
    firstName = json['FirstName'];
    lastName = json['LastName'];
    title = json['Title'];
    mobilePhone = json['MobilePhone'];
    email = json['Email'];
    department = json['Department'];
    homePhone = json['HomePhone'];
    iSyncId = json['__sync_id__'];
    bLocal = json['__local__'];
    bLocallyCreated = json['__locally_created__'];
    bLocallyUpdated = json['__locally_updated__'];
    bLocallyDeleted = json['__locally_deleted__'];
    iSoupEntryId = json['_soupEntryId'];
    iSoupLastModifiedDate = json['_soupLastModifiedDate'];
  }

  Map<String, dynamic> toJson() {
    final Map<String, dynamic> data = new Map<String, dynamic>();
    if (this.attributes != null) {
      data['attributes'] = this.attributes.toJson();
    }
    data['Id'] = this.id;
    data['LastModifiedDate'] = this.lastModifiedDate;
    data['FirstName'] = this.firstName;
    data['LastName'] = this.lastName;
    data['Title'] = this.title;
    data['MobilePhone'] = this.mobilePhone;
    data['Email'] = this.email;
    data['Department'] = this.department;
    data['HomePhone'] = this.homePhone;
    data['__sync_id__'] = this.iSyncId;
    data['__local__'] = this.bLocal;
    data['__locally_created__'] = this.bLocallyCreated;
    data['__locally_updated__'] = this.bLocallyUpdated;
    data['__locally_deleted__'] = this.bLocallyDeleted;
    data['_soupEntryId'] = this.iSoupEntryId;
    data['_soupLastModifiedDate'] = this.iSoupLastModifiedDate;
    return data;
  }




}

class Attributes {
  String type;
  String url;

  Attributes({this.type, this.url});

  Attributes.fromJson(Map<String, dynamic> json) {
    type = json['type'];
    url = json['url'];
  }

  Map<String, dynamic> toJson() {
    final Map<String, dynamic> data = new Map<String, dynamic>();
    data['type'] = this.type;
    data['url'] = this.url;
    return data;
  }
}

这是我试图在颤动的列表视图构建器中显示 json 数组的代码:

 body: Container(child: FutureBuilder<List<SyncDownResponseModel>>(
            //  future: getDataFromSf(''),
            builder: (context, data) {
          if (data.connectionState != ConnectionState.waiting && data.hasData) {
            var userList = data.data;
            return ListView.builder(
                itemCount: userList.length,
                itemBuilder: (context, index) {
                  var userData = syncDownData[index];
                  return ExpansionTile(
                    key: Key("$index"),
                    title: Text(userData.firstName ?? ""),
                    subtitle: Text(userData.lastName ?? ""),
                    children: <Widget>[
                      Container(
                        color: Colors.grey.withAlpha(55),
                        width: double.infinity,
                        child: Padding(
                          padding: const EdgeInsets.all(20.0),
                          child: Column(
                            crossAxisAlignment: CrossAxisAlignment.start,
                            children: <Widget>[
                              Text("title: ${userData.title}"),
                              SizedBox(
                                height: 5,
                              ),
                              Text("Mobile phone: ${userData.mobilePhone}"),
                              SizedBox(
                                height: 5,
                              ),
                              Text("email: ${userData.email}"),
                              SizedBox(
                                height: 5,
                              ),
                              Text("Department: ${userData.department}"),
                              SizedBox(
                                height: 5,
                              ),
                              Text("HomePhone: ${userData.homePhone}"),
                            ],
                          ),
                        ),
                      )
                    ],
                  );
                });

标签: jsonflutterdart

解决方案


推荐阅读