Hello Qt(四十七)——QtQuick基础
一、QtQuick简介
QT提供了两种独立的方法创建用户界面。
QtQuick模块为创建流畅、鲜活的用户界面提供了一种标记语言。QtQuick模块适合需要动画元素的界面,以及应用程序主要运行在小屏幕和多点触控的设备上的场景。模块针对传统桌面提供了更多的支持,和目标平台做了更多的集成,无论目标平台是MacOSX、Windows、KDE、GNome。QtWidgets是一个非常高效的基于C++的类库,包含很多常见的用户界面组件,可以非常容易地为已存在的组件扩展新的功能。
QtQuick模块是使用QML语言编写应用程序的标准库。Qt QML模块提供了QML引擎和语言架构,QtQuick模块提供了使用QML语言创建用户界面的所有基础类型。
QtQuick模块提供了两套接口,QML API提供了使用QML语言创建用户界面的QML类型,C++ API提供了使用C++代码扩展QML应用程序接口。
QT4.7开始引入了QML,QML(Qt Meta-Object Language,Qt元对象语言)是一种用于描述应用程序用户界面的声明式编程语言。QML使用一些可视组件以及这些组件之间的交互来描述用户界面,是一种高可读性的语言,可以使组件以动态方式进行交互,并且允许组件在用户界面中很容易地实现复用和自定义。QML允许开发者和设计者以类似的方式创建高性能的、具有流畅的动画效果的、极具视觉吸引力的应用程序。QML提供了一个具有高可读性的类似JSON的声明式语法,并提供了必要的 JavaScript语句和动态属性绑定的支持。
二、 Qt Quick工程实例
1、创建Qt Quick应用
选择Qt Quick Application。
工程创建好后,Qt Quick工程包含QML文件、源文件
2、QML文件
Main.qml文件:
import QtQuick 2.6
import QtQuick.Window 2.2Window
{visible: truewidth: 640height: 480title: qsTr("Hello World")MainForm{anchors.fill: parentmouseArea.onClicked:{Qt.quit();}}
}
QML文档定义了一个QML对象树,由两部分组成:一个import导入部分,一个对象声明部分。
import导入语句类似于C++中的#include,只有导入了相关模块,才能使用其中的类型和功能。导入的模块QtQuick模块是在创建项目时选择的组件集,包含了创建用户界面所需要的基本类型和功能,QtQuick.Window模块中提供了Window类型,可以为Qt Quick场景创建一个顶层窗口。
对象声明部分,QML文档中的对象声明定义了要在可视场景中显示的内容。工程创建了两个对象:Window对象和其子对象MainForm。对象(object)由它们的类型(type)指定,以大写字母开头,后面跟随一对大括号,在括号中包含了对象的特性定义,比如对象的属性值或者其子对象。最外层的对象叫根对象,比如Window,在根对象里面定义的对象,叫做根对象的子对象,比如MainForm就是Window的子对象。 在Window中的visible是Window的属性,用来设置窗口是否显示,可以在帮助文档中查看一个类型的所有属性及用法。
MainForm不是QtQuick模块中的类型,而是自定义的一个用户界面表单(Qt Quick UI Forms),是Qt 5.4后提出的一个概念,类似于Qt C++编程中的UI文件,MainForm.ui.qml文件只能在设计模式下编辑。
import QtQuick 2.6Rectangle {property alias mouseArea: mouseAreawidth: 360height: 360MouseArea {id: mouseAreaanchors.fill: parent}Text {anchors.centerIn: parenttext: "Hello World"}
}
在main.qml文件中,MainForm就是MainForm.ui.qml的一个实例,而MainForm内部调用了mouseArea属性的onClicked事件处理器,相当于调用了MainForm.ui.qml中的MouseArea对象的onClicked事件处理器,Qt.quit()表明当在整个矩形中点击鼠标时要执行的命令就是退出程序。
所有的QML文件是以资源的形式放在.qrc文件中的,QML文件不需要编译,类似于素材。
3、源文件
Main.cpp文件:
#include <QGuiApplication>
#include <QQmlApplicationEngine>int main(int argc, char *argv[])
{QGuiApplication app(argc, argv);QQmlApplicationEngine engine;engine.load(QUrl(QStringLiteral("qrc:/main.qml")));return app.exec();
}
main函数中定义了一个QQmlApplicationEngine对象,并用其加载了main.qml文件。QQmlApplicationEngine类结合了QQmlEngine和QQmlComponent两个类的功能,提供了一个便捷的方式来加载一个QML文件,但QML文件的所有可视内容必须放在Window对象中才能最终显示出来。
4、pri工程附属文件
Deployment.pri文件:
unix:!android
{isEmpty(target.path){qnx{target.path = /tmp/$${TARGET}/bin}else{target.path = /opt/$${TARGET}/bin}export(target.path)}INSTALLS += target
}export(INSTALLS)
5、创建QML文件
要在工程中创建QML文件,创建QML文件的QML模板可以选择Qt Quick 1、Qt Quick 2和QtQuickUI File三种,Qt Quick 1会导入QtQuick 1.1模块,适用于Qt 4版本;QtQuick 2导入QtQuick 2.0模块,适用于Qt 5版本;QtQuick UI文件生成后会默认使用设计器。
QML文件不需要进行编译,可以直接运行。Qt提供了两个运行QML文件的工具qmlviewer和qmlscene,前者是Qt 4时代的产物,主要用来显示导入了QtQuick 1.1模块的QML文件,而qmlscene用来显示导入了QtQuick 2.0后版本的QML文件。选择“工具→外部→QtQuick→Qt Quick 2Preview”菜单项即可在qmlscene中显示现在打开的QML文档的内容。
三、扩展QML程序
1、添加文本显示
import QtQuick 2.0Rectangle {width: 100height: 62Text{text: "hello World"}
}
Text对象用来显示一块文本,其text属性用来指定要显示的文本内容
2、锚布局
QML中每一个组件都有一组无形的锚,分别在上、下、左、右、中心等处,可以定义组件自身和其他组件的相对位置。centerIn指Text组件在parent组件的中心,parent指Text的父组件Rectangle。
import QtQuick 2.0Rectangle {width: 100height: 62Text{anchors.centerIn: parenttext: "hello World"}
}
3、鼠标互动
import QtQuick 2.0Rectangle {width: 100height: 62Text{anchors.centerIn: parenttext: "hello World"}MouseArea{anchors.fill: parentonClicked:{Qt.quit()}}
}
MouseArea子对象是鼠标区域,是一个不可见的组件,通过MouseArea对象可以实现鼠标互动。anchors.fill是进行填充,将鼠标区域覆盖整个Rectangle窗口。onClicked是Qt C++中的信号处理函数,即信号处理器,其语法是on<Signal>,onClicked是Clicked单击信号的处理,当在窗口上单击鼠标后会执行Qt.quit()全局函数,执行结果就是退出程序。
4、id属性和属性别名
id属性是一个对象的名字,来唯一确定一个对象,在其他对象中可以通过id引用该对象。
import QtQuick 2.0Rectangle {width: 100height: 62property alias mArea:mouseAreaText{anchors.centerIn: parenttext: "hello World"}MouseArea{id:mouseAreaanchors.fill: parent}
}
MouseArea对象,设置其id为mouseArea,在Rectangle中可以通过mouseArea来访问MouseArea对象。在其他QML文件访问Rectangle内的子对象,需要在Rectangle中自定义属性,并且该属性需要是子对象的属性别名,例如声明的mArea属性,alias表明mArea是mouseArea的别名。
mArea.onClicked:
{Qt.quit()
}
Hello Qt(四十七)——QtQuick基础相关推荐
- 【零基础学Java】—finally代码块(四十七)
[零基础学Java]-finally代码块(四十七)
- Python编程基础:第四十七节 抽象类Abstract Classes
第四十七节 抽象类Abstract Classes 前言 实践 前言 抽象类可以这么理解,它就是一个模板,里面声明了子类必须定义的函数,但是对于每个函数都没有给出具体实现.所有函数的实现都是在子类中定 ...
- [Python从零到壹] 四十一.图像处理基础篇之图像采样处理
欢迎大家来到"Python从零到壹",在这里我将分享约200篇Python系列文章,带大家一起去学习和玩耍,看看Python这个有趣的世界.所有文章都将结合案例.代码和作者的经验讲 ...
- [Python从零到壹] 三十七.图像处理基础篇之图像融合处理和ROI区域绘制
欢迎大家来到"Python从零到壹",在这里我将分享约200篇Python系列文章,带大家一起去学习和玩耍,看看Python这个有趣的世界.所有文章都将结合案例.代码和作者的经验讲 ...
- 实验四android开发基础
实验四android开发基础 提交点一 Android Stuidio的安装测试: 参考<Java和Android开发学习指南(第二版)(EPUBIT,Java for Android 2nd) ...
- 【Visual C++】游戏开发笔记四十七 浅墨DirectX教程十五 翱翔于三维世界 摄像机的实现
分享一下我老师大神的人工智能教程.零基础!通俗易懂!风趣幽默!还带黄段子!希望你也加入到我们人工智能的队伍中来!https://blog.csdn.net/jiangjunshow 本系列文章由zhm ...
- [Python从零到壹] 四十.图像处理基础篇之图像量化处理
欢迎大家来到"Python从零到壹",在这里我将分享约200篇Python系列文章,带大家一起去学习和玩耍,看看Python这个有趣的世界.所有文章都将结合案例.代码和作者的经验讲 ...
- 【正点原子STM32连载】第四十七章 汉字显示实验 摘自【正点原子】MiniPro STM32H750 开发指南_V1.1
1)实验平台:正点原子MiniPro H750开发板 2)平台购买地址:https://detail.tmall.com/item.htm?id=677017430560 3)全套实验源码+手册+视频 ...
- 深入探索 Qt WebEngineCore:从基础原理到高级应用与技巧
深入探索 Qt WebEngineCore:从基础原理到高级应用与技巧 Diving into Qt WebEngineCore: From Basic Principles to Advanced ...
- windows域问题总结--专家门诊四十七问
QUOTE: 深入理解域之AD活动目录企业应用及案例分享 无论集中还是分散,目录服务触及企业的每个角落,而且常常超越企业延伸到商业伙伴和客户.AD是一个企业目录系统,可以自动进行用户数据,安全和分布的 ...
最新文章
- Win7安装VC++6.0已知的兼容性问题的解决方法
- Oracle Vm VirtualBox中安装Ubantu
- share团队冲刺3
- CNN的发展历史(LeNet,Alexnet,VGGNet,GoogleNet,ReSNet)
- Friday the Thirteenth
- html下拉表覆盖透明,css透明元素如何遮挡住fixed元素
- Silverlight 主页与页面用户组件中方法的调用顺序
- iOS-UITextField中给placeholder动态设置颜色的四种方法
- 1.Chrome开发者工具不完全指南(一、基础功能篇)
- ID与Class的区别(#与。的区别)CSS
- 卸载神器:geek(绝对好用,中国人不骗中国人)
- 音频 ASIO 驱动开发
- 关于IDM的使用相关教程
- 宣纸一笔,思重于行——聊一聊思考的价值
- OpenCV图像识别技术+Mediapipe与Unity引擎的结合
- 实现《你的名字》同款滤镜,python+opencv
- 206计算机毕业设计
- 开奶茶店,哪里学奶茶的制作配方?
- 快速了解sealed关键字
- 高人指路!如何借力国家标准让企业项目管理体制建设更容易?
热门文章
- 血栓清道夫机器人_血栓的“清道夫”终于被找到了,每天吃一点,血液不粘,血管不堵...
- 4、Kafka API实战
- vue+echart图表数据切换
- 英二变英一,数二变数一!考研人太难了……
- cad拉伸怎么用_【cad比例缩放教程】cad缩放怎么用?
- 【题解 海量集训 并查集】 银河英雄传说
- 配置exchange2010邮箱和邮件大小限制
- 结合d3.js实现气象数据的可视化
- NOIP 2008 普及组初赛试题 解题报告、题解及选择题思路,高质量
- 解读Unity中的CG编写Shader系列4——unity中的圆角矩形shader