在颤动中淡入背景图像答案

【问题标题】：Fade in background image in flutter在颤动中淡入背景图像
【发布时间】：2019-12-27 02:43:51
【问题描述】：

我正在尝试淡入背景图像（例如 BoxDecoration 的图像），但我在文档中找不到解决方案。

我需要能够在图像上绘制小部件，并且我需要它淡入，因为它是一个 NetworkImage。

FadeInImage 不能作为 DecorationImage 的背景，因为它需要 ImageProvider。

我的问题有解决方案吗？

【问题讨论】：

标签： flutter

【解决方案1】：

您可以使用Stack() 并将背景图片放在实际内容的下方，然后使用AnimatedOpacity() 淡入或淡出。然后，您可以将图像用作装饰图像

Container(
    decoration: BoxDecoration(
      image: DecorationImage(image: NetworkImage('test'))

    ),
  ),

此外，还有图像的工厂构造函数，即

Image.network(), Image.asset(),FadeInImage.assetNetwork

【讨论】：

当然！来自 Xamarin，我将 Flutter Stack 与 Xamarin 的 StackLayout 混淆了，后者水平或垂直堆叠子项，而不是像这样的一堆卡片。

【解决方案2】：

将背景图片置于实际内容下方，并使用AnimatedOpacity() 淡入或淡出就像@DanielSzy 提到的那样，对于托管在应用程序资产中的图片，您同样可以将图片用作装饰图片，如下所示：

decoration: BoxDecoration(
    image: DecorationImage(
        image: AssetImage('images/drawer.jpg')
    ),
),

'images/drawer.jpg' 是您的相关图像的路径。

还要确保配置您的pubspec.yaml 文件：

  # To add assets to your application, add an assets section, like this:
  assets:
    - images/

【讨论】：