QML之Item组件

Item

Item是Qt Quick中所有可视组件的基本类型，Qt Quick中的所有可视组件都继承于Item。尽管Item本身不可见，但它定义了所有可视组件的通用属性，如坐标、宽高、锚定关系、事件处理等等。

Item与模块化编程

Item可用于将多个可视组件包裹起来做为一个专门的组件，这对于QML的模块化编程有极大的好处。比如实现下面的AdvanceTextInput.qml文件：

import QtQuick

Item {
    property alias text: _text
    property alias textInput: _textInput

    Text {
        id: _text
        anchors.left: parent.left
        anchors.verticalCenter: parent.verticalCenter
        width: 60
        height: 30
    }

    TextInput {
        id: _textInput
        anchors.left: _text.right
        anchors.right: parent.right
        anchors.verticalCenter: parent.verticalCenter
        height: 30
    }
}

我们可以这样使用它：

AdvanceTextInput {
    x: 20
    y: 20
    width: 100
    height: 30
    text.text: "Name:"
    textInput.text: "Cat"
}

AdvanceTextInput {
    x: 20
    y: 60
    width: 100
    height: 30
    text.text: "Name:"
    textInput.text: "Dog"
}

Item与事件处理

Item本身以及所有继承于Item的可视组件都可以处理鼠标、键盘、触摸等事件。如通过Keys附加属性处理键盘事件：

Item {
    width: 400
    height: 400
    focus: true
    Keys.onPressed: (event)=> {
        if (event.key === Qt.Key_Left)
            console.log