QML Slider регулирует прямоугольник

Question

У меня есть несколько вопросов, так как я новичок в qml. У меня есть простой интерфейс, где я хочу, чтобы ползунок регулировал размер прямоугольника (который в конечном итоге будет значком SVG). Вопросы под изображением:

1. При настройке ползунка он правильно меняет размер синего прямоугольника, однако как я могу сделать так, чтобы он правильно изменял размер зеленого ограничивающего прямоугольника, чтобы охватить его? Это должно выглядеть примерно так, как на картинке ниже. В настоящее время эскиз превышает границы зеленого прямоугольника. Если это помогает, комбинированный список может иметь статическую ширину 150.

2. Как я могу сделать так, чтобы синий прямоугольник всегда был выровнен по центру? Кажется, он всегда привязан к верхнему левому углу.

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

• Во-первых, вы не можете использовать свойства "ширина" и "высота" внутри макета, поэтому вам нужно использовать "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
    }
}