flutter學習--Image組件

加入圖片的幾種方式

• Image.asset:加載資源圖片，就是加載項目資源目錄中的圖片,加入圖片後會增大打包的包體體積，用的是相對路徑。
• Image.network:網絡資源圖片，意思就是你需要加入一段http://xxxx.xxx的這樣的網絡路徑地址。
• Image.file:加載本地圖片，就是加載本地文件中的圖片，這個是一個絕對路徑，跟包體無關。
• Image.memory: 加載Uint8List資源圖片
  1.Image.asset方法：
  首先在項目跟目錄新建文件夾assets/images，在images文件夾下添加一張圖片,然後在pubspec.yaml文件中配置asset資源，在flutter:節點下添加；

flutter:

  # The following line ensures that the Material Icons font is
  # included with your application, so that you can use the icons in
  # the material Icons class.
  uses-material-design: true
  assets:
          - assets/images/你的圖片名

配置完成，package get
然後，在代碼中使用：

body: Center(
          child: Container(
            child: Image.asset(
              'assets/images/ic_launcher72.png',
              width: 200.0,
              height: 200.0,
              scale: 1.0,
              color: Colors.black,
            ),
            width: 400.0,
            height: 200.0,
            color: Colors.blue,
            alignment: Alignment.center,
          ),
//            child: Image.network("https://i2.hdslb.com/bfs/face/0cca7e53848ebd079e1b55fde929a473a882ee7f.jpg"),
        ),

出現如下圖：

2.Image.network使用方法

child: Image.network("https://i2.hdslb.com/bfs/face/0cca7e53848ebd079e1b55fde929a473a882ee7f.jpg"),

直接添加圖片的url鏈接
3.Image.file使用方法

child: Image.file(new File("/Users/pengganggui/Documents/idea_project/YiXianTong/src/main/resources/static/image/3333.jpg"))),

在使用File之前，導入

import 'dart:io';

4.Image.memory:使用方法

Image.memory(bytes);

fit屬性的設置

fit屬性可以控制圖片的拉伸和擠壓，這些都是根據圖片的父級容器來的.

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

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

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

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

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

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

圖片的混合模式

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

child:new Image.network(
  'http://jspang.com/static/myimg/blogtouxiang.jpg',
    color: Colors.greenAccent,
    colorBlendMode: BlendMode.darken,
),

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

repeat圖片重複

• ImageRepeat.repeat : 橫向和縱向都進行重複，直到鋪滿整個畫布。
  
• ImageRepeat.repeatX: 橫向重複，縱向不重複。
  
• ImageRepeat.repeatY：縱向重複，橫向不重複。