时间戳

首页 > 解决方案 > Flutter FutureBuilder 获取网络图片时的问题

flutter - Flutter FutureBuilder 获取网络图片时的问题

问题描述

我正在使用FutureBuilder. 我尝试使用https://stackoverflow.com/a/52021385/7068790。但是图像仍然没有显示。

import 'package:flutter/material.dart';

void main() => runApp(MyApp());

class MyApp extends StatefulWidget {
  _MyAppState createState() => _MyAppState();
}

class _MyAppState extends State<MyApp> with TickerProviderStateMixin {
  late Future<String?> _imageUrl;

  @override
  void initState() {
    super.initState();

    _imageUrl = getImage();
  }

  Future<String?> getImage() async {
    Future.delayed(Duration(milliseconds: 2000), () {
      return "https://www.google.com/logos/doodles/2021/labour-day-2021-6753651837108920.9-l.png";
    });
  }

  @override
  Widget build(BuildContext context) {
    return FutureBuilder(
        future: _imageUrl,
        builder: (context, snapshot) {
          if(snapshot.connectionState == ConnectionState.done)
            return Image.network(snapshot.data!.toString());
          return Container(color: Colors.orange,);
        });
  }
}

标签： flutter

解决方案

您的 getImage 方法不执行任何操作。它缺少 return 语句，因此 _imageUrl 永远不会返回 String 并且只会返回 null。

如果您Future<String?>在代码中看到，您应该问自己为什么要使用?. 如果你真的得到一个字符串，Flutter 不会告诉你使用Future<String?>，但你可以写Future<String>. 这是 Flutter 新的 null-safety future 的伟大之处，如果您返回 null，它会在这种情况下抱怨。

因此，要修复您的代码，您需要执行以下操作：

 Future<String> getImage() async {
    return Future.delayed(Duration(milliseconds: 2000), () {
      return "https://www.google.com/logos/doodles/2021/labour-day-2021-6753651837108920.9-l.png";
    });

推荐阅读