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

按鈕的三態，指的是普通態、滑鼠的停留態、點選態，三態是介面互動非常基本的一項功能，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，根據採集狀態來顯示對應的顏色。

最後在執行的時候即可實現對應的效果。