Sur cette page

Tumbler QML Type

Roue tournante d'éléments pouvant être sélectionnés. Plus d'informations...

Import Statement: import QtQuick.Controls
Inherits:

Control

Propriétés

Propriétés rattachées

Méthodes

  • void positionViewAtIndex(int index, PositionMode mode) (since QtQuick.Controls 2.5 (Qt 5.12))

Description détaillée

Tumbler {
    model: 5
    // ...
}

Tumbler permet à l'utilisateur de sélectionner une option à partir d'une "roue" d'éléments qu'il peut faire tourner. Il est utile lorsqu'il y a trop d'options pour utiliser, par exemple, une page RadioButton, et trop peu d'options pour nécessiter l'utilisation d'une page SpinBox modifiable. Il est pratique car il ne nécessite pas l'utilisation du clavier et s'enroule à chaque extrémité lorsqu'il y a un grand nombre d'éléments.

L'API est similaire à celle des vues telles que ListView et PathView; les propriétés model et delegate peuvent être définies, et les propriétés count et currentItem permettent d'accéder en lecture seule à des informations sur la vue. Pour positionner la vue à un certain index, utilisez positionViewAtIndex().

Contrairement aux vues telles que PathView et ListView, il y a toujours un élément courant (lorsque le modèle n'est pas vide). Cela signifie que lorsque count est égal à 0, currentIndex sera -1. Dans tous les autres cas, il sera supérieur ou égal à 0.

Par défaut, Tumbler wraps atteint le haut et le bas, tant qu'il y a plus d'éléments dans le modèle qu'il n'y a d'éléments visibles, c'est-à-dire lorsque count est supérieur à visibleItemCount:

import QtQuick
import QtQuick.Window
import QtQuick.Controls

Rectangle {
    width: frame.implicitWidth + 10
    height: frame.implicitHeight + 10

    FontMetrics {
        id: fontMetrics
    }

    Component {
        id: delegateComponent

        Label {
            text: formatText(Tumbler.tumbler.count, modelData)
            opacity: 1.0 - Math.abs(Tumbler.displacement) / (Tumbler.tumbler.visibleItemCount / 2)
            horizontalAlignment: Text.AlignHCenter
            verticalAlignment: Text.AlignVCenter
            font.pixelSize: fontMetrics.font.pixelSize * 1.25

            function formatText(count, modelData) {
                var data = count === 12 ? modelData + 1 : modelData;
                return data.toString().length < 2 ? "0" + data : data;
            }
        }
    }

    Frame {
        id: frame
        padding: 0
        anchors.centerIn: parent

        Row {
            id: row

            Tumbler {
                id: hoursTumbler
                model: 12
                delegate: delegateComponent
            }

            Tumbler {
                id: minutesTumbler
                model: 60
                delegate: delegateComponent
            }

            Tumbler {
                id: amPmTumbler
                model: ["AM", "PM"]
                delegate: delegateComponent
            }
        }
    }
}

Voir aussi Personnalisation du culbuteur et Contrôles d'entrée.

Documentation sur les propriétés

count : int [read-only]

Cette propriété contient le nombre d'éléments du modèle.

currentIndex : int

Cette propriété contient l'index de l'élément courant.

La valeur de cette propriété est -1 lorsque count est égal à 0. Dans tous les autres cas, elle sera supérieure ou égale à 0.

Voir aussi currentItem et positionViewAtIndex().

currentItem : Item [read-only]

Cette propriété contient l'élément à l'index actuel.

Voir aussi currentIndex et positionViewAtIndex().

delegate : Component

Cette propriété contient le délégué utilisé pour afficher chaque élément.

Tumbler n'est pas propriétaire du délégué.

flickDeceleration : int

Cette propriété indique la vitesse de décélération d'une pichenette : plus le chiffre est élevé, plus la pichenette ralentit lorsque l'utilisateur arrête de la toucher. Par exemple, 0.0001 est presque "sans friction", et 10000 est plutôt "collant".

Lorsque wrap est vrai (par défaut), le flickDeceleration par défaut est 100. Sinon, cela dépend de la plateforme. Pour remplacer ce comportement, définissez explicitement la valeur de cette propriété. Pour revenir au comportement par défaut, définissez cette propriété à undefined. Les valeurs égales ou inférieures à zéro ne sont pas autorisées.

model : variant

Cette propriété contient le modèle qui fournit les données pour ce gobelet.

moving : bool [since QtQuick.Controls 2.2 (Qt 5.9)]

Cette propriété indique si le gobelet est en train de se déplacer, parce que l'utilisateur l'a fait glisser ou l'a fait basculer.

Cette propriété a été introduite dans QtQuick.Controls 2.2 (Qt 5.9).

visibleItemCount : int

Cette propriété indique le nombre d'éléments visibles dans le tumbler. Il doit s'agir d'un nombre impair, car l'élément en cours est toujours centré verticalement.

wrap : bool [since QtQuick.Controls 2.1 (Qt 5.8)]

Cette propriété détermine si le gobelet s'enroule ou non lorsqu'il atteint le haut ou le bas.

La valeur par défaut est false lorsque count est inférieur à visibleItemCount, car il est plus simple d'interagir avec un gobelet non enveloppant lorsqu'il n'y a que quelques articles. Pour modifier ce comportement, définissez explicitement la valeur de cette propriété. Pour revenir au comportement par défaut, définissez cette propriété à undefined.

Cette propriété a été introduite dans QtQuick.Controls 2.1 (Qt 5.8).

Documentation sur la propriété Attached

Tumbler.displacement : real [read-only]

Cette propriété jointe contient une valeur comprise entre -visibleItemCount / 2 et visibleItemCount / 2, qui représente la distance qui sépare cet élément de l'élément courant, 0 étant l'élément courant à part entière.

Par exemple, l'élément ci-dessous sera opaque à 40 % lorsqu'il n'est pas l'élément courant et passera à 100 % lorsqu'il deviendra l'élément courant :

delegate: Text {
    text: modelData
    opacity: 0.4 + Math.max(0, 1 - Math.abs(Tumbler.displacement)) * 0.6
}

Tumbler.tumbler : Tumbler [read-only]

Cette propriété jointe contient le gobelet. Cette propriété peut être attachée à un délégué au gobelet. La valeur est null si l'élément n'est pas un délégué au culbuto.

Documentation de la méthode

[since QtQuick.Controls 2.5 (Qt 5.12)] void positionViewAtIndex(int index, PositionMode mode)

Positionne la vue de manière à ce que le site index se trouve à la position spécifiée par mode.

Par exemple :

positionViewAtIndex(10, Tumbler.Center)

Si wrap est vrai (par défaut), les modes disponibles pour la fonction positionViewAtIndex() de PathView sont disponibles, sinon les modes disponibles pour la fonction positionViewAtIndex() de ListView sont disponibles.

Remarque : il existe une limitation connue selon laquelle l'utilisation de Tumbler.Beginning lorsque wrap est true entraînera le positionnement du mauvais élément en haut de l'écran. Pour contourner ce problème, passez index - 1.

Cette méthode a été introduite dans QtQuick.Controls 2.5 (Qt 5.12).

Voir aussi currentIndex.

© 2026 The Qt Company Ltd. Documentation contributions included herein are the copyrights of their respective owners. The documentation provided herein is licensed under the terms of the GNU Free Documentation License version 1.3 as published by the Free Software Foundation. Qt and respective logos are trademarks of The Qt Company Ltd. in Finland and/or other countries worldwide. All other trademarks are property of their respective owners.