在Flutter中更改主图像尺寸而不触及占位符图像尺寸

Question

我对图像和抖动中的预加载有一个小问题：

如何在不触摸占位符大小的情况下更改适合图像覆盖的合适值？

Widget primaryVideoImg(img) {
return Flex(
  direction: Axis.horizontal,
  children: <Widget>[
    Expanded(
        child: GestureDetector(
            child: FadeInImage.assetNetwork(
      placeholder: 'res/preloader.gif',
      image: 'remote image url',
      fit: BoxFit.fill,
    )))
  ],
);

}

如下面的图片所示，占位符也占据了整个页面。

Answer 1

您可以在Stack中使用placeholder和FadeInImage.assetNetwork的一些透明图像来实现所需的功能。

对于您的代码，它看起来像这样：

import 'package:transparent_image/transparent_image.dart';

...

Stack(children: <Widget>[
        new Image.asset('res/preloader.gif', fit: BoxFit.fill),
        FadeInImage.assetNetwork(
          placeholder: kTransparentImage,
          image: 'remote image url',
          fit: BoxFit.cover,
        ),
      ],
    );

您可以制作自己的透明图像并将其附加到项目中。 或使用 transparent_image 0.1.0 插件中提供的kTransparentImage： https://pub.dartlang.org/packages/transparent_image

我在Flutter食谱中找到了这个技巧。 有关更多信息，请查看此链接： https://flutter.io/docs/cookbook/images/fading-in-images

祝你好运！