Item QML Type

Defines the natural width or height of the Item if no width or height 被指定。

The default implicit size for most items is 0x0, however some items have an inherent implicit size which cannot be overridden, for example, 图像 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 .

注意： You can only anchor an item to siblings or a parent.

更多信息见 锚点布局 .

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.

注意： The clip rectangle is always axis aligned. Using clip with transforms like Image::rotation 不被支持。

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 ， enabled values of all child items also become false . When set to true ， enabled values of child items are returned to true , unless they have explicitly been set to false .

另请参阅 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 特性到 false stops touch events.)

另请参阅 visible .

This 只读 property holds the visual parent of the item.

见 Concepts - Visual Parent 了解更多细节。

注意： As this property can be only read, it is impossible to change the visual parent of an item at runtime.

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.

注意： This property only exists for the root Item in a .qml 文件。

另请参阅 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" }
        }
    ]
}
								

见 Using States and 动画和过渡 for more details on using states and transitions.

另请参阅 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 {
            //...
        }
    ]
}
								

见 Using States and 动画和过渡 for more details on using states and transitions.

另请参阅 states .

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

Setting this property directly affects the visibility of child items. However, the visible values of child items are not updated.

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

注意： This property does not change if this item moves off-screen, or if the opacity changes to 0.

另请参阅 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
        }
    }
}