Qt_QML輸入元素(Input Element)

文本編輯元素:TextInput(文本輸入) 和TextEdit(文本編輯)

文本輸入(TextInput)

文本輸入允許用戶輸入一行文本。 這個元素支持使用正則表達式驗證器來限制輸入和輸入掩碼的模式設置。

KeyNavigation( 按鍵嚮導)

通過按鍵切換光標,比如:KeyNavigation.tab: input1 (Tab鍵切換,input1 爲id)

焦點區域( FocusScope)

設置焦點,最後一個設置起效,使用方法:focus: true

文本編輯(TextEdit)

支持多文本編輯,其他屬性和TextInput一樣

// TLineEditV1.qml
import QtQuick 2.0

Rectangle {
    x: 200
    y: 10
    width: 96;
    height: 80
    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
    }
}
// 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
    }
}
// main.qml
import QtQuick 2.9
import QtQuick.Window 2.2
//import QtQuick.VirtualKeyboard 2.2

Window {
    id: root
    visible: true
    width: 640
    height: 480
    title: qsTr("Hello World")

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

    Rectangle {
        x: 300
        width: 200
        height: 80
        color: "linen"
        TLineEditV1 {
            id: input3
            x: 8; y: 8
            width: 96; height: 20
            focus: true
            text: "Text Input 1"
            KeyNavigation.tab: input2
        }

        TLineEditV1 {
            id: input4
            x: 8; y: 36
            width: 96; height: 20
            text: "Text Input 2"
            KeyNavigation.tab: input1
        }
    }


    Rectangle {
        x: 10
        y: 100
        width: 136
        height: 120
        color: "linen"
        TTextEdit {
            id: input
            x: 8; y: 8
            width: 120; height: 104
            focus: true
            text: "Text Edit"
        }
    }
}

在這裏插入圖片描述

按鍵元素(Key Element)

import QtQuick 2.9
import QtQuick.Window 2.2
//import QtQuick.VirtualKeyboard 2.2

Window {
    id: root
    visible: true
    width: 640
    height: 480
    title: qsTr("Hello World")
    
    Rectangle {
        width: 400; height: 200
        GreenSquare {
        id: square
        x: 200; y: 200
        }

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

在這裏插入圖片描述

發表評論
所有評論
還沒有人評論,想成為第一個評論的人麼? 請在上方評論欄輸入並且點擊發布.
相關文章