Important: Please read the Qt Code of Conduct - https://forum.qt.io/topic/113070/qt-code-of-conduct

What's wrong with alignment?



  • 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!


  • Moderators

    @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 ;}
                }
            }
    

  • Moderators

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



  • @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)


  • Moderators

    @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



  • @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
               }
           }
       }
    

  • Moderators

    @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 ;}
                }
            }
    


  • @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.


  • Moderators

    @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 }
            }
    }
    


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

    Looks something wrong with "Layout.fillWidth" property.



  • @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.


  • Moderators

    @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.


Log in to reply