QML之Image

悠悠 2022-06-02 10:23 208阅读 0赞

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 //水平对齐方式 居中 默认居中
        }

这里简单设置了图片的几个属性，让我们看下它的显示效果：  
![这里写图片描述][SouthEast]

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

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 //图像的填充方式-水平复制，垂直填充
            }
        }

运行结果：  
![这里写图片描述][SouthEast 1]

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

看下效果：  
![这里写图片描述][SouthEast 2]

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

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

程序运行后会出现加载界面：  
![这里写图片描述][SouthEast 3]

图片加载完成后，BusyIndicator消失，图片显示  
![这里写图片描述][SouthEast 4]

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

[SouthEast]: /images/20220602/d55f0d7fcac34af3bcca7e1a6560d685.png
[SouthEast 1]: /images/20220602/8427ba83c288447f9f62ac1234202482.png
[SouthEast 2]: /images/20220602/0d2a69bb57454175bb26198df7204691.png
[SouthEast 3]: /images/20220602/d52f79747c864679a7ee72cf440d33be.png
[SouthEast 4]: /images/20220602/69f9d9da8022471893f456f589c0f04a.png