Back to Qt.io
Contact Us Blog Download Qt

Tumbler QML Type

Drehbares Rad mit auswählbaren Elementen. Mehr...

Import Statement: import QtQuick.Controls
Inherits:

Control

Eigenschaften

Beigefügte Eigenschaften

Methoden

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

Detaillierte Beschreibung

Tumbler {
    model: 5
    // ...
}

Tumbler ermöglicht es dem Benutzer, eine Option aus einem drehbaren "Rad" von Elementen auszuwählen. Es ist nützlich, wenn es zu viele Optionen gibt, um z. B. RadioButton zu verwenden, und zu wenige Optionen, um die Verwendung einer editierbaren SpinBox zu erfordern. Es ist insofern praktisch, als es keine Tastaturbedienung erfordert und bei einer großen Anzahl von Einträgen an jedem Ende umbricht.

Die API ähnelt der von Ansichten wie ListView und PathView; es können model und delegate gesetzt werden, und die Eigenschaften count und currentItem bieten einen Nur-Lese-Zugriff auf Informationen über die Ansicht. Um die Ansicht bei einem bestimmten Index zu positionieren, verwenden Sie positionViewAtIndex().

Im Gegensatz zu Ansichten wie PathView und ListView gibt es jedoch immer ein aktuelles Element (wenn das Modell nicht leer ist). Das heißt, wenn count gleich 0 ist, wird currentIndex zu -1. In allen anderen Fällen wird es größer oder gleich 0 sein.

Standardmäßig gibt Tumbler wraps ein, wenn es den oberen und unteren Rand erreicht, solange es mehr Elemente im Modell gibt als sichtbare Elemente, d.h. wenn count größer als visibleItemCount ist:

import QtQuick
import QtQuick.Window
import QtQuick.Controls

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

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

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

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

Siehe auch Anpassen von Tumbler und Input Controls.

Eigenschaft Dokumentation

count : int [read-only]

Diese Eigenschaft enthält die Anzahl der Elemente im Modell.


currentIndex : int

Diese Eigenschaft enthält den Index des aktuellen Elements.

Der Wert dieser Eigenschaft ist -1, wenn count gleich 0 ist. In allen anderen Fällen ist er größer als oder gleich 0.

Siehe auch currentItem und positionViewAtIndex().


currentItem : Item [read-only]

Diese Eigenschaft enthält das Element mit dem aktuellen Index.

Siehe auch currentIndex und positionViewAtIndex().


delegate : Component

Diese Eigenschaft enthält den Delegaten, der zur Anzeige der einzelnen Elemente verwendet wird.


model : variant

Diese Eigenschaft enthält das Modell, das Daten für diesen Becher bereitstellt.


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

Diese Eigenschaft beschreibt, ob sich der Tumbler gerade bewegt, weil der Benutzer ihn entweder zieht oder anklickt.

Diese Eigenschaft wurde in QtQuick.Controls 2.2 (Qt 5.9) eingeführt.


visibleItemCount : int

Diese Eigenschaft speichert die Anzahl der sichtbaren Elemente im Tumbler. Sie muss eine ungerade Zahl sein, da das aktuelle Element immer vertikal zentriert ist.


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

Diese Eigenschaft bestimmt, ob der Tumblr oben oder unten ankommt oder nicht.

Der Standardwert ist false, wenn count kleiner als visibleItemCount ist, da es einfacher ist, mit einem nicht umlaufenden Tumbler zu interagieren, wenn es nur wenige Elemente gibt. Um dieses Verhalten außer Kraft zu setzen, setzen Sie explizit den Wert dieser Eigenschaft. Um zum Standardverhalten zurückzukehren, setzen Sie diese Eigenschaft auf undefined.

Diese Eigenschaft wurde in QtQuick.Controls 2.1 (Qt 5.8) eingeführt.


Dokumentation der angehängten Eigenschaft

Tumbler.displacement : real [read-only]

Diese Attached-Eigenschaft enthält einen Wert von -visibleItemCount / 2 bis visibleItemCount / 2, der angibt, wie weit dieses Element vom aktuellen Element entfernt ist, wobei 0 das vollständig aktuelle Element ist.

Das folgende Element ist beispielsweise zu 40 % undurchsichtig, wenn es nicht das aktuelle Element ist, und wird zu 100 % undurchsichtig, wenn es das aktuelle Element wird:

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

Tumbler.tumbler : Tumbler [read-only]

Diese angehängte Eigenschaft enthält den Tumbler. Die Eigenschaft kann an einen Tumblr-Delegaten angehängt werden. Der Wert lautet null, wenn das Element kein Tumblr-Delegat ist.


Dokumentation der Methode

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

Positioniert die Ansicht so, dass sich die index an der durch mode angegebenen Position befindet.

Zum Beispiel:

positionViewAtIndex(10, Tumbler.Center)

Wenn wrap wahr ist (die Vorgabe), sind die Modi verfügbar, die für die Funktion PathView's positionViewAtIndex() verfügbar sind, andernfalls sind die Modi verfügbar, die für die Funktion ListView's positionViewAtIndex() verfügbar sind.

Hinweis: Es gibt die bekannte Einschränkung, dass die Verwendung von Tumbler.Beginning, wenn wrap gleich true ist, dazu führt, dass das falsche Element am oberen Rand der Ansicht positioniert wird. Um dies zu umgehen, übergeben Sie index - 1.

Diese Methode wurde in QtQuick.Controls 2.5 (Qt 5.12) eingeführt.

Siehe auch currentIndex.


© 2025 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.