Flutter實戰: 如何同時設定Container的圖片和顏色

jslq發表於2020-01-13
FlutterAI

實現效果

如何實現下圖效果：在圖片背景上加一層半透明的黑色背景

最終效果圖.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等其他模式，可以自行檢視不同的效果。

一起學習

歡迎新增個人微信，拉群一起學習flutter

image.png

相關文章