常用QSS
发布日期:2021-11-15 14:57:52 浏览次数:28 分类:技术文章

本文共 3558 字,大约阅读时间需要 11 分钟。

关于QPushButton的样式表

QPushButton

{

background-color: rgb(134,183,200); //背景色

border:2px solid #5F92B2; //边界和边界颜色

border-radius:5px; //边界圆滑

color:white; //字体颜色

}

 

QPushButton:hover

{

background-color: rgb(0,130,150); //伪状态经过时背景色

border:2px solid #5F92B2; //边界和边界颜色

border-radius:5px; //边界圆滑

color:white; //字体为白色

}

 

QPushButton:hover:pressed

{

background-color:rgb(85,170,255); //伪状态,点击时的背景色

border:2px solid #3C80B1; //

border-radius:5px;

color:white;

}

 

关于QComboBox的样式表

QComboBox

{

color:white; //设置字体颜色

min-height: 50px; //设置最小高度

min-width: 60px; //设置最小宽度

background-color:transparent; //背景色

selection-background-color: rgb(80, 80, 80); //选中背景色

}

QComboBox QAbstractItemView

{

font:14px; //下拉列表中的字体大小

selection-color:white; //选中时的字体颜色

selection-background-color:rgb(80, 80, 80); //选中背景色

background-color:rgb(80, 80, 80); //背景色

}

QComboBox QAbstractItemView::item

{

color:white; //item的字体颜色

min-height: 50px; //item的最小高度

min-width: 60px; //item的最小宽度

}

 

QComboBox::down-arrow

{

image:url(:/image/image/down.png); //设置下拉的按钮样式图片

 

}

QComboBox::drop-down

{

border:0px; //设置下拉按钮边界宽度为0,将阴影边界取出

min-width: 40px; //设置下拉按钮宽度

}

如果设置列表样式可以选择使用设置视图

ui->comboBox->setView(new QListView());

效果如下:

 

 

关于QSlider的样式表

QSlider::groove:horizontal

{

border: 1px solid #999999; //边界

height: 20px; //高度

background: qlineargradient(x1:0, y1:0, x2:0, y2:1, stop:0 #B1B1B1, stop:1 #c4c4c4); //设置颜色渐变

margin: 2px 0; //页边距

}

QSlider::handle:horizontal

{

border-image: url(:/image/image/image/Slider.png); //滑动条图片

 

width: 25px; //滑动条宽度

height:20px; //滑动条高度

margin: -2px 0; //页边距

border-radius: 3px; //边界圆滑

}

QSlider::add-page:horizontal

{

background: white; //添加页面的背景色,也就是未滑动的背景色

}

QSlider::sub-page:horizontal

{

background- color:qlineargradient(spread:pad, x1:0, y1:0, x2:1, y2:0, stop:0 rgba(231,80,229, 255), stop:1 rgba(7,208,255, 255)); //滑动后的背景色

}

效果如下:

 

关于QProgressBar的样式表

QProgressBar

{

border: 2px solid grey; //边界色

border-radius: 5px; //边界圆滑

text-align: center; //文字居中

}

 

QProgressBar::chunk

{

background-color: #CD96CD; //背景色

width: 10px; //宽度

margin: 0.5px; //页边距

}

效果如下:

关于QMenu的样式表

QMenu

{

background-color:qlineargradient(x1: 0, y1: 0, x2: 0.7, y2: 0.7,stop: 0.5 #FF92BB, stop: 1 white); //背景色

}

 

QMenu::item:selected

{

background-color:rgb(40,150,200); //选中色

}

效果如下:

关于QListWidget的样式表

QListWidget::item

{

height:40px; //每个item的高度

font-size:20px; //字体大小

}

 

QListWidget::item::hover

{

background-color:rgb(9,150,200,100); //伪状态,鼠标经过背景色

}

 

QListWidget::item:selected

{

background: qlineargradient(x1: 0, y1: 0, x2: 0, y2: 1, stop: 0 #6ea1f1, stop: 1 #567dbc); //选中背景色

}

效果如下:

 

关于QTreeWidget的样式表

QTreeWidget::item

{

height:40px; //item高度

font-size:20px; //item字体大小

}

 

QTreeWidget::item::hover

{

background-color:rgb(9,150,200,100); //鼠标经过

}

 

QTreeWidget::item:selected

{

background: qlineargradient(x1: 0, y1: 0, x2: 0, y2: 1, stop: 0 #6ea1f1, stop: 1 #567dbc);//选中色

}

 

关于QGroupBox的样式表

QGroupBox

{

border-radius: 5px;

border-width: 1px;

border-style: solid;

border-color: darkCyan;

margin-top: 5px;

}

 

QGroupBox::title

{

subcontrol-origin: margin;

subcontrol-position: top center;

padding: 0 3px;

margin-top: 0px;

}

 

关于QTabBar的样式表

QTabBar::tab

{

min-width:100px;

color: white;

background-color:qlineargradient(x1: 0, y1: 0, x2: 0.7, y2: 0.7,stop: 0.3 rgb(40,150,200,160),stop: 0.6 rgb(40,150,200,220),stop:1 rgb(40,150,200,255));

border: 0px solid;

border-top-left-radius: 10px;

border-top-right-radius: 10px;

padding:5px;

}

 

QTabBar::tab:!selected

{

margin-top: 5px;

}

 

QTabBar::tab:selected

{

color: white;

font-size:14px;

font-weight:bold;

}、

效果如下图:

 

去除表格中的虚线

*{

outline:0px;

}

 

 

 

转载至

 

C++交流群:585225803

转载地址:https://blog.csdn.net/qq_39742146/article/details/84244756 如侵犯您的版权,请留言回复原文章的地址,我们会给您删除此文章,给您带来不便请您谅解!

上一篇:Qt鼠标
下一篇:Qt日历中星期栏只显示一二三。。。。

发表评论

最新留言

初次前来,多多关照!
[***.217.46.12]2024年05月03日 20时01分34秒