Qt控件QSS示例以及介绍

Qt中样式设置大全:

颜色配色大全参考网址:https://www.mdui.org/docs/color

1类选择器

基本语法:

selector{attribute:value};

在上面这条语句中,selector代表选择器,指明了哪个控件将会受到规则影响,{attribute:value;}代表声明语句,其中attribute代表属性,value表示该属性的值。

例如:

QPushButton{color:red;}表示将我们的应用程序中的所有QPushButton对象以及他的子类对象应该使用red作为他们的前景色(字体颜色);

选择器

通用选择器(又叫通配符选择器)

格式:

==*{属性:值}==他表示程序中所有的widget

注意点:由于通用选择器会匹配程序中所有的widgets,效率低,因此应该尽量少用或者不适用通用选择器。

类选择器

格式:

类名{属性:值;}

类名即Widget类名,由QObject::metaObject::className()获取,类型选择器匹配所有该类及派生类的对象,例如

QPushButton{
	color:bule;
}

注意点:

Qt样式表使用widget的QObject::className()来决定何时应用类型选择器。当自定义控件在命名空间之中,QObject::className()会返回(:,这与后面介绍的子控件选择器相冲突,为了解决这个问题,当为命名空间中widget使用类型选择器时,我们必须将::替换为–,例子如下:

namespace ns{
	class MyPushButton:public QPushButton{
		//..
	}
}

qApp->setStyleSheet("ns--MyPushButton{backgroyund:yellow;}");
一般用法

类型选择器会匹配所有该类以及该类的派生类的对象, 所以我们在程序中,有时为了统一一些具有相似性的控件的样式,可以使用类型选择器,如,我们想要QSpinBox,QDoubleSpinBox,QDateTimeEdit等这些编辑框的控件设置一些相同的样式,因为他们都是QAbstractSpinBox类的派生类,因此可以如下写:

QAbstractSpinBox{
	min-height:30px;
	max-height:30px
}
类选择器

格式:.类名{属性:值;}

这里的类名与类型选择器的类名一样,不同的是,类选择器的类名前面有一个(.),这种选择器只会匹配该类的所有对象,而不会匹配其派生类的对象。

.QPushButton{
	colod:blue;
}
一般用法

类选择器提供了一种匹配所有该类的对象但不会匹配派生类的方法,通常用来特例化拥有派生类的类对象。例如在我的程序中,用QFram来作为容器widget,此时我想对他设置一些样式,但又不影响其他子类对象(QLable,QAbstractScrollArea等等),那么我可以使用类选择器给所有的QFram设置相同的样式。例如

.Fram{
	background-color:red;
    padding:15px 25px;
}
ID选择器
格式#id{属性:值;}

这里的id指的是objectName,每个QObject类及其派生类都有的一个属性,“#”+objectName构成了我们的ID选择器,他匹配所有objectName为ID选择器所指定名称的对象。例如:

#QPushButton{
	color:red;
}

QT官方给出的ID选择器格式为:类名#id{属性:值;}

但实际上不加类名也是可以的,在正式开发中,还是建议加上类名,这样可以提高阅读性。

后代选择器

格式 选择器1 选择器2{属性:值;}

这个选择器表示:在选择器1匹配的所有对象中,找到选择器2所匹配的后代对象,并给他们设置样式。

注意点:

后代选择器必须用空格隔开每个选择器。

后代选择器可以通过空格一直延续下去 例如:选择器1 选择器2 选择器3 。。 选择器N{属性:值;}

并集选择器

格式 选择器1,选择器2,选择器3{属性:值;}

并集选择器表示,将每个单独选择器匹配到的控件放在同一个结果集中,并给结果集中的每个控件都设置声明语句中的样式。

注意点:

并集选择器必须使用“,”来连接不同的选择器

并集选择器可以使用类选择器,类型选择器,id选择器,属性选择器等。

例如

.QLineEdit,.QComboBox{
	border:1px solid gray;
	background-color:white;
}

优先级

当一个控件被多个选择器选中并且设置了相同的属性(值不同)时,不能仅仅根据设置样式语句出现的先后顺序进行层叠,那么控件的样式将无法确定,一般通过进行选择器优先级的判定。

第一步 : 设置方式所产生的优先级问题

在CSS中,有如下层叠优先级规则:

​ 内联样式>内部样式>外部样式>浏览器缺省

而且QSS中,这个规则表现为:

​ 给控件直接设置的样式>给QApplication设置的样式

就是说,调用控件的setStylesheet设置的样式的优先级永远高于给QApplication设置的样式,即使QApplication中的选择器优先级更高。

盒模型

什么是盒模型?

盒模型仅仅是一个形象的比喻,所有的widget都被看做是一个“盒子”,一个盒子包括:外边距,边框,内边距,和实际内容,他们可以看做是有包含关系的矩形,并且这种包含关系是固定不变的。

Margin(外边距) – 与其他盒子之间的距离

Border(边框) – 外边距与内边距之间的区域,边框有自己的颜色不会受到盒子的背景颜色的影响

Padding(内边距) – 内容和边框之间的区域,会受到背景颜色的影响

Content(内容)–盒子的内容,显示文本,图像或其他空间

除了内容外,其他三个部分均不能单独设置颜色,只能设置其宽度,并且是以像素为单位。

QLineEdit中添加图片做登录界面

QAction *userAction = new QAction(ui->let_User);
userAction->setIcon(QIcon(":/Image/user.png"));
ui->let_User->addAction(userAction,QLineEdit::LeadingPosition);

1.QTableView样式设置

border:边框;

background:背景色;

1.选中设置:
QTableView::item:selected
{
    background:rgb(0,0,100);//背景色
    color:white;
}
2.表头设置
QHeaderView::section:first
{
    border-image: url(:/images/expand/tempUser_headBg2.png);
    height: 30px;
    font: 11pt "微软雅黑";
}
QHeaderView::section:middle
{
    border-image: url(:/images/expand/tempUser_headBg2.png);
    height: 30px;
    font: 11pt "微软雅黑";
}
 
QHeaderView::section:last
{
    border-image: url(:/images/expand/tempUser_headBg4.png);
    height: 30px;
    font: 11pt "微软雅黑";
}
3.滚动条设置:
QScrollBar:vertical {
    border: 0px;
    background:rgba(255,255,255,0);
    border-image:url(:/images/scrollbar/vertical_scrollBg.png);
    width: 22px;
    margin: 22px 0  22px 0;//边距
}
 
QScrollBar::handle:vertical {
     border-image:url(:/images/scrollbar/vertical_slide.png);
    width:22px;
	min-height:50px;
	max-height:200px;
 }
 
QScrollBar::handle:vertical:hover {
    border-image: url(:/images/scrollbar/vertical_slide_hover.png);
     width:22px;
	min-height:50px;
	max-height:200px;
 }
 
QScrollBar::handle:horizontal:hover {
    border-image: url(:/images/scrollbar/slide.png);
    width:22px;
	min-height:35px;
 }
 
QScrollBar::handle:vertical:hover {
     border-image:url(:/images/scrollbar/vertical_slide_hover.png);
    width:22px;
 }
 
 QScrollBar::add-line:vertical {
     border-image:url(:/images/scrollbar/vertical_down.png);
     height: 22px;
     subcontrol-position: bottom;
     subcontrol-origin: margin;
 
 }
 QScrollBar::add-line:vertical:pressed{
     border-image:url(:/images/scrollbar/vertical_down_down.png);
     height: 22px;
     subcontrol-position: bottom;
     subcontrol-origin: margin;
 
 }
 QScrollBar::sub-line:vertical {
      border-image:url(:/images/scrollbar/vertical_up.png);
     height:22px;
     subcontrol-position: top;
     subcontrol-origin: margin;
 }
 QScrollBar::sub-line:vertical:pressed {
      border-image:url(:/images/scrollbar/vertical_up_down.png);
     height: 22px;
     subcontrol-position: top;
     subcontrol-origin: margin;
 }
QScrollBar::add-page:vertical, QScrollBar::sub-page:vertical {
     background: none;
 }
 
QScrollBar:horizontal {
    border: 0px;
    background:rgba(255,255,255,0);
    border-image:url(:/images/scrollbar/scrollBg.png);
    height: 22px;
    margin: 0 22px 0  22px;
}
 
QScrollBar::handle:horizontal {
     border-image:url(:/images/scrollbar/slide.png);
    height:22px;
 }
 
QScrollBar::handle:vertical:hover {
     border-image:url(:/images/scrollbar/vertical_slide_hover.png);
    width:22px;
 }
 
 QScrollBar::add-line:horizontal {
     border-image:url(:/images/scrollbar/down.png);
     width: 22px;
     subcontrol-position: right;
     subcontrol-origin: margin;
 
 }
 QScrollBar::add-line:horizontal:pressed{
     border-image:url(:/images/scrollbar/down_down.png);
     width: 22px;
     subcontrol-position: right;
     subcontrol-origin: margin;
 
 }
 QScrollBar::sub-line:horizontal {
      border-image:url(:/images/scrollbar/up.png);
     width:22px;
     subcontrol-position: left;
     subcontrol-origin: margin;
 }
 QScrollBar::sub-line:horizontal:pressed {
     border-image:url(:/images/scrollbar/up_down.png);
     width: 22px;
     subcontrol-position: left;
     subcontrol-origin: margin;
 }
QScrollBar::add-page:horizontal, QScrollBar::sub-page:horizontal {
     background: none;
 }

2.QComboBox样式设置

1.未下拉时,QComboBox的样式:
QComboBox {
    border: 1px solid gray;   /* 边框 */
    border-radius: 3px;   /* 圆角 */
    padding: 1px 18px 1px 3px;   /* 字体填衬 */
    color: #000;
    font: normal normal 15px "Microsoft YaHei";
    background: transparent;
}
2.下拉后,整个下拉窗体样式
QComboBox QAbstractItemView {
    outline: 0px solid gray;   /* 选定项的虚框 */
    border: 1px solid yellow;   /* 整个下拉窗体的边框 */
    color: green;
    background-color: red;   /* 整个下拉窗体的背景色 */
    selection-background-color: lightgreen;   /* 整个下拉窗体被选中项的背景色 */
}
3.下拉后,整个下拉窗体每项的样式
QComboBox QAbstractItemView::item {
    height: 50px;   /* 项的高度(设置pComboBox->setView(new QListView());后,该项才起作用) */
}
4.下拉后,整个下拉窗体越过每项的样式
QComboBox QAbstractItemView::item:hover {
    color: #FFFFFF;
    background-color: lightgreen;   /* 整个下拉窗体越过每项的背景色 */
}
5.下拉后,整个下拉窗体被选择的每项的样式
QComboBox QAbstractItemView::item:selected {
    color: #FFFFFF;
    background-color: lightgreen;
}
6.QComboBox中的垂直滚动条
QComboBox QAbstractScrollArea QScrollBar:vertical {
    width: 10px;
    background-color: #d0d2d4;   /* 空白区域的背景色  灰色green */
}

QComboBox QAbstractScrollArea QScrollBar::handle:vertical {
    border-radius: 5px;   /* 圆角 */
    background: rgb(160,160,160);   /* 小方块的背景色深灰lightblue */
}

