Image:显示图片所用,相当于UIImage,通常和Container一起使用来实现圆角,圆形图片等效果,也可单独使用
加载网络图片
单独使用:
class HomeContent extends StatelessWidget{
@override
Widget build(BuildContext context) {
// TODO: implement build
return Center(
child: Image.network('https://******.jpg',
width:200,height: 200,
),//这里设置大小会改变图片大小,但不会改变图片比例
);
}
}
结合Container使用来实现圆形图片,方式一:
class HomeContent extends StatelessWidget{
@override
Widget build(BuildContext context) {
// TODO: implement build
return Center(
child: Container(
child: ClipOval(
child: Image.network('https://******.jpg',
width: 100,height: 100,fit: BoxFit.cover,),
),
),
);
}
}
结合Container使用来实现圆形图片,方式二:
class HomeContent extends StatelessWidget{
@override
Widget build(BuildContext context) {
// TODO: implement build
return Center(
child: Container(
height: 150,
width: 150,
decoration: BoxDecoration(
borderRadius: BorderRadius.circular(25),//这里的值是改变圆角大小的,当这里设置的值是width和height一半时就是圆形图片
image: DecorationImage(
image: NetworkImage('https://******.jpg'),
fit: BoxFit.cover
)
),
),
);
}
}
加载本地图片首先得在根目录下创建文件夹assets、assets/2.0x、assets/3.0x,分别存放不同分辨率的图片(命名要相同)
修改pubspec.yaml,声明图片