建立一個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，然後編譯。