Flutter 圖片 Image 容器組件詳解

Flutter 圖片 Image 容器組件

---

Flutter 基礎組件 Image 圖片容器組件詳情使用介紹

Flutter Image 組件介紹

引入圖片的幾種方式：

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

常用的基礎參數：

• fit :
  • BoxFit.fill: 全圖顯示，圖片會被拉伸，並充滿父容器。
  • BoxFit.contain: 全圖顯示，顯示原比例，可能會有空隙。
  • BoxFit.cover：顯示可能拉伸，可能裁切，充滿（圖片要充滿整個容器，還不變形）。
  • BoxFit.fitWidth：寬度充滿（橫向充滿），顯示可能拉伸，可能裁切。
  • BoxFit.fitHeight ：高度充滿（豎向充滿）,顯示可能拉伸，可能裁切。
  • BoxFit.scaleDown：效果和contain差不多，但是此屬性不允許顯示超過源圖片大小，可小不可大
• repeat :
  • ImageRepeat.repeat : 橫向和縱向都進行重複，直到鋪滿整個畫布。
  • ImageRepeat.repeatX: 橫向重複，縱向不重複。
  • ImageRepeat.repeatY：縱向重複，橫向不重複。
• width: 一般結合 ClipOval 組件才能看到效果
• height: 一般結合 ClipOval 組件才能看到效果

1. 基礎圖片引入，代碼案例演示：

// HomeCOntent 組件
class HomeCOntent extends StatelessWidget{
  @override
  Widget build(BuildContext context) {
    // TODO: implement build
    return Center(
      child: Container(
        child: Image.network(
          "https://b-ssl.duitang.com/uploads/item/201807/09/20180709235634_HEh8H.thumb.700_0.jpeg",
          alignment: Alignment.bottomRight,
          color: Colors.grey,
          colorBlendMode: BlendMode.screen, //顏色混合模式 一般和 color參數 一起使用
          // fit: BoxFit.cover // 圖片的填充方式
        ),
        height: 400.0,
        width: 300.0,
        decoration: BoxDecoration(   // 裝飾器
          color: Colors.orangeAccent,  // 深橘黃
          border: Border.all(
            color: Colors.tealAccent,  // 邊框藍綠色
            width: 2.0
          ),
          borderRadius: BorderRadius.all( Radius.circular(20) ), // 盒子圓角
          // borderRadius: BorderRadius.circular(150)
        ),
        padding: EdgeInsets.all(20),  // 盒子內邊距
      )
    );
  }
}

2. 通過Container圓角，來實現圓角圖片

// HomeCOntent 組件
class HomeCOntent extends StatelessWidget{
  @override
  Widget build(BuildContext context) {
    // TODO: implement build
    return Center(
      child: Container(
        height: 300.0,
        width: 300.0,
        decoration: BoxDecoration(   // 裝飾器
          color: Colors.orangeAccent,  // 深橘黃
          border: Border.all(
            color: Colors.tealAccent,  // 邊框藍綠色
            width: 2.0
          ),
          borderRadius: BorderRadius.all( Radius.circular(150) ), // 盒子圓角
          // borderRadius: BorderRadius.circular(150)
          image: DecorationImage(
            // image: Image.network("http://xxx.xxx.xx.jpeg") // error
            image: NetworkImage("https://b-ssl.duitang.com/uploads/item/201812/08/2018120802719_cRRla.jpeg")
          )
        ),
        padding: EdgeInsets.all(20),  // 盒子內邊距
      )
    );
  }
}

3. 使用ClipOval組件實現圓角圖片

// HomeCOntent 組件
class HomeCOntent extends StatelessWidget{
  @override
  Widget build(BuildContext context) {
    // TODO: implement build
    return Center(
      child: Container(
        child: ClipOval(
          child: Image.network(
            "http://dingyue.nosdn.127.net/sIUFLqPmnMHp88DqM1WMfTHdTFRVsrNx96O007LN11kNY1534396611877compressflag.jpg",
            width: 300,
            height: 300,
            fit: BoxFit.cover
          )
        )
      )
    );
  }
}