我们已经使用过MouseArea（鼠标区域）作为鼠标输入元素。这里我们将更多的介绍关于键盘输入的一些东西。我们开始介绍文本编辑的元素：TextInput（文本输入）和TextEdit（文本编辑）。

7.1 TextInput（文本输入）

文本输入允许用户输入一行文本。这个元素支持使用正则表达式验证器来限制输入和输入掩码的模式设置。

import QtQuick 2.15
import QtQuick.Window 2.15
Rectangle {
    width: 200
    height: 100
    TextInput {
        id: input1
        x: 8; y: 8
        width: 96; height: 25
        text: "Text Input 1"
    }
    TextInput{
        id: input2
        x: 8; y: 36
        width: 96; height: 20
        text: "Text Input 2"
    }
    TextInput {
        id: input3
        x: 8; y: 64
        validator: IntValidator{bottom: 11; top: 31;} // 输入范围 [11,13]
        width: 96; height: 20
    }
}

设置按键向导，按tab键可以切换光标的位置

import QtQuick 2.15
import QtQuick.Window 2.15
Rectangle {
    width: 200
    height: 100
    TextInput {
        id: input1
        x: 8; y: 8
        width: 96; height: 25
        text: "Text Input 1"
        KeyNavigation.tab: input2  // 按键向导
    }
    TextInput{
        id: input2
        x: 8; y: 36
        width: 96; height: 20
        text: "Text Input 2"
        KeyNavigation.tab: input3
    }
    TextInput {
        id: input3
        x: 8; y: 64
        validator: IntValidator{bottom: 11; top: 31;}
        width: 96; height: 20
        KeyNavigation.tab: input1
    }
}

TextInput增加矩形框，以便用户鉴别这是一个输入元素（如果文本过长，前面的文本会跑到边框的签名）
![057MW66I2W4MDF%UZIINWP.png

// TLineEditV1.qml
import QtQuick 2.15
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
    }
}

import QtQuick 2.15
import QtQuick.Window 2.15
Rectangle {
    width: 200
    height: 100
    TLineEditV1 {
        id: input1
        x: 8; y: 8
        width: 96; height: 25
        text: "Text Input 1"
        KeyNavigation.tab: input2.input  // 按键向导
    }
    TLineEditV1{
        id: input2
        x: 8; y: 36
        width: 96; height: 20
        text: "Text Input 2"
        KeyNavigation.tab: input3.input
    }
    TLineEditV1 {
        id: input3
        x: 8; y: 64
        input.validator: IntValidator{bottom: 11; top: 31;}
        width: 96; height: 20
        KeyNavigation.tab: input1.input
    }
}

7.2 焦点区域（FocusScope）

一个焦点区域（focus scope）定义了如果焦点区域接收到焦点，它的最后一个使用focus:true的子元素接收焦点，它将会把焦点传递给最后申请焦点的子元素。我们创建了第二个版本的TLineEdit组件，称作TLineEditV2，使用焦点区域（focus scope）作为根元素。

// TLineEditV2.qml
import QtQuick 2.15
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按键可以成功的在两个组件之间切换焦点，并且能够正确的将焦点锁定在组件内部的子元素中。

7.3 文本编辑（TextEdit）

文本编辑（TextEdit）元素与文本输入（TextInput）非常类似，它支持多行文本编辑。它不再支持文本输入的限制，但是提供了已绘制文本的大小查询（paintedHeight，paintedWidth）。我们也创建了一个我们自己的组件TTextEdit，可以编辑它的背景，使用focus scope（焦点区域）来更好的切换焦点。

import QtQuick 2.15
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
    }
}

import QtQuick 2.15
import QtQuick.Window 2.15
Rectangle {
    width: 136
    height: 120
    color: "linen"
    TTextEdit {
        id: input
        x: 8; y: 8
        width: 120; height: 104
        focus: true
        text: "Text Edit"
    }
}

7.4 按键元素（Key Element）

附加属性key允许你基于某个按键的点击来执行代码。例如使用up，down按键来移动一个方块，left，right按键来旋转一个元素，plus，minus按键来缩放一个元素。

import QtQuick 2.15
import QtQuick.Window 2.15
Rectangle {
    width: 400; height: 200
    Rectangle {
        color: "red"
        id: square
        x: 8; y: 8
        width: 45
        height: 45
        border.color: Qt.lighter(color)
    }
    focus: true
    Keys.onLeftPressed: square.x -= 8
    Keys.onRightPressed: square.x += 8
    Keys.onUpPressed: square.y -= 8
    Keys.onDownPressed: square.y += 8
    Keys.onPressed: {
        switch(event.key) {
            case Qt.Key_Plus:
                square.scale += 0.2
                break;
            case Qt.Key_Minus:
                square.scale -= 0.2
                break;
        }
    }
}