Qt5.9 UI設計(七)——統一樣式設計

liwen01發表於2023-04-16

前言

前面已經將UI設計部分實現，各頁面也做了最簡單的設計，本章介紹一下qss樣式的使用。樣式設計最終的顯示效果如下圖：

操作步驟

將stylesheet.qss 樣式檔案新增進工程
stylesheet.qss 內容如下：

/********************** MainWindow Style Sheet  *******************/
QMainWindow
{
background-color:#1A1A1A;
color:white;
border:none;
}
QFrame#frameDot
{
border:none;
}

QFrame#frameBackground
{
background-color: #1A1A1A;
border:none;
}

QFrame#frameBorder,#frameBackground
{
background-color:#1F1F1F;
color:white;
border:none;
}

QLabel
{
color: #FFFFFF;
}

/********************** MainTitleBar Style Sheet  *******************/
QPushButton#pushButtonClose
{
border:none;
background:rgba(255, 255, 255, 0);
image: url(:/image/close_normal.png);
}

QPushButton#pushButtonClose:hover
{
border:none;
background:rgba(255, 255, 255, 0);
image: url(:/image/close_hover.png);
}

QPushButton#pushButtonMin
{
border:none;
background:rgba(255, 255, 255, 0);
image: url(:/image/min_normal.png);
}

QPushButton#pushButtonMin:hover
{
border:none;
background:rgba(255, 255, 255, 0);
image: url(:/image/min_hover.png);
}


QPushButton#pushButtonMax
{
border:none;
background:rgba(255, 255, 255, 0);
image: url(:/image/max_normal.png);
}

QPushButton#pushButtonMax:hover
{
border:none;
background:rgba(255, 255, 255, 0);
image: url(:/image/max_hover.png);
}

QPushButton#pushButtonNormal
{
border:none;
background:rgba(255, 255, 255, 0);
image: url(:/image/normal_normal.png);
}

QPushButton#pushButtonNormal:hover
{
border:none;
background:rgba(255, 255, 255, 0);
image: url(:/image/normal_hover.png);
}

QPushButton#pushButtonSave:hover,#pushButtonAdd:hover
{
background-color: rgb(180, 85, 100);
color:white;
}

QPushButton#pushButtonSave,#pushButtonAdd
{
background-color:rgb(84, 115, 135);
color:white;
font-size:12px;
width: 150px;
border-radius:2px;
spacing:2px;
padding: 0px 0px;
}

QScrollBar:vertical
{
background:#1A1A1A;
padding-top:20px;
padding-bottom:20px;
padding-left:3px;
padding-right:3px;
border-left:1px solid #1A1A1A;;
}
QScrollBar::handle:vertical
{
background:#3F3F3F;
border-radius:6px;
min-height:80px;
border-radius:4px;
}
QScrollBar::handle:vertical:hover
{
background:#3F3F3F;
border-radius:4px;
}

QScrollBar::add-page
{
background:#1A1A1A;
}
QScrollBar::sub-page
{
background:#1A1A1A;
}
QScrollBar::add-line:vertical
{
background:url(none) center no-repeat;
}
QScrollBar::sub-line:vertical
{
background:url(none) center no-repeat;
}

/********************** ControlFoldWidget Style Sheet  *******************/
QTreeWidget, QTabWidget > QWidget
{
background:transparent;
color:white;
border:none;
background-color: #1A1A1A;

}

QTreeWidget::item:selected
{
background-color: #123456;
color:white;
}

QTreeWidget::item
{
height:50px;
}

QTreeWidget::item:!selected:hover
{
background:transparent;
}

QTreeWidget::branch:selected
{
background-color: #123456;
}

/********************** ControlTabWidget Style Sheet  *******************/
QTabBar::tab
{
min-width:100px;
color: white;
background-color:#1F1F1F;
border: 0px solid;
padding:6px;
}

QTabBar::tab:!selected
{
margin-top: 5px;
}

QTabBar::tab:selected
{
background-color:#2F2F2F;
color: white;
font-size:14px;
font-weight:bold;
border-bottom: 1px solid;
border-bottom-color:darkred;
}

QTabWidget::pane
{
background-color:transparent;
}
*{
outline:0px;
}

/********************** FrameControl Style Sheet  *******************/
QFrame#frameApplication
{
border:1px solid #BBBBBB;
border-radius:5px;
}
QFrame#frameApplication:hover
{
border:1px solid #FFFFFF;
border-radius:5px;
}

QWidget#scrollAreaWidgetContents
{
background-color: #1A1A1A;
border:none;
}


/********************** TableWidget Style Sheet  *******************/
QLabel#labelTableText
{
font-family: Microsoft YaHei;
font-size: 18px;
color: #FFFFFF;
}

QHeaderView
{
background-color:transparent;
}

QHeaderView::section
{
border: none;
background-color: #2B2B2B;
font-family: Microsoft YaHei;
font-size: 12px;
color: #FFFFFF;
text-align: center;
min-height: 36px;
max-height: 36px;
}

QTableWidget
{
border:0px solid;
border-top-width:1px;
border-top-style:solid;
border-top-color:#5C8290;
background-color:transparent;
alternate-background-color: #2A2A2A;
}

QTableWidget::item
{
font-family: Microsoft YaHei;
font-size: 10px;
min-height: 36px;
max-height: 36px;
}

QTableWidget::item:selected
{
out-line:none;
}
/********************** NoveControl Style Sheet  *******************/
QPushButton#pushButtonCloseControl
{
border:none;
background:rgba(255, 255, 255, 0);
image: url(:/image/other/close.png);
}

