目录
一、成果演示:
二、样式表的使用方法:
(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)从资源浏览器中添加图片背景:
首先新建资源文件夹用于存放资源文件:
保存到对应的程序目录下:
添加前缀名:
添加文件:
应用图片: