Qt系列——优美界面设计实现不同换肤
Posted 何以问天涯
tags:
篇首语：本文由小常识网(cha138.com)小编为大家整理，主要介绍了Qt系列——优美界面设计实现不同换肤相关的知识，希望对你有一定的参考价值。
一、QT不同皮肤设置
本程序的BaseWindow是继承于QWidget，如果大家想要继承QMainWindow，则需要把BaseWindow的基类改为QMainWindow。
去掉窗口自带的边框，Qt中直接用一下代码即可去除窗口边框效果。
//1.------设置窗体标题栏隐藏
this->setWindowFlags(Qt::FramelessWindowHint | Qt::WindowSystemMenuHint | Qt::WindowMinMaxButtonsHint);
标题栏按钮图标采用文字库形式显示
//3.------标题栏按钮图标
IconHelper::Instance()->SetIcon(ui->btnMenu_Close, QChar(0xf00d), 10);//QChar变图标
IconHelper::Instance()->SetIcon(ui->btnMenu_Max, QChar(0xf096), 10);
IconHelper::Instance()->SetIcon(ui->btnMenu_Min, QChar(0xf068), 10);
采用CSS的样式表形式实现不同按钮、标题栏、文字变颜色，只需要点击选择不同的按钮选择开关，实现样式的切换。
比如实现得到的蓝色主题样表如下：
切换的效果如下：
二、核心代码之路
采用的CSS样式列表分为不同的文件，放在资源:/Resources/css/SkinCss路径下，并且文件可任意多个，代码支持自由添加不同主题色。
黑色主题：
/*//===================================================================================
// 函数名称 | QWidget()
//-----------------------------------------------------------------------------------
// 函数输入 |
//-----------------------------------------------------------------------------------
// 函数功能 | 窗体
//-----------------------------------------------------------------------------------
// 返回值为 |
//-----------------------------------------------------------------------------------
// 函数作者 |xt
//===================================================================================*/
QWidget#widgetMain{
border:1px solid #4D4D4D;
border-radius:0px;
}
.QFrame{
border:1px solid #636363;
border-radius:5px;
}
QWidget#widget_title{
background: qlineargradient(spread:pad, x1:0, y1:0, x2:0, y2:1, stop:0 #4D4D4D, stop:1 #292929);
}
/*//===================================================================================
// 函数名称 | QLabel()
//-----------------------------------------------------------------------------------
// 函数输入 |
//-----------------------------------------------------------------------------------
// 函数功能 | 标签
//-----------------------------------------------------------------------------------
// 返回值为 |
//-----------------------------------------------------------------------------------
// 函数作者 |xt
//===================================================================================*/
QLabel#lab_Ico{
border-radius:0px;
color: #F0F0F0;
background-color:rgba(0,0,0,0);
border-style:none;
}
QLabel#lab_Title{
border-radius:0px;
color: #00DFFF;
background-color:rgba(0,0,0,0);
border-style:none;
font-size:11pt;
font-weight: bold;
}
QLabel#lab_Wait
{
border-radius:0px;
color: #00DFFF;
background-color:rgba(0,0,0,0);
border-style:none;
font-size:12pt;
font-weight: bold;
}
/*//===================================================================================
// 函数名称 | QLineEdit()
//-----------------------------------------------------------------------------------
// 函数输入 |
//-----------------------------------------------------------------------------------
// 函数功能 | 输入框
//-----------------------------------------------------------------------------------
// 返回值为 |
//-----------------------------------------------------------------------------------
// 函数作者 |xt
//===================================================================================*/
QLineEdit {
border: 1px solid #F0F0F0;/*输入框选中,线条颜色-灰色*/
border-radius: 5px;
padding: 2px;
background: none;
selection-background-color: #4D4D4D;
}
QLineEdit[echoMode="2"] {
lineedit-password-character: 9679;
}
/*//===================================================================================
// 函数名称 | QGroupBox()
//-----------------------------------------------------------------------------------
// 函数输入 |
//-----------------------------------------------------------------------------------
// 函数功能 | 组合框
//-----------------------------------------------------------------------------------
// 返回值为 |
//-----------------------------------------------------------------------------------
// 函数作者 |xt
//===================================================================================*/
QGroupBox{
border: 1px solid #636363;
border-radius: 4px;
margin-top: 2ex
}
QGroupBox::title{
subcontrol-origin: margin;
subcontrol-position: top left;
left:10px;
margin-left:0px;
padding:0 1px;
}
/*//===================================================================================
// 函数名称 | QPushButton()
//-----------------------------------------------------------------------------------
// 函数输入 |
//-----------------------------------------------------------------------------------
// 函数功能 | 按钮
//-----------------------------------------------------------------------------------
// 返回值为 |
//-----------------------------------------------------------------------------------
// 函数作者 |xt
//===================================================================================*/
/*View左边按钮,添加一条、多条、插入菜单按钮*/
QPushButton#btnAdd,QPushButton#btnAddMore,QPushButton#btnInsert,QPushButton#btnDel
,QPushButton#btnMoveUp,QPushButton#btnMoveDown,QPushButton#btnOpenCRT,QPushButton#btnSaveCRT
,QPushButton#btnStart,QPushButton#btnFIAStatus{
border-style: none;
border: 2px;
color: #4D4D4D;/*字体颜色*/
padding: 2px;
min-height: 25px;
border-radius:3px;
background: qlineargradient(spread:pad, x1:0, y1:0, x2:0, y2:1, stop:0 #08BA65, stop:1 #009F3C);
}
QPushButton#btnAdd:hover,QPushButton#btnAddMore:hover,QPushButton#btnInsert:hover,QPushButton#btnDel:hover
,QPushButton#btnMoveUp:hover,QPushButton#btnMoveDown:hover,QPushButton#btnOpenCRT:hover,QPushButton#btnSaveCRT:hover
,QPushButton#btnStart:hover,QPushButton#btnFIAStatus:hover{
color: #00DFFF;
}
QPushButton#btnAdd:pressed,QPushButton#btnAddMore:pressed,QPushButton#btnInsert:pressed,QPushButton#btnDel:pressed
,QPushButton#btnMoveUp:pressed,QPushButton#btnMoveDown:pressed,QPushButton#btnOpenCRT:pressed,QPushButton#btnSaveCRT:pressed
,QPushButton#btnStart:pressed,QPushButton#btnFIAStatus:pressed{
color:#083B48;
}
QPushButton#btnAdd:disabled,QPushButton#btnAddMore:disabled,QPushButton#btnInsert:disabled,QPushButton#btnDel:disabled
,QPushButton#btnMoveUp:disabled,QPushButton#btnMoveDown:disabled,QPushButton#btnOpenCRT:disabled,QPushButton#btnSaveCRT:disabled
,QPushButton#btnStart:disabled,QPushButton#btnFIAStatus:disabled{
color:#949499;
}
/*更新、电机设置、导入TXT光谱、导入标准光谱xml按钮*/
QPushButton#btnUpdate,QPushButton#btnSetCurZeroPoint,QPushButton#btnSetOffsetStepToCurZeroPoint
,QPushButton#btnInSpecTxt,QPushButton#btnImportStandXml,QPushButton#btnSaveSpecFcd
{
border-radius:5px;
background-color:rgb(255 , 0 , 0);
border: 1px solid rgb(0 , 0 , 0);
padding:4px;
}
QPushButton#btnUpdate:hover,QPushButton#btnSetCurZeroPoint:hover,QPushButton#btnSetOffsetStepToCurZeroPoint:hover
,QPushButton#btnInSpecTxt:hover,QPushButton#btnImportStandXml:hover,QPushButton#btnSaveSpecFcd:hover
{
background-color:rgb(0 , 0 , 253);
border: 2px solid rgb(255 , 0 , 0);
}
QPushButton#btnUpdate:pressed,QPushButton#btnSetCurZeroPoint:pressed,QPushButton#btnSetOffsetStepToCurZeroPoint:pressed
,QPushButton#btnInSpecTxt:pressed,QPushButton#btnImportStandXml:pressed,QPushButton#btnSaveSpecFcd:pressed
{
background-color:rgb(0, 236 , 237);
border: 2px solid rgb(79 , 173 , 216);
padding-left:2px;
padding-top:2px;
}
/*最大、最小、关闭按钮图标内部填充前景色*/
QPushButton#btnMenu,QPushButton#btnMenu_Min,QPushButton#btnMenu_Max,QPushButton#btnMenu_Close{
border-radius:0px;
color: #F0F0F0;
background-color:rgba(0,0,0,0);
border-style:none;
}
QPushButton#btnMenu:hover,QPushButton#btnMenu_Min:hover,QPushButton#btnMenu_Max:hover{
background-color: qlineargradient(spread:pad, x1:0, y1:1, x2:0, y2:0, stop:0 rgba(25, 134, 199, 0), stop:1 #636363);
}
QPushButton#btnMenu_Close:hover{
background-color: qlineargradient(spread:pad, x1:0, y1:1, x2:0, y2:0, stop:0 rgba(238, 0, 0, 128), stop:1 rgba(238, 44, 44, 255));
}
/*文件、设置、运行、关于按钮前景色*/
QPushButton#menuBtnFile,QPushButton#menuBtnSet,QPushButton#menuBtnRun,QPushButton#menuBtnView,QPushButton#menuBtnAbout {
border-style: none;
border: 0px;
color: #F0F0F0;
padding: 0px;
min-height: 28px;
min-width:80px;
border-radius:0px;
background: qlineargradient(spread:pad, x1:0, y1:0, x2:0, y2:1, stop:0 #4D4D4D, stop:1 #292929);
}
QPushButton#menuBtnFile:menu-indicator,QPushButton#menuBtnSet:menu-indicator,QPushButton#menuBtnRun:menu-indicator,QPushButton#menuBtnView:menu-indicator,QPushButton#menuBtnAbout:menu-indicator{
image:none;
}
QPushButton#menuBtnFile:hover,QPushButton#menuBtnSet:hover,QPushButton#menuBtnRun:hover,QPushButton#menuBtnView:hover,QPushButton#menuBtnAbout:hover{
background: qlineargradient(spread:pad, x1:0, y1:0, x2:0, y2:1, stop:0 #636363, stop:1 #575757);
}
QPushButton#menuBtnFile:pressed,QPushButton#menuBtnSet:pressed,QPushButton#menuBtnRun:pressed,QPushButton#menuBtnView:pressed,QPushButton#menuBtnAbout:pressed{
background: qlineargradient(spread:pad, x1:0, y1:0, x2:0, y2:1, stop:0 #636363, stop:1 #6A6A6A);
}
/*//===================================================================================
// 函数名称 | QCheckBox()
//-----------------------------------------------------------------------------------
// 函数输入 |
//-----------------------------------------------------------------------------------
// 函数功能 | 复选框
//-----------------------------------------------------------------------------------
// 返回值为 |
//-----------------------------------------------------------------------------------
// 函数作者 |xt
//===================================================================================*/
QCheckBox {
spacing: 2px;
}
QCheckBox::indicator {
width: 20px;
height: 20px;
}
QCheckBox::indicator:unchecked {
image: url(image/checkbox_unchecked.png);
}
QCheckBox::indicator:checked {
image: url(image/checkbox_checked.png);
}
/*//===================================================================================
// 函数名称 | QRadioButton()
//-----------------------------------------------------------------------------------
// 函数输入 |
//-----------------------------------------------------------------------------------
// 函数功能 | 单选框
//-----------------------------------------------------------------------------------
// 返回值为 |
//-----------------------------------------------------------------------------------
// 函数作者 |xt
//===================================================================================*/
QRadioButton {
spacing: 2px;
}
QRadioButton::indicator {
width: 15px;
height: 15px;
}
QRadioButton::indicator::unchecked {
image: url(:/Resources/image/radio_normal.png);
}
QRadioButton::indicator::checked {
image: url(:/Resources/image/radio_selected.png);
}
/*//===================================================================================
// 函数名称 | QComboBox()
//-----------------------------------------------------------------------------------
// 函数输入 |
//-----------------------------------------------------------------------------------
// 函数功能 | 下拉框
//-----------------------------------------------------------------------------------
// 返回值为 |
//-----------------------------------------------------------------------------------
// 函数作者 |xt
//===================================================================================*/
QComboBox,QDateEdit{
border-radius: 3px;
padding: 1px 10px 1px 5px;
border: 1px solid #636363;
}
QComboBox::drop-down,QDateEdit::drop-down {
subcontrol-origin: padding;
subcontrol-position: top right;
width: 15px;
border-left-width: 1px;
border-left-style: solid;
border-top-right-radius: 3px;
border-bottom-right-radius: 3px;
border-left-color: #636363;
}
QComboBox::down-arrow,QDateEdit::down-arrow {
image: url(:/Resources/image/array_down.png);
}
/*//===================================================================================
// 函数名称 | QMenu()
//-----------------------------------------------------------------------------------
// 函数输入 |
//-----------------------------------------------------------------------------------
// 函数功能 | QMenu边框
//-----------------------------------------------------------------------------------
// 返回值为 |
//-----------------------------------------------------------------------------------
// 函数作者 |xt
//===================================================================================*/
QMenu {
background-color:#F0F0F0;
margin: 0px;
border:1px solid #4D4D4D;
}
QMenu::item {
padding: 2px 12px 2px 12px;
height:22;
}
QMenu::indicator {
width: 13px;是
height: 13px;
}
/*QMenu选项颜色*/
QMenu::item:selected {
color: #F0F0F0;
background: qlineargradient(spread:pad, x1:0, y1:0, x2:0, y2:1, stop:0 #4D4D4D, stop:1 #292929);
}
/*QMenu分割线*/
QMenu::separator {
height: 1px;
background: #636363;
}
/*//===================================================================================
// 函数名称 | QProgressBar()
//-----------------------------------------------------------------------------------
// 函数输入 |
//-----------------------------------------------------------------------------------
// 函数功能 | 进度条
//-----------------------------------------------------------------------------------
// 返回值为 |
//-----------------------------------------------------------------------------------
// 函数作者 |xt
//===================================================================================*/
QProgressBar {
border-radius: 5px;
text-align: center;
text-size:14pt;
border: 1px solid #636363;
}
QProgressBar::chunk {
width: 5px;
background-color: #007F00;
}
/*//===================================================================================
// 函数名称 | QSlider()
//-----------------------------------------------------------------------------------
// 函数输入 |
//-----------------------------------------------------------------------------------
// 函数功能 | 滑动条
//-----------------------------------------------------------------------------------
// 返回值为 |
//-----------------------------------------------------------------------------------
// 函数作者 |xt
//===================================================================================*/
QSlider::groove:horizontal,QSlider::add-page:horizontal {
background: #808080;
height: 8px;
border-radius: 3px;
}
QSlider::sub-page:horizontal {
height: 8px;
border-radius: 3px;
background: qlineargradient(spread:pad, x1:0, y1:0, x2:0, y2:1, stop:0 #4D4D4D, stop:1 #292929);
}
QSlider::handle以上是关于Qt系列——优美界面设计实现不同换肤的主要内容，如果未能解决你的问题，请参考以下文章