Qt QML Type

The Qt object contains the enums available in the Qt Namespace. For example, you can access the Qt::LeftButton and Qt::RightButton enumeration values as Qt.LeftButton and Qt.RightButton.

The Qt object also contains helper functions for creating objects of specific data types. This is primarily useful when setting the properties of an item when the property has one of the following types:

• rect - use Qt.rect()

• point - use Qt.point()

• size - use Qt.size()

If the QtQuick module has been imported, the following helper functions for creating objects of specific data types are also available for clients to use:

• color - use Qt.rgba(), Qt.hsla(), Qt.darker(), Qt.lighter() or Qt.tint()

• font - use Qt.font()

• vector2d - use Qt.vector2d()

• vector3d - use Qt.vector3d()

• vector4d - use Qt.vector4d()

• quaternion - use Qt.quaternion()

• matrix4x4 - use Qt.matrix4x4()

There are also string based constructors for these types. See QML Basic Types for more information.

The Qt object contains several functions for formatting QDateTime, QDate and QTime values.

• string Qt.formatDateTime(datetime date, variant format)

• string Qt.formatDate(datetime date, variant format)

• string Qt.formatTime(datetime date, variant format)

The format specification is described at Qt.formatDateTime.

The following functions on the global object allow you to dynamically create QML items from files or strings. See Dynamic QML Object Creation from JavaScript for an overview of their use.

• object Qt.createComponent(url)

• object Qt.createQmlObject(string qml, object parent, string filepath)

The following functions are also on the Qt object.

• Qt.quit()

• Qt.md5(string)

• string Qt.btoa(string)

• string Qt.atob(string)

• object Qt.binding(function)

• object Qt.locale()

• string Qt.resolvedUrl(string)

• Qt.openUrlExternally(string)

• list<string> Qt.fontFamilies()

The application object provides access to global application state properties shared by many QML components.

It is the same as the Application singleton.

The following example uses the application object to indicate whether the application is currently active:

import QtQuick 2.0

Rectangle {
    width: 300; height: 55
    color: Qt.application.active ? "white" : "lightgray"
    Text {
        text: "Application " + (Qt.application.active ? "active" : "inactive")
        opacity: Qt.application.active ? 1.0 : 0.5
        anchors.centerIn: parent
    }
}

• application.active

• application.state

• application.layoutDirection

• application.font

This property was introduced in Qt 5.1.

The inputMethod object allows access to application's QInputMethod object and all its properties and slots. See the QInputMethod documentation for further details.

This property was introduced in Qt 5.0.

The platform object provides info about the underlying platform.

Its properties are:

This property was introduced in Qt 5.1.

The styleHints object provides platform-specific style hints and settings. See the QStyleHints documentation for further details.

The following example uses the styleHints object to determine whether an item should gain focus on mouse press or touch release:

import QtQuick 2.4

MouseArea {
    id: button

    onPressed: {
        if (!Qt.styleHints.setFocusOnTouchRelease)
            button.forceActiveFocus()
    }
    onReleased: {
        if (Qt.styleHints.setFocusOnTouchRelease)
            button.forceActiveFocus()
    }
}

This property was introduced in Qt 5.5.

The uiLanguage holds the name of the language to be used for user interface string translations. It is exposed in C++ as QQmlEngine::uiLanguage property.

You can set the value freely and use it in bindings. It is recommended to set it after installing translators in your application. By convention, an empty string means no translation from the language used in the source code is intended to occur.

If you're using QQmlApplicationEngine and the value changes, QQmlEngine::retranslate() will be called.

This property was introduced in Qt 5.15.

[since 5.8] callLater(function, argument1, argument2, ...)

Use this function to eliminate redundant calls to a function or signal.

The function passed as the first argument to Qt.callLater() will be called later, once the QML engine returns to the event loop.

When this function is called multiple times in quick succession with the same function as its first argument, that function will be called only once.

For example:

import QtQuick 2.0

Rectangle {
    width: 480
    height: 320

    property int callsToUpdateMinimumWidth: 0
    property bool optimize: true

    property int currentTextModel: 0
    property var columnTexts: [
        ["Click on either", "rectangle above", "and note how the counter", "below updates", "significantly faster using the", "regular (non-optimized)", "implementation"],
        ["The width", "of this column", "is", "no wider than the", "widest item"],
        ["Note how using Qt.callLater()", "the minimum width is", "calculated a bare-minimum", "number", "of times"]
    ]

    Text {
        x: 20; y: 280
        text: "Times minimum width has been calculated: " + callsToUpdateMinimumWidth
    }

    Row {
        y: 25; spacing: 30; anchors.horizontalCenter: parent.horizontalCenter
        Rectangle {
            width: 200; height:  50; color: "lightgreen"
            Text { text: "Optimized behavior\nusing Qt.callLater()"; anchors.centerIn: parent }
            MouseArea { anchors.fill: parent; onClicked: { optimize = true; currentTextModel++ } }
        }
        Rectangle {
            width: 200; height:  50; color: "lightblue"
            Text { text: "Regular behavior"; anchors.centerIn: parent}
            MouseArea { anchors.fill: parent; onClicked: { optimize = false; currentTextModel++ } }
        }
    }

    Column {
        id: column
        anchors.centerIn: parent

        onChildrenChanged: optimize ? Qt.callLater(updateMinimumWidth) : updateMinimumWidth()

        property int widestChild
        function updateMinimumWidth() {
            callsToUpdateMinimumWidth++
            var w = 0;
            for (var i in children) {
                var child = children[i];
                if (child.implicitWidth > w) {
                    w = child.implicitWidth;
                }
            }

            widestChild = w;
        }

        Repeater {
            id: repeater
            model: columnTexts[currentTextModel%3]
            delegate: Text {
                color: "white"
                text: modelData
                width: column.widestChild
                horizontalAlignment: Text.Center
                Rectangle { anchors.fill: parent; z: -1; color: index%2 ? "gray" : "darkgray" }
            }
        <