【QT】qss控件样式设置大全

最新推荐文章于 2024-04-25 11:30:45 发布

颢师傅

最新推荐文章于 2024-04-25 11:30:45 发布

阅读量1.2k

点赞数

分类专栏： qt 文章标签： qt qss c++

本文链接：https://blog.csdn.net/hh1357102/article/details/126278242

版权

qt 专栏收录该内容

70 篇文章 5 订阅

订阅专栏

#style.qss文件：

/*变量定义 START========================================================================*/
$normalColor=rgb(255,255,255);
$backgroundColor=rgb(26, 39, 34);
$hoverColor=rgb(34, 78, 61);

/*变量定义 END========================================================================*/

/*全局样式设置 START*/
/*顶级widget样式 START========================================================================*/
QWidget{color: $normalColor;font: 18px "Microsoft YaHei";} /*默认颜色为白色*/

QWidget:disabled{color: rgb(172, 172, 172);}

/*顶级标题title样式 START========================================================================*/
MyTitleLabel{color: #31FF95;}
ClickedWidgetForMeu{color: #31FF95;}


/*顶级QPushButtont样式 START========================================================================*/
QPushButton:checked{background-color: rgb(66, 100, 88,100);}
QPushButton{background:transparent;border:none;color: $normalColor;border-radius:4px;}


/*顶级QTreeWidget样式 START========================================================================*/
QTreeWidget{border:none;}

QTreeWidget::item{color:rgb(255,255,255);padding:4px;height:23px}

QTreeWidget::item:selected,QTreeWidget::item:hover{background-color: $hoverColor;}

QTreeView::branch:has-children:!has-siblings:closed,QTreeView::branch:closed:has-children:has-siblings{border-image: none; image: url(:/image/mainwindow/展开.png);}

QTreeView::branch:open:has-children:!has-siblings,QTreeView::branch:open:has-children:has-siblings{border-image: none; image: url(:/image/mainwindow/收缩.png);}

QTreeWidget::indicator
{
	Width:15px;
	Height:15px;
	border:1px solid rgb(41,112,74);
	border-radius:2px;
}

QTreeWidget::indicator:unchecked
{
	border:1px solid rgb(41,112,74);border-radius:2px
}

QTreeWidget::indicator:checked:hover
{
    border:1px solid rgb(24,144,255);border-radius:2px
}

QTreeWidget::indicator:checked
{
	background-color: rgb(34, 78, 61);
	border:1px solid rgb(34, 78, 61);border-radius:2px;
	border-image: url(:/image/mainwindow/tree/对钩.png);
}

QTreeWidget::indicator:indeterminate:pressed
{
    border-image: url(:/image/mainwindow/tree/正方形.png);
}


/*顶级QTableWidget样式 START========================================================================*/
/*表头样式*/
QTableView::item:selected{background-color:rgba(29,58,46);}

QHeaderView::section           
{               
	color:rgb(255, 255, 255);
	background-color: rgb(33, 80, 58);
	min-height:40px;
	max-height:40px;
	margin-left:0px;
	padding-left:4px;

	border-left:0px solid rgba(0, 110, 89, 200);
	border-right:0px solid rgba(0, 110, 89, 200);
	border-bottom:0px solid rgba(0, 110, 89, 200);
	border-top:0px solid rgba(0, 110, 89, 200);
}

QHeaderView::section:first,QHeaderView::section::middle      
{
	border-left:0px solid rgba(0, 110, 89, 200);
	border-right:1px solid rgba(56, 95, 72, 250);
	border-bottom:1px solid rgba(56, 95, 72, 250);
	border-top:0px solid rgba(0, 110, 89, 200);          
}

QTableWidget                  
{         
	border-left:1px solid rgba(56, 95, 72, 250);
	border-right:1px solid rgba(56, 95, 72, 250);
	border-bottom:1px solid rgba(56, 95, 72, 250);
	border-top:1px solid rgba(56, 95, 72, 250);                             
	color:rgb(255,255,255);
	gridline-color:rgba(56, 95, 72, 250);  
	background-color: rgb(27, 50, 43);
	outline:0px;
}

QTableView
{
	outline:0px;
}

QTreeView
{
	outline:0px;
}

/*上下箭头 START========================================================================*/
QDateTimeEdit::up-button,QTimeEdit::up-button,QDoubleSpinBox::up-button,QSpinBox::up-button {subcontrol-origin:border;
    subcontrol-position:right top;  
    image: url(:/image/mainwindow/上箭头-box用.png);  
    width: 12px;
    height: 12px;
	margin:4px;
}


QDateTimeEdit::down-button,QTimeEdit::down-button,QDoubleSpinBox::down-button,QSpinBox::down-button {subcontrol-origin:border;
    subcontrol-position:right bottom;
    image: url(:/image/mainwindow/下箭头-box用.png);  
    width: 12px;
    height: 12px;
	margin:4px;
}

QDateTimeEdit,QTimeEdit,QSpinBox,QDoubleSpinBox{border:1px solid #2b784e;border-radius:4px;color:rgb(255,255,255);background:transparent;padding-left:6px;}

/*QComboBox样式 START========================================================================*/
QComboBox{color: #FFFFFF;background:transparent;padding-left:0px;border:1px solid rgb(41,112,74);border-radius:4px;}
QComboBox::drop-down{border:none} 
QComboBox::down-arrow{margin-right:10px; width:16px;height:16px;border-image: url(:/image/mainwindow/向下箭头.png);}
QComboBox::down-arrow:on{margin-right:10px; width:16px;height:16px; border-image: url(:/image/mainwindow/向上箭头.png);}

/*QComboBox QFrame{background-color:#4be26e;border:none;}*/
QComboBox QAbstractItemView {color:white;background-color:rgb(18, 55, 44);outline:0px;border:none;padding-left:0px;/*边距（还有其他方向边距设置方式）*/} 

/* 下拉后，整个下拉窗体每项的样式 */
QComboBox QAbstractItemView::item {
    height: 40px;   /* 项的高度（设置pComboBox->setView(new QListView());后，该项才起作用） */
	color: #FFFFFF;
	padding-left:0px;
}
 
/* 下拉后，整个下拉窗体越过每项的样式 */
QComboBox QAbstractItemView::item:hover,QComboBox QAbstractItemView::item:selected {
    height: 40px;   /* 项的高度（设置pComboBox->setView(new QListView());后，该项才起作用） */
	color: #FFFFFF;
	padding-left:0px;
    background-color: rgb(34,78,61);   /* 整个下拉窗体越过每项的背景色 */
}

QComboBox:hover{border:1px solid rgb(34,160,108);border-radius:4px}

/*滚动条样式 START========================================================================*/
/*纵向滚动条样式*/
QScrollBar:vertical{
	border-style: solid;
	/* 纵轴-总体背景颜色 */
    background:transparent;
	/* 纵轴-总体背景圆角 */
    border-radius: 5px;
	/* 纵轴-总体宽度 */
    min-width: 10px;
    max-width: 10px;
}
QScrollBar::handle:vertical{
	/* 纵轴-凸出部分背景颜色 */
    background: #22A06C;
	/* 纵轴-凸出部分背景圆角 */
    border-radius: 5px;
	/* 纵轴-凸出最新高度 */
    min-height: 30px;
}

QScrollBar::handle:vertical:hover{
	/* 纵轴-凸出部分触发背景颜色 */
    background: rgb(4,250,150);
}

/*横向滚动条样式*/
QScrollBar:horizontal{
	border-style: solid;
	/* 横轴-总体背景颜色 */
    background:transparent;
	/* 横轴-总体背景圆角 */
    border-radius: 5px;
	/* 横轴-总体宽度 */
    min-height: 10px;
    max-height: 10px;
}
QScrollBar::handle:horizontal{
	/* 横轴-凸出部分背景颜色 */
    background: #22A06C;
	/* 横轴-凸出部分背景圆角 */
    border-radius: 5px;
	/* 横轴-凸出最新高度 */
    min-width: 30px;
}

QScrollBar::handle:horizontal:hover{
	/* 横轴-凸出部分触发背景颜色 */
    background: rgb(4,250,150);
}

QScrollBar::add-page,
QScrollBar::sub-page{
    background: transparent;
}
QScrollBar::add-line,
QScrollBar::sub-line{
    background: transparent;
}

/*提示框样式*/
QToolTip{border:1px solid #2b784e; background-color: rgb(34,81,59); color:rgb(255,255,255);border-radius:4px;}
		
/*全局样式设置 End*/

在QT的自定义QApplication类中进行引用：

void MyApplication::readStyleSheetFile()
{
    QFile styleFile(":/style/style.qss");
    if(styleFile.open(QIODevice::ReadOnly))
    {
        QString sStyleSheet(styleFile.readAll());
        QMap <QString,QString> colorValue;
        QList <QString> key;
        while (sStyleSheet.indexOf("*/") != -1) {//去掉注释
            int i = sStyleSheet.indexOf("/*");
            int j = sStyleSheet.indexOf("*/");
            sStyleSheet.remove(i,j+2-i);
        }
        while (sStyleSheet.indexOf("$") != -1) {//把变量值记录到容器里
            int i = sStyleSheet.indexOf("$");
            int j = sStyleSheet.indexOf("=");
            int k = sStyleSheet.indexOf(";");
            if(j>k || j==-1){
                break;
            }
            colorValue[sStyleSheet.mid(i,j-i-1)] = sStyleSheet.mid(j+1,k-j-1);
            key<<sStyleSheet.mid(i,j-i-1);
            sStyleSheet.remove(0,k+1);
        }
        for (int i = 0;i<key.length();i++) {//替换原来样式表里的变量为真实值
            while (sStyleSheet.indexOf(key[i]) != -1) {
                sStyleSheet.replace(sStyleSheet.indexOf(key[i]),key[i].length()+1,colorValue[key[i]]);
            }
        }
        this->setStyleSheet(sStyleSheet);
        styleFile.close();
    }
    else
    {
        qDebug("Open failed");
    }
}