QSS技术（三）—— Qt样式表（QSS）控件样式大全

Qt样式表（QSS）控件样式大全

1. QPushButton

QPushButton 是一个常用的按钮控件，常见的样式设置包括背景颜色、边框、字体、悬停和按下状态等。

样式设置示例：

QPushButton {
    background-color: #3498db; /* 背景颜色 */
    color: white;             /* 文字颜色 */
    border: 2px solid #2980b9; /* 边框颜色 */
    border-radius: 5px;       /* 圆角 */
    padding: 10px;            /* 内边距 */
    font-size: 16px;          /* 字体大小 */
}

QPushButton:hover {
    background-color: #2980b9; /* 悬停时背景颜色 */
}

QPushButton:pressed {
    background-color: #1f77b4; /* 按下时背景颜色 */
    border-color: #0f5b8e;     /* 按下时边框颜色 */
}

QPushButton:disabled {
    background-color: #bdc3c7; /* 禁用时背景颜色 */
    color: #7f8c8d;            /* 禁用时文字颜色 */
    border: 2px solid #95a5a6; /* 禁用时边框颜色 */
}

---

2. QLineEdit

QLineEdit 是一个单行文本输入控件，样式设置包括边框、背景颜色、文字颜色和光标样式等。

样式设置示例：

QLineEdit {
    background-color: #fff;         /* 背景颜色 */
    border: 2px solid #ccc;         /* 边框颜色 */
    border-radius: 5px;             /* 圆角 */
    padding: 5px;                   /* 内边距 */
    color: #333;                    /* 文字颜色 */
    font-size: 14px;                /* 字体大小 */
}

QLineEdit:focus {
    border: 2px solid #3498db;      /* 获取焦点时边框颜色 */
    background-color: #f0f8ff;     /* 获取焦点时背景颜色 */
}

---

3. QCheckBox

QCheckBox 是一个复选框控件，样式设置包括复选框指示器的样式、背景颜色和字体等。

样式设置示例：

QCheckBox {
    spacing: 5px;                  /* 文字与指示器之间的间距 */
    color: #333;                   /* 文字颜色 */
}

QCheckBox::indicator {
    width: 13px;                  /* 指示器宽度 */
    height: 13px;                 /* 指示器高度 */
}

QCheckBox::indicator:checked {
    image: url(:/icons/checked.png); /* 选中时图标 */
}

QCheckBox::indicator:unchecked {
    image: url(:/icons/unchecked.png); /* 未选中时图标 */
}

---

4. QRadioButton

QRadioButton 是一个单选框控件，样式设置包括单选框指示器的样式、背景颜色和字体等。

样式设置示例：

QRadioButton {
    spacing: 5px;                  /* 文字与指示器之间的间距 */
    color: #333;                   /* 文字颜色 */
}

QRadioButton::indicator {
    width: 13px;                  /* 指示器宽度 */
    height: 13px;                 /* 指示器高度 */
}

QRadioButton::indicator:checked {
    image: url(:/icons/radio_checked.png); /* 选中时图标 */
}

QRadioButton::indicator:unchecked {
    image: url(:/icons/radio_unchecked.png); /* 未选中时图标 */
}

---

5. QComboBox

QComboBox 是一个下拉选择框控件，样式设置包括下拉框的边框、背景颜色和文字颜色等。

样式设置示例：

QComboBox {
    background-color: #fff;         /* 背景颜色 */
    border: 2px solid #ccc;         /* 边框颜色 */
    border-radius: 5px;             /* 圆角 */
    padding: 5px;                   /* 内边距 */
    color: #333;                    /* 文字颜色 */
    font-size: 14px;                /* 字体大小 */
}

QComboBox::drop-down {
    width: 20px;                    /* 下拉箭头宽度 */
}

QComboBox::down-arrow {
    image: url(:/icons/down_arrow.png); /* 下拉箭头图标 */
}

QComboBox QAbstractItemView {
    border: 2px solid #ccc;         /* 下拉列表的边框颜色 */
    selection-background-color: #3498db; /* 选中项背景颜色 */
    selection-color: white;         /* 选中项文字颜色 */
}

---

6. QSlider

QSlider 是一个滑块控件，样式设置包括滑块的轨道、刻度和滑块本身的样式。

样式设置示例：

QSlider::groove:horizontal {
    border: 1px solid #ccc;         /* 轨道边框颜色 */
    background: #eee;               /* 轨道背景颜色 */
    height: 8px;                    /* 轨道高度 */
    border-radius: 4px;             /* 轨道圆角 */
}

QSlider::handle:horizontal {
    background: #3498db;            /* 滑块背景颜色 */
    border: 1px solid #2980b9;      /* 滑块边框颜色 */
    width: 16px;                    /* 滑块宽度 */
    height: 16px;                   /* 滑块高度 */
    border-radius: 8px;             /* 滑块圆角 */
}

QSlider::groove:vertical {
    border: 1px solid #ccc;         /* 轨道边框颜色 */
    background: #eee;               /* 轨道背景颜色 */
    width: 8px;                     /* 轨道宽度 */
    border-radius: 4px;             /* 轨道圆角 */
}

