What's wrong with alignment?

r3d9u11

Hello, everyone!
Could somebody explain what is wrong with code below, please?
Why the "Right Button" is still displaying on the left side?

import QtQuick 2.15
import QtQuick.Window 2.15
import QtQuick.Layouts 1.12
import QtQuick.Controls 2.12

Window {
    width: 640
    height: 480
    visible: true
    title: qsTr("Hello World")
    ColumnLayout {
        anchors.fill: parent
        RowLayout {
            Button { text: qsTr("Left Button");  Layout.alignment: Qt.AlignLeft  }
            Button { text: qsTr("Right Button"); Layout.alignment: Qt.AlignRight }
        }
    }
}

Thanks!

J.Hilk

@r3d9u11 Actually, correct me if I'm wrong, I think what you want is some kind of spacer item ?

ColumnLayout {
            anchors.fill: parent
            RowLayout {
                Layout.fillWidth: true
                Button { text: qsTr("Left Button");  Layout.alignment: Qt.AlignLeft; }
                Item {
                    // spacer item
                    Layout.fillWidth: true
                    Layout.fillHeight: true
                    Rectangle { anchors.fill: parent; color: "#ffaaaa" } // to visualize the spacer
                }
                Button { text: qsTr("Right Button"); Layout.alignment: Qt.AlignRight ;}
            }
        }

raven-worx

@r3d9u11
because your RowLayout (inside the ColumnLayout) is missing a width or "Layout.fillWidth: true", thus it has the minimal size

r3d9u11

@raven-worx
I'm afraid no, for example

ColumnLayout {
        anchors.fill: parent
        RowLayout {
            Rectangle { Layout.fillWidth: true; height: 50; color: "red" }
        }
    }

will draw rectangle to whole width of application's window

And even with "Layout.fillWidth: true" nothing changed:

ColumnLayout {
        anchors.fill: parent
        RowLayout {
            Layout.fillWidth: true
            Button { text: qsTr("Left Button");  Layout.alignment: Qt.AlignLeft  }
            Button { text: qsTr("Right Button"); Layout.alignment: Qt.AlignRight }
        }
    }

the "Right Button" is still on the left side

Something wrong with Qt ? (I'm on 5.15.2)

J.Hilk

@r3d9u11
if you take a look in the documentation
https://doc.qt.io/qt-5/qml-qtquick-layouts-rowlayout.html#details

you will see, that Components inside the Layout can, or better should have one or more of those properties.

Without them the Layout does not know how to arrange them

You Buttons only have Layout.alignment set, no width, no height, no implicit width to height no fill width and height

r3d9u11

@J-Hilk
Looks like problem not with Layout and(or) child Items size. But with nested Layouts.
For example this qml works fine:

ColumnLayout {
        anchors.fill: parent
        //RowLayout {
            //Layout.fillWidth: true
            Button { text: qsTr("Left Button");  Layout.alignment: Qt.AlignLeft  }
            Button { text: qsTr("Right Button"); Layout.alignment: Qt.AlignRight }
        //}
    }

Ok, just for experiment I've defined some of these properties, and nothing changes with positioning.
Right button is still on the left side:

ColumnLayout {
       anchors.fill: parent
       RowLayout {
           Layout.fillWidth: true
           Button {
               Layout.minimumWidth: 100
               Layout.preferredWidth: 200
               Layout.preferredHeight: 100
               text: qsTr("Left Button");
               Layout.alignment: Qt.AlignLeft
           }
           Button {
               Layout.minimumWidth: 100
               Layout.preferredWidth: 200
               Layout.preferredHeight: 100
               text: qsTr("Right Button");
               Layout.alignment: Qt.AlignLeft
           }
       }
   }

J.Hilk

@r3d9u11 Actually, correct me if I'm wrong, I think what you want is some kind of spacer item ?

ColumnLayout {
            anchors.fill: parent
            RowLayout {
                Layout.fillWidth: true
                Button { text: qsTr("Left Button");  Layout.alignment: Qt.AlignLeft; }
                Item {
                    // spacer item
                    Layout.fillWidth: true
                    Layout.fillHeight: true
                    Rectangle { anchors.fill: parent; color: "#ffaaaa" } // to visualize the spacer
                }
                Button { text: qsTr("Right Button"); Layout.alignment: Qt.AlignRight ;}
            }
        }

r3d9u11

@J-Hilk
Yeah, the workaround with one spacer works fine.
Thank you!

Spacer is doing the job even if alignment is not setted obviously:

RowLayout {
            Button { text: qsTr("Left Button") }
            Item { Layout.fillWidth: true }
            Button { text: qsTr("Right Button") }
        }

But I still don't understand the logic of alignment inside a nested layout (because, as I showed, example with non-nested layout works fine).

Looks like a bug.

raven-worx

@r3d9u11
strange. Layout.fillWidth: true in the RowLayout should work, cant tell you why it doesn't.
This works though:

ColumnLayout {
        anchors.fill: parent
        RowLayout {
            Layout.minimumWidth: parent.width
            Button { text: qsTr("Left Button");  Layout.alignment: Qt.AlignLeft  }
            Button { text: qsTr("Right Button"); Layout.alignment: Qt.AlignRight }
        }
}

r3d9u11

@raven-worx Thank you!
This solution works fine, too.
And looks a bit better.

Looks something wrong with "Layout.fillWidth" property.

r3d9u11

@raven-worx
Note for "Layout.minimumWidth: parent.width": I was found another strange behavior: if width of application's window was increased (for example from 1024 to 1280), and returned back (from 1280 to 1024), then "minimumWidth" sill have maximum size (1280).

So, all Controls on the right side will disappear (because their positions are out of application's width).

I don't know why, looks like another bug.

So, there is one acceptable solution: workaround with additional control Spacer.

raven-worx

@r3d9u11
and when you bind the row layout's width to the parent width?

RowLayout {
   width: parent.width
   ...
}

So, all Controls on the right side will disappear (because their positions are out of application's width).
I don't know why, looks like another bug.

Not a bug, the minimumWidth will rise, but never shrink.