Skip to content
  • Categories
  • Recent
  • Tags
  • Popular
  • Users
  • Groups
  • Search
  • Get Qt Extensions
  • Unsolved
Collapse
Brand Logo
  1. Home
  2. Qt Development
  3. QML and Qt Quick
  4. How to open qml virtual keyboard in horizontal?
Forum Updated to NodeBB v4.3 + New Features

How to open qml virtual keyboard in horizontal?

Scheduled Pinned Locked Moved Unsolved QML and Qt Quick
2 Posts 2 Posters 241 Views 1 Watching
  • Oldest to Newest
  • Newest to Oldest
  • Most Votes
Reply
  • Reply as topic
Log in to reply
This topic has been deleted. Only users with topic management privileges can see it.
  • S Offline
    S Offline
    saza
    wrote on 5 Apr 2020, 06:33 last edited by
    #1

    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
                    }
                }
            }
        }
    }
    
    
    1 Reply Last reply
    0
    • B Offline
      B Offline
      berni
      wrote on 5 Apr 2020, 17:20 last edited by
      #2

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

      1 Reply Last reply
      1

      1/2

      5 Apr 2020, 06:33

      • Login

      • Login or register to search.
      1 out of 2
      • First post
        1/2
        Last post
      0
      • Categories
      • Recent
      • Tags
      • Popular
      • Users
      • Groups
      • Search
      • Get Qt Extensions
      • Unsolved