Button sizes in layout
-
wrote on 29 Jan 2019, 13:56 last edited by
Hi
I have a row layout containing a set of buttons.
I would like these buttons to be of equal size but cant see a way of doing this.
Does anyone know how I can do this?Code
Rectangle { color: "transparent" RowLayout { Label { id: label text: qsTr("Status") font.pointSize: 12 } RoundButton { id: roundButton2 text: "Engage" Layout.fillWidth: true font.pointSize: 12 width: 80 } RoundButton { id: roundButton text: "Disengage" Layout.fillWidth: true font.pointSize: 12 width: 80 } RoundButton { id: roundButton1 text: "Reset" Layout.fillWidth: true font.pointSize: 12 width: 80 } } width: childrenRect.width height: childrenRect.height }
-
Hi
I have a row layout containing a set of buttons.
I would like these buttons to be of equal size but cant see a way of doing this.
Does anyone know how I can do this?Code
Rectangle { color: "transparent" RowLayout { Label { id: label text: qsTr("Status") font.pointSize: 12 } RoundButton { id: roundButton2 text: "Engage" Layout.fillWidth: true font.pointSize: 12 width: 80 } RoundButton { id: roundButton text: "Disengage" Layout.fillWidth: true font.pointSize: 12 width: 80 } RoundButton { id: roundButton1 text: "Reset" Layout.fillWidth: true font.pointSize: 12 width: 80 } } width: childrenRect.width height: childrenRect.height }
wrote on 29 Jan 2019, 14:16 last edited by ODБOïhi,
@GrahamLa said in Button sizes in layout:I would like these buttons to be of equal size but cant see a way of doing this
that should be the default behavior when you use Qt Quick Layouts
dont assign width and height directly to the buttons, use Layout.height, Layout.width like in the example.
edit: tought it was custom type made by you
What is RoundButton.qml content ? -
wrote on 29 Jan 2019, 15:08 last edited by
Hi
Thanks for your answer, that was how I was expecting it to work
But my buttons are still not the same size
Updated codeRectangle { color: "transparent" RowLayout { id: rowLayout spacing: 10 Label { id: label text: qsTr("Label") Layout.fillWidth: true } RoundButton { text: "Engage" Layout.fillHeight: true Layout.fillWidth: true } RoundButton { text: "Disengage" Layout.fillHeight: true Layout.fillWidth: true } RoundButton { text: "Reset" Layout.fillHeight: true Layout.fillWidth: true } } }
-
Hi
Thanks for your answer, that was how I was expecting it to work
But my buttons are still not the same size
Updated codeRectangle { color: "transparent" RowLayout { id: rowLayout spacing: 10 Label { id: label text: qsTr("Label") Layout.fillWidth: true } RoundButton { text: "Engage" Layout.fillHeight: true Layout.fillWidth: true } RoundButton { text: "Disengage" Layout.fillHeight: true Layout.fillWidth: true } RoundButton { text: "Reset" Layout.fillHeight: true Layout.fillWidth: true } } }
Output
-
Hi
Thanks for your answer, that was how I was expecting it to work
But my buttons are still not the same size
Updated codeRectangle { color: "transparent" RowLayout { id: rowLayout spacing: 10 Label { id: label text: qsTr("Label") Layout.fillWidth: true } RoundButton { text: "Engage" Layout.fillHeight: true Layout.fillWidth: true } RoundButton { text: "Disengage" Layout.fillHeight: true Layout.fillWidth: true } RoundButton { text: "Reset" Layout.fillHeight: true Layout.fillWidth: true } } }
Output
@GrahamLa
I usually dont use Layout's in QML - I like to manage my anchors and sizes by hand, don't judge me ;-) - but seems like this propertiesLayout.fillWidth: true
Layout.preferredWidthare what you're looking for.
Set it the same for each button and make sure the choosen width is actually big enough to fit the largest (the one with the longest text) button.
-
wrote on 30 Jan 2019, 16:50 last edited by
I solved this by using Rectangle instead of a layout
Thanks for the replies
1/6