设置 RowLayout 的最大宽度

Question

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

控件应出现在 window 的右侧，并且应具有 200 的固定 width。这很好用：

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

现在问题出在我在 MyControl 中使用的布局和控件上。我正在使用一个 Rectangle 和一个 ColumnControl 并且在 ColumnControl 中嵌套了 GroupBoxes（见下面的代码）。

在其中一个 GroupBox 中，我想连续放置几个 Button，所以我使用 RowLayout（我也试过 Row，相同结果）。如果我只连续放置两个或三个 Buttons，Buttons 会被拉伸以填满整个宽度，一切都很好。但是当我使用更多 Buttons 时，它们不会缩小到一定大小以下。相反，RowLayout 向右增长，一些 Button 不可见，因为它们位于 window.

之外

似乎 RowLayout 会先计算其子项的大小，然后再自行调整大小。现在我想要的是 RowLayout 固定到父级 width 并且子级缩小以适合父级。

我设法通过解决方法做到了这一点，但我对此并不满意。必须有更优雅的方式。我还尝试将 RowLayout 的 width 设置为 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 确保 Buttons 增长或收缩以填充可用的 space.然而，这种行为并不是任意的。它遵循 Item 上设置的其他约束。特别是在 Item 的 implicitWidth 下尺寸永远不会缩小。

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

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

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

另请参阅（或 SO 上的其他资源）以更好地了解 layouts/sizing。

设置 RowLayout 的最大宽度

Set maximum width for RowLayout

qml

qt5

qtquick2