高仿富途牛牛-組件化(三)-界面美化

時間  2019-11-06
標籤 高仿 組件 界面 美化 简体版
原文   原文鏈接

目錄html

1、概述

今天是組件化的第三篇文章了，前兩篇文章主要是以功能爲主，分別講解了 高仿富途牛牛-組件化(一)-支持頁籤拖拽、增刪、小工具和高仿富途牛牛-組件化(二)-磁力吸附，其中也不乏有一些小的bug，不過這些都不是問題。程序員

以前的效果展現只是爲了表達意思，界面是真的醜，標準的程序員審美，哈哈哈。今天這篇文章主要是對以前的程序進行了美化，而且進行了一些bug的修改。app

效果美化是參照富途牛牛作的，雖然不是如出一轍，可是確實比以前的效果好了一些，喜歡的同窗能夠參考下。ide

文章最後會把描述顯示效果的qss文件貼上，但願能夠幫到你們工具

2、效果展現

下面gif圖所示，錄製的時間比較長，你們能夠仔細看下，交互效果徹底是參照富途牛牛作的，若有問題，歡迎提出。感謝！！！組件化

歡迎你們提出問題，交互、配色均可以佈局

3、工具箱

工具箱是一個很重要的功能。咱們的每個獨立組件模板都擁有一個工具箱。性能

  • 工具箱自身支持移動
  • 組件模板移動時 會聯動工具箱移動（工具箱和組件模板的相對位置不變）

下面咱們來分析下工具箱是怎麼作的this

一、佈局

首先，從界面佈局上咱們先來講下，工具箱從總體顏色劃分上，能夠分爲兩個部分：標題欄和客戶區窗口。url

a、標題欄

標題欄咱們是一個窗口的眼睛，經過標題欄的命名咱們能夠看到這個窗口是幹什麼的，例如展現圖中所示，交易、迷你報價、自選股、今日統計等等。

除此以外，標題欄還提供了一個很靈活的操做：移動窗口，咱們能夠經過鼠標按下標題欄來進行窗口拖拽

這裏咱們爲了實現這個功能，重寫了QWidget的三個接口，實現內容都比較簡單，這裏就不作說明了，有興趣的自行百度，網上一大堆。

virtual void mousePressEvent(QMouseEvent *) override;
virtual void mouseMoveEvent(QMouseEvent *) override;
virtual void mouseReleaseEvent(QMouseEvent *) override;

最後也是很重要的一點，那就是標題欄還支持關閉窗口，咱們經過點擊標題欄上的關閉按鈕，能夠關閉當前窗口。

對於工具箱來講，咱們也能夠經過點擊組件模板工具欄上的按鈕進行關閉

b、客戶區

一個窗口除過標題欄覺得剩下的就是客戶區了，客戶端使咱們展現展現數據的主要地方，展現效果中的工具箱裏邊包含了不少工具按鈕，包括通用頁簽下的迷你報價、自選股、短線精靈，和港股頁簽下的迷你報價、交易、帳戶等等。

工具箱的客戶端咱們這裏是只有一個QTabWidget類，而通用和港股頁籤就是QTabWidget下的兩個頁籤。

每一個頁籤裏邊都是一個QListWidget，我給QListWidget設置了圖表展現模式，讓他有了一個鐘按鈕的顯示風格。

二、功能詳解

上邊咱們主要分析了工具箱的一個組成部分，接下來我將會從更爲詳細的代碼層面說明工具箱的實現過程，其中可能會包含一些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;
}

代碼比較簡單，可是須要特別注意，代碼中調用的每個接口，都是必不可少的。

4、組件模板工具欄

關於工具欄的實現，咱們能夠參考高仿富途牛牛-組件化(一)-支持頁籤拖拽、增刪、小工具這篇文章，今天這篇文章咱們只講解怎麼美化，雖然美化效果沒有很明顯，咱們仍是湊合着看吧。

這裏一樣也是使用了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中使用動態屬性的地方其實比較多，這裏就不一一例舉出來了，說明一個，你們知道有這麼會事，本身也學會使用便可

5、其餘界面美化

講完工具箱和組件模板工具欄美化以後，其餘界面的美化就比較簡單了。

剩下的就是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;}

6、使用qss文件

設置外部qss文件的流程以下：

  1. 找到qss文件
  2. 加載qss文件
  3. 經過QApplication::setStyleSheet設置樣式表

這樣是一種比較冷通的設置方式，一旦qss文件比較大，會出現這句代碼卡頓的狀況。若是想要更好的性能，qss建議仍是分開來寫，至於怎麼合理的拆分qss文件，能夠根據本身的需求來拆分

這裏提供我以前使用過的兩種方式

  1. 控件級別，每一個控件對應一個qss文件
  2. 功能級別，一個功能模塊一個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();
}

7、相關文章

高仿富途牛牛-組件化(一)-支持頁籤拖拽、增刪、小工具

高仿富途牛牛-組件化(二)-磁力吸附


以上的內容，基本上就是本篇文章的內容全部內容啦！美化功能基本完成，但願能夠幫到你們。


最後再說一句，美化是永無止境的，今天雖然說是講解界面美化，不過如今這個效果也不是專業美化後的，只能說是比以前的效果稍微好一些。這裏也是拋磚引玉，說明美化的方式和技巧，要想有更好的美化效果，仍是得有專業的設計師同窗進行設計

若是您以爲文章不錯，不妨給個 打賞，寫做不易，感謝各位的支持。您的支持是我最大的動力，謝謝！！！



很重要--轉載聲明

  1. 本站文章無特別說明，皆爲原創，版權全部，轉載時請用連接的方式，給出原文出處。同時寫上原做者：朝十晚八 or Twowords

  2. 如要轉載，請原文轉載，如在轉載時修改本文，請事先告知，謝絕在轉載時經過修改本文達到有利於轉載者的目的。

相關文章
相關標籤/搜索
每日一句
    每一个你不满意的现在，都有一个你没有努力的曾经。
本站公眾號
   歡迎關注本站公眾號,獲取更多信息
聯繫我們 最近搜索 最新文章 沪ICP备13005482号-10 MyBatis教程 SQL 教程 MySQL教程 Java 教程 Thymeleaf 教程 Hibernate教程 Spring教程 Redis教程