QT Quick QML 之 Image介绍 | 您所在的位置:网站首页 › image组件支持的图片格式包括 › QT Quick QML 之 Image介绍 |
《Image介绍》
1. 简介2. 图片填充效果3. 图像mirror属性4. 加载网络图片
所有的热爱都要不遗余力,真正喜欢它便给它更高的优先级,和更多的时间吧! QML其它文章请点击这里: QT QUICK QML 学习笔记 本文转载于: QML之Image 1. 简介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 //水平对齐方式 居中 默认居中 }这里简单设置了图片的几个属性,让我们看下它的显示效果: 2. 图片填充效果接下来看下图片的填充效果,具体含义我在代码中有注释: 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 //图像的填充方式-水平复制,垂直填充 } }运行结果: 3. 图像mirror属性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 } }看下效果: 感觉还不错。。大伙可以试一试。 4. 加载网络图片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的状态变化来进行界面跟新。 QML其它文章请点击这里: QT QUICK QML 学习笔记 |
CopyRight 2018-2019 实验室设备网 版权所有 |