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!
-
@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
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 exampleColumnLayout { 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)
-
@r3d9u11
if you take a look in the documentation
https://doc.qt.io/qt-5/qml-qtquick-layouts-rowlayout.html#detailsyou 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 } } }
-
@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.
-
@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.
-
@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.