Flutter应用程序可以包含代码和 assets（有时称为资源）。asset是打包到程序安装包中的，可在运行时访问。常见类型的asset包括静态数据（例如JSON文件），配置文件，图标和图片（JPEG，WebP，GIF，动画WebP / GIF，PNG，BMP和WBMP）。
Image中的属性列表如下：
Image.network(
String src, {
Key key,
double scale = 1.0,
this.frameBuilder,
this.loadingBuilder,
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<String, String> headers,
int cacheWidth,
int cacheHeight,
})
一、显示网络图片示例
import 'package:flutter/material.dart';
void main() {
runApp(MyApp());
}
class MyApp extends StatelessWidget {
@override
Widget build(BuildContext context) {
return MaterialApp(
home: Scaffold(
appBar: AppBar(
title: Text('Welcome to Flutter'),
),
body: Center(
child: Container(
//https://timgsa.baidu.com/timg?image&quality=80&size=b9999_10000&sec=1584443655108&di=25db4ce2d0c8fb0529f51df09c327bea&imgtype=0&src=http%3A%2F%2Fa3.att.hudong.com%2F14%2F75%2F01300000164186121366756803686.jpg
child: Image.network('https://timgsa.baidu.com/timg?image&quality=80&size=b9999_10000&sec=1584443655108&di=25db4ce2d0c8fb0529f51df09c327bea&imgtype=0&src=http%3A%2F%2Fa3.att.hudong.com%2F14%2F75%2F01300000164186121366756803686.jpg',
color: Colors.greenAccent,
colorBlendMode: BlendMode.darken, //图片混合模式，类似于在图片上加一层颜色
fit: BoxFit.scaleDown,//填充图片到容器
/* contain：根据原图到比例填充容器，图片不会变形，有可能不会填充满整个容器
fill:填充满整个容器，有可能会变形
fitWidth:图片不变形的情况下填满整个容器的宽度，如果图片高度比容器高会被截掉部分
fitHeight:高度填充满，如果宽度不够则不会填充满整个容器
cover：它会填充满整个容器，图片不会变形，但是可能会被裁剪
scaleDown: 按比例显示图片，有可能不会填充满整个容器
* */
repeat: ImageRepeat.repeat, //是否重复拷贝图片把容器填充满
/*
repeat:重复填充，以中间为基础，横向纵向都填充
repeatX:只横向填充
repeatY:只纵向填充
noRepeat:不重复填充
* */
),
width: 300,
height: 200,
color: Colors.lightBlue,
),
),
)
);
}
}
运行结果如下：
image.png
二、本地资源图片示例
1、先创建一个资源文件夹，命名为images，自己可以命名为任意名称都可以。把本地图片拖到文件夹里。也可以在工程目录中
2、在pubspec.yaml文件夹中添加资源路径，注意，记得缩进。
这个assets是固定写法，它需要比‘flutter:’缩进一格。然后换行写上图片的路径。
3、编写代码
import 'package:flutter/material.dart';
void main(){
runApp(MyApp());
}
class MyApp extends StatelessWidget {
@override
Widget build(BuildContext context) {
return MaterialApp(
title: 'this is a image',
home: Scaffold(
appBar: AppBar(title: Text('this is a image')),
body: Center(
child: Image.asset('images/test.jpeg')
),
),
);
}
}
4、运行结果如下：
image.png
