Qt 之 自定義按鈕 在鼠標 懸浮、按下、鬆開後的效果（轉載）

————————————————

版權聲明：本文爲CSDN博主「前行中的小豬」的原創文章，遵循CC 4.0 BY-SA版權協議，轉載請附上原文出處鏈接及本聲明。

原文鏈接：https://blog.csdn.net/goforwardtostep/article/details/53464925

Qt技術學習班開始了，更多精彩、好玩的內容等着你，趕緊報名吧! 羣號：655815739

---

一、簡述

在上一篇 Qt 之 去除窗口部件被選中後的焦點虛線框 中，我們爲了去除焦點虛線框，給按鈕的樣式加上了如下的樣式。

QPushButton
{
    background:red;
    border:0px;
}

這裏我們需要準備幾張圖片：

---

運行效果圖：

---

登錄按鈕效果背景圖片

資源圖片：

效果圖：

---

2、通過設置樣式控制不同顯示效果

QPushButton#pButtonOk
{
    color:white;
    background-color:rgb(14 , 150 , 254);
    border: 1px solid rgb(11 , 137 , 234);
}

QPushButton#pButtonOk:hover
{
    color:white;
    background-color:rgb(44 , 137 , 255);
    border: 1px solid rgb(11 , 137 , 234);
}

QPushButton#pButtonOk:pressed
{
    color:white;
    background-color:rgb(14 , 135 , 228);
    border: 1px solid rgb(12 , 138 , 235);
    padding-left:3px;
    padding-top:3px;
}

QPushButton#pButtonCancel
{
    color:black;
    background-color:rgb(238 , 238 , 238);
    border: 1px solid rgb(183 , 183 , 183);
}

QPushButton#pButtonCancel:hover
{
    color:black;
    background-color:rgb(228 , 240 , 250);
    border: 1px solid rgb(15 , 150 , 255);
}

QPushButton#pButtonCancel:pressed
{
    color:black;
    background-color:rgb(204 , 228 , 247);
    border: 1px solid rgb(1 , 84 , 153);
    padding-left:3px;
    padding-top:3px;
}

這種方法比上面用圖標作爲背景的好處就是可以隨意更改文字以及文字的大小、位置、字體等顯示效果。

---

---

綜上：

1、設置背景圖方式

優點 ：樣式簡單，直接設置border-image即可，可以選取漂亮的UI圖片，總體上可能會比單純通過樣式設置顯示效果要好一些。（如果UI圖選取效果不好的情況下，效果可能沒有單純設置樣式好看，這就要看個人的審美觀了哈O(∩_∩)O！）

缺點 ：需要自己制定背景效果圖， 可能比較耗時。

2、通過設置樣式控制不同顯示效果

優點：不需要準備背景圖，直接通過樣式設置，簡單、粗暴，想怎麼設置就怎麼設置（前提是要會一點CSS），能夠更好地控制顯示效果（比如控制文字的大小，位置、字體等）。

缺點：樣式稍微複雜，需要懂更多的CSS樣式，如果需要在按鈕上加圖標什麼的就必須要加載背景圖片了，單純靠樣式解決不了。

---

以上總結了兩種方法的優缺點，可以說這兩種方法可以相互取長補短，基本上運用好這兩種方式就能夠做出精美的按鈕了，具體採樣哪種方式就看自己如何選擇了哈 O(∩_∩)O！

---

注意

QPushButton
{
    border-image:url(:/Resources/registeraccount_hover.png);
}

如果我們使用如上樣式，將會對所有的QPushButton進行設置樣式，如果只需要給某一個則用以下格式：

“QPushButton#” + “按鈕名稱（objectName）”。

我們主要用到了按鈕的三種狀態，分別是鼠標懸浮、按下、鬆開 。

// 正常狀態或者鼠標鬆開按鈕的狀態
QPushButton
{}
//鼠標懸浮在按鈕上的狀態
QPushButton:hover
{}
//鼠標按下按鈕時的狀態
QPushButton:pressed
{}

// 我們只需在不同狀態下的{}中填寫不同的樣式，在我們對按鈕進行操作時就會顯示不同的樣式效果。

---

尾

以上只是簡單地介紹了對按鈕設置的一些樣式，其他控件的樣式可以查看Qt的文檔。這裏我們通過設置樣式實現了自定義 按鈕在不同狀態下的效果，不再依靠系統自帶的凹陷效果。

下面是我模仿QQ做的一個界面。歡迎大家隨時交流哈 O(∩_∩)O！

————————————————

版權聲明：本文爲CSDN博主「前行中的小豬」的原創文章，遵循CC 4.0 BY-SA版權協議，轉載請附上原文出處鏈接及本聲明。

原文鏈接：https://blog.csdn.net/goforwardtostep/article/details/53464925