Question

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

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

// ...
// ..

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

滑块最大值错误

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

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

最小值：-

最小值

最大值：-

最大值

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

QML滑块调整矩形

2 个答案: