Qt Quick Beispiele – Positionierer

„Positionierer“ ist eine Sammlung kleiner QML-Beispiele zum Thema Positionierer. 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

Sie können das Beispiel wie folgt ausführen:

• Qt Creator

  Öffnen Sie den „ Welcome “-Modus und wählen Sie das Beispiel unter „ Examples “ aus. Weitere Informationen finden Sie unter „Qt Creator: Tutorial: Erstellen und Ausführen“.

• Qt Extension for Visual Studio Code

  Führen Sie den Befehl „ Qt: Open Qt examples “ aus dem Verzeichnis „ Command Palette “ aus und wählen Sie das Beispiel aus der Liste aus. Weitere Informationen finden Sie unter Qt Extension for Visual Studio Code: Tutorial: Erstellen und Ausführen.

Übergänge

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

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

Der „Move“-Übergang legt fest, wie sich Elemente innerhalb eines Positioners animieren, wenn sie durch das Erscheinen oder Verschwinden anderer Elemente verschoben werden.

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

Der „add“-Übergang legt fest, wie Elemente erscheinen, wenn sie einem Positionierer hinzugefügt werden.

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

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

Angehängte Eigenschaften

„Angehängte Eigenschaften“ zeigt, wie die angehängte Eigenschaft „Positioner“ 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