QML之Image

Image控件可以用来显示图片，当然必须是qt支持的图片格式，比如Jpg，Png等等。当然，这里说的图片是静态图片，如果你要显示gif这种格式的图片，那么只能将gif的第一帧显示出来。

    Image {
        id: name
        width: 120 //图像宽度
        height: 120 //图像高度
        anchors.centerIn: parent
        source: "images/Contacts_white_round.png"
        autoTransform: true //图像是否自动变换，默认为false
        fillMode: Image.Pad //图像的填充方式-保持图片原样
        cache: false //指定是否缓存图像，默认为true，在处理大图像的时候，指定为false还是很有用的
        //horizontalAlignment: Image.Right //水平对齐方式 居右
         //horizontalAlignment: Image.Left //水平对齐方式 居左
        // horizontalAlignment: Image.AlignHCenter //水平对齐方式 居中 默认居中
    }

这里简单设置了图片的几个属性，让我们看下它的显示效果：

接下来看下图片的填充效果，具体含义我在代码中有注释：

 Column
    {

        Image {
            width: 48
            height: 48
             source: "images/Contacts_white_round.png"
            fillMode: Image.Pad //图像的填充方式-保持图片原样
            anchors.left: pad
        }

        Image {
            width: 32
            height: 32
             source: "images/Contacts_white_round.png"
            fillMode: Image.PreserveAspectFit //图像的填充方式-缩放不裁剪
        }

        Image {
            width: 32
            height: 32
            source: "images/Contacts_white_round.png"
            fillMode: Image.PreserveAspectCrop //图像的填充方式-缩放必要时裁剪
        }


        Image {
            width: 128
            height: 128
            source: "images/Contacts_white_round.png"
            fillMode: Image.Tile //图像的填充方式-水平垂直复制
        }

        Image {
            width: 128
            height: 128
            source: "images/Contacts_white_round.png"
            fillMode: Image. TileVertically //图像的填充方式-水平填充，垂直复制
        }

        Image {
            width: 128
            height: 128
            source: "images/Contacts_white_round.png"
            fillMode: Image.TileHorizontally //图像的填充方式-水平复制，垂直填充
        }
    }

运行结果：

Image中有一个比较有意思的属性，那就是mirror属性，这个属性指定的是图像是否水平旋转，在呈现镜像的场合是十分方便的。

 Row
    {
        Image {
                   width: 48
                   height: 48
                   source: "images/login-icon.jpg"
                  mirror: false
               }

        Image {
                   width: 48
                   height: 48
                   source: "images/login-icon.jpg"
                  mirror: true
               }

    }

看下效果：

感觉还不错。。大伙可以试一试。

Image控件还有一个值得注意的地方就是，它可以加载网络图片，它的source属性是一个URL，可以接收Qt支持的任意一种网络协议。当Image识别到source是网络资源的时候会自动开启异步加载。

让我们看一个加载网络图片的代码：

 Rectangle
    {
        width: 400
        height: 320
        color:"#ffffff"

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

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

        Image {
            id:imageViews
            cache: false
            asynchronous: true
            fillMode: Image.PreserveAspectFit

            onStatusChanged: {
                if(imageViews.status == Image.Loading){
                    busy.running = true;
                    stateLabel.visible = false;
                    console.info("Lodings....");
                }
                else if(imageViews.status == Image.Ready)
                {
                    busy.running = false;
                    console.info("Ready....");
                }
                else if(imageViews.status == Image.Error)
                {
                    busy.running = false;
                    stateLabel.visible = true;
                    stateLabel.text = "Errors";
                    console.info("Errors....");

                }
            }
        }

        Component.onCompleted:
        {
            imageViews.source = "http://b79.photo.store.qq.com/psu?/7c595bd9-7aa7-4b74-92af-b0874c1528c8/ASXihnWbyI62kCamKmOGjQACj1HTNuIEgpyYcF5R5rw!/b/YdIhIS**bgAAYpG2JS9OawAA&bo=ngL2AQAAAAABFFg!&rf=viewer_4&t=5"
        }

    }

程序运行后会出现加载界面：

图片加载完成后，BusyIndicator消失，图片显示

这里主要使用onStatusChanged信号处理器来监听Status的状态变化来进行界面跟新。