【Qt編程】基於Qt的詞典開發系列--界面美化設計

原創

2020-02-22 10:33

本文講一講界面設計，作品要面向用戶，界面設計的好壞直接影響到用戶的體驗。現在的窗口設計基本都是扁平化的，你可以從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);
	
 }

具體含義可以根據效果就可以看出，如下演示效果：