Как добавить элемент в макет столбца с помощью JavaScript - PullRequest
Новая
       10

Как добавить элемент в макет столбца с помощью JavaScript

0 голосов
/ 02 июня 2018

Я хочу добавить объекты в макет qml Column динамически, но не могу понять, как это сделать.

Итак, для простого примера, давайте предположим, что нам нужно добавить какой-то новый объект встолбец нажатием первого прямоугольника.Два других только для некоторого объема.

Вот некоторый код: 

import QtQuick 2.9
import QtQuick.Window 2.2

ApplicationWindow {
    width: 360
    height: 360
    visible: true
    id: root


    Item {
        id: itemRef
        width: 310; height: 170

        Column {
            id: columnRef
            anchors.horizontalCenter: parent.horizontalCenter
            anchors.verticalCenter: parent.verticalCenter

            spacing: 5

            Rectangle { color: "lightblue"; radius: 10.0
                        width: 300; height: 50
                        Text { anchors.centerIn: parent
                               font.pointSize: 24; text: "Press me" }
                        MouseArea{
                            anchors.fill: parent
                            onClicked: {
                                var component = Qt.createComponent("Sprite.qml");
                                if (component.status === Component.Ready){
                                    sprite = component.createObject(columnRef);
                                }
                            }
                        }
            }
            Rectangle { color: "gold"; radius: 10.0
                        width: 300; height: 50
                        Text { anchors.centerIn: parent
                               font.pointSize: 24; text: "1" } }
            Rectangle { color: "lightgreen"; radius: 10.0
                        width: 300; height: 50
                        Text { anchors.centerIn: parent
                               font.pointSize: 24; text: "2" } }
        }
    }
}

А Sprite.qml просто: 

import QtQuick 2.9

Item {
    Rectangle { width: 300; height: 50; color: "red" }
}

Я не хочу делатьэто с использованием listmodel и listview.Есть ли простой способ создать элемент из файла qml, а затем добавить его в столбец?

1 Ответ

0 голосов
/ 02 июня 2018

У вас есть пара проблем в вашем коде: вы используете sprite в качестве переменной, пока она не определена.Он должен быть объявлен как var в вашем java-скрипте.

Во-вторых, ваш sprite.qml создает Item, который не ожидается в качестве дочернего элемента в вашем Column макете.Так что вам нужно только определить rectangle внутри sprite.qml, исправляя эти проблемы, вы получите новый прямоугольник, как и ожидалось

Bonus : если вы хотите правильно рендериться при повторении нажатий, вынужно следить за высотой вашего контейнера Item, чтобы убедиться, что он может содержать вновь созданные прямоугольники.так что вы можете добавить в свой скрипт что-то вроде этого: itemRef.height = itemRef.height + sprite.height

Правильный код может выглядеть следующим образом: 

...
onClicked: {
    var component;
    var sprite;
    component = Qt.createComponent("Sprite.qml");
    if (component.status === Component.Ready){
        sprite = component.createObject(columnRef);
        itemRef.height = itemRef.height + sprite.height
    }
}
...

и sprite.qml 

import QtQuick 2.9
Rectangle { color: "red"; radius: 10.0
            width: 300; height: 50
            Text { anchors.centerIn: parent
                   font.pointSize: 24; text: "new" } }

Результат:

enter image description here

...