Flutter的圖檔元件

加載遠端圖檔

class HomeContent extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    return Center(
      child: Container(
        child: Image.network(
          "http://pic33.nipic.com/20131007/13639685_123501617185_2.jpg",

          //圖檔的對齊方式
          // alignment: Alignment.bottomLeft,

          //設定圖檔的背景顔色，通常和 colorBlendMode 配合一起 使用，這樣可以是圖檔顔色和背景色混合。
          // color: Colors.red,
          // colorBlendMode: BlendMode.luminosity,
          
          /**
           * fit 屬性用來控制圖檔的拉伸和擠壓，這都是根據父容器來的。
           * BoxFit.fill:全圖顯示，圖檔會被拉伸，并充滿父容器。
           * BoxFit.contain:全圖顯示，顯示原比例，可能會有空隙。
           * BoxFit.cover:顯示可能拉伸，可能裁切，充滿(圖檔要 充滿整個容器，還不變形)。
           * BoxFit.fitWidth:寬度充滿(橫向充滿)，顯示可能拉伸， 可能裁切。
           * BoxFit.fitHeight :高度充滿(豎向充滿),顯示可能拉 伸，可能裁切。
           * BoxFit.scaleDown:效果和 contain 差不多，但是此屬 性不允許顯示超過源圖檔大小，可小不可大。
           */
          fit: BoxFit.scaleDown,
          
          /**
           * 平鋪
           * ImageRepeat.repeat : 橫向和縱向都進行重複，直到鋪滿整 個畫布。
           * ImageRepeat.repeatX: 橫向重複，縱向不重複。
           * ImageRepeat.repeatY: 縱向重複，橫向不重複。
           */
          repeat: ImageRepeat.repeat,

        ),
        height: 300,
        width: 300,
        decoration: BoxDecoration(
          color: Colors.yellow
        ),
      ),
    );
  }
  
}

複制

加載本地圖檔

加載本地圖檔分為兩步：

在工程的根目錄下新增images檔案夾，然後在該檔案夾下增加2.0x、3.0x、4.0x這三個檔案夾。增加本地圖檔的時候，要分别在images檔案夾、2.0x檔案夾、3.0x檔案夾、4.0x檔案夾這四個檔案夾下面分别倒入同一張圖檔所對應的不同分辨率大小的圖檔，我們的機器裝置會根據螢幕的分辨率來确定取哪一個檔案夾下的圖檔。如下圖：

修改pubspec.yaml檔案，如下：

然後在代碼中使用就可以了：

class HomeContent6 extends StatelessWidget{
  @override
  Widget build(BuildContext context) {
    return Center(
      child: Container(
        child: ClipOval(
          child: Image.asset(
            "images/001.jpg",
            width: 300,
            height: 300,
            fit: BoxFit.cover,
          ),
        ),
      ),
    );
  }
  
}

複制

設定圖檔圓角

通過Container的 borderRadius 和 image 的結合來設定圖檔的圓角：

//利用container特性設定圖檔圓角
class HomeContent1 extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    return Center(
      child: Container(
        height: 300,
        width: 300,
        decoration: BoxDecoration(
          color: Colors.yellow,
          // borderRadius: BorderRadius.all(
          //   Radius.circular(150),
          // ),
          borderRadius: BorderRadius.circular(150),
          image: DecorationImage(
            image: NetworkImage(
              'http://pic33.nipic.com/20131007/13639685_123501617185_2.jpg',
            ),
            fit: BoxFit.cover
          )
        ),
      ),
    );
  }
  
}

複制

還有另外一種更簡潔的設定圖檔圓角的方式，就是利用ClipOval元件：

//利用ClipOval設定圖檔圓角
class HomeContent2 extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    return Center(
      child: Container(
        child: ClipOval(
          child: Image.network(
            "http://pic33.nipic.com/20131007/13639685_123501617185_2.jpg",
            height: 300,
            width: 300,
            fit: BoxFit.cover,
          ),
        ),
      ),
    );
  }
}

複制

以上。