Flutter开发之Image组件

Image

一个用来显示图片的widget。

Image常用的属性和方法有哪些？

Image 提供的Constructors

提供了几种可用于指定图像的方法的构造函数：

• new Image，用于从ImageProvider获得图像。
• new Image.asset，用于 使用密钥从AssetBundle获取图像。
• new Image.network，用于从URL获取图像。
• new Image.file，用于从File获取图像。
• new Image.memory，用于从Uint8List获得图像。

支持以下图像格式：JPEG，PNG，GIF，动画GIF，WebP，动画WebP，BMP和WBMP

Image 提供的常用Props

height: 200,
width: 200,
fit: BoxFit.cover,
alignment: Alignment.bottomLeft,//图片对齐方式
color: Colors.red,//设置图片的背景颜色，通常和 colorBlendMode 配合一起 使用，设置图片颜色和背景色混合。
colorBlendMode: BlendMode.softLight,//设置图片颜色和背景色混合模式
repeat: ImageRepeat.noRepeat,//平铺模式

default Image

用于从ImageProvider获得图像。
默认构造函数可以与任何ImageProvider一起使用，例如 NetworkImage，以显示来自互联网的图像:

const Image(
  image: NetworkImage('https://flutter.github.io/assets-for-api-docs/assets/widgets/owl.jpg'),
)

Image.network()加载网络图片

可以不使用ImageProvider，

child: Container(
    child: Image.network(
                'https://flutter.github.io/assets-for-api-docs/assets/widgets/owl.jpg',
    )
)

Flutter 加载本地图片

Image.asset()构造函数加载本地图片，但是Flutter加载本地图片，远没有React Native加载本地图片方便，需要三步。
第一步添加本地图片到项目，文件的物理路径：

image.png
第二步在pubspec.yaml中添加配置
Flutter需要额外配置本地图片路径，即在pubspec.yaml文件中配置项目中需要加载的本地图片的路径，并且图片路径有一定的格式要求，比如：

  # To add assets to your application, add an assets section, like this:
  assets:
    - images/a.jpeg
    - images/2.0x/a.jpeg
    - images/3.0x/a.jpeg 

第三步 Image.asset()构造函数加载本地图片

child: Image.asset("images/a.jpeg",
            fit:BoxFit.cover,
            ),

注意：添加本地照片后，r 键，会报错：Unable to load asset: images/a.jpeg
flutter: The following assertion was thrown resolving an image codec:
flutter: Unable to load asset: images/a.jpeg
flutter:
flutter: When the exception was thrown, this was the stack:
flutter: #0 PlatformAssetBundle.load (package:flutter/src/services/asset_bundle.dart:221:7)
flutter: <asynchronous suspension>
flutter: #1 AssetBundleImageProvider._loadAsync (package:flutter/src/painting/image_provider.dart:464:44)
flutter: <asynchronous suspension>
flutter: #2 AssetBundleImageProvider.load (package:flutter/src/painting/image_provider.dart:449:14)
flutter: #3 ImageProvider.resolve.<anonymous closure>.<anonymous closure>.<anonymous closure> (package:flutter/src/painting/image_provider.dart:316:48)
flutter: #4 ImageCache.putIfAbsent (package:flutter/src/painting/image_cache.dart:160:22)
flutter: #5 ImageProvider.resolve.<anonymous closure>.<anonymous closure> (package:flutter/src/painting/image_provider.dart:316:25)
flutter: (elided 13 frames from package dart:async)
flutter:
flutter: Image provider: AssetImage(bundle: null, name: "images/a.jpeg")
flutter: Image key: AssetBundleImageKey(bundle: PlatformAssetBundle#fd98a(), name: "images/a.jpeg", scale:
flutter: 1.0)

这点来看，加载本地图片，即静态资源时，使用r键进行热加载并不能正常加载图片，因为热加载不能刷新图片等静态资源，需要重新编译，即R键重新编译才可以正常显示。

demo

效果图：

image.png

测试代码：

return Center(
          child: Container(
            width: 300,
            height: 500,
            color: Colors.blue,
            // child: Image.asset("images/a.jpeg",
            // fit:BoxFit.cover,
            // ),
              child: Image.network(
                'https://flutter.github.io/assets-for-api-docs/assets/widgets/owl.jpg',
                height: 200,
                width: 200,
                // fit: BoxFit.cover,
                alignment: Alignment.bottomLeft,//图片对齐方式
                color: Colors.red,//设置图片的背景颜色，通常和 colorBlendMode 配合一起 使用，这样可以是图片颜色和背景色混合。
                colorBlendMode: BlendMode.softLight,
                repeat: ImageRepeat.noRepeat,//平铺模式
                )
          ),
    );

参考：https://api.flutter.dev/flutter/widgets/Image-class.html