Qt Quick QMl学习笔记 之图片浏览器
Qt Quick模块是编写QML应用程序的标准库。虽然Qt QML模块提供QML引擎和语言基础结构,但Qt Quick模块提供了使用QML创建用户界面所需的所有基本类型。它提供了一个可视画布,包括用于创建和动画可视组件,接收用户输入,创建数据模型和视图以及延迟对象实例化的类型。
Qt Quick模块提供了QML API,它提供了用于使用QML语言创建用户界面的QML类型,以及用于使用C ++代码扩展QML应用程序的C ++ API。
注意:还可以使用一组基于Qt Quick的UI控件来创建用户界面。有关更多信息,请参阅Qt Quick Controls 2。
对于那些刚接触QML和Qt Quick的人,请参阅QML应用程序,了解编写QML应用程序的介绍。
下面通过简单的小代码对Quick中的 部分控件的结合使用 制作一个简单的图片查看器
Image
Text
Button
Rectangle
FileDialog
BusyIndicator
import QtQuick 2.9
import QtQuick.Window 2.11
import QtQuick.Controls 2.4
import QtQuick.Controls 1.4
import QtQuick.Controls.Styles 1.4
import QtQuick.Dialogs 1.3
Window{
id:mainWindow
width: 600
height: 400
visible: true
Rectangle{
id:view_image_rectagnle
anchors.top:parent.top
anchors.topMargin: 10
anchors.left: parent.left
anchors.leftMargin: 10
anchors.right: parent.right
anchors.rightMargin: 10
anchors.bottom: parent.bottom
anchors.bottomMargin: 60
border.color: "#55ffff"
border.width: 2
radius: 5
Image {
id: imageView
anchors.fill: parent
anchors.margins: 10
source: ""
asynchronous: true
cache: false
fillMode: Image.PreserveAspectFit
onScaleChanged: {
if(imageView.status == Image.Loading){
busy.running = true
}else if(status == Image.Ready){
busy.running = false
}else if(status == Image.Error){
pathText.text = "图片加载失败"
}
}
}
}
Button{
id:openBtn
implicitWidth: 100
implicitHeight: 20
anchors.top: view_image_rectagnle.bottom
anchors.topMargin: 10
anchors.left: view_image_rectagnle.left
anchors.bottom: parent.bottom
anchors.bottomMargin: 10
text:"Open"
style: ButtonStyle{
background: Rectangle{
anchors.fill: parent
border.color: "#55eeff"
border.width: Control.activeFocus ? 5 : 2
}
}
MouseArea{
anchors.fill: parent
onClicked: {
//打开文件
fileDialog.open()
}
}
}
//显示文件路径
Text{
id:pathText
anchors.top: openBtn.top
anchors.left: openBtn.right
anchors.leftMargin: 10
verticalAlignment: Text.AlignVCenter
padding: 10
text:"1111111111111"
}
//文件选择框
FileDialog{
id:fileDialog
title:"请选择您要展示的图片"
nameFilters: ["Image Files(*.jpg *.png *.bmp)"]
onAccepted: {
console.log(fileUrl)
pathText.text = fileUrl
imageView.source = fileUrl
}
onRejected: {
console.log("用户取消了选择")
}
}
//繁忙指示器
BusyIndicator{
id:busy
running: false
z:2
} }
效果:
Qt Quick QMl学习笔记 之图片浏览器的更多相关文章
- QML学习笔记(六)- 简单计时器和定时器
做一个简单的qml计时器和定时器,左键触发计时,右键触发定时 GitHub:八至 作者:狐狸家的鱼 本文链接:QML学习笔记(六)- 简单计时器和定时器 左键点击按钮,触发计时器,中键可以暂停计时,同 ...
- qml学习笔记(二):可视化元素基类Item详解(上半场anchors等等)
原博主博客地址:http://blog.csdn.net/qq21497936本文章博客地址:http://blog.csdn.net/qq21497936/article/details/78516 ...
- (转)Qt Model/View 学习笔记 (七)——Delegate类
Qt Model/View 学习笔记 (七) Delegate 类 概念 与MVC模式不同,model/view结构没有用于与用户交互的完全独立的组件.一般来讲, view负责把数据展示 给用户,也 ...
- (转)Qt Model/View 学习笔记 (五)——View 类
Qt Model/View 学习笔记 (五) View 类 概念 在model/view架构中,view从model中获得数据项然后显示给用户.数据显示的方式不必与model提供的表示方式相同,可以与 ...
- [置顶] iOS学习笔记47——图片异步加载之EGOImageLoading
上次在<iOS学习笔记46——图片异步加载之SDWebImage>中介绍过一个开源的图片异步加载库,今天来介绍另外一个功能类似的EGOImageLoading,看名字知道,之前的一篇学习笔 ...
- QML学习笔记(五)— 做一个简单的待做事项列表
做一个简单的QML待做事项列表,能够动态添加和删除和编辑数据 GitHub:八至 作者:狐狸家的鱼 本文链接:QML学习笔记(五)— 做一个待做事项列表 主要用到QML:ListView 效果 全部代 ...
- QML学习笔记之一
摘自<Qt Quick中文手册> Qt Quick提供了一套高动态,丰富的QML元素来定制用户界面的说明性框架. Qt Quick包含了QtDeclarative C++模块.QML,并且 ...
- Qt快速入门学习笔记(基础篇)
本文基于Qter开源社区论坛版主yafeilinux编写的<Qt快速入门系列教程目录>,网址:http://bbs.qter.org/forum.php?mod=viewthread&am ...
- Webpack4 学习笔记五 图片解析、输出的文件划分目录
前言 此内容是个人学习笔记,以便日后翻阅.非教程,如有错误还请指出 webpack打包图片和划分文件路径 使用图片的方式 通过 new Image() 在 css中设置 background-imag ...
随机推荐
- Python深入:setuptools简介
Setuptools是Python Distutils的加强版,使开发者构建和发布Python包更加容易,特别是当包依赖于其他包时.用setuptools构建和发布的包与用Distutils发布的包是 ...
- java一般处理高并发的技术手段
应对高并发的解决方案: 1.将压力放在数据库上面,添加行级锁. select * from table for update; 2.将压力放在应用程序上面,对方法加synchronized同步.
- NLP突破性成果 BERT 模型详细解读 bert参数微调
https://zhuanlan.zhihu.com/p/46997268 NLP突破性成果 BERT 模型详细解读 章鱼小丸子 不懂算法的产品经理不是好的程序员 关注她 82 人赞了该文章 Goo ...
- 【原生JS】切换选项卡
效果图: HTML: <!DOCTYPE html> <html> <head> <meta charset="utf-8" /> ...
- History和Location
Location 对象属性属性 描述hash 设置或返回从井号 (#) 开始的 URL(锚).host 设置或返回主机名和当前 URL 的端口号.hostname 设置或返回当前 URL 的主机名.h ...
- jq杂项方法/工具方法----isArray()
https://www.cnblogs.com/sandraryan/ $.isArray()函数用于判断指定参数是否是一个数组.返回布尔值. <!DOCTYPE html> <ht ...
- Linux 查看kafka版本
find /opt -name \*kafka_\* | head -1 | grep -o '\kafka[^\n]*'
- Mule自带例子之stockquote
1 配置效果图 2 配置文件 <?xml version="1.0" encoding="UTF-8"?> <mule version=&qu ...
- win10 uwp 依赖属性
本文告诉大家如何使用依赖属性,包括在 UWP 和 WPF 如何使用. 本文不会告诉大家依赖属性的好处,只是简单告诉大家如何使用 在 UWP 和 wpf ,如果需要创建自己的依赖属性,可以使用代码片,在 ...
- mysql 第一课 win7艰难的配置与删除注册表重新安装
mysql 这个安装一定要慎重!慎重!慎重! 重要的事情说三遍.. 不会的一定要按步骤来~出错了真的很难受. 详细教程 --> https://jingyan.baidu.com/album/ ...