qt virtual keyboard does not show up

Question

I am trying to use the qt virtual keyboard on a raspberry pi and am having issues summoning the keyboard.

I have configured the project as follows to allow for the use of virtual keyboard:

//In the PRO file
QT += qml quick quickcontrols2 xml
static {
    QT += svg
    QTPLUGIN += qtvirtualkeyboardplugin
}

CONFIG += c++11 disable-desktop

I think the disable-desktop should be enough to summon the virtual keyboard, at least that is my assumption.

The first line in my main file is:

qputenv("QT_IM_MODULE", QByteArray("qtvirtualkeyboard")); 

This ensures that the module is loaded. I have verified that without this line, the program barfs with the virtual keyboard module not found error.

Now, I have a simple component which has a text field as:

import QtQuick 2.0
import QtQuick.Layouts 1.3
import QtQuick.Controls 2.1
import QtQuick.VirtualKeyboard 2.1

TextField {
            id: idField
            width: 80
            height: 30
            placeholderText: qsTr("ID")
            Layout.maximumHeight: 30
            Layout.minimumHeight: 30
            Layout.minimumWidth: 80
            Layout.maximumWidth: 80
            focus: true
            anchors.horizontalCenter: parent.horizontalCenter
            inputMethodHints: Qt.ImhDigitsOnly
        }

When I click on it, the keyboard does not show up. I wonder if there is additional setup I need to do in order to summon the keyboard?

Answer 1

disable-desktop should be passed as an argument to qmake before building Qt Virtual Keyboard, not the application that uses the keyboard:

qmake CONFIG+=disable-desktop qtvirtualkeyboard.pro

However, I think that this code would automatically handle that for embedded devices (meaning that a pre-built/packaged Qt should work).

When using disable-desktop, it's up to you to provide the InputPanel:

import QtQuick 2.7
import QtQuick.Controls 2.0
import QtQuick.VirtualKeyboard 2.0

ApplicationWindow {
    id: window
    visible: true
    width: 640
    height: 480

    TextField {
        anchors.centerIn: parent
    }

    InputPanel {
        id: inputPanel
        z: 89
        y: active ? parent.height - height : parent.height
        anchors.left: parent.left
        anchors.right: parent.right
    }
}

There's a more advanced example of this here. This part of the documentation mentions it, and the next chapter also has an example:

In the application integration method, the application is required to create an instance of InputPanel as explained in the following chapter.