QComboBox QAbstractScrollArea QScrollBar::handle:vertical:hover {
    background: rgb(90, 91, 93);   /* 越过小方块的背景色yellow */
}
7.点击QComboBox
QComboBox:on {
}
8.下拉框样式
QComboBox::drop-down {
    subcontrol-origin: padding;   /* 子控件在父元素中的原点矩形。如果未指定此属性,则默认为padding。 */
    subcontrol-position: top right;   /* 下拉框的位置(右上) */
    width: 15px;   /* 下拉框的宽度 */

    border-left-width: 1px;   /* 下拉框的左边界线宽度 */
    border-left-color: darkgray;   /* 下拉框的左边界线颜色 */
    border-left-style: solid;   /* 下拉框的左边界线为实线 */
    border-top-right-radius: 3px;   /* 下拉框的右上边界线的圆角半径(应和整个QComboBox右上边界线的圆角半径一致) */
    border-bottom-right-radius: 3px;   /* 同上 */
}
9.越过下拉框样式
QComboBox::drop-down:hover {
   background: yellow;
 }
10.下拉箭头样式
QComboBox::down-arrow 
{ 
width: 15px; /* 下拉箭头的宽度(建议与下拉框drop-down的宽度一致) */ background: transparent; /* 下拉箭头的的背景色 */ padding: 0px 0px 0px 0px; /* 上内边距、右内边距、下内边距、左内边距 */ 
image: url(:/images/combobox_arrow_down.png); } /* 点击下拉箭头 */ 
QComboBox::down-arrow:on 
{ image: url(:/images/combobox_arrow_up.png); /* 显示下拉箭头 */
}

3.QTabWidge样式表设置

QTableWidget

{	

}
QTabBar::tab//表头

{
	height:px;

	font_size:px;

	border-image:url();
}
QTabBar::tab:selected、、选择表头时的状态
{
    border-image:url();
    border-bottom:4px solid red;//下划线
}

4.QToolButton样式设置

---QtoolButton原始样式
QToolButton
{
	padding-left:0px;
}
---悬浮样式
QToolButton:hover
{
	border-image:url( )
}
---按下样式
QToolButton:pressed
{

}
--无效样式
QToolButton:disabled
{

}
--菜单栏按钮(包括下拉按钮)
QToolButton:menu-button
{
	--设置下拉箭头宽度
	width:15px;
	border-top-right-radius:0px;--圆角半径
}
--下拉框图标
QToolButton::menu-arrow
{
	image:url( );
}

5.QSpinBox,QDoubleSpinBox,QDateTimeEdit样式设置

--开始
QSpinBox,QDoubleSpinBox,QDateTimeEdit
{
	font-size:12px;
}
--无效样式
QSpinBox:disabled
{
}
--焦点
QSpinBox::focus
{
}
--上按钮
QSpinBox::up-button:hover
{
}
--下按钮
QSpinBox::down-button
{
}

6.QCheckBox样式设置

--未勾选状态
QCheckBox::indicator:unchecked
{
	image:url( )
}
--勾选状态
QCheckBox::indicator:checked
{
	image:url( )
}
--未勾选hover状态,图片设置
QCheckBox::indicator:unchecked:hover
{
	image:url( )
}
--勾选hover状态,图片设置
QCheckBox::indicator:checked:hover
{
	image:url( )
}
--部分选中
QCheckBox::indicator:indeterminate
{
	image:url( )
}
QCheckBox::indicator:indeterminate:hover
{
	image:url( )
}
QCheckBox::indicator:indeterminate:disabled
{
	image:url( )
}
--正常样式
QCheckBox
{
}
--悬浮样式
QCheckBox:hover
{
}
--未使能样式
QCheckBox:disabled
{
}

7.样式实例

[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-9okIs7Dh-1633950461751)(C:\Users\ASUS\AppData\Roaming\Typora\typora-user-images\image-20200820153106207.png)]

