導讀

一款流行的軟件，往往會在功能漸趨完善的時候，通過改善交互界面來提高用戶體驗。畢竟，就算再牛逼的產品，躲藏在糟糕的用戶界面之後總會讓用戶心生不滿。界面設計需綜合考慮審美學、心理學、設計學等多因素，是一份精細活。這篇博文仍然以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)

{

    if (obj
== m_topWidget && event->type() == QEvent::Paint)

    {

        QPainter
painter(m_topWidget);

        painter.setPen(Qt::NoPen);

        painter.setBrush(QColor(42,
120, 192));

        painter.drawRect(m_topWidget->rect());

    }

    return QSystemTrayIcon::eventFilter(obj,
event);

}

　　在完成了我們自己的繪製工作之後，還得再調用父類的事件過濾器，以免漏掉其他過濾工作。eventFilter()是一個protected方法，我們要在頭文件中進行重寫。

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

void SystemTray::createTopWidget()

{

    m_topWidget
= new QWidget();

    m_topWidgetAction
= new QWidgetAction(m_trayMenu);

    m_topLabel
= new QLabel(QStringLiteral("HUST
Information Security Lab"));

    m_topLabel->setObjectName(QStringLiteral("WhiteLabel"));

    m_homeBtn
= new QLabel(QStringLiteral("Visit"));

    m_homeBtn->setCursor(Qt::PointingHandCursor);

    m_homeBtn->setObjectName(QStringLiteral("WhiteLabel"));

    QVBoxLayout*
m_topLayout = new QVBoxLayout();

    m_topLayout->addWidget(m_topLabel,
0, Qt::AlignLeft|Qt::AlignVCenter);

    m_topLayout->addWidget(m_homeBtn,
0, Qt::AlignRight|Qt::AlignVCenter);

    m_topLayout->setSpacing(5);

    m_topLayout->setContentsMargins(5,
5, 5, 5);

    m_topWidget->setLayout(m_topLayout);

    m_topWidget->installEventFilter(this);

    m_topWidgetAction->setDefaultWidget(m_topWidget);

}

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

void SystemTray::createBottomWidget()

{

    m_bottomWidget
= new QWidget();

    m_bottomWidgetAction
= new QWidgetAction(m_trayMenu);

    m_updateBtn
= new QPushButton(QIcon(":/menu/update"),
QStringLiteral("Update"));

    m_updateBtn->setObjectName(QStringLiteral("TrayButton"));

    m_updateBtn->setFixedSize(60,
25);

    m_aboutBtn
= new QPushButton(QIcon(":/menu/about"),
QStringLiteral("About"));

    m_aboutBtn->setObjectName(QStringLiteral("TrayButton"));

    m_aboutBtn->setFixedSize(60,
25);

    m_exitBtn
= new QPushButton(QIcon(":/menu/quit"),
QStringLiteral("Exit"));

    m_exitBtn->setObjectName(QStringLiteral("TrayButton"));

    m_exitBtn->setFixedSize(60,
25);

    QHBoxLayout*
m_bottomLayout = new QHBoxLayout();

    m_bottomLayout->addWidget(m_updateBtn,
0, Qt::AlignCenter);

    m_bottomLayout->addWidget(m_aboutBtn,
0, Qt::AlignCenter);

    m_bottomLayout->addWidget(m_exitBtn,
0, Qt::AlignCenter);

    m_bottomLayout->setSpacing(5);

    m_bottomLayout->setContentsMargins(5,5,5,5);

    m_bottomWidget->setLayout(m_bottomLayout);

    m_bottomWidgetAction->setDefaultWidget(m_bottomWidget);

}

　　分別對三個按鈕設置了大小和圖標。具體的外觀樣式則使用了QSS來進行控制，因此我們還爲每個按鈕設置了一個Object Name。這個Object Name在QSS中充當ID選擇器，便於樣式控制。那麼樣式文件該如何編寫呢？具體參看如下所示：

QMenu{

    background:white;

    border:1px solid lightgray;
# 邊框爲灰色

}

QMenu::item{

    padding:0px 20px 0px 20px;

    margin-left:
5px;

    height:25px;

}

QMenu::item:selected:enabled{

    background:
lightgray;   # 菜單項選中時背景色設置爲淺灰色

    color:
white;           
# 文本顏色設置爲白色，否則看不清文本內容了

}

QMenu::separator{

    height:1px;

    background:
lightgray;   # 菜單分割線也設置爲淺灰色

    margin:2px 0px 2px 0px;

}

QMenu::item:selected:!enabled{

    background:transparent;

}

QPushButton#TrayButton
{

    border:
none;   
# 無邊框按鈕

    background:
transparent; 
# 按鈕背景設置爲透明，這樣不會受到默認主題顏色干擾

}

QPushButton#TrayButton:hover
{

    background:
rgb(233,
237,
252); 
# 鼠標懸停時，按鈕背景色設爲淡色

    color:
rgb(42,
120,
192);   
# 鼠標懸停時，文本顏色不變

}