前沿

什么叫做自定義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)行表示。

每一個widget中都展示了相同的內(nèi)容：編號，文本

因為只是做了展示功能，所以全部使用了QLabel控件

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)了，因為我們在每次創(chuàng)建一個新widget對象時，最好的方式每次都不沿用父窗口的樣式。