QWidget
{
	color:#64FFDA;
}
QLineEdit
{
	border:1px solid #01AFEB;
	border-radius:1px;
	padding:0px 0px 0px 10px;
	min-width:5em;
	font: 14px "Microsoft YaHei";
	color:#64FFDA;
	background-color:rgba(0,23,57,127);
}
QTextEdit
{
	border:1px solid #01AFEB;
	border-radius:1px;
	padding:0px 0px 0px 10px;
	min-width:5em;
	font: 14px "Microsoft YaHei";
	color:#64FFDA;
	background-color:rgba(0,23,57,127);
}
QComboBox
{
	border:1px solid #01AFEB;
	border-radius:1px;
	padding:0px 0px 0px 10px;
	min-width:5em;
	font:14px "Microsoft YaHei";
	color:#64FFDA;
	background-color:rgba(0,23,57,127);
}
QComboBox::drop-down
{
	subcontrol-origin:padding;
	subcontrol-position:top right;
	width:30px;
	border-left-width:0px;
	border-top-right-radius:3px;
	border-bottom-right-radius:3px;
	image:url(://image);
}
QComboBox::drop-arrow{image:url(://image);}
QComboBox::drop-arrow:hover {image:url(://image);}
QComboBox QAbstractItemView
{
	border: 1px solid #01AFEB;
	selection-color:white;
	selection-background-color:#03A9F4;
	outline:0px solid gray;
	background-color:#0f1a33;
	outline:0px;
}
QComboBox QAbstractItemView::item
{
	height:30px;
	min-height:30px;
	font:25 11pt "Microsoft YaHei";
	border-color:transparent;
}
QPushButton
{
	color:white;
	border:none;
	height:28px;
	width:93px;
	background-image:url(://);
}
QPushButton:hover
{
	color:orange
	background-image:url(://);
}
QTabWidget
{
	border-top:2px;
	background-image:url(://);
}
QTabBar::tab
{
	width:150px;
	height:30px;
	font-size:16px;
	border-image:url(://);
}
QTabBar::tab:selected
{
	height:30px;
	font-size:16px;
	border-image:url(://);
}
QTableView
{
	color:#64FFDA;
	background-image:url();
	Border:1px solid #80DEEA;
	gridline-color:lightgray;
}
QTableView::item:selected
{
	background-color:#A1887F;
}

QPushButton

QPushButton {
        /* 水平居左、垂直居中 */
        text-align: left center;
        padding-left: 3px;
}
QPushButton::menu-indicator {
        subcontrol-position: right center;
        subcontrol-origin: padding;
        padding-right: 3px;
        /* image: none; */
}

QRadioButton

QRadioButton{
    spacing: 2px;
    color: white;
}
QRadioButton::indicator {
    width: 45px;
    height: 30px;
}
QRadioButton::indicator:unchecked {
    image: url(:/Images/switchOff);
}
QRadioButton::indicator:unchecked:hover {
    image: url(:/Images/switchOffHover);
}
QRadioButton::indicator:unchecked:pressed {
    image: url(:/Images/switchOffPressed);
}
QRadioButton::indicator:checked {
    image: url(:/Images/switchOn);
}
QRadioButton::indicator:checked:hover {
    image: url(:/Images/switchOnHover);
}
QRadioButton::indicator:checked:pressed {
    image: url(:/Images/switchOnPressed);
}

QSlider

QSlider::groove:horizontal {
        height: 6px;
        background: qlineargradient(x1: 0, y1: 0, x2: 0, y2: 1, stop: 0 rgb(124, 124, 124), stop: 1.0 rgb(72, 71, 71));
}
QSlider::handle:horizontal {
        width: 1px;
        background: rgb(0, 160, 230);
        margin: -6px 0px -6px 0px;
        border-radius: 9px;
}
QSlider::NoTicks 0 不绘制任何刻度线
QSlider::TicksBothSides 3 在滑块的两侧绘制刻度线
QSlider::TicksAbove 1 在(水平)滑块上方绘制刻度线
QSlider::TicksBelow 2 在(水平)滑块下方绘制刻度线
QSlider::TicksLeft TicksAbove 在(垂直)滑块左侧绘制刻度线
QSlider::TicksRight TicksBelow 在(垂直)滑块右侧绘制刻度线

pSlider->setTickPosition(QSlider::TicksAbove); *//刻度在上方=

https://blog.csdn.net/liang19890820/article/details/50277095

你可能感兴趣的:(qt)