天天新動態：Qt5.9 UI設計(七)——統一樣式設計

【資料圖】

前面已經將UI設計部分實現，各頁面也做了最簡單的設計，本章介紹一下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;}

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獲取