qml virtual keyboard: keyboardDesignWidth and Height

Question

I am looking at the QML Style for the virtual keyboard. What is the purpose of keyboardDesignWidth and Height? I seem to have a lot of trouble managing the width and height of the keyboard and can never set it to how I want it. Setting the keyboardHeight and Width directly also does not help much.

The issue is that the component background size is somehow computed behind the scenes. So, even when I have the keyboard buttons and size how I want, the extraneous background covers some of my other control and it is very difficult to have a fine grained control over the size of the keyboard.

What is the right way to control the width and size of the virtual keyboard directly?

Answer 1

To Quote from the Documentation

The keyboard size is automatically calculated from the available width; that is, the keyboard maintains the aspect ratio specified by the current style. Therefore the application should only set the width and y coordinates of the InputPanel, and not the height.

So if you want to have a specific height, you need to set the width accordingly.

What is the right way to control the width and size of the virtual keyboard directly?

e.g.

InputPanel {
    anchors.fill: parent
    anchors.leftMargin: 100
    anchors.rightMargin: 100
}

e.g.

InputPanel {
    anchors.horizontalCenter: parent.horizontalCenter
    anchors.bottom: parent.bottom
    width: 30
}

So what's the deal with the keyboardDesignHeight/Width? Well this seems to be the dimensions of the keyboard, when it is not necessary to scale it:

scaleHint : real
The keyboard style scale hint. This value is determined by dividing keyboardHeight by keyboardDesignHeight. All pixel dimensions must be proportional to this value.
This property is readonly!

So setting those will not disable the automatic resizing of your input panel in dependence of the width.

You might use them maybe, to calculate a ratio, and from this set the width to achieve your desired height.

Maybe this example helps you to understand this property:

import QtQuick 2.6
import QtQuick.Window 2.0
import QtQuick.Controls 2.0
import QtQuick.VirtualKeyboard 2.0

ApplicationWindow {
    id:appwindow
    visible: true
    width: 800
    height: 600
    title: qsTr("Test")


    InputPanel {
        id: ip
        anchors.horizontalCenter: parent.horizontalCenter
        anchors.bottom: parent.bottom
        width: 800

        Component.onCompleted: console.log(Object.keys(ip.keyboard.style).sort())
    }

    Slider {
        id: sl
        from: 0
        to: 3000
    }

    Binding {
        target: ip.keyboard.style
        property: 'keyboardDesignHeight'
        value: sl.value

    }
}