2. 程式人生 > >高仿富途牛牛-元件化(三)-介面美化

高仿富途牛牛-元件化(三)-介面美化

阿新 • • 發佈：2019-06-19

目錄

  • 一、概述
  • 二、效果展示
  • 三、工具箱
    • 1、佈局
    • 2、功能詳解
  • 四、元件模板工具欄
  • 五、其他介面美化
  • 六、使用qss檔案
  • 七、相關文章

一、概述

今天是元件化的第三篇文章了，前兩篇文章主要是以功能為主，分別講解了 高仿富途牛牛-元件化(一)-支援頁籤拖拽、增刪、小工具和高仿富途牛牛-元件化(二)-磁力吸附，其中也不乏有一些小的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檔案的流程如下：

  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();
}

七、相關文章

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

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


以上的內容，基本上就是本篇文章的內容所有內容啦！美化功能基本完成，希望可以幫到大家。


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



轉載宣告：本站文章無特別說明，皆為原創，版權所有，轉載請註明：朝十晚八 or Twowords

相關推薦

高仿富途牛牛-元件化(三)-介面美化

目錄 一、概述 二、效果展示 三、工具箱 1、佈局 2、功能詳解 四、元件模板工具欄 五、其他介面美化 六、使用qss檔案

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

目錄 一、概述 二、效果展示 三、實現方案分析 1、第一階段 2、第二階段 3、第三階段 一、概述 好久沒有做業務相關的UI功能

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

目錄 一、概述 二、效果展示 三、磁力吸附 1、限制滑鼠區域 2、修正視窗可以移動的區域 3、獲取最鄰近的可被吸附的視窗 四、其他

高仿富途牛牛-元件化(四)-優秀的時鐘

目錄 一、概述 1、視窗外殼 2、標題欄 3、客戶區 二、效果展示 三、小視窗 1、修改滑鼠狀態 2、修改大小

高仿富途牛牛-元件化(五)-如何去管理炒雞多的小視窗

目錄 一、概述 二、效果展示 三、功能類 四、設計上的考慮 1、功能拆分 2、關鍵類 五、相關文章 一、概述 程

高仿富途牛牛-元件化(六)-炒雞牛逼的佈局記憶功能(序列化和反序列化)

目錄 一、佈局記憶 二、效果展示 三、重點回顧 1、視窗管理 2、頁籤TabButton 3、子面板SubPanel 四、佈局記憶內容

安卓開發-高仿ios時間選擇控制元件timepicker

在開發中如果有地址或者日期選擇等就會涉及到時間或者條件選擇器，大家都會想到仿ios的三級聯動的效果，用wheelview實現，其實安卓原生自帶了時間和日期選擇器可能是效果來說太粗獷了，所以很多產品效果圖都是清一色的ios那種效果，ok，廢話說完了上圖 demo地址：htt

仿京東app，採用元件化開發 ARouter + mvp + dagger2 + rxjava + retrofit + fresco 架構

# JD-Test 仿京東app 採用元件化架構 螢幕適配方案可以較好解決多解析度及同分辨率不同dpi適配；### 宣告 ： 本專案資源採用抓包獲取，僅供學習交流使用 。 話說一切沒有gif圖的專案都是耍流氓，上圖： 本專案為仿京東專案，資源為抓包獲取，專案框架採用路由框

根據牛腩老師的mono for android 視訊，自己用vs2017的xamarin for android高仿了一個登入介面跳轉主介面的程式

//定義四個控制元件         private Button btn_visit;         private Button btn_login;         private Button btn_cancel;         private EditText txt_name;      

1、黑化的牛牛--全國模擬（四）

size clas bold urn 解題思路 -a 限制 namespace fun [編程題] 黑化的牛牛 時間限制：1秒 空間限制：32768K 牛牛變得黑化了,想要摧毀掉地球。但他忘記了開啟地球毀滅器的密碼。牛牛手裏有一個字符串S,牛牛還記得從S中去掉一個字符就恰好

