Flutter入門進階之旅（五）Image Widget

往期專題回顧：

前面咱們學習了Flutter中用於文本顯示的Widget，好比咱們顯示一行或者一段基本文字會用到Text Widget，若是須要跟Text設置樣式，顏色等屬性，咱們能夠經過給Text指定style來定製TextStyle中的樣式來展現咱們須要的效果，對於文本輸入控件，咱們學習了TextField，瞭解到能夠經過TextField完成簡單的文本輸入需求，能夠經過InputDecoration給輸入框添加樣式，好比舒服輔助提示、邊框、兩邊的icon等等。

今天咱們來學習一下另一個Widget---Image，顧名思義Image是用於展現圖片的控件，他跟Text同樣，同屬於StatelessWidget，關於StatelessWidget跟StatefullWidget我會在稍後的文章中具體講解，在此讀者可暫且忽略這一知識點，在作原生Android開發時，咱們能夠給ImageView指定不一樣的圖片來源，能夠是來源網絡、drawable、bitmap、文件等，在Flutter中一樣支持加載不一樣來源的圖片，只不過Flutter加載不一樣資源的圖片跟原生Android稍微有點差異，下面咱們一塊兒進入本期的主題。

Flutter加載不一樣資源圖片的方式：

• new Image, 用於從ImageProvider獲取圖像。
• new Image.asset, 用於從AssetBundle獲取圖像。
• new Image.network, 用於從URL獲取圖像。
• new Image.file, 用於從文件中獲取圖像。
• new Image.memory, 用於從內存中獲取圖像

在flutter中Image支持JPEG, PNG, GIF, Animated GIF, WebP, Animated WebP, BMP, 和 WBMP這幾種圖片格式。

1. 從網絡加載圖片：

爲了養成良好的代碼閱讀習慣，咱們仍是先來看下Image.network的構造方法

Image.network(String src, {
    Key key,
    double scale: 1.0,//縮小倍數
    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,
    Map<String, String> headers,
  })
複製代碼

經過構造方法，咱們能夠初步清楚的瞭解到在Flutter中加載網絡圖片，只須要在Image.network中指定圖片的src，也就是目標圖片的url便可，若是須要配置圖片寬高、縮放比對應構造方法去寫就好，下面實例代碼，展現了從目標url上加載圖片，而且把圖片的寬高設置爲500*500；

效果圖：

示例代碼：

import 'package:flutter/material.dart';
 
void main() {
  runApp(new MaterialApp(home: new ImageDemo()));
}
 
class ImageDemo extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    return new Scaffold(
      appBar: new AppBar(
        title: new TextField(
          decoration: new InputDecoration(),
        ),
      ),
      body: new Image.network("https://p1.ssl.qhmsg.com/dr/220__/t01d5ccfbf9d4500c75.jpg",width:500,height: 500,)
    );
  }
}
複製代碼

2. 從項目本地目錄加載圖片：

Flutter中加載項目目錄下的圖片，須要咱們先從pubspec.yaml中聲明導入資源後，才能在dart文件中使用圖片資源，否則即便圖片存在項目目錄下，在dart文件中你指定路徑後也不能正常加載，這點讀者應注意一下，跟咱們寫原生Android有點不一樣。

好比我在項目中把images文件夾下的兩張圖片aaa.png、a.png經過pubspec.yaml導入到項目中：

把上述代碼中body部分換成Image.asset方式。

body: new Image.asset('images/aaa.png',width: 500,height: 500,)
複製代碼

關於Image.asset的構造方法跟network大同小異，我就不貼出來了，讀者可自行查閱源碼，下面看下咱們從項目目錄下加載的圖片結束咱們本期關於Image的學習。

效果圖：