Important: Please read the Qt Code of Conduct - https://forum.qt.io/topic/113070/qt-code-of-conduct

Custom Length of Scrollbar / scrollView in QML / QT



  • Hi I am facing a problem with the length of scrollbar in QML.

    Basically I have two parts in qT, In c ++ i am making a model and that model is displayed in qml listview.

    In c++ mDataIn consists of 40 elements. mDataOut fetches elemnts from mDataIn and passes to QML model.

    mDataOut or mDataModel is used as model for QML listview. In QML, On scrolling down the list it detects that list is at bottom and a dedicate function from c++ is called which fetches 10 more items to QstringList.

    So everything till here works.

    My problem starts when i want to make the length of scroll bar in respect to 40 items i.e. original size. Currently list view scrollbar is dependent on model used in listview.

    I know it is default but what should i do in order to make scrollbar length independent of model used in listview.

    Here I want that scrollbar size remains of 40 items as per mDatIn and Listview display as per mDataOut i.e. 10 elements. Also, In listview (qml) as soon as scrollbar reaches on 10th element of the listview the extract function is called and the listview model increase to 20 and so on.

    subfile.h

    #include <QObject>
    #include <QQmlApplicationEngine>
    
    class SubFile : public QObject
    {
        Q_OBJECT
    public:
        explicit SubFile(QObject *parent = nullptr);
        bool initialize();
    
        Q_INVOKABLE void extract();
    
    private:
        void fill();
        void reset();
    
        int mCount;
    
        QStringList mDataIn;
        QStringList mDataOut;
        QQmlApplicationEngine mEngine;
    };
    

    subfile.cpp

    #include <QQmlContext>
    #include <QDebug>
    #include "subfile.h"
    
    SubFile::SubFile(QObject *parent) : QObject(parent)
    {
        fill();
        mCount = 0;
        extract();
    }
    
    
    bool SubFile::initialize()
    {
        mEngine.rootContext()->setContextProperty("SubFileModel",this);
    
        mEngine.load(QUrl(QStringLiteral("qrc:/main.qml")));
        if (mEngine.rootObjects().isEmpty()){
            return false;
        }else{
            return true;
        }
    }
    
    
    
    void SubFile::fill()
    {
        for (int i = 0; i < 40 ; i++)
        {
                mDataIn.append("No " + QString::number(i));
        }
    }
    
    void SubFile::extract()
    {
        for (int i = mCount; i < (mCount +10); i++)
        {
                mDataOut.append(mDataIn[i]);
        }
    
        mCount += 10;
        reset();
    }
    
    
    
    void SubFile::reset()
    {
        mEngine.rootContext()->setContextProperty("mDataModel",QVariant::fromValue(mDataOut));
    }
    

    main.cpp

    #include <QGuiApplication>
    #include <QQmlApplicationEngine>
    #include "subfile.h"
    
    int main(int argc, char *argv[])
    {
        QCoreApplication::setAttribute(Qt::AA_EnableHighDpiScaling);
    
        QGuiApplication app(argc, argv);
    
        SubFile msubfileModel;
    
        if ( !msubfileModel.initialize())
            return -1;
    
        return app.exec();
    }
    

    main.qml

    import QtQuick 2.12
    import QtQuick.Window 2.12
    import QtQuick.Controls 2.5
    import QtQuick.Layouts 1.12
    
    
    Window {
        visible: true
        width: 640
        height: 480
        title: qsTr("Hello World")
    
        ColumnLayout{
            anchors.fill: parent
    
            ListView{
                id : mListView
                Layout.fillWidth: true
                Layout.fillHeight: true
                model : mDataModel
    
                delegate: Rectangle {
                    height: 90
                    radius: 10
                    color : "white"
                    border.color: "black"
                    width: parent.width
                    RowLayout{
                        anchors.fill: parent
                        anchors.margins: 20
    
                        Text{
                            id:textId1
                            text :modelData
                            Layout.fillWidth: true
                            Layout.maximumWidth: 70
                        }
    
                    }
                }
    
                ScrollBar.vertical: ScrollBar {
                    id: scrollBar2
                    anchors.bottom:  parent.bottom
                    width: 20
                    height: 15
                    active: true
                    visible:parent.moving?true:true
                    contentItem: Rectangle {
                        id:contentItem_rect2
                        radius: implicitHeight/2
                        color: "Red"
                    }
    
                }
    
                onContentYChanged: {
    
                    if ((contentY === contentHeight - height)){
                        SubFileModel.extract();
                    }
                }
    
            }
        }
    
    }
    

Log in to reply