Qt Quick Exemples - Positionneurs

Positionneurs est une collection de petits exemples QML relatifs aux positionneurs. Chaque exemple est un petit fichier QML mettant l'accent sur un type ou une caractéristique particulière. Pour plus d'informations, consultez la page Concepts importants à l'adresse Qt Quick - Positionnement.

Exécution de l'exemple

Pour exécuter l'exemple à partir de Qt Creatorouvrez le mode Welcome et sélectionnez l'exemple à partir de Examples. Pour plus d'informations, voir Qt Creator: Tutorial : Construire et exécuter.

Transitions

Transitions montre des transitions animées lors de l'affichage ou du masquage d'éléments dans un positionneur. Il s'agit d'une scène peuplée d'éléments placés dans différents positionneurs : Column, Row, Grid, et Flow. Chaque positionneur possède des animations décrites comme des transitions.

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

La transition de déplacement 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 d'ajout spécifie comment les éléments apparaissent lorsqu'ils sont ajoutés à un positionneur.

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

La transition de remplissage spécifie comment les éléments apparaîtront lorsque leur positionneur parent est créé pour la première fois.

Propriétés attachées

AttachedProperties montre comment la propriété attached du positionneur peut être utilisée pour déterminer l'emplacement d'un élément dans 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