How to change the Qt VitrualKeyboard InputPanel Layout?

Question

At the moment when my Keyboard popsup it looks as lower half of the screen as a black screen and the keyboard itself in the middle! I don't like this view!! I want to change it: like removing this black background or make it transparent!!! any Ideas????

 InputPanel
{
id:inputPanel
y: Qt.inputMethod.visible ? parent.height -inputPanel.height : parent.height
anchors.left: parent.left
anchors.right: parent.right
}

edit1:

I added @Scap suggest in the style.qml file and I included the path of the file in my main as below, with no effect!!!!

    qputenv("QT_VIRTUALKEYBOARD_STYLE_PATH","./styles")

Answer 1

I can't figure out how to load the style.qml either, but i experimented with some stuff and was able to come up with the following:

This will make the keyboard background transparent if put inside an InputPanel:

Component.onCompleted: {
    keyboard.style.keyboardBackground = null;        // the keyboard background
    keyboard.style.selectionListBackground = null;   // the horizontal bar at the
                                                     // top of the keyboard
}

You can then change the background color by defining a sibling like this:

Rect {
    anchors.fill: inputPanel
    color: "red"
}

InputPanel.keyboard.style has a lot of properties you can experiment with. There is no auto-completion for them in Qt-Creator but you can print them to the console like this:

console.log(Object.keys(inputPanel.keyboard.style).sort());

Hope this helps.

Complete code, tested on Qt 5.12 Linux GCC:

main.cpp

#include <QGuiApplication>
#include <QQmlApplicationEngine>

int main(int argc, char *argv[])
{
    qputenv("QT_IM_MODULE", QByteArray("qtvirtualkeyboard"));

    QCoreApplication::setAttribute(Qt::AA_EnableHighDpiScaling);

    QGuiApplication app(argc, argv);

    QQmlApplicationEngine engine;

    engine.load(QUrl(QStringLiteral("qrc:/main.qml")));

    if (engine.rootObjects().isEmpty())
        return -1;

    return app.exec();
}

main.qml

import QtQuick 2.9
import QtQuick.Window 2.2
import QtQuick.Controls 2.5
import QtQuick.VirtualKeyboard 2.2

Window {
    id: window
    visible: true
    width: 640
    height: 480
    title: qsTr("Hello World")

    // window background
    Rectangle {
        anchors.fill: parent

        gradient: Gradient {
            GradientStop { position: 0.0; color: "yellow" }
            GradientStop { position: 1.0; color: "green" }
        }
    }

    // keyboard background
    Rectangle {
        anchors.fill: inputPanel
        color: 'red'

        visible: !checkBox.checked
    }

    Column {
        TextField {
            color: "white"
            background: Rectangle { color: "black" }

            focus: true
        }
        CheckBox {
            id: checkBox
            text: 'Invisible Keyboard Background'
        }
    }

    InputPanel {
        id: inputPanel
        z: 99
        x: 0
        y: window.height
        width: window.width

        Component.onCompleted: {
            keyboard.style.keyboardBackground = null;
            keyboard.style.selectionListBackground = null;
        }

        states: State {
            name: "visible"
            when: inputPanel.active
            PropertyChanges {
                target: inputPanel
                y: window.height - inputPanel.height
            }
        }
        transitions: Transition {
            from: ""
            to: "visible"
            reversible: true
            ParallelAnimation {
                NumberAnimation {
                    properties: "y"
                    duration: 250
                    easing.type: Easing.InOutQuad
                }
            }
        }
    }
}

Answer 2

You should read this https://doc.qt.io/qt-5.11/technical-guide.html#keyboard-styles :

keyboardBackground: Rectangle {
    color: "transparent"
}