Flutter 基礎控制元件篇-->圖片(Image)、圖示(Icon)

夜夕i發表於2019-10-02
Flutter控制元件

Flutter 中，我們可以通過Image元件來載入並顯示照片，Image的資料來源可以是asset、記憶體、檔案和網路。也可以使用Icon字型圖示，來顯示不同的圖片

Image

可以用來實現載入各種照片。
這裡先說一下從asset和網路載入圖片的方法，然後說一下相關的屬性

原始碼示例

建構函式如下：

const Image({
	Key key,
	@required this.image,
	this.semanticLabel,
	this.excludeFromSemantics = false,
	this.width,
	this.height,
	this.color,
	this.colorBlendMode,
	this.fit,
	this.alignment = Alignment.center,
	this.repeat = ImageRepeat.noRepeat,
	this.centerSlice,
	this.matchTextDirection = false,
	this.gaplessPlayback = false,
	this.filterQuality = FilterQuality.low,
})
複製程式碼

其中有一個必選的image引數，他對應一個ImageProvider

ImageProvider 是一個抽象類，主要定義了圖片資料獲取的介面load()，從不同的資料來源獲取圖片需要實現不同的ImageProvider ，

如AssetImage是實現了從Asset中載入圖片的ImageProvider，而NetworkImage實現了從網路載入圖片的ImageProvider。

從asset中載入圖片

  1. 在工程目錄（一定是工程目錄）下新建一個images資料夾，並將圖片logo.jpg拷貝到資料夾下。

  2. 在pubspec.yaml中的flutter部分新增如下內容：

assets:
   - images/logo.jpg
複製程式碼

注： 由於 yaml 檔案對縮排要求非常嚴格，所以必須嚴格按照每一層兩個空格的方式進行縮排，此處assets前面應有兩個空格。

  1. 載入該圖片
Image(
  image: AssetImage("images/logo.jpg"),	//此處路徑要填寫上面assets定義的路徑
);
複製程式碼

Image也提供了一個快捷的建構函式Image.asset用於從asset中載入、顯示圖片：

Image.asset(
	"images/logo.jpg",
)
複製程式碼

從網路載入圖片

不需要配置，直接使用

Image(
	//引入網路圖片
	image: NetworkImage('https://ss3.bdstatic.com/70cFv8Sh_Q1YnxGkpoWK1HF6hhy/it/u=1785737583,1674337830&fm=26&gp=0.jpg'),
),
複製程式碼

Image也提供了一個快捷的建構函式Image.network用於從網路載入、顯示圖片：

Image.network(
  "https://ss3.bdstatic.com/70cFv8Sh_Q1YnxGkpoWK1HF6hhy/it/u=1785737583,1674337830&fm=26&gp=0.jpg",
)
複製程式碼

屬性解釋

只說一些Image的主要屬性

const Image({
  ...
  this.width, //圖片的寬
  this.height, //圖片高度
  this.color, //圖片的混合色值
  this.colorBlendMode, //混合模式
  this.fit,//縮放模式
  this.alignment = Alignment.center, //對齊方式
  this.repeat = ImageRepeat.noRepeat, //重複方式
  ...
})
複製程式碼

width、height

用於設定圖片的寬、高，當不指定寬高時，圖片會根據當前父容器的限制，儘可能的顯示其原始大小，
如果只設定width、height的其中一個，那麼另一個屬性預設會按比例縮放，但可以通過fit屬性來指定適應規則。

fit(重點)

該屬性用於在圖片的顯示空間和圖片本身大小不同時指定圖片的適應模式。
適應模式是在BoxFit中定義，如：fit: BoxFit.contain

BoxFit 有如下值：

  • fill：會拉伸填充滿顯示空間，圖片本身長寬比會發生變化，圖片會變形。
  • cover：會按圖片的長寬比放大後居中填滿顯示空間，圖片不會變形，超出顯示空間部分會被剪裁。
  • contain：這是圖片的預設適應規則，圖片會在保證圖片本身長寬比不變的情況下縮放以適應當前顯示空間，圖片不會變形。
  • fitWidth：圖片的寬度會縮放到顯示空間的寬度，高度會按比例縮放，然後居中顯示，圖片不會變形，超出顯示空間部分會被剪裁。
  • fitHeight：圖片的高度會縮放到顯示空間的高度，寬度會按比例縮放，然後居中顯示，圖片不會變形，超出顯示空間部分會被剪裁。
  • none：圖片沒有適應策略，會在顯示空間內顯示圖片，如果圖片比顯示空間大，則顯示空間只會顯示圖片中間部分。

自己可以嘗試寫一下試試，這裡就不貼圖了，因為感覺顯示的不太直觀，所以還得親自寫一下看看效果

