flutter 图片组件

Flutter Image组件简介

// Image组件在Flutter中用于显示图像。
// 主要有两种常用的构造函数：
// Image.asset：用于加载本地图片
// Image.network：用于加载远程图片

Image组件的常用属性

// alignment: 用于设置图片的对齐方式
// color和colorBlendMode: 用于设置图片的背景颜色并配合colorBlendMode混合图片颜色和背景色
// fit: 控制图片的拉伸和挤压，通常依赖于其父容器的大小
// repeat: 设置图片的平铺方式
// width 和 height: 控制图片的宽和高，结合ClipOval可以得到圆形效果
// 更多的属性可以参考Flutter的官方文档: 
https://api.flutter.dev/flutter/widgets/Image-class.html

引入本地图片的方法

// 1. 在Flutter项目的根目录下创建一个名为"images"的文件夹
// 2. 在"images"文件夹下创建子文件夹"2.0x"和"3.0x"
// 3. 将所需图片放入"images"、"2.0x"和"3.0x"目录下
// 4. 在pubspec.yaml文件中配置图片路径，使Flutter可以识别并加载它们

在页面中引入图片

Image组件宽高设置无效时的解决方案

// 当Image组件的宽高设置无效时，默认是根据其父元素的宽高进行显示。
// 可以通过添加Center组件来修正这个问题：
Center(
  child: Image.network(
    'https://img2018.cnblogs.com/i-beta/1020223/202002/1020223-20200218220048063-2073729639.png',
    width: 100,
    height: 100,
  ),
)

实现圆形图片的方法

// 方法一：使用BoxDecoration结合BorderRadius实现圆形图片
decoration: BoxDecoration(
  borderRadius: BorderRadius.circular(150),
  image: DecorationImage(
    image: NetworkImage('https://img2018.cnblogs.com/i-beta/1020223/202002/1020223-20200217224445705-1345514840.png'),
    fit: BoxFit.cover
  )
),

// 方法二：使用ClipOval直接将图片裁剪成圆形
child: ClipOval(
  child: Image.network(
    'https://img2018.cnblogs.com/i-beta/1020223/202002/1020223-20200217224445705-1345514840.png',
    width: 150,
    height: 150,
    fit: BoxFit.cover,
  ),
)