QML Image、AnimatedImage 加载 Gif动图

最新推荐文章于 2024-05-28 11:38:54 发布

秃头就能变强

最新推荐文章于 2024-05-28 11:38:54 发布

阅读量465

点赞数

分类专栏： qml 文章标签： qt

本文链接：https://blog.csdn.net/qq_44084616/article/details/134533541

版权

qml 专栏收录该内容

3 篇文章 0 订阅

订阅专栏

文章目录

前言
一、Image
二、AnimatedImage
- 1. cache = false
- 2. cache = true（默认为true）
总结

前言

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