QML Anchor problem

YJ Kim

While I creating a simple layout using QML & anchors, I get an wrong result.

My intention is that the 4 rectangles are anchored to each other, and

The first rectangle has a fixed width of 100
The second & fourth rectangles are 20% width
And the third rectangle fills the remaining area.

But I got the result that the width of third rectangle is zero, and first rectangle width is fixed but it is changed.

I don't know what part of the code is wrong. Thanks!

Screenshot from 2021-06-23 16-34-12.png

import QtQuick 2.12
import QtQuick.Window 2.12

Window {
    id: window
    visible: true
    title: qsTr("Hello World")

    width: 640
    height: 500

    Rectangle {
        id: rectangle
        color: "red"
        width: 100
        anchors.left: parent.left
        anchors.right: rectangle1.left
        anchors.top: parent.top
        anchors.bottom: parent.bottom
        anchors.rightMargin: 2
        anchors.leftMargin: 0
        anchors.topMargin: 0
        anchors.bottomMargin: 0
    }

    Rectangle {
        id: rectangle1
        width: parent.width*0.2
        color: "green"
        anchors.right: rectangle2.left
        anchors.top: parent.top
        anchors.bottom: parent.bottom
        anchors.rightMargin: 2
        anchors.bottomMargin: 0
        anchors.topMargin: 0
    }

    Rectangle {
        id: rectangle2
        color: "blue"
        anchors.right: rectangle3.left
        anchors.top: parent.top
        anchors.bottom: parent.bottom
        anchors.rightMargin: 2
        anchors.bottomMargin: 0
        anchors.topMargin: 0
    }

    Rectangle {
        id: rectangle3
        width: parent.width*0.2
        color: "yellow"
        anchors.right: parent.right
        anchors.top: parent.top
        anchors.bottom: parent.bottom
        anchors.bottomMargin: 0
        anchors.topMargin: 0
        anchors.rightMargin: 0
    }

}

KroMignon

@YJ-Kim said in QML Anchor problem:

But I got the result that the width of third rectangle is zero, and first rectangle width is fixed but it is changed.
I don't know what part of the code is wrong. Thanks!

Why you don't use a RowLayout?

J.Hilk

@YJ-Kim

Rectangle {
        id: rectangle
        color: "red"
        width: 100
        anchors{
            left: parent.left
            right: undefined //Unneded, will be left out for others
            top: parent.top
            bottom: parent.bottom
            margins: 0
        }
    }

    Rectangle {
        id: rectangle1
        width: parent.width*0.2
        color: "green"
        anchors{
            left: rectangle.right
            top: parent.top
            bottom: parent.bottom
            margins: 0
            leftMargin: 2
        }
    }

    Rectangle {
        id: rectangle2
        color: "blue"
        anchors{
            left: rectangle1.right
            right: rectangle3.left
            top: parent.top
            bottom: parent.bottom
            margins: 0
            leftMargin: 2
            rightMargin: 2
        }
    }

    Rectangle {
        id: rectangle3
        width: parent.width*0.2
        color: "yellow"
        anchors{
            right: parent.right
            top: parent.top
            bottom: parent.bottom
            margins: 0
        }
    }

GrecKo

Yeah that's not really a good usecase for anchors, use RowLayout as KroMignon said:

RowLayout {
    anchors.fill: parent
    spacing: 2
    Rectangle {
        color: "red"
        Layout.preferredWidth: 100
        Layout.fillHeight: true
    }
    Rectangle {
        color: "green"
        Layout.preferredWidth: parent.width * 0.2
        Layout.fillHeight: true
    }
    Rectangle {
        color: "blue"
        Layout.fillWidth: true
        Layout.fillHeight: true
    }
    Rectangle {
        color: "yellow"
        Layout.preferredWidth: parent.width * 0.2
        Layout.fillHeight: true
    }
}

YJ Kim

@KroMignon @GrecKo Thank you very much for telling me other alternatives!

