创建一个Qt Quick UI项目

               

在我的上一篇博客中：Qt Quick起步

我介绍了如何使用Qt Creator创建一个Qt Quick项目, 这是一个基础项目。不过大多数时候，我希望用qml 设计的Qt UI和C++代码保持分离。UI设计者编辑qml文件，C++代码运行时加载它们，然后绑定事件并处理之，就像HTML一样。

这篇文章，我将描述如何做。

首先，设计一个qml文件表示一个简单的tab view窗口。

在main.qml文件中，添加下面的qml语句：

import QtQuick 2.1import QtQuick.Window 2.1import QtQuick.Controls 1.1import QtQuick.XmlListModel 2.0Window {    width: 538 + frame.margins * 2    height: 360 + frame.margins * 2    ToolBar {        id: toolbar        width: parent.width    }    SystemPalette {id: syspal}    color: syspal.window    Rectangle {        anchors.top: toolbar.bottom        anchors.right: parent.right        anchors.left: parent.left        anchors.bottom:  parent.bottom        anchors.margins: 8        TabView {            id:frame            focus:true            property int margins: Qt.platform.os === "osx" ? 16 : 0            height: parent.height - 34            anchors.right: parent.right            anchors.left: parent.left            anchors.margins: margins            Tab {                title: "Home"            }            Tab {                title: "Edit"            }            Tab {                title: "View"            }            Tab {                title: "Help"            }        }    }}

可以使用qmlscene工具用来测试qml文件。执行下面的命令：

qmlscene main.qmlqmlscene: could not find a Qt installation of ''

看到这个错误的原因是因为我的Ubuntu系统安装了不止一个版本的Qt，需要指出qmlscene的全路径：

 ~/Qt5.2.0/5.2.0/gcc_64/bin/qmlscene main.qml

一个窗口弹出来了。

第二步： 创建一个Qt C++工程用来加载qml文件。

我的工程目录结构如下：

.├── gui.pro├── images│   ├── header.png│   └── selectedrow.png├── main.qml├── resources.qrc└── src    ├── main.cpp    └── src.pri

这个gui.pro文件内容如下：

QT += qml quickTARGET = gui!android: !ios: !blackberry: qtHaveModule(widgets): QT += widgetsinclude(src/src.pri)OTHER_FILES += \    main.qmlRESOURCES += \    resources.qrcHEADERS +=

resources.qrc文件，可以参考官方文档获得更多信息： http://doc-snapshot.qt-project.org/qdoc/resources.html

<!DOCTYPE RCC><RCC version="1.0"><qresource prefix="/">  <file>main.qml</file>  <file>images/selectedrow.png</file>  <file>images/header.png</file></qresource></RCC>

src.pri文件

SOURCES += \    $$PWD/main.cpp

好。看一下关键文件：src/main.cpp

#include <QtQml>#include <QtQuick/QQuickView>#include <QtCore/QString>#ifdef QT_WIDGETS_LIB#include <QtWidgets/QApplication>#else#include <QtGui/QGuiApplication>#endif#ifdef QT_WIDGETS_LIB#define Application QApplication#else#define Application QGuiApplication#endifint main(int argc, char *argv[]){    Application app(argc, argv);    QQmlApplicationEngine engine(QUrl("qrc:/main.qml"));    QObject *topLevel = engine.rootObjects().value(0);    QQuickWindow *window = qobject_cast<QQuickWindow *>(topLevel);    if ( !window ) {        qWarning("Error: Your root item has to be a Window.");        return -1;    }    window->show();    return app.exec();}

在main函数中，创建QmlApplicationEngine用来加载qml文件，然后从engine中获得顶层的QObject，并将其作为Window对象显示。

最后，你可以用Qt Creator打开gui.pro文件打开项目并运行之。或者，你可以运行qmake产生Makefile，然后编译。