Question

I'm trying to build a custom control where I can place other controls (Buttons, Sliders, edit fields, etc.) grouped together.

The control should appear on the right side of the window and should have a fixed width of 200. This works fine:

RowLayout {
    Item {
        Layout.fillWidth: true
    }
    MyControl {
        Layout.fillHeight: true
        Layout.preferredWidth: 200
    }
}

Now the problem is with the layouts and controls I used inside MyControl. I'm using a Rectangle with a ColumnControl in it and in the ColumnControl nested the GroupBoxes (see code below).

In one of the GroupBoxes I want to place several Buttons in a row so I am using a RowLayout (I tried Row also, same result). If I only put two or three Buttons in a row the Buttons get stretched to fill the entire width and everything is fine. But when I use more Buttons, they are not shrinked below a certain size. Instead the RowLayout grows to the right and some of the Buttons are not visible since they are positioned outside the window.

It seems that the RowLayout calculates the size of it's children first and then resizes itself. Now what I want is that the RowLayout is fixed to the parent width and the children are shrinked to fit into the parent.

I managed to do that with a workaround but I'm not happy with that. There must be a more elegant way. I also tried to set the width of the RowLayout to the parent.width but got binding loops. Everything looked fine but I don't want to write code which starts with a couple of warnings.

Here's the code of the control:

Rectangle {
    id: rootRect

    ColumnLayout {
        anchors.fill: parent
        spacing: 4

        GroupBox {
            Layout.fillWidth: true
            title: "GroupBox Title"

            RowLayout {
                id: buttonGroupWithWorkaround
                enabled: false
                anchors.fill: parent

                //the workaround:
                property int numberOfButtons: 6
                property int buttonWidth: (rootRect.width - 2 * buttonGroupWithWorkaround.spacing) / numberOfButtons - buttonGroupWithWorkaround.spacing

                Button {
                    Layout.preferredWidth: buttonGroupWithWorkaround.buttonWidth
                    text: "|<"
                }
                Button {
                    Layout.preferredWidth: buttonGroupWithWorkaround.buttonWidth
                    text: "<<"
                }
                Button {
                    Layout.preferredWidth: buttonGroupWithWorkaround.buttonWidth
                    text: "<"
                }
                Button {
                    Layout.preferredWidth: buttonGroupWithWorkaround.buttonWidth
                    text: ">"
                }
                Button {
                    Layout.preferredWidth: buttonGroupWithWorkaround.buttonWidth
                    text: ">>"
                }
                Button {
                    Layout.preferredWidth: buttonGroupWithWorkaround.buttonWidth
                    text: ">|"
                }
            }
        }

        GroupBox {
            Layout.fillWidth: true
            title: "NextGroupBox Title"

            RowLayout {
                id: theButtonGroup
                enabled: false
                anchors.fill: parent

                Button {
                    //this doesn't work
                    Layout.fillWidth: true
                    text: "|<"
                }
                Button {
                    Layout.fillWidth: true
                    text: "<<"
                }
                Button {
                    Layout.fillWidth: true
                    text: "<"
                }
                Button {
                    Layout.fillWidth: true
                    text: ">"
                }
                Button {
                    Layout.fillWidth: true
                    text: ">>"
                }
                Button {
                    Layout.fillWidth: true
                    text: ">|"
                }
            }
        }

        GroupBox {
            Layout.fillWidth: true
            title: "OtherGroupBox Title"
            //some other controls
        }
    }
}

Answer 1

尺寸调整有时候有点棘手。

fillWidth确保Button 增长或缩小以填充可用空间。但是，这种行为并不是随意的。它遵循Item上设置的其他约束。特别是在Item的{{3}}下，大小永远不会缩小。

因此，在这种情况下，您可以通过设置较小的implicitWidth来解决问题，如下所示：

Button {
    Layout.fillWidth: true
    text: ">"
    implicitWidth: 20     // the minimum width will be 20!
}

或者，您可以定义一个自定义ButtonStyle，它定义了一个大小合适的implicitWidth但在这种特定情况下听起来确实有些过分。

还要查看label（或SO上的其他资源），以便更好地掌握布局/尺寸。

Set maximum width for RowLayout

1 个答案: