# 输入元素

已经使用MouseArea作为鼠标输入元素。接下来，将专注于键盘输入，从文本编辑元素TextInput和TextEdit开始。

# 文本输入框(TextInput)

TextInput允许用户输入一行文本。该元素支持对输入进行约束，例如validator(验证器)、inputMask(输入掩码)和 echoMode(回应模式)。

// textinput.qml

import QtQuick

Rectangle {
    width: 200
    height: 80
    color: "linen"

    TextInput {
        id: input1
        x: 8; y: 8
        width: 96; height: 20
        focus: true
        text: "Text Input 1"
    }

    TextInput {
        id: input2
        x: 8; y: 36
        width: 96; height: 20
        text: "Text Input 2"
    }
}

用户可以在TextInput内部单击以更改焦点。为了支持键盘切换焦点，可以使用附加属性KeyNavigation(按键导航)。

// textinput2.qml

import QtQuick

Rectangle {
    width: 200
    height: 80
    color: "linen"

    TextInput {
        id: input1
        x: 8; y: 8
        width: 96; height: 20
        focus: true
        text: "Text Input 1"
        KeyNavigation.tab: input2
    }

    TextInput {
        id: input2
        x: 8; y: 36
        width: 96; height: 20
        text: "Text Input 2"
        KeyNavigation.tab: input1
    }
}

附加属性KeyNavigation支持预设的导航键，在按下给定按钮时，将焦点切换到绑定id的元素上。

除了闪烁的光标和输入的文本之外，文本输入元素没有其他的视觉呈现。为了让用户能够将元素识别为输入元素，它需要一些视觉装饰；例如，一个简单的矩形。将TextInput放入元素时，需要确保导出希望其他人能够访问的主要属性。

将这段代码移到名为TLineEditV1的组件中以供重用。

// TLineEditV1.qml

import QtQuick

Rectangle {
    width: 96; height: input.height + 8
    color: "lightsteelblue"
    border.color: "gray"

    property alias text: input.text
    property alias input: input

    TextInput {
        id: input
        anchors.fill: parent
        anchors.margins: 4
        focus: true
    }
}

提示

如果要完全导出TextInput元素，可以使用property alias input: input导出。第一个input是属性名称，第二个input是元素的id。

然后，使用新的TLineEditV1组件重写KeyNavigation示例。

Rectangle {
    ...
    TLineEditV1 {
        id: input1
        ...
    }
    TLineEditV1 {
        id: input2
        ...
    }
}

尝试使用Tab键进行导航，没能体验到焦点转到input2。简单地使用focus: true是不够的。这样做的问题是，当焦点转移到input2元素时，TlineEditV1（我们的 Rectangle）中的顶级项获得焦点，但并没有将焦点转发到TextInput。为了解决这种情况，QML提供了FocusScope元素。

# 焦点范围(FocusScope)

焦点范围(focus scope)声明它接收到焦点时，它的最后一个带有focus: true的子元素将接收焦点，因此它将焦点转发到最后一个请求焦点的子元素。创建名为TLineEditV2的TLineEdit组件的第二个版本，使用焦点范围作为根元素。

// TLineEditV2.qml

import QtQuick

FocusScope {
    width: 96; height: input.height + 8
    Rectangle {
        anchors.fill: parent
        color: "lightsteelblue"
        border.color: "gray"

    }

    property alias text: input.text
    property alias input: input

    TextInput {
        id: input
        anchors.fill: parent
        anchors.margins: 4
        focus: true
    }
}

当前的示例如下所示：

Rectangle {
    ...
    TLineEditV2 {
        id: input1
        ...
    }
    TLineEditV2 {
        id: input2
        ...
    }
}

现在按Tab键可以成功地在2个组件之间切换焦点，并且是组件内的正确的子元素接收焦点。

# 文本编辑框(TextEdit)

TextEdit与TextInput非常相似，并且支持编辑多行文本。它不再有输入文本尺寸的限制，它由文本绘制尺寸（paintedHeight、paintedWidth）决定。还创建了名为TTextEdit的组件，提供编辑背景并使用焦点范围(focus scope)来更好地转发焦点。

// TTextEdit.qml

import QtQuick

FocusScope {
    width: 96; height: 96
    Rectangle {
        anchors.fill: parent
        color: "lightsteelblue"
        border.color: "gray"

    }

    property alias text: input.text
    property alias input: input

    TextEdit {
        id: input
        anchors.fill: parent
        anchors.margins: 4
        focus: true
    }
}

可以像使用TLineEdit组件一样使用它：

// textedit.qml

import QtQuick

Rectangle {
    width: 136
    height: 120
    color: "linen"

    TTextEdit {
        id: input
        x: 8; y: 8
        width: 120; height: 104
        focus: true
        text: "Text Edit"
    }
}

# 按键元素(Keys)

附加属性Keys允许基于某些按键执行代码。例如，要移动和缩放一个正方形，我们可以使用上、下、左、右键来平移元素，以及使用加号和减号键来缩放元素。

// keys.qml

import QtQuick

DarkSquare {
    width: 400; height: 200

    GreenSquare {
        id: square
        x: 8; y: 8
    }
    focus: true
    Keys.onLeftPressed: square.x -= 8
    Keys.onRightPressed: square.x += 8
    Keys.onUpPressed: square.y -= 8
    Keys.onDownPressed: square.y += 8
    Keys.onPressed: function (event) {
        switch(event.key) {
            case Qt.Key_Plus:
                square.scale += 0.2
                break;
            case Qt.Key_Minus:
                square.scale -= 0.2
                break;
        }
    }
}

← 布局项高级技术 →