Flutter开发实践：如何同时设置容器的图像和颜色

实现效果

下面的效果如何实现：在图像背景上添加半透明的黑色背景

问题分析

首先想到的是使用容器的装饰属性

Container(
   width: double.infinity,
      height: 250.0,
      decoration: BoxDecoration(
          color:  Colors.black.withOpacity(.5),
          fit: BoxFit.cover,
          image: DecorationImage(
              image: NetworkImage(value.user.profile.backgroundUrl),
         )
    )
)
复制代码

效果如图：

发现图像上方没有黑色遮罩层。由于图像是完全不透明的，所以我将其更改为具有透明像素的图像来查看效果：

图像2 它可以显示图像和颜色。比较图像 1，我们可以得出结论，该图像是在颜色层上绘制的。因此，仅靠颜色和图像属性无法达到我们想要的图层组件的效果。代码如下。您可以选择不同的混合模式。这里使用颜色重叠方法来组合两层。颜色被组合起来。 BlendMode还有clear、src、dst、srcOver等其他模式，大家可以自己看看不同的效果。

作者：jslq
链接：https://juejin.im/post/5e1c1a94e51d4557eb6205c0
来源：掘金属于。如需商业转载，请联系作者授权。非商业转载请来源。