QT implementation of the list of small functions infinite load (creative very good: listen to scroll bar events, to the bottom of the new Qlistwidgetitem)

Concept Introduction

The combination of infinite load and waterfall flow is very novel in the development of Web front-end, and it has good performance form for Web content. Infinite loading does not load all the content at once, but instead refreshes the content by listening to the ScrollBar event. When the user drags the scroll bar down or uses the mouse wheel, the page automatically loads the rest of the content. As follows:

Simplicity and not simple, it is this ingenuity, break through the conventional design to get the favor of users ...

Implementation ideas

In front-end development You can use some jquery plug-ins to achieve this effect, the background only need to prepare the data on the line. How do you add this effect to the list component (Qlistwidget,qtreewidget, qtablewidget) or try (Qlistview, Qtreeview, Qtableview) in QT? The core principle of infinite loading above is to use JavaScript to listen to the browser's scrollbar events. It's easy to do so in Qt. We know that there is a base class in Qt called Qabstractscrollarea, which is an abstract base class that represents a scrollable region. Therefore, there are many methods in this class that are related to scroll bar operations. Qabstractscrollarea happens to be the parent of Q*view, which gives us an opportunity to manipulate the scroll bar.

Create a new form-based QT application project and derive a subclass from Qlistwidget: Mlistwidget. Why is it? Because we are going to do a little bit of a different action on the mouse wheel event: When the scroll bar scrolls, the current position of the scrollbar is updated in the Lineedit of the main window, and when the scroll bar is scrolled to the bottom, a signal is sent to update the data contents in Listwidget.

12345678910111213141516171819202122232425262728293031323334353637

// mlistwidget.hclassMListWidget : publicQListWidget{    Q_OBJECTpublic:    MListWidget(QWidget *parent);    ~MListWidget();signals:    voidmsliderChanged(intp);    voidreachedBottom();privateslots:    voidonSliderChanged(intp);    private:    QScrollBar* m_vscrollBar;};// mlistwidget.cppMListWidget::MListWidget(QWidget *parent)    : QListWidget(parent){    m_vscrollBar = verticalScrollBar(); // 保持垂直滚动条    connect(m_vscrollBar, SIGNAL(valueChanged(int)), this, SLOT(onSliderChanged(int)));}void MListWidget::onSliderChanged(intp){    intstartRow = count();    if(p == m_vscrollBar->maximum())    {        //QMessageBox::information(this, "Warning", "You reached the bottom of the vertical scroll bar!");        emit reachedBottom(); // 1    }    emit msliderChanged(p);  // 2}

Note 1 sends a signal reachedbottom (), notifies the main form to add new content to listwidget, and the signal at note 2 informs the main form to update the current position value of the scroll bar.

Next is the implementation of the main form:

1234567891011121314151617181920212223242526272829303132333435363738394041424344454647484950515253

// testscrollbar.hclassTestScrollBar : publicQMainWindow{    Q_OBJECTpublic:    TestScrollBar(QWidget *parent = 0);    ~TestScrollBar();private slots:    voidonScrollBarMoved(int);    voidonReachedBottom();private:    Ui::TestScrollBarClass ui;};// testscrollbar.cppTestScrollBar::TestScrollBar(QWidget *parent)    : QMainWindow(parent){    ui.setupUi(this);    QListWidgetItem* temp;    for(inti = 0; i < 100; i++)    {        temp = newQListWidgetItem();        temp->setText("zhangzhongke_"+QString::number(i));        ui.listWidget->insertItem(i, temp);    }     connect(ui.listWidget, SIGNAL(msliderChanged(int)), this, SLOT(onScrollBarMoved(int)));    connect(ui.listWidget, SIGNAL(reachedBottom()), this, SLOT(onReachedBottom()));}voidTestScrollBar::onScrollBarMoved(intv){    ui.lineEdit->setText(QString::number(v));}//  更新ListWidget中的内容，插入新数据到最后voidTestScrollBar::onReachedBottom(){    QListWidgetItem* temp;    int startRow = ui.listWidget->count();    for(inti = startRow; i < startRow+5; i++)    {        temp = newQListWidgetItem();        temp->setText("hello_"+QString::number(i));        ui.listWidget->insertItem(i, temp);    }}

Here you derive a new subclass from Qlistwidget, and remember to promote the Qlistwidget component in UI Designer (promote). In promote to ... When filling out our derived sub-class Mlistwidget.

Actual effect

When the mouse scrolls to the bottom, insert 5 data at a time.

Qt-vs-addin's little problem.

When you use Visual Studio for QT development, you need to install a plugin. Sometimes, however, some of the tools of this plugin are somehow invalidated:

Where Qt5appwrapper.exe is used to edit the UI files in Qt Engineering, that is, QT Designer;qt5rceditor.exe is used to edit QT resource files. At this point, the VS does not open properly, and reported as the error. For specific reasons do not know what the fix method is as follows:

Right-click the *.ui file or *.QRC file in the project, select "Open With ...", and click the "Add ..." button, select the installation directory of Qt-vs-addin, and locate the two executable files listed above:

At this point, the addition is complete. Remember to set the newly added program as the default, which is the default open tool.

Reference

• Combination of waterfall flow and infinite load case: http://down.admin5.com/demo/code_pop/18/745/

Http://www.cnblogs.com/csuftzzk/p/qt_infinitescroll.html

QT implementation of the list of small functions infinite load (creative very good: listen to scroll bar events, to the bottom of the new Qlistwidgetitem)