color、colorBlendMode

在圖片繪製時可以對每一個畫素進行顏色混合處理，
color指定混合色，而colorBlendMode指定混合模式。

程式碼示例：

Image(
  image: AssetImage("images/logo.jpg"),
  width: 100.0,
  color: Colors.blue,
  colorBlendMode: BlendMode.difference,
);
複製程式碼

repeat

當圖片本身大小小於顯示空間時，指定圖片的重複規則。

也就是螢幕大，圖片小，用這個屬性來設定照片是否平鋪，相當於H5中的repeat

程式碼示例：

Image(
  image: AssetImage("images/logo.jpg"),
  width: 100.0,
  height: 200.0,
  repeat: ImageRepeat.repeatY ,	//設定照片在Y軸平鋪
)
複製程式碼

其他值：

  • repeat: ImageRepeat.repeatX //設定照片在X軸平鋪
  • repeat: ImageRepeat.noRepeat //設定照片不平鋪
  • repeat: ImageRepeat.repeat //設定照片在X軸、Y軸平鋪

Image快取

Flutter框架對載入過的圖片是有快取的（記憶體），預設最大快取數量是1000，最大快取空間為100M。

設定圓形圖片

這個單獨拿出來說一下，有一個元件可以直接設定圓形圖片，就是ClipOval

例如：

ClipOval(
 child: Image.network(
   "https://ss0.bdstatic.com/70cFvHSh_Q1YnxGkpoWK1HF6hhy/it/u=3289458325,1767138375&fm=26&gp=0.jpg",
    width: 100,
 ),
)
複製程式碼

他的執行效果直接就是一張圓形圖片，當然也可以使用decoration來自定義設定

有關decoration的使用，請移步：Flutter 容器控制元件篇-->Container

Icon

Flutter中，也可以像Web開發一樣使用iconfont，即字型圖示，就是將圖示做成字型檔案，然後通過指定不同的字元而顯示不同的圖片。
類似於element-ui裡面的引用字型圖示

在Flutter開發中，iconfont和圖片相比有如下優勢：

  • 體積小：可以減小安裝包大小。
  • 向量的：iconfont都是向量圖示，放大不會影響其清晰度。
  • 可以應用文字樣式：可以像文字一樣改變字型圖示的顏色、大小對齊等。
  • 可以通過TextSpan和文字混用。

Material Design字型圖示

Flutter預設包含了一套Material Design的字型圖示，
在pubspec.yaml檔案中的flutter中配置如下：

flutter:
  uses-material-design: true
複製程式碼

Material Design所有圖示檢視：material.io/resources/i…

使用方法：
Flutter封裝了IconData和Icon來專門顯示字型圖示，Icons類中包含了所有Material Design圖示的IconData靜態變數定義，

所以使用的時候，我們只需要使用Icons.加圖示名就可以了

程式碼示例：

Row(
  mainAxisAlignment: MainAxisAlignment.center,
  children: <Widget>[
    Icon(Icons.accessible,color: Colors.green,),
    Icon(Icons.error,color: Colors.green,),
    Icon(Icons.fingerprint,color: Colors.green,),
  ],
)
複製程式碼

自定義字型圖示

我們也可以使用自定義字型圖示。iconfont.cn(阿里巴巴的一個向量圖示庫)上有很多字型圖示素材，我們可以選擇自己需要的圖示打包下載

下載後，會生成一些不同格式的字型檔案，在Flutter中，我們使用ttf格式即可。

假設我們專案中需要使用一個微信圖示，

  1. 我們進到網站找到指定圖示並打包下載。

  2. 在專案下新建一個資料夾fonts用來存放我們的字型和圖示檔案（這兩者是可以放到一起的），然後將我們下載好的圖示檔案儲存到fonts資料夾下

  3. 接著在pubspec.yaml檔案下的flutter中引入

flutter:
  fonts:
    - family: myIcon  #指定一個字型名
      fonts:
        - asset: fonts/iconfont.ttf
複製程式碼

一定要注意空格，別多寫，也別少寫

  1. 為了使用方便，我們定義一個MyIcons類，功能和Icons類一樣，將字型檔案中的所有圖示都定義成靜態變數：
class MyIcons{
  // 微信圖示
  static const IconData wechat = const IconData(
      0xec7d,  
      fontFamily: 'myIcon', 
      matchTextDirection: true
  );
}
複製程式碼
  1. 在dart檔案中使用
Row(
  mainAxisAlignment: MainAxisAlignment.center,
  children: <Widget>[
    Icon(MyIcons.wechat,color: Colors.green,),
  ],
)
複製程式碼
  1. 執行，完美

H_H

相關文章