Create a Qt Quick UI Project

In my previous blog: Qt Quick started

I introduced how to use Qt Creator to create a Qt Quick project, which is a basic project. But most of the time, I want to use the Qt UI designed by qml to keep the C ++ code separated. The UI Designer edits the qml files, loads them when the C ++ code is running, binds the events and processes them, just like HTML.

This article describes how to do this.

First, design a qml file to represent a simple tab view window.

In the main. qml file, add the following qml statement:

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"            }        }    }}

You can use the qmlscene tool to test the qml file. Run the following command:

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

The reason for this error is that I have installed more than one version of Qt in Ubuntu, and I need to point out the full path of qmlscene:

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

A window pops up.

Step 2: Create a Qt C ++ project to load the qml file.

The directory structure of my project is as follows:

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

The gui. pro file contains the following content:

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

Resources. qrc file, refer to official documentation for more information: 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 File

SOURCES += \    $$PWD/main.cpp

Okay. Take a look at the key file: 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();}

In the main function, create the QmlApplicationEngine to load the qml file, obtain the top-level QObject from the engine, and display it as a Window object.

Finally, you can use Qt Creator to open the gui. pro file to open the project and run it. Alternatively, you can run qmake to generate Makefile and then compile it.