Qt实现边加载数据边显示页面的示例代码

目录
  • 1.定义显示定时器
    • 1:定义定时器
    • 2:定时器调用
    • 3:定时器加载数据
  • 2.线程加载数据
  • 3.实时呈现加载进度

做过C++开发的人们都知道,无论是MFC框架还是QT框架,实现加载数据的等待效果都是很麻烦的,不像WEB端轻轻松松一句代码就搞定了。而我们这些做C++的,最常用的方法就是开线程了。

刚开始,我也是采用的开线程的方式,但是,想象总是与事实相悖的。

假设页面展示的数据比较多,导致加载页面时间较长,用户体验度很差,点击了触发按钮之后很长时间才会有响应,总让人误会程序死机了,但真正的原因是数据正在加载。

那么,当前页面展示的数据量较多,我们该如何动态的显示边加载数据边显示页面呢?

对于我这种刚从MFC框架转过来的新手来说,确实是一个不小的挑战呢!

那么,我来讲解下我是如何实现的吧!

1.定义显示定时器

想要一打开页面就加载数据,我们需要重写QWidget::show(),开启定时器,并且要立即执行。

1:定义定时器

//.h
#include <QTimer>

QTimer *m_Timer;

//.cpp使用
m_Timer = new QTimer(this);
connect(m_Timer, &QTimer::timeout, this, &QMyWidget::OnTimerLoadData);

2:定时器调用

void QMyWidget::show()
{
    QWidget::show();
    m_timer->start(0);
}

打开页面需要立即执行定时器操作,此时start中的参数=0,表示立即执行。

此时,显示页面已经加载出来了。

因为前面说过了,页面的数据量比较多,不可能显示页面之后处于假死的状态,那么,我们需要加载页面的同时,显示一个gif的等待图标。

这里,我们就需要修改一下show()的函数

void QMyWidget::show()
{
    QWidget::show();
    //页面启动后,直接显示加载gif图片
    gPageManager::instance()->GetDownloadDlg()->SetShowMode(1);
    gPageManager::instance()->GetDownloadDlg()->SetTips("正在加载案例数据,请稍后...");
    gPageManager::instance()->GetDownloadDlg()->show();
    if (m_timer->isActive() == false)
    {
        m_timer->start(0);
    }
}

这里,我用了一个单例类:gPageManager调用具有gif效果图的窗口。

这种方式就可以实现,显示页面以后,直接等待数据加载,防止我们看到假死页面,给用户造成困恼。

这里的gif图片是用一个QLabel承载显示的,方法很多,不过多介绍。

这里提醒的是:在使用QT中的定时器,比较安全的做法是,判断该定时是否处于活跃状态,只有再非活跃状态下才需要触发。这里只做温馨提示哦,个人代码习惯而已~

3:定时器加载数据

当进入定时器之后,进行数据处理。为了防止页面卡顿,此时,在定时器中我们也要重新开启一个线程,用于数据加载。

此时,就会有人想问,当前页面已经开启了一个定时器,为什么还要再创建一个线程呢?

下面我会一一解答的。

在C语言的函数中,运行指定函数中的内容时,只有运行到"}"时,才会显示运行页面。在某个特定的具体处理函数中计算机在处理时属于一个过程处理函数。

所以,才会在一显示页面就开启定时器操作,首先将页面展示给用户,在做其他的数据处理。

那么为什么要在定时器中再开一个线程呢?

主要是因为在show函数中调用了一个动态加载的窗口,假设定时器中直接加载较多数据时,此时,界面也会处于一个卡顿状态,导致GIF等待窗口被卡住。为了防止这种情况出现,我们需要在定时器中继续开一个线程,防止页面卡顿。

void QMyWidget::OnTimerLoadData()
{
    //因为只是在打开页面时加载数据,所以,定时器只需要进行一次即可。
    m_Timer->stop();

    //启动线程,加载数据,具体代码这里不具体说明。

    //数据加载完之后,隐藏GIF动态加载页面
    gPageManager::instance()->GetDownloadDlg()->hide();
}

