# 【Qt編程】基于Qt的詞典開發系列--界面美化設計 本文講一講界面設計，作品要面向用戶，界面設計的好壞直接影響到用戶的體驗。現在的窗口設計基本都是扁平化的，你可以從window XP與window 8的窗口可以明顯感覺出來。當然除了窗口本身的效果，窗口中各種控件的特效也是特別重要的一環。下面講講我在詞典軟件中的一些設計：說到界面美化的設計，不得不提到美工，一個好的美工是相當的重要！軟件畢竟少不了圖標，而不懂美工的我，也就只能在網上使用別人的圖標了。 ## 如何得到網上的圖標？ 直接百度就可以了，當然還有另一種方法：就是從別人的文件中提取這些圖標文件。一般來說，圖標文件是不會以圖片格式存儲在軟件目錄中的，一般都存放在后綴名為.rdb以及.ui文件中。具體的步驟如下： 1、找到要提取軟件的安裝目錄 2、進行搜索：搜索.jpg、.png等圖片格式文件（能夠搜到最好了），然后搜索.rdb或.ui文件 3、下載RDB打包解包工具，進行解包，就可以得到圖片資源了 ? ## 控件間的無縫連接： 所謂無縫連接是指控件與控件之間沒有空隙，用Qt Creator打開界面文件，比如我打開這個詞典項目，打開searchwindow.ui文件，控件是否有空隙的效果如下所示： 控件間的空隙大小可以由這些子控件所在父控件的Layout屬性控制 **1、當Layout屬性設置如下時：（有空隙的情況）**  則控件間有空隙，顯示效果如下：  **2當Layout屬性設置如下時：（沒有空隙的情況）**  則控件間無空隙，顯示效果如下：  ## 按鈕的美化 現在按鈕也開始扁平化，例如上圖中的所有按鈕都是扁平化的，兩者的差別如下：  顯然第一種是常規的按鈕，如果我們把ToolButton的autoRise屬性書中，就會出現第二種情況，之所以沒有使用QPushButton是因為它沒有autoRaise屬性。  當選中autoRasie屬性后，當鼠標放在該按鈕上時效果如下：  ## 動態渲染效果 我們發現很多軟件都有動態效果，如鼠標放在按鈕上時，會發生變化，點擊后又發生變化，這些是怎么做到的呢？Qt中美化界面最好的使用QML，不過由于剛出來不久，網上資料不是很多，我也不是很懂，就不介紹了。學習過網頁制作的都知道，網頁的渲染效果用到了css，與此類似，Qt使用qss來美化界面。下面介紹一種簡單使用的方法來進行渲染操作： 右鍵單擊界面中的控件，選擇“更改樣式表……”，然后在彈出的窗口中設置渲染效果，**下面以單擊按鈕來舉例說明：** 首先，右擊關閉按鈕，選擇“更改樣式表……”：  然后在彈出的“編輯樣式表”按鈕中寫入如下代碼： ~~~ QToolButton{ border-image: url(:/searchwindow/searchwindow/close_normal.png); } //上面的語句是給“關閉”按鈕添加close_normal.png的圖標，注意這里需要寫你自己圖片的路徑 QToolButton:hover{ border-image: url(:/searchwindow/searchwindow/close_hover.png); } //這條語句的作用是，當鼠標放在“關閉”按鈕上時，圖標變成close_hover.png的圖標，注意這里需要寫你自己圖片的路徑 ~~~ **這兩條語句實現的效果如下：**  一般情況下,關閉按鈕顯示如下：  當鼠標放在上面時，效果如下：  我在詞典中所有的按鈕幾乎都是采用了這種效果，如果想使用更多的效果，可以百度qt setstylesheet，可以看到更多的渲染效果。**在軟件界面中，listWidget控件中我使用的樣式表如下**： ~~~ QListWidget::item { width:40px; height:40px; font:bold 20px; } QListWidget { background-color: rgb(255, 255, 255); } QListWidget::item:selected:!active { background-color: rgb(98, 93, 255); } QListWidget::item:selected:active { background-color: rgb(98, 93, 255); } QListWidget::item:hover { background-color: rgba(50, 23, 255, 100); } ~~~ 具體含義可以根據效果就可以看出，如下演示效果：  當前選擇項使用深藍表示，而鼠標停靠的選擇項使用淺藍表示。 **下面是我軟件項目中所有的界面，圖標都是使用網絡上的圖標（若有侵權，請告知）：**