QML Items an einem ?Grid? anhäften und verschieben

Slash200

Hallo,

ich suche eine Möglichkeit QML Items (welche zur Laufzeit instaziiert werden) an einem Grid anordnen zu können wie bei einem Android oder IOS Launcher.
Diese sollen sich dann auch an den gewünschten Positionen im Grid fangen.
Prima wäre wenn jemand ein Beispiel hätte. Ich habe leider nichts passendes gefunden.

VG

J.Hilk

@Slash200
Die beste Option hier, ist mit einem ListModel und einem GridView zu arbeiten, sowas wie in diesem Beispiel:

Window
{
    visible: true
    width: 640
    height: 480
    title: qsTr("Hello World")
    color: "white"
    id: win

    Button{
        id: addButton
        text: qsTr("AddComponent")

        anchors{
            left: parent.left
            right: parent.right
            top: parent.top
        }
        height:  50

        onClicked: addComponent()
    }

    function getRandomInt(max) {
      return Math.floor(Math.random() * Math.floor(max));
    }

    function addComponent() {
        var c = ("#%1%2%3").arg( getRandomInt(99) ).arg(getRandomInt(99)).arg(getRandomInt(99))
        myModel.append({"colorProp": c})
    }

    ListModel {
            id: myModel
        }

    GridView{
        id: grid
        cellWidth: width / 2; cellHeight: 80
        anchors {
            left: parent.left
            right: parent.right
            bottom: parent.bottom
            top: addButton.bottom
        }

        model: myModel

        delegate: Rectangle {
            width: grid.cellWidth;
            height: grid.cellHeight
            color: colorProp

            Text {
                anchors.centerIn: parent
                text: index
            }
        }
    }
}

Slash200

Danke J.Hilk für die schnelle Antwort.
Aber wie kann ich ein Item dragable machen, so dass ich es verschieben kann innerhalb des Grid auf andere Zellen?

VG

J.Hilk

@Slash200
tja, das habe ich jetzt gerade nicht zur hand, und ist auch nicht so trivial das Beispiel zu erweitern,

aber das Wiki hat nen passenden Artikel mit Beispiel code.
Solltest du relative einfach kombinieren können :D
https://wiki.qt.io/Drag_and_Drop_within_a_GridView

J.Hilk

Ok, hatte etwas Zeit übrig und ich wollte selbst wissen wie man sowas machen würde:

Hier ist nen Beispiel:
https://github.com/DeiVadder/DynamicDragDropGridView

Slash200

Wow das ist fast genauso wie ich mir das vorgestellt habe. Danke für das Beispiel und mega dass du das so schnell umsetzen konntest. Mein Ziel wäre es das nur noch so zu machen dass man die Items noch frei auf eine Zelle Positionieren kann. Also dass nicht alle Zellen davor gefüllt sein müssen

J.Hilk

@Slash200 viele Wege führen nach Rom, jetzt sind wir schon soweit mit dem GridView, da machen wir hier weiter.

ich würde empfehlen, dann vorweg das ListModel zu befühlen mit dummy items und die dann auszutauschen gegen richtige

hab das Beispiel geupdated, musst nur noch AddComponent Funktionalität mit einfügen.
https://wiki.qt.io/Drag_and_Drop_within_a_GridView

Kann dir aber nicht alles machen, sonst muss ich anfangen eine Gage zu verlangen 😏

Slash200

Über das Thema Gage können wir uns gern Unterhalten 😅😅
Der Ansatz mit dem GridView gefällt mir eigtl sehr gut, aber der Weg aber das Model mit Dummys zu befüllen ist schon etwas umständlich. Ein nachträgliches Einfügen von Items bringt dann jedes mal die ganze Anordnung durcheinander da die Items sich ja gegenseitig "Verdrängen". Gibt es in QML eine View die das freie einfügen von Items in eine Zelle ermöglicht, ohne dass die vorherigen Zellen ein Item haben?

J.Hilk

@Slash200

Gibt es in QML eine View die das freie einfügen von Items in eine Zelle ermöglicht, ohne dass die vorherigen Zellen ein Item haben?

Nein, nicht das ich es kennen würde. Da musst du dir was eigenes Schreiben, was sich die Postion von allem Items merkt und ach entsprechend neu positioniert, wenn sich die Fenstergröße ändert zum Beispiel.

Übrigens, hab das Beispiel erweitert über den "Add" Knopf kann man jetzt eines der freien "Dummy"-Elemente ersetzen

Hattest du dir das so gedacht?