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