QSlider::handle:vertical {
    background: #3498db;            /* 滑块背景颜色 */
    border: 1px solid #2980b9;      /* 滑块边框颜色 */
    width: 16px;                    /* 滑块宽度 */
    height: 16px;                   /* 滑块高度 */
    border-radius: 8px;             /* 滑块圆角 */
}

---

7. QProgressBar

QProgressBar 是一个进度条控件，样式设置包括进度条的轨道和填充部分的样式。

样式设置示例：

QProgressBar {
    border: 1px solid #ccc;         /* 进度条边框颜色 */
    border-radius: 5px;             /* 进度条圆角 */
    background: #eee;               /* 进度条背景颜色 */
    padding: 2px;                   /* 内边距 */
}

QProgressBar::chunk {
    background: #3498db;            /* 进度条填充颜色 */
    width: 20px;                    /* 填充块宽度 */
    border-radius: 5px;             /* 填充块圆角 */
}

---

8. QTabWidget

QTabWidget 是一个选项卡控件，样式设置包括选项卡的背景颜色、边框和激活状态等。

样式设置示例：

QTabWidget::pane {
    border: 1px solid #ccc;         /* 选项卡面板边框颜色 */
    border-radius: 5px;             /* 选项卡面板圆角 */
}

QTabBar::tab {
    background: #f0f0f0;            /* 选项卡背景颜色 */
    border: 1px solid #ccc;         /* 选项卡边框颜色 */
    padding: 10px;                  /* 内边距 */
    border-radius: 5px;             /* 选项卡圆角 */
}

QTabBar::tab:selected {
    background: #3498db;            /* 激活状态选项卡背景颜色 */
    color: white;                   /* 激活状态选项卡文字颜色 */
}

---

9. QLabel

QLabel 是一个用于显示文本或图像的控件。样式设置包括文本颜色、对齐方式和背景等。

样式设置示例：

QLabel {
    color: #333;                    /* 文字颜色 */
    font-size: 14px;                /* 字体大小 */
    background-color: #f9f9f9;      /* 背景颜色 */
    border: 1px solid #ddd;         /* 边框颜色 */
    border-radius: 5px;             /* 边框圆角 */
    padding: 5px;                   /* 内边距 */
}

QLabel[alignment="center"] {
    text-align: center;             /* 文本居中对齐 */
}

---

10. QSpinBox

QSpinBox 是一个数字输入控件，样式设置包括边框、背景、增减按钮等。

样式设置示例：

QSpinBox {
    background-color: #fff;         /* 背景颜色 */
    border: 2px solid #ccc;         /* 边框颜色 */
    border-radius: 5px;             /* 圆角 */
    padding: 5px;                   /* 内边距 */
    color: #333;                    /* 文字颜色 */
    font-size: 14px;                /* 字体大小 */
}

QSpinBox::up-button {
    subcontrol-origin: padding;     /* 位置原点 */
    subcontrol-position: top right; /* 上增按钮位置 */
}

QSpinBox::down-button {
    subcontrol-origin: padding;     /* 位置原点 */
    subcontrol-position: bottom right; /* 下减按钮位置 */
}

QSpinBox::up-button:hover,
QSpinBox::down-button:hover {
    background-color: #3498db;      /* 按钮悬停背景颜色 */
}

---

11. QToolButton

QToolButton 是一个工具按钮控件，样式设置包括按钮的图标、背景颜色和边框等。

样式设置示例：

QToolButton {
    background-color: #f0f0f0;      /* 背景颜色 */
    border: 1px solid #ddd;         /* 边框颜色 */
    border-radius: 5px;             /* 圆角 */
    padding: 5px;                   /* 内边距 */
}

QToolButton::icon {
    image: url(:/icons/tool_icon.png); /* 图标 */
}

QToolButton:hover {
    background-color: #3498db;      /* 悬停背景颜色 */
    border-color: #2980b9;          /* 悬停边框颜色 */
}

---

12. QFrame

QFrame 是一个框架控件，可以用于分隔区域或容器。样式设置包括边框颜色、背景颜色和圆角等。

样式设置示例：

QFrame {
    background-color: #fff;         /* 背景颜色 */
    border: 2px solid #3498db;      /* 边框颜色 */
    border-radius: 10px;            /* 圆角 */
    padding: 10px;                  /* 内边距 */
}

---

13. QGroupBox

QGroupBox 是一个分组框控件，通常用于将相关控件分组。样式设置包括边框颜色、标题和背景颜色等。

样式设置示例：

QGroupBox {
    border: 2px solid #3498db;      /* 边框颜色 */
    border-radius: 5px;             /* 圆角 */
    padding: 10px;                  /* 内边距 */
    background-color: #f9f9f9;      /* 背景颜色 */
}

QGroupBox:title {
    subcontrol-position: top left;  /* 标题位置 */
    padding: 0 10px;                /* 标题内边距 */
    font-weight: bold;              /* 标题字体加粗 */
    color: #3498db;                 /* 标题文字颜色 */
}

---

14. QTextEdit

