ScrollIndicator QML Type

Vertikale oder horizontale nicht-interaktive Bildlaufanzeige. Mehr...

• Liste aller Mitglieder, einschließlich geerbter Mitglieder

Eigenschaften

• active : bool
• horizontal : bool (since QtQuick.Controls 2.3 (Qt 5.10))
• minimumSize : real (since QtQuick.Controls 2.4 (Qt 5.11))
• orientation : enumeration
• position : real
• size : real
• vertical : bool (since QtQuick.Controls 2.3 (Qt 5.10))
• visualPosition : real (since QtQuick.Controls 2.4 (Qt 5.11))
• visualSize : real (since QtQuick.Controls 2.4 (Qt 5.11))

Beigefügte Eigenschaften

• horizontal : ScrollIndicator
• vertical : ScrollIndicator

Detaillierte Beschreibung

ScrollIndicator ist ein nicht-interaktiver Indikator, der die aktuelle Bildlaufposition anzeigt. Ein ScrollIndicator kann entweder vertical oder horizontal sein und kann mit jedem Flickable verbunden werden, wie ListView und GridView.

Flickable {
    // ...
    ScrollIndicator.vertical: ScrollIndicator { }
}

Anhängen von ScrollIndicator an ein Flickable

• orientation
• position
• size
• active

Ein angehängter ScrollIndicator ordnet sich selbst dem Ziel-Flickable zu. Ein vertikal angehängter ScrollIndicator passt seine Größe an die Höhe des Flickable an und positioniert sich auf der Grundlage von layout direction auf beiden Seiten desselben. Ein horizontal angehängter ScrollIndicator passt seine Größe an die Breite des Flickable an und positioniert sich am unteren Rand. Die automatische Geometrieverwaltung kann deaktiviert werden, indem ein anderes übergeordnetes Element für den angehängten ScrollIndicator angegeben wird. Dies kann z. B. nützlich sein, wenn der ScrollIndicator außerhalb eines Clipping Flickable platziert werden soll. Dies wird anhand des folgenden Beispiels demonstriert:

Flickable {
    id: flickable
    clip: true
    // ...
    ScrollIndicator.vertical: ScrollIndicator {
        parent: flickable.parent
        anchors.top: flickable.top
        anchors.left: flickable.right
        anchors.bottom: flickable.bottom
    }
}

Binden des aktiven Zustands von horizontalen und vertikalen Scrollindikatoren

Horizontale und vertikale Scroll-Indikatoren teilen standardmäßig nicht den Status active miteinander. Um beide Indikatoren beim Scrollen in eine der beiden Richtungen sichtbar zu halten, müssen Sie eine wechselseitige Bindung zwischen den aktiven Zuständen herstellen, wie im folgenden Beispiel dargestellt:

Flickable {
    anchors.fill: parent

    contentWidth: parent.width * 2
    contentHeight: parent.height * 2

    ScrollIndicator.horizontal: ScrollIndicator { id: hbar; active: vbar.active }
    ScrollIndicator.vertical: ScrollIndicator { id: vbar; active: hbar.active }
}

Nicht verbundene Bildlaufindikatoren

Es ist möglich, eine Instanz von ScrollIndicator zu erstellen, ohne die API für angehängte Eigenschaften zu verwenden. Dies ist nützlich, wenn das Verhalten des angehängten Scrollindikators nicht ausreicht oder eine Flickable nicht verwendet wird. Im folgenden Beispiel werden horizontale und vertikale Bildlaufindikatoren verwendet, um anzuzeigen, wie weit der Benutzer über den Text gescrollt hat (unter Verwendung von MouseArea anstelle von Flickable):

Rectangle {
    id: frame
    clip: true
    width: 160
    height: 160
    border.color: "black"
    anchors.centerIn: parent

    Text {
        id: content
        text: "ABC"
        font.pixelSize: 169

        MouseArea {
            id: mouseArea
            drag.target: content
            drag.minimumX: frame.width - width
            drag.minimumY: frame.height - height
            drag.maximumX: 0
            drag.maximumY: 0
            anchors.fill: content
        }
    }

    ScrollIndicator {
        id: verticalIndicator
        active: mouseArea.pressed
        orientation: Qt.Vertical
        size: frame.height / content.height
        position: -content.y / content.height
        anchors { top: parent.top; right: parent.right; bottom: parent.bottom }
    }

    ScrollIndicator {
        id: horizontalIndicator
        active: mouseArea.pressed
        orientation: Qt.Horizontal
        size: frame.width / content.width
        position: -content.x / content.width
        anchors { left: parent.left; right: parent.right; bottom: parent.bottom }
    }
}

Siehe auch ScrollBar, Customizing ScrollIndicator und Indicator Controls.

Eigenschaft Dokumentation

Dokumentation der Eigenschaft Attached

Flickable {
    contentWidth: 2000
    ScrollIndicator.horizontal: ScrollIndicator { }
}

Flickable {
    contentHeight: 2000
    ScrollIndicator.vertical: ScrollIndicator { }
}