javascript編程解決黑化的牛牛問題

技術分享 長度 split 思路 sub length close nbsp div 問題描述 時間限制：1秒 空間限制：32768K 牛牛變得黑化了,想要摧毀掉地球。但他忘記了開啟地球毀滅器的密碼。牛牛手裏有一個字符串S,牛牛還記得從S中去掉一個字符就恰好是正確的密

[完整開源源碼V10]最新仿微信紅包牛牛掃雷多雷禁搶雷坐莊雷接龍PC蛋蛋遊戲

hvm pk10 編譯 最新 edi medium erl flag 數據 [完整開源源碼V10]最新仿微信紅包牛牛掃雷多雷禁搶雷坐莊雷接龍PC蛋蛋遊戲 完整源碼版和編譯運營修復版正式發布 同步發布，需要聯系qq：3373137913[完整開源源碼V10]最新仿微信紅包牛牛

Vue2.0 高仿餓了嗎的實踐-star元件的實現

off，half，on star元件要從後臺接受的score資料然後通過計算輸出相應的圖案。 一，在計算屬性中，要計算出需要幾個on，half，off 定義對應的變數： const LENGTH = 5; const CLA_ON = 'on'; const CLA_HALF

Android仿百度，高德地圖位置交換控制元件，水平or垂直交換控制元件位置

  開始看到這個需求，準備使用檢視動畫 TranslateAnimation 來實現。但是把因為檢視動畫只是移動了檢視，控制元件的位置沒有改變，導致只能執行一次交換的動作，不能交換回來。逐放棄改用屬性動畫來實現。直接交換兩個控制元件的位置，交換後在將原來控制元件的值賦予交換後

多人開發的基礎---元件化程式設計,仿COM篇

引言：     在大型專案的開發中，隨著開發進度的進行，我們經常碰到模組之間耦合度太高的問題：由於開發人員經常要在別的模組中呼叫自己實現的功能，經常隨意在某個函式中隨意新增呼叫程式碼，造成了被修改的那個函式體過長，邏輯混亂。另一個問題是隨意包含標頭檔案：開發人員在開發中經常

Android 高仿 QQ5.0 側滑選單效果 自定義控制元件來襲

上一篇部落格帶大家實現了：Android 自定義控制元件打造史上最簡單的側滑選單 ，有兄弟看了以後說，你這滑動選單過時了呀~QQ5.0的效果還不錯~~嗯，的確，上一篇也承諾過，稍微修改上一篇的程式碼，實現QQ5.0側滑選單~~好了，下面就開始為大家展示寫一個類QQ的側滑有多e

富文字編輯器——百度UEditor外掛Vue元件化

2、元件 （1）元件頁面 ueditor.vue <template> <script :id=id type="text/plain"></sc

Android自定義View，高仿QQ音樂歌詞滾動控制元件！

最近在以QQ音樂為樣板做一個手機音樂播放器，原始碼下篇博文放出。今天我想聊的是這個QQ音樂播放器中歌詞顯示控制元件的問題，和小夥伴們一起來探討怎麼實現這個歌詞滾動的效果。OK，廢話不多說，先來看看效果圖：好，接下來我們就來看看怎麼實現這樣一個效果。本文主要包括如下幾方面內容：

Android微信牛牛平臺出租四大元件

Android四大元件分別為activity、service、content provider、broadcast receiver。一、android四大元件詳解1、activity（1）一個Activity通常就是一個單獨的螢幕（視窗）。（2）Activity之間通過In

Android 高仿微信頭像擷取 打造不一樣的自定義控制元件

轉載請表明出處：http://blog.csdn.net/lmj623565791/article/details/39761281，本文出自：【張鴻洋的部落格】1、概述前面已經寫了關於檢測手勢識別的文章，如果不瞭解可以參考：Android 手勢檢測實戰 打造支援縮放平移的圖