flutter - Gif 没有得到动画 flutter web

Question

enter image description here Flutter Web Gif 图像没有动画。

我的 flutter web 中有一个 TabBarView。在里面我有一个 GIF 格式的图像。正在显示图像，但看不到动画。

SizedBox(
                height: 500,
                width: Constants.width,
                child: TabBarView(
                  children: <Widget>[
                    Image.asset(
                      'images/tourism.gif',
                      width: Constants.width,
                    ),

                  ],
                ),
              )

Answer 1

我刚刚检查了 Image.asset 是如何翻译的，它显然是如何转换成 Canvas 的。如下图所示。

因此，如果您处于苛刻的情况下，您仍然可以使用通常的 img 元素来实现这一点，该元素可以通过 flutter_web_ui 包包含，如下面的代码所示。

    import 'package:flutter_web/material.dart';
    import 'package:flutter_web_ui/ui.dart' as ui;
    import 'dart:html';

    class GifRenderer extends StatelessWidget {
      @override
      Widget build(BuildContext context) {
        // build the HTML Img element.
        ui.platformViewRegistry.registerViewFactory(
          "Gif Renderer",
          (int viewId) {
            ImageElement element = ImageElement()
              ..src = "/assets/images/tourism.gif"
    //          ..height = 500
    //          ..width = 800
              ..style.border = "none";
            return element;
          },
        );

        return Padding(
          padding: EdgeInsets.only(top: 1.0),
          child: Column(
            mainAxisAlignment: MainAxisAlignment.end,
            children: <Widget>[
              Expanded(
                // This is a normal image asset
                child: Image.asset(
                  '/images/tourism.gif',
                  height: 500,
                  width: 800,
                ),
              ),
              Expanded(
                // Here we add the HTML img element created early.
                child: HtmlView(
                  viewType: "Gif Renderer",
                ),
              )
            ],
          ),
        );
      }
    }

现在这段代码在一列中显示两个小部件，第一个是您使用的常用图像资源，第二个是正确呈现 gif 的 html img 元素。

另请注意，Flutter-web 需要您的 Assets 文件夹中的 AssetManifest.json，其中包含与您的 Assets 相关的条目。我不确定这是否是强制性的，但这里有一个如何定义它的引用 AssetManifest.json .

我在 AssetManifest.json 中使用了以下条目

{
   "assets": ["images/tourism.gif"]
}