QML elements over device's status bar

Question

I am facing a problem when the device's keyboard is shown. The elements go over the device's status bar as in the images.

I have already tried to use the Flickable type but it does not work. Every time the keyboard appears, it push the app elements over the status bar.

PS: The problem occurs in both Android and iOS.

Here is the code:

import QtQuick 2.4
import QtQuick.Window 2.2
import QtQuick.Controls 1.3

Window {
    visible: true
    property int larguraTela: 360
    property int alturaTela: 640
    width: larguraTela
    height: alturaTela
    maximumWidth: larguraTela
    maximumHeight: alturaTela
    minimumWidth: larguraTela
    minimumHeight: alturaTela
    title: "OverStatusBar"

    Rectangle{
        id: retangulo1

        width: parent.width
        height: parent.height * 0.5
        anchors.top: parent.top
        color: "grey"
    }

    Rectangle{
        id: retangulo2

        width: parent.width
        height: parent.height * 0.5
        anchors.top: retangulo1.bottom
        color: "lightgrey"

        TextField {
            id: campoTexto

            width: parent.width * 0.7
            height: parent.height * 0.15
            anchors.centerIn: parent
            inputMethodHints: Qt.ImhDigitsOnly
        }
    }
}

Answer 1

This behavior was accepted as bug by Qt. If someone would like to keep up with, here is the link

https://bugreports.qt.io/browse/QTBUG-50200