IdentifiantMot de passe
Loading...
Mot de passe oublié ?Je m'inscris ! (gratuit)

ScrollView QML Type

Scrollable view.

This type was introduced in Qt 5.9.

Article lu   fois.

L'auteur

Liens sociaux

Viadeo Twitter Facebook Share on Google+   

ScrollView QML Type

  • Import Statement: import QtQuick.Controls 2.5

  • Since: Qt 5.9

  • Inherits: Pane

  • Group: ScrollView is part of qtquickcontrols2-containers, qtquickcontrols2-focusscopes

Detailed Description

ScrollView provides scrolling for user-defined content. It can be used to either replace a Flickable, or to decorate an existing one.

Image non disponible

The first example demonstrates the simplest usage of ScrollView.

 
Sélectionnez
ScrollView {
    width: 200
    height: 200
    clip: true

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

ScrollView does not automatically clip its contents. If it is not used as a full-screen item, you should consider setting the clip property to true, as shown above.

The second example illustrates using an existing Flickable, that is, a ListView.

 
Sélectionnez
ScrollView {
    width: 200
    height: 200

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

Sizing

As with Flickable, there are several things to keep in mind when using ScrollView:

  • If only a single item is used within a ScrollView, the content size is automatically calculated based on the implicit size of its contained item. However, if more than one item is used (or an implicit size is not provided), the contentWidth and contentHeight properties must be set to the combined size of its contained items.

  • If the content size is less than or equal to the size of the ScrollView, it will not be flickable.

Scroll Bars

The horizontal and vertical scroll bars can be accessed and customized using the ScrollBar.horizontal and ScrollBar.vertical attached properties. The following example adjusts the scroll bar policies so that the horizontal scroll bar is always off, and the vertical scroll bar is always on.

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

Touch vs. Mouse Interaction

On touch, ScrollView enables flicking and makes the scroll bars non-interactive.

Image non disponible

When interacted with a mouse device, flicking is disabled and the scroll bars are interactive.

Image non disponible

Scroll bars can be made interactive on touch, or non-interactive when interacted with a mouse device, by setting the interactive property explicitly to true or false, respectively.

 
Sélectionnez
ScrollView {
    // ...
    ScrollBar.horizontal.interactive: true
    ScrollBar.vertical.interactive: true
}

See Also

Property Documentation

 

contentChildren : list<Item>

This property holds the list of content children.

The list contains all items that have been declared in QML as children of the view.

Unlike contentData, contentChildren does not include non-visual QML objects.

See Also

contentData : list<Object>

This property holds the list of content data.

The list contains all objects that have been declared in QML as children of the view.

Unlike contentChildren, contentData does include non-visual QML objects.

See Also

Vous avez aimé ce tutoriel ? Alors partagez-le en cliquant sur les boutons suivants : Viadeo Twitter Facebook Share on Google+