[Flutter 基础] - Flutter基础组件 - Image

Image组件是Flutter中的基础组件之一，也是我们常用来展示图片的核心组件。它既可以展示本地图片，也可以展示网络图片。 这篇文章主要是通过一些简单的demo来了解一下这个组件基本用法。

---

一、基本用法

首先得确保在 pubspec.yaml 中配置有配置过图片的基础路径，否则项目可能识别不到图片的本地路径：

flutter:
  assets:
    - assets/images/  # 指定图片目录

我们常用的图片加载方式一般都分为三种：

1. 加载本地图片

• 使用 Image.asset 加载：

 Image.asset('assets/images/girl.jpeg',  // 图片的本地地址
   width: 100,
   height: 100,
   fit: BoxFit.cover, // 图片填充方式
 );

2. 加载网络图片

• 使用 Image.network ：

  Image.network(
    'https://picsum.photos/200', // 图片的url地址
    fit: BoxFit.cover,
    width: 200,
    height: 200,
  );

3. 从二进制数据加载

网络图片除了直接url的方式，还有一种是通过接口返回二进制数据或者base64位的数据。image组件也是支持的。

• 使用 Image.memory （适用于从数据库或加密存储读取的二进制数据）：

  Image.memory(
    Uint8List.fromList(bytes), // bytes 是二进制数据
    scale: 2.0, // 缩放系数（适配高分辨率设备）
  );

---

二、关键属性详解

1. 尺寸控制

• width 和 height ：
  • 直接设置图片宽高，但可能因比例导致变形。
  • 最佳实践 ：优先使用 fit 属性控制填充方式，而非强制设置尺寸。

2. fit 属性（填充模式）

控制图片如何适应容器，共有 7 种模式：

模式	行为描述	典型场景
BoxFit.fill	拉伸填满容器，忽略宽高比（可能导致变形）	背景图（需完全覆盖）
BoxFit.contain	保持比例缩放，完整显示内容，可能留白	产品详情图、需完整展示的图标
BoxFit.cover	保持比例缩放，完全覆盖容器并裁剪超出部分	用户头像、封面图
BoxFit.fitWidth	按宽度填满容器，高度按比例缩放，可能超出或留白	横向轮播图（固定宽度）
BoxFit.fitHeight	按高度填满容器，宽度按比例缩放，可能超出或留白	纵向海报（固定高度）
BoxFit.scaleDown	缩小图片以适应容器，但不会放大（原图比容器小则保持原尺寸）	动态内容（避免小图被放大）
BoxFit.none	以原始尺寸显示，可能溢出或被裁剪（需配合 clipBehavior）	像素级精确显示（游戏贴图）

3. 其他常用属性

• alignment ：调整图片在容器中的对齐方式（默认 Alignment.center）。
• color 和 colorBlendMode：为图片添加混合颜色（如半透明背景色）。
• repeat ：设置图片重复方式（noRepeat、repeat、repeatX、repeatY），适用于背景图。
• gaplessPlayback：避免图片加载时的闪烁（适用于动画）。

---

三、特殊效果实现

项目开发过程中，很少直接使用长方形，或者正方形的图片，大多数都是需要经过一些特殊处理，比如圆形的头像，圆角的长方形或者正方形等。那这种场景就可以借助ClipOval和ClipRect来实现这个效果。

1. 圆形/圆角图片

• 使用 ClipOval 或 ClipRRect：

```dart
ClipOval(
  child: Image.network(
    'https://example.com/avatar.jpg',
    fit: BoxFit.cover,
    width: 100,
    height: 100,
  ),
);
```

ClipRRect(
  borderRadius: BorderRadius.circular(30),
  child: Image.network(
    'https://picsum.photos/300',
    fit: BoxFit.cover,
    width: 200,
    height: 200,
  ),
);

2. 背景色混合

• 通过 color 和 colorBlendMode 添加滤镜：

ClipRRect(
  borderRadius: BorderRadius.circular(30),
  child: Image.network(
    'https://picsum.photos/300',
    width: 200,
    height: 200,
   color: Colors.red.withOpacity(0.5),
   colorBlendMode: BlendMode.srcOver,
  ),
);

---

七、总结

Flutter 的 Image 组件功能强大，通过灵活使用 fit、width/height、ClipOval等特性，可以高效实现复杂图片展示需求。尤其是特殊效果（如圆形、滤镜）可借助 Clip 和 BlendMode 实现。