But apart from my code being inefficient, I would like to know why this code is not working as I expected.

YJ Kim

@J-Hilk said in QML Anchor problem:

@YJ-Kim

Rectangle {
        id: rectangle
        color: "red"
        width: 100
        anchors{
            left: parent.left
            right: undefined //Unneded, will be left out for others
            top: parent.top
            bottom: parent.bottom
            margins: 0
        }
    }

    Rectangle {
        id: rectangle1
        width: parent.width*0.2
        color: "green"
        anchors{
            left: rectangle.right
            top: parent.top
            bottom: parent.bottom
            margins: 0
            leftMargin: 2
        }
    }

    Rectangle {
        id: rectangle2
        color: "blue"
        anchors{
            left: rectangle1.right
            right: rectangle3.left
            top: parent.top
            bottom: parent.bottom
            margins: 0
            leftMargin: 2
            rightMargin: 2
        }
    }

    Rectangle {
        id: rectangle3
        width: parent.width*0.2
        color: "yellow"
        anchors{
            right: parent.right
            top: parent.top
            bottom: parent.bottom
            margins: 0
        }
    }

This code and my code are slightly different in assign of anchor tags. But I think it should be the same result.

Is there anything I need to consider in the anchor tag assign of Qt?

I couldn't find any special guidelines except that only parent or sibling can be anchored in the document I searched for.

Thansk! :)

KroMignon

@YJ-Kim said in QML Anchor problem:

Thank you very much for telling me other alternatives!
But apart from my code being inefficient, I would like to know why this code is not working as I expected.

It is not a problem of inefficiency but of "easy to use".
With QML I always try to use "KISS" principle (Keep It Stupid Simple).
Of course, you can use anchors, but using RowLayout/ColumnLayout, the anchors and spacer are set automatically and you can change item order without having to change/set any anchors.

When using anchors in combination with width/height you have to be careful. For example, on item Rectangle, you have set anchors.left and anchors.right + width. This should never be the case, because item does not known how to set his width: is it fixed (value set in code) or dynamic (according to anchors)!

This is why your code is not working.

J.Hilk

@YJ-Kim I agree with @KroMignon the double assigning of width/height and anchors is probably the issue, in this case, only 1 rectangle should have left and right anchors, and the rest only 1, to make this work.

It is not a problem of inefficiency but of "easy to use".
With QML I always try to use "KISS" principle (Keep It Stupid Simple).
Of course, you can use anchors, but using RowLayout/ColumnLayout, the anchors and spacer are set automatically and you can change item order without having to change/set any anchors.

personally I disagree, I can much easier visualise my Ui with, manually setting anchors and and width/height than using magic layouts.

Also they are an other dependency that gets pulled into your project, so I tend to avoid it for that reason as well :D

jeremy_k

@YJ-Kim said in QML Anchor problem:

@KroMignon @GrecKo Thank you very much for telling me other alternatives!

But apart from my code being inefficient, I would like to know why this code is not working as I expected.

The blue rectangle doesn't have a width, and only has one of the two horizontal anchors. width will default to implicitWidth, which is 0 for Rectangle.

The other 3 rectangles have an explicit width, and in the case of the red Rectangle, both right and left anchors.

KroMignon

@J-Hilk said in QML Anchor problem:

personally I disagree, I can much easier visualise my Ui with, manually setting anchors and and width/height than using magic layouts.

hmm, I don't know if it made a big difference using anchors or layout "magic".
But this is the beauty of programming, there are many ways to achieve the same task ;)

Also they are an other dependency that gets pulled into your project, so I tend to avoid it for that reason as well :D

Maybe, I never try to find out if using Layouts will increase application dependencies.
For me, combining RowLayout/ColumnLayout with Layout.fillWidth, Layout.fillHeight, etc., is simplifying my QML code (which I also code by hand and not with designer).

It is only a question of taste :D