CODEWITHSUNDEEP
qtqmlqt5
Samantha Smith
Samantha Smith

Reputation: 41

Run the QtQuick application

I create a project on QtQuick in QT Creator 4.3.1 without using the ui form. Here's the code main.qml:

    import QtQuick 2.6
    import QtQuick.Window 2.2

    Window {
        visible: true
        width: 640
        height: 480
        title: qsTr("Hello World")

        MouseArea {
            anchors.fill: parent
            onClicked: {
                console.log(qsTr('Clicked on background. Text: "' + textEdit.text + '"'))
            }
        }

        TextEdit {
            id: textEdit
            text: qsTr("Enter some text...")
            verticalAlignment: Text.AlignVCenter
            anchors.top: parent.top
            anchors.horizontalCenter: parent.horizontalCenter
            anchors.topMargin: 20
            Rectangle {
                anchors.fill: parent
                anchors.margins: -10
                color: "transparent"
                border.width: 1
            }
        }
    }

The program runs and works. Now I want to get rid of Window and replace it with Rectangle:

import QtQuick 2.6

Rectangle {
    id: root
    width: 200; height: 200;
    color: "#ffffff"
}

But when the program starts, nothing happens, the form does not open What am I doing wrong?

main.cpp code. code in the same in both cases:

#include <QGuiApplication>
#include <QQmlApplicationEngine>

int main(int argc, char *argv[])
{
    QGuiApplication app(argc, argv);

    QQmlApplicationEngine engine;
    engine.load(QUrl(QStringLiteral("qrc:/main.qml")));
    if (engine.rootObjects().isEmpty())
        return -1;

    return app.exec();
}

Upvotes: 1

Views: 260

Answers (1)

eyllanesc
eyllanesc

Reputation: 244301

In a Qt application you must have at least one window that is the top-level, that is, the window where other components are placed.

When you create your project, you should get the default main.cpp:

main.cpp

#include <QGuiApplication>
#include <QQmlApplicationEngine>

int main(int argc, char *argv[])
{
    QGuiApplication app(argc, argv);

    QQmlApplicationEngine engine;
    engine.load(QUrl(QStringLiteral("qrc:/main.qml")));
    if (engine.rootObjects().isEmpty())
        return -1;

    return app.exec();
}

main.qml

Window {
    visible: true
    width: 640
    height: 480
    title: qsTr("Hello World")
}

So let's analyze the elements and use the documentation for it:

QQmlApplicationEngine provides a convenient way to load an application from a single QML file.

[...]

Unlike QQuickView, QQmlApplicationEngine does not automatically create a root window. If you are using visual items from Qt Quick, you will need to place them inside of a Window.

That is, QQmlApplicationEngine does not create a top-level, so if we want the window to be shown you must use another element, and as recommended, an option is to use Window{}

In your second test you are using an item, e.g. Rectangle, and this is only a component and is not able to create a top-level, so for that it is advisable to use QQuickView:

The QQuickView class provides a window for displaying a Qt Quick user interface.

[...]

So if you want to show the Rectangle you should use the following in your main.cpp:

main.cpp

#include <QGuiApplication>
#include <QQuickView>

int main(int argc, char *argv[])
{
    QGuiApplication app(argc, argv);

    QQuickView view;
    view.setSource(QUrl(QStringLiteral("qrc:/main.qml")));
    view.setResizeMode(QQuickView::SizeRootObjectToView);
    view.show();

    return app.exec();
}

main.qml

import QtQuick 2.6

Rectangle {
    id: root
    width: 200; height: 200;
    color: "#ffffff"
}

Upvotes: 3

Related Questions