catalogue
Text input
TextInput allows the user to enter a line of text. This element supports the use of regular expression validators to limit the mode settings of input and input masks.
The additional attribute of KeyNavigation can preset an element id to bind the key for switching focus.
// TextInput.qml
import QtQuick 2.2
import QtQuick.Window 2.2
Window{
height: 600;width: 800
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
}
}
}A text input element displays only one blinker and the text that has been entered. The user needs some visible decoration to identify that this is an input element, such as a simple rectangular box. When you place a text input in an element, you need to ensure that other elements can access most of the attributes it exports.
function:
be careful
-
If you want to export the TextInput element completely, you can use property alias input: input to export this element. The first input is the attribute name and the second input is the element id
To create a TLineEditV1 component:
// TLineEditV1.qml
import QtQuick 2.0
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
}
}function:
Focus area
The focus scope of the focus area defines that if the focus area receives the focus, its last child element using focus:true will receive the focus, and it will transfer the focus to the child element that finally applies for the focus.
// LineEdit2.qml
import QtQuick 2.2
import QtQuick.Window 2.2
Window{
height: 600;width: 800
Rectangle {
width: 200
height: 80
color: "linen"
TLineEditV2 {
id: input1
x: 8; y: 8
width: 96; height: 20
focus: true
text: "Text Input 1:"
KeyNavigation.tab: input2
}
TLineEditV2 {
id: input2
x: 8; y: 36
width: 96; height: 20
text: "Text Input 2:"
KeyNavigation.tab: input1
}
}
}function:
Pressing the Tab key can successfully switch the focus between the two components, and can correctly lock the focus in the child elements inside the component.
Text editing
Text editing the TextEdit element is very similar to text input. It supports multi line text editing. It no longer supports the limitation of text input, but provides the size query of drawn text (painted height, painted width).
To create a TTextEdit component:
// TTextEdit.qml
import QtQuick 2.0
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
}
}Application:
// TTextEdit.qml
import QtQuick 2.2
import QtQuick.Window 2.2
Window{
height: 600;width: 800
Rectangle {
width: 136
height: 120
color: "linen"
TTextEdit {
id: input
x: 8; y: 8
width: 120; height: 104
focus: true
text: "Text Edit"
}
}
}function:
Key element
The additional attribute key allows you to execute code based on the click of a key. For example, use the up and down buttons to move a square, the left and right buttons to rotate an element, and the plus and minus buttons to scale an element.
// KeyEnevt.qml
import QtQuick 2.2
import QtQuick.Window 2.2
Window{
height: 600;width: 800
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
console.count("key plus")
break;
case Qt.Key_Minus:
square.scale -= 0.2
console.count("key minus")
break;
}
}
}
}