flutter图片识别_Flutter Widget：实例讲解图片组件Image、Icon、ImageIcon

前言

Flutter 作为Google出品的一个新兴的跨平台移动客户端UI开发框架，正在被越来越多的开发者和组织使用，包括阿里的咸鱼、腾讯的微信等。

示意图

今天，我主要讲解Flutter中图片组件方面的Widget，包括Image、Icon、ImageIcon，希望你们会喜欢。

示意图

1. Image

1.1 作用

显示图片，主要支持的加载方式：本地图片、资源图片 & 网络图片。

1.2 常用属性

const Image({

Key key,

@required this.image,// ImageProvider，必填参数，接收一个ImageProvider 类型的值

this.semanticLabel, // String，图片的描述

this.excludeFromSemantics = false, // bool，是否从语义上排除该图片，默认值为false

this.width, // double，图片的宽度

this.height, // double，图片的高度

this.color, // Color，图片的前景色，一般不设置或设置透明色，会覆盖掉图片，一般会和colorBlendMode结合使用

this.colorBlendMode, // BlendMode，一般和color结合使用，设置color的混合模式

this.fit, // BoxFit，设置图片的显示模式

this.alignment = Alignment.center, // AlignmentGeometry，用于设置图片的对齐方式，默认值：Alignment.center

this.repeat = ImageRepeat.noRepeat, // ImageRepeat，图片的重复方式，当图片没有完全覆盖掉容器时使用。默认值：ImageRepeat.noRepeat

...

})

下面，将详细讲解Image的属性。

1.3 属性image

接收一个ImageProvider类型的值。ImageProvider是一个抽象类

实现类主要包括：AssetImage、MemoryImage、NetworkImage、FileImage，分别表示可从资源、内存、网络 & 文件中获取图片

// 加载网络图片

Image.network(String src, {

Key key,

double scale = 1.0,

this.semanticLabel,

this.excludeFromSemantics = false,

this.width,

this.height,

this.color,

this.colorBlendMode,

this.fit,

this.alignment = Alignment.center,

this.repeat = ImageRepeat.noRepeat,

this.centerSlice,

this.matchTextDirection = false,

this.gaplessPlayback = false,

this.filterQuality = FilterQuality.low,

Map headers,

})

// 加载本地文件

Image.file(File file, {

Key key,

double scale = 1.0,

this.semanticLabel,

this.excludeFromSemantics = false,

this.width,

this.height,

this.color,

this.colorBlendMode,

this.fit,

this.alignment = Alignment.center,

this.repeat = ImageRepeat.noRepeat,

this.centerSlice,

this.matchTextDirection = false,

this.gaplessPlayback = false,

this.filterQuality = FilterQuality.low,

})

// 从项目资源中加载

Image.asset(String name, {

Key key,

AssetBundle bundle,

this.semanticLabel,

this.excludeFromSemantics = false,

double scale,

this.width,

this.height,

this.color,

this.colorBlendMode,

this.fit,

this.alignment = Alignment.center,

this.repeat = ImageRepeat.noRepeat,

this.centerSlice,

this.matchTextDirection = false,

this.gaplessPlayback = false,

String package,

this.filterQuality = FilterQuality.low,

})

// 从内存中加载

Image.memory(Uint8List bytes, {

Key key,

double scale = 1.0,

this.semanticLabel,

this.excludeFromSemantics = false,

this.width,

this.height,

this.color,

this.colorBlendMode,

this.fit,

this.alignment = Alignm