ScrollView QML Type

Scrollbare Ansicht. Mehr...

• Liste aller Mitglieder, einschließlich geerbter Mitglieder

Eigenschaften

• contentChildren : list<Item>
• contentData : list<QtObject>
• effectiveScrollBarHeight : real (since 6.6)
• effectiveScrollBarWidth : real (since 6.6)

Ausführliche Beschreibung

ScrollView bietet einen Bildlauf für benutzerdefinierte Inhalte. Es kann entweder als Ersatz für Flickable verwendet werden, oder um ein bestehendes zu dekorieren.

Das erste Beispiel demonstriert die einfachste Verwendung von ScrollView.

ScrollView {
    width: 200
    height: 200

    Label {
        text: "ABC"
        font.pixelSize: 224
    }
}

Das zweite Beispiel veranschaulicht die Verwendung eines bestehenden Flickable, d.h. eines ListView.

ScrollView {
    width: 200
    height: 200

    ListView {
        model: 20
        delegate: ItemDelegate {
            text: "Item " + index

            required property int index
        }
    }
}

Größenanpassung

Wie bei Flickable gibt es auch bei ScrollView einige Dinge zu beachten:

• Wenn nur ein einzelnes Element innerhalb einer ScrollView verwendet wird, wird die Größe des Inhalts automatisch auf der Grundlage der impliziten Größe des enthaltenen Elements berechnet. Wenn jedoch mehr als ein Element verwendet wird (oder keine implizite Größe angegeben ist), müssen die Eigenschaften contentWidth und contentHeight auf die kombinierte Größe der enthaltenen Elemente gesetzt werden.
• Wenn die Größe des Inhalts kleiner oder gleich der Größe des ScrollViews ist, ist er nicht scrollbar.
• Wenn Sie möchten, dass der ScrollView nur vertikal scrollt, können Sie contentWidth an availableWidth binden (und umgekehrt für contentHeight). Dadurch wird der Inhalt den gesamten verfügbaren Platz innerhalb der ScrollView horizontal ausfüllen, unter Berücksichtigung jeglicher Polsterung oder Bildlaufleisten.

Bildlaufleisten

Die horizontalen und vertikalen Bildlaufleisten können über die angehängten Eigenschaften ScrollBar.horizontal und ScrollBar.vertical aufgerufen und angepasst werden. Im folgenden Beispiel werden die Richtlinien für die Bildlaufleisten so angepasst, dass die horizontale Bildlaufleiste immer ausgeschaltet ist und die vertikale Bildlaufleiste immer eingeschaltet ist.

ScrollView {
    // ...
    ScrollBar.horizontal.policy: ScrollBar.AlwaysOff
    ScrollBar.vertical.policy: ScrollBar.AlwaysOn
}

Berührung vs. Maus-Interaktion

Bei Berührung aktiviert ScrollView das Blättern und macht die Bildlaufleisten nicht interaktiv.

Bei der Interaktion mit einer Maus ist das Blättern deaktiviert und die Bildlaufleisten sind interaktiv.

Die Bildlaufleisten können bei Berührung interaktiv oder bei Interaktion mit einem Mausgerät nicht interaktiv gemacht werden, indem die Eigenschaft interactive explizit auf true bzw. false gesetzt wird.

ScrollView {
    // ...
    ScrollBar.horizontal.interactive: true
    ScrollBar.vertical.interactive: true
}

Siehe auch ScrollBar, ScrollIndicator, Customizing ScrollView, Container Controls und Focus Management in Qt Quick Controls.

Eigenschaft Dokumentation