创建一个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.1
import QtQuick.Window 2.1
import QtQuick.Controls 1.1
import QtQuick.XmlListModel 2.0
Window {
    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.qml
qmlscene: 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 quick
TARGET = gui
!android: !ios: !blackberry: qtHaveModule(widgets): QT += widgets
include(src/src.pri)
OTHER_FILES += \
    main.qml
RESOURCES += \
    resources.qrc
HEADERS +=

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
#endif
int 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，然后编译。