单击按钮时显示网络图像

时间:2020-11-04 13:19:40

标签: image flutter widget

我对移动开发和Flutter还是很陌生,但是似乎可以尝试使用。因此,现在,我有了一个API,该API可以在被询问时发送照片和文本,但是每次您询问时,它都是不同的。因此,当我在应用程序中显示这些文本时,效果很好,当我按下预期的按钮时,它再次发出了请求,因此我得到了一个新的文本短语。但是,当我要获取图像时,它在第一次工作,然后似乎请求没有再次完成,图像保持不变。按下按钮后,如何再次发出请求?随时问您需要的每个问题,我将小部件的代码粘贴在下面

import 'package:flutter/material.dart';

class ImageDialog extends StatelessWidget {
  @override
  @override
  Widget build(BuildContext context) {
    return Dialog(
        child: FutureBuilder(
      future: _loadImage(),
      builder: (BuildContext context, AsyncSnapshot<Image> image) {
        if (image.hasData) {
          return image.data; // image is ready
        } else {
          return Text("No photo available"); // placeholder
        }
      },
    ));
  }

  Future<Image> _loadImage() async {
    
     return Image.network(
      'http://192.168.1.19:5000/photo',
      headers: {
        'Content-Type': 'application/json',
        'Accept': 'application/json',
        'Authorization':
            'Bearer token',
      },
    );
    
  }

}

Thanks in advance :)

1 个答案:

答案 0 :(得分:0)

选项1 -向您的请求添加随机参数:

Future<Image> _loadImage() async {
  
  var nowParam = DateFormat('yyyyddMMHHmm').format(DateTime.now());

  return Image.network(
    'http://192.168.1.19:5000/photo#' + nowParam,
    headers: {
      'Content-Type': 'application/json',
      'Accept': 'application/json',
      'Authorization':
        'Bearer token',
    },
  );

}

选项2 -向图像添加随机密钥,并在单击按钮时清除缓存:

Future<Image> _loadImage() async {

  return Image.network(
    'http://192.168.1.19:5000/photo',
    headers: {
      'Content-Type': 'application/json',
      'Accept': 'application/json',
      'Authorization':
        'Bearer token',
    },
    key: ValueKey(new Random().nextInt(100)),),
  );

}

...

import 'package:flutter/services.dart';

void buttonClick() {
  imageCache.clear();
  imageCache.clearLiveImages();
}