qml - 设置 RowLayout 的最大宽度

Question

我正在尝试构建一个自定义控件，我可以将其他控件(Button s、Slider s、编辑字段等)组合在一起。

控件应该出现在窗口的右侧并且应该有一个固定的 width的 200 .这工作正常:

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

现在问题在于我在 MyControl 中使用的布局和控件。 .
我正在使用 Rectangle与 ColumnControl在其中和 ColumnControl嵌套 GroupBoxes(见下面的代码)。

在 GroupBox 之一中es 我想放几个 Button s 连续，所以我使用 RowLayout (我也试过 Row，结果相同)。如果我只放两三个 Button连续 Button s 被拉伸(stretch)以填充整个宽度，一切都很好。但是当我使用更多 Button s，它们不会缩小到一定尺寸以下。取而代之的是 RowLayout向右增长，一些 Button s 不可见，因为它们位于窗口外。

似乎 RowLayout首先计算它的 child 的大小，然后调整自己的大小。现在我想要的是 RowLayout固定为父 width并且 children 被缩小以适应 parent 。

我设法通过一种解决方法做到了这一点，但我对此并不满意。一定有更优雅的方式。我还尝试设置 width的 RowLayout到 parent.width但有绑定(bind)循环。一切看起来都很好，但我不想编写以几个警告开头的代码。

这是控件的代码:

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 s 增长或缩小以填充可用空间。但是，这种行为不是任意的。它遵循在 Item 上设置的其他约束。 .特别是在 implicitWidth 下，尺寸永远不会缩小。的Item .

因此，在这种情况下，您可以通过设置更小的 implicitWidth 来解决问题。 ， 像这样:

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

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

也看看 this answer (或 SO 上的其他资源)更好地掌握布局/尺寸。