Qt的Qss用法
Qt 的 Qss 是一种用于定义用户界面的样式表语言。它可以用来定义控件的颜色、字体、边框、背景等样式,可以很方便的实现自定义的样式效果。
Qss 的基本语法和 CSS 类似,主要是由选择器和样式属性构成。
选择器
选择器用来指定要样式化的控件,选择器可以使用控件的名称、类型、ID、类、父子关系等来进行定位。常见的选择器有:
- 类型选择器:
QPushButton
- 类选择器:
.mybutton
- ID 选择器:
#mybutton
- 属性选择器:
QWidget[enabled="false"]
- 父子选择器:
QListWidget > QListWidgetItem
样式属性
在 Qt 的 Qss 中,样式属性可以分为两类:控件属性和子控件属性,其中控件属性用于设置控件自身的样式,子控件属性用于设置控件的子控件的样式。
常用的控件属性和样式如下:
样式属性 | 描述 |
---|---|
background | 控件背景色 |
border | 控件边框 |
color | 控件文本颜色 |
font-size | 控件字体大小 |
font-family | 控件字体 |
padding | 内边距 |
margin | 外边距 |
text-align | 控件文本对齐方式 |
text-indent | 控件文本缩进 |
opacity | 控件透明度 |
常用的子控件属性和样式如下:
样式属性 | 描述 |
---|---|
QScrollBar:vertical | 竖向滚动条 |
QScrollBar:horizontal | 横向滚动条 |
QScrollBar::handle | 滚动条滑块 |
QScrollBar::add-page | 滚动条向后翻页按钮 |
QScrollBar::sub-page | 滚动条向前翻页按钮 |
QScrollBar::add-line | 滚动条向后滚动按钮(小箭头) |
QScrollBar::sub-line | 滚动条向前滚动按钮(小箭头) |
QComboBox QAbstractItemView | 下拉框的列表视图 |
QComboBox QAbstractItemView::item | 下拉框的列表项 |
示例
下面是一个简单的 Qss 样式示例:
QPushButton {background: #00bfff;color: #fff;border: 2px solid #fff;font-size: 24px;padding: 4px 8px;margin: 4px;
}QLineEdit {background: #fff;color: #000;border: 2px solid #00bfff;padding: 4px 8px;margin: 4px;
}QComboBox QAbstractItemView {background: #fff;color: #000;border: 2px solid #00bfff;padding: 4px 8px;margin: 4px;
}QComboBox QAbstractItemView::item {background: #00bfff;color: #fff;font-size: 18px;padding: 4px 8px;margin: 4px;
}QScrollBar:vertical {background: #fff;width: 16px;margin: 4px;
}QScrollBar::handle:vertical {background: #00bfff;border-radius: 8px;margin: 2px;
}QScrollBar::add-page:vertical, QScrollBar::sub-page:vertical {background: none;
}QScrollBar:horizontal {background: #fff;height: 16px;margin: 4px;
}QScrollBar::handle:horizontal {background: #00bfff;border-radius: 8px;margin: 2px;
}QScrollBar::add-page:horizontal, QScrollBar::sub-page:horizontal {background: none;
}
上面的样式将会应用到 QPushButton
、QLineEdit
、QComboBox
、QScrollBar
等控件上,并且可以看到各个控件的样式都是不一样的。其中,QComboBox
还设置了下拉列表视图及列表项的样式。
除了上述基本语法外,Qt 的 Qss 还有一些高级特性。
伪状态和伪元素
Qss 支持控件的伪状态和伪元素,用来描述控件处于特定状态时的样式。常见的状态包括:hover
(鼠标悬停时)、pressed
(鼠标按下时)、checked
(选中状态)、disabled
(不可用状态)等。
样式示例:
QPushButton:hover {background: #1e90ff;
}QPushButton:checked {color: #ff4500;
}
尺寸和单位
Qss 支持不同的尺寸和单位来定义样式,包括像素(px
)、绝对长度(cm
、mm
、in
、pt
、pc
)、相对长度(em
、ex
、rem
)、百分比(%
)等,用于实现不同尺寸的控件效果。
QPushButton {width: 100px;height: 30px;
}QLabel {font-size: 1.5em;
}QTextEdit {padding: 0.5rem;
}QComboBox {width: 50%;
}
颜色和图像
Qss 支持使用颜色和图像来定义控件的背景,边框和文本颜色等样式。
颜色示例:
QWidget {background-color: red;
}QPushButton {color: white;background-color: rgb(0, 255, 0);
}QLineEdit {border: 1px solid #ccc;
}QLabel {color: black;background-color: rgba(255, 255, 0, 0.5);
}
图像示例:
QPushButton {border-image: url(button.png) 5 5 5 5 stretch;
}QLabel {background-image: url(background.png);background-repeat: no-repeat;background-position: center;background-size: cover;
}QTextEdit {background-image: url(paper.jpg);background-attachment: fixed;
}
动画效果
Qss 还支持使用动画效果来实现控件的动态样式,通过 @keyframes
和 animation
实现。
样式示例:
QPushButton:hover {animation: pulse 0.5s;
}@keyframes pulse {0% {background-color: #1e90ff;}50% {background-color: #00bfff;}100% {background-color: #1e90ff;}
}
总结
Qss 是一个强大的控件样式表语言,可以帮助我们实现各式各样的自定义控件效果。它可以设置控件属性、子控件属性、样式状态、颜色、图像、动画等。了解 Qss 语法和常用样式属性将能够让你更快速地实现丰富的 Qt 界面效果。