QML elements on the status bar

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

I already tried to use Flickable type but it does not work. Every time the keyboard is shown it pushes the components up the status bar

NOTE: The problem occurs on both 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
        }
    }
}