QTextEdit 是一个多行文本编辑控件，样式设置包括边框、背景颜色、文字颜色和滚动条等。

样式设置示例：

QTextEdit {
    background-color: #fff;         /* 背景颜色 */
    border: 2px solid #ccc;         /* 边框颜色 */
    border-radius: 5px;             /* 圆角 */
    padding: 5px;                   /* 内边距 */
    color: #333;                    /* 文字颜色 */
    font-size: 14px;                /* 字体大小 */
}

QTextEdit:focus {
    border: 2px solid #3498db;      /* 获取焦点时边框颜色 */
}

QScrollBar:vertical {
    background-color: #f0f0f0;      /* 垂直滚动条背景颜色 */
}

QScrollBar::handle:vertical {
    background-color: #3498db;      /* 垂直滚动条滑块颜色 */
    border-radius: 5px;             /* 滑块圆角 */
}

---

15. QToolBar

QToolBar 是一个工具栏控件，通常用于放置常用操作的按钮。样式设置可以调整工具栏的背景、边框、按钮等。

样式设置示例：

QToolBar {
    background: #f0f0f0;            /* 背景颜色 */
    border: 1px solid #ddd;         /* 边框颜色 */
    border-radius: 5px;             /* 圆角 */
}

QToolBar QToolButton {
    background: #fff;               /* 按钮背景颜色 */
    border: 1px solid #ccc;         /* 按钮边框颜色 */
    border-radius: 3px;             /* 按钮圆角 */
    padding: 5px;                   /* 按钮内边距 */
}

QToolBar QToolButton:hover {
    background: #3498db;            /* 按钮悬停背景颜色 */
    color: white;                   /* 按钮悬停文字颜色 */
}

---

16. QMenu

QMenu 是一个弹出式菜单控件，样式设置可以包括菜单项的背景、边框、悬停状态等。

样式设置示例：

QMenu {
    background: #fff;               /* 菜单背景颜色 */
    border: 1px solid #ccc;         /* 菜单边框颜色 */
    border-radius: 5px;             /* 圆角 */
    padding: 5px;                   /* 内边距 */
}

QMenu::item {
    padding: 5px 10px;              /* 菜单项内边距 */
    border-radius: 3px;             /* 菜单项圆角 */
}

QMenu::item:selected {
    background: #3498db;            /* 选中菜单项背景颜色 */
    color: white;                   /* 选中菜单项文字颜色 */
}

---

17. QSpinBox

QSpinBox 是一个提供增减数字输入的控件。样式设置包括边框、按钮等。

样式设置示例：

QSpinBox {
    background: #fff;               /* 背景颜色 */
    border: 1px solid #ccc;         /* 边框颜色 */
    border-radius: 5px;             /* 圆角 */
    padding: 5px;                   /* 内边距 */
}

QSpinBox::up-button, QSpinBox::down-button {
    border: none;                   /* 去掉按钮边框 */
    background: #e0e0e0;            /* 按钮背景颜色 */
    width: 20px;                    /* 按钮宽度 */
    height: 20px;                   /* 按钮高度 */
}

QSpinBox::up-button:hover, QSpinBox::down-button:hover {
    background: #3498db;            /* 悬停背景颜色 */
}

---

18. QScrollArea

QScrollArea 是一个带滚动条的区域，用于容纳较大的内容。样式设置包括滚动条、视口等。

样式设置示例：

QScrollArea {
    border: 1px solid #ccc;         /* 边框颜色 */
    border-radius: 5px;             /* 圆角 */
}

QScrollBar:vertical {
    background: #f0f0f0;            /* 垂直滚动条背景颜色 */
    width: 15px;                    /* 滚动条宽度 */
}

QScrollBar::handle:vertical {
    background: #3498db;            /* 滚动条滑块颜色 */
    border-radius: 5px;             /* 滑块圆角 */
}

QScrollBar::handle:vertical:hover {
    background: #2980b9;            /* 滚动条滑块悬停颜色 */
}

---

19. QStatusBar

QStatusBar 是一个状态栏控件，通常用于显示应用程序的状态信息。

样式设置示例：

QStatusBar {
    background: #333;               /* 背景颜色 */
    color: white;                   /* 文字颜色 */
    border-top: 1px solid #ccc;     /* 顶部边框 */
    padding: 5px;                   /* 内边距 */
}

---

20. QSplitter

QSplitter 是一个用于调整控件大小的分隔条，样式设置包括分隔条的背景和拖动手柄等。

样式设置示例：

QSplitter::handle {
    background: #ddd;               /* 分隔条背景颜色 */
    border: 1px solid #ccc;         /* 分隔条边框颜色 */
    width: 10px;                    /* 分隔条宽度 */
    height: 10px;                   /* 分隔条高度 */
}

QSplitter::handle:horizontal {
    height: 10px;                   /* 水平分隔条高度 */
}

QSplitter::handle:vertical {
    width: 10px;                    /* 垂直分隔条宽度 */
}

这些样式设置可以帮助你定制这些常用控件的外观，从而实现更符合应用需求的用户界面。你可以根据需要调整颜色、边框、字体和其他属性，以达到最佳的界面效果。