Qt QML滑块调整矩形

我这里有几个问题，因为我是qml的新手。我有一个简单的界面，我想让滑块调整矩形的大小（最终将成为svg图标）。图片下方的问题：

调整滑块时，它会正确地更改蓝色矩形的大小，但是如何使它正确地自动调整绿色边框的大小以包围它？它应该看起来像下面的图片。当前缩略图超出了绿色矩形的边界。如果有帮助，组合框的静态宽度可以是150

如何使蓝色矩形始终垂直居中对齐？它似乎总是固定在左上角

QML

import QtQuick 2.7
import QtQuick.Controls 2.0
import QtQuick.Layouts 1.3

ColumnLayout {
    anchors.fill: parent

    Flow {
        Layout.fillWidth: true
        spacing: 10

        Repeater {
            model: 5

            Rectangle {
                id: delegateBackground
                width: 200;
                height: contentContainer.height + 10
                border.width: 1
                color: "lightgreen"

                Item {
                    id: contentContainer
                    width: parent.width - 10
                    height: rowContainer.height
                    anchors.centerIn: delegateBackground

                    RowLayout {
                        id: rowContainer
                        width: parent.width

                        Rectangle {
                            id: icon
                            width: thumbnailsize.value
                            height: thumbnailsize.value
                            color: "steelblue"
                            Layout.alignment: Qt.AlignCenter
                        }

                        ComboBox {
                            id: selector
                            Layout.fillWidth: true
                            model: [ "Banana", "Apple", "Coconut" ]
                            Layout.alignment: Qt.AlignCenter
                        }
                    }
                }
            }
        }
    }

    Slider {
        id: thumbnailsize
        from: 16
        value: 48
        to: 64
    }
}

这就是你想要的吗：

QML代码：

ColumnLayout {
    anchors.fill: parent

    Flow {
        Layout.fillWidth: true
        spacing: 10

        Repeater {
            model: 5

            Rectangle {
                id: delegateBackground
                width: 200;
                height: contentContainer.height + 10
                border.width: 1
                color: "lightgreen"

                Item {
                    id: contentContainer
                    width: parent.width - 10
                    height: rowContainer.height
                    anchors.centerIn: delegateBackground

                    RowLayout {
                        id: rowContainer
                        anchors.centerIn: contentContainer
                        height: Math.max(iconContainer.height, selector.height)

                        Item{
                            id: iconContainer
                            width: contentContainer.width - selector.width
                            height: parent.height

                            Rectangle {
                                id: icon
                                width: thumbnailsize.value + selector.width > contentContainer.width ? contentContainer.width - selector.width : thumbnailsize.value
                                height: width
                                color: "steelblue"
                                anchors.centerIn: parent
                            }
                        }

                        ComboBox {
                            id: selector
                            Layout.fillWidth: true
                            model: [ "Banana", "Apple", "Coconut" ]
                            Layout.alignment: Qt.AlignCenter
                        }
                    }
                }
            }
        }
    }

    Slider {
        id: thumbnailsize
        from: 16
        value: 48
        to: 64
    }
}

• 首先，您不能在布局中使用属性“宽度”和“高度”，因此需要使用“layout.preferredWidth”和“layout.preferredHeight”
• 因此，您需要在代码中进行以下更改：-

• 我想，当您将滑块移动到最大值时，您甚至会遇到这个问题，蓝色矩形将移出其父矩形，即浅绿色矩形。（下图）

滑块最大值错误

因此，如果您按照上述说明进行更改，此问题也将得到解决

• 进行更改后，以下是示例输出：-

最小值：-

最小值

最大值：-

最大值

// ...
// ...

    Rectangle {
                id: icon

                Layout.preferredWidth: thumbnailsize.value
                Layout.preferredHeight: thumbnailsize.value
                // #### You can use width and height inside Layouts
    //          width: thumbnailsize.value
    //          height: thumbnailsize.value
                color: "steelblue"
                Layout.alignment: Qt.AlignCenter
              }

// ...
// ..