Resize qtvirtualkeyboard according to QObject

Question

I'm using the qml qtvirtual keyboard: https://github.com/qt/qtvirtualkeyboard

I'm trying to "connect" it with the rest of my Qt app which is based on widgets. For example, when I click on a QLineEdit, I want the keyboard to show up and to act like a physical one in the app context.

To do so, I installed what's in qtvirtualkeyboard/src (qmake && make && make install) and here is my main.cpp :

#include <QQuickView>
#include <QApplication>
#include <QQmlEngine>
#include <QQmlContext>

int main(int argc, char *argv[]){

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

    QApplication app(argc, argv);
    MainWindow w();  // This is a QWidget / QMainWindow
    w.setFixedSize(800, 480);
    w.show();

    return app.exec();
}

When I execute this on my desktop, the Keyboard takes half of my screen despite that my app is 800x480.

And when I execute it on my Raspberry Pi with its 7" touchscreen, the keyboard takes half of the page and a black border appears on the top.

I want to fix the keyboard size myself. When I create a QML file with an Item and so on, the keyboard doesn't show up anymore.

Answer 1

I have wrestled the QtVirtualKeyboard monster for the past month or so. Hopefully you can benefit from my trial and error.

The Pieces to the QtVirtualKeyboard Puzzle

The thing to know/remember is that there are essentially four separate pieces that inform the overall function and implementation of the keyboard:

1. qtvirtualkeyboard (function)
2. layout (structure)
3. style (presentation)
4. Qml within your application (implementation)

If you are using the default layouts and styles that come with qtvirtualkeyboard (in other words, you haven't created any custom styles or layouts), it is worth taking a look at them to get a better idea of what is going on behind the scenes. You can find them here:

layouts: /path/to/qtvirtualkeyboard/src/virtualkeyboard/content/layouts

styles: /path/to/qtvirtualkeyboard/src/virtualkeyboard/content/styles

Positioning The Keyboard

Here is a (bit of an oversimplified) example Qml file that demonstrates how to position the keyboard. In your case, since you are concerned with how much vertical screen real estate that is being consumed by the keyboard, the keyboard's y property is the first thing you'll want to target.

To start, set the keyboard.y to whatever the height of your screen is (e.g. parent.height or however you want to get that info). Placing the top of your keyboard to the bottom of the screen hides it from view.

Then, when you click in a TextInput field, invoking QtVirtualKeyboard, change the keyboard.y property to the bottom of the TextInput field during the state change from default/initial to "visible". An added benefit of handling this via state change is that you gain control over the keyboard animation.

import QtQuick 2.7
import QtQuick.VirtualKeyboard 2.1

Item {
    id: appSectionWithTextInput

    property int screenHeight: parent.height; // the height of the screen/display
    anchors.fill: parent;

    TextInput {
        id: textInput;
        height: 120;
        width: parent.width - 2;

        color: "#000000"; // black

        // http://doc.qt.io/qt-5/qinputmethod.html#properties
        focus: Qt.inputMethod.visible;

        verticalAlignment: TextInput.AlignVCenter;
    }

    InputPanel {
        id: keyboard;
        y: screenHeight; // position the top of the keyboard to the bottom of the screen/display

        anchors.left: parent.left;
        anchors.right: parent.right;

        states: State {
            name: "visible";
            when: keyboard.active;
            PropertyChanges {
                target: keyboard;
                // position the top of the keyboard to the bottom of the text input field
                y: textInput.height;
            }
        }
        transitions: Transition {
            from: ""; // default initial state
            to: "visible";
            reversible: true; // toggle visibility with reversible: true;
            ParallelAnimation {
                NumberAnimation {
                    properties: "y";
                    duration: 250;
                    easing.type: Easing.InOutQuad;
                }
            }
        }
    }
}

Custom Layout

If you would like to create your own custom layout(s), your best bet is to copy one of the existing layouts that come with qtvirtualkeyboard (e.g. en_GB) to a directory of your choosing. Once there, rename it to whatever you like and add the following environment var: QT_VIRTUALKEYBOARD_LAYOUT_PATH=/path/to/custom/keyboard-layout/mycustomlayout.

Note: The QT_VIRTUALKEYBOARD_LAYOUT_PATH environment variable should be set to the file system directory containing the custom keyboard layouts before running the application.

Custom Style

If you would like to create your own custom keyboard style, refer to this page for the specific directory where you should create your custom style directory.

Once there, add the following environment var: QT_VIRTUALKEYBOARD_STYLE=mycustomstyle.

If you would like to directly manipulate the size of the keyboard, you can access/change those properties in the style.qml file located in your custom style directory.

// Properties
keyboardDesignWidth
keyboardDesignHeight
keyboardRelativetopMargin
keyboardRelativerightMargin
keyboardRelativeBottomMargin
keyboardRelativeLeftMargin

You can find a full list of those properties here.

Best of luck!