Qt实现小功能之列表无限加载(创意很不错:监听滚动条事件,到底部的时候再new QListWidgetItem)
概念介绍
无限加载与瀑布流的结合在Web前端开发中的效果非常新颖,对于网页内容具备较好的表现形式。无限加载并没有一次性将内容全部加载进来,而是通过监听滚动条事件来刷新内容的。当用户往下拖动滚动条或使用鼠标滚轮的时候,页面会自动加载剩余的内容。如下:
简约而不简单,正是这种别出心裁,突破常规的设计才能得到用户的青睐……
实现思路
在前端开发可以使用一些jQuery插件实现这种效果,后台只需要准备好数据就行了。在Qt中如何给列表组件(QListWidget,QTreeWidget, QTableWidget)或试图(QListView, QTreeView, QTableView)添加这样的效果呢?上面的无限加载的核心原理其实就是使用javascript侦听浏览器的滚动条事件。那么在Qt里面这样做就简单了。我们知道Qt中有一个基类叫做QAbstractScrollArea,它是一个代表可滚动区域的抽象基类。因此,这个类中有许多和滚动条操作相关的方法。QAbstractScrollArea恰好又是Q*View的父类,这正好为我们提供了操作滚动条的机会。
新建一个基于窗体的Qt应用程序工程,并从QListWIdget派生出一个子类:MListWidget。为什么呢?因为我们打算对鼠标滚轮事件作出一点点不一样的动作:当滚动条滚动的时候在主窗口的lineEdit中更新滚动条的当前位置;当滚动条滚到最底端的时候发送一个信号,以此更新ListWidget中的数据内容。
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
|
// mlistwidget.h class MListWidget : public QListWidget { Q_OBJECT public : MListWidget(QWidget *parent); ~MListWidget(); signals: void msliderChanged( int p); void reachedBottom(); private slots: void onSliderChanged( int p); private : QScrollBar* m_vscrollBar; }; // mlistwidget.cpp MListWidget::MListWidget(QWidget *parent) : QListWidget(parent) { m_vscrollBar = verticalScrollBar(); // 保持垂直滚动条 connect(m_vscrollBar, SIGNAL(valueChanged( int )), this , SLOT(onSliderChanged( int ))); } void MListWidget::onSliderChanged( int p) { int startRow = 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 } |
注释1处发送了一个信号reachedBottom(),通知主窗体给ListWidget添加新的内容;注释2处的信号通知主窗体更新滚动条的当前位置值。
接下来是主窗体的实现:
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
|
// testscrollbar.h class TestScrollBar : public QMainWindow { Q_OBJECT public : TestScrollBar(QWidget *parent = 0); ~TestScrollBar(); private slots: void onScrollBarMoved( int ); void onReachedBottom(); private : Ui::TestScrollBarClass ui; }; // testscrollbar.cpp TestScrollBar::TestScrollBar(QWidget *parent) : QMainWindow(parent) { ui.setupUi( this ); QListWidgetItem* temp; for ( int i = 0; i < 100; i++) { temp = new QListWidgetItem(); 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())); } void TestScrollBar::onScrollBarMoved( int v) { ui.lineEdit->setText(QString::number(v)); } // 更新ListWidget中的内容,插入新数据到最后 void TestScrollBar::onReachedBottom() { QListWidgetItem* temp; int startRow = ui.listWidget->count(); for ( int i = startRow; i < startRow+5; i++) { temp = new QListWidgetItem(); temp->setText( "hello_" +QString::number(i)); ui.listWidget->insertItem(i, temp); } } |
这里从QListWidget中派生出了一个新的子类,记得在UI designer中对QListWidget组件进行提升(promote)。在Promote to...的时候填写我们派生出来的子类MListWidget。
实际效果
鼠标滚动到底部的时候,每次插入5条数据。
参考
- 瀑布流与无限加载的结合案例:http://down.admin5.com/demo/code_pop/18/745/
http://www.cnblogs.com/csuftzzk/p/qt_infinitescroll.html
Qt实现小功能之列表无限加载(创意很不错:监听滚动条事件,到底部的时候再new QListWidgetItem)的更多相关文章
- Qt实现小功能之列表无限加载
概念介绍 无限加载与瀑布流的结合在Web前端开发中的效果非常新颖,对于网页内容具备较好的表现形式.无限加载并没有一次性将内容全部加载进来,而是通过监听滚动条事件来刷新内容的.当用户往下拖动滚动条或使用 ...
- Ajax做列表无限加载和Ajax做二级下拉选项
//栏目Ajax做加载 public function ajaxlist(){ //echo "http://www.域名.com/index.php?a=Index&c=Index ...
- 在线配置热加载配置 go-kratos.dev 监听key
paladin https://v1.go-kratos.dev/#/config-paladin example Service(在线配置热加载配置) # service.go type Servi ...
- Vue中实现一个无限加载列表
参考 https://www.jianshu.com/p/0a3aebd63a14 一个需要判断的地方就是加载中再次触发滚动的时候,不要获取数据. <!DOCTYPE html> < ...
- h5页面列表滚动加载数据
h5列表滚动加载数据很常见,以下分享下今天做的案例: 前言 这个效果实现需要知道三个参数 1. scrollTop -- 滚动条距离顶部的高度 2. scrollHeight -- 当前页面的总高度( ...
- Vue.js 开发实践:实现精巧的无限加载与分页功能
本篇文章是一篇Vue.js的教程,目标在于用一种常见的业务场景--分页/无限加载,帮助读者更好的理解Vue.js中的一些设计思想.与许多Todo List类的入门教程相比,更全面的展示使用Vue.js ...
- JS实现-页面数据无限加载
在手机端浏览网页时,经常使用一个功能,当我们浏览京东或者淘宝时,页面滑动到底部,我们看到数据自动加载到列表.之前并不知道这些功能是怎么实现的,于是自己在PC浏览器上模拟实现这样的功能.先看看浏览效果: ...
- JRoll 2 使用文档(史上最强大的下拉刷新,滚动,无限加载插件)
概述 说明 JRoll,一款能滚起上万条数据,具有滑动加速.回弹.缩放.滚动条.滑动事件等功能,兼容CommonJS/AMD/CMD模块规范,开源,免费的轻量级html5滚动插件. JRoll第二版是 ...
- 通过angularjs的directive以及service来实现的列表页加载排序分页
前两篇:(列表页的动态条件搜索,我是如何做列表页的)分别介绍了我们是如何做后端业务系统数据展示类的列表页以及动态搜索的,那么还剩下最重要的一项:数据展示.数据展示一般包含三部分: 数据列头 数据行 分 ...
随机推荐
- View的绘制顺序
1.写在 super.onDraw() 的下面 把绘制代码写在 super.onDraw() 的下面,由于绘制代码会在原有内容绘制结束之后才执行,所以绘制内容就会盖住控件原来的内容. 2.写在 sup ...
- [STM32] IAP不能跳转到APP
用w5500做网页iap升级, 文件上传正确, 对比内部flash内容也正确, 就是不跳转. 查资料, 怀疑是中断的影响. 在跳转前关闭中断, 问题解决! // IAP程序使用了中断, 跳转前关闭 _ ...
- python 强制类型转换 以及 try expect
强制类型转换: 字符串 --> 整型: 字符串 第一个 是 + 或者 - ,会直接去掉 符号 ,返回 数字 如: a = '+123456' s = int(a) print(s) s ...
- VC除零异常(错误)捕获
// testFinally.cpp : Defines the entry point for the console application. // #include "stdafx.h ...
- 嵌入式开发(*(volatile unsigned long *)) 认识
一个.说明 (*(volatile unsigned long *)) 这个语句对于不同的计算机体系结构,设备可能是port映射,也可能是内存映射的. 假设系统结构支持独立的IO地址空间.而且是por ...
- 大班模型行为PK(总结)
行为类模式包括责任链模式.命令模式.解释器模式.迭代模式.中介模式.备忘录模式.观察者模式.State模式.策略模式.模板方法.Visitor模式,我去,许多.. .主要有以下挑几个easy混乱和控制 ...
- 【Android先进】如何使用数据文件来保存程序
在程序,有许多方法来存储和检索数据,本文,它描述了如何使用文件系统来保存数据编程和读取操作 我直接写了一个帮助类,进行文件的写入和读取操作 /** * 用于在文件里保存程序数据 * * @author ...
- JAVA实现黑客帝国代码雨效果
import java.awt.*; import java.awt.event.ActionEvent; import java.awt.event.ActionListener; import j ...
- jquery 调用js成员
<!DOCTYPE html><html lang="en" xmlns="http://www.w3.org/1999/xhtml"> ...
- HTTP协议学习 - 9 Method Definitions
# 前言 官方文档简略翻译.9 不是代表第九篇,而是在 RFC2616 中是第九篇.重要加粗,龟速翻译. # Method 9.3 GET The GET method means retrieve ...