Image是Flutter中的图片组件，类似于iOS中的UIImageView，可加载资源图片、网络图片、本地图片等，可设置拉伸方式，重复模式等。

Image加载方法

Image的加载方法有以下几种：

  • Image.asset，加载本地图片，比如打包到项目中的图片
  • Image.file，加载设备中的图片，比如存储到本地的图片
  • Image.memory，加载内存中的图片
  • Image.network，加载网络图片

使用方式各有不同，如下：

  • Image.asset(name)是Image(image: AssetImage(name))
  • Image.file(path)是Image(image: FileImage(File(path)))
  • Image.network(url)是Image(image: NetworkImage(url))
  • Image.memory(list)是Image(image: MemoryImage(list))

而且：

使用asset images时，图片打包在apk或ipa中，会导致包变大 加载时间对比：NetworkImage > FileImage > AssetImage > MemoryImage

Image.asset

Flutter加载本地图片，参考添加资源和图片，步骤如下：

  1. 找到pubspec.yaml文件，找到这里# To add assets to your application, add an assets section, like this:，打开下面的注释，这里需要注意yaml文件的格式对齐问题；
  2. 和pubspec.yaml并列创建一个assets文件夹，里面放入图片；
  3. 然后编辑第一步打开的注释文件，写入图片的路径，但是需要注意路径要包含最外层的assets，示例如下：

Flutter组件基础——Image - 图1
Flutter组件基础——Image - 图2

添加成功后，使用时，也需要注意路径是从assets开始的，代码如下：

  2. class MyApp extends StatelessWidget {
  3.   @override
  4.   Widget build(BuildContext context) {
  5.     return MaterialApp(
  6.       title: 'Text Widget',
  7.       home: Scaffold(
  8.         body: Center(
  9.           child: Container(
  10.             child: new Image.asset('assets/images/jietu.png'),
  11.             // child: new Image(
  12.             //   image: AssetImage('assets/images/jietu.png'),
  13.             // ),
  14.             width: 300.0,
  15.             height: 200.0,
  16.             color: Colors.lightBlue,
  17.           ),
  18.         ),
  19.       ),
  20.     );
  21.   }
  22. }

Image.network

加载网络图片，代码如下：

  2. class MyApp extends StatelessWidget {
  3.   @override
  4.   Widget build(BuildContext context) {
  5.     return MaterialApp(
  6.       title: 'Text Widget',
  7.       home: Scaffold(
  8.         body: Center(
  9.           child: Container(
  10.             child: new Image.network(
  11.               'https://inews.gtimg.com/newsapp_ls/0/13792660143/0.jpeg',
  12.             ),
  13.             width: 300.0,
  14.             height: 200.0,
  15.             color: Colors.lightBlue,
  16.           ),
  17.         ),
  18.       ),
  19.     );
  20.   }
  21. }

Image的属性

Image的常用属性如下：

  • alignment: 图片相对于父视图的对齐方式，当图片大小小于父视图大小时可看出效果
    • topLeft：顶部左对齐
    • topCenter：顶部居中对齐
    • topRight：顶部右对齐
    • centerLeft：中间左对齐
    • center：中间对齐
    • centerRight：中间右对齐
    • bottomLeft：底部左对齐
    • bottomCenter：底部居中对齐
    • bottomRight：底部右对齐
  • color: 不为空时，根据colorBlendMode来对图片对每个像素进行混合
  • colorBlendMode: 图片混合模式
  • filterQuality: 图片渲染对质量
  • fit: 图片显示模式
    • BoxFit.fill，图片充满整个父视图区域，可能会被拉伸
    • BoxFit.contain，图片按照原始比例显示，可能会留有边距
    • BoxFit.cover，图片充满整个父视图且保持原比例，可能会裁切
    • BoxFit.fitwidth，按宽度充满父视图，保持比例
    • BoxFit.fitHeight，按高度充满父视图，保持比例
    • BoxFit.scaleDown
  • height: 图片宽度
  • width: 图片高度
  • repeat: 图片重复模式
    • ImageRepeat.repeat，各个方向都重复，铺满父视图
    • ImageRepeat.repeatX，横向重复铺满父视图
    • ImageRepeat.repeatY，纵向重复铺满父视图

代码如下：

  3. class MyApp extends StatelessWidget {
  4.   @override
  5.   Widget build(BuildContext context) {
  6.     return MaterialApp(
  7.       title: 'Text Widget',
  8.       home: Scaffold(
  9.         body: Center(
  10.           child: Container(
  11.             child: new Image.network(
  12.               'https://inews.gtimg.com/newsapp_ls/0/13792660143/0.jpeg',
  13.               alignment: Alignment.center,
  14.               filterQuality: FilterQuality.low,
  15.               // scale: 1.0,
  16.               // fit: BoxFit.scaleDown,
  17.               // repeat: ImageRepeat.repeatY,
  18.               // color: Colors.greenAccent,
  19.               // colorBlendMode: BlendMode.colorDodge,
  20.             ),
  21.             width: 300.0,
  22.             height: 200.0,
  23.             color: Colors.lightBlue,
  24.           ),
  25.         ),
  26.       ),
  27.     );
  28.   }
  29. }

参考

Image dev doc
添加资源和图片
Flutter免费视频第二季-常用组件
How to load images with image.file