之前我们已经使用过MouseArea作为鼠标输入元素。今天我们将介绍关于键盘的一些元素，如文本输入元素TextInput和文本编辑元素Textedit。
TextInput
TextInput允许用户输入一行文本，并且支持使用正则表达式验证器来限制输入和输入掩码的模式设置。
基本用法如下：
import QtQuick 2.3
import QtQuick.Window 2.2
Window {
visible: true
width: 640
height: 480
color: "linen"
TextInput {
id: input1
x: 8; y: 8
width: 200; height: 20
focus: true
text: "My name is Mikasoi"
}
TextInput {
id: input2
x: 8; y: 36
width: 200; height: 20
text: "Thank for your watching"
}
}运行效果：
用户可以通过点击TextInput来改变焦点。为了支持键盘改变焦点，我们可以使用KeyNavigation（按键向导）这个附加属性。
TextInput {
id: input1
x: 8; y: 8
width: 200; height: 20
focus: true
text: "My name is Mikasoi"
KeyNavigation.tab: input2
}
TextInput {
id: input2
x: 8; y: 36
width: 200; height: 20
text: "Thank for your watching"
KeyNavigation.tab: input1
}一个TextInput元素只显示一个闪烁符和已经输入的文本。用户需要一些可见的修饰来鉴别这是一个输入元素，例如一个简单的矩形框。当你放置一个TextInput在一个元素中时，你需要确保其它的元素能够访问它导出的大多数属性。根据上述的这几个要求，我们可以自定义一个自己的文本输入组件LineEdit来重复使用。
//LineEdit
import QtQuick 2.0
Rectangle {
width: 200; 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。
现在我们可以使用自定义的LineEdit组件重写上面的KeyNavigation的例子：
import QtQuick 2.3
import QtQuick.Window 2.2
Window {
visible: true
width: 640
height: 480
color: "linen"
LineEdit {
id: input1
x: 8; y: 8
width: 200; height: 20
focus: true
text: "My name is Mikasoi"
KeyNavigation.tab: input2
}
LineEdit {
id: input2
x: 8; y: 36
width: 200; height: 20
text: "Thank for your watching"
KeyNavigation.tab: input1
}
}运行效果：
在上方的例子中，如果我们想要使用Tab键来切换焦点时，你会发现焦点无法切换到input2上。这个例子中使用focus:true的方法不正确，这个问题是因为焦点被转移到input2元素时，包含LineEdit1的顶部元素接收了这个焦点并且没有将焦点转发给TextInput。为了防止这个问题，QML中提供了FocusScope（焦点区域）。
FocusScope
一个焦点区域定义了如果焦点区域接收到焦点，它的最后一个使用focus:true的子元素接收焦点，它将会把焦点传递给最后申请焦点的子元素。因此我们需要修改一下自定义的LineEdit组件，使用焦点区域作为根元素。
import QtQuick 2.0
FocusScope {
width: 200; 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
}
}此时我们按下Tab键即可成功在两个组件之间切换焦点，并且能够正确的将焦点锁定在组件内部的子元素中。
TextEdit
TextEidt与TextInput非常类似，它支持多行文本编辑，但不再支持文本输入限制。可使用属性paintedHeight和paintedWidth来查询已绘制文本的大小查询。
我们也来自定义一个文本编辑组件，可以编辑它的背景，也使用FocusScope来更好的切换焦点：
//MyTextEdit
import QtQuick 2.0
FocusScope {
width: 200; height: input.height + 8
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
}
}使用方法和LineEdit很类似：
import QtQuick 2.3
import QtQuick.Window 2.2
Window {
visible: true
width: 640
height: 480
color: "linen"
MyTextEdit {
id: input1
x: 8; y: 8
width: 400; height: 200
focus: true
text: "My name is Mikasoi"
KeyNavigation.tab: input2
}
MyTextEdit {
id: input2
x: 8; y: 250
width: 400; height: 200
text: "Thank for your watching"
KeyNavigation.tab: input1
}
}运行效果:
Key
附加属性Key允许你基于某个按键的点击来执行代码。使用方法如下：
import QtQuick 2.3
import QtQuick.Window 2.2
Window {
visible: true
width: 640
height: 480
color: "linen"
Rectangle {
id: square
width: 200; height: 200
x: 8; y: 8
focus: true;
color: "blue"
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;
}
}
}
}在上面的例子中，我们可以使用上下左右键来移动方块，可以使用加减号来缩放方块，使用效果如下方动图所示：
