Qt控件QSS示例以及介绍

最新推荐文章于 2024-05-30 15:36:54 发布

王利鹏001

最新推荐文章于 2024-05-30 15:36:54 发布

阅读量1.5k

点赞数 1

文章标签： qt

本文链接：https://blog.csdn.net/RDC01/article/details/120709585

版权

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

王利鹏001

关注

1
点赞
踩
8

收藏

觉得还不错? 一键收藏
0
评论
Qt控件QSS示例以及介绍

Qt中样式设置大全：颜色配色大全参考网址：https://www.mdui.org/docs/color1类选择器基本语法:selector{attribute:value};在上面这条语句中，selector代表选择器，指明了哪个控件将会受到规则影响，{attribute:value;}代表声明语句，其中attribute代表属性，value表示该属性的值。例如：QPushButton{color：red；}表示将我们的应用程序中的所有QPushButton对象以及他的子类对象应该使用red
复制链接

扫一扫