QML滑块调整矩形答案

【问题标题】：QML Slider adjusting rectangleQML滑块调整矩形
【发布时间】：2019-05-29 12:35:57
【问题描述】：

我在这里有几个问题，因为我是 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
    }
}

【问题讨论】：

标签： qt qml

【解决方案1】：

首先你不能在布局中使用属性“width”和“height”，所以你需要使用“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
              }

// ...
// ..

我猜你甚至会在将滑块移动到最大值时遇到问题，蓝色矩形移出其父级，即浅绿色矩形。（下图）

滑块最大值错误

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

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

最小值：-

最小值

最大值：-

最大值

【讨论】：

【解决方案2】：

这是你想要的吗：

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
    }
}

【讨论】：