導讀

    一款流行的軟體，往往會在功能漸趨完善的時候，通過改善互動介面來提高使用者體驗。畢竟，就算再牛逼的產品，躲藏在糟糕的使用者介面之後總會讓使用者心生不滿。介面設計需綜合考慮審美學、心理學、設計學等多因素，是一份精細活。這篇博文仍然以Qt的使用為主旨，探討一下在Qt中如何進行系統托盤的個性化定製。

介紹

    首先我們看看幾款知名軟體的系統托盤設計：

    上圖是金山衛士的系統托盤選單設計。我們稍作分析：整個托盤選單視窗是個半透明的設計，視窗邊框進行了圓角處理。底部的選單項包含三個Button，倒數第二、三個選單項的右部還加上了一個自定義的單選按鈕。頂部選單項則包含一個評級元件；其他選單項則沒有什麼特別，加上對應的圖示即可完成設計。但是可能由於整個背景色的緣故，導致整體效果看起來灰濛濛的，不太亮堂。

     上圖是360安全衛士的托盤選單。頂部和底部的兩個選單項都將背景色設定成了360安全衛士的主題色，加上了兩個標籤和按鈕。其他選單項保持不變。另外，選單的背景色也被設定成了白色。整個選單的設計較為簡潔、清爽。雖然並不喜歡用360安全衛士，但是並不妨礙我對其產品外觀設計的讚賞。

原型設計

     既然有了上述兩款產品的參考，我們也可以試著設計下自己的系統托盤。首先我們需要一個原型設計工具，將草圖繪製好我們才能用程式碼將最終結果顯示出來。這裡推薦一個原型設計工具：Balsqmiq mockup。這款工具使用簡單，其提供的原型元件非常豐富，使用會覺得非常方便。

     根據初步設想，我設計瞭如下的一個原型草圖：

      在佈局方面基本上綜合了金山衛士和360安全衛士的設計特點。頂部選單項部署兩個Label, 一個用來顯示應用程式的視窗標題或產品名稱，另一個顯示為go to visit，可以響應滑鼠點選事件。底部選單項和金山衛士一樣，設定了三個按鈕：Update, about, exit，使用水平均勻佈局。其他的選單項則和普通選單項沒有區別。 基本上，一個自定義的托盤選單已經躍然而出。

程式碼實現

      根據上述的原型設計，我們要做的準備工作顯然就是準備好圖片。對於沒有美工技能的程式設計師來說，尋找介面圖片素材顯然是一大難題。做不出圖片顯然只好去網上搜索了。本人在網上下載了一堆的圖片壓縮包，有一個值得推薦：

      每個圖片都取了一個別名，這樣在程式碼中我們直接使用圖片別名，從而消除與圖片具體名稱的藕合性。資源準備好之後我們需要開始編碼了。參考本人曾經寫過的一篇博文（使用Qt建立系統托盤），可以實現一個預設主題的系統托盤選單。但是這裡我們要實現自定義托盤選單，我們從QSystemTray派生一個子類，並定義好相關的類成員變數：

　　顯然，我們注意到一個平時沒有接觸到的：QWidgetAction。這個類自Qt 4.2引入，繼承自QAction。根據類名也可以推測出其含義：使用QWidget來充當Menu的Action。於是，我們似乎明白了自定義選單的精髓：用Widget來做Action。這裡我們主要定義頂部選單項和底部選單項。因此我們定義了兩個QWidgetAction。另外，我們還有一個疑問就是：佈局好的Widget如何"偽裝"成Action插入到選單項中去呢？我們可以使用QWidgetAction的setDefaultWidget()方法來完成這項工作。後面的程式碼將會有說明。

      此外，我們還注意到：360安全衛士的底部選單項和頂部選單項的背景色都是綠色的這又該如何實現呢？一種可行的方法是，安裝一個事件過濾器（Event Filter）。當過濾到繪製事件並且繪製的元件是頂部選單項和底部選單項時，我們改變繪製方式。程式碼如下：