Qml——Image和AnimatedImage使用

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

运行结果：