QML Screen.height and Screen.screenAvailableHeight

DragoonXVIII

Hello there!
I'm in the middle of creating an Android mobile app. Right now my goal is to change the colour of statusBar by changing the colour of the Rectangle beneath. But I do something wrong and I have no idea what. The results are weird.
Code:

import QtQuick
import QtQuick.Window 2.15


Window
{
    id: exampleApp
    title: qsTr("exampleApp")
    width: Screen.width     //Qt.platform.os === "android" ? Screen.width : 360
    height: Screen.height   //Qt.platform.os === "android" ? Screen.height : 800
    visible: true
    flags: Qt.Window | Qt.MaximizeUsingFullscreenGeometryHint

    color: "green"

    property var screenWidth: Screen.width
    property var screenHeight: Screen.height
    property var screenAvailableWidth: Screen.desktopAvailableWidth
    property var screenAvailableHeight: Screen.desktopAvailableHeight

    Component.onCompleted:
    {
        console.log("+===TEST===+")
        console.log("Resolution: ", Screen.width, "x", Screen.height)
        console.log("Available Resolution: ", Screen.desktopAvailableWidth, "x", Screen.desktopAvailableHeight)
        console.log("+===PVAR===+")
        console.log("screenWidth: ", screenWidth, " screenHeight: ", screenHeight, "\n: screenAvailableWidth: ", screenAvailableWidth, " screenAvailableHeight: ", screenAvailableHeight,)
        console.log("RED/BLUE_ESTIMATED_RECTANGLE_HEIGHT: ", screenAvailableHeight/2)
        console.log("ACTUALL_RED/BLUE_RECTANGLE_HEIGHT:", red.height)
        console.log("STATUS_BAR_HEIGHT: ", screenHeight - screenAvailableHeight)
    }

    Rectangle
    {
        id: statusBar
        height: screenHeight - screenAvailableHeight
        width: screenWidth
        color: "purple"
        anchors.top: parent.top
    }

    Rectangle
    {
        id: red
        height: screenAvailableHeight/2
        width: parent.width
        color: "red"
        anchors.top: statusBar.bottom
    }

    Rectangle
    {
        height: screenAvailableHeight/2
        width: parent.width
        color: "blue"
        anchors.top: red.bottom
    }
}

Output (mobile dev, 2400x1080):

D qml     : : +===TEST===+
D qml     : : Resolution:  360 x 800
D qml     : : Available Resolution:  360 x 771
D qml     : : +===PVAR===+
D qml     : : screenWidth:  360  screenHeight:  800
D qml     : : screenAvailableWidth:  360  screenAvailableHeight:  771
D qml     : : RED/BLUE_ESTIMATED_RECTANGLE_HEIGHT:  385.5
D qml     : : ACTUALL_RED/BLUE_RECTANGLE_HEIGHT: 385.5
D qml     : : STATUS_BAR_HEIGHT:  29

So according to the results, the estimated and actual rectangle height should be the same. But guess what, they're not. Although the code says they are the same, the app displays something different.
Result:

Estimated Result:

So, actual height is 1200px and my Rectangle:

    Rectangle
    {
        id: statusBar
        height: screenHeight - screenAvailableHeight
        width: screenWidth
        color: "purple"
        anchors.top: parent.top
    }

does not exist. Propable there is a very simple solution but I have no idea what I'm getting wrong. Any help would be appreciated.

JoeCFD

@DragoonXVIII
The following code will give you full screen mode without using Screen.
And width and height of mainAppWindow will be the right size.

ApplicationWindow {
    id: mainAppWindow
    visible: true
    visibility: Window.FullScreen

DragoonXVIII

@JoeCFD Okay, it works, But there is another problem, statusBar is hidden by default. If I swipe down, the status bar appears for a moment, but then disappears. My main goal was just to change the colour of statusBar. So, should I try to change statusBar colour by Java code or something else? I tried to avoid doing this in Java because I completely don't understand how to do this, but if this is the only way.

JoeCFD

@DragoonXVIII Do you need status bar? Try to set bounds for your swipe?

DragoonXVIII

@JoeCFD Yes, I do. Also, I just realized that my approach to changing the status bar colour does not take into account the existence of the navigation bar (I'm not using it, but some users might). Therefore, the whole approach is not suitable.