干貨 | Qt中實現(xiàn)邊加載數(shù)據(jù)邊顯示頁面

Cruise

2023年2月2日 17:00

*編輯注：

文章作者：稀土掘金“中國好公民st”

文章鏈接：

https://juejin.cn/post/7029852623268216845

做過C++開發(fā)的人們都知道，無論是MFC框架還是QT框架，實現(xiàn)加載數(shù)據(jù)的等待效果都是很麻煩的，不像WEB端輕輕松松一句代碼就搞定了。而我們這些做C++的，最常用的方法就是開線程了。

剛開始，我也是采用的開線程的方式，但是，想象總是與事實相悖的。

假設(shè)頁面展示的數(shù)據(jù)比較多，導(dǎo)致加載頁面時間較長，用戶體驗度很差，點擊了觸發(fā)按鈕之后很長時間才會有響應(yīng)，總讓人誤會程序死機了，但真正的原因是數(shù)據(jù)正在加載。

那么，當(dāng)前頁面展示的數(shù)據(jù)量較多，我們該如何動態(tài)的顯示邊加載數(shù)據(jù)邊顯示頁面呢？

對于我這種剛從MFC框架轉(zhuǎn)過來的新手來說，確實是一個不小的挑戰(zhàn)呢！

那么，我來講解下我是如何實現(xiàn)的吧！

第一步：定義顯示定時器

想要一打開頁面就加載數(shù)據(jù)，我們需要重寫QWidget::show()，開啟定時器，并且要立即執(zhí)行。

1：定義定時器

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

2：定時器調(diào)用

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

打開頁面需要立即執(zhí)行定時器操作，此時start中的參數(shù)=0，表示立即執(zhí)行。

此時，顯示頁面已經(jīng)加載出來了。

因為前面說過了，頁面的數(shù)據(jù)量比較多，不可能顯示頁面之后處于假死的狀態(tài)，那么，我們需要加載頁面的同時，顯示一個gif的等待圖標(biāo)。

這里，我們就需要修改一下show()的函數(shù)

