Question

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

我的Flutter网站上有一个TabBarView。在里面，我有一个GIF格式的图像。图片正在显示，但看不到动画。

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

                  ],
                ),
              )

Answer 1

我刚刚检查了Image.asset的翻译方式，并将其显然转换为画布。正如您在下图中所看到的。

因此，如果您处在苛刻的情况下，仍然可以使用通常的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期望资产文件夹中包含AssetManifest.json，其中包含与资产相关的条目。我不确定此强制性命令是否正确，但这是如何定义AssetManifest.json的参考。

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

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

Gif没有获得动画抖动的网络

1 个答案: