ImageImage（图片组件）是显示图像的组件，一个显示图片的widget，支持图像格式：JPEG，PNG，GIF，动画GIF，WebP，动画WebP，BMP和WBM
构造方法Image: 从ImageProvider获取数据
Image.network: 加载网络图片。
Image.asset: 加载本地图片文件。
new Image.file: 加载本地图片文件(File文件）图片。
new Image.memory: 加载Uint8List资源图片（byte数组）图片。
常用属性[td]属性名 | 功能 | 值所属类型 | width | 指定显示图片区域的宽(不是指图片的宽) | double | height | 指定显示图片区域的高(不是指图片的高) | double | alignment | 控制图片摆放的位置 | Alignment | fit | 属性用来控制图片的拉伸和挤压，这都是根据父容器来 | BoxFit | color &colorBlendMode | 两个属性需要配合使用，就是颜色和图片混合 | BlendMode | repeat | 设置图片重复显示 | ImageRepeat |
fit 的属性
[td]属性名 | 功能 | BoxFit.contain | 全图居中显示但不充满，显示原比例 | BoxFit.cover | 图片可能拉伸，也可能裁剪，但是充满容器 | BoxFit.fill | 全图显示且填充满，图片可能会拉伸 | BoxFit.fitHeight | 图片可能拉伸，可能裁剪，高度充满 | BoxFit.fitWidth | 图片可能拉伸，可能裁剪，宽度充满 | BoxFit.scaleDown | 效果和contain差不多， 但是只能缩小图片，不能放大图片 |
repeat 属性
[td]属性名 | 功能 | 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,
- );
- }
- }
|
