Solved 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):
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!
-
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 ?
-
@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 workaroundand 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 aWindow
though. Hereparent
is thecontentItem
of theWindow
.
Or alternatively you could trywidth: window.width + 1
EDIT : didn't read the part about the bigger rectangle not working, too bad.
-
- 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:
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:
-
@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.