关于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;
}
转载至https://note.youdao.com/share/?id=c12726e82660a9ed208783755c2a15d7&type=note#/
C++交流群:585225803