企业官网建设流程全解析

1、Image用来显示图片，比如jpg和png等，如果显示gif这种格式的图片，则只能将gif的第一帧显示，如果要显示动画，则需要使用AnimatedImage

asynchronous是一个用于控制资源加载或组件实例化是否在后台线程进行的布尔属性，防止耗时的加载操作阻塞主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.AnimatedImage

Window { 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 } }

运行结果：