Qt5.9 UI设计(七)——统一样式设计

前言

前面已经将UI设计部分实现，各页面也做了最简单的设计，本章介绍一下qss样式的使用。样式设计最终的显示效果如下图：

操作步骤

1. 将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;
}

1. 为应用程序添加LOGO图标

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

1. 加载统一样式

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 公众号