Flutter：刷新网络图片

Question

我是flutter的初学者，正在寻找一种简单的方法来刷新网络图片。

在像这样的基本代码中，最简单的方法是什么，让flutter获取并再次绘制此图像？在我的代码中，该图像是来自安全摄像机的快照，因此每次获取时都会更改，但始终具有相同的url。我每次启动应用程序时都会获得新图片，但我希望在单击图像本身时刷新图片。

import 'package:flutter/material.dart';
void main() => runApp(MyApp());
class MyApp extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    var title = 'Web Images';
    return MaterialApp(
      title: title,
      home: Scaffold(
        appBar: AppBar(
          title: Text(title),
        ),
        body: Image.network('https://picsum.photos/250?image=9'),
      ),
    );
  }
} 

- Ali newbie

---

你可以使用Timer来每秒/每分钟调用图像更新。 - fartem

Answer 1

使用有状态的小部件扩展您的类：

   body: Inkwell(
     onTap: ()=> setState(){};
     Image.network('https://picsum.photos/250?image=9'),
   ),

这将刷新页面。或者，如果您不想敲击，则可以：

@override
void initState() {
  super.initState();
  setState(){
    print('refreshing');
  }
}

- Tasnuva Tavasum oshin

---

由于缺乏编程技能，我无法实现这个，我需要整个代码来理解、修改和利用它。 - Ali newbie

Answer 2

另一个棘手的解决方案是添加一个虚拟参数，每次更改该参数，图片就会被视为不同的图像来源，并在访问时刷新图像。例如，添加t=currentTimestamp，但您不需要在Web服务器中处理此参数。

例如：Image.network（'https://picsum.photos/250?image=9?t=${DateTime.now().millisecond}'

- Pinter Huang

Answer 3

如果您需要强制刷新图片，请尝试以下代码：

import 'dart:typed_data';
import 'package:flutter/material.dart';
import 'package:flutter/services.dart';

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

class MyApp extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    var title = 'Web Images';
    return MaterialApp(
        title: title,
        home: Scaffold(
          appBar: AppBar(
            title: Text(title),
          ),
          body: ForcePicRefresh(),
        ));
  }
}

class ForcePicRefresh extends StatefulWidget {
  @override
  _ForcePicRefreshState createState() => _ForcePicRefreshState();
}

class _ForcePicRefreshState extends State<ForcePicRefresh> {
  String url =
      'https://www.booths.co.uk/wp-content/uploads/British-Flower-1x1-2-660x371.jpg';
  Widget _pic;

  @override
  void initState() {
    _pic = Image.network(url);
    super.initState();
  }

  _updateImgWidget() async {
    setState(() {
      _pic = CircularProgressIndicator();
    });
    Uint8List bytes = (await NetworkAssetBundle(Uri.parse(url)).load(url))
        .buffer
        .asUint8List();
    setState(() {
      _pic = Image.memory(bytes);
    });
  }

  @override
  Widget build(BuildContext context) {
    return InkWell(
      child: _pic,
      onTap: () {
        _updateImgWidget();
      },
    );
  }
}

- Владимир Прихоженко