---

前言

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

---

一、Image

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

import QtQuick 2.15
import QtQuick.Controls 2.5Item {id: form09width: 480height: 320Rectangle {id: textanchors.fill: parent// 用来显示一个等待图元BusyIndicator {id: busyrunning: trueanchors.centerIn: parentz: 2}Text {id: stateLabelvisible: falseanchors.centerIn: parentz: 3}//AnimatedImageImage {id: imageViewer// 开启异步加载模式，专门使用一个线程来加载图片asynchronous: true// 图片较大的情况下,指定不缓存图像(cache默认为true)//cache: falseanchors.fill: parent// 设置图片的填充模式为“等比缩放”fillMode: Image.PreserveAspectFitonStatusChanged: {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 = truestateLabel.text = "Error"}else if(imageViewer.status === Image.Null){busy.running = false;stateLabel.visible = truestateLabel.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.5Item {id: form09width: 480height: 320Rectangle {id: textanchors.fill: parent// 用来显示一个等待图元BusyIndicator {id: busyrunning: trueanchors.centerIn: parentz: 2}Text {id: stateLabelvisible: falseanchors.centerIn: parentz: 3}//AnimatedImageImage {id: imageViewer// 开启异步加载模式，专门使用一个线程来加载图片asynchronous: true// 图片较大的情况下,指定不缓存图像(cache默认为true)cache: falseanchors.fill: parent// 设置图片的填充模式为“等比缩放”fillMode: Image.PreserveAspectFitonStatusChanged: {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 = truestateLabel.text = "Error"}else if(imageViewer.status === Image.Null){busy.running = false;stateLabel.visible = truestateLabel.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.5Item {id: form09width: 480height: 320Rectangle {id: textanchors.fill: parent// 用来显示一个等待图元BusyIndicator {id: busyrunning: trueanchors.centerIn: parentz: 2}Text {id: stateLabelvisible: falseanchors.centerIn: parentz: 3}AnimatedImage//Image{id: imageViewer// 开启异步加载模式，专门使用一个线程来加载图片asynchronous: true// 图片较大的情况下,指定不缓存图像(cache默认为true)//cache: falseanchors.fill: parent// 设置图片的填充模式为“等比缩放”fillMode: Image.PreserveAspectFitonStatusChanged: {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 = truestateLabel.text = "Error"}else if(imageViewer.status === Image.Null){busy.running = false;stateLabel.visible = truestateLabel.text = "no image has been set"}}// 组件加载完成再加载图片Component.onCompleted: {imageViewer.source = "https://hbimg.b0.upaiyun.com/b5f77dca7e52921077df1adba22fb47aa4a9fae313818f-2kLYrw_fw658";}}}
}

---

总结