flutter一般分为两种图片加载的方式:网络加载和本地加载
首先看一下image的一些属性:
const Image({
...
this.width, //图片的宽
this.height, //图片高度
this.color, //图片的混合色值
this.colorBlendMode, //混合模式
this.fit,//缩放模式
this.alignment = Alignment.center, //对齐方式
this.repeat = ImageRepeat.noRepeat, //重复方式
...
})
width、height:指图片的宽和高
color,colorBlendMode:color指定混合色,而colorBlendMode指定混合模式,图片绘制时可以对每一个像素进行颜色混合处理
fit:指图片的各种充满(各种样式)
repeat:当图片本身大小小于显示空间时,指定图片的重复规则。
1,网络加载:网络加载一般很简单(直接上代码)
class MyImageBody extends StatelessWidget {
@override
Widget build(BuildContext context) {
return Center(
child: Container(
child: Image.network("https://..",//网络图片的地址
alignment: Alignment.topCenter,
repeat: ImageRepeat.repeatY,
colorBlendMode: BlendMode.colorDodge,
fit: BoxFit.cover,),
width: 200,
height: 150,
color: Colors.blue,
),
);
}
Container:这里相当于一个View容器
2,本地图片,需要配置本地的图片
新建一个存放图片的文件如图:(可以自己取名)
再设置:
按照步骤设置,然后直接在本地取图片:
//本地widget
class MyImageAssetBody extends StatelessWidget {
@override
Widget build(BuildContext context) {
return Center(
child: Container(
width: 200,
height: 150,
child: Image.asset("assets/image/icon_one.jpg"),
),
);
}
}
本地是: Image.asset()网络是 Image.network()。各种样式可以自行设置。
3,很多地方用到圆型图片。也看看圆型的图片怎么弄。
一:CircleAvatar圆型图片
属性:
const CircleAvatar({
Key key,
this.child, // 子Widget
this.backgroundColor, // 背景颜色
this.backgroundImage, // 背景图像
this.foregroundColor, // 前景颜色
this.radius, // 半径
this.minRadius, // 最小半径
this.maxRadius, // 最大半径
})
加载:
class MyCircleBody extends StatelessWidget {
@override
Widget build(BuildContext context) {
return Center(
child: CircleAvatar(
radius: 100,
backgroundImage: NetworkImage("https://.."),//图片链接
),
);
}
}
二:ClipOval也可加载圆型图片
class MyClipOvalBody extends StatelessWidget {
@override
Widget build(BuildContext context) {
return Center(
child: ClipOval(
child: Image.network(
"https://...",//网络图片
width: 100,
height: 100,
),
),
);
}
}
圆的图片大概都可以这样用,还有一些图片设置圆角的
4,图片圆角
ClipRRect实现图片圆角:
class MyClipRRectBody extends StatelessWidget {
@override
Widget build(BuildContext context) {
return Center(
child: ClipRRect(
borderRadius: BorderRadius.circular(20),
child: Image.network(
"https://...",//图片链接
width: 200,
height: 200,
),
),
);
}
}
还有一个方式BoxDecoration,涉及到我们视图的边框、圆角、阴影、形状、渐变、背景图像等,下章会具体的介绍