Qt實現自定義按鈕的三態效果

好久之前做的一個小軟件，好長時間沒動過了，在不記錄下有些細節可能都忘了，這里整理下部分功能的實現。

按鈕的三態，指的是普通態、鼠標的停留態、點擊態，三態是界面交互非常基本的一項功能，Qt中如果使用的是原始的按鈕，三態的效果是有的，鼠標放上去會變色，點擊的時候有凹陷的效果，工具欄中的圖標也具備三態效果，但是如果自定義的圖標這個效果就沒有了。

下面整理下自定義按鈕圖標的方法，先看下我做的效果圖：

圖中表示了鼠標放在按鈕上和按下的效果，完成了基本的三態，下面說下我的具體實現過程。

資源准備

首先要准備好對應狀態的按鈕圖標，按鈕圖標可以從網上搜集，圖標需要找png格式的，ico格式的可以使用工具轉換為png格式的，而且是背景透明的png格式，要想實現不同狀態對應不同的效果還需要處理出其他狀態，這就得靠PS來完成了，使用PS也非常簡單，我這里使用PS的內陰影來實現按下的效果，用斜面和浮雕來實現鼠標停留效果。具體設置如下面兩幅圖所示：

圖：使用內陰影實現的按下效果

圖：使用斜面和浮雕實現的鼠標停留效果

處理好后的圖標如下圖。

加入工程

將處理好的圖標文件放入工程文件夾下，新建Qt-Qt資源文件。

輸入文件名保存並加入工程。依次添加前綴，添加文件將文件加入工程，如下圖所示。

這些文件添加到工程后就可以在界面設計中使用，很多人在界面設計中改變按鈕的樣式會直接選擇按鈕圖標，如下圖所示。

通過選擇按鈕的icon設置對應大小來實現，然而這樣的一個效果就是按鈕仍然是有背景和邊框的，效果如下圖所示。

因此很多人的實現方法是通過繼承QToolButton或者重繪按鈕來實現，然而這些操作仍然相對麻煩，經過對比和查找，這里使用StyleSheet來實現。

找到對應的按鈕，先在界面編輯中編輯對應的樣式表，這里添加border-image，對應普通情況下的按鈕圖標。

然后在主程序中在按鈕使用之前指定其他兩種狀態所對應的圖標，代碼非常直接，就是指定每種狀態對應的文件，QPushButton：hover標示鼠標懸停所對應的狀態，QPushButton：pressed則對應鼠標點擊的狀態，代碼如下，注意包含的頭文件。

#include <QtGui>
ui->play_button->setStyleSheet("QPushButton{border-image: url(:/new/icons/icons/play-pause.png);}"
                              "QPushButton:hover{border-image: url(:/new/icons/icons/play-pause-hover.png);}"
                              "QPushButton:pressed{border-image: url(:/new/icons/icons/play-pause-pressed.png);}");

void MainWindow::button_init()
{
    ui->play_button->setStyleSheet("QPushButton{border-image: url(:/new/icons/icons/play.png);}"
                                  "QPushButton:hover{border-image: url(:/new/icons/icons/play-hover.png);}"
                                  "QPushButton:pressed{border-image: url(:/new/icons/icons/play-pressed.png);}");
    ui->rec_button->setStyleSheet("QPushButton{border-image: url(:/new/icons/icons/play-rec.png);}"
                                  "QPushButton:hover{border-image: url(:/new/icons/icons/play-rec-hover.png);}"
                                  "QPushButton:pressed{border-image: url(:/new/icons/icons/play-rec-pressed.png);}");
    ui->stop_button->setStyleSheet("QPushButton{border-image: url(:/new/icons/icons/play-stop.png);}"
                                     "QPushButton:hover{border-image: url(:/new/icons/icons/play-stop-hover.png);}"
                                     "QPushButton:pressed{border-image: url(:/new/icons/icons/play-stop-pressed.png);}");
    ui->options_button->setStyleSheet("QPushButton{border-image: url(:/new/icons/icons/play-options.png);}"
                                     "QPushButton:hover{border-image: url(:/new/icons/icons/play-options-hover.png);}"
                                     "QPushButton:pressed{border-image: url(:/new/icons/icons/play-options-pressed.png);}");

    ui->save_button->setStyleSheet("QPushButton{border-image: url(:/new/icons/icons/play-star.png);}"
                                     "QPushButton:hover{border-image: url(:/new/icons/icons/play-star-hover.png);}"
                                     "QPushButton:pressed{border-image: url(:/new/icons/icons/play-star-pressed.png);}");
}

同樣，按鈕可以根據當前狀態來進行變化，如下圖中設計軟件界面的最左邊的按鈕，會根據圖像采集狀態顯示為播放或者暫停按鈕，而右側的一個按鈕則用來模擬一個LED，根據采集狀態來顯示對應的顏色。

最后在運行的時候即可實現對應的效果。