How to configure QT VirtualKeyboard for portrait application

Question

I am creating a QT5.7.1 Qml application that has a resolution of 480 x 854. I want to use the QTVirtualKeyboard component for text entry. I have added the keyboard and it functions correctly, eg text fields update with the input.

My problem is the size of the keyboard is extremely small. It occupies the whole width but only uses about a 5th of the height.

I know I cannot set the height manually as its calculated by QT. My questions is, How to I configure the VirtualKeyboard to look correct for a portrait based application.

Thanks.

Thank you, I had seen this link before posting but didnt follow how I could fix my issue from it. I then looked at it again from a different angle and it helped my create the solution. — Martin Smith

Martin Smith Martin Smith · Accepted Answer · 2018-06-04T07:49:16

I solved the issue by creating my own layout and style for the QTVirtualKeyboard plugin.

Specifically I set the design height and width in the style.qml file and altered some of the key settings, to remove keys I didnt need for my layout.

I then rebuilt the QTVirtualkeyboard plugin and then linked my test application with the newly created dll.

This solved my issue.

I copied the default style.qml that comes with QT (normally found in QT\\Src\qtvirtualkeyboard\content\styles\default)

I then made the following modifications:

readonly property int defaultKeyFontSize: 28
readonly property real keyBackgroundMargin: Math.round(3 * scaleHint)
readonly property real keyContentMargin: Math.round(10 * scaleHint)
readonly property real keyIconScale: scaleHint * 0.2

keyboardDesignWidth: 480
keyboardDesignHeight: 360
keyboardRelativeLeftMargin: 8 / keyboardDesignWidth
keyboardRelativeRightMargin: 8 / keyboardDesignWidth
keyboardRelativeTopMargin: 8 / keyboardDesignHeight
keyboardRelativeBottomMargin: 8 / keyboardDesignHeight`

I set the pixelSize of any key font size value to defaultKeyFontSize;

After this, it will just be a case of styling your keyboard to your specific requirements.

How to configure QT VirtualKeyboard for portrait application

1 Answers