Defines the natural width or height of the Item if no width or height is specified.

The default implicit size for most items is 0x0, however some items have an inherent implicit size which cannot be overridden, for example, Image and Text.

Setting the implicit size is useful for defining components that have a preferred size based on their content, for example:

// Label.qml
import QtQuick 2.15

Item {
    property alias icon: image.source
    property alias label: text.text
    implicitWidth: text.implicitWidth + image.implicitWidth
    implicitHeight: Math.max(text.implicitHeight, image.implicitHeight)
    Image { id: image }
    Text {
        id: text
        anchors.left: image.right; anchors.right: parent.right
        anchors.verticalCenter: parent.verticalCenter
    }
}

Defines the item's position and size. The default value is 0.

The (x,y) position is relative to the parent.

Item { x: 100; y: 100; width: 100; height: 100 }

Anchors provide a way to position an item by specifying its relationship with other items.

Margins apply to top, bottom, left, right, and fill anchors. The anchors.margins property can be used to set all of the various margins at once, to the same value. It will not override a specific margin that has been previously set; to clear an explicit margin set its value to undefined. Note that margins are anchor-specific and are not applied if an item does not use anchors.

Offsets apply for horizontal center, vertical center, and baseline anchors.

Item {
    Image {
        id: pic
        // ...
    }
    Text {
        id: label
        anchors.horizontalCenter: pic.horizontalCenter
        anchors.top: pic.bottom
        anchors.topMargin: 5
        // ...
    }
}

Item {
    Image {
        id: pic
        // ...
    }
    Text {
        id: label
        anchors.left: pic.right
        anchors.leftMargin: 5
        // ...
    }
}

anchors.fill provides a convenient way for one item to have the same geometry as another item, and is equivalent to connecting all four directional anchors.

To clear an anchor value, set it to undefined.

For more information see Anchor Layouts.

This property holds whether clipping is enabled. The default clip value is false.

If clipping is enabled, an item will clip its own painting, as well as the painting of its children, to its bounding rectangle.

This property holds whether the item receives touch events. By default this is true.

Setting this property directly affects the enabled value of child items. When set to false, the enabled values of all child items also become false. When set to true, the enabled values of child items are returned to true, unless they have explicitly been set to false.

See also visible.

This property holds the opacity of the item. Opacity is specified as a number between 0.0 (fully transparent) and 1.0 (fully opaque). The default value is 1.0.

When this property is set, the specified opacity is also applied individually to child items. This may have an unintended effect in some circumstances. For example in the second set of rectangles below, the red rectangle has specified an opacity of 0.5, which affects the opacity of its blue child rectangle even though the child has not specified an opacity.

Item {
    Rectangle {
        color: "red"
        width: 100; height: 100
        Rectangle {
            color: "blue"
            x: 50; y: 50; width: 100; height: 100
        }
    }
}

Item {
    Rectangle {
        opacity: 0.5
        color: "red"
        width: 100; height: 100
        Rectangle {
            color: "blue"
            x: 50; y: 50; width: 100; height: 100
        }
    }
}

Changing an item's opacity does not affect whether the item receives user input events. (In contrast, setting the visible or enabled property to false stops touch events.)

See also visible.

This read-only property holds the visual parent of the item.

See Concepts - Visual Parent for more details.

This property holds the name of the current state of the item.

If the item is in its default state, that is, no explicit state has been set, then this property holds an empty string. Likewise, you can return an item to its default state by setting this property to an empty string.

See also Using States.

This property holds the list of possible states for this item. To change the state of this item, set the state property to one of these states, or set the state property to an empty string to revert the item to its default state.

This property is specified as a list of State objects. For example, below is an item with "red_color" and "blue_color" states:

import QtQuick 2.15

Rectangle {
    id: root
    width: 100; height: 100

    states: [
        State {
            name: "red_color"
            PropertyChanges { target: root; color: "red" }
        },
        State {
            name: "blue_color"
            PropertyChanges { target: root; color: "blue" }
        }
    ]
}

See Using States and Animation and Transitions for more details on using states and transitions.

See also transitions.

This property holds the list of transitions for this item. These define the transitions to be applied to the item whenever it changes its state.

This property is specified as a list of Transition objects. For example:

import QtQuick 2.15

Item {
    transitions: [
        Transition {
            //...
        },
        Transition {
            //...
        }
    ]
}

See Using States and Animation and Transitions for more details on using states and transitions.

See also states.

This property holds whether the item is visible. By default this is true.

Setting this property directly affects the visibility of child items. When set to false, the visible values of all child items also become false. When set to true, the visible values of child items are returned to true, unless they have explicitly been set to false.

If this property is set to false, the item will no longer receive touch events.

See also opacity and enabled.

Sets the stacking order of sibling items. By default the stacking order is 0.

Items with a higher stacking value are drawn on top of siblings with a lower stacking order. Items with the same stacking value are drawn bottom up in the order they appear. Items with a negative stacking value are drawn under their parent's content.

The following example shows the various effects of stacking order.

Item {
    Rectangle {
        color: "red"
        width: 100; height: 100
    }
    Rectangle {
        color: "blue"
        x: 50; y: 50; width: 100; height: 100
    }
}

Item {
    Rectangle {
        z: 1
        color: "red"
        width: 100; height: 100
    }
    Rectangle {
        color: "blue"
        x: 50; y: 50; width: 100; height: 100
    }
}

Item {
    Rectangle {
        color: "red"
        width: 100; height: 100
        Rectangle {
            color: "blue"
            x: 50; y: 50; width: 100; height: 100
        }
    }
}

Item {
    Rectangle {
        color: "red"
        width: 100; height: 100
        Rectangle {
            z: -1
            color: "blue"
            x: 50; y: 50; width: 100; height: 100
        }
    }
}