单击按钮时显示网络图像

Posted

技术标签:

【中文标题】单击按钮时显示网络图像【英文标题】:Display a network image when clicking a button 【发布时间】:2021-02-17 04:41:26 【问题描述】:

我对移动开发和 Flutter 还很陌生,但它似乎是一个值得尝试的好技术。所以现在,我有一个 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】:

选项 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();

【讨论】:

谢谢,我会试试这个 :) 很高兴听到这个消息:)

以上是关于单击按钮时显示网络图像的主要内容,如果未能解决你的问题,请参考以下文章

在jQuery中上传之前单击预览按钮时显示图像[重复]

Android - 仅在 AsyncTask 未完成时单击按钮时显示进度对话框

在按钮单击时显示/隐藏 ImageView

使用 Ajax 提交时显示两个图像

Flutter:找不到网络图像或获取错误时显示本地图像?

React 状态更改并不总是适用于移动网络