Getting Started with Qt Quick Controls

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

import QtQuick
import QtQuick.Controls

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 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.