Important: Please read the Qt Code of Conduct - https://forum.qt.io/topic/113070/qt-code-of-conduct

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



  • 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


  • Moderators

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


  • 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


  • Moderators

    @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


  • Moderators

    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



  • 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


  • Moderators

    @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 😏



  • Ü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?


  • Moderators

    @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?