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"),)