QT教程-二十二，QSS界面/控件美化
目录
1. QSS 的基本语法
2. 选择器
3. 常用属性
4. 应用 QSS
5. 常见问题
6. 示例
7. 基本控件qss美化示例
1. 按钮（QPushButton）美化示例
2. 标签（QLabel）美化示例
3. 输入框（QLineEdit）美化示例
4. 滑动条（QSlider）美化示例
5. 进度条（QProgressBar）美化示例
6. 复选框（QCheckBox）美化示例
7. 下拉框（QComboBox）美化示例
QSS（Qt Style Sheet）是 Qt 框架中用于定制界面样式的一种方式，类似于 CSS（层叠样式表）。通过 QSS，开发者可以轻松地改变 Qt 应用程序的外观，包括窗口、按钮、标签等各种控件的样式。以下是 QSS 的详细解释：
1. QSS 的基本语法
QSS 的基本语法与 CSS 类似，由选择器、属性和值组成。基本格式如下：
选择器 {属性1: 值1;属性2: 值2;...
}
2. 选择器
选择器用于指定应用样式的控件。以下是一些常见的选择器类型：
-
类选择器：选择特定类的控件。例如：
QPushButton {color: red; }上面的代码会将所有
QPushButton的颜色设置为红色。 -
id选择器：选择具有特定对象名的控件。QSS 不直接支持 CSS 中的
#符号，而是使用QObject::setObjectName()来设置对象名，然后在 QSS 中用#来选择。例如：#myButton {background-color: blue; }上面的代码会将对象名为
myButton的按钮的背景色设置为蓝色。 -
子控件选择器：选择控件的子控件。例如：
QComboBox::drop-down {image: url(dropdown.png); }上面的代码会将
QComboBox的下拉按钮的图标设置为dropdown.png。 -
伪状态选择器：选择处于特定状态的控件。例如：
QPushButton:hover {background-color: yellow; }上面的代码会在鼠标悬停在按钮上时，将按钮的背景色设置为黄色。
3. 常用属性
以下是一些常用的 QSS 属性：
-
color：设置文本颜色。例如：
QLabel {color: green; } -
background-color：设置背景颜色。例如：
QFrame {background-color: #f0f0f0; } -
border：设置边框。例如：
QLineEdit {border: 2px solid gray; } -
font：设置字体。例如：
QTextEdit {font: bold 12pt "Arial"; } -
padding：设置内边距。例如：
QPushButton {padding: 5px; } -
margin：设置外边距。例如：
QGroupBox {margin: 10px; }
4. 应用 QSS
应用 QSS 到 Qt 应用程序中可以通过以下几种方式：
-
通过代码应用：
在代码中使用setStyleSheet()方法直接设置样式表。例如：ui->myButton->setStyleSheet("color: red;"); -
全局应用：
可以将 QSS 应用到整个应用程序的所有控件。例如：QApplication::setStyleSheet("QPushButton { color: blue; }");
5. 常见问题
- 资源文件：QSS 支持使用资源文件（.qrc）中的图片或字体。可以通过
url()函数来引用资源文件中的内容。 - 兼容性：QSS 在不同的操作系统上可能会有不同的表现，特别是对于系统控件的样式。
6. 示例
以下是一个简单的 QSS 示例，将所有按钮的文本颜色设置为红色，背景色设置为蓝色：
QPushButton {color: red;background-color: blue;
}
7. 基本控件qss美化示例
以下是一些关于 QSS 的示例，展示如何对按钮、滑动条等控件进行美化。
1. 按钮（QPushButton）美化示例
QPushButton {background-color: #4CAF50; /* 背景色 */color: white; /* 字体颜色 */border: none; /* 去除边框 */padding: 10px 20px; /* 内边距 */border-radius: 5px; /* 圆角 */font-size: 16px; /* 字体大小 */
}QPushButton:hover {background-color: #45a049; /* 悬停时背景色 */
}QPushButton:pressed {background-color: #388e3c; /* 被按下时背景色 */
}
2. 标签（QLabel）美化示例
QLabel {color: #333; /* 字体颜色 */font-size: 14px; /* 字体大小 */font-weight: bold; /* 粗体 */padding: 5px; /* 内边距 */border: 1px solid #ccc; /* 边框 */border-radius: 3px; /* 圆角 */background-color: #f9f9f9; /* 背景色 */
}
3. 输入框（QLineEdit）美化示例
QLineEdit {border: 2px solid #999; /* 边框 */border-radius: 5px; /* 圆角 */padding: 8px; /* 内边距 */font-size: 14px; /* 字体大小 */color: #333; /* 字体颜色 */background-color: #f0f0f0; /* 背景色 */
}QLineEdit:focus {border: 2px solid #4CAF50; /* 聚焦时边框颜色 */
}
4. 滑动条（QSlider）美化示例
QSlider {background: #ddd; /* 背景色 */
}QSlider::groove:horizontal {background: #bdbdbd; /* 轨道背景 */height: 8px; /* 轨道高度 */border-radius: 4px; /* 圆角 */
}QSlider::handle:horizontal {background: #4CAF50; /* 滑块颜色 */border: 1px solid #388e3c; /* 滑块边框 */width: 16px; /* 滑块宽度 */margin: -4px 0; /* 上下居中 */border-radius: 8px; /* 圆角 */
}QSlider::handle:horizontal:hover {background-color: #45a049; /* 悬停时滑块颜色 */
}
5. 进度条（QProgressBar）美化示例
QProgressBar {border: 2px solid #bbb; /* 边框 */border-radius: 5px; /* 圆角 */text-align: center; /* 文本居中 */background-color: #f0f0f0; /* 背景色 */margin: 5px; /* 外边距 */
}QProgressBar::chunk {background-color: #4CAF50; /* 已完成部分的背景色 */border-radius: 5px; /* 圆角 */
}
6. 复选框（QCheckBox）美化示例
QCheckBox {spacing: 5px; /* 复选框与文本间距 */
}QCheckBox::indicator {width: 20px; /* 指示器宽度 */height: 20px; /* 指示器高度 */
}QCheckBox::indicator:unchecked {border: 1px solid #999; /* 未选中状态的边框 */background-color: #f0f0f0; /* 背景色 */
}QCheckBox::indicator:checked {background-color: #4CAF50; /* 选中状态的背景色 */border: 1px solid #388e3c; /* 选中状态的边框 */
}
7. 下拉框（QComboBox）美化示例
QComboBox {border: 1px solid #999; /* 边框 */border-radius: 5px; /* 圆角 */padding: 5px; /* 内边距 */background-color: #f9f9f9; /* 背景色 */font-size: 14px; /* 字体大小 */
}QComboBox::drop-down {border-left: 1px solid #999; /* 下拉按钮的边框 */
}QComboBox::indicator {width: 20px; /* 指示器宽度 */height: 20px; /* 指示器高度 */
}QComboBox QAbstractItemView {background-color: #ffffff; /* 下拉列表的背景色 */border: 1px solid #999; /* 边框 */selection-background-color: #4CAF50; /* 选中项背景色 */selection-color: white; /* 选中项字体颜色 */
}