flutter 圖片組件

加入圖片的幾種方式

• Image.asset:加載資源圖片，就是加載項目資源目錄中的圖片,加入圖片后會增大打包的包體體積，用的是相對路徑。
• Image.network:網絡資源圖片，意思就是你需要加入一段http://xxxx.xxx的這樣的網絡路徑地址。
• Image.file:加載本地圖片，就是加載本地文件中的圖片，這個是一個絕對路徑，跟包體無關。
• Image.memory: 加載Uint8List資源圖片,不怎么使用

---

Image 組件的常用屬性:

 

fit屬性的設置

 

fit屬性可以控制圖片的拉伸和擠壓，這些都是根據圖片的父級容器來的，我們先來看看這些屬性（建議此部分組好看視頻理解）。

 

• BoxFit.fill:全圖顯示，圖片會被拉伸，並充滿父容器。

• BoxFit.contain:全圖顯示，顯示原比例，可能會有空隙。

• BoxFit.cover：顯示可能拉伸，可能裁切，充滿（圖片要充滿整個容器，還不變形）。

• BoxFit.fitWidth：寬度充滿（橫向充滿），顯示可能拉伸，可能裁切。

• BoxFit.fitHeight ：高度充滿（豎向充滿）,顯示可能拉伸，可能裁切。

• BoxFit.scaleDown：效果和contain差不多，但是此屬性不允許顯示超過源圖片大小，可小不可大

圖片的混合模式

圖片混合模式（colorBlendMode）和color屬性配合使用，能讓圖片改變顏色，里邊的模式非常的多，產生的效果也是非常豐富的

• color：是要混合的顏色，如果你只設置color是沒有意義的。
• colorBlendMode:是混合模式，相當於我們如何混合。

child:new Image.network(
  'https://abc.2008php.com/2011_Website_appreciate/2011-12-30/20111230224943.jpg',
    color: Colors.greenAccent,
    colorBlendMode: BlendMode.darken,
),

repeat圖片重復

• ImageRepeat.repeat : 橫向和縱向都進行重復，直到鋪滿整個畫布。

• ImageRepeat.repeatX: 橫向重復，縱向不重復。

• ImageRepeat.repeatY：縱向重復，橫向不重復。

Width和height屬性：

一般結合 ClipOval 才能看到效果

 

---

 

引入本地圖片的配置

1.新建對應目錄:例如images

打開 pubspec.yaml 聲明一下添加的圖片文件

 

 assets:
 　　- images/

child: Container(
child: Image.asset("images/a.jpeg",
    fit:BoxFit.cover
),
width: 300.0,
height: 300.0,
decoration: BoxDecoration(
color: Colors.yellow ),

Flutter 實現圓角以及實現圓形圖片

 return Center(
     child: Container(
         width: 300.0,
         height: 300.0,
         decoration: BoxDecoration(
           color: Colors.yellow,
           borderRadius: BorderRadius.circular(150),
           image: DecorationImage(
              image: new
NetworkImage('http://img4.imgtn.bdimg.com/it/u=3517152928,1333162930&fm=26&gp=0.jpg'),
              fit: BoxFit.cover
           )
), 
),
);

實現圓形圖片

 

return Center(
　　child: Container(
　　child:ClipOval( child:Image.network("https://abc.2008php.com/2011_Website_appreciate/2011-12-30/20111230224943.jpg",
     width: 150.0,
　　height: 150.0, ),
　　)
　　),
);