【PyQt5教程 四】Qt Designer 样式表（styleSheet）实现基本小部件的自定义动态效果和资源浏览器背景添加方法

目录

一、成果演示：

二、样式表的使用方法:

（1）样式表语法和属性：

（2）样式表代码示例：

（3）伪类和状态：

（4）复合选择器：

三、样式表使用示例： 

（1）打开Qt Designer：

​编辑

（2）编写样式：

四、背景添加方法：

（1）直接法：

（2）小部件法：

---

一、成果演示：

当鼠标悬停在按钮上或按钮被按下时，改变按钮的颜色与圆角边框大小。这种方法完全通过改变Qt Designer样式表（styleSheet）来实现，不需要编写额外的代码。

小部件的自定义动态效果

二、样式表的使用方法:

（1）样式表语法和属性：

样式表的规则由选择器和声明组成。选择器指定哪些小部件受规则影响；声明指定应该在小部件上设置哪些属性。

常用属性包括：

• background-color：设置背景颜色。
• color：设置前景色，通常是文本颜色。
• border：设置边框的宽度、样式和颜色。
• font：设置字体样式。
• padding：设置内边距。
• margin：设置外边距。

（2）样式表代码示例：

简单示例如下，用于设置QPushButton的背景色和文本颜色：

QPushButton {background-color: rgb(170, 0, 0);color: white;
}

上面的示例中，QPushButton是选择器，{ background-color: rgb(170, 0, 0); color: white; }是声明部分，分别设置了按钮的背景色和文本颜色。

（3）伪类和状态：

Qt样式表（QSS）中支持的伪状态非常丰富，以下是总结的一些常见的伪状态：

• active：部件处于活动状态时应用的样式。
• adjoins-item：当QTreeView的::branch与某个item相邻时，将设置此状态。
• alternate：如果设置了QAbstractItemView::alternatingRowColors(true)隔行变色，那么设置隔行的item。
• bottom：此item位于底部。例如，QTabBar有位于底部的选项卡。
• checked：项目被选中的状态。
• closable：项目处于可以关闭的状态，例如，QDockWidget启用了QDockWidget::DockWidgetClosable功能。
• closed：项目处于的关闭状态。如QTreeView中的非展开项。
• default：控件的默认状态。例如，一个default的QPushButton或QMenu中的一个默认动作。
• disabled：此item被禁用时的状态。
• editable：如QComboBox是可编辑的。
• edit-focus：此item具有编辑焦点（参考QStyle::State_HasEditFocus）。此状态仅对Qt扩展应用程序可用。
• enabled：此item已启用。
• exclusive：此item是一个独占项组的一部分。例如，独占QActionGroup中的菜单项。
• first：此item是列表中的第一项。例如，QTabBar中的第一个选项卡。
• focus：控件获得焦点时的样式。
• hover：鼠标悬停在控件上时的样式。
• indeterminate：控件处于不确定状态时的样式，如三态复选框。
• last：此item是列表中的最后一项。
• left：此item位于左侧。
• middle：此item位于列表中间。
• off：控件处于关闭状态时的样式。
• on：控件处于开启状态时的样式。
• only-one：此item是列表中唯一的一项。
• pressed：控件被按下时的样式。
• right：此item位于右侧。
• selected：项目被选中时的样式。

使用方法示例：

QPushButton {background-color: #0055ff; color: white; /* 白色字体 */border-radius: 15px; /* 圆角边框 */
}QPushButton:hover {
/* 鼠标悬停时的背景颜色 */                
background-color : #5555ff;
border-color : #5555ff;
border-radius: 10px; /* 圆角边框 */}QPushButton:pressed {
/* 按钮被按下时的背景颜色 */
background-color : #00aaff;
border-color : #00aaff;
border-radius: 14px; /* 圆角边框 */
}

（4）复合选择器：

可以为同一个声明指定多个选择器，使用逗号(,)分隔选择器。例如，为QLineEdit和QComboBox设置相同的边框样式：

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

三、样式表使用示例： 

（1）打开Qt Designer：

• 添加想要更改样式的小部件。

【PyQt5教程 一】Qt Designer 安装及其使用方法说明，附程序源码

以PushButton按钮为例：

调整想要的按键大小及位置： 

填写样式表： 

对于需要修改样式的单个控件，你可以右键单击该控件，然后选择“改变样式表...”选项。在弹出的编辑样式表窗口中，添加对应的样式表内容。

方法一：

方法二： 

（2）编写样式：

QPushButton {background-color: #0055ff; /* 背景颜色 */color: white; /* 白色字体 */border-radius: 15px; /* 圆角边框 */
}QPushButton:hover {
/* 鼠标悬停时的背景颜色 */                
background-color : #5555ff; /* 背景颜色 */
border-color : #5555ff; /* 边框颜色 */
border-radius: 10px; /* 圆角边框 */}QPushButton:pressed {
/* 按钮被按下时的背景颜色 */
background-color : #00aaff; /* 背景颜色 */
border-color : #00aaff; /* 边框颜色 */
border-radius: 14px; /* 圆角边框 */
}

点击浏览查看效果:

按钮浏览

四、背景添加方法：

（1）直接法：

直接给当前页添加背景。

所存在的问题：位于该页上的小部件，由于存在继承的关系，小部件将继承该页的背景。

如下：

（2）小部件法：

调整小部件大小： 

 放置到后面：

 添加背景颜色：

其他小部件样式配置方法同按钮样式配置方法相同。

效果如下：

（3）从资源浏览器中添加图片背景：

首先新建资源文件夹用于存放资源文件：

保存到对应的程序目录下： 

 添加前缀名：

 添加文件：

 应用图片：