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

实现效果

如何实现下图效果：在图片背景上加一层半透明的黑色背景

问题分析

首先想到的是利用Container的decoration属性

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

效果如图：

发现图片上方没有黑色蒙层，因为图片用的是彻底不透明的图片，遂改为有透明像素的图片看看效果：

---

图二既能显示图片也能显示颜色，对比图一能够得出结论：image的渲染在color的图层上方。因此光靠color和image属性不能达到咱们想要的效果

解决办法

Stack层叠组件

利用stack的层叠效果能够改变color层组件和image层组件的上下关系,代码以下

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

以上两种方案均能实现效果

colorFilter是颜色滤镜效果，能够选择不一样的BlendMode，这里使用了颜色的重合方式，能够将两种图层的颜色合并到一块儿，BlendMode还有clear,src,dst,srcOver等其余模式，能够自行查看不一样的效果。

一块儿学习

欢迎添加我的微信，拉群一块儿学习flutter