如何使用 Flutter 数据模型和 Future Builder

Question

我正在使用测试应用程序，它只显示来自 api 调用的员工列表，因为我已经为员工创建了数据模型并调用它。但我一无所获

这里是sn-ps

import 'package:flutter/material.dart';
import '../models/employee.dart';
import 'package:http/http.dart' as http;
import 'dart:convert';

class EmployeeListScreen extends StatefulWidget {
  EmployeeListScreen({Key key}) : super(key: key);

  @override
  _EmployeeListScreenState createState() => _EmployeeListScreenState();
}

class _EmployeeListScreenState extends State<EmployeeListScreen> {
  @override
  void initState() {
    super.initState();
  }

  @override
  Widget build(BuildContext context) {
    return Scaffold(
        appBar: AppBar(
          title: Text("Employee List"),
        ),
        body: FutureBuilder(
          future: fetchEmployees(),
          builder: (BuildContext context, AsyncSnapshot snapshot) {
            if (snapshot.connectionState == ConnectionState.none) {
              return Center(
                child: Text("None"),
              );
            }
            if (snapshot.connectionState == ConnectionState.active) {
              return Center(
                child: CircularProgressIndicator(),
              );
            }
            if (snapshot.connectionState == ConnectionState.done) {
              if (snapshot.data == null) {
                return Center(child: Text("No Employees"));
              } else {
                return Center(
                  child: ListView.builder(
                    itemCount: snapshot.data.length[![enter image description here][1]][1],
                    itemBuilder: (BuildContext context, int index) {
                      return Text(snapshot.data[index]["name"]);
                    },
                  ),
                );
              }
            }
            if (snapshot.connectionState == ConnectionState.waiting) {
              return Center(
                child: CircularProgressIndicator(),
              );
            }

            return Container();
          },
        ));
  }

  Future<List<Employee>> fetchEmployees() async {
    final response = await http.get(
        "http://192.168.1.199/projects/ci/employee/api/getEmployees",
        headers: {"accept": "application/json"});
    debugPrint("Api Finished...");

    if (response.statusCode == 200) {
      final result = jsonDecode(response.body);
      Iterable list = result['employees'];
      print(list);
      return list.map((employee) => Employee.fromJson(employee)).toList();
    } else {
      throw Exception("Failed to Load Employees");
    }
  }
}

查看屏幕截图。

我在使用传统的api调用而不使用模型和工厂方法时得到了结果，这让我很困惑，也建议我最好的网站来学习这些东西，即使我看到官方文档也完全不清楚。

Answer 1

为了帮助调试问题，试试下面这个简化的代码怎么样。从loadSlowData() 方法内部调用您的fetchEmployees()。

（直接在FutureBuilder future: 中进行异步调用不是一个好习惯。相反，在StatefulWidget 的initState 中进行异步调用。因为FutureBuilder 在build() 方法内，而@987654329 @ 每秒最多可以调用 60 次，您显然可以看到问题。如果您碰巧在小部件树的那部分使用动画，以 60fps 刷新，您就会遇到这种情况。）

import 'package:flutter/material.dart';

class FutureBuilderStatefulPage extends StatefulWidget {
  @override
  _FutureBuilderStatefulPageState createState() => _FutureBuilderStatefulPageState();
}

class _FutureBuilderStatefulPageState extends State<FutureBuilderStatefulPage> {
  Future<String> _slowData;

  @override
  void initState() {
    super.initState();
    _slowData = loadSlowData();
  }

  Future<String> loadSlowData() async {
    // replace with your async call ↓ ↓
    return await Future.delayed(Duration(seconds: 2), () => 'The Future has arrived');
  }

  @override
  Widget build(BuildContext context) {
    return Scaffold(
      appBar: AppBar(
        title: Text('FutureBldr Stateful'),
      ),
      body: FutureBuilder<String>(
        future: _slowData,
        builder: (context, snapshot) {
          if (snapshot.hasData) {
            return Center(child: Text(snapshot.data));
          }
          return Center(child: Text('Loading...'));
        },
      ),
    );
  }
}