加入图片的几种方式
- Image.asset: 加载资源图片,就是加载项目资源目录中的图片,加入图片后会增大打包的包体体积,用的是相对路径。
- Image.network: 网络资源图片,意思就是你需要加入一段http://xxxx.xxx的这样的网络路径地址。
- Image.file: 加载本地图片,就是加载本地文件中的图片,这个是一个绝对路径,跟包体无关。
- Image.memory: 加载Uint8List资源图片,
fit
- BoxFit.fill: 全图显示,图片会被拉伸,并充满父容器。
- BoxFit.contain: 全图显示,显示原比例,可能会有空隙。
- BoxFit.cover: 显示可能拉伸,可能裁切,充满(图片要充满整个容器,还不变形)。
- BoxFit.fitWidth: 宽度充满(横向充满),显示可能拉伸,可能裁切。
- BoxFit.fitHeight: 高度充满(竖向充满),显示可能拉伸,可能裁切。
- BoxFit.scaleDown: 效果和contain差不多,但是此属性不允许显示超过源图片大小,可小不可大。
import 'package:flutter/material.dart';
void main () => runApp(MyApp());
class MyApp extends StatelessWidget{
@override
Widget build(BuildContext context){
return MaterialApp(
title: 'Hello world',
home: Scaffold(
appBar: AppBar(
title: Text('Flutter')
),
body: Center(
child: Container(
child: new Image.network (
'http://img.zcool.cn/community/[email protected]',
fit: BoxFit.cover,
),
width: 300.0,
height: 200.0,
color: Colors.lightBlue,
),
),
),
);
}
}
图片的混合模式
- color: 是要混合的颜色,如果你只设置color是没有意义的。
- colorBlendMode: 是混合模式,相当于我们如何混合。(有很多模式)
import 'package:flutter/material.dart';
void main() => runApp(MyApp());
class MyApp extends StatelessWidget{
@override
Widget build(BuildContext context){
return MaterialApp(
title: 'hello world',
home:Scaffold(
appBar: AppBar(
title: Text('Hello flutter')
),
body: Center(
child: new Image.network(
'http://img.zcool.cn/community/[email protected]',
color: Colors.greenAccent,
colorBlendMode: BlendMode.modulate,
)
),
),
);
}
}
repeat 图片重复
- ImageRepeat.repeat: 横向和纵向都进行重复,直到铺满整个画布。
- ImageRepeat.repeatX: 横向重复,纵向不重复。
- ImageRepeat.repeatY: 纵向重复,横向不重复。
import 'package:flutter/material.dart';
void main() => runApp(MyApp());
class MyApp extends StatelessWidget{
@override
Widget build(BuildContext context){
return MaterialApp(
title: 'hello world',
home:Scaffold(
appBar: AppBar(
title: Text('Hello flutter')
),
body: Center(
child: Container(
child: new Image.network(
'http://img.zcool.cn/community/[email protected]',
repeat: ImageRepeat.repeat,
),
width:500.0,
height:200.0,
),
),
),
);
}
}