QML Slider adjusting rectangle

Question

I have a few questions here, as I'm new to qml. I have a simple interface where I want the slider to adjust the size of the Rectangle (which will eventually be an svg icon). Questions below the image:

1. When adjusting the slider, it properly changes the blue rectangle size, however how can i make it properly auto-resize the green bounding rectangle to encompass it? It should look something like the image below. Currently the thumbnail exceeds the bounds of the green rect. If it helps the combobox can have a static width of 150.

2. How can i make the blue rectangle always be vertically center aligned? It appears to always be anchored to the top left.

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

• The first thing is you cannot use the properties "width" and "height" inside a layout, so you need to use "Layout.preferredWidth" and "Layout.preferredHeight".
• So you need to make the following changes inside your code:-

// ...
// ...

    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
              }

// ...
// ..

• I guess you are even facing the problem when you move the slider to the maximum value, the blue rectangle moves out of its parent which is the lightgreen rectangle.(Below Image)

Slider Max Value Error

So if you make the changes as told above this issue will also be resolved.

• Once you make the changes, here is the sample output:-

Minimum Value:-

Minimum Value

Maximum Value:-

Maximum Value

Answer 2

Is that what you want:

QML code:

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