ListView and system scrollbar

  • Hi,
    it is possible to use standard Qt/System scrollbar with ListView in QDeclarativeView widget (C++ application) ?
    I already checked QML solution of scrollbar ( but classic scrollbar would be better :)

    Thanks a lot for help!

  • If I understand correctly, you want the scrollbar to have system style instead of the one with custom images, colors etc, right? If that's true then you can create your own scrollbar component with native style in QML by subclassing the QDeclarativeItem and use QStyleOption and QStyle to do drawing. Not so sure but this link may be a good start for you:

  • do you mean you want to scroll whole QML object which is loaded in QDeclarativeView by scrollbars? If yes, since QDeclarativeView resizes automatically when a qml file has loaded, you can make it scrollable by place it in a QScrollArea object.

  • Also you can create object from QDeclarativeComponent and put into QGraphicsView. It will allow you to add system scroolbar.

  • Hi guys, thanks a lot for help.

    ngocketit: I didn't know about these Native widgets, great thing, thanks!

    mohsen: That sounds great for me, at least for now. But probably I did something wrong :)

    little example from my code:

    MainWindow::MainWindow(QWidget *parent) :
    ui(new Ui::MainWindow)

    twitterApi = new TwitterAPI;
    this->model = new TimelineModel(new TimelineItem, this);
    QDeclarativeView *timelineView = new QDeclarativeView(this);
    timelineView->rootContext()->setContextProperty("timelineModel", this->model);
    QScrollArea *scrollArea = new QScrollArea();


    This is what i got:

    With "scrollArea->setWidgetResizable(true);" are listview items painted correctly, but scrollbar don't work correctly (it's disabled) :

    I noticed that QDeclarativeView has settings for QAbstractScrollArea, that sounds promising. But with "ResizeMode QDeclarativeView::SizeRootObjectToView" is scrollbar disabled again.

    With "ResizeMode SizeViewToRootObject" scrollbar works great, but this settings has really bad impact on all others :D

    I think there is needed some changes in my ListView QML component…

    I know it's hard to "guess" what is wrong without context of rest of code, but any clue might help me, thanks!

  • One problem solved.

    with setResizeMode(QDeclarativeView::SizeViewToRootObject); -->
    Top level QML object (Rectangle for example), must have a set some width and height.
    Height should be set as ListView.contentHeight and voila, scrollbar is up and ready :)

    But, it would be really better if RootObject automatically adjusted to size of window :)

  • With knowledge of contentWidth/Height I was able to use ScrollArea from Native Widgets:

    import QtQuick 1.0
    import NativeQuickWidgets 1.0
    import "qrc:/nativequickwidgets"

    Rectangle {
    SystemPalette { id: myPallete; colorGroup: SystemPalette.Active }
    color: myPallete.window

    ScrollArea {
        width: parent.width
        height: parent.height
        autoFillBackground: false
        contentWidth: myItemsView.contentWidth
        contentHeight: myItemsView.contentHeight
        horizontalScrollBarPolicy: Qt.ScrollBarAsNeeded
        verticalScrollBarPolicy: Qt.ScrollBarAlwaysOn
        ListView {
            id: myItemsView
            anchors.fill: parent
            spacing: 5
            model: timelineModel
            delegate: MyItem{}


    But, new problem appeared here, with this case, mouse scroll wheel doesn't work :D Definitely not boring here :)

Log in to reply

Looks like your connection to Qt Forum was lost, please wait while we try to reconnect.