Rectangle does not cover the entire ApplicationWindow



  • I'm using Qt5.9.2, Android7.0, Samsung Note-5 with Screen Resolution FHD(1920*1080), Windows-10 for development .

    I have updated the question, now including the main.cpp file too.

    A picture speaks better than words (black rectangle in red ApplicationWindow):

    alt text

    Notice the red unfilled areas on top and right side. The right side red color may be hard to notice but it is there! I want the rectangle which I have colored in black to fill the entire Application Window. See the code:

    main.qml

    import QtQuick 2.9
    import QtQuick.Controls 2.2
    import QtQuick.Layouts 1.3
    
    ApplicationWindow {    
        id: window
        visible: true
    
        /* Developing mobile apps you don’t need to set width
           and height, because the ApplicationWindow always grabs
           the total available space.
        */
        //width: 640
        //height: 480
    
        color: "#ff0000" // Red color
    
        /* For some reasons i want this Rectangle here
         * and it MUST fill the entire window but I notice
         * a pixel or two line on top and right of the
         * screen.
         */
        Rectangle {
            id: page
            width: window.width; height: window.height
            //anchors.fill: parent // same output
            color: "#000000" // Black color
        }
    }
    

    I noticed that if I comment the following line in main.cpp then I don't get this issue but in that case the UI elements like labels, buttons etc looks very small (like zoomed out).

    QCoreApplication::setAttribute(Qt::AA_EnableHighDpiScaling);
    

    I need few rectangles in the UI which cover the entire WIDTH of the screen but this issue has stopped my any further development, because I get about a pixel wide space left on the right side of the screen.

    Even if I use Window instead of ApplicationWindow, I get the same results.

    main.cpp

    #include <QGuiApplication>
    #include <QQmlApplicationEngine>
    
    int main(int argc, char *argv[])
    {
        /* Commenting the following line resolves the issue but then UI elements looks small */
        QCoreApplication::setAttribute(Qt::AA_EnableHighDpiScaling);
    
        QGuiApplication app(argc, argv);
    
        QQmlApplicationEngine engine;
        engine.load(QUrl(QLatin1String("qrc:/main.qml")));
        if (engine.rootObjects().isEmpty())
            return -1;
    
        return app.exec();
    }
    

    I don't know how to solve this issue :(

    EDIT:
    This is a serious bug! It is affecting all platforms with specific screen resolutions. You never know what the end user will be using the screen resolution so it may be affecting your QtQuick applications too! This bug has been reported HERE since almost an year! .
    If you are facing the same issue then please login to https://bugreports.qt.io/ and vote THIS bug.

    Note: It is not just Rectangle that's drawn incorrectly, in fact, all UI elements are affected due to this bug!


  • Lifetime Qt Champion

    Hi and welcome to devnet,

    You should also add which version of Android you are running your application on. The device model will likely also be useful.

    Do you also have the same issue with a default application ?


  • Moderators

    @Eager I tested this code and it works fine on my Linux desktop. I didn't deploy to any android device, but it seems to work fine on the desktop version.

    Does yours fail on desktop as well as the android device or just on the device?



  • @SGaist I have updated the question, now including the main.cpp file too.

    I'm using Qt5.9.2, Android7.0, Samsung Note-5, Windows-10 for development .

    I don't get the same issue on desktop.

    I noticed that if I comment the following line in main.cpp then I don't get that issue but in that case the UI elements like labels, buttons etc looks very small (like zoomed out).

    QCoreApplication::setAttribute(Qt::AA_EnableHighDpiScaling);
    

    I need few rectangles in the UI which cover the entire WIDTH of the screen but this issue has stopped my any further development, because I get about a pixel wide space left on the right side of the screen.

    Even if I use Window instead of ApplicationWindow, I get the same results.



  • @ambershark It did not fail on desktop, It fails on my android device Samsung Note-5 Android Version 7.0

    I have placed the main.cpp code in the question if you need for testing.

    I have found that if I comment the following line of code in main.cpp then the issue goes away but then UI elements like buttons, labels, etc look very small like zoomed out.

    QCoreApplication::setAttribute(Qt::AA_EnableHighDpiScaling);
    

    I really need a way to place few FULL WIDTH rectangles in ApplicationWindow without any artifacts but not at the cost of smaller UI elements.



  • It seems to be a bug due to the high dpi scaling, maybe a rounding issue or whatever.

    If I was in your position I'd do anchors.margin: -1 as a workaround and check/report on https://bugreports.qt.io (ah, you already did).



  • @GrecKo I found this here: http://doc.qt.io/qt-5/qtquick-positioning-anchors.html

    Note: Anchor margins only apply to anchors; they are not a generic means of applying margins to an Item. If an anchor margin is specified for an edge but the item is not anchored to any item on that edge, the margin is not applied.
    

    As Items can't be anchored(but can be positioned using x and y) to ApplicationWindow itself so unfortunately your solution is not working.

    I noticed that EVEN IF i make rectangle size bigger than window, I get the same issue!

    I am still hunting a workaround :(



  • You can do anchors.fill: parent in a Window though. Here parent is the contentItem of the Window.
    Or alternatively you could try width: window.width + 1

    EDIT : didn't read the part about the bigger rectangle not working, too bad.



  • @GrecKo

    • anchors.fill: parent
    • width: window.width + 1

    I tried them both separately and in combine but in both cases the result is same.



  • @Eager ,

    ApplicationWindow {
    visible: true
    Rectangle{
    border.color: "red"
    color;"black"
    x:1
    y:1
    width: parent.width-1
    height: parent.height-1
    }



  • @Vinod-Kuntoji Note that I want to cover the entire red background with the BLACK rectangle.

    This following code generates output shown in the next snapshot:

    ApplicationWindow {
        id: window
        visible: true
    
        color: "#ff0000" // Red color window
    
        Rectangle{
            color: "#000000" // Black color Rectangle
            border.color: "#000000" // Black color Rectangle Border.
            x:0
            y:0
            width: parent.width+1
            height: parent.height+1
        }
    }
    

    OUTPUT:
    0_1508232531063_Screenshot_20171017-142603.jpg

    The following code which is, in fact, your code generate output shown in the next snapshot:

    ApplicationWindow {
        id: window
        visible: true
    
        // No color: means white background.    
        
        Rectangle{
            border.color: "red" // Red color Rectangle Border.
            color: "black" // Black color Rectangle
            x:0
            y:0
            width: parent.width-1
            height: parent.height-1
        }
    }
    

    OUTPUT:

    0_1508233040649_Screenshot_20171017-143527.jpg



  • @GrecKo I found that it is a bug that is affecting all platforms with certain screen resolutions. Some developers may not notice this issue but the end user may be using a certain screen resolution and be affected by the issue! You can login to https://bugreports.qt.io/ and Vote THIS bug if you also want this bug to be resolved.


Log in to reply
 

Looks like your connection to Qt Forum was lost, please wait while we try to reconnect.