如何在 Flutter 中控制 gif 动画？

Question

我正在尝试在 Flutter 上重新启动动画 gif。gif 图像从网络加载没有问题，加载后动画。我需要在点击按钮时重新启动动画。

到目前为止尝试过： - setState - 将 Key 更改为其他一些唯一键并 setState 进行重建。

解决方案作为@chemamolins 的建议：

int _robotReloadCount=0;

....

GestureDetector(
onTap: () {
  onTapRobot();
},
child: Center(
  child: Container(
   margin: EdgeInsets.only(top: 55.0, bottom: 5.0),
   height: 150.0,
   width: 150.0,
   child:
    FadeInImage(
      key: this._robotImageKey,
      placeholder: AssetImage('assets/common/robot_placeholder.png'),
      image: NetworkImage(snapshot.data['robot_image_path'] +"robot_level" +snapshot.data['robot_level'].toString() +".gif"+"?"+this._robotReloadCount.toString()))),
  ),
),

....

onTapRobot() async{
    setState(() {
      this._robotReloadCount++;
    });
  }

Answer 1

我做了很多测试，这并不容易。图像由“ImageProvider”缓存，无论您更改或调用build()图像的时间如何，都是从缓存中可用的内容加载的。

所以，显然，你只有两个选择。

您要么使用新的 url 重建，例如通过附加#whatever到图像 url。

或者您从缓存中删除图像，如下面的代码所示。

无论哪种情况，您都需要再次从网络中获取图像。

import 'package:flutter/material.dart';

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

class MyApp extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    return new MaterialApp(
      home: new MyHomePage(),
    );
  }
}

class MyHomePage extends StatefulWidget {
  @override
  _MyHomePageState createState() => new _MyHomePageState();
}

class _MyHomePageState extends State<MyHomePage> {
  String url = "https://media.giphy.com/media/hIfDZ869b7EHu/giphy.gif";

  void _evictImage() {
    final NetworkImage provider = NetworkImage(url);
    provider.evict().then<void>((bool success) {
      if (success) debugPrint('removed image!');
    });
    setState(() {});
  }

  @override
  Widget build(BuildContext context) {
    return new Scaffold(
      body: new Center(
        child: Image.network(url),
      ),
      floatingActionButton: new FloatingActionButton(
        onPressed: _evictImage,
        child: new Icon(Icons.remove),
      ),
    );
  }
}