用Qt寫軟體系列四定製個性化系統托盤選單

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

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

上圖是金山衛士的系統托盤選單設計。我們稍作分析：整個托盤選單視窗是個半透明的設計，視窗邊框進行了圓角處理。底部的選單項包含三個button，倒數第

二、三個選單項的右部還加上了乙個自定義的單選按鈕。頂部選單項則包含乙個評級元件；其他選單項則沒有什麼特別，加上對應的圖示即可完成設計。但是可能由於整個背景色的緣故，導致整體效果看起來灰濛濛的，不太亮堂。

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

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

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

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

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

qmenu* m_traymenu;
qwidget* m_topwidget;
qwidgetaction* m_topwidgetaction;
qlabel* m_toplabel;
qlabel* m_homebtn;
qwidget* m_bottomwidget;
qwidgetaction* m_bottomwidgetaction;
qpushbutton* m_updatebtn;
qpushbutton* m_aboutbtn;
qpushbutton* m_exitbtn;
qaction* m_runonsystemboot;
qaction* m_helponline;
qaction* m_homepage;
qaction* m_notification;
qaction* m_settings;

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

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

bool systemtray::eventfilter(qobject *obj, qevent *event)
return qsystemtrayicon::eventfilter(obj, event);
}

在完成了我們自己的繪製工作之後，還得再呼叫父類的事件過濾器，以免漏掉其他過濾工作。eventfilter()是乙個protected方法，我們要在標頭檔案中進行重寫。

接下來要做的工作就是完成頂部和底部選單項的繪製工作。先看看頂部選單項如何繪製：

void systemtray::createtopwidget()

我們宣告了兩個label標籤，作用在上文已說明。然後用垂直布局管理器將兩個標籤分左右放置。注意語句：m_topwidget->installeventfilter(this)。這條語句完成了過濾器的安裝。指標this表明視窗事件將先發往當前類的eventfilter()方法進行處理，如果不處理再發往其他類的過濾器進行處理。底部選單項的初始化大致類似：

void systemtray::createbottomwidget()

分別對三個按鈕設定了大小和圖示。具體的外觀樣式則使用了qss來進行控制，因此我們還為每個按鈕設定了乙個object name。這個object name在qss中充當id選擇器，便於樣式控制。那麼樣式檔案該如何編寫呢？具體參看如下所示：

qmenu

qmenu::item

qmenu::item:selected:enabled

qmenu::separator

qmenu::item:selected:!enabled

qpushbutton#traybutton

qpushbutton#traybutton:hover

基本上，使用上面的樣式設定就可完成基本樣式設定。其他**就不再詳細敘述。到此，我們的托盤選單就完成了個性化定製工作。

根據上述**，我們實現的最終效果圖如下：

前面也說過：介面設計是一門學問，綜合了設計學、心理學、審美學等多學科。要設計出讓人耳目一新的產品介面，需要設計師具備相當的設計功力。但不管最終設計的怎麼樣，我們已經知道了，如何實現具備個人特點的托盤選單！

用Qt寫軟體系列四定製個性化系統托盤選單

直接用Qt寫soap

用Qt寫的上位機

QT 編寫 STC系列MCU燒錄軟體

用Qt寫軟體系列四 定製個性化系統托盤選單

直接用Qt寫soap

用Qt寫的上位機

QT 編寫 STC系列MCU燒錄軟體

相關推薦

用Qt寫軟體系列四定製個性化系統托盤選單