如何在 Flutter 中更新网络图像答案

【问题标题】：How can I update a Network Image in Flutter如何在 Flutter 中更新网络图像
【发布时间】：2020-06-08 13:47:07
【问题描述】：

我目前正在学习 Flutter，我想尝试网络请求并使用 Futures。

我想使用他们的 API 显示来自 unsplash.com 的随机图像，并且我想在每次按下某个按钮时更改图像。

我尝试实现一个函数来更改图像，但它不起作用。

我的代码如下所示：

import 'package:flutter/material.dart';
import 'package:http/http.dart' as http;
import 'dart:async';

void main() {
  runApp(MyApp());
}

class MyApp extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    return MaterialApp(
      title: 'Flutter Demo',
      home: RandomImage(),
    );
  }
}

class RandomImage extends StatefulWidget {
  @override
  _RandomImageState createState() => _RandomImageState();
}

class _RandomImageState extends State<RandomImage> {

  static String imageUrl = 'https://source.unsplash.com/random/300x200';
  Future _imgFuture = http.get(imageUrl);

  void _changeImage() async {
    _imgFuture = http.put(imageUrl);
  }

  @override
  Widget build(BuildContext context) {
    return Scaffold(
      appBar: AppBar(
        title: (Text('Hello')),
      ),
      body: Center(
        child: Column(
          children: [

            Spacer(),

            FutureBuilder(
              future: _imgFuture,
              builder: (context, snapshot) {
                if (snapshot.hasError) {
                  return Text('Oops, there was an error');
                } else if (snapshot.hasData) {
                  return Image.network(imageUrl);
                } else {
                  return Text('No value yet');
                }
              },
            ),

            RaisedButton(
              child: Text('Change Image!'),
              onPressed: () => setState(() {
                _changeImage();
              }),
            ),

            Spacer(),

          ],
        ),
      ),
    );
  }
}

【问题讨论】：

您在日志中遇到的错误是什么？
实际上，我没有收到任何错误。图片不会更新。

标签： http flutter dart

【解决方案1】：

实际上，Image.network 正在保留您的图像，更多详细信息请查看它here。这个问题的解决方法是对api做一个简单的无用查询，所以在flutter中图像会相同不同。


            RaisedButton(
              child: Text('Change Image!'),
              onPressed: () => setState(() {
                // _changeImage();
                imageUrl="https://source.unsplash.com/random/300x200?v=${DateTime.now().millisecondsSinceEpoch}";
              }),
            ),

图像不会改变如果您过于频繁地调用该 api，您可能需要添加一个计时器以防止用户过于频繁地点击。

【讨论】：

非常感谢！你的解决方案对我有用。我将尝试实现一个计时器作为下一步。
@DavidCsida ，很高兴它有帮助！您可以标记为答案，让其他人知道这是 sloved :)
差点忘了。我在这里很新^^

【解决方案2】：

我认为问题出在_changeImage() 方法上，尝试将http.put 替换为http.get。

【讨论】：

http.put 工作正常。我更改了上面帖子中显示的 URL，现在它可以工作了。
但是当他在一个地方使用http.get而在另一个地方使用http.put时，这没有任何意义。