Create a Qt Quick UI Project

Source: Internet
Author: User

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 { 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:

.├──├── 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:
<!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.

Contact Us

The content source of this page is from Internet, which doesn't represent Alibaba Cloud's opinion; products and services mentioned on that page don't have any relationship with Alibaba Cloud. If the content of the page makes you feel confusing, please write us an email, we will handle the problem within 5 days after receiving your email.

If you find any instances of plagiarism from the community, please send an email to: and provide relevant evidence. A staff member will contact you within 5 working days.

A Free Trial That Lets You Build Big!

Start building with 50+ products and up to 12 months usage for Elastic Compute Service

  • Sales Support

    1 on 1 presale consultation

  • After-Sales Support

    24/7 Technical Support 6 Free Tickets per Quarter Faster Response

  • Alibaba Cloud offers highly flexible support services tailored to meet your exact needs.