http - 如何在Flutter中更新网络镜像

Question

我目前正在学习Flutter，我想尝试网络请求并与Future一起工作。

我想使用他们的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(),

          ],
        ),
      ),
    );
  }
}

Answer 1

实际上，Image.network保留了您的图像，有关更多详细信息，请参见It here。解决此问题的方法是对api进行简单的无用查询，因此图像的抖动会有所不同。

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

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