dart - 使用 Futures 的 Flutter Like 按钮功能

Question

我正在尝试构建一个保存按钮，让用户保存/取消保存(喜欢/不喜欢)在 ListView 中显示的项目.

我目前拥有的:

• 提供 Future<bool> 的存储库确定应在哪种状态下呈现图标
• FutureBuilder调用存储库并将图标呈现为已保存/未保存。
• Icon包裹在 GestureDetector 中在 setState 中调用存储库onTap时打电话被调用。

`

@override
Widget build(BuildContext context) {
  return FutureBuilder(
      future: _repository.isSaved(item),
      builder: (BuildContext context, AsyncSnapshot<bool> snapshot) {
        switch (snapshot.connectionState) {
          case ConnectionState.waiting:
          case ConnectionState.none:
          case ConnectionState.active:
            return Icon(Icons.favorite_border);
          case ConnectionState.done:
            return GestureDetector(
              child: Icon(
                  snapshot.data ? Icons.favorite : Icons.favorite_border,
                  color: snapshot.data ? Colors.red : null),
              onTap: () {
                setState(() {
                  if (snapshot.data) {
                    _repository.removeItem(item);
                  } else {
                    _repository.saveItem(item);
                  }
                });
              },
            );
        }
      });
}

`

我遇到的问题是，当我点击以保存列表中的项目时 - 该项目已保存但是图标不会更新，直到我将其滚动到屏幕外然后再次打开。当我点击取消保存项目时，它的状态会立即反射(reflect)出来并按预期更新。

我怀疑保存调用比删除调用花费的时间更长。这两个都是async操作:

void removeItem(String item) async {
    _databaseClient.deleteItem(item);
}

void saveItem(String item) async {
  _databaseClient.saveItem(item);
}

@override
void deleteItem(String item) async {
  var client = await db;
  client.delete("items_table", where: "item = '$item'"); // returns Future<int> but I'm not using this currently
}

void _saveItem(String item) async {
  var client = await db;
  client.insert("items_table", item); // returns Future<int> but I'm not using this currently
}

Future<bool> isSaved(String name) async {
    var matching = await _databaseClient.getNameByName(name);

    return matching != null && matching.isNotEmpty;
}

知道是什么原因造成的吗？

Answer 1

当您点击按钮时，将调用 setState。然后 FutureBuilder 将等待 isSaved 方法。如果保存方法正在进行中。 isSaved 会返回最后的状态，Icon 不会改变。

我建议等待 Save 和 Remove 方法的结果，然后再调用 setState。

@override
Widget build(BuildContext context) {
  return FutureBuilder(
      future: _repository.isSaved(item),
      builder: (BuildContext context, AsyncSnapshot<bool> snapshot) {
        switch (snapshot.connectionState) {
          case ConnectionState.waiting:
          case ConnectionState.none:
          case ConnectionState.active:
            return Icon(Icons.favorite_border);
          case ConnectionState.done:
            return GestureDetector(
              child: Icon(
                  snapshot.data ? Icons.favorite : Icons.favorite_border,
                  color: snapshot.data ? Colors.red : null),
              onTap: () async{
                if (snapshot.data) {
                    await _repository.removeItem(item);
                  } else {
                    await _repository.saveItem(item);
                  }
                setState(() {

                });
              },
            );
        }
      });
}

但是，如果这些方法花费的时间太长，则会造成延迟，从而导致糟糕的用户体验。最好在运行过程中将图标更改为进度圈。