flutter显示图标_Flutter小部件之图片（Image）和图标（Icon）

1. 文章目录

图片(Image)

在Flutter中，我们可以使用Image控件来显示图片，一般来讲我们的图片资源都来源于网络或者本地图片。

Flutter中的Image也是类似。

我们先来看看Image的构造方法

const Image({

Key key,

@required this.image,

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

ImageProvider

必填参数,接收ImageProvider 类型

semanticLabel

String

图片的描述

excludeFromSemantics

bool

是否从语义上排除该图片，默认值为false

width

double

图片的宽度

height

double

图片的高度

color

Color

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

colorBlendMode

BlendMode

一般和color结合使用，设置color的混合模式

fit

BoxFit

设置图片的显示模式

alignment

AlignmentGeometry

用于设置图片的对齐方式，默认值：Alignment.center

repeat

ImageRepeat

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

可以看到，其常用属性跟前端中的c