QML VIII: input elements

Posted by aeroswat on Sat, 15 Jan 2022 22:50:55 +0100

catalogue

Text input

Focus area

Text editing

Key element

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;
            }
​
        }
    }
}

Topics: Qt qml