Qt自定義Widget實(shí)現(xiàn)互斥效果詳解
前沿
什么叫做自定義Widget實(shí)現(xiàn)互斥效果呢?
在使用Qt做一個界面美觀性比較強(qiáng)的功能時,可能會遇到這種問題:多個控件互斥,類似于QRadiButton控件,但又不是單純的QRadioButton控件,互斥的可能是一個窗口,也可能是幾個按鈕,等等多種情況。
這里我只是列舉了一個簡單的互斥例子,雖然簡單,但是包含了各種坑,有需要的掘友們可以小筆記們記一下,尤其是對Qt新手來說,還是很有必要的。
由效果圖可以看出創(chuàng)建了3個自定義widget,點(diǎn)擊其中一個時,另外兩個背景色以及文本顏色變化,處于選中狀態(tài)。
接下來,針對效果圖展示的功能進(jìn)行逐一講解,包含了知識點(diǎn)以及踩坑記錄。
功能實(shí)現(xiàn)
實(shí)現(xiàn)自定義互斥widget過程中遇到了如下知識點(diǎn)以及問題,看看有沒有你曾經(jīng)遇到的或者是剛好需要的功能吧!
知識點(diǎn)
1:Widget模擬按鈕的四態(tài)功能,包括了:常態(tài)、按下、聚焦、禁用
2:Widget自定義類的背景色設(shè)置以及文本內(nèi)容風(fēng)格設(shè)置
3:如何讓多個widget實(shí)現(xiàn)互斥效果
問題
1:自定義Widget背景色設(shè)置之后為什么不生效?
針對上述知識點(diǎn)以及問題來講述這個簡單的功能吧!
講解知識點(diǎn)1
使用Widget模擬按鈕的四態(tài)功能,需要用到Widget自身的消息:鼠標(biāo)按下,鼠標(biāo)進(jìn)入、鼠標(biāo)離開。
virtual void mousePressEvent(QMouseEvent *event); //鼠標(biāo)按下響應(yīng)消息 virtual void enterEvent(QEvent *event); //鼠標(biāo)進(jìn)入響應(yīng)消息 virtual void leaveEvent(QEvent *event); //鼠標(biāo)離開響應(yīng)消息
有沒有人會問道,為什么沒有mouseMoveEvent消息?
解答:在Qt中直接使用mouseMoveEvent消息鼠標(biāo)是無法觸發(fā)的,必須要設(shè)置setMouseTracking(true)讓鼠標(biāo)跟蹤事件在當(dāng)前窗口處于有效狀態(tài)。
根據(jù)使用的具體情況是否需要設(shè)置這個功能。當(dāng)前的小demo中,只是做圖片的轉(zhuǎn)換,沒有必要在mouseMove中一直消耗資源。
(題外話:在MFC框架下的鼠標(biāo)mosemove事件是直接可用的不需要進(jìn)行特殊設(shè)置)
鼠標(biāo)進(jìn)入到widget之后,就可以標(biāo)記為鼠標(biāo)一直在該widget中活動,除非觸發(fā)了leaveEvent消息。
鼠標(biāo)按下響應(yīng)消息
void QCustomWidget::mousePressEvent(QMouseEvent *event) { this->SetWidgetStyle(Style_Down); QWidget::mousePressEvent(event); }
當(dāng)前采用的枚舉類型:鼠標(biāo)按下響應(yīng)。
鼠標(biāo)進(jìn)入widget響應(yīng)消息
void QCustomWidget::enterEvent(QEvent *event) { this->SetWidgetStyle(Style_Focus); QWidget::enterEvent(event); }
當(dāng)前采用的枚舉類型:鼠標(biāo)聚焦?fàn)顟B(tài),使用進(jìn)入消息代替了mousemove消息。
如果大家打日志會發(fā)現(xiàn),該觸發(fā)函數(shù)只會在鼠標(biāo)進(jìn)入的時候走一次,當(dāng)鼠標(biāo)持續(xù)在widget內(nèi)部移動時是不觸發(fā)的,極大的減少了消息處理。
鼠標(biāo)離開widget響應(yīng)消息
void QCustomWidget::leaveEvent(QEvent *event) { this->SetWidgetStyle(Style_Normal); QWidget::leaveEvent(event); }
當(dāng)前采用的枚舉類型:鼠標(biāo)離開狀態(tài)。
我只是展示了最簡單的離開設(shè)置,有一點(diǎn)需要考慮,當(dāng)前widget如果處于按下狀態(tài),此刻鼠標(biāo)離開了,該如何展示呢?
難道還要顯示常態(tài)風(fēng)格嗎?
答案肯定是NO!
雖然鼠標(biāo)已經(jīng)移開,但是選中狀態(tài)已經(jīng)由常態(tài)變成了按下狀態(tài)。在程序中我們需要用一個bool值變量來記錄當(dāng)前widget是否已經(jīng)被選中過,如果選中過,當(dāng)鼠標(biāo)離開時就需要更改為選中狀態(tài)
修改如下所示:
if (m_bClickedState == true) { this->SetWidgetStyle(Style_Down); } else this->SetWidgetStyle(Style_Normal);
講解知識點(diǎn)2
在程序中對于模擬的狀態(tài)采用了枚舉的類型進(jìn)行表示。
類型 | 說明 |
---|---|
Style_Normal | 鼠標(biāo)未做任何操作的初始狀態(tài) |
Style_Down | 鼠標(biāo)在wiget中進(jìn)行了按下操作 |
Style_Focus | 鼠標(biāo)在widget中進(jìn)行移動時操作狀態(tài) |
Style_Disable | 當(dāng)前widget處于進(jìn)行狀態(tài) |
每一個widget中都展示了相同的內(nèi)容:編號,文本
因?yàn)橹皇亲隽苏故竟δ埽匀渴褂昧薗Label控件
QLabel *m_labNumber; //編號類指針
QLabel *m_LabContent; //內(nèi)容類指針
對應(yīng)的實(shí)際處理
void QCustomWidget::SetWidgetStyle(ENUM_WidgetStyle enumStyle) { //TODO:設(shè)置widget風(fēng)格 QString qsStyle = "", gStyleNumberNormal = "", gStyleContentNormal = ""; switch (enumStyle) { case Style_Normal: //常態(tài)顯示 { //設(shè)置:背景 qsStyle = "QWidget{background-color:#FFD700}"; //設(shè)置:編號風(fēng)格 gStyleNumberNormal = "QLabel{color:#666666; font-family:Microsoft YaHei UI; font-size:14px;} QLabel{background-color: transparent}"; //設(shè)置:內(nèi)容風(fēng)格 gStyleContentNormal = "QLabel{color:#666666; font-family:Microsoft YaHei UI; font-size:14px;} QLabel{background-color: transparent}"; } break; case Style_Down: //按下 { //設(shè)置:背景 qsStyle = "QWidget{background-color:#FFB6C1}"; //設(shè)置:編號風(fēng)格 gStyleNumberNormal = "QLabel{color:#0000FF; font-family:Microsoft YaHei UI; font-size:14px;} QLabel{background-color: transparent}"; //設(shè)置:內(nèi)容風(fēng)格 gStyleContentNormal = "QLabel{color:#00FFFF; font-family:Microsoft YaHei UI; font-size:14px;} QLabel{background-color: transparent}"; } break; case Style_Focus: //聚焦 { //設(shè)置:背景 qsStyle = "QWidget{background-color:#FFF0F5}"; //設(shè)置:編號風(fēng)格 gStyleNumberNormal = "QLabel{color:#98FB98; font-family:Microsoft YaHei UI; font-size:14px;} QLabel{background-color: transparent}"; //設(shè)置:內(nèi)容風(fēng)格 gStyleContentNormal = "QLabel{color:#98FB98; font-family:Microsoft YaHei UI; font-size:14px;} QLabel{background-color: transparent}"; } break; case Style_Disable: //禁用 { //設(shè)置:背景 qsStyle = "QWidget{background-color:#DCDCDC}"; //設(shè)置:編號風(fēng)格 gStyleNumberNormal = "QLabel{color:#696969; font-family:Microsoft YaHei UI; font-size:14px;} QLabel{background-color: transparent}"; //設(shè)置:內(nèi)容風(fēng)格 gStyleContentNormal = "QLabel{color:#696969; font-family:Microsoft YaHei UI; font-size:14px;} QLabel{background-color: transparent}"; } break; default: break; } this->setStyleSheet(qsStyle); m_labNumber->setStyleSheet(gStyleNumberNormal); m_labContent->setStyleSheet(gStyleContentNormal); }
根據(jù)不同的類型對應(yīng)的背景風(fēng)格也不同。大家可以將代碼帶入,運(yùn)行查看下效果,是不是跟我展示的效果一致呢?
哈哈!如果你嘗試了,就會發(fā)現(xiàn)是這個樣子的效果:
為什么只能顯示文字,我的背景呢?去了哪里?我不是已經(jīng)設(shè)置了嗎?
很多Qt新手在這里都會遇到這樣的問題,于是開啟了各種搜索模式,嘗試各種方法,有的時候改著改著就對了,也就忽略了這個問題。
當(dāng)我們創(chuàng)建一個自定義widget時,通用的方法使用new實(shí)例的方式,在new的過程中,為了層級關(guān)系好打理已經(jīng)父子關(guān)系明確,都會傳入this作為新創(chuàng)建窗口的父指針。
一旦我們傳入了this指針之后,并未在自定義Widget中做任何處理時,此時就會出現(xiàn)這樣的情況。
子類繼承了父窗口的風(fēng)格樣式。
一般遇到這種情況時,會有兩種處理方式:重寫當(dāng)前窗口的paintEvent函數(shù),設(shè)置不沿用父窗口風(fēng)格
為了方便起見,當(dāng)窗口繪制的背景圖不復(fù)雜的情況下都會采用第二種方式設(shè)置:
this->setAttribute(Qt::WA_StyledBackground);
在當(dāng)前自定義widget類構(gòu)造函數(shù)中設(shè)置上述代碼后,之前出現(xiàn)的設(shè)置了背景風(fēng)格卻看不見的問題就迎刃而解了。
講解知識點(diǎn)3
如何實(shí)現(xiàn)多個widget之間的互斥呢?
使用過QRadioButton控件的掘友們都知道,該控件想要設(shè)置互斥只需要簡單的設(shè)置函數(shù)就可以了。
對于我們自定義的widget來說,是不存在這種函數(shù)的,互斥效果只能是手動用代碼設(shè)置并根據(jù)選中與非選中狀態(tài)來更換對應(yīng)的展示效果。
假設(shè),當(dāng)前選中了“內(nèi)容1”的自定義Widget,此時需要在Widget中鼠標(biāo)按下響應(yīng)中觸發(fā)一個消息,通知外界,當(dāng)前自定義Widget做了按下操作,需要做特殊的處理
void QCustomWidget::mousePressEvent(QMouseEvent *event) { this->SetWidgetStyle(Style_Down); emit Msg_SendClicked(); QWidget::mousePressEvent(event); }
在調(diào)用自定義Widget的父類中響應(yīng)對應(yīng)的槽函數(shù)做特殊處理。
總結(jié)
到這里實(shí)現(xiàn)自定義Widget互斥效果就簡單實(shí)現(xiàn)了。
對于互斥操作的實(shí)現(xiàn)很簡單,最最需要掌握的就是如何設(shè)置widget的背景。
很多情況下子窗口與父窗口嵌套層級過多時,這種問題最容易出現(xiàn)了,因?yàn)槲覀冊诿看蝿?chuàng)建一個新widget對象時,最好的方式每次都不沿用父窗口的樣式。
到此這篇關(guān)于Qt自定義Widget實(shí)現(xiàn)互斥效果詳解的文章就介紹到這了,更多相關(guān)Qt Widget實(shí)現(xiàn)互斥內(nèi)容請搜索腳本之家以前的文章或繼續(xù)瀏覽下面的相關(guān)文章希望大家以后多多支持腳本之家!
相關(guān)文章
win10系統(tǒng)VS2019配置點(diǎn)云庫PCL1.12.1的詳細(xì)流程
這篇文章主要介紹了win10系統(tǒng)VS2019配置點(diǎn)云庫PCL1.12.1的教程與經(jīng)驗(yàn)總結(jié),本文記錄小白在配置過程中踩過的一些小坑,需要的朋友可以參考下2022-07-07C++基于hook iat改變Messagebox實(shí)例
這篇文章主要介紹了C++基于hook iat改變Messagebox的方法,以實(shí)例形式展示了針對IAT(即導(dǎo)入地址表)以及hook的操作,有助于深入理解Windows程序設(shè)計原理,需要的朋友可以參考下2014-10-10約瑟夫環(huán)問題(數(shù)組法)c語言實(shí)現(xiàn)
這篇文章主要介紹了約瑟夫環(huán)問題(數(shù)組法)c語言實(shí)現(xiàn),有需要的朋友可以參考一下2013-12-12C/C++使用C語言實(shí)現(xiàn)多態(tài)
這篇文章主要介紹了C/C++多態(tài)的實(shí)現(xiàn)機(jī)制理解的相關(guān)資料,非常不錯,具有參考借鑒價值,需要的朋友可以參考下,希望能給你帶來幫助2021-08-08OpenCV實(shí)現(xiàn)簡易標(biāo)定板
這篇文章主要為大家詳細(xì)介紹了OpenCV實(shí)現(xiàn)簡易標(biāo)定板,文中示例代碼介紹的非常詳細(xì),具有一定的參考價值,感興趣的小伙伴們可以參考一下2021-04-04