更改主图像尺寸，而无需在Flutter中触摸占位符图像大小 [英] Change the primary image dimension without touching placeholder image size in Flutter

问题描述

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

I have a little question about image and preloading in flutter :

如何在不影响占位符大小的情况下更改适合图像覆盖的合适值？ / p>

How to change the fit value to cover of an image without touching the size of the placeholder ?

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,
    )))
  ],
);

}

图片占位符也占据了整个页面。

As you see in the picture bellow the placeholder take also the whole page.

推荐答案

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

You can use Stack and some transparent image for placeholder in FadeInImage.assetNetwork to achieve what you want.

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

For your code it will look something like this:

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

You can make your own transparent image and attach it to the project. Or use kTransparentImage presented in transparent_image 0.1.0 plugin: https://pub.dartlang.org/packages/transparent_image

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

I find this trick in Flutter cookbook. For more information look on this link: https://flutter.io/docs/cookbook/images/fading-in-images

祝你好运！

这篇关于更改主图像尺寸，而无需在Flutter中触摸占位符图像大小的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！