Flutter 基本组件之Image BoxFit属性

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 轴重复

1. /*
   
2.    * 基本属性
   
3.    */
   
4. 
   
5. class ImageTest extends StatelessWidget {
   
6.   @override
   
7.   Widget build(BuildContext context) {
   
8.     var imgUrl =
   
9.         "https://c-ssl.duitang.com/uploads/item/201703/23/20170323195929_utNKH.jpeg";
   
10. 
    
11.     return Container(
    
12.       // 这种通过构造方法来
    
13.       //   child: Image.network("https://c-ssl.duitang.com/uploads/item/201703/23/20170323195929_utNKH.jpeg",
    
14.       //   width:  300.0, // 设置图片的宽度
    
15.       //   height: 300.0,  // 设置高度
    
16.       //   alignment: Alignment.center, // 设置对齐方式
    
17.       //   fit: BoxFit.cover,
    
18.       // ) ,
    
19. 
    
20.       child: Image(
    
21.         image: NetworkImage(imgUrl),  // 加载是网络图片
    
22.         width: 300.0,
    
23.         height: 900.0,
    
24.          alignment: Alignment.center, // 设置对齐方式, 跟container 里面对齐方式一样
    
25.          //如果图片没有填充满容器的话，图片的对齐方式，值为一个 AlignmentGeometry 对象，Alignment 是它的一个实现类
    
26.             //可选值同 Container 的 Alignment 取值一样。
    
27.             //Alignment.topLeft：垂直靠顶部水平靠左对齐
    
28.             //Alignment.topCenter：垂直靠顶部水平居中对齐
    
29.             //Alignment.topRight：垂直靠顶部水平靠右对齐
    
30.             //Alignment.centerLeft：垂直居中水平靠左对齐
    
31.             //Alignment.center：垂直和水平居中都对齐
    
32.             //Alignment.centerRight：垂直居中水平靠右对齐
    
33.             //Alignment.bottomLeft：垂直靠底部水平靠左对齐
    
34.             //Alignment.bottomCenter：垂直靠底部水平居中对齐
    
35.             //Alignment.bottomRight：垂直靠底部水平靠右对齐
    
36.             //除了上面的常量之外，还可以创建 Alignment 对象指定 x、y 偏移量
    
37.           fit: BoxFit.contain,  //fit 属性用来控制图片的拉伸和挤压，这都是根据父容器来 的。 类似 Android 中 ImageView 的 scaleType   
    
38.           //BoxFit.none：将图片的内容按原大小居中显示。
    
39.             //BoxFit.contain：将图片的内容完整居中显示，通过按比例缩小或原来的 size 使得图片宽/高等于或小于组件的宽/高，类似 Android 的 centerInside。
    
40.             //BoxFit.cover：按比例放大图片的 size 居中显示，类似 Android 的 centerCrop。
    
41.             //BoxFit.fill：把图片不按比例放大/缩小到组件的大小显示，类似 Android 的 fitXY。
    
42.             //BoxFit.fitHeight：把图片的高按照组件的高显示，宽等比例放大/缩小。
    
43.             //BoxFit.fitWidth：把图片的宽按照组件的宽显示，高等比例放大/缩小。
    
44.             //BoxFit.scaleDown：如果图片宽高大于组件宽高，则让图片内容完全居中显示，此时同 contain，如果图片宽高小于组件宽高，则按图片原大小居中显示，此时同 none。
    
45. 
    
46.             color: Color(0xFFFFFF00),  //设置图片的颜色会覆盖 image 指定的图片，如果也设置了 colorBlendMode 属性，则会与 image 混合产生特殊效果
    
47.             colorBlendMode: BlendMode.darken,
    
48.            //  matchTextDirection: true,
    
49.             
    
50.               //如果图片没填充满容器的话，图片的重复方式，可选值有：
    
51.             //ImageRepeat.noRepeat：不重复
    
52.             //ImageRepeat.repeat：X、Y 轴都重复
    
53.             //ImageRepeat.repeatX：只在 X 轴重复
    
54.             //ImageRepeat.repeatY：只在 Y 轴重复
    
55.             repeat: ImageRepeat.repeat,
    
56.       ),
    
57.       alignment: Alignment.center,
    
58.     );
    
59.   }
    
60. }
    
61. 
    

复制代码