Important: Please read the Qt Code of Conduct - https://forum.qt.io/topic/113070/qt-code-of-conduct

How to open qml virtual keyboard in horizontal?



  • Hi everybody
    I am new to QML. I try to create a login form with QML and use .qml in pyside2 code.
    right now, .qml code works correctly, but the virtual keyboard opens under the TextFields.
    I want to open this on the left side of TextFiels, but I don't know how to do it!

    import QtQuick 2.10
    import QtQuick.Controls 2.3
    import QtQuick.VirtualKeyboard 2.1
    
    Rectangle {
        width: 1350  
        height:700
        color: "#f6fdfa"
    
        // Only set with CONFIG+=disable-desktop.
        property bool handwritingInputPanelActive: false
    
        Flickable {
            id: flickable
            anchors.fill: parent
            contentWidth: content.width
            contentHeight: content.height
            interactive: contentHeight > height
            flickableDirection: Flickable.VerticalFlick
    
            property real scrollMarginVertical: 20
    
            ScrollBar.vertical: ScrollBar {}
    
            MouseArea  {
                id: content
                width: flickable.width
                height: textEditors.height + 24
    
                onClicked: focus = true
    
                Column {
                    id: textEditors
                    spacing: 7
                    x: 12
                    y: 12
                    width: parent.width - 26
                    
                    Label {
                        color: "#000000"
                        text: "نام کاربری"
                        anchors.horizontalCenter: parent.horizontalCenter
                        font.pixelSize: 22
                    }
                    
                    TextField {
                        background: Rectangle {
                            radius: 10
                            border.color: "#1E5631"
                            border.width: 2
                        }
                        width: 300
                        height: 60
                        placeholderText: "09*********"
                        anchors.horizontalCenter: parent.horizontalCenter
                        inputMethodHints: Qt.ImhDigitsOnly
                        onAccepted: passwordField.focus = true
                        font.pixelSize: 24
                    }
    
                    Label {
                        color: "#000000"
                        text: "رمز عبور"
                        anchors.horizontalCenter: parent.horizontalCenter
                        font.pixelSize: 22
                    }
                    
                    TextField {
                        background: Rectangle {
                            radius: 10
                            border.color: "#1E5631"
                            border.width: 2
                        }
                        width: 300
                        height: 60
                        placeholderText: "**********"
                        anchors.horizontalCenter: parent.horizontalCenter
                        inputMethodHints: Qt.ImhDigitsOnly
                        onAccepted: passwordField.focus = true
                        font.pixelSize: 24
                    }
                    
                }
            }
        }
    
        // Keyboard
        
        InputPanel {
            id: inputPanel
            z: 99
            x: 100
            y: parent.height
            width: parent.width - 200
    
            Component.onCompleted: {
                keyboard.style.keyboardBackground = null;
                keyboard.style.selectionListBackground = null;
            }
    
            states: State {
                name: "visible"
                when: inputPanel.active
                PropertyChanges {
                    target: inputPanel
                    y: parent.height - inputPanel.height-120
                }
            }
            transitions: Transition {
                from: ""
                to: "visible"
                reversible: true
                ParallelAnimation {
                    NumberAnimation {
                        properties: "y"
                        duration: 250
                        easing.type: Easing.InOutQuad
                    }
                }
            }
        }
    }
    
    


  • change this code:
    x: 100
    y: parent.height


Log in to reply