Flutter 基礎組件：圖片和Icon

前言

Flutter中，可以通過Image組件來加載並顯示圖片，Image的數據源可以是asset、文件、內存以及網絡。
ImageProvider 是一個抽象類，主要定義了圖片數據獲取的接口load()，從不同的數據源獲取圖片需要實現不同的ImageProvider ，如AssetImage是實現了從Asset中加載圖片的ImageProvider，而NetworkImage實現了從網絡加載圖片的ImageProvider。
Image widget有一個必選的image參數，它對應一個ImageProvider。

實例

// 圖片、Icon


import 'package:flutter/material.dart';

class ImageRoute extends StatelessWidget {

  @ override
  Widget build(BuildContext context) {
    var assetImg = AssetImage('assets/images/辣椒.png');
    var networkImg = NetworkImage('https://avatars2.githubusercontent.com/u/20411648?s=460&v=4');

    return SingleChildScrollView(
      child: Column(
        children: <Image>[

          // 從assets中加載圖片
          Image(
            image: assetImg,
            width: 100.0,
          ),

          // 從網絡加載圖片
          Image(
            image: networkImg,
            width: 100.0,
          ),

          Image(
            image: networkImg,
            // width、height：用於設置圖片的寬、高，當不指定寬高時，圖片會根據當前父容器的限制，盡可能的顯示其原始大小，
            // 如果只設置width、height的其中一個，那么另一個屬性默認會按比例縮放，但可以通過fit屬性來指定適應規則。
            width: 100.0,
            height: 200.0,
            // 圖片的混合色值
            color: Colors.blue,
            // 圖片的混合模式
            colorBlendMode: BlendMode.difference,
            // 對齊方式
            alignment: Alignment.center,
            // 重復方式，當圖片本身大小小於顯示空間時，指定圖片的重復規則
            repeat: ImageRepeat.repeatY,
          ),

          // 下面來討論fit屬性
          Image(
            image: networkImg,
            height: 50.0,
            width: 100.0,
            // 會拉伸填充滿顯示空間，圖片本身長寬比會發生變化，圖片會變形。
            fit: BoxFit.fill,
          ),
          Image(
            image: networkImg,
            height: 50,
            width: 50.0,
            // 默認適應規則，圖片會在保證圖片本身長寬比不變的情況下縮放以適應當前顯示空間，圖片不會變形。
            fit: BoxFit.contain,
          ),
          Image(
            image: networkImg,
            width: 100.0,
            height: 50.0,
            // 會按圖片的長寬比放大后居中填滿顯示空間，圖片不會變形，超出顯示空間部分會被剪裁。
            fit: BoxFit.cover,
          ),
          Image(
            image: networkImg,
            width: 100.0,
            height: 50.0,
            // 圖片的寬度會縮放到顯示空間的寬度，高度會按比例縮放，然后居中顯示，圖片不會變形，超出顯示空間部分會被剪裁。
            fit: BoxFit.fitWidth,
          ),
          Image(
            image: networkImg,
            width: 100.0,
            height: 50.0,
            // 圖片的高度會縮放到顯示空間的高度，寬度會按比例縮放，然后居中顯示，圖片不會變形，超出顯示空間部分會被剪裁。
            fit: BoxFit.fitHeight,
          ),
          Image(
            image: networkImg,
            width: 100.0,
            height: 50.0,
            // 圖片按比例適應。
            fit: BoxFit.scaleDown,
          ),
          Image(
            image: networkImg,
            height: 50.0,
            width: 100.0,
            // 圖片沒有適應策略，會在顯示空間內顯示圖片，如果圖片比顯示空間大，則顯示空間只會顯示圖片中間部分。
            fit: BoxFit.none,
          ),

        ].map((e){
          return Row(
            children: <Widget>[
              Padding(
                padding: EdgeInsets.all(10.0),
                child: SizedBox(
                  width: 100,
                  child: e,
                ),
              ),
              Text(e.fit.toString())
            ],
          );
        }).toList(),
      ),
    );
  }

}

class MyIcons{
  // 微信圖標
  static IconData weChat = const IconData(0xe620, fontFamily: 'MyIcon', matchTextDirection: true);

  // 新春圖標
  static IconData newYear = const IconData(0xe64a, fontFamily: 'MyIcon', matchTextDirection: true);
}

class IconRoute extends StatelessWidget {

  @override
  Widget build(BuildContext context) {
    return Row(
      mainAxisAlignment: MainAxisAlignment.center,
      children: <Widget>[
        // 使用Material Design字體圖標
        Icon(Icons.accessible, color: Colors.green,),
        Icon(Icons.error, color: Colors.green,),
        Icon(Icons.fingerprint, color: Colors.green,),
        // 使用自定義字體圖標
        Icon(MyIcons.weChat, color: Colors.green,),
        Icon(MyIcons.newYear, color: Colors.green,),

      ],
    );
  }

}

注意點

1. 使用自定義字體圖標時，下載資源是要注意，在iconfont.cn選取圖標后，加到項目中，點擊“下載到本地”，注意：這里下載只能瀏覽器，不能用迅雷等插件。
2. 下載成功后，將iconfont.ttf文件放在項目文件下，進行pubspec.yaml的配置。使用時，打開下載文件中的html頁面或者在個人中心中得到圖標的Unicode，但是這個Unicode不能直接用，例如得到“微信”的Unicode為“&#xe620”，使用時改為“0xe620”，這時，可能IDE顯示的圖標對應不上，但是熱重載后圖標會顯示成功。