Skip to content
  • Categories
  • Recent
  • Tags
  • Popular
  • Users
  • Groups
  • Search
  • Get Qt Extensions
  • Unsolved
Collapse
Brand Logo
  1. Home
  2. Qt Development
  3. QML and Qt Quick
  4. QML Screen.height and Screen.screenAvailableHeight
QtWS25 Last Chance

QML Screen.height and Screen.screenAvailableHeight

Scheduled Pinned Locked Moved Solved QML and Qt Quick
qml androidqml anchorsqml screen
5 Posts 2 Posters 587 Views
  • Oldest to Newest
  • Newest to Oldest
  • Most Votes
Reply
  • Reply as topic
Log in to reply
This topic has been deleted. Only users with topic management privileges can see it.
  • D Offline
    D Offline
    DragoonXVIII
    wrote on last edited by
    #1

    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:
    Qt_1.jpg

    Estimated Result:
    Qt_2.jpg

    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.

    JoeCFDJ 1 Reply Last reply
    0
    • D 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:
      Qt_1.jpg

      Estimated Result:
      Qt_2.jpg

      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.

      JoeCFDJ Offline
      JoeCFDJ Offline
      JoeCFD
      wrote on last edited by
      #2

      @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
      
      D 1 Reply Last reply
      0
      • JoeCFDJ 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
        
        D Offline
        D Offline
        DragoonXVIII
        wrote on last edited by
        #3

        @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.

        JoeCFDJ 1 Reply Last reply
        0
        • D 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.

          JoeCFDJ Offline
          JoeCFDJ Offline
          JoeCFD
          wrote on last edited by JoeCFD
          #4

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

          1 Reply Last reply
          0
          • D Offline
            D Offline
            DragoonXVIII
            wrote on last edited by
            #5

            @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.

            1 Reply Last reply
            0
            • D DragoonXVIII has marked this topic as solved on

            • Login

            • Login or register to search.
            • First post
              Last post
            0
            • Categories
            • Recent
            • Tags
            • Popular
            • Users
            • Groups
            • Search
            • Get Qt Extensions
            • Unsolved