void QMyWidget::show(){ QWidget::show(); //頁面啟動后，直接顯示加載gif圖片 gPageManager::instance()->GetDownloadDlg()->SetShowMode(1); gPageManager::instance()->GetDownloadDlg()->SetTips("正在加載案例數(shù)據(jù)，請稍后..."); gPageManager::instance()->GetDownloadDlg()->show(); if (m_timer->isActive() == false) { m_timer->start(0);  }}

這里，我用了一個單例類：gPageManager調(diào)用具有g(shù)if效果圖的窗口。

這種方式就可以實現(xiàn)，顯示頁面以后，直接等待數(shù)據(jù)加載，防止我們看到假死頁面，給用戶造成困惱。

這里的gif圖片是用一個QLabel承載顯示的，方法很多，不過多介紹。

這里提醒的是：在使用QT中的定時器，比較安全的做法是，判斷該定時是否處于活躍狀態(tài)，只有再非活躍狀態(tài)下才需要觸發(fā)。這里只做溫馨提示哦，個人代碼習(xí)慣而已~

3：定時器加載數(shù)據(jù)

當(dāng)進入定時器之后，進行數(shù)據(jù)處理。為了防止頁面卡頓，此時，在定時器中我們也要重新開啟一個線程，用于數(shù)據(jù)加載。

此時，就會有人想問，當(dāng)前頁面已經(jīng)開啟了一個定時器，為什么還要再創(chuàng)建一個線程呢？

下面我會一一解答的。

在C語言的函數(shù)中，運行指定函數(shù)中的內(nèi)容時，只有運行到"}"時，才會顯示運行頁面。在某個特定的具體處理函數(shù)中計算機在處理時屬于一個過程處理函數(shù)。

所以，才會在一顯示頁面就開啟定時器操作，首先將頁面展示給用戶，在做其他的數(shù)據(jù)處理。

那么為什么要在定時器中再開一個線程呢？

主要是因為在show函數(shù)中調(diào)用了一個動態(tài)加載的窗口，假設(shè)定時器中直接加載較多數(shù)據(jù)時，此時，界面也會處于一個卡頓狀態(tài)，導(dǎo)致GIF等待窗口被卡住。為了防止這種情況出現(xiàn)，我們需要在定時器中繼續(xù)開一個線程，防止頁面卡頓。

void QMyWidget::OnTimerLoadData(){
 //因為只是在打開頁面時加載數(shù)據(jù)，所以，定時器只需要進行一次即可。 m_Timer->stop(); //啟動線程，加載數(shù)據(jù)，具體代碼這里不具體說明。 //數(shù)據(jù)加載完之后，隱藏GIF動態(tài)加載頁面 gPageManager::instance()->GetDownloadDlg()->hide();}

到這里，打開頁面直接顯示加載的功能已經(jīng)完成了，那么該如何實現(xiàn)當(dāng)前線程呢？

接下來，是我們第二個階段的內(nèi)容了~

第二步：線程加載數(shù)據(jù)

一般C++的程序員在遇到這種情況時，通常很自然的就想要了，使用線程的方式。

其實，我第一個思路也是使用線程加載數(shù)據(jù)。但是使用線程必須要考慮到線程存在的弊端，比如說死鎖，比如說出現(xiàn)野指針等問題。

在QT中有一種開線程的方式，簡單容易上手，這里我還是比較推薦使用的：QtConcurrent::run

該函數(shù)的具體講解這里不做講解，我們直接使用吧！

首先需要的頭文件：

#include <QtConcurrent/QtConcurrentRun>

接下來是調(diào)用方式，這里我們定義加載數(shù)據(jù)的函數(shù)名叫做LoadWidgetData()

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

使用這種線程方式的時候，需要注意了，LoadWidgetData函數(shù)的返回值一定是true才可以。

bool QMyWidget::LoadWidgetData(){ //具體的數(shù)據(jù)加載操作 return true;}

線程的加載方式已經(jīng)介紹完了，到這里，我們已經(jīng)可以實現(xiàn)一遍加載數(shù)據(jù)，一遍顯示等待GIF效果了。

接下來，我們該實現(xiàn)如何實時呈現(xiàn)加載進度了~

第三步：實時呈現(xiàn)加載進度

大家都知道，在QT的線程中是無法調(diào)用頁面操作內(nèi)容的。

一般情況下的頁面操作，比如窗口創(chuàng)建、控件賦值等等都需要在主線程進行，否則會造成崩潰問題。具體原因大家可以查閱資料去。

那么，我們要實現(xiàn)邊加載數(shù)據(jù)邊在頁面上展示的時候，該如何操作呢？

在這里，我們可以用發(fā)消息的方式，在線程中發(fā)送消息給主進程，交給主進程處理頁面操作

bool QMyWidget::LoadWidgetData(){ //1：加載數(shù)據(jù)內(nèi)容1，具體實現(xiàn)不說明 //發(fā)送數(shù)據(jù)內(nèi)容1對應(yīng)的頁面處理操作 emit Msg_SendSelfDataProcessing1(); //...數(shù)據(jù)加載內(nèi)容自由發(fā)揮，類似于 上面兩步驟內(nèi)容 return true;}

代碼看起來很好理解，這種方式既保證了數(shù)據(jù)加載流暢，也不對主頁面造成卡頓現(xiàn)象。

深圳市優(yōu)飛迪科技有限公司成立于2010年，是一家專注于產(chǎn)品開發(fā)平臺解決方案與物聯(lián)網(wǎng)技術(shù)開發(fā)的國家級高新技術(shù)企業(yè)。

十多年來，優(yōu)飛迪科技在數(shù)字孿生、工業(yè)軟件尤其仿真技術(shù)、物聯(lián)網(wǎng)技術(shù)開發(fā)等領(lǐng)域積累了豐富的經(jīng)驗，并在這些領(lǐng)域擁有數(shù)十項獨立自主的知識產(chǎn)權(quán)。同時，優(yōu)飛迪科技也與國際和國內(nèi)的主要頭部工業(yè)軟件廠商建立了戰(zhàn)略合作關(guān)系，能夠為客戶提供完整的產(chǎn)品開發(fā)平臺解決方案。

優(yōu)飛迪科技技術(shù)團隊實力雄厚，主要成員均來自于國內(nèi)外頂尖學(xué)府、并在相關(guān)領(lǐng)域有豐富的工作經(jīng)驗，能為客戶提供“全心U+端到端服務(wù)”。

干貨 | Qt中實現(xiàn)邊加載數(shù)據(jù)邊顯示頁面的圖2