QML Image、AnimatedImage 加载 Gif动图

---

前言

Image、AnimatedImage 加载 Gif动图，以及AnimatedImage加载Gif是否缓存会导致的问题

---

一、Image

使用Image加载Gif，显示的只是一张图片

import QtQuick 2.15
import QtQuick.Controls 2.5

Item {
    id: form09
    width: 480
    height: 320
    Rectangle {
        id: text
        anchors.fill: parent

        // 用来显示一个等待图元
        BusyIndicator {
            id: busy
            running: true
            anchors.centerIn: parent
            z: 2
        }

        Text {
            id: stateLabel
            visible: false
            anchors.centerIn: parent
            z: 3
        }

        //AnimatedImage
        Image {
            id: imageViewer
            // 开启异步加载模式，专门使用一个线程来加载图片
            asynchronous: true
            // 图片较大的情况下,指定不缓存图像(cache默认为true)
            //cache: false
            anchors.fill: parent
            // 设置图片的填充模式为“等比缩放”
            fillMode: Image.PreserveAspectFit
            onStatusChanged: {
                if (imageViewer.status === Image.Loading) {
                    busy.running = true;
                    stateLabel.visible = false
                }
                else if(imageViewer.status === Image.Ready){
                    busy.running = false;
                }
                else if(imageViewer.status === Image.Error) {
                    busy.running = false;
                    stateLabel.visible = true
                    stateLabel.text = "Error"
                }
                else if(imageViewer.status === Image.Null)
                {
                    busy.running = false;
                    stateLabel.visible = true
                    stateLabel.text = "no image has been set"
                }
            }

            // 组件加载完成再加载图片
            Component.onCompleted: {
                imageViewer.source = "https://hbimg.b0.upaiyun.com/b5f77dca7e52921077df1adba22fb47aa4a9fae313818f-2kLYrw_fw658";
            }
        }
    }
}

二、AnimatedImage

1. cache = false

gif正常显示，但仅显示一次，保持最后一帧的图像

import QtQuick 2.15
import QtQuick.Controls 2.5

Item {
    id: form09
    width: 480
    height: 320
    Rectangle {
        id: text
        anchors.fill: parent

        // 用来显示一个等待图元
        BusyIndicator {
            id: busy
            running: true
            anchors.centerIn: parent
            z: 2
        }

        Text {
            id: stateLabel
            visible: false
            anchors.centerIn: parent
            z: 3
        }

        //AnimatedImage
        Image {
            id: imageViewer
            // 开启异步加载模式，专门使用一个线程来加载图片
            asynchronous: true
            // 图片较大的情况下,指定不缓存图像(cache默认为true)
            cache: false
            anchors.fill: parent
            // 设置图片的填充模式为“等比缩放”
            fillMode: Image.PreserveAspectFit
            onStatusChanged: {
                if (imageViewer.status === Image.Loading) {
                    busy.running = true;
                    stateLabel.visible = false
                }
                else if(imageViewer.status === Image.Ready){
                    busy.running = false;
                }
                else if(imageViewer.status === Image.Error) {
                    busy.running = false;
                    stateLabel.visible = true
                    stateLabel.text = "Error"
                }
                else if(imageViewer.status === Image.Null)
                {
                    busy.running = false;
                    stateLabel.visible = true
                    stateLabel.text = "no image has been set"
                }
            }

            // 组件加载完成再加载图片
            Component.onCompleted: {
                imageViewer.source = "https://hbimg.b0.upaiyun.com/b5f77dca7e52921077df1adba22fb47aa4a9fae313818f-2kLYrw_fw658";
            }
        }
    }
}

2. cache = true（默认为true）

gif 持续显示

import QtQuick 2.15
import QtQuick.Controls 2.5

Item {
    id: form09
    width: 480
    height: 320
    Rectangle {
        id: text
        anchors.fill: parent

        // 用来显示一个等待图元
        BusyIndicator {
            id: busy
            running: true
            anchors.centerIn: parent
            z: 2
        }

        Text {
            id: stateLabel
            visible: false
            anchors.centerIn: parent
            z: 3
        }

        AnimatedImage
        //Image
        {
            id: imageViewer
            // 开启异步加载模式，专门使用一个线程来加载图片
            asynchronous: true
            // 图片较大的情况下,指定不缓存图像(cache默认为true)
            //cache: false
            anchors.fill: parent
            // 设置图片的填充模式为“等比缩放”
            fillMode: Image.PreserveAspectFit
            onStatusChanged: {
                if (imageViewer.status === Image.Loading) {
                    busy.running = true;
                    stateLabel.visible = false
                }
                else if(imageViewer.status === Image.Ready){
                    busy.running = false;
                }
                else if(imageViewer.status === Image.Error) {
                    busy.running = false;
                    stateLabel.visible = true
                    stateLabel.text = "Error"
                }
                else if(imageViewer.status === Image.Null)
                {
                    busy.running = false;
                    stateLabel.visible = true
                    stateLabel.text = "no image has been set"
                }
            }

            // 组件加载完成再加载图片
            Component.onCompleted: {
                imageViewer.source = "https://hbimg.b0.upaiyun.com/b5f77dca7e52921077df1adba22fb47aa4a9fae313818f-2kLYrw_fw658";
            }
        }
    }
}

---

总结