/********************** SliderWidget Style Sheet  *******************/
QFrame#frameSlider
{
border:none;
background-color:#1A1A1A;
}

QPushButton#pushButtonLeft
{
border-image: url(:/image/left_arrow_normal.png);
}

QPushButton#pushButtonLeft:hover
{
border-image: url(:/image/left_arrow_hover.png);
}

QPushButton#pushButtonLeft:pressed
{
border-image: url(:/image/left_arrow_pressed.png);
}

QPushButton#pushButtonRight
{
border-image: url(:/image/right_arrow_normal.png);
}

QPushButton#pushButtonRight:hover
{
border-image: url(:/image/right_arrow_hover.png);
}

QPushButton#pushButtonRight:pressed
{
border-image: url(:/image/right_arrow_pressed.png);
}

/********************** SystemTray Style Sheet  *******************/
QMenu
{
background-color: white;
border: 1px solid white;
}
QMenu::item
{
background-color: transparent;
padding:8px 32px;
margin:0px 0px;
border-bottom:1px solid #DBDBDB;
}
QMenu::item:selected
{
background-color: #2dabf9;
}

/********************** ProcessControl Style Sheet  *******************/
QFrame#frameProcess
{
background:transparent;
border:1px solid rgb(255, 220, 220);
border-radius: 4px;
}

/********************** ListControl Style Sheet  *******************/
QFrame#frameLine
{
background: rgba(255, 220, 220, 40);
}

QLabel#labelAppName
{
font-family: Microsoft YaHei;
font-size: 16px;
color: #FFFFFF;
}

QLabel#labelAppText
{
font-family: Microsoft YaHei;
font-size: 12px;
color: #AAAAAA;
}

為應用程式新增LOGO圖示

    this->setWindowIcon(QIcon(GlobalSpace::LOGO_PATH));

載入統一樣式

LOADQSS(GlobalSpace::STYLE_QSS_FILE_PATH);

最終設計效果如下圖，到這裡簡單的UI設計部分已經實現，TreeWidget 裡每項具體的內容大家可以自己新增去實現自己的內容。

說明

本系列UI介紹的文章，參考的是GitHub上一個QCoolPage的專案，它地址是：https://github.com/YYC572652645/QCoolPage
作為學習交流使用，將QCoolPage的實現拆解出來，以便入門學者可以比較快速的入手。如有侵權，歡迎聯絡溝通處理。
本章工程程式碼：page_sample_05.rar
完整工程下載地址，請到 liwen01 微信公眾號中回覆: QT 獲取

---------------------------End--------------------------- 長按識別二維碼關注 liwen01 公眾號

微信UI設計之WeUI前端樣式庫
2018-05-25
UI前端
UI設計靈感之：積分榜、排行榜列表樣式設計
2016-05-12
UI
ui設計的文字怎樣提高設計感呢?
2021-09-26
UI
互動式UI設計指南
2013-05-20
UI
UI設計培訓分享：UI設計師的設計思路
2021-09-08
UI
UI設計
2014-02-08
UI
UI設計培訓分享：ui設計公司的團隊職位怎樣劃分?
2021-11-04
UI
設計優雅UI的七條準則（下）
2016-02-10
UI
2020年轉行UI設計前景怎麼樣？UI設計有哪些系統的學習方法？
2020-03-12
UI
什麼樣的人適合學UI設計？
2021-08-20
UI
UI設計的發展前景怎麼樣?
2021-10-13
UI
UI設計培訓分享：ui設計師如何培養設計思維?
2021-10-20
UI
UI設計是什麼_UI設計學什麼？
2021-06-29
UI
如何自學UI設計？如何成為UI設計師？
2021-10-13
UI
自己動手設計並實現一個linux嵌入式UI框架(設計)
2015-04-14
LinuxUI框架
UI設計公司
2015-07-09
UI
UI設計培訓之UI設計系統知識
2021-06-11
UI
互動設計/視覺設計/網頁設計/UX設計/UI設計的區別
2013-05-07
視覺網頁UXUI
linux系統程式設計之程式（七）：system()函式使用
2013-07-13
Linux程式設計函式
UI設計培訓分享：UI設計師如何準備面試?
2021-12-09
UI面試
TCP程式設計(七)
2013-06-26
TCP程式設計
章七設計模式
2007-01-09
設計模式
【系統設計】設計一個限流元件
2022-05-26
元件
App介面Ui設計
2017-12-04
APPUI
UI設計案例分析
2015-11-18
UI
鴻蒙程式設計江湖：ArkUI 的宣告式 UI 程式設計與狀態管理
2024-10-26
鴻蒙程式設計UI
UI設計 | 分享一波購票類的APP介面設計
2021-09-10
UIAPP
ORACLE統計抽樣預設比例
2019-05-14
Oracle
元件庫通用樣式設計總結
2018-07-07
元件
系統設計：如何設計一個分散式作業排程器？- Rakshesh
2022-05-27
分散式
學UI設計可以從事哪些工作？UI設計師前景如何？
2020-08-13
UI
如何入門UI設計?學ui設計要看什麼書籍
2019-03-01
UI
UI設計要做什麼，UI設計培訓都要學什麼
2021-04-20
UI
UI培訓教程分享：UI設計如何確定設計風格
2021-11-29
UI
UI設計培訓教程分享：UI設計師的色彩使用技巧
2021-10-19
UI
23種設計模式(七)-狀態設計模式
2021-07-07
設計模式
21個UI設計必會的設計技巧
2021-09-16
UI
設計師進行UI設計的六要素
2014-04-17
UI

Qt5.9 UI設計(七)——統一樣式設計

前言

操作步驟

說明

相關文章