Flutter元件基礎——Image

Flutter 元件基礎 ——Image#

Image 是 Flutter 中的圖片元件，類似於 iOS 中的 UIImageView，可加載資源圖片、網路圖片、本地圖片等，可設置拉伸方式，重複模式等。

Image 加載方法#

Image 的加載方法有以下幾種：

Image.asset，加載本地圖片，比如打包到項目中的圖片
Image.file，加載設備中的圖片，比如存儲到本地的圖片
Image.memory，加載內存中的圖片
Image.network，加載網路圖片

使用方式各有不同，如下：

Image.asset(name)是Image(image: AssetImage(name))
Image.file(path)是Image(image: FileImage(File(path)))
Image.network(url)是Image(image: NetworkImage(url))
Image.memory(list)是Image(image: MemoryImage(list))

而且：

使用 asset images 時，圖片打包在 apk 或 ipa 中，會導致包變大
加載時間對比：NetworkImage > FileImage > AssetImage > MemoryImage

Image.asset#

Flutter 加載本地圖片，參考添加資源和圖片，步驟如下：

找到pubspec.yaml文件，找到這裡# To add assets to your application, add an assets section, like this:，打開下面的註釋，這裡需要注意 yaml 文件的格式對齊問題；
和pubspec.yaml並列創建一個assets文件夾，裡面放入圖片；
然後編輯第一步打開的註釋文件，寫入圖片的路徑，但是需要注意路徑要包含最外層的 assets，示例如下：

添加成功後，使用時，也需要注意路徑是從 assets 開始的，代碼如下：


class MyApp extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    return MaterialApp(
      title: 'Text Widget',
      home: Scaffold(
        body: Center(
          child: Container(
            child: new Image.asset('assets/images/jietu.png'),
            // child: new Image(
            //   image: AssetImage('assets/images/jietu.png'),
            // ),
            width: 300.0,
            height: 200.0,
            color: Colors.lightBlue,
          ),
        ),
      ),
    );
  }
}

Image.network#

加載網路圖片，代碼如下：


class MyApp extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    return MaterialApp(
      title: 'Text Widget',
      home: Scaffold(
        body: Center(
          child: Container(
            child: new Image.network(
              'https://inews.gtimg.com/newsapp_ls/0/13792660143/0.jpeg',
            ),
            width: 300.0,
            height: 200.0,
            color: Colors.lightBlue,
          ),
        ),
      ),
    );
  }
}

Image 的屬性#

Image 的常用屬性如下：

alignment: 圖片相對於父視圖的對齊方式，當圖片大小小於父視圖大小時可看出效果
- topLeft：頂部左對齊
- topCenter：頂部居中對齊
- topRight：頂部右對齊
- centerLeft：中間左對齊
- center：中間對齊
- centerRight：中間右對齊
- bottomLeft：底部左對齊
- bottomCenter：底部居中對齊
- bottomRight：底部右對齊
color: 不為空時，根據 colorBlendMode 來對圖片對每個像素進行混合
colorBlendMode: 圖片混合模式
filterQuality: 圖片渲染對質量
fit: 圖片顯示模式
- BoxFit.fill，圖片充滿整個父視圖區域，可能會被拉伸
- BoxFit.contain，圖片按照原始比例顯示，可能會留有邊距
- BoxFit.cover，圖片充滿整個父視圖且保持原比例，可能會裁切
- BoxFit.fitwidth，按寬度充滿父視圖，保持比例
- BoxFit.fitHeight，按高度充滿父視圖，保持比例
- BoxFit.scaleDown
height: 圖片寬度
width: 圖片高度
repeat: 圖片重複模式
- ImageRepeat.repeat，各個方向都重複，鋪滿父視圖
- ImageRepeat.repeatX，橫向重複鋪滿父視圖
- ImageRepeat.repeatY，縱向重複鋪滿父視圖

代碼如下：



class MyApp extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    return MaterialApp(
      title: 'Text Widget',
      home: Scaffold(
        body: Center(
          child: Container(
            child: new Image.network(
              'https://inews.gtimg.com/newsapp_ls/0/13792660143/0.jpeg',
              alignment: Alignment.center,
              filterQuality: FilterQuality.low,
              // scale: 1.0,
              // fit: BoxFit.scaleDown,
              // repeat: ImageRepeat.repeatY,
              // color: Colors.greenAccent,
              // colorBlendMode: BlendMode.colorDodge,
            ),
            width: 300.0,
            height: 200.0,
            color: Colors.lightBlue,
          ),
        ),
      ),
    );
  }
}

參考#

Image dev doc
添加資源和圖片
 Flutter 免費視頻第二季 - 常用元件
 How to load images with image.file