到这里,打开页面直接显示加载的功能已经完成了,那么该如何实现当前线程呢?

接下来,是我们第二个阶段的内容了~

2.线程加载数据

一般C++的程序员在遇到这种情况时,通常很自然的就想要了,使用线程的方式。

其实,我第一个思路也是使用线程加载数据。但是使用线程必须要考虑到线程存在的弊端,比如说死锁,比如说出现野指针等问题。

在QT中有一种开线程的方式,简单容易上手,这里我还是比较推荐使用的:QtConcurrent::run

该函数的具体讲解这里不做讲解,我们直接使用吧!

首先需要的头文件:

#include <QtConcurrent/QtConcurrentRun>

接下来是调用方式,这里我们定义加载数据的函数名叫做LoadWidgetData()

QFuture<bool> futureResult = QtConcurrent::run(this, &QMyWidget::LoadWidgetData);
while (!futureResult.isFinished())
{
    QApplication::processEvents(QEventLoop::AllEvents);
}

使用这种线程方式的时候,需要注意了,LoadWidgetData函数的返回值一定是true才可以

bool QMyWidget::LoadWidgetData()
{
    //具体的数据加载操作
    return true;
}

线程的加载方式已经介绍完了,到这里,我们已经可以实现一遍加载数据,一遍显示等待GIF效果了。

接下来,我们该实现如何实时呈现加载进度了~

3.实时呈现加载进度

大家都知道,在QT的线程中是无法调用页面操作内容的。

一般情况下的页面操作,比如窗口创建、控件赋值等等都需要在主线程进行,否则会造成崩溃问题。具体原因大家可以查阅资料去。

那么,我们要实现边加载数据边在页面上展示的时候,该如何操作呢?

在这里,我们可以用发消息的方式,在线程中发送消息给主进程,交给主进程处理页面操作

bool QMyWidget::LoadWidgetData()
{
    //1:加载数据内容1,具体实现不说明

    //发送数据内容1对应的页面处理操作
    emit Msg_SendSelfDataProcessing1();

    //...数据加载内容自由发挥,类似于 上面两步骤内容

    return true;
}

代码看起来很好理解,这种方式既保证了数据加载流畅,也不对主页面造成卡顿现象。

到此这篇关于Qt实现边加载数据边显示页面的示例代码的文章就介绍到这了,更多相关Qt内容请搜索我们以前的文章或继续浏览下面的相关文章希望大家以后多多支持我们!

(0)

相关推荐

  • Qt数据库应用之实现数据打印到纸张

    目录 一.前言 二.功能特点 三.体验地址 四.效果图 五.相关代码 一.前言 数据能够打印到pdf文件,当然可以打印到纸张,而且使用qprinter默认就是打印到纸张的,上一篇文章写得功能是打印到pdf,其实还要单独特殊设置打印到文件,并指定格式为pdf.不指定输出文件和格式默认就是打印到纸张,关于Qt打印内容到纸张,网上的办法非常多,比如有些直接用painter绘制,逐步控制分页打印,个人还是喜欢html格式的内容传入,因为html格式相当灵活,可控范围相当大,而且整齐,甚至可以先直接输出到

  • Qt实现数据导出到xls的示例代码

    目录 一.前言 二.功能特点 三.体验地址 四.效果图 五.相关代码 一.前言 导入导出数据到csv由于语法简单,适用场景有限,于是乎还是必须再造一个轮子导出数据到xls,在经历过数十年的项目实战经验中不断调整和优化.尤其记得当初第一个版本v0.01大概在2011年左右完成的,当时是公司项目运行在嵌入式板子上,需要导出警情记录,拷贝到电脑上打印,由于嵌入式根本没有也不可能去安装excel等软件,硬着头皮去研究了xml格式的xls文件,按照那个规则组合成简单的导出数据,这个思路想法理论上比QtXl

  • Qt实现导出QTableWidget/QTableView数据

    目录 一.前言 二.功能特点 三.体验地址 四.效果图 五.相关代码 一.前言 本组件的初衷就是造一个轮子,让数据导入导出用法极致简单,几个行数几行代码搞定它,适用大部分的应用场景,这也是本组件和qtxls最大的区别,qtxls的目标是大而全,提供各种xls的接口,至于如何组织导出的数据,那需要程序员自己去处理,这就避免不了需要调用很多函数代码,而我们往往入门的程序员用起来没那么方便,比如很多人其实就想将现在QTableWidget或者QTableView中的数据导出,也不想去研究如何组织数据,

  • Qt数据库应用之实现数据图文混排

    目录 一.前言 二.功能特点 三.体验地址 四.效果图 五.相关代码 一.前言 除了能够打印基本的文字信息数据到pdf和纸张,越来越多的应用需求还要求能够导出图片,并且要支持图文混排,相当于doc文档类似,当然也不会是太复杂的,类似于打印报表一样,有表格形式的文字描述,也有对应的图片插入其中,图文混排的应用场景还真不少比如医疗行业输出诊断结果往往都带了图片.于是针对这个需求特意开辟了新的类DataCreat专门生成报表的数据,将生成好的数据体直接传入给DataPrint类即可,如果有各种各样的不

  • Qt数据库应用之实现数据的导入与导出

    目录 一.前言 二.功能特点 三.体验地址 四.效果图 五.相关代码 一.前言 在经历过大大小小十几个甚至几十个纯QtWidget项目后,涉及到数据库相关的项目,几乎都有一个需求,将少量的信息数据比如设备信息.防区信息等,导出到文件保存好,然后用户可以打开该表格进行编辑,编辑完成后保存,再重新导入到软件中,这样相当于安排专人录入数据,而不是在软件中一个个新增效率低了些,甚至有些软件运行在嵌入式板子上或者一些特殊场景,不大方便现场添加编辑信息,如果是提供模板之类的让用户添加好,然后再一次性导入,这

  • Qt数据库应用之数据打印到pdf

    目录 一.前言 二.功能特点 三.体验地址 四.效果图 五.相关代码 一.前言 自从数据可以导出到xls,又有客户提出了不同的需求,比如既然可以将数据导出到xls,那是否可以导出到pdf文件呢?因为xls打开以后用户可以修改数据造假之类的,而pdf默认是不可编辑的,除非借助专业的工具,所以如果想要限定用户导出数据不能被更改,那导出pdf是最佳选择.写程序往往都是这样,一步步慢慢增加,随着用户需求的增加,程序量也越来越多,轮子组件也越来越多.往往客户提需求的时候,一定要认真聆听,尤其是一线用户,实

  • Qt实现边加载数据边显示页面的示例代码

    目录 1.定义显示定时器 1:定义定时器 2:定时器调用 3:定时器加载数据 2.线程加载数据 3.实时呈现加载进度 做过C++开发的人们都知道,无论是MFC框架还是QT框架,实现加载数据的等待效果都是很麻烦的,不像WEB端轻轻松松一句代码就搞定了.而我们这些做C++的,最常用的方法就是开线程了. 刚开始,我也是采用的开线程的方式,但是,想象总是与事实相悖的. 假设页面展示的数据比较多,导致加载页面时间较长,用户体验度很差,点击了触发按钮之后很长时间才会有响应,总让人误会程序死机了,但真正的原因

  • jquery Ajax 实现加载数据前动画效果的示例代码

    复制代码 代码如下: $(document).ready(function(){     $.ajax({        type:"get",        cache:false,        url:"ajaxpage.aspx?t=getcity",        dataType:"json",        beforeSend:function(){           $("#vvv").append('&l

  • Bootstrap Table从服务器加载数据进行显示的实现方法

    Bootstrap-Table是一个Boostrap的表格插件,能够将JSON数据直接显示在表格中.当然,这需要配置一些参数并进行初始化表格才行.其官方网站地址为:http://bootstrap-table.wenzhixin.net.cn/.里面可以下载使用所需的JS和CSS文件,以及参考文档和例子. Bootstrap-Table显示数据到表格的方式有两种,一种是客户端(client)模式,一种是服务器(server)模式. 所谓客户端模式,指的是在服务器中把要显示到表格的数据一次性加载出

  • 解决bootstrap-select 动态加载数据不显示的问题

    如下所示: 在使用bootstrap-select 动态加载数据的时候,refresh和render方法是必须使用的,不然就必须使用jquery往li对象里面填充数据,因为在bootstrap-select 中界面显示数据是通过li对象显示的,而select对象只是用于填充数据的,所以不要搞混了 以上这篇解决bootstrap-select 动态加载数据不显示的问题就是小编分享给大家的全部内容了,希望能给大家一个参考,也希望大家多多支持我们.

  • 微信小程序实现触底加载与下拉刷新的示例代码

    目录 触底加载 loader函数思考 loader函数实现 触底加载动画 触底加载的优点 下拉刷新 最后 在最近做小程序的时候有这么一个很常见的需求,加载一个信息列表,要求需要触底加载和下拉刷新,我突然想起来掘金小册界面和这个需求很相似,接下来我给大家介绍一下我的实现方案. 触底加载 步骤如下: 封装一个loader函数 在监听页面加载的时候触发这个loader函数 在监听到触底的时候再次触发这个函数 onLoad: function (options) { this.loadBooks(thi

  • Android 自定义加载动画Dialog弹窗效果的示例代码

    效果图 首先是创建弹窗的背景 这是上面用到的 以shape_bg_5_blue.xml为例,其他的三个无非就是里面的颜色不一样而已 <?xml version="1.0" encoding="utf-8"?> <shape xmlns:android="http://schemas.android.com/apk/res/android"> <corners android:radius="5dp"

  • Vue实现上拉加载下一页效果的示例代码

    之前从来没有单独的做过手机端的网页.当然,之前我也没有独立的从切图到写代码交互做过前端的页面. 这里边的分页还是和响应电脑端的数字分页.但是,其实独立做一个手机端的网站,而不是响应式的网站的时候,这种数字分页看起来可能是不太好. 手机端网站嘛,还是仿照着APP或者是微信小程序那种上拉触底分页比较好.但是,这个玩意怎么实现呢? 第一种想法,监听滚动条,滚动条滚动到页面底部,触发方法,请求接口加载下一页的数据.嗯,应该是可行的,我们来尝试一下: 监听滚动条所在位置的方法如下: /** * @name

  • php+ajax实现无刷新动态加载数据技术

    我们浏览有些网页的时候,当拉动浏览器的滚动条时到页底时,页面会继续自动加载更多内容供用户浏览.这种技术我暂且称它为滚屏加载技术.我们发现很多网站用到这种技术,必应图片搜索.新浪微博.QQ空间等将该技术应用得淋漓尽致. 滚屏加载技术,就是使用Javascript监视滚动条的位置,每次当滚动条到达浏览器窗口底部时,触发一个Ajax请求后台PHP程序,返回相应的数据,并将返回的数据追加到页面底部,从而实现了动态加载,其实就是一个典型的Ajax应用.本文将使用jQuery,结合PHP,mysql以及JS

  • 详解使用Vue.Js结合Jquery Ajax加载数据的两种方式

    整理文档,搜刮出一个使用Vue.Js结合Jquery Ajax加载数据的两种方式的代码,稍微整理精简一下做下分享. 废话不多说,直接上代码 html代码 <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>demo</title> <script src="js/jquery.js"

  • pc加载更多功能和移动端下拉刷新加载数据

    感觉一个人玩lol也没意思了,玩会手机,看到这个下拉刷新功能就写了这个demo! 这个demo写的比较随意,咱不能当做插件使用,基本思想是没问题的,要用就自己封装吧! 直接上代码分析下吧! 布局: <ul class="show-area" style="min-height:100px;"></ul> <button class='page-btn-nick' >加载更多</button> 就2行,只为实现功能,足矣

随机推荐