Getting Started with Qt Quick Controls

A basic example of a QML file that makes use of controls is shown here:

import QtQuick 2.14
import QtQuick.Controls 2.14

ApplicationWindow {
    title: "My Application"
    width: 640
    height: 480
    visible: true

    Button {
        text: "Push Me"
        anchors.centerIn: parent
    }
}

Setting Up Controls from C++

Although QQuickView has traditionally been used to display QML files in a C++ application, doing this means you can only set window properties from C++.

With Qt Quick Controls, declare an ApplicationWindow as the root item of your application and launch it by using QQmlApplicationEngine instead. This ensures that you can control top level window properties from QML.

A basic example of a source file that makes use of controls is shown here:

#include <QGuiApplication>
#include <QQmlApplicationEngine>

int main(int argc, char *argv[])
{
    QGuiApplication::setAttribute(Qt::AA_EnableHighDpiScaling);
    QGuiApplication app(argc, argv);
    QQmlApplicationEngine engine;
    engine.load(QUrl(QStringLiteral("qrc:/main.qml")));
    return app.exec();
}

Using C++ Data From QML

If you need to register a C++ class to use from QML, you can call qmlRegisterType() before declaring your QQmlApplicationEngine. See Defining QML Types from C++ for more information.

If you need to expose data to QML components, you need to make them available to the context of the current QML engine. See QQmlContext for more information.

© 2020 The Qt Company Ltd. Documentation contributions included herein are the copyrights of their respective owners. The documentation provided herein is licensed under the terms of the GNU Free Documentation License version 1.3 as published by the Free Software Foundation. Qt and respective logos are trademarks of The Qt Company Ltd. in Finland and/or other countries worldwide. All other trademarks are property of their respective owners.