5. Flutter - 基础组件 之 Image/Icon

Image widget： 用于图片的展示。
Icon：字体图标

1. Image属性介绍

Image 构造方法：

 const Image({
  Key key,
  //ImageProvider类型必传参数，为要显示的图像
  @required this.image,
  //ImageFrameBuilder类型可选命名参数，是一个Function，返回一个代表该图像的Widget
  this.frameBuilder,
  //ImageLoadingBuilder类型可选命名参数，用于指定在图像加载过程中向用户展示的Widget
  this.loadingBuilder,
  //String类型可选命名参数，为图像的语义标签
  this.semanticLabel,
  //bool类型可选命名参数，是否从语义中排除此图像
  this.excludeFromSemantics = false,
  //double类型可选命名参数，图像要显示的宽度
  this.width,
  //double类型可选命名参数，图像要显示的高度
  this.height,
  //Color类型可选命名参数，如果不为null，则使用colorBlendMode将此颜色与每个图像像素混合
  this.color,
  //BlendMode类型可选命名参数，用于设置color与图像混合的模式
  this.colorBlendMode,
  //BoxFit类型可选命名参数，用于设置图像的填充模式
  this.fit,
  //AlignmentGeometry类型可选命名参数，设置图像的对齐模式，其为抽象类，使用其子类Alignment
  this.alignment = Alignment.center,
  //ImageRepeat类型可选命名参数，用于设置布局中图像的重复模式
  this.repeat = ImageRepeat.noRepeat,
  //Rect类型可选命名参数，用于设置当一个图片被拉伸时的范围
  this.centerSlice,
  //bool类型可选命名参数，用于设置是否以TextDirection相同的方向来绘制图像
  this.matchTextDirection = false,
  //bool类型可选命名参数，用于设置在图像提供者更改时，是否继续显示旧图像。
  //true为显示旧图像，false为暂时不显示任何图像
  this.gaplessPlayback = false,
  //FilterQuality类型可选命名参数，用于设置图片的过滤质量
  this.filterQuality = FilterQuality.low,
})
  })

以上部分介绍摘录自：flutter基础之组件基础Text
原文作者： 陌问MW
更详细介绍可转至原文查看。

• width、height：用于设置图片的宽、高，当不指定宽高时，图片会根据当前父容器的限制，尽可能的显示其原始大小，如果只设置width、height的其中一个，那么另一个属性默认会按比例缩放，但可以通过fit属性来指定适应规则。
• fit：该属性用于在图片的显示空间和图片本身大小不同时指定图片的适应模式。适应模式是在BoxFit中定义，它是一个枚举类型，有如下值：
• fill：会拉伸填充满显示空间，图片本身长宽比会发生变化，图片会变形。
• cover：会按图片的长宽比放大后居中填满显示空间，图片不会变形，超出显示空间部分会被剪裁。
• contain：这是图片的默认适应规则，图片会在保证图片本身长宽比不变的情况下缩放以适应当前显示空间，图片不会变形。
• fitWidth：图片的宽度会缩放到显示空间的宽度，高度会按比例缩放，然后居中显示，图片不会变形，超出显示空间部分会被剪裁。
• fitHeight：图片的高度会缩放到显示空间的高度，宽度会按比例缩放，然后居中显示，图片不会变形，超出显示空间部分会被剪裁。
• none：图片没有适应策略，会在显示空间内显示图片，如果图片比显示空间大，则显示空间只会显示图片中间部分。
• color和colorBlendMode：在图片绘制时可以对每一个像素进行颜色混合处理，color指定混合色，而colorBlendMode指定混合模式；
• repeat：当图片本身大小小于显示空间时，指定图片的重复规则。

1.1 加载网络图片

Flutter中加载网络图片相对简单，直接传入URL并不需要什么配置。
代码示例：

  final String img1 =
      'https://ss0.bdstatic.com/70cFvHSh_Q1YnxGkpoWK1HF6hhy/it/u=2654147508,37302540&fm=11&gp=0.jpg';
  @override
  Widget build(BuildContext context) {
    return Image(
      image: NetworkImage(img1),
      width: 400,
      height: 400,
      // colorBlendMode: BlendMode.clear,
      repeat: ImageRepeat.repeat,
      // fit: BoxFit.fitWidth,
      // alignment: Alignment.topCenter,
      // x  : -1 ~ 1
      // y : -1 ~ 1  因为现在fit 为 fitWidth, width已经填充满, 所以更改x无效
      alignment: Alignment(1, 0),
    );
  }
}

class ImageLoading2 extends StatelessWidget {
  final String img1 =
      'https://ss0.bdstatic.com/70cFvHSh_Q1YnxGkpoWK1HF6hhy/it/u=2654147508,37302540&fm=11&gp=0.jpg';

  @override
  Widget build(BuildContext context) {
    return Image.network(img1);
  }
}

1.2 加载本地图片

加载本地图片，需要将图片引入，并且进行配置：

• 创建图片资源文件

• 在pubspec.yaml文件中进行图片配置

  
  图片资源配置.png
• 设置图Image(image:AssetImage('assets/images/xk.jpg'))

代码示例：

class ImageLocalLoading extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    return Image(image: AssetImage('assets/images/xk.jpg'));
  }
}

1.3 占位图设置

class PlaceholderImage extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    final String img1 =
        'https://ss0.bdstatic.com/70cFvHSh_Q1YnxGkpoWK1HF6hhy/it/u=2654147508,37302540&fm=11&gp=0.jpg';

    return FadeInImage(
        placeholder: AssetImage('assets/images/xk.jpg'),
        fadeOutDuration: Duration(milliseconds: 200),
        fadeInDuration: Duration(milliseconds: 50),
        image: NetworkImage(img1));
  }
}

1.4 圆角设置

• 方式一：CircleAvatar
  CircleAvatar可以实现圆角头像，也可以添加一个子Widget：

const CircleAvatar({
    Key key,
    // 子Widge
    this.child,
    // 背景颜色
    this.backgroundColor,
    // 背景图像
    this.backgroundImage,
    // 
    this.onBackgroundImageError,
    // 前景颜色
    this.foregroundColor,
    // 半径
    this.radius,
    // 最小半径
    this.minRadius,
    // 最大半径
    this.maxRadius,
  }) 

示例代码：

class CircleImage extends StatelessWidget {
  final String img1 =
      'https://ss0.bdstatic.com/70cFvHSh_Q1YnxGkpoWK1HF6hhy/it/u=2654147508,37302540&fm=11&gp=0.jpg';

  @override
  Widget build(BuildContext context) {
    return Center(
      child: CircleAvatar(
        radius: 100,
        backgroundImage: NetworkImage(img1),
        child: Container(
            alignment: Alignment(0, .5),
            width: 200,
            height: 200,
            child: Text("星空")),
      ),
    );
  }
}

• 方式二：ClipOval

ClipOval也可以实现圆角头像，而且通常是在只有头像时使用

class CircleImage2 extends StatelessWidget {
  final String img1 =
      'https://ss0.bdstatic.com/70cFvHSh_Q1YnxGkpoWK1HF6hhy/it/u=2654147508,37302540&fm=11&gp=0.jpg';

  @override
  Widget build(BuildContext context) {
    return Center(
      child: ClipOval(
        child: Image.network(
          img1,
          width: 200,
          height: 200,
        ),
      ),
    );
  }
}

• 方式三：ClipRRect

class CircleImage3 extends StatelessWidget {
  final String img1 =
      'https://ss0.bdstatic.com/70cFvHSh_Q1YnxGkpoWK1HF6hhy/it/u=2654147508,37302540&fm=11&gp=0.jpg';

  @override
  Widget build(BuildContext context) {
    return Center(
      child: ClipRRect(
        borderRadius: BorderRadius.circular(100),
        child: Image.network(
          img1,
          width: 200,
          height: 200,
        ),
      ),
    );
  }
}

2. Icon 字体图标

Flutter中的Icon为字体图标，有以下几个特点：

1. 字体图标矢量图（放大不失真）
2. 字体图标可以设置颜色
3. 图标很多时，占据的空间更小

class IconDemo extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    return Icon(
      Icons.add,
      color: Colors.red,
      size: 100,
    );
  }
}

// 利用字符 显示 图标 需指定Unicode编码及字体样式
class StringIcon extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    return Text(
      '\ue567',
      style: TextStyle(
          fontFamily: 'MaterialIcons', color: Colors.blue, fontSize: 100),
    );
  }
}