大喵喵酱
发布于

Flutter 中为背景图片添加半透明蒙层

使用场景:在设置背景图片之后,背景图片的色颜色可能和内容颜色冲突,导致内容不够突出,这种问题通常的做法是在背景上再加一个半透明(或者其他透明图)的图层。

flutter中的用法如下:

Container(
  padding: EdgeInsets.only(
    top: topPadding,
    bottom: 30,
  ),
  decoration: BoxDecoration(
    color: AppColors.primaryBackground,
    image: DecorationImage(
      image: const AssetImage(
        "assets/images/user_center_header_bg.webp",
      ),
      fit: BoxFit.cover,
      alignment: Alignment.topCenter,
      // 关键看这里,为图片添加一个黑色不透明度为0.2的蒙层
      colorFilter: ColorFilter.mode(
          Colors.black.withOpacity(0.2), BlendMode.srcOver), 
    ),
  ),
  child: ...
);
浏览 (104)
点赞
收藏
2条评论
村头扛把子
村头扛把子
哈哈哈
点赞
评论
村头扛把子
村头扛把子
客户端发评论测试。
点赞
评论