4.10 输入元素
我们已经将 MouseArea 元素作为鼠标输入元素。接下来，我们将重点讨论键盘输入。我们从文本编辑元素：TextInput 和 TextEdit 开始。
4.10.1 TextInput 元素
TextInput 元素允许用户输入一行文本。该元素支持输入约束，如 validator、inputMask 和 echoMode。
// textinput.qml
import QtQuick 2.5
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
用户可以单击一个 TextInput 来改变焦点。为了支持通过键盘切换焦点，我们可以使用键盘导航（ KeyNavigation ）附加属性。
// textinput2.qml
import QtQuick 2.5
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 2.5
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
...
}
}
textinput2
然后试试 tab 键来导航。我们将发现焦点不会更改为 input2。焦点的简单使用 focus:true 是不够的。问题出现了，焦点被转移到 input2 元素上，即 TlineEditV1 中的顶级项（我们的矩形）得到了焦点，并没有将焦点转发到 TextInput。为了防止这个问题 QML 提供了 FocusScope 元素。
4.10.2 FocusScope 元素
当焦点作用域收到焦点进入事件时，焦点作用域将使最后一个 focus 属性设置为 true 的子元素接收焦点。因此，它将焦点转移到最后一个请求焦点的子元素上。我们将使用 FocusScope 作为根元素，创建一个名为 TLineEditV2 的 TLineEdit 组件的第二个版本。
// TLineEditV2.qml
import QtQuick 2.5
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 键可以成功地切换了两个组件之间和组件内正确的子元素的焦点。
4.10.3 TextEdit 元素
TextEdit 与 TextInput非常类似，只不过它是支持多行文本编辑的元素。它没有文本约束属性，因为它依赖于查询文本的绘制大小（paintedHeight，paintedWidth）。我们还创建了一个名为 TTextEdit 的组件，它提供了一个编辑背景，并使用焦点作用域来进行更好的焦点转发。
// TTextEdit.qml
import QtQuick 2.5
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
}
}
textedit
4.10.4 Keys 元素
附加的属性 Keys 允许基于某些键按下执行代码。例如，移动和缩放一个正方形，我们可以连接到上、下、左和右的键来实现元素的移动，连接加和减键来实现缩放元素。
// keys.qml
import QtQuick 2.5
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: {
switch(event.key) {
case Qt.Key_Plus:
square.scale += 0.2
break;
case Qt.Key_Minus:
square.scale -= 0.2
break;
}
}
}
keys
本文参考链接：Quick Starter
本章完
网友评论