[flutter-02] Image

Image

1. 加载网络图片

const Image({
  ...
  this.width, //图片的宽
  this.height, //图片高度
  this.color, //图片的混合色值
  this.colorBlendMode, //混合模式
  this.fit,//缩放模式
  this.alignment = Alignment.center, //对齐方式
  this.repeat = ImageRepeat.noRepeat, //重复方式
  ...
})

// width & height
width、height：用于设置图片的宽、高，当不指定宽高时，图片会根据当前父容器的限制，尽可能的显示其原始大小，
如果只设置width、height的其中一个，那么另一个属性默认会按比例缩放，但可以通过下面介绍的fit属性来指定适应规则。

// fit
该属性用于在图片的显示空间和图片本身大小不同时指定图片的适应模式。适应模式是在BoxFit中定义，它是一个枚举类型，有如下值：

fill：会拉伸填充满显示空间，图片本身长宽比会发生变化，图片会变形。// 拉伸填满全屏、图片变形

cover：会按图片的长宽比放大后居中填满显示空间，图片不会变形，超出显示空间部分会被剪裁。// 被裁剪、比例全屏、图片不变形

contain：这是图片的默认适应规则，图片会在保证图片本身长宽比不变的情况下缩放以适应当前显示空间，图片不会变形。 // 默认

fitWidth：图片的宽度会缩放到显示空间的宽度，高度会按比例缩放，然后居中显示，图片不会变形，超出显示空间部分会被剪裁。 // 宽度全部显示容器、高度比例缩放

fitHeight：图片的高度会缩放到显示空间的高度，宽度会按比例缩放，然后居中显示，图片不会变形，超出显示空间部分会被剪裁。 // 高度全是显示容器、宽度比例缩放

none：图片没有适应策略，会在显示空间内显示图片，如果图片比显示空间大，则显示空间只会显示图片中间部分。 // 没有任何适配规则

// repeat
repeat：当图片本身大小小于显示空间时，指定图片的重复规则。

// color & colorBlendMode
color和 colorBlendMode：在图片绘制时可以对每一个像素进行颜色混合处理，color指定混合色，而colorBlendMode指定混合模式；

 Image.network：加载网络中的图片
// 例如 Image.network(imageUrl) // 展示网络图片链接URL

class ImageNetworkWidget extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    return Center(
      child: Container( // 相当于一个容器UIView
        width: 355,
        height: 300,
        color: Colors.black, // Container背景色
        child: Image.network(
          // 加载网络图片
          'http://img0.dili360.com/ga/M01/48/3C/wKgBy1kj49qAMVd7ADKmuZ9jug8377.tub.jpg',
          alignment: Alignment.topCenter, // 对齐方式
          repeat: ImageRepeat.noRepeat, // 重复方式
          colorBlendMode: BlendMode.colorDodge,
          fit: BoxFit.fitHeight, // 高度全屏、宽度缩放
        ),
      ),
    );
  }
}

2. 加载本地图片

• 1. 先引入图片，建议创建一个Images文件夹
• 2. 在pubspec.yaml 文件中打开注释 # assets:
• 3. 按照格式书写，如
     assets:
     • images/02.jpeg

class ImageAssetWidget extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    return Center(
      child: Image.asset(
        // 这里可以不用Container()包裹、如果需要背景色则可以使用Container
        'images/02.jpeg',
        width: 355,
        // height: 300,
        fit: BoxFit.contain,
      ),
    );
  }
}