import QtQuick
import QtQuick.Controls
import QtQuick.Layouts

Window {
    id: root

    width: 640
    height: 480
    visible: true
    title: qsTr("Hello World")

    property int numRectangles: 0

    ColumnLayout {
        RowLayout {
            Button {
                text: "Add"
                onClicked: ++root.numRectangles
            }

            Button {
                text: "Remove"
                onClicked: root.numRectangles = Math.max(0, --root.numRectangles)
            }
        }

        FlexboxLayout {
            wrap: FlexboxLayout.Wrap
            direction: FlexboxLayout.Row
            justifyContent: FlexboxLayout.JustifyStart

            rowGap: 8
            columnGap: 8

            Repeater {
                model: root.numRectangles

                Rectangle {
                    width: 30
                    height: 30
                    color: Qt.rgba(Math.random(),Math.random(),Math.random(),1)
                }
            }
        }

        Rectangle {
            width: 60
            height: 30
            color: "gray"
        }
    }
}