第53篇 Qt Quick项目详解
版权声明
导语
前面我们一起创建了一个Qt Quick项目,并对里面的文件进行了简单的讲解,虽然这只是一个HelloWorld程序,但对于没有Qt Quick编程经验的同学来说,这个项目还是有点复杂。在这一篇中,我们将从最简单的QML文件讲起,然后逐渐丰富项目内容,帮助大家由浅及深的进行学习,进一步了解Qt Quick项目的构成。
环境:Windows 7 + Qt 5.5.0+ Qt Creator 3.4.2
目录
一、创建空项目 二、添加QML文件 三、运行程序 四、扩展QML程序 五、添加C++代码 六、使用资源文件
正文
一、创建空项目
1、首先打开Qt Creator,然后选择“新建文件或项目”菜单项,在选择模板页面选择“其他项目”分类中的“Empty qmake Project”,我们先来创建一个空项目,后面逐步往里面添加文件。点击“choose”按钮确定选择,如下图所示。
2、在项目位置页面,将项目名称修改为“myqml”,然后选择好创建路径。如下图所示。
3、后面的步骤直接使用默认设置即可。
二、添加QML文件
1、创建好的空项目只有一个.pro项目文件,现在里面的内容也是空的。我们先不去管它,下面向该项目中添加文件。在myqml文件夹上右击,在弹出的菜单中选择“添加新文件”,如下图所示。
2、在弹出的新建文件对话框中选择Qt分类中的“QML File(Qt Quick 2)”一项。如下图所示。(说明一下:这里要添加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文件生成后会默认使用设计器,因为我们这一节直接讲代码,不涉及设计器的内容,所以不选择这个模板。其实,使用哪个模板都一样,因为到文件里面可以直接修改导入模块语句,初学者在这里不要纠结。)
3、下面设置文件的名称为“main”,路径保持默认即可,现在的路径就是项目源码路径。然后点击“下一步”按钮,如下图所示。
4、最后是项目管理页面,可以看到,新创建的文件默认添加到了myqml.pro项目中,直接点击“完成”按钮完成文件的添加建,如下图所示。
三、运行程序
1、可以看到添加的文件就是“main.qml”,后缀.qml表明该文件是一个QML文件,其内容如下。
import QtQuick 2.0 Rectangle { width: 100 height: 62 }
这是一个最简单的QML文件,它会显示一个宽100像素高62像素的矩形。这里的import语句上一节已经提到过了,它会导入相应的模块,比如这里导入了QtQuick 2.0模块。下面的Rectangle是矩形对象,用来定义一个矩形项目(项目类似于C++中的窗口或者部件),里面的width和height是Rectangle的属性,用来设置矩形相关参数。
2、QML文件与C++文件是不同的,它不需要进行编译,可以直接运行。在Qt中提供了两个运行QML文件的工具qmlviewer和qmlscene,前者是Qt 4时代的产物,主要用来显示导入了QtQuick 1.1模块的QML文件,而qmlscene用来显示导入了QtQuick 2.0以后版本的QML文件。选择“工具→外部→QtQuick→Qt Quick 2Preview”菜单项即可在qmlscene中显示现在打开的QML文档的内容。如下图所示。
运行效果如下图所示。
四、扩展QML程序
1、添加文本显示
可以看到现在的程序就是一个空白的窗口,什么都没有。下面我们来扩展该程序,将main.qml文件的内容更改如下: import QtQuick 2.0 Rectangle { width: 100 height: 62 Text { text: "hello World" } }
这里添加了一个Text对象,它用来显示一块文本,其text属性用来指定要显示的文本内容。下面先按下Ctrl+S快捷键保存该文件,然后在qmlscene中查看显示效果,如下图所示。
2、使用锚布局
我们看到现在可以显示hello world文本了,但是文本默认显示在了左上角,我们希望它可以在窗口中间显示,下面继续添加代码:
Text { text: "hello World" anchors.centerIn: parent }
这里使用了anchor锚的概念进行了布局,在QML中每一个项目都有一组无形的锚,分别在上、下、左、右、中心等处,它们可以定义项目自身和其他项目的相对位置。比如这里的centerIn就是指Text项目在parent项目的中心,这里的parent就是指Text的父项目Rectangle。在anchor后面一般指定其他项目的id,如果是父子项目,也可以像现在这样指定parent。
下面先保存代码(以后每次修改都需要保存后才能显示,后面不再提醒),然后在qmlscene中运行,效果如下图所示。
3、添加鼠标互动。
前面的代码已经完成了一个简单的Hello World界面,下面我们添加代码实现点击界面退出程序的效果:
import QtQuick 2.0 Rectangle { width: 100 height: 62 Text { text: "hello World" anchors.centerIn: parent } MouseArea { anchors.fill: parent onClicked: { Qt.quit() } } }
我们在Rectangle中又添加了一个MouseArea子对象,这个从字面上翻译就是鼠标区域,它是一个不可见的项目,就是说我们在窗口上并不能看到它的存在,通过该对象可以实现鼠标互动。anchors.fill是进行填充,这里就是将鼠标区域覆盖整个Rectangle窗口。onClicked其实就是Qt C++中的信号处理函数,这里一般叫做信号处理器,其语法是on<Signal>,所以这里就是Clicked单击信号的处理,当在窗口上单击鼠标后会执行Qt.quit()函数,这是个全局函数,执行结果就是使程序退出。 大家可以在qmlscene中运行程序,然后在窗口上点击鼠标查看运行效果。
4、使用组件
前面创建的是main.qml文件,本意是让其作为主要文件,成为程序的入口。但是如果按照现在的做法,程序越写越复杂,main.qml的内容会越来越多,越来越乱。为了避免在main.qml中添加过多的代码,我们一般将具体的实现代码放到单独的文件中。
下面首先在QML目录中添加新文件,如下图所示。
模板依然选择Qt分类中的QML File(QtQuick 2),文件名称设置为“MyHelloWorld”,请注意首字母要大写,如下图所示。
添加完成后,将main.qml中的内容全部复制粘贴过来,如下图所示。
下面我们修改main.qml文件的内容如下:
import QtQuick 2.0 Item { MyHelloWorld { anchors.fill: parent } }
像这样在一个单独文档中的QML代码段,就定义了一个对象类型,它也叫做组件,这个文件的名称必须以大写字母开头。比如这里创建了一个MyHelloWorld类型,在其他QML文件中可以直接使用同一目录下自定义的对象类型,所以,我们在main.qml中直接创建了MyHelloWorld对象。这里根对象使用了Item,在Qt Quick中,所有可视项目都继承自Item,因为在main.qml中我们只需要创建一个窗口,不需要进行内容设置,所以一般使用Item即可,当然,如果想使用Rectangle等也是可以的。 使用组件除了可以简化代码外,更重要的是它可以被重复使用,如果在一个代码中需要多次使用相同的部件或者功能,将它们作为组件就没必要多次编写相同的代码了。大家可以保存文件后在qmlscene中运行程序,查看效果。
5、id属性和属性别名
前面提到过id属性,其实它就是一个对象的名字,来唯一确定一个对象,在其他对象中可以通过id引用该对象。下面我们将MyHelloWorld.qml文件的内容更改如下:
import QtQuick 2.0 Rectangle { width: 100 height: 62 property alias mArea: mouseArea Text { text: "hello World" anchors.centerIn: parent } MouseArea { id: mouseArea anchors.fill: parent } }
这里我们首先更改了MouseArea对象,设置其id为mouseArea,这样就可以在Rectangle中通过mouseArea来访问MouseArea对象。为了可以在MyHelloWorld.qml文件外访问Rectangle内的子对象,我们需要在Rectangle中自定义属性,并且该属性需要是子对象的属性别名,例如这里我们声明了一个mArea属性,alias表明mArea是mouseArea的别名,这样在MyHelloWorld.qml文件外就可以通过mArea来操作MouseArea对象了。
下面我们修改main.qml文件:
import QtQuick 2.0 Item { MyHelloWorld { anchors.fill: parent mArea.onClicked: { Qt.quit() } } }
这里直接在MyHelloWorld对象中通过mArea调用了onClicked处理器。现在保存文件,然后通过qmlscene运行程序,查看效果。
到这里我们已经基本还原了上一篇中创建的Qt Quick应用中qml文件的内容,从最简单的程序开始,逐渐丰富代码,现在大家应该已经对QML程序有了一定的认识。下面我们继续丰富程序,使其成为一个可以编译运行的项目。
五、添加C++代码
1、添加main.cpp文件。首先在myqml目录上右击,选择“添加新文件”,如下图所示。在弹出的对话框中选择C++分类中的“C++Source File”。
2、文件名称设置为“main”,如下图所示。
3、添加完成后将main.cpp文件的内容修改为:
#include <QGuiApplication> #include <QQmlApplicationEngine> int main(int argc, char *argv[]) { QGuiApplication app(argc, argv); QQmlApplicationEngine engine; engine.load(QUrl(QStringLiteral("../myqml/main.qml"))); return app.exec(); }
这里主要就是普通的Qt C++中main()函数,关键是其中创建了QQmlApplicationEngine对象来加载QML文件,这个是固定的用法。因为现在编译运行程序的本地目录是自动生成的目录,它与myqml源码目录是同级目录,所以加载main.qml文件需要指定相对路径。
2、更改项目文件。现在在myqml.pro文件中已经自动添加了一些代码,我们只需在最后添加一句代码:
QT += quick qml
这样就表明项目中使用了QtQuick和QtQml模块。
3、修改main.qml文件。要在C++程序中使用QQmlApplicationEngine加载QML文件,要求顶层窗口使用Window项目,就是在main.qml中的根对象使用Window对象来代替Item对象,因为Window默认是不显示的,所以还有设置其visible属性为true,这个也是固定用法,大家以后照着做即可。修改后的main.qml文件如下:
import QtQuick 2.0 import QtQuick.Window 2.0 Window { visible: true MyHelloWorld { anchors.fill: parent mArea.onClicked: { Qt.quit() } } }
这里还导入了QtQuick.Window 2.0,这是因为该模块包含了Window类型。现在我们可以按下Ctrl+R快捷键来编译运行程序了,效果如下图所示。
六、使用资源文件
因为QML文件是普通的文本文件,但在程序运行时需要使用这些文件来创建界面,将其直接放在程序外是不安全的,所以我们的做法是将QML文件放到资源文件中。
1、添加资源文件。继续在myqml目录上右击,选择添加新文件,模板选择Qt分类中的“Qt Resource File”,如下图所示。
然后将文件名称设置为“qml”,如下图所示。
2、文件创建好之后会自动打开,这里我们先点击“添加”按钮,选择“添加前缀”,如下图所示。
这里将前缀设置为“/”,如下图所示。(其实前缀使用什么都可以,这里为了简便,只保留斜杠)
3、再次点击“添加”按钮,这次选择“添加文件”,如下图所示。
在弹出的对话框中,选择源码目录中所有的QML文件,如下图所示。完成后点击Ctrl+S保存资源文件。
4、添加完成以后,可以在左边文件列表中看到资源文件。如下图所示。
5、因为已经在资源文件中添加了QML文件,所以以前在项目中的QML文件就不再需要了。双击打开myqml.pro文件, 然后将其中的:
DISTFILES += \ main.qml \ MyHelloWorld.qml
代码删除掉,点击Ctrl+S保存项目文件。这时项目中的文件列表如下图所示。
6、最后修改main.cpp文件。因为现在使用了资源文件,所以要更改main.cpp文件中QML文件的路径,将其修改为:
engine.load(QUrl(QStringLiteral("qrc:/main.qml")));
到这里整个项目就修改完成了,大家可以运行程序,查看效果。这个项目将作为我们的模板,后面的章节会在这个项目的基础上进行修改来讲解,项目的创建过程就不再赘述。
小结
这一篇中我们将上一篇讲解的Qt Quick项目进行拆解分析,以初学者的角度,从最简单的几行代码开始,一点点丰富程序,一步步进行分析讲解,最终还原了整个程序。本节内容让大家可以从根本上掌握Qt Quick程序的构建,并且也提供了一种学习的方法,一种分析大型复杂程序的方法,就是所谓的剖析法,希望大家用心过一遍,为以后的学习打好基础。
源码下载:
返回目录
|