Flutter之Image Widget（六）

1. Image Widget

Image（图片组件）是显示图像的组件，一个显示图片的widget，支持图像格式：JPEG，PNG，GIF，动画GIF，WebP，动画WebP，BMP和WBM

构造方法
Image: 从ImageProvider获取数据
Image.network: 加载网络图片。
Image.asset: 加载本地图片文件。
new Image.file: 加载本地图片文件(File文件）图片。
new Image.memory: 加载Uint8List资源图片（byte数组）图片。

常用属性

属性名	功能	值所属类型
width	指定显示图片区域的宽(不是指图片的宽)	double
height	指定显示图片区域的高(不是指图片的高)	double
alignment	控制图片摆放的位置	Alignment
fit	属性用来控制图片的拉伸和挤压，这都是根据父容器来	BoxFit
color &colorBlendMode	两个属性需要配合使用，就是颜色和图片混	BlendMode
repeat	设置图片重复显示	ImageRepeat

1.1 Image.network: 加载网络图片

class _MSHomeContentState extends State {
  final String? url =
      "https://gimg2.baidu.com/image_search/src=http%3A%2F%2Fpic.jj20.com%2Fup%2Fallimg%2F1111%2F10261Q11437%2F1Q026111437-6.jpg&refer=http%3A%2F%2Fpic.jj20.com&app=2002&size=f9999,10000&q=a80&n=0&g=0n&fmt=auto?sec=1652329013&t=e2f4d102ad1a07e80f06bc097292888f";
  @override
  Widget build(BuildContext context) {
    return Image(
      image: NetworkImage(url!),
      width: 200,
      height: 200,
      // BoxFit.fill 填充，会变形
      // BoxFit.contain 默认contain 全图居中显示但不充满，显示原比例
      // BoxFit.cover 截取 保持宽高
      // BoxFit.fitWidth 宽度一定 高度自适应
      // BoxFit.fitHeight 高度一定 宽度自适应
      // BoxFit.scaleDown 效果和contain差不多， 但是只能缩小图片，不能放大图片
      fit: BoxFit.scaleDown,
      // Alignment 取值-1～1，（0，0）表示中心点，最左上角（-1，-1）
      alignment: Alignment(0, 0),
      // 混入颜色，不是背景色，是把颜色混入到图片的像素中
      color: Colors.red,
      // 颜色混入模式
      colorBlendMode: BlendMode.colorDodge,
      // 图片占不满时，在某个方向重复，BoxFit.contain 有效
      repeat: ImageRepeat.repeatY,
    );
  }
}

class _MSHomeContentState extends State {
  final String? url =
      "https://gimg2.baidu.com/image_search/src=http%3A%2F%2Fpic.jj20.com%2Fup%2Fallimg%2F1111%2F10261Q11437%2F1Q026111437-6.jpg&refer=http%3A%2F%2Fpic.jj20.com&app=2002&size=f9999,10000&q=a80&n=0&g=0n&fmt=auto?sec=1652329013&t=e2f4d102ad1a07e80f06bc097292888f";
  @override
  Widget build(BuildContext context) {
    return Image.network(
      url!,
      width: 200,
      height: 200,
      fit: BoxFit.fitWidth,
      alignment: Alignment.topCenter,
    );
  }
}

1.2 Image.asset: 加载本地图片

在Flutter项目中创建文件夹，存储图片

截屏2022-04-12 下午2.32.56.png
在pubspec.yaml配置

  assets:
    - assets/images/

使用图片图片路径完整

assets/images/fengjing3.webp

class _MSHomeContentState extends State {
  @override
  Widget build(BuildContext context) {
    // 1.在Flutter项目中创建文件夹，存储图片
    // 2.在pubspec.yaml配置
    // 3.使用图片 图片路径要完整
    return Image.asset(
      "assets/images/fengjing3.webp",
    );
  }
}

class _MSHomeContentState extends State {
  @override
  Widget build(BuildContext context) {
    // 1.在Flutter项目中创建文件夹，存储图片
    // 2.在pubspec.yaml配置
    // 3.使用图片 图片路径要完整
    return Image(image: AssetImage("assets/images/fengjing2.webp"));
  }
}

1.3 实现圆形图像

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

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

class _MSHomeContentState extends State {
  @override
  Widget build(BuildContext context) {
    return Center(
      child: CircleAvatar(
        radius: 100,
        backgroundImage: AssetImage("assets/images/fengjing3.webp"),
      ),
    );
  }
}

截屏2022-04-12 下午2.54.26.png

在图片上加一个文本

class _MSHomeContentState extends State {
  @override
  Widget build(BuildContext context) {
    return Center(
      child: CircleAvatar(
        radius: 100,
        backgroundImage: AssetImage("assets/images/fengjing3.webp"),
        child: Container(
          alignment: Alignment(0, .5),
          width: 200,
          height: 200,
          child: Text(
            "湖泊风景",
            style: TextStyle(color: Colors.white),
          ),
        ),
      ),
    );
  }
}

截屏2022-04-12 下午2.55.20.png

方式二：ClipOval

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

class _MSHomeContentState extends State {
  final String? url =
      "https://tva1.sinaimg.cn/large/006y8mN6gy1g7aa03bmfpj3069069mx8.jpg";
  @override
  Widget build(BuildContext context) {
    return Center(
      child: ClipOval(
        child: Image.network(
          url!,
          width: 200,
          height: 200,
        ),
      ),
    );
  }
}

截屏2022-04-12 下午2.54.09.png

方式三：Container+BoxDecoration

class _MSHomeContentState extends State {
  final String? url =
      "https://tva1.sinaimg.cn/large/006y8mN6gy1g7aa03bmfpj3069069mx8.jpg";
  @override
  Widget build(BuildContext context) {
    return Center(
      child: Container(
        width: 200,
        height: 200,
        decoration: BoxDecoration(
          image: DecorationImage(image: NetworkImage(url!)),
          shape: BoxShape.circle,
        ),
      ),
    );
  }
}

1.4 实现圆角图像

方法一：ClipRRect

class _MSHomeContentState extends State {
  final String? url =
      "https://tva1.sinaimg.cn/large/006y8mN6gy1g7aa03bmfpj3069069mx8.jpg";
  @override
  Widget build(BuildContext context) {
    return Center(
        child: ClipRRect(
      borderRadius: BorderRadius.circular(40),
      child: Image.network(
        url!,
        width: 200,
        height: 200,
      ),
    ));
  }
}

方法二：Container + BoxDecoration

class _MSHomeContentState extends State {
  final String? url =
      "https://tva1.sinaimg.cn/large/006y8mN6gy1g7aa03bmfpj3069069mx8.jpg";
  @override
  Widget build(BuildContext context) {
    return Center(
      child: Container(
        width: 200,
        height: 200,
        decoration: BoxDecoration(
          image: DecorationImage(image: NetworkImage(url!)),
          shape: BoxShape.rectangle,
          borderRadius: BorderRadius.circular(20),
        ),
      ),
    );
  }
}

截屏2022-04-12 下午3.10.50.png

1.5 占位图

class _MSHomeContentState extends State {
  @override
  Widget build(BuildContext context) {
    // 占位图 FadeInImage
    final String? url =
        "https://tva1.sinaimg.cn/large/006y8mN6gy1g7aa03bmfpj3069069mx8.jpg";
    return Column(
      children: [
        FadeInImage(
          placeholder: AssetImage("assets/images/fengjing3.webp"),
          image: NetworkImage(url!),
          fadeInDuration: Duration(milliseconds: 100),
          fadeOutDuration: Duration(milliseconds: 1),
        )
      ],
    );
  }
}

补充知识点
Icon字体图标和图片图标的区别？

Icon是字体图标，字体图标是矢量图，放大不会失真
字体图标可以设置颜色
图标很多时，字体图标占据空间更小

class _MSHomeContentState extends State {
  @override
  Widget build(BuildContext context) {
    // Icon 字体图标
    return Column(
      children: [
        Icon(
          Icons.pets,
          size: 100,
          color: Colors.green,
        ),
        Icon(
          IconData(0xe4a1, fontFamily: 'MaterialIcons'),
          size: 100,
          color: Colors.red,
        ),
        // 使用Text显示图标
        // 1.0xe4a1 -> unicode编码
        // 2.设置对应的字体
        Text(
          "\ue4a1",
          style: TextStyle(
            fontFamily: 'MaterialIcons',
            fontSize: 100,
            color: Colors.yellow,
          ),
        )
      ],
    );
  }
}

Colors.red 是一个MaterialColor对象，为什么可以使用[]（Colors.red[10]）来设置颜色 ?
MaterialColor 继承于ColorSwatch，ColorSwatch中有[] 运算符重载;

Color? operator [](T index) => _swatch[index]