Flutter 基本组件之Image BoxFit属性

siman 2024-5-15 12:37:01 61 0 来自 中国


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. class ImageTest extends StatelessWidget {
  5.   @override
  6.   Widget build(BuildContext context) {
  7.     var imgUrl =
  8.         "https://c-ssl.duitang.com/uploads/item/201703/23/20170323195929_utNKH.jpeg";

  9.     return Container(
  10.       // 这种通过构造方法来
  11.       //   child: Image.network("https://c-ssl.duitang.com/uploads/item/201703/23/20170323195929_utNKH.jpeg",
  12.       //   width:  300.0, // 设置图片的宽度
  13.       //   height: 300.0,  // 设置高度
  14.       //   alignment: Alignment.center, // 设置对齐方式
  15.       //   fit: BoxFit.cover,
  16.       // ) ,

  17.       child: Image(
  18.         image: NetworkImage(imgUrl),  // 加载是网络图片
  19.         width: 300.0,
  20.         height: 900.0,
  21.          alignment: Alignment.center, // 设置对齐方式, 跟container 里面对齐方式一样
  22.          //如果图片没有填充满容器的话,图片的对齐方式,值为一个 AlignmentGeometry 对象,Alignment 是它的一个实现类
  23.             //可选值同 Container 的 Alignment 取值一样。
  24.             //Alignment.topLeft:垂直靠顶部水平靠左对齐
  25.             //Alignment.topCenter:垂直靠顶部水平居中对齐
  26.             //Alignment.topRight:垂直靠顶部水平靠右对齐
  27.             //Alignment.centerLeft:垂直居中水平靠左对齐
  28.             //Alignment.center:垂直和水平居中都对齐
  29.             //Alignment.centerRight:垂直居中水平靠右对齐
  30.             //Alignment.bottomLeft:垂直靠底部水平靠左对齐
  31.             //Alignment.bottomCenter:垂直靠底部水平居中对齐
  32.             //Alignment.bottomRight:垂直靠底部水平靠右对齐
  33.             //除了上面的常量之外,还可以创建 Alignment 对象指定 x、y 偏移量
  34.           fit: BoxFit.contain,  //fit 属性用来控制图片的拉伸和挤压,这都是根据父容器来 的。 类似 Android 中 ImageView 的 scaleType   
  35.           //BoxFit.none:将图片的内容按原大小居中显示。
  36.             //BoxFit.contain:将图片的内容完整居中显示,通过按比例缩小或原来的 size 使得图片宽/高等于或小于组件的宽/高,类似 Android 的 centerInside。
  37.             //BoxFit.cover:按比例放大图片的 size 居中显示,类似 Android 的 centerCrop。
  38.             //BoxFit.fill:把图片不按比例放大/缩小到组件的大小显示,类似 Android 的 fitXY。
  39.             //BoxFit.fitHeight:把图片的高按照组件的高显示,宽等比例放大/缩小。
  40.             //BoxFit.fitWidth:把图片的宽按照组件的宽显示,高等比例放大/缩小。
  41.             //BoxFit.scaleDown:如果图片宽高大于组件宽高,则让图片内容完全居中显示,此时同 contain,如果图片宽高小于组件宽高,则按图片原大小居中显示,此时同 none。

  42.             color: Color(0xFFFFFF00),  //设置图片的颜色会覆盖 image 指定的图片,如果也设置了 colorBlendMode 属性,则会与 image 混合产生特殊效果
  43.             colorBlendMode: BlendMode.darken,
  44.            //  matchTextDirection: true,
  45.             
  46.               //如果图片没填充满容器的话,图片的重复方式,可选值有:
  47.             //ImageRepeat.noRepeat:不重复
  48.             //ImageRepeat.repeat:X、Y 轴都重复
  49.             //ImageRepeat.repeatX:只在 X 轴重复
  50.             //ImageRepeat.repeatY:只在 Y 轴重复
  51.             repeat: ImageRepeat.repeat,
  52.       ),
  53.       alignment: Alignment.center,
  54.     );
  55.   }
  56. }

复制代码

您需要登录后才可以回帖 登录 | 立即注册

Powered by CangBaoKu v1.0 小黑屋 藏宝库It社区 ( 冀ICP备14008649号 )

GMT+8, 2024-5-25 05:54 , Processed in 0.150524 second(s), 35 queries . © 2003-2025 cbk Team.

快速回复 返回顶部 返回列表