在本地更新 FutureBuilder ListView答案

【问题标题】：Update FutureBuilder ListView locally在本地更新 FutureBuilder ListView
【发布时间】：2020-01-17 10:02:13
【问题描述】：

我正在使用 FutureBuilder 从 API 获取数据，该 API 返回在 ListView.builder

中绘制的列表

然后我有一个 TextField 用于搜索过滤器实体。如何访问未来检索的数据？或者我应该在开始时通过覆盖 initState 将它们存储在本地？我还想通过我的搜索过滤器更新列表，而不对 API 执行另一个 GET，如果我执行 setState()，则会发生这种情况。

@override
  Widget build(BuildContext context) {
    return Material(
      child: Column(
        children: <Widget>[
          Padding(
              padding: EdgeInsets.only(
            top: MediaQuery.of(context).size.height * 0.05,
          )),
          TextField(
            decoration: InputDecoration(
                labelText: "Search", prefixIcon: Icon(Icons.search)),
            controller: searchField,
            onChanged: (value) {
              filterSearchResults(value.toLowerCase());
            },
          ),
          Expanded(
            child: FutureBuilder(
              future: _getCustomers(),
              builder: (context, snapshot) {
                if (snapshot.connectionState == ConnectionState.done) {
                  return ListView.builder(
                      itemCount: snapshot.data.length,
                      itemBuilder: (context, index) {
                        return Card(
                            elevation: 5,
                            child: ListTile(
                              leading: const Icon(
                                Icons.account_circle,
                                size: 45,
                              ),
                              title: Text(
                                  "${snapshot.data[index].firstName} ${snapshot.data[index].lastName}"),
                              subtitle:
                                  Text("${snapshot.data[index].socialNumber}"),
                              onTap: () {
                                Navigator.push(
                                    context,
                                    MaterialPageRoute(
                                        builder: (context) => CustomerPage(
                                            customer: snapshot.data[index])));
                              },
                            ));
                      });
                } else if (snapshot.hasError) {
                  //handle this
                  return null;
                } else {
                  return CircularProgressIndicator();
                }
              },
            ),
          ),
        ],
      ),
    );
  }

【问题讨论】：

标签： flutter

【解决方案1】：

由于数据存储在列表中，然后由于 queryString 进行了修改，因此解决方案是仅在初始化时调用 getCustomers：

  Future<List<Customer>> getCustomers;

  @override
  void initState() {
      getCustomers = _getCustomers();
      super.initState();
  }

  ...
  child: FutureBuilder(
      future: getCustomers,
  ...

然后将列表也保存在本地对象中并在之后使用它

setState(() { });

这可以使用额外的 if 语句来完成：

      if (items.length > 0) {
        return ListView.builder(
            itemCount: items.length,
            itemBuilder: (context, index) {
                ....
            });
      } else if (snapshot.connectionState ==
          ConnectionState.done) {
            return ListView.builder(
                itemCount: items.length,
                itemBuilder: (context, index) {
                    ....
                });

其中 items 是本地列表，除了第一次使用 API 中的列表然后存储在本地时之外。

【讨论】：