19--Qt基本元素初体验--Image

标签（空格分隔）： Qt

---

Image可以显示一个图片，只要是Qt支持的，比如JPG、PNG、BMP、GIF、SVG等都可以显示。它只能显示静态图片，对于GIF等格式，只会把第一帧显示出来。

显示网路图片
下面的例子是在下载和加载前显示一个转圈圈的Loading图标，图片加载成功后隐藏Loading图标，如果加载出错，则显示一个简单的错误消息

import QtQuick 2.0
import QtQuick.Controls 2.2

Rectangle {
    width: 480;
    height: 320;
    color: "#d5d5d5";
    BusyIndicator {
        id:busy;
        running: true;
        anchors.centerIn: parent;
        z:2;
    }
    Text {
        id: stateLabel;
        visible: false;
        anchors.centerIn: parent;
        z:3;
    }
    Image {
        id: imageViewer;
        asynchronous: true;
        cache: false;
        anchors.fill: parent;
        fillMode: Image.PreserveAspectFit;//等比缩放模式
        onStatusChanged: {
            if(imageViewer.status === Image.Loading){
                busy.running = true;
            }
            else if(imageViewer.status === Image.Ready){
                busy.running = false;
            }
            else if(imageViewer.status === Image.Error){
                busy.running = false;
                stateLabel.visible = true;
                stateLabel.text = "ERROR";
            }
        }
    }
    Component.onCompleted: {
        imageViewer.source = "https://ss0.baidu.com/6ONWsjip0QIZ8tyhnq/it/u=1354031076,1682582909&fm=173&app=49&f=JPEG?w=218&h=146&s=8FA3FE01024025475E915E020300E0D5"
    }
}

BusyIndicator 用来显示一个等待图元，在进行一些耗时操作时你可以使用它来缓解用户的焦躁情绪。
BusyIndicator 的running属性是个布尔值，为true时显示。style属性是个布尔值，为true时显示。style属性允许你定制BusyIndicator。默认的效果就是如下图所示，一个转圈圈的动画。

     BusyIndicator {
        id:busy;
        running: true;
        anchors.centerIn: parent;
        z:2;

BusyIndicator .gif

虽然BusyIndicator只有running和style两个属性，但它的祖先有很多属性，上面用到的anchors和z，都是从Item继承来的属性，可以直接使用。