QML: динамические объекты

Стоит достаточно простая задача: по нажатию мыши добавлять новый прямоугольник на рабочее поле.



Наша основная функция - Qt.createComponent() .
Именно она позволяет добавлять новые объекты к уже существующим. Как оно работает? Создадим простое приложение, дабы сразу опробовать всё это барахло на практике.
Создадим "Приложение Qt Quick". В файле main.qml внесём следующие изменения:

import QtQuick 1.1
Rectangle {
    id: mainRec
    width: 480
    height: 480
    MouseArea
    {
        id: mArea
        anchors.fill: parent
        onClicked:
        {
            var component = Qt.createComponent("KnowledgeItem.qml");
            if (component.status == Component.Ready) {
                var childRec = component.createObject(mainRec);
                childRec.x = mArea.mouseX - (childRec.width / 2);
                childRec.y = mArea.mouseY - (childRec.height / 2);
            }
        }
    }
}

Суть в следующем: Мы создаём прямоугольник размером 480 на 480. Внутри него мы создаём область обработки действий мыши ( MouseArea), и обрабатываем у неё лишь одно событие: onClicked.

Внутри этого события мы создаем (добавляем) новый компонент, и если компонент создался, создаём объект, и задаем его координаты ( а чтобы центр объекта совпадал с положением мыши, делаем маленькую математическую операцию в виде вычитания половины размера из координат).

Как можно понять из исходного кода, нам не хватает файла объекта KnowledgeItem.qml.

Чтобы он выделялся, да и выглядел впринципе прилично, сделаем его так:

import QtQuick 1.1
Rectangle {
    id: knItem
    width: 100
    height: 62
    color: "red"
    radius: 15
    border.width: 2
    border.color: "black"
}

Запускайте и радуйтесь. :)