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
网友评论