Qt Quick Beispiele - Positionierer

Positioners ist eine Sammlung von kleinen QML-Beispielen zu Positionierern. Jedes Beispiel ist eine kleine QML-Datei, die einen bestimmten Typ oder eine bestimmte Funktion hervorhebt. Weitere Informationen finden Sie unter Wichtige Konzepte in Qt Quick - Positionierung.

Ausführen des Beispiels

Zum Ausführen des Beispiels von Qt Creatorzu starten, öffnen Sie den Modus Welcome und wählen Sie das Beispiel aus Examples. Weitere Informationen finden Sie unter Erstellen und Ausführen eines Beispiels.

Übergänge

Transitions zeigt animierte Übergänge beim Ein- und Ausblenden von Elementen in einem Positionierer. Es besteht aus einer Szene, die mit Objekten in verschiedenen Positionierern gefüllt ist: Column, Row, Grid und Flow. Jeder Positionierer hat Animationen, die als Übergänge beschrieben werden.

move: Transition {
    NumberAnimation {
        properties: "x,y"
        easing.type: Easing.OutBounce
    }
}

Der Übergang "Verschieben" legt fest, wie Elemente in einem Positionierer animiert werden, wenn sie durch das Erscheinen oder Verschwinden anderer Elemente verschoben werden.

add: Transition {
    NumberAnimation {
        properties: "x,y"
        easing.type: Easing.OutBounce
    }
}

Der Übergang "Hinzufügen" legt fest, wie Elemente erscheinen, wenn sie zu einem Positionierer hinzugefügt werden.

populate: Transition {
    NumberAnimation {
        properties: "x,y"
        from: 200
        duration: 100
        easing.type: Easing.OutBounce
    }
}

Der Übergang populate legt fest, wie Elemente erscheinen, wenn ihr übergeordneter Positionierer zum ersten Mal erstellt wird.

Angehängte Eigenschaften

Attached Properties zeigt, wie die Eigenschaft Positioner attached verwendet werden kann, um zu bestimmen, wo sich ein Element innerhalb eines Positioners befindet.

Rectangle {
    id: green
    color: "#80c342"
    width: 100 * page.ratio
    height: 100 * page.ratio

    Text {
      anchors.left: parent.right
      anchors.leftMargin: 20
      anchors.verticalCenter: parent.verticalCenter
      text: qsTr("Index: %1%2%3").arg(parent.Positioner.index)
                .arg(parent.Positioner.isFirstItem ? qsTr(" (First)") : "")
                .arg(parent.Positioner.isLastItem ? qsTr(" (Last)") : "")
    }

    // When mouse is clicked, display the values of the positioner
    MouseArea {
        anchors.fill: parent
        onClicked: column.showInfo(green.Positioner)
    }
}

Beispielprojekt @ code.qt.io