Flutter 在 ListView 中绑定 Json 数据未在 UI 中显示

Question

我的 Json 响应状态代码为 200，并且还创建了 object，但是当我尝试将其与 ListView 中的 UI 绑定时，它没有显示任何内容。 我还从 json 数据中解析了创建的 model。

这是我的 API_manager.dart 文件：

import 'package:http/http.dart' as http;
import 'package:aritic/models/contactsModel.dart';

// ignore: camel_case_types
class API_Manager {
  Future<ContactsModel> getContacts() async {
    var client = http.Client();
    var contactsModel;
    String contacts_url =
        'https://exampleapi.com';
    String basicAuth = 'Basic auth key example';
    try {
      var response = await client.get(contacts_url,
          headers: <String, String>{'authorization': basicAuth});
      print(response.statusCode);
      if (response.statusCode == 200) {
        var jsonString = response.body;
        var jsonMap = json.decode(jsonString);
        contactsModel = contactsModel.fromJson(jsonMap);
      }
    } catch (Exception) {
      return contactsModel;
    }
    return contactsModel;
  }
}

我的用户界面代码：

import 'package:aritic/models/contactsModel.dart';
import 'package:aritic/services/api_manager.dart';

class ContactsPage extends StatefulWidget {
  @override
  _ContactsPageState createState() => _ContactsPageState();
}

class _ContactsPageState extends State<ContactsPage>
    with SingleTickerProviderStateMixin {
  Future<ContactsModel> _contactsModel;
  bool isSearching = false;
  TabController _tabController;

  @override
  void initState() {
    // TODO: implement initState

    super.initState();
    _tabController = TabController(length: 2, initialIndex: 0, vsync: this);
    _tabController.addListener(_handleTabIndex);
  }

  @override
  void dispose() {
    _tabController.removeListener(_handleTabIndex);
    _tabController.dispose();
    super.dispose();
  }

  void _handleTabIndex() {
    setState(() {});
  }

  @override
  Widget build(BuildContext context) {
    _contactsModel = API_Manager().getContacts();
    return DefaultTabController(
        length: 2,
        child: Scaffold(
          appBar: AppBar(
            title: Text('Contacts'),
            bottom: PreferredSize(
                child: Align(
                  alignment: Alignment.centerLeft,
                  child: TabBar(
                    controller: _tabController,
                    isScrollable: true,
                    unselectedLabelColor: Colors.white.withOpacity(0.3),
                    indicatorColor: Colors.white,
                    tabs: [
                      Tab(
                        child: Text('Contacts'),
                      ),
                      Tab(
                        child: Text('Companies'),
                      )
                    ],
                  ),
                ),
                preferredSize: Size.fromHeight(40.0)),
            actions: <Widget>[
              Padding(
                padding: const EdgeInsets.only(right: 16.0),
                child: IconButton(
                  icon: Icon(Icons.search),
                  color: Colors.white,
                  onPressed: () {},
                ),
              ),
            ],
          ),
          body: TabBarView(controller: _tabController, children: <Widget>[
            Container(
                height: double.infinity,
                child: FutureBuilder<ContactsModel>(
                    future: _contactsModel,
                    builder: (context, snapshot) {
                      if (snapshot.hasData) {
                        return ListView.builder(
                            padding: const EdgeInsets.all(6),
                            itemCount: snapshot.data.contacts.length,
                            itemBuilder: (context, index) {
                              var contact = snapshot.data.contacts[index];
                              return Container(
                                height: 100,
                                color: Colors.white,
                                child: Row(
                                  mainAxisAlignment: MainAxisAlignment.start,
                                  crossAxisAlignment: CrossAxisAlignment.start,
                                  children: <Widget>[
                                    Text(contact.owner.username,
                                        style: TextStyle(fontSize: 16))
                                  ],
                                ),
                              );
                            });
                      } else
                        return Center(child: CircularProgressIndicator());
                    })),
            Container(
                height: double.infinity,
                child: ListView(
                  padding: const EdgeInsets.all(6),
                  children: <Widget>[
                    InkWell(
                      onTap: () {
                        Navigator.push(context,
                            MaterialPageRoute(builder: (_) => ViewCompany()));
                      },
                      child: Container(
                        height: 50,
                        color: Colors.white,
                        child: Column(
                          mainAxisAlignment: MainAxisAlignment.start,
                          crossAxisAlignment: CrossAxisAlignment.start,
                          children: <Widget>[
                            Text(
                              'Example company',
                              style: TextStyle(fontSize: 16),
                            ),
                            Text(
                              'Example company',
                              style: TextStyle(fontSize: 14),
                            )
                          ],
                        ),
                      ),
                    ),
                    SizedBox(
                      height: 5,
                    ),
                    InkWell(
                      onTap: () {
                        Navigator.push(context,
                            MaterialPageRoute(builder: (_) => ViewCompany()));
                      },
                      child: Container(
                        height: 50,
                        color: Colors.white,
                        child: Column(
                          mainAxisAlignment: MainAxisAlignment.start,
                          crossAxisAlignment: CrossAxisAlignment.start,
                          children: <Widget>[
                            Text(
                              'example',
                              style: TextStyle(fontSize: 16),
                            ),
                            Text(
                              'example',
                              style: TextStyle(fontSize: 14),
                            )
                          ],
                        ),
                      ),
                    ),
                  ],
                )),
          ]),
          floatingActionButton: _bottomButtons(),
        ));
  }

  Widget _bottomButtons() {
    return _tabController.index == 0
        ? FloatingActionButton(
            shape: StadiumBorder(),
            onPressed: () {
              Navigator.push(context, MaterialPageRoute(builder: (_) {
                return AddContacts();
              }));
            },
            backgroundColor: Colors.cyan,
            child: Icon(
              Icons.person_add,
              color: Colors.white,
            ))
        : FloatingActionButton(
            shape: StadiumBorder(),
            onPressed: () {
              Navigator.push(context, MaterialPageRoute(builder: (_) {
                return AddCompany();
              }));
            },
            backgroundColor: Colors.cyan,
            child: Icon(
              Icons.add,
              color: Colors.white,
            ),
          );
  }
}

Output 屏幕：此处应显示 ListView

Dart DevTools 网络分析：显示响应码

Json 查看器：联系人 Json

Json 示例（完整的 json 太大，无法在此处上传）：

{
    "total": "187144",
    "contacts": {
        "897": {
            "isPublished": true,
        "id": 897,
            "fields": {
                "core": {
                    "points": {
                        "id": "47",
                        "label": "Points"
                    },
                    "firstname": {
                        "id": "2",
                        "label": "First Name",
                        "value": "Jason"
                    },
                    "lastname": {
                        "id": "3",
                        "label": "Last Name",
                        "value": "Lamuda"
                    },
                    "...": {
                             "..." : "..."
                            }
                },
            "ipAddresses": [
                {
                    "ip": "70.127.91.131",
                    "ipDetails": {
                        "city": "Bradenton",
                        "region": "Florida",
                        "timezone": "America/New_York",
                    }
                },
                 "...": {
                             "..." : "..."
                            }

Answer 1

JSON 有这个：

{
    "total": "187144",
    "contacts": {
        "897": {
            "isPublished": true,
            "id": 897,
            "fields": {

所以你的ContactModel.contacts是一个Map ，由 id 值“897”等键控，而不是List ，所以这一行返回null ：

  var contact = snapshot.data.contacts[index];

（当您引用contact的成员时，这应该会引发异常。）您可以像这样索引 Map：

List keys = snapshot.data.contacts.keys.toList();
List values = snapshot.data.contacts.values.toList();
return ListView.builder(
    padding: const EdgeInsets.all(6),
    itemCount: snapshot.data.contacts.length,
    itemBuilder: (context, index) {
      var contact = values[index];

顺便说一句，API_Manager 中的这一行很奇怪：

contactsModel = contactsModel.fromJson(jsonMap);

它给出了 Null 指针异常。 当然应该是：

contactsModel = ContactsModel.fromJson(jsonMap);