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;} }
总结
到此这篇关于Qt的Qss用法小结的文章就介绍到这了,更多相关Qt Qss内容请搜索脚本之家以前的文章或继续浏览下面的相关文章希望大家以后多多支持脚本之家!
最新评论