QML elements on status bar

Question

I’m having a problem when the device keyboard is shown. The elements are on top of the device’s status bar as in the images.

I’ve tried using the Flickable type but does not work. Every time the keyboard is shown it pushes the components up the status bar

NOTE: The problem occurs both on Android and iOS.

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 a bug by Qt. For those who want to follow here is the link.

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