Flutter开发之Image组件

Image

一个用来显示图片的widget。

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

Image 提供的Constructors

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

支持以下图像格式: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

推荐阅读更多精彩内容