Image
Image（图片组件）是显示图像的组件，一个显示图片的widget，支持图像格式：JPEG，PNG，GIF，动画GIF，WebP，动画WebP，BMP和WBM
构造方法
Image: 从ImageProvider获取数据
Image.network: 加载网络图片。
Image.asset: 加载本地图片文件。
new Image.file: 加载本地图片文件(File文件）图片。
new Image.memory: 加载Uint8List资源图片（byte数组）图片。
常用属性
| 属性名 | 功能 | 值所属类型 |
|---|---|---|
| width | 指定显示图片区域的宽(不是指图片的宽) | double |
| height | 指定显示图片区域的高(不是指图片的高) | double |
| alignment | 控制图片摆放的位置 | Alignment |
| fit | 属性用来控制图片的拉伸和挤压，这都是根据父容器来 | BoxFit |
| color &colorBlendMode | 两个属性需要配合使用，就是颜色和图片混合 | BlendMode |
| repeat | 设置图片重复显示 | ImageRepeat |
fit 的属性
| 属性名 | 功能 |
|---|---|
| BoxFit.contain | 全图居中显示但不充满，显示原比例 |
| BoxFit.cover | 图片可能拉伸，也可能裁剪，但是充满容器 |
| BoxFit.fill | 全图显示且填充满，图片可能会拉伸 |
| BoxFit.fitHeight | 图片可能拉伸，可能裁剪，高度充满 |
| BoxFit.fitWidth | 图片可能拉伸，可能裁剪，宽度充满 |
| BoxFit.scaleDown | 效果和contain差不多， 但是只能缩小图片，不能放大图片 |
repeat 属性
| 属性名 | 功能 |
|---|---|
| ImageRepeat.noRepeat | 不重复 |
| ImageRepeat.repeat | X、Y 轴都重复 |
| ImageRepeat.repeatX | 只在 X 轴重复 |
| ImageRepeat.repeatY | 只在 Y 轴重复 |
/*
* 基本属性
*/
class ImageTest extends StatelessWidget {
@override
Widget build(BuildContext context) {
var imgUrl =
"https://c-ssl.duitang.com/uploads/item/201703/23/20170323195929_utNKH.jpeg";
return Container(
// 这种通过构造方法来
// child: Image.network("https://c-ssl.duitang.com/uploads/item/201703/23/20170323195929_utNKH.jpeg",
// width: 300.0, // 设置图片的宽度
// height: 300.0, // 设置高度
// alignment: Alignment.center, // 设置对齐方式
// fit: BoxFit.cover,
// ) ,
child: Image(
image: NetworkImage(imgUrl), // 加载是网络图片
width: 300.0,
height: 900.0,
alignment: Alignment.center, // 设置对齐方式, 跟container 里面对齐方式一样
//如果图片没有填充满容器的话，图片的对齐方式，值为一个 AlignmentGeometry 对象，Alignment 是它的一个实现类
//可选值同 Container 的 Alignment 取值一样。
//Alignment.topLeft：垂直靠顶部水平靠左对齐
//Alignment.topCenter：垂直靠顶部水平居中对齐
//Alignment.topRight：垂直靠顶部水平靠右对齐
//Alignment.centerLeft：垂直居中水平靠左对齐
//Alignment.center：垂直和水平居中都对齐
//Alignment.centerRight：垂直居中水平靠右对齐
//Alignment.bottomLeft：垂直靠底部水平靠左对齐
//Alignment.bottomCenter：垂直靠底部水平居中对齐
//Alignment.bottomRight：垂直靠底部水平靠右对齐
//除了上面的常量之外，还可以创建 Alignment 对象指定 x、y 偏移量
fit: BoxFit.contain, //fit 属性用来控制图片的拉伸和挤压，这都是根据父容器来 的。 类似 Android 中 ImageView 的 scaleType
//BoxFit.none：将图片的内容按原大小居中显示。
//BoxFit.contain：将图片的内容完整居中显示，通过按比例缩小或原来的 size 使得图片宽/高等于或小于组件的宽/高，类似 Android 的 centerInside。
//BoxFit.cover：按比例放大图片的 size 居中显示，类似 Android 的 centerCrop。
//BoxFit.fill：把图片不按比例放大/缩小到组件的大小显示，类似 Android 的 fitXY。
//BoxFit.fitHeight：把图片的高按照组件的高显示，宽等比例放大/缩小。
//BoxFit.fitWidth：把图片的宽按照组件的宽显示，高等比例放大/缩小。
//BoxFit.scaleDown：如果图片宽高大于组件宽高，则让图片内容完全居中显示，此时同 contain，如果图片宽高小于组件宽高，则按图片原大小居中显示，此时同 none。
color: Color(0xFFFFFF00), //设置图片的颜色会覆盖 image 指定的图片，如果也设置了 colorBlendMode 属性，则会与 image 混合产生特殊效果
colorBlendMode: BlendMode.darken,
// matchTextDirection: true,
//如果图片没填充满容器的话，图片的重复方式，可选值有：
//ImageRepeat.noRepeat：不重复
//ImageRepeat.repeat：X、Y 轴都重复
//ImageRepeat.repeatX：只在 X 轴重复
//ImageRepeat.repeatY：只在 Y 轴重复
repeat: ImageRepeat.repeat,
),
alignment: Alignment.center,
);
}
}
实现圆角图片
1.方式一
/*
* 使用裁剪来实现图片圆角
*/
class RoundedCornersImage extends StatelessWidget {
var imgUrl =
"https://c-ssl.duitang.com/uploads/item/201703/23/20170323195929_utNKH.jpeg";
@override
Widget build(BuildContext context) {
return ClipRRect(
child: Image.network(
imgUrl,
scale: 8.5,
fit: BoxFit.cover,
),
borderRadius: BorderRadius.only(
topLeft: Radius.circular(20),
topRight: Radius.circular(20),
bottomLeft: Radius.circular(20),
bottomRight: Radius.circular(20),
),
);
}
}
方式二
/*
* 使用边框来实现图片圆角
*/
class RoundedCornersImage1 extends StatelessWidget {
var imgUrl =
"https://c-ssl.duitang.com/uploads/item/201703/23/20170323195929_utNKH.jpeg";
@override
Widget build(BuildContext context) {
return Container(
width: 120,
height: 60,
decoration: BoxDecoration(
shape: BoxShape.rectangle,
borderRadius: BorderRadius.circular(10.0),
image: DecorationImage(image: NetworkImage(imgUrl), fit: BoxFit.cover),
),
);
}
}
效果图
image.png
实现 圆形 图片
方式一
/*
* 使用裁剪来实现图片圆形
*/
class CircularImage extends StatelessWidget {
var imgUrl =
"https://c-ssl.duitang.com/uploads/item/201703/23/20170323195929_utNKH.jpeg";
@override
Widget build(BuildContext context) {
return ClipOval(
child: Image.network(
imgUrl,
width: 80,
height: 80,
fit: BoxFit.cover,
),
);
}
}
方式二
/*
* 使用CircleAvatar来实现圆形图片
*/
class CircularImage1 extends StatelessWidget {
var imgUrl =
"https://c-ssl.duitang.com/uploads/item/201703/23/20170323195929_utNKH.jpeg";
@override
Widget build(BuildContext context) {
return CircleAvatar(
backgroundImage: NetworkImage(imgUrl),
radius: 50.0,
);
}
}
效果图
image.png
Flutter 引入本地图片
image.png
然后，打开 pubspec.yaml 声明一下添加的图片文件，注意要配置对
image.png
最后，在代码中就可以用了
Image.asset("images/a.jpeg", fit:BoxFit.cover
)
网友评论