案例概述

Image 组件用于显示图片。Flutter 支持多种图片源，如网络图片、本地文件、资源等。本案例展示了如何使用 Image 组件显示各种图片。

核心概念

1. 图片源

Image 支持多种图片源：网络、本地文件、资源、内存等。

2. 图片适配

可以通过 fit 参数控制图片如何适配容器。

3. 缓存

Flutter 自动缓存网络图片。

代码详解

示例 1：网络图片

class NetworkImageExample extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    return Image.network(
      'https://example.com/image.jpg',
      width: 200,
      height: 200,
      fit: BoxFit.cover,
    );
  }
}

代码解释： 这个示例展示了加载网络图片。通过 fit 参数控制图片适配方式。

示例 2：本地图片

class AssetImageExample extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    return Image.asset(
      'assets/images/logo.png',
      width: 200,
      height: 200,
    );
  }
}

代码解释： 这个示例展示了加载本地资源图片。

示例 3：带加载指示器的图片

class ImageWithLoadingExample extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    return Image.network(
      'https://example.com/image.jpg',
      width: 200,
      height: 200,
      loadingBuilder: (context, child, loadingProgress) {
        if (loadingProgress == null) {
          return child;
        }
        return Center(
          child: CircularProgressIndicator(
            value: loadingProgress.expectedTotalBytes != null
                ? loadingProgress.cumulativeBytesLoaded /
                    loadingProgress.expectedTotalBytes!
                : null,
          ),
        );
      },
    );
  }
}

代码解释： 这个示例展示了带加载指示器的图片。通过 loadingBuilder 显示加载进度。

示例 4：圆形图片

class CircularImageExample extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    return ClipOval(
      child: Image.network(
        'https://example.com/image.jpg',
        width: 100,
        height: 100,
        fit: BoxFit.cover,
      ),
    );
  }
}

代码解释： 这个示例展示了圆形图片。通过 ClipOval 裁剪为圆形。

示例 5：图片网格

class ImageGridExample extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    return GridView.count(
      crossAxisCount: 3,
      children: List.generate(9, (index) {
        return Image.network(
          'https://example.com/image$index.jpg',
          fit: BoxFit.cover,
        );
      }),
    );
  }
}

代码解释： 这个示例展示了图片网格。使用 GridView 显示多个图片。

高级话题

1. 动态/响应式设计

根据屏幕大小调整图片。

2. 动画与过渡

自定义图片加载动画。

3. 搜索/过滤/排序

过滤图片。

4. 选择与批量操作

支持图片选择。

5. 加载与缓存

缓存图片。

6. 键盘导航

支持键盘快捷键。

7. 无障碍支持

提供无障碍支持。

8. 样式自定义

自定义样式。

9. 数据持久化/导出

保存图片。

10. 单元测试与集成测试

测试功能。

PC 端适配要点

• 根据屏幕大小调整图片大小
• 支持鼠标悬停效果
• 提供清晰的图片指示

实际应用场景

• 头像显示：显示用户头像
• 产品图片：显示产品图片
• 背景图片：显示背景
• 图片库：显示图片集合

扩展建议

• 学习高级图片库
• 研究性能优化
• 探索自定义效果
• 集成图片编辑库

总结

Image 组件是显示图片的基本方式。通过灵活使用 Image，可以创建各种图片效果。欢迎加入开源鸿蒙跨平台社区：https://openharmonycrossplatform.csdn.net