Rectangle Inside Item not visible

  • Hi
    I am trying to get the hello world example from the book "Application Development with Qt Creator - Third Edition" to work.
    I am using QT 5.12.3 MinGW 64bit.

    The example is using QT Quick. The working example should do the following:
    Run the application. You'll see your red-colored rectangle fills the entire window, and clicking on the rectangle changes its color to blue.

    However when I am running the example I get an empty window that looks like this.

    I have opened an issue on github. The authors could not reproduce the behaviour. However they used Qt 5.15 instead of 5.12.3
    They suspected that either there is a bug in QT 5.12.3 or that I have mistyped the example code.
    Since I used the code from the github repository I am sure it is nothing related to the code I used.

    I looked at the known Issue list for 5.12.3 and found the following issue.
    The issue seems to be similar but is related to Windows in my case I am using a rectangle.

    import QtQuick 2.4
    Item {
        width: 400
        height: 400
        property alias rectangle: rectangle
        property alias mouseArea: mouseArea
        Rectangle {
            id: rectangle
            color: "#ff2424"
            anchors.fill: parent
            MouseArea {
                id: mouseArea
                anchors.fill: parent

    Can anyone confirm that this is a Bug? If yes, is there any workaround?

    Thanks for your time :-)

  • The code you've pasted does exactly what it is supposed to do, fill the parent with red. There is no operator or any other code to tell it to change to blue when clicked, no mouse area and no other color properties are present, so either I misunderstand your question are you aren't giving us the full picture.

    How about pasting a link to the page (guide) you are following?

  • @Markkyboy

    Thanks for your reply. Since I am following a book, I have no link to a tutorial.
    However I have updated my question with a link to the full example code. It is on github.

    You are correct, that the code I have posted does not contain any logic that would change the color.
    From this code alone I would expect to get a window which is filled with the color red.
    However in my case the window stays blank. Please see my first image. Their you can see how the window appears when running the example code.

    The logic for changing the color is inside the main.qml

    import QtQuick 2.12
    import QtQuick.Window 2.12
    Window {
        visible: true
        width: 640
        height: 480
        title: qsTr("Hello World")
        MyGuiForm {
            anchors.fill: parent
            mouseArea.onClicked: {
                rectangle.color = "blue";

    Is the link to the code ok, or should I rework the question and paste the content of each file into the question?

  • Ok, update.
    The behaviour is clearly a Bug. I am using QT on a laptop. Via HDMI I have connected a second display to it.
    The problem I described in my original question only occurs if the window is opened on the second display.
    If it starts on the first display or is moved from the second to the first it works as intended.
    Since I am only playing around this "solution/workaround" is good enough for me.

Log in to reply