Image.asset("images/flutter.png",fit: BoxFit.cover,),
Image.network(url):从网络加载显示图片、这里需要传入图片的url,
Image.file(file):从本地文件加载显示图片、这里需要传入图片的本地地址
Image.asset(name):从Flutter APP的资源文件里加载显示图片、这里需要传入Flutter APP图片资源文件的路径及图片名字
Image.memory(bytes):从内存加载显示图片、这里需要传入图片的bytes数据,类型是Uint8List
- Image 的五个构造函数的参数都有所不同,这里讲一下共同都有的参数:
参数名字 | 参数类型 | 意义 | 必选 or 可选 |
---|---|---|---|
scale | double | 图形显示的比例 | 可选 |
semanticsLabel | String | 给 Image 加上一个语义标签 没有实际用处 | 可选 |
width | double | 图片的宽 如果为null的话,则图像将选择最佳大小显示,而且会保留其固有宽高比的大小 | 可选 |
height | double | 图片的高 如果为null的话,则图像将选择最佳大小显示,而且会保留其固有宽高比的大小 | 可选 |
color | Color | 图片的混合色值 | 可选 |
colorBlendMode | BlendMode | 图片与颜色的混合模式 | 可选 |
fit | BoxFit | 用于在图片的显示空间和图片本身大小不同时指定图片的适应模式 | 可选 |
alignment | Alignment | 图片的对齐方式 | 可选 |
repeat | ImageRepeat | 当图片本身大小小于显示空间时,指定图片的重复规则 | 可选 |
centerSlice Rect | 在这个矩形范围内的图片会被当成.9的图片 | 可选 | |
matchTextDirection | bool | 图片的绘制方向 true:从左往右 false:从右往左 | 可选 |
gaplessPlayback | bool | 当图像提供者更改时 true:继续显示旧图像 false:简单地显示任何内容 | 可选 |
filterQuality | FilterQuality | 设置图片的过滤质量 | 可选 |
fit:BoxFit,用于在图片的显示空间和图片本身大小不同时指定图片的适应模式。
BoxFit的值 | 含义 |
---|---|
BoxFit.fill |
会拉伸填充满显示空间,图片本身长宽比会发生变化,图片会变形。 |
BoxFit.contain |
会按图片的长宽比放大后居中填满显示空间,图片不会变形,超出显示空间部分会被剪裁。 |
BoxFit.cover |
这是图片的默认适应规则,图片会在保证图片本身长宽比不变的情况下缩放以适应当前显示空间,图片不会变形。 |
BoxFit.fitWidth |
图片的宽度会缩放到显示空间的宽度,高度会按比例缩放,然后居中显示,图片不会变形,超出显示空间部分会被剪裁。 |
BoxFit.fitHeight |
图片的高度会缩放到显示空间的高度,宽度会按比例缩放,然后居中显示,图片不会变形,超出显示空间部分会被剪裁。 |
BoxFit.scaleDown |
对齐目标框内的源(默认情况下,居中),并在必要时缩小源以确保源适合框内。这与contains相同,如果这会缩小图像,否则它与none相同。 |
BoxFit.none |
图片没有适应策略,会在显示空间内显示图片,如果图片比显示空间大,则显示空间只会显示图片中间部分 |
alignment:Alignment,图片的对齐方式
Alignment的值 | 含义 |
---|---|
Alignment.topLeft |
左上对齐 |
Alignment.topCenter |
上部居中对齐 |
Alignment.topRight |
右上对齐 |
Alignment.centerLeft |
中间居左对齐 |
Alignment.center |
中间对齐 |
Alignment.centerRight |
中间居右对齐 |
Alignment.bottomLeft |
左下对齐 |
Alignment.bottomCenter |
底部居中对齐 |
Alignment.bottomRight |
右下对齐 |
repeat:ImageRepeat,当图片本身大小小于显示空间时,指定图片的重复规则。
ImageRepeat的值 | 含义 |
---|---|
ImageRepeat.repeat |
在x和y轴上重复图像,直到填充满空间。 |
ImageRepeat.repeatX |
在x轴上重复图像,直到填充满空间。 |
ImageRepeat.repeatY |
在y轴上重复图像,直到填充满空间。 |
ImageRepeat.noRepeat |
不重复 |
filterQuality:FilterQuality,设置图片的过滤质量
FilterQuality的值 | 含义 |
---|---|
FilterQuality.none |
最快的过滤。 |
FilterQuality.low |
比none的过滤质量好,但是比none的时间要长。 |
FilterQuality.medium |
比low的过滤质量好,但是也比low的时间要长 |
FilterQuality.high |
过滤质量最高,但也最慢 |
网友评论