Qt样式表是一个可以自定义部件外观的十分强大的机制,除了QStyle更改的样式,其他的都可以由QSS修改。由于受到Html的CSS启发,所以叫QSS。
- 代码添加样式表
- ui界面上添加样式表
代码添加样式表:
setStyleSheet() | 添加样式表 |
在ui界面中添加两个控件:pushButton 和lineEdit
修改两个部件的背景颜色:
ui->pushButton->setStyleSheet("background:blue");
ui->lineEdit->setStyleSheet("background:yellow");
修改同一类控件的方法:
格式为: 控件类名 { 内容 }
QPusgButton{background:blue}
QLabel{background:yellow}
ui界面中的使用:
右键点击对象,点击改变样式表
可以根据上面的选项添加内容:
Qt样式表的语法:
一:样式规则
每个样式由选择器和声明组成
- 选择器可以有多个用,隔开
- 样式表可以不区分大小写: color Color COLOR 都可以使用,但类名、对象名和Qt属性名区分大小写
- 样式中的属性用;隔开
QPushButton {color:red}
- QPushButton为选择器
- {color:red} 声明
- color为属性
- red为值
QPushButton
{
color:red//等价于Color:red COlor:rad 例如color,background等不区分大小写
}
QPushButton,QLabel,QLineEdit//多个选择器用,隔开
{
color:red;//多个的话用;隔开
background-color:white
}
二:选择器的类型
选择器 | 示例 | 说明 |
通用选择器 | * | 匹配所有部件 |
类型选择器 | QPushButton | 匹配所有QPushButton实例和它的所有子类 |
属性选择器 | QPushButton[flat="false"] | 匹配QPushButton的属性flat为false的实例 |
类选择器 | .QPushButton | 匹配所有QPushButton实例,但不包含它的子类 |
ID选择器 | QPushButton#button | 匹配QPushButton中名为button的实例 |
后代选择器 | QDialog QPushButton | 匹配所有QPushButton实例,但必须为QDialog的子孙部件 |
孩子选择器 | QDialog >QPushButton | 匹配所有QPushButton实例,但必须为QDialog的直接子部件 |
三:子控件
QComboBox::drop-down{.....}
- drop-down 代表上下箭头
- 使用::来连接子控件
在帮助文档中搜索 Qt Style Sheets Reference 搜索更多子控件 |
四:伪状态
常用的伪状态:
:checked | 该项目已选中 |
:unchecked | 该项目未选中 |
:disabled | 该项目已禁用 |
:editable | QComboBox可编辑 |
:edit-focus | 具有编辑焦点 |
:focus | 输入焦点 |
:hover | 鼠标悬停在项目上 |
:read-only | 只读 |
:pressed | 鼠标按下 |
- 伪状态:在放在选择器之后用:隔开
- 伪状态可以使用 !来表示否定
- 可以使用多个伪状态(与的效果) :hover:pressed()
- 用,连接可以达到(或的效果)
- 伪状态可以和子控件一起使用
QPushButton:hover//鼠标悬停
{
color:red
}
QPushButton:!hover//鼠标不悬停
{
color:red
}
QPushButton:hover:preassed//鼠标悬停且鼠标点击
{
color:red
}
QPushButton:hover,QPushButton:preassed//鼠标悬停或鼠标点击
{
color:red
}
QComboBox::drop-down:preassed//子控件和鼠标悬停
{
color:red
}
五:冲突的解决
解决方法为:
- 特殊的选择器优先
- 有伪装比没伪装优先
- 特殊性相同,后出现的优先
- 当父类和本身都有样式表并有冲突时,优先使用本身的样式表
六:继承关系
使用样式表时,部件并不会自动从父部件继承字体和颜色设置
想要继承到子部件需要这样设置样式表。
假设 QPushButton是QGroupBox的一个子部件
//这样的话颜色会设置到所有子部件
//注意*前面有一个空格
QGroupBox,QGroupBox *
{
color:red;
}
七:设置QObject属性
在Qt4.3之后,任何可设计的Q_PROPERTY都可以使用"qproperty-属性名称”语法来设计样式表。
QPushButton{qproperty-pixmap:url(.....)}
Qlabel{qproperty-iconSize:20px 20px;}