Question

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

到目前为止已尝试： -setState -将Key更改为其他唯一的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),
      ),
    );
  }
}

如何在Flutter中控制gif动画？

1 个答案: