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

2020年1月16日23:05:20 发表评论 111 views

实现效果

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

最终效果图.png

问题分析

首先想到的是利用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),
         )
    )
)
复制代码

效果如图:

无透明像素图片.png

发现图片上方没有黑色蒙层,由于图片用的是完全不透明的图片,遂改成有透明像素的图片看看效果:

有透明像素图片.png

图二既能显示图片也能显示颜色,对比图一可以得出结论: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
         )
    )
)
复制代码

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

效果.png

colorFilter是颜色滤镜效果,可以选择不同的BlendMode,这里使用了颜色的重合方式,可以将两种图层的颜色合并到一起,BlendMode还有clear,src,dst,srcOver等其他模式,可以自行查看不同的效果。

作者:jslq
链接:https://juejin.im/post/5e1c1a94e51d4557eb6205c0
来源:掘金
著作权归作者所有。商业转载请联系作者获得授权,非商业转载请注明出处。

发表评论

:?: :razz: :sad: :evil: :!: :smile: :oops: :grin: :eek: :shock: :???: :cool: :lol: :mad: :twisted: :roll: :wink: :idea: :arrow: :neutral: :cry: :mrgreen: