1、Image用来显示图片比如jpg和png等如果显示gif这种格式的图片则只能将gif的第一帧显示如果要显示动画则需要使用AnimatedImageasynchronous是一个用于控制资源加载或组件实例化是否在后台线程进行的布尔属性防止耗时的加载操作阻塞主UI线程从而保持界面流畅默认为false本地图片会同步加载在加载完成前会阻塞 UI 线程。如果图片很大界面会明显卡顿Image { id: name asynchronous: false //同步加载默认为false width: 60 height: 60 anchors.centerIn: parent //居中显示 source: file:///C:/Users/聪/Desktop/2.png autoTransform: true //图像是否自动变换默认为false cache: false //指定是否缓存图像默认为true在处理大图像的时候指定为false还是很有用的 fillMode: Image.Pad //图像的填充方式——保持图片原样 }运行结果2.Image常用属性3.加载网络图片Image { id: image asynchronous: true //同步加载默认为false anchors.centerIn: parent //居中显示 source: http://images.cnblogs.com/cnblogs_com/lifexy/1188191/0_2.jpg cache: false fillMode: Image.PreserveAspectFit //图像将会均匀缩放并且不裁剪 onStatusChanged: { printf(Image, image.status) } } BusyIndicator{ anchors.centerIn: parent running: image.status Image.Loading //当在加载的时候显示忙图标 }运行结果BusyIndicator是 忙碌指示器显示一个旋转的加载动画。running: image.status Image.Loading绑定表达式只有当图片处于Loading状态时指示器才转动。图片加载完成Ready或失败Error时running变为false动画停止。这个绑定是响应式的image.status一变化running自动重新求值不需要手动写信号处理。这是 QML 属性绑定的典型用法。4.AnimatedImageWindow { id: wind visible: true width: 820 height: 560 Text { // 动画进度 底部提示 id: hint text: 正在加载中 color: #000000 font.pixelSize: 20 anchors.horizontalCenter: parent.horizontalCenter anchors.bottom: parent.bottom anchors.bottomMargin: 20 } AnimatedImage { id: image asynchronous : true //异步加载,默认为false,如果是加载网络资源(例如HTTP)的图像,那么必须为true anchors.centerIn: parent //居中显示 source : http://img2020.cnblogs.com/blog/1182576/202101/1182576-20210110222837461-1423077109.gif fillMode: Image.PreserveAspectFit //图像将会均匀缩放,并且不裁剪 onCurrentFrameChanged: { console.log(frameCount) //打印总帧数 hint.text (currentFrame 1) / frameCount // 更新动画进度 } } BusyIndicator { anchors.centerIn: parent running: image.status Image.Loading } }运行结果