QML 学习摘录 03 - 输入元素

QML输入元素 Input Element

完整文档参考：https://github.com/cwc1987/QmlBook-In-Chinese

1. 文本输入框TextInput

⽂本输⼊允许⽤户输⼊⼀⾏⽂本，可以通过点击TextInput来改变焦点。为了⽀持键盘改变焦点，我们可以使⽤KeyNavigation（按键向导）这个附加属性。

示例代码：TextInput组件 MyInput.qml

import QtQuick 2.3
FocusScope {
id: root
width: 100;height: 20
Rectangle {
anchors.fill:parent
color: "lightblue"
border.color: "gray"
}
property alias text: input.text
property alias input: input
TextInput {
id: input
anchors.fill: parent
focus: true
color: "red"
text: "Please input.."
}
}

焦点区域（FocusScope）定义了如果焦点区域接收到焦点，它的最后⼀个使⽤focus:true的⼦元素接收焦点，它将会把焦点传递给最后申请焦点的⼦元素。代码使⽤焦点区域（FocusScope）作为根元素。

2. 文本编辑框TextEdit

⽂本编辑（TextEdit）元素与TextInput⾮常类似，它⽀持多⾏⽂本编辑。它不再⽀持⽂本输⼊的限制，但是提供了已绘制⽂本的⼤⼩查询（paintedHeight，paintedWidth）。

示例代码：TextEdit组件 MyEdit.qml

import QtQuick 2.3
FocusScope {
id: root
width: 520;height: 400
Rectangle{
anchors.fill:parent
color: "lightblue"
border.color: "gray"
}
property alias text:input.text
property alias input:input
TextEdit{
id:input
anchors.fill: parent
focus:true
color: "red"
text:"Please input.."
}
}

3. 按键元素

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

示例代码 ： 演示TextInput、TextEdit的使用和Key属性

import QtQuick 2.3
Rectangle {
id: root
width: 800;height: 800
border.color: "gray"
Myinput {
id: input
x: 20;y: 10
text: "组件：input1"
KeyNavigation.tab: input2
}
Myinput {
id: input2
x: 20;y: 50
text: "组件：input2"
KeyNavigation.tab: input
}
MyEdit{
id:input3
x:20;y:80
text:"输入你的文本..."
}
Rectangle{
id:dragSquare
x:200;y:10
width: 40;height: 50
color:"red"
Drag.active:dragArea.drag.active
MouseArea{
id:dragArea
anchors.fill: parent
drag.target: parent
onClicked:{dragSquare.focus = true}
}
focus:true
/****控制矩形dragSquare的移动*****/
Keys.onLeftPressed: dragSquare.x -=8
Keys.onRightPressed: dragSquare.x +=8
Keys.onDownPressed: dragSquare.y +=8
Keys.onUpPressed: dragSquare.y -=8
Keys.enabled: true //激活按键，否则下面代码无效
Keys.onPressed:{
switch(event.key)
{
case Qt.Key_Plus:
dragSquare.scale += 0.2;//dragSquare放大
break;
case Qt.Key_Minus:
dragSquare.scale -= 0.2;//dragSquare缩小
break;
}
}
}
}

运行效果：两个TextInput，可通过Tab键切换；红色矩形可拖拽，并通过方向按键移动或者+/- 缩放。