一、概述
今天是組件化的第三篇文章了，前兩篇文章主要是以功能為主，分別講解了 高仿富途牛牛-組件化(一)-支持頁簽拖拽、增刪、小工具和高仿富途牛牛-組件化(二)-磁力吸附，其中也不乏有一些小的bug，不過這些都不是問題。
之前的效果展示只是為了表達意思，界面是真的丑，標准的程序員審美，哈哈哈。今天這篇文章主要是對之前的程序進行了美化，並且進行了一些bug的修改。
效果美化是參照富途牛牛做的，雖然不是一模一樣，但是確實比之前的效果好了一些，喜歡的同學可以參考下。
文章最后會把描述顯示效果的qss文件貼上，希望可以幫到大家
二、效果展示
下面gif圖所示，錄制的時間比較長，大家可以仔細看下，交互效果完全是參照富途牛牛做的，如有問題，歡迎提出。感謝！！！
歡迎大家提出問題，交互、配色都可以
三、工具箱
工具箱是一個很重要的功能。我們的每一個獨立組件模板都擁有一個工具箱。
- 工具箱自身支持移動
- 組件模板移動時 會聯動工具箱移動（工具箱和組件模板的相對位置不變）
下面我們來分析下工具箱是怎么做的
1、布局
首先，從界面布局上我們先來說下，工具箱從整體顏色划分上，可以分為兩個部分：標題欄和客戶區窗口。
a、標題欄
標題欄我們是一個窗口的眼睛，通過標題欄的命名我們可以看到這個窗口是干什么的，例如展示圖中所示，交易、迷你報價、自選股、今日統計等等。
除此之外，標題欄還提供了一個很靈活的操作：移動窗口，我們可以通過鼠標按下標題欄來進行窗口拖拽
這里我們為了實現這個功能，重寫了QWidget的三個接口，實現內容都比較簡單，這里就不做說明了，有興趣的自行百度，網上一大堆。
virtual void mousePressEvent(QMouseEvent *) override;
virtual void mouseMoveEvent(QMouseEvent *) override;
virtual void mouseReleaseEvent(QMouseEvent *) override;
最后也是很重要的一點，那就是標題欄還支持關閉窗口，我們通過點擊標題欄上的關閉按鈕，可以關閉當前窗口。
對於工具箱來說，我們也可以通過點擊組件模板工具欄上的按鈕進行關閉
b、客戶區
一個窗口除過標題欄以為剩下的就是客戶區了，客戶端使我們展示展示數據的主要地方，展示效果中的工具箱里邊包含了很多工具按鈕，包括通用頁簽下的迷你報價、自選股、短線精靈，和港股頁簽下的迷你報價、交易、賬戶等等。
工具箱的客戶端我們這里是只有一個QTabWidget類，而通用和港股頁簽就是QTabWidget下的兩個頁簽。
每個頁簽里邊都是一個QListWidget，我給QListWidget設置了圖表展示模式，讓他有了一個鍾按鈕的顯示風格。
2、功能詳解
上邊我們主要分析了工具箱的一個組成部分，接下來我將會從更為詳細的代碼層面說明工具箱的實現過程，其中可能會包含一些qss樣式表，全部的樣式表將會在文章最后貼出
上邊已經提供到兩個頁簽里邊的工具按鈕都是包含在QListWidget控件中的，下面我直接貼出頁簽初始化的關鍵代碼
void ToolBoxDialog::InitializeTools(int start, int end, const QString & title)
{
QListWidget * normalWidget = new QListWidget;
normalWidget->setVerticalScrollBarPolicy(Qt::ScrollBarAlwaysOff);
normalWidget->setHorizontalScrollBarPolicy(Qt::ScrollBarAlwaysOff);
connect(normalWidget, &QListWidget::itemClicked, this, &ToolBoxDialog::ItemClicked);
normalWidget->setDragEnabled(false);
normalWidget->setViewMode(QListView::IconMode);
normalWidget->setResizeMode(QListView::Adjust);
normalWidget->setSpacing(3);
for (int i = start; i < end; ++i)
{
normalWidget->addItem(createItem(toolNames[i], toolTypes[i]));
}
m_pTabWidget->addTab(normalWidget, title);
}
從上邊代碼可以看出，我們的列表使用了圖標(QListView::IconMode)顯示模式，並且設置了圖標項不可以拖拽。
最后我們使用一個循環構造了很多item，插入到了QListWidget控件中
樣式美化代碼如下，不了解Qss語法的可以參考qt qss這篇文章，我以前寫的，比較詳細。
QDialog#ToolBoxDialog QTabWidget::pane { border-top: 1px solid #2B3236; }
QDialog#ToolBoxDialog QTabWidget::tab-bar { top:1px;}
QDialog#ToolBoxDialog QTabBar::tab { background:#1D2224;border-bottom: 1 solid #2B3236; min-width: 20ex; padding: 4px; color:#919AA3; }
QDialog#ToolBoxDialog QTabBar::tab:selected { border-bottom: 1 solid #FF9900; }
QDialog#ToolBoxDialog QTabBar::tab:hover { border-bottom: 1 solid #FFB700; }
QDialog#ToolBoxDialog QTabBar::tab:!selected:!hover { border-bottom: 1 solid #2B3236; }
QDialog#ToolBoxDialog QListView{border:0px solid blue;margin-top:12px;margin-left:12px;outline:none;}
QDialog#ToolBoxDialog QListView::item{padding-top:10px;border:1 solid transparent;}
QDialog#ToolBoxDialog QListView::item:hover{color:#FF9900;background:#6B7276;}
最后也是最重要的一點，item我們是怎么構造的
static QListWidgetItem * createItem(const QString & text, SubWindowNormalType type)
{
QListWidgetItem * item = new QListWidgetItem;
item->setSizeHint(QSize(72, 72));//設置項大小
item->setFlags(item->flags() & ~Qt::ItemIsSelectable);//設置項不可以被選中
item->setText(text);
item->setData(UserType, type);
item->setIcon(QPixmap("./image/mainWindow/tquant-btn_normal.png"));//設置圖標
return item;
}
代碼比較簡單，但是需要特別注意，代碼中調用的每一個接口，都是必不可少的。
四、組件模板工具欄
關於工具欄的實現，我們可以參考高仿富途牛牛-組件化(一)-支持頁簽拖拽、增刪、小工具這篇文章，今天這篇文章我們只講解怎么美化，雖然美化效果沒有很明顯，我們還是湊合着看吧。
這里同樣也是使用了Qt的動態屬性功能，這真是Qt的一個很強大的能力，有了動態屬性，我們可以很容易的做出一些交互上比較復雜的效果。
鼠標hover時的文字顏色就是使用了動態屬性來實現。仔細看如下qss樣式表，當QLabel的Hovered屬性為true時（實際上QLabel並沒有達到hover，這里我們是模擬了hover行為），我們啟用了一種新的文字顏色。
TabButton#tab_Button:hover{border-bottom:1 solid #FFB700;}
TabButton#tab_Button[Selected=true]{border-bottom:1 solid #FF9900;color:#FF9900;}
TabButton#tab_Button QLabel[Hovered=true]{color:#FF9900;}
TabButton#tab_Button QLabel[SelectedColor=true]{color:#FF9900;}
TabButton#tab_Button QToolButton{border:0px;border-image:url(./image/common/titlebar_normal.png) 0 0 0 78;}
TabButton#tab_Button QToolButton:hover{border:0px;border-image:url(./image/common/titlebar_hover.png) 0 0 0 78;}
再看實現代碼，當我們的鼠標移入自定義的標簽頁按鈕時，給子控件（文本控件）設置了動態屬性，並刷新了界面。
void TabButton::enterEvent(QEvent * event)
{
m_pTitle->setProperty("Hovered", "true");
m_pTitle->style()->unpolish(m_pTitle);
m_pTitle->style()->polish(m_pTitle);
__super::enterEvent(event);
}
自定義的頁簽按鈕，本身是一個QWidget，他內部包含了QLabel文本和QToolButton關閉按鈕，為了讓QLabel還沒有hover的時候，我們給他制造一種hover假象，我們使用了動態屬性。
這個組件化demo中使用動態屬性的地方其實比較多，這里就不一一例舉出來了，說明一個，大家知道有這么會事，自己也學會使用即可
五、其他界面美化
講完工具箱和組件模板工具欄美化之后，其他界面的美化就比較簡單了。
剩下的就是subPanel和小窗口的美化，這里我重點說下小窗口的美化，有一個邊框顏色的改變這個地方。
當小窗口獲取焦點時，邊框是黃色的，失去焦點時邊框是灰色的
實現方式如下，這里我重寫了窗口獲取焦點和失去焦點的接口，並且進行設置了Qt內置的動態屬性，然后在qss中對屬性進行了樣式配置
代碼如下
//獲取焦點時
void SmallWidget::focusInEvent(QFocusEvent * event)
{
setProperty("SelectedWidget", "true");
style()->unpolish(this);
style()->polish(this);
__super::focusInEvent(event);
}
//失去焦點時
void SmallWidget::focusOutEvent(QFocusEvent * event)
{
setProperty("SelectedWidget", "false");
style()->unpolish(this);
style()->polish(this);
__super::focusOutEvent(event);
}
qss樣式如下
QWidget#small_widget_title
{
border-bottom:1 solid #2B5470;background:#292F33;
}
QWidget#SmallWidget
{
border:1 solid #474F57;background:#1D2224;
}
QWidget#SmallWidget[SelectedWidget=true]
{
border:2 solid #FFE100;
}
是不是很簡單，哈哈哈哈。
最后我貼出完整的qss樣式表，為了顯示更多內容，這里我把多余的換行符都去掉了。
QDialog{ border:1px solid #7b8187}
QWidget{ background:#28323f;color:#DDDDDD;}
QWidget#small_widget_title{ border-bottom:1 solid #2B5470;background:#292F33;}
QWidget#SmallWidget{ border:1 solid #474F57;background:#1D2224;}
QWidget#SmallWidget[SelectedWidget=true]{ border:2 solid #FFE100;}
QWidget#DragToolBar{ background:#1D2224;border-bottom:1 solid #2B3236;}
QWidget#ToolBoxTitle{ border-bottom:1 solid #2B5470;background:#292F33;}
QWidget#ToolBoxDialog{ background:#28323F;border:1 solid #474F57;}
TabButton#tab_Button:hover{border-bottom:1 solid #FFB700;}
TabButton#tab_Button[Selected=true]{border-bottom:1 solid #FF9900;color:#FF9900;}
TabButton#tab_Button QLabel[Hovered=true]{color:#FF9900;}
TabButton#tab_Button QLabel[SelectedColor=true]{color:#FF9900;}
TabButton#tab_Button QToolButton{border:0px;border-image:url(./image/common/titlebar_normal.png) 0 0 0 78;}
TabButton#tab_Button QToolButton:hover{border:0px;border-image:url(./image/common/titlebar_hover.png) 0 0 0 78;}
QDialog#ToolBoxDialog QTabWidget::pane { border-top: 1px solid #2B3236; }
QDialog#ToolBoxDialog QTabWidget::tab-bar { top:1px;}
QDialog#ToolBoxDialog QTabBar::tab { background:#1D2224;border-bottom: 1 solid #2B3236; min-width: 20ex; padding: 4px; color:#919AA3; }
QDialog#ToolBoxDialog QTabBar::tab:selected { border-bottom: 1 solid #FF9900; }
QDialog#ToolBoxDialog QTabBar::tab:hover { border-bottom: 1 solid #FFB700; }
QDialog#ToolBoxDialog QTabBar::tab:!selected:!hover { border-bottom: 1 solid #2B3236; }
QDialog#ToolBoxDialog QListView{border:0px solid blue;margin-top:12px;margin-left:12px;outline:none;}
QDialog#ToolBoxDialog QListView::item{padding-top:10px;border:1 solid transparent;}
QDialog#ToolBoxDialog QListView::item:hover{color:#FF9900;background:#6B7276;}
六、使用qss文件
設置外部qss文件的流程如下：
- 找到qss文件
- 加載qss文件
- 通過QApplication::setStyleSheet設置樣式表
這樣是一種比較冷通的設置方式，一旦qss文件比較大，會出現這句代碼卡頓的情況。如果想要更好的性能，qss建議還是分開來寫，至於怎么合理的拆分qss文件，可以根據自己的需求來拆分
這里提供我之前使用過的兩種方式
- 控件級別，每個控件對應一個qss文件
- 功能級別，一個功能模塊一個qss文件
拆分的好處我就不多說了，誰用誰知道！！！
話不多說，直接上代碼了。
SetCurrentDirectory(a.applicationDirPath().toStdWString().c_str());
QString qssFile = a.applicationDirPath() + "\\TemplateLayout.qss";
QFile qss(qssFile);
qss.open(QFile::ReadOnly);
if (qss.isOpen())
{
QString btnstylesheet = QObject::tr(qss.readAll());
a.setStyleSheet(btnstylesheet);
qss.close();
}
七、相關文章
以上的內容，基本上就是本篇文章的內容所有內容啦！美化功能基本完成，希望可以幫到大家。
最后再說一句，美化是永無止境的，今天雖說是講解界面美化，不過現在這個效果也不是專業美化后的，只能說是比之前的效果稍微好一些。這里也是拋磚引玉，說明美化的方式和技巧，要想有更好的美化效果，還是得有專業的設計師同學進行設計
 |
 |
很重要--轉載聲明
-
本站文章無特別說明，皆為原創，版權所有，轉載時請用鏈接的方式，給出原文出處。同時寫上原作者：朝十晚八 or Twowords
-
如要轉載，請原文轉載，如在轉載時修改本文，請事先告知，謝絕在轉載時通過修改本文達到有利於轉載者的目的。