Flutter(四) Image组件的使用
2019-08-20 本文已影响0人
骑马纵天下
1. 加载远程图片
class HomeContent extends StatelessWidget{
@override
Widget build(BuildContext context) {
// TODO: implement build
return Center(//组件居中
child: Container(//容器组件
width: 300,//都是double 写成int也可以
height: 300,
child: Image.network(
'http://pic33.nipic.com/20131007/13639685_123501617185_2.jpg',
alignment: Alignment.center,//图片对其方式
// fit: BoxFit.cover,//图片显示效果 控制图片的拉伸和挤压 这都市根据父容器来的 fit属性和repeat属性冲突 不能同时设置
// color: Colors.red,//设置图片的背景颜色通常和colorBlendMode配合一起使用，可以是图片颜色和背景颜色混合
// colorBlendMode: BlendMode.luminosity,
repeat: ImageRepeat.repeat//平铺
),
decoration: BoxDecoration(//设置组件边框的颜色宽度 背景色
color: Colors.yellow,
),
),
);
}
}
效果图
2. 实现圆形图片
- 通过把Container设置裁剪为圆形，设置decoration属性，里面的image子属性实现圆形图片。
class HomeContent extends StatelessWidget{
@override
Widget build(BuildContext context) {
// TODO: implement build
return Center(//组件居中
//显示圆形图片 通过Container里面的decoration里面的image实现
child: Container(//容器组件 Container应该像是iOS里面的View
width: 300,//都是double
height: 300,
decoration: BoxDecoration(//设置组件边框的颜色宽度 背景色
color: Colors.yellow,
border: Border.all(//设置容器边框的颜色宽度
color: Colors.red,
width: 2.0
),
borderRadius: BorderRadius.all(//对组件进行裁剪 可以实现圆角图片
Radius.circular(150)
),
// borderRadius: BorderRadius.circular(150),
image: DecorationImage(
image: NetworkImage('http://pic33.nipic.com/20131007/13639685_123501617185_2.jpg'),
fit: BoxFit.cover,//图片显示效果
// repeat: ImageRepeat.repeat//平铺
)
),
),
);
}
}
-
通过ClipOval组件实现
- 只需要设置图片会自动通过图片的宽高来裁剪图片。但是图片的效果可能会不理想，如果要设置为圆形图片需要设置宽高和fit属性。
class HomeContent extends StatelessWidget{
@override
Widget build(BuildContext context) {
// TODO: implement build
return Center(//组件居中
//显示圆形图片 通过ClipOval
child: Container(//容器组件 Container应该像是iOS里面的View
child: ClipOval(
child: Image.network(
'http://pic33.nipic.com/20131007/13639685_123501617185_2.jpg',
height: 100,
width: 100,
fit: BoxFit.cover,
),
),
),
);
}
}
效果图
3. 加载本地图片
- 在根目录下新建三个文件夹其中2.0x和3.0x是必须的。
加载本地图片
-
在pubspec.yaml文件下配置图片
加载本地图片
加载本地图片有时会报错，重新运行即可。
加载本地图片
