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,//平铺模式
)
),
);
