如何从 Flutter FutureBuilder 中的 AsyncSnapshot<String> 获取字符串？

Question

我想从NetworkImage(url) 加载一张图片。我正在从初始函数填充Future<String> images; 变量，现在我无法让我的 FutureBuilder 将其作为字符串读取。我在 url 上收到错误为“无法将参数类型 AsyncSnapshot 分配给参数类型字符串”这是我的代码...

Future<String> images;

Future<Null> getData() async {
    FirebaseUser user = await FirebaseAuth.instance.currentUser;
    user = await FirebaseAuth.instance.currentUser;
    var userid = user.uid;
    await fb.child('users/${userid}').onValue.listen((Event event) {
      if (event.snapshot.value != null) {
        name = event.snapshot.value['displayName'];
        images = event.snapshot.value['image'];
      } else {
        name = "MyFavKPop";
      }
    });
  }

new FutureBuilder<String>(
  future: images, // a Future<String> or null
  builder: (BuildContext context, AsyncSnapshot<String> snapshot) {
    switch (snapshot.connectionState) {
      case ConnectionState.none:
        return new Text('Press button to start');
      case ConnectionState.waiting: return new Text('Awaiting result...');
      default:
        if (snapshot.hasError)
          return new Text('Error: ${snapshot.error}');
        else
          return new CircleAvatar(
            backgroundImage: new NetworkImage(snapshot.data.toString()) // getting NetworkImageError ..looking for String not Future<String>,
            radius:  75.0,
          );
     }
 }),

Answer 1

生成的数据是AsyncSnapshot.data，而不是快照本身的实例。在您的示例中，案例应该是：

switch (snapshot.connectionState) {
  case ConnectionState.none:
    return new Text('Press button to start');
  case ConnectionState.waiting:
    return new Text('Awaiting result...');
  default:
    if (snapshot.hasError)
      return new Text('Error: ${snapshot.error}');
    else {
      return new CircleAvatar(
        backgroundImage: new NetworkImage(snapshot.data),
        radius:  75.0,
      );
    }
}

编辑：第二个问题是您没有正确创建images - 您正在将字符串分配给未来。当您的 getData 方法完成运行时，请尝试使用完成程序来创建 Future。

Completer<String> _imageCompleter = new Completer<String>();
Future<String> get images => _imageCompleter.future;

Future<Null> getData() async {
  ...
  _imageCompleter.complete(event.snapshot.value['image']);
}