Flutter开发实战: 如何同时设置Container的图片和颜色

实现效果

如何实现下图效果：在图片背景上加一层半透明的黑色背景文章源自菜鸟学院-https://www.cainiaoxueyuan.com/xcx/17737.html

问题分析

首先想到的是利用Container的decoration属性文章源自菜鸟学院-https://www.cainiaoxueyuan.com/xcx/17737.html

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),
         )
    )
)
复制代码

效果如图：文章源自菜鸟学院-https://www.cainiaoxueyuan.com/xcx/17737.html

发现图片上方没有黑色蒙层，由于图片用的是完全不透明的图片，遂改成有透明像素的图片看看效果：文章源自菜鸟学院-https://www.cainiaoxueyuan.com/xcx/17737.html

图二既能显示图片也能显示颜色，对比图一可以得出结论：image的渲染在color的图层上方。所以光靠color和image属性不能达到我们想要的效果文章源自菜鸟学院-https://www.cainiaoxueyuan.com/xcx/17737.html

解决办法

Stack层叠组件

利用stack的层叠效果可以改变color层组件和image层组件的上下关系,代码如下文章源自菜鸟学院-https://www.cainiaoxueyuan.com/xcx/17737.html

 Container(
      width: double.infinity,
      height: 250.0,
      child: Stack(
        fit: StackFit.expand,
        children: <Widget>[
           Image(
              image: NetworkImage(value.user.profile.backgroundUrl),
              fit: BoxFit.fill,
          ),
          Container(
              color: Colors.black.withOpacity(.5),
          )
      ],
    ),
 );
复制代码

利用DecorationImage的colorFilter属性（推荐）

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),
              colorFilter: ColorFilter.mode(Colors.black.withOpacity(.8), BlendMode.multiply
         )
    )
)
复制代码

以上两种方案均能实现效果文章源自菜鸟学院-https://www.cainiaoxueyuan.com/xcx/17737.html

colorFilter是颜色滤镜效果，可以选择不同的BlendMode，这里使用了颜色的重合方式，可以将两种图层的颜色合并到一起，BlendMode还有clear,src,dst,srcOver等其他模式，可以自行查看不同的效果。文章源自菜鸟学院-https://www.cainiaoxueyuan.com/xcx/17737.html