QML: Wie verschieben Sie Elemente in einem grid

Ich habe ein 4x4-raster und ich verbinden wollen, Pfeil-Taste drückt, mit der Bewegung der Elemente innerhalb des Rasters. Wie macht man das?

Hier ist ein Beispiel QML:

import QtQuick 1.1

Rectangle {
    id: main;
    width: 500; height: 500;
    color: "darkgreen";

    property int emptyBlock: 16;

    Grid {
        id: grid16;
        x: 5; y: 5;
        width: 490; height: 490;
        rows: 4; columns: 4; spacing: 5;

        Repeater {
            model: 1;
            Rectangle {
                width: 118; height: 118; color: "darkblue";
            }
        }
    }

    Keys.onRightPressed: pressRight();

    function pressRight() {
        console.log("Left key pressed");
    }

    focus: true;
}

Update 1: Dank sebasgo und alexisdm für die Antworten. Wenn das verschieben innerhalb eines Grids ist nicht so einfach, deshalb haben wir die move transition-Eigenschaft [http://qt-project.org/doc/qt-4.8/qml-grid.html#move-prop]

Update 1, siehe mein Beispiel unten, wo Sie sich bewegen können ein Element auf ein 4x4-grid-Größe.

InformationsquelleAutor Xolve | 2012-07-29

grid qml qt qt-quick

Sollten Sie besser mit einem GridView Element anstelle Ihrer Grid Ansatz.

Diese Weise können Sie es verwenden, ist currentIndex Eigenschaft zu wählen, welches Element zu bewegen, wie dies:

import QtQuick 1.1

Rectangle {
    id: main;
    width: 500; height: 500;
    color: "darkgreen";

    property int emptyBlock: 16;

    GridView {
        id: grid16;
        x: 5; y: 5;
        width: 490; height: 490;

        model: gridModel

        delegate: Component{
          Rectangle {
            width: 118; height: 118; color: "darkblue";
            Text {
              anchors.centerIn: parent
              font.pixelSize: 20
              text: value
            }
          }
        }
    }

    ListModel {
      id: gridModel
      ListElement {value: 1}
      ListElement {value: 2}
      ListElement {value: 3}
      ListElement {value: 4}
    }

    Keys.onRightPressed: {
      gridModel.move(grid16.currentIndex, grid16.currentIndex+1, 1)
    }

    Keys.onLeftPressed: {
      gridModel.move(grid16.currentIndex, grid16.currentIndex-1, 1)
    }

    focus: true;
}

InformationsquelleAutor TheHuge_

3

Grids geben Sie keine Möglichkeit zu manipulieren, um die position der enthaltenen Objekte direkt. Statt Ihre position ist direkt abgeleitet von den körperlich Reihenfolge der Kind-Elemente des Gitters. Es ist kein einfacher Weg , zum Bearbeiten von untergeordneten Elementen in QML dynamisch, so denke ich, sollten Sie aufgeben, die Grid Element, und geben Sie die position der untergeordneten Elemente, die explizit mit der x und y Eigenschaften. Angewendet, um Ihren code könnte dies so Aussehen:
```
Rectangle {
    id: main;
    width: 500; height: 500;
    color: "darkgreen";

    Item {
        x: 5; y: 5;
        width: 490; height: 490;

        Repeater {
            id: pieces
            model: 1;
            Rectangle {
                property int column: 0
                property int row: 0
                x: column * 123
                y: row * 123
                width: 118; height: 118; color: "darkblue";
            }
        }
    }

    Keys.onRightPressed: pressRight();

    function pressRight() {
        console.log("Left key pressed");
        pieces.itemAt(0).column++
    }

    focus: true;
}
```
Update 1:

Netze (in Kombination mit einem Repeater) kann verwendet werden, um zu visualisieren, Modelle, z.B., ein XmlListModel Element oder eine QAbstractItemModel Nachkomme.

Mit move Eigenschaft es ist einfach zu reagieren, um layout-änderungen in der Modell (wenn ein Eintrag entfernt/Hinzugefügt) in einer animierten Weise. Dennoch, die Gegenstände in der Grid angeordnet sind streng in der Reihenfolge der Einträge in der model.

Wenn Sie So wollen, haben die manuelle Kontrolle über die position der einzelnen Elemente, auch im zellulären Aufbau, Verwendung einer Grid ist nicht ratsam.

InformationsquelleAutor sebasgo

Können Sie ändern die Anzahl der Elemente vor dem Element, das Sie verschieben möchten, um die position zu ändern:

import QtQuick 1.1

Rectangle {
    id: main;
    width: 500; height: 500;
    color: "darkgreen";

    property int emptyBlock: 16;

    property int posX: 0;
    property int posY: 0;

    Grid {
        id: grid;
        x: 5; y: 5;
        width: 490; height: 490;
        rows: 4; columns: 4; spacing: 5;

        Repeater {
            id: beforeTheItem
            model: main.posX + parent.columns * main.posY
            Rectangle {
                width: 118; height: 118; color: "transparent";
            }
        }

        Rectangle {
            id:theItem
            width: 118; height: 118; color: "darkblue";
        }
    }

    Keys.onPressed: {
        //To avoid flickering, the item is hidden before the change
        //and made visible again after
        theItem.visible = false;
        switch(event.key) {
        case Qt.Key_Left: if(posX > 0) posX--;
            break;
        case Qt.Key_Right: if(posX < grid.columns - 1) posX++;
            break;
        case Qt.Key_Up: if(posY > 0) posY--;
            break;
        case Qt.Key_Down: if(posY < grid.rows - 1) posY++;
            break;
        }
        theItem.visible = true;
    }

    focus: true;
}

InformationsquelleAutor alexisdm

Nun, mit Qt 5.1 oder oben und GridLayout können Sie verschieben Sie Ihre Objekte ohne Aufwand:

import QtQuick 2.4
import QtQuick.Window 2.2
import QtQuick.Layouts 1.1

Window
{
    visible: true

    MainForm
    {
        GridLayout {
            id: gridLayout
            columns: 3

            property int oneRow: 0
            property int oneCol: 0

            Text { id: one; Layout.row :grid.oneRow; Layout.column: grid.oneCol; text: "My"; font.bold: true; }

            Text { text: "name"; color: "red" }
            Text { text: "is"; font.underline: true }
            Text { text: "not"; font.pixelSize: 20 }
            Text { text: "Ravan"; font.strikeout: true }
        }

        Component.onCompleted:
        {
            gridLayout.oneRow = 1
            gridLayout.oneCol = 2
        }
    }
}

GridLayout nicht unterstützen Modelle. Wenn Sie eine größere raster dann wollen Sie auf jeden Fall nutzen Modelle und wechseln zu müssen GridView.

InformationsquelleAutor Aquarius_Girl

Das GridView ist ein sehr verwirrender monster. Ich habe gerade füllt eine Zeile aus einem gegebenen Modell, das führt zu Verwirrung, da es heißt GRID. Aber es kann immer noch verwendet werden, als eine Feste Größe raster, wie ich in den Beispiel unten. Ein einzelner Platz kann mit den Pfeiltasten bewegt sich auf einem 4x4-size raster.

    GridView {
        id: grid16;
        anchors.fill: parent
        cellWidth:  parent.width  / 2
        cellHeight: parent.height / 2

        model: gridModel

        delegate:
          Rectangle {
            Component.onCompleted: if( index >= 1 ) visible = false
            width: grid16.cellWidth ; height: grid16.cellHeight ; color: "yellow";
            Text {
              anchors.centerIn: parent
              font.pixelSize: 20
              text: value
            }
        }

        move: Transition {
            NumberAnimation { properties: "x,y"; duration: 1000 }
        }
    }

    ListModel {
      id: gridModel
      ListElement {value: 1}
      //Necessary, otherwise the grid will have the dimension 1x1
      ListElement {value: 2}
      ListElement {value: 3}
      ListElement {value: 4}
    }

    Keys.onRightPressed: { gridModel.move(grid16.currentIndex, grid16.currentIndex+1, 1) }
    Keys.onLeftPressed:  { gridModel.move(grid16.currentIndex, grid16.currentIndex-1, 1) }
    Keys.onUpPressed:    { gridModel.move(grid16.currentIndex, grid16.currentIndex-2, 1) }
    Keys.onDownPressed:  { gridModel.move(grid16.currentIndex, grid16.currentIndex+2, 1) }

    focus: true;
}

InformationsquelleAutor user3054986

Schreibe einen Kommentar

Du musst angemeldet sein, um einen Kommentar abzugeben.