Component QML Type

Encapsulates a QML component definition. More...

Import Statement: import QtQuick

Attached Signals

Detailed Description

Components are reusable, encapsulated QML types with well-defined interfaces.

Components are often defined by component files - that is, .qml files. The Component type allows QML components to be defined inline, within a QML document, rather than as a separate QML file.

The Component type is commonly used to provide graphical components for views. For example, the ListView::delegate and Repeater::delegate properties require a Component to specify how each list item is to be displayed.

import QtQuick 2.15

Item {
    Component {
        id: redSquare

        Rectangle {
            color: "red"
            width: 10
            height: 10

    Row {
        Repeater {
            model: 3
            delegate: redSquare

Defining a Component is similar to defining a QML document. A QML document contains a single top-level item that defines the behavior and properties of the component. It cannot define properties or behavior outside of that top-level item. In the same way, a Component definition contains a single top-level item (which in the above example is a Rectangle) and cannot define any data outside of this item, with the exception of an id.

See also Model-View-Delegate pattern.

Attached Signal Documentation


Emitted after the object has been instantiated. This can be used to execute script code at startup, after the QML environment is ready.

The corresponding handler is onCompleted. It can be declared on any object. The order of running the onCompleted handlers is undefined.

Rectangle {
    Component.onCompleted: console.log("Completed Running!")
    Rectangle {
        Component.onCompleted: console.log("Nested Completed Running!")

Note: The corresponding handler is onCompleted.

Available under certain Qt licenses.
Find out more.