设置RowLayout的最大宽度

Question

我正在尝试构建一个自定义控件，可以将其他控件（

Button

、

Slider

、编辑字段等）分组在一起。

控件应出现在窗口的右侧，并且应具有固定的

width

200

。这很好用：

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

现在，问题出在我在

MyControl

中使用的布局和控件。 我使用的是

Rectangle

，其中有

ColumnControl

，并且在

ColumnControl

中嵌套了 GroupBox（请参阅下面的代码）。

在其中一个

GroupBox

中，我想连续放置几个

Button

，所以我使用了

RowLayout

（我也尝试了

Row

，结果相同）。如果我只将两个或三个

Button

排成一行，

Button

就会被拉伸以填充整个宽度，一切都很好。但是当我使用更多

Button

时，它们不会缩小到某个尺寸以下。相反，

RowLayout

向右增长，并且某些

Button

不可见，因为它们位于窗口之外。

似乎

RowLayout

首先计算其子级的大小，然后调整自身的大小。现在我想要的是

RowLayout

固定到父级

width

并且子级缩小以适合父级。

我设法通过解决方法做到了这一点，但我对此并不满意。一定有更优雅的方式。我还尝试将

width

的

RowLayout

设置为

parent.width

但出现了绑定循环。一切看起来都很好，但我不想编写以几个警告开头的代码。

这是控件的代码：

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

上设置的其他约束。特别是在implicitWidth

的

Item下尺寸绝对不会缩水。

因此，在这种情况下，您可以通过设置较小的

implicitWidth

来解决问题，如下所示：

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

或者，您可以定义一个自定义

ButtonStyle

，它定义一个大小合适的

label

，但在这种特定情况下，它确实听起来有点过分了。

还可以看看这个答案（或SO上的其他资源），以更好地掌握布局/大小调整。