PHP直播平臺源碼實例講解圖片組件Image、Icon、ImageIcon

1.1 作用
顯示圖片，主要支持的加載方式：本地圖片、資源圖片 & 網絡圖片。

1.2 常用屬性

const Image({
    Key key,
    @required this.image,// ImageProvider，必填參數，接收一個ImageProvider 類型的值
    this.semanticLabel, // String，圖片的描述
    this.excludeFromSemantics = false, // bool，是否從語義上排除該圖片，默認值爲false
    this.width, // double，圖片的寬度
    this.height, // double，圖片的高度
    this.color, // Color，圖片的前景色，一般不設置或設置透明色，會覆蓋掉圖片，一般會和colorBlendMode結合使用
    this.colorBlendMode, // BlendMode，一般和color結合使用，設置color的混合模式
    this.fit, // BoxFit，設置圖片的顯示模式
    this.alignment = Alignment.center, // AlignmentGeometry，用於設置圖片的對齊方式，默認值：Alignment.center
    this.repeat = ImageRepeat.noRepeat, // ImageRepeat，圖片的重複方式，當圖片沒有完全覆蓋掉容器時使用。默認值：ImageRepeat.noRepeat
    ...
  })

下面，將詳細講解Image的屬性。

1.3 屬性image
接收一個ImageProvider類型的值。ImageProvider是一個抽象類
實現類主要包括：AssetImage、MemoryImage、NetworkImage、FileImage，分別表示可從資源、內存、網絡 & 文件中獲取圖片

// 加載網絡圖片
Image.network(String src, {
    Key key,
    double scale = 1.0,
    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,
    Map<String, String> headers,
  })

// 加載本地文件
  Image.file(File file, {
    Key key,
    double scale = 1.0,
    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.asset(String name, {
    Key key,
    AssetBundle bundle,
    this.semanticLabel,
    this.excludeFromSemantics = false,
    double scale,
    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,
    String package,
    this.filterQuality = FilterQuality.low,
  })

// 從內存中加載
 Image.memory(Uint8List bytes, {
    Key key,
    double scale = 1.0,
    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的構造方法裏也加入了快速從各種不同途徑獲得圖片的方式，Image的構造方法包括：

Image()  // 通用方法，使用ImageProvider實現，如下方法本質上也是使用的這個方法
Image.asset // 加載資源圖片
Image.file  // 加載本地圖片文件
Image.network  // 加載網絡圖片
Image.memory   // 加載Uint8List資源圖片

// 獲得資源圖片
new Image.asset('imgs/logo.jpeg')

// 獲得網絡圖片
new Image.network(
  'https://flutter.io/images/homepage/header-illustration.png')

// 獲得本地文件圖片
new Image.file(new File("/Users/gs/Downloads/1.jpeg"))

// 獲得Uint8List圖片
new Image.memory(bytes)

// 獲得使用ImageProvider加載圖片
new Image(image: new NetworkImage(
  "https://flutter.io/images/homepage/screenshot-2.png"),)