Qt Quick Exemples - Positionneurs

«Positioners » est une collection de petits exemples QML relatifs aux positionneurs. Chaque exemple est un petit fichier QML mettant en avant un type ou une fonctionnalité particulière. Pour plus d’informations, consultez la section « Concepts importants dans Qt Quick - Positionnement ».

Exécution de l'exemple

Vous pouvez exécuter l'exemple à partir de :

• Qt Creator

  Ouvrez le mode « Welcome » et sélectionnez l’exemple dans « Examples ». Pour plus d’informations, consultez Qt Creator: Tutoriel : Compiler et exécuter.

• Qt Extension for Visual Studio Code

  Exécutez la commande « Qt: Open Qt examples » à partir de Command Palette, puis sélectionnez l’exemple dans la liste. Pour plus d’informations, consultez Qt Extension for Visual Studio Code: Tutoriel : Compiler et exécuter.

Transitions

La section « Transitions » présente des transitions animées lors de l’affichage ou du masquage d’éléments dans un positionneur. Elle se compose d’une scène contenant des éléments placés dans divers positionneurs : Column, Row, Grid et Flow. Chaque positionneur comporte des animations décrites sous le nom de « Transitions ».

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

La transition « move » spécifie comment les éléments à l’intérieur d’un positionneur s’animeront lorsqu’ils seront déplacés par l’apparition ou la disparition d’autres éléments.

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

La transition « add » définit la manière dont les éléments apparaîtront lorsqu’ils seront ajoutés à un positionneur.

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

La transition « populate » spécifie comment les éléments apparaîtront lors de la création initiale de leur positionneur parent.

Propriétés associées

La section «Propriétés associées » montre comment la propriété associée « Positioner » peut être utilisée pour déterminer l’emplacement d’un élément au sein d’un positionneur.

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

Exemple de projet @ code.qt.io