Qt组件的常用QSS整理

已于 2023-12-24 19:31:53 修改
阅读量1.2k 收藏 18
点赞数 7
分类专栏： Qt日常使用 文章标签： qt ui
于 2023-12-14 13:21:21 首次发布
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/welshon/article/details/134993044
版权

1.按钮类组件


1> QPushButton和QToolButton

QPushButton和QToolButton是Qt中常用的按钮控件，可以通过添加qss样式表来自定义按钮的外观。以下是一些常用的qss样式：

1.修改按钮的背景颜色和文字颜色：

QPushButton {
    background-color: #4682b4;
    color: white;
}

2.修改按钮的边框样式和边框颜色：

QPushButton {
    border-style: solid;
    border-width: 2px;
    border-color: #4682b4;
}

3.修改按钮的鼠标悬停状态下的样式：

QPushButton:hover {
    background-color: #87ceeb;
}

4.修改按钮的按下状态下的样式：

QPushButton:pressed {
    background-color: #1e90ff;
}

5.修改按钮的禁用状态下的样式：

QPushButton:disabled {
    background-color: #dcdcdc;
    color: #808080;
}

6.修改按钮的圆角角度：

QPushButton {
    border-radius: 10px;
}

通过添加这些qss样式，可以实现自定义的QPushButton外观效果。

2> QCheckBox和QRadioButton

QCheckBox和QRadioButton的常用qss样式有：

1.设置选中和未选中状态下的背景颜色：

QCheckBox:checked {
    background-color: #00FF00;
}
QCheckBox:unchecked {
    background-color: #FFFFFF;
}

2.设置选中和未选中状态下的边框颜色：

QCheckBox:checked {
    border: 1px solid #00FF00;
}
QCheckBox:unchecked {
    border: 1px solid #000000;
}

3.设置选中和未选中状态下的文字颜色：

QCheckBox:checked {
    color: #00FF00;
}
QCheckBox:unchecked {
    color: #000000;
}

4.设置选中和未选中状态下的图标：

QCheckBox::indicator:checked {
    image: url(checked.png);
}
QCheckBox::indicator:unchecked {
    image: url(unchecked.png);
}

其中，checked.png和unchecked.png是图片文件的路径，可以根据实际情况进行替换。

1.设置选中和未选中状态下的大小：

QCheckBox {
    width: 20px;
    height: 20px;
}

可以根据实际情况调整大小。

这些是QCheckBox和QRadioButton常用的qss样式，你可以根据自己的需求进行修改和扩展。

3> QDialogButtonBox

暂时未使用过该组件。

2.输入类组件


1> QComboBox

下面是一些常用的QComboBox的qss样式：

/* 设置下拉箭头按钮的样式 */
QComboBox::drop-down {
    border: none;
    width: 20px;
}

/* 设置下拉箭头按钮的图标 */
QComboBox::down-arrow {
    image: url(:/images/down_arrow.png);
}

/* 设置下拉箭头按钮的大小 */
QComboBox::down-arrow {
    width: 10px;
    height: 10px;
}

/* 设置下拉列表的样式 */
QComboBox::menu {
    background-color: white;
    border: 1px solid #ccc;
    padding: 5px;
    width: 150px;
}

/* 设置下拉列表中的项目样式 */
QComboBox::item {
    padding: 5px;
}

/* 设置下拉列表中的选中项目样式 */
QComboBox::item:selected {
    background-color: #ccc;
}

/* 设置下拉列表的滚动条样式 */
QComboBox::menu QScrollBar {
    width: 10px;
    background-color: #eee;
}

/* 设置下拉列表的滚动条滑块样式 */
QComboBox::menu QScrollBar::handle {
    background: #ccc;
    min-height: 20px;
}

/* 设置下拉列表的滚动条箭头样式 */
QComboBox::menu QScrollBar::add-line,
QComboBox::menu QScrollBar::sub-line {
    height: 10px;
    background: #ccc;
}

/* 设置下拉列表的滚动条箭头图标样式 */
QComboBox::menu QScrollBar::add-line:vertical {
    subcontrol-position: bottom;
    subcontrol-origin: margin;
    image: url(:/images/scroll_down.png);
}

QComboBox::menu QScrollBar::sub-line:vertical {
    subcontrol-position: top;
    subcontrol-origin: margin;
    image: url(:/images/scroll_up.png);
}

/* 设置下拉列表的滚动条滑块鼠标悬停样式 */
QComboBox::menu QScrollBar::handle:hover {
    background: #aaa;
}

/* 设置下拉列表的滚动条滑块鼠标按下样式 */
QComboBox::menu QScrollBar::handle:pressed {
    background: #888;
}

注意：上面的样式中:/images/down_arrow.png和:/images/scroll_down.png,:/images/scroll_up.png是图片资源的路径，可以根据自己的实际情况进行修改。同时，你也可以根据自己的需求进行样式的修改和调整。

2> QFontComboBox

下面是一个常用的QFontComboBox的qss样式：

/* 设置字体下拉框的边框样式 */
QFontComboBox {
    border: 1px solid #ccc;
    padding: 3px;
}

/* 设置字体下拉框的下拉箭头按钮样式 */
QFontComboBox::down-arrow {
    image: url(:/images/down_arrow.png);
    width: 10px;
    height: 10px;
}

/* 设置字体下拉框的下拉列表样式 */
QFontComboBox::drop-down {
    subcontrol-origin: padding;
    subcontrol-position: top right;
    width: 15px;
    border-left-width: 1px;
    border-left-color: #ccc;
    border-left-style: solid;
    padding-left: 2px;
    padding-top: 1px;
}

/* 设置字体下拉框的下拉列表背景色 */
QFontComboBox::down-arrow {
    background-color: white;
}

/* 设置字体下拉框的下拉列表中的项目样式 */
QFontComboBox QAbstractItemView::item {
    padding: 2px;
}

/* 设置字体下拉框的下拉列表中的选中项目样式 */
QFontComboBox QAbstractItemView::item:selected {
    background-color: #ccc;
}

/* 设置字体下拉框的下拉列表的滚动条样式 */
QFontComboBox QAbstractItemView::scrollbar {
    width: 10px;
    background-color: #eee;
}

/* 设置字体下拉框的下拉列表的滚动条滑块样式 */
QFontComboBox QAbstractItemView::scrollbar:handle {
    background: #ccc;
    min-height: 20px;
}

/* 设置字体下拉框的下拉列表的滚动条箭头样式 */
QFontComboBox QAbstractItemView::scrollbar:add-line,
QFontComboBox QAbstractItemView::scrollbar:sub-line {
    height: 10px;
    background: #ccc;
}

/* 设置字体下拉框的下拉列表的滚动条箭头图标样式 */
QFontComboBox QAbstractItemView::scrollbar:add-line:vertical {
    subcontrol-position: bottom;
    subcontrol-origin: margin;
    image: url(:/images/scroll_down.png);
}

QFontComboBox QAbstractItemView::scrollbar:sub-line:vertical {
    subcontrol-position: top;
    subcontrol-origin: margin;
    image: url(:/images/scroll_up.png);
}

/* 设置字体下拉框的下拉列表的滚动条滑块鼠标悬停样式 */
QFontComboBox QAbstractItemView::scrollbar:handle:hover {
    background: #aaa;
}

/* 设置字体下拉框的下拉列表的滚动条滑块鼠标按下样式 */
QFontComboBox QAbstractItemView::scrollbar:handle:pressed {
    background: #888;
}

注意：上面的样式中:/images/down_arrow.png、:/images/scroll_down.png和:/images/scroll_up.png是图片资源的路径，可以根据自己的实际情况进行修改。同时，你也可以根据自己的需求进行样式的修改和调整。

3> QLineEdit

下面是一些常用的QLineEdit的QSS样式：

/* 设置 QLineEdit的边框样式 */
QLineEdit {
    border: 1px solid #ccc;
    padding: 2px;
}

/* 设置 QLineEdit的焦点边框样式 */
QLineEdit:focus {
    border: 1px solid blue;
}

/* 设置 QLineEdit的背景色 */
QLineEdit {
    background-color: #fff;
}

/* 设置 QLineEdit的文本内容的颜色 */
QLineEdit {
    color: #000;
}

/* 设置 QLineEdit的圆角边框样式 */
QLineEdit {
    border-radius: 5px;
}

/* 设置 QLineEdit的提示文本颜色 */
QLineEdit::placeholder {
    color: #aaa;
}

/* 设置 QLineEdit的清除按钮样式 */
QLineEdit {
    padding-right: 20px;
}

/* 设置 QLineEdit的清除按钮图标样式 */
QLineEdit::clear-button {
    image: url(:/images/clear.png);
    width: 12px;
    height: 12px;
    subcontrol-origin: padding;
    subcontrol-position: right;
    right: 5px;
}

/* 设置 QLineEdit的下拉按钮样式 */
QLineEdit {
    padding-right: 20px;
}

/* 设置 QLineEdit的下拉按钮图标样式 */
QLineEdit::drop-down {
    image: url(:/images/down_arrow.png);
    width: 12px;
    height: 12px;
    subcontrol-origin: padding;
    subcontrol-position: right;
    right: 5px;
}

注意：上面的样式中:/images/clear.png和:/images/down_arrow.png是图片资源的路径，可以根据自己的实际情况进行修改。同时，你也可以根据自己的需求进行样式的修改和调整。

4> QPlainTextEdit

下面是一些常用的QPlainTextEdit的QSS样式：

/* 设置 QPlainTextEdit的边框样式 */
QPlainTextEdit {
    border: 1px solid #ccc;
    padding: 2px;
}

/* 设置 QPlainTextEdit的焦点边框样式 */
QPlainTextEdit:focus {
    border: 1px solid blue;
}

/* 设置 QPlainTextEdit的背景色 */
QPlainTextEdit {
    background-color: #fff;
}

/* 设置 QPlainTextEdit的文本内容的颜色 */
QPlainTextEdit {
    color: #000;
}

/* 设置 QPlainTextEdit的圆角边框样式 */
QPlainTextEdit {
    border-radius: 5px;
}

/* 设置 QPlainTextEdit的滚动条样式 */
QPlainTextEdit::verticalScrollBar {
    width: 10px;
    background-color: #eee;
}

QPlainTextEdit::verticalScrollBar::handle {
    background-color: #ccc;
}

QPlainTextEdit::verticalScrollBar::add-page,
QPlainTextEdit::verticalScrollBar::sub-page {
    background: none;
}

/* 设置 QPlainTextEdit的滚动条宽度样式 */
QPlainTextEdit {
    scrollbar-width: thin;
}

/* 设置 QPlainTextEdit的选中文本的背景色 */
QPlainTextEdit::selection {
    background-color: blue;
    color: white;
}

/* 设置 QPlainTextEdit的行号样式 */
QPlainTextEdit QWidget#qt_scrollarea_viewport {
    background-color: #eee;
}

QPlainTextEdit QScrollBar:vertical {
    width: 15px;
}

QPlainTextEdit QScrollBar::handle:vertical {
    background-color: #ccc;
}

QPlainTextEdit QScrollBar::add-page:vertical,
QPlainTextEdit QScrollBar::sub-page:vertical {
    background: none;
}

注意：上面的样式可以根据自己的需求进行修改和调整，同时也可以添加其他样式来满足你的需求。

5> QSpinBox和QDoubleSpinBox

下面是一些常用的QSpinBox的QSS样式：

/* 设置 QSpinBox的边框样式 */
QSpinBox {
    border: 1px solid #ccc;
    padding: 2px;
}

/* 设置 QSpinBox的焦点边框样式 */
QSpinBox:focus {
    border: 1px solid blue;
}

/* 设置 QSpinBox的背景色 */
QSpinBox {
    background-color: #fff;
}

/* 设置 QSpinBox的文本内容的颜色 */
QSpinBox {
    color: #000;
}

/* 设置 QSpinBox的圆角边框样式 */
QSpinBox {
    border-radius: 5px;
}

/* 设置 QSpinBox的上下调节按钮样式 */
QSpinBox::up-button,
QSpinBox::down-button {
    width: 30px;
    height: 20px;
    border: none;
    background-color: #ccc;
}

QSpinBox::up-button:hover,
QSpinBox::down-button:hover {
    background-color: #aaa;
}

/* 设置 QSpinBox的上下调节按钮箭头的颜色 */
QSpinBox::up-arrow,
QSpinBox::down-arrow {
    image: url(:/icons/arrow.png);
    width: 10px;
    height: 10px;
}

/* 设置 QSpinBox的上下调节按钮箭头的颜色 */
QSpinBox::up-arrow {
    subcontrol-origin: border;
    subcontrol-position: top right;
}

QSpinBox::down-arrow {
    subcontrol-origin: border;
    subcontrol-position: bottom right;
}

注意：上面的样式可以根据自己的需求进行修改和调整，同时也可以添加其他样式来满足你的需求。

QDoubleSpinBox与QSpinBox的使用方式类似。

6> QDateEdit、QTimeEdit和QDateTimeEdit

下面是一些常用的QDateEdit的QSS样式：

/* 设置 QDateEdit的边框样式 */
QDateEdit {
    border: 1px solid #ccc;
    padding: 2px;
}

/* 设置 QDateEdit的焦点边框样式 */
QDateEdit:focus {
    border: 1px solid blue;
}

/* 设置 QDateEdit的背景色 */
QDateEdit {
    background-color: #fff;
}

/* 设置 QDateEdit的文本内容的颜色 */
QDateEdit {
    color: #000;
}

/* 设置 QDateEdit的圆角边框样式 */
QDateEdit {
    border-radius: 5px;
}

/* 设置 QDateEdit的下拉按钮样式 */
QDateEdit::drop-down {
    width: 20px;
    height: 20px;
    border: none;
}

QDateEdit::drop-down:hover {
    background-color: #ccc;
}

/* 设置 QDateEdit的下拉按钮箭头样式 */
QDateEdit::down-arrow {
    image: url(:/icons/arrow.png);
    width: 10px;
    height: 10px;
}

/* 设置 QDateEdit的日历弹出窗口样式 */
QDateEdit QCalendarWidget {
    background-color: #fff;
    color: #000;
}

/* 设置 QDateEdit的日历弹出窗口中选中日期的背景色 */
QDateEdit QCalendarWidget QTableView::item:selected {
    background-color: blue;
    color: #fff;
}

/* 设置 QDateEdit的日历弹出窗口中当前日期的背景色 */
QDateEdit QCalendarWidget QTableView::item:alternate:selected {
    background-color: #eee;
}

/* 设置 QDateEdit的日历弹出窗口中鼠标悬停的日期背景色 */
QDateEdit QCalendarWidget QTableView::item:hover {
    background-color: #ccc;
}

注意：上面的样式可以根据自己的需求进行修改和调整，同时也可以添加其他样式来满足你的需求。

QTimeEdit、QDateTimeEdit的使用方式与QDateEdit类似。

7> QDial

下面是一些常用的QDial的QSS样式：

/* 设置 QDial的大小和边框样式 */
QDial {
    width: 100px;
    height: 100px;
    border: 1px solid #ccc;
}

/* 设置 QDial的背景色 */
QDial {
    background-color: #fff;
}

/* 设置 QDial的刻度颜色 */
QDial::groove {
    background-color: #ccc;
}

/* 设置 QDial的刻度指示器样式 */
QDial::handle {
    background-color: blue;
    border-radius: 15px;
    width: 30px;
    height: 30px;
    margin: -5px;
}

/* 设置 QDial的刻度文本样式 */
QDial::sub-page {
    background-color: transparent;
}

/* 设置 QDial的文本颜色 */
QDial {
    color: #000;
}

/* 设置 QDial的刻度颜色 */
QDial::tick {
    background-color: #000;
}

/* 设置 QDial的刻度文本样式 */
QDial::tick-label {
    color: #000;
}

/* 设置 QDial的焦点边框样式 */
QDial:focus {
    border: 1px solid blue;
}

注意：上面的样式可以根据自己的需求进行修改和调整，同时也可以添加其他样式来满足你的需求。

8> QScrollBar

下面是一些常用的QScrollBar的QSS样式：

/* 设置垂直的QScrollBar的宽度和背景色 */
QScrollBar:vertical {
    width: 15px;
    background-color: #eee;
}

/* 设置水平的QScrollBar的高度和背景色 */
QScrollBar:horizontal {
    height: 15px;
    background-color: #eee;
}

/* 设置QScrollBar的滑块样式 */
QScrollBar::handle {
    background-color: #ccc;
}

/* 设置QScrollBar的滑块悬停样式 */
QScrollBar::handle:hover {
    background-color: #aaa;
}

/* 设置QScrollBar的滑块按下样式 */
QScrollBar::handle:pressed {
    background-color: #888;
}

/* 设置QScrollBar的滑块圆角 */
QScrollBar::handle {
    border-radius: 7px;
}

/* 设置QScrollBar的滑块边框样式 */
QScrollBar::handle {
    border: none;
}

/* 设置QScrollBar的滑块阴影样式 */
QScrollBar::handle {
    box-shadow: none;
}

/* 设置QScrollBar的上下（左右）箭头按钮样式 */
QScrollBar::add-line, QScrollBar::sub-line {
    background-color: transparent;
    border: none;
}

/* 设置QScrollBar的上下（左右）箭头图标样式 */
QScrollBar::add-line:vertical, QScrollBar::sub-line:vertical {
    border-image: url(add.png) 0 0 0 0 stretch stretch;
}

/* 设置QScrollBar的上下（左右）箭头图标样式 */
QScrollBar::add-line:horizontal, QScrollBar::sub-line:horizontal {
    border-image: url(add.png) 0 0 0 0 stretch stretch;
}

/* 设置QScrollBar的上下（左右）箭头悬停样式 */
QScrollBar::add-line:vertical:hover, QScrollBar::sub-line:vertical:hover {
    background-color: #ddd;
}

/* 设置QScrollBar的上下（左右）箭头按下样式 */
QScrollBar::add-line:vertical:pressed, QScrollBar::sub-line:vertical:pressed {
    background-color: #bbb;
}

/* 设置QScrollBar的上下（左右）箭头图标旋转角度 */
QScrollBar::add-line:vertical {
    subcontrol-position: bottom;
    subcontrol-origin: margin;
    transform: rotate(180deg);
}

/* 设置QScrollBar的上下（左右）箭头图标旋转角度 */
QScrollBar::add-line:horizontal {
    subcontrol-position: right;
    subcontrol-origin: margin;
    transform: rotate(90deg);
}

/* 设置QScrollBar的上下（左右）箭头图标旋转角度 */
QScrollBar::sub-line:horizontal {
    subcontrol-position: left;
    subcontrol-origin: margin;
    transform: rotate(90deg);
}

/* 设置QScrollBar的滑块悬停样式 */
QScrollBar::sub-line:horizontal:hover {
    background-color: #ddd;
}

/* 设置QScrollBar的滑块按下样式 */
QScrollBar::sub-line:horizontal:pressed {
    background-color: #bbb;
}

/* 设置QScrollBar的上下（左右）箭头按钮样式 */
QScrollBar::add-page, QScrollBar::sub-page {
    background-color: transparent;
}

/* 设置QScrollBar的悬停区域样式 */
QScrollBar::add-page, QScrollBar::sub-page {
    background-color: #fff;
}

/* 设置QScrollBar的滑块和悬停区域之间的间隔大小 */
QScrollBar::add-page, QScrollBar::sub-page {
    margin: 2px;
}

/* 设置QScrollBar的悬停区域圆角 */
QScrollBar::add-page, QScrollBar::sub-page {
    border-radius: 7px;
}

/* 设置QScrollBar的悬停区域边框样式 */
QScrollBar::add-page, QScrollBar::sub-page {
    border: none;
}

/* 设置QScrollBar的悬停区域阴影样式 */
QScrollBar::add-page, QScrollBar::sub-page {
    box-shadow: none;
}

/* 设置QScrollBar的滑块悬停样式 */
QScrollBar::add-page:vertical:hover, QScrollBar::sub-page:vertical:hover {
    background-color: #ddd;
}

/* 设置QScrollBar的滑块按下样式 */
QScrollBar::add-page:vertical:pressed, QScrollBar::sub-page:vertical:pressed {
    background-color: #bbb;
}

/* 设置QScrollBar的滑块悬停样式 */
QScrollBar::add-page:horizontal:hover, QScrollBar::sub-page:horizontal:hover {
    background-color: #ddd;
}

/* 设置QScrollBar的滑块按下样式 */
QScrollBar::add-page:horizontal:pressed, QScrollBar::sub-page:horizontal:pressed {
    background-color: #bbb;
}

/* 设置QScrollBar的横向滑动条的标记线样式 */
QScrollBar::add-line:horizontal, QScrollBar::sub-line:horizontal {
    background-color: transparent;
    border: none;
}

/* 设置QScrollBar的横向滑动条的标记线样式 */
QScrollBar::add-line:horizontal {
    subcontrol-position: bottom;
    subcontrol-origin: margin;
    transform: rotate(90deg);
}

/* 设置QScrollBar的横向滑动条的标记线样式 */
QScrollBar::sub-line:horizontal {
    subcontrol-position: top;
    subcontrol-origin: margin;
    transform: rotate(90deg);
}

/* 设置QScrollBar的横向滑动条的标记线悬停样式 */
QScrollBar::add-line:horizontal:hover, QScrollBar::sub-line:horizontal:hover {
    background-color: #ddd;
}

/* 设置QScrollBar的横向滑动条的标记线按下样式 */
QScrollBar::add-line:horizontal:pressed, QScrollBar::sub-line:horizontal:pressed {
    background-color: #bbb;
}

注意：上面的样式可以根据自己的需求进行修改和调整，同时也可以添加其他样式来满足你的需求。

9> QSlider

下面是一些常用的QSlider的QSS样式：

/* 设置横向QSlider的高度和背景色 */
QSlider:horizontal {
    height: 10px;
    background-color: #eee;
}

/* 设置垂直QSlider的宽度和背景色 */
QSlider:vertical {
    width: 10px;
    background-color: #eee;
}

/* 设置QSlider的滑块样式 */
QSlider::handle {
    background-color: #ccc;
    width: 10px;
    height: 10px;
    margin: -5px 0;
    border-radius: 5px;
}

/* 设置QSlider的滑块悬停样式 */
QSlider::handle:hover {
    background-color: #aaa;
}

/* 设置QSlider的滑块按下样式 */
QSlider::handle:pressed {
    background-color: #888;
}

/* 设置横向QSlider的轨道样式 */
QSlider::groove:horizontal {
    height: 4px;
    background-color: #ddd;
}

/* 设置垂直QSlider的轨道样式 */
QSlider::groove:vertical {
    width: 4px;
    background-color: #ddd;
}

/* 设置横向QSlider的滑动区域样式 */
QSlider::sub-page:horizontal {
    background-color: #aaa;
}

/* 设置垂直QSlider的滑动区域样式 */
QSlider::sub-page:vertical {
    background-color: #aaa;
}

/* 设置横向QSlider的非滑动区域样式 */
QSlider::add-page:horizontal {
    background-color: #ccc;
}

/* 设置垂直QSlider的非滑动区域样式 */
QSlider::add-page:vertical {
    background-color: #ccc;
}

注意：上面的样式可以根据自己的需求进行修改和调整，同时也可以添加其他样式来满足你的需求。

10> QKeySequenceEdit

未使用未总结。

3.显示类组件


1> QLabel

下面是一些常用的QLabel的QSS样式：

/* 设置QLabel的文本颜色 */
QLabel {
    color: #333;
}

/* 设置QLabel的背景颜色 */
QLabel {
    background-color: #eee;
}

/* 设置QLabel的边框样式 */
QLabel {
    border: 1px solid #ccc;
}

/* 设置QLabel的字体样式 */
QLabel {
    font-family: Arial;
    font-size: 12px;
    font-weight: bold;
}

/* 设置QLabel的对齐方式 */
QLabel {
    alignment: center;
}

/* 设置QLabel的文本溢出方式 */
QLabel {
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

/* 设置QLabel的鼠标悬停样式 */
QLabel:hover {
    background-color: #ccc;
}

/* 设置QLabel的鼠标按下样式 */
QLabel:pressed {
    background-color: #aaa;
}

注意：上面的样式可以根据自己的需求进行修改和调整，同时也可以添加其他样式来满足你的需求。

2> QTextBrowser

下面是一些常用的QTextBrowser的QSS样式：

/* 设置QTextBrowser的背景颜色 */
QTextBrowser {
    background-color: #eee;
}

/* 设置QTextBrowser的边框样式 */
QTextBrowser {
    border: 1px solid #ccc;
}

/* 设置QTextBrowser的滚动条样式 */
QTextBrowser {
    scrollbar-width: thin;
    scrollbar-color: #ccc #eee;
}

/* 设置QTextBrowser的文本颜色 */
QTextBrowser {
    color: #333;
}

/* 设置QTextBrowser的字体样式 */
QTextBrowser {
    font-family: Arial;
    font-size: 12px;
}

/* 设置QTextBrowser中链接的颜色 */
QTextBrowser a {
    color: blue;
}

/* 设置QTextBrowser中链接的悬停样式 */
QTextBrowser a:hover {
    text-decoration: underline;
}

/* 设置QTextBrowser中选中文本的背景颜色 */
QTextBrowser::selection {
    background-color: #aaa;
}

注意：上面的样式可以根据自己的需求进行修改和调整，同时也可以添加其他样式来满足你的需求。

QGraphicsView、QCalendarWidget、QLCDNumber、QProgressBar、QOpenGLWidget和QQuickWidget

4.容器类组件
QGroupBox、QScrollArea、QToolBox、QTabWidget、QStackedWidget、QFrame、QWidget、QMdiArea、QDockWidget和QAxWidget

5.Item组件


1> QListView

下面是一些常用的QListView的QSS样式：

/* 设置QListView的背景颜色 */
QListView {
    background-color: #eee;
}

/* 设置QListView的边框样式 */
QListView {
    border: 1px solid #ccc;
}

/* 设置QListView的滚动条样式 */
QListView {
    scrollbar-width: thin;
    scrollbar-color: #ccc #eee;
}

/* 设置QListView的item的样式 */
QListView::item {
    padding: 5px;
}

/* 设置QListView的item在悬停状态下的样式 */
QListView::item:hover {
    background-color: #ccc;
}

/* 设置QListView的item在选中状态下的样式 */
QListView::item:selected {
    background-color: #aaa;
}

/* 设置QListView的item在禁用状态下的样式 */
QListView::item:disabled {
    color: #ccc;
}

/* 设置QListView的item中的文本颜色 */
QListView::item {
    color: #333;
}

/* 设置QListView的item中的字体样式 */
QListView::item {
    font-family: Arial;
    font-size: 12px;
}

注意：上面的样式可以根据自己的需求进行修改和调整，同时也可以添加其他样式来满足你的需求。

2> QTreeView

QTreeView有部分使用与QListView类似，如上所示。

/* 设置QTreeView的树节点的展开/折叠按钮的样式 */
QTreeView::branch {
    image: none;
    border-image: none;
    padding: 0px;
}

/* 设置QTreeView的树节点的展开/折叠图标 */
QTreeView::branch:has-siblings:!adjoins-item {
    border-image: none;
    image: url(:/icon/expand_arrow.png);
}

QTreeView::branch:has-siblings:adjoins-item {
    border-image: none;
    image: url(:/icon/collapse_arrow.png);
}

QTreeView::branch:!has-children:!has-siblings:adjoins-item {
    border-image: none;
    image: url(:/icon/expand_arrow.png);
}

QTreeView::branch:has-children:!has-siblings:closed,
QTreeView::branch:closed:has-children:has-siblings {
    border-image: none;
    image: url(:/icon/collapse_arrow.png);
}

/* 设置QTreeView的树节点的展开/折叠图标的大小 */
QTreeView::branch {
    width: 12px;
    height: 12px;
}

3> QTableView

下面是一些常用的QTableView的QSS样式：

/* 设置QTableView的背景颜色 */
QTableView {
    background-color: #eee;
}

/* 设置QTableView的边框样式 */
QTableView {
    border: 1px solid #ccc;
}

/* 设置QTableView的滚动条样式 */
QTableView {
    scrollbar-width: thin;
    scrollbar-color: #ccc #eee;
}

/* 设置QTableView的表头样式 */
QTableView::header {
    background-color: #ccc;
    color: #fff;
    padding: 5px;
}

/* 设置QTableView的表格行的样式 */
QTableView::item {
    padding: 5px;
}

/* 设置QTableView的表格行在悬停状态下的样式 */
QTableView::item:hover {
    background-color: #ccc;
}

/* 设置QTableView的表格行在选中状态下的样式 */
QTableView::item:selected {
    background-color: #aaa;
}

/* 设置QTableView的表格行在禁用状态下的样式 */
QTableView::item:disabled {
    color: #ccc;
}

/* 设置QTableView的表格中的文本颜色 */
QTableView::item {
    color: #333;
}

/* 设置QTableView的表格中的字体样式 */
QTableView::item {
    font-family: Arial;
    font-size: 12px;
}

/* 设置QTableView的列宽可调整 */
QTableView::handle {
    background-color: #ccc;
    border: 1px solid #ccc;
    width: 3px;
    margin: -1px 0;
}

/* 设置QTableView的拖拽时的边框样式 */
QTableView::item:selected:active {
    border: 1px solid #aaa;
}

注意：上面的样式可以根据自己的需求进行修改和调整，同时也可以添加其他样式来满足你的需求。

4> QColumnView和QUndoView


5> QListWidget

下面是一些常用的QListWidget的QSS样式：

/* 设置QListWidget的背景颜色 */
QListWidget {
    background-color: #eee;
}

/* 设置QListWidget的边框样式 */
QListWidget {
    border: 1px solid #ccc;
}

/* 设置QListWidget的滚动条样式 */
QListWidget {
    scrollbar-width: thin;
    scrollbar-color: #ccc #eee;
}

/* 设置QListWidget的列表项样式 */
QListWidget::item {
    background-color: #fff;
    padding: 5px;
}

/* 设置QListWidget的列表项在悬停状态下的样式 */
QListWidget::item:hover {
    background-color: #ccc;
}

/* 设置QListWidget的列表项在选中状态下的样式 */
QListWidget::item:selected {
    background-color: #aaa;
    color: #fff;
}

/* 设置QListWidget的列表项在禁用状态下的样式 */
QListWidget::item:disabled {
    color: #ccc;
}

/* 设置QListWidget的列表项中的文本颜色 */
QListWidget::item {
    color: #333;
}

/* 设置QListWidget的列表项中的字体样式 */
QListWidget::item {
    font-family: Arial;
    font-size: 12px;
}

/* 设置QListWidget的拖拽时的边框样式 */
QListWidget::item:selected:active {
    border: 1px solid #aaa;
}

注意：上面的样式可以根据自己的需求进行修改和调整，同时也可以添加其他样式来满足你的需求。

6> QTreeWidget

下面是一些常用的QTreeWidget的QSS样式：

/* 设置QTreeWidget的背景颜色 */
QTreeWidget {
    background-color: #eee;
}

/* 设置QTreeWidget的边框样式 */
QTreeWidget {
    border: 1px solid #ccc;
}

/* 设置QTreeWidget的滚动条样式 */
QTreeWidget {
    scrollbar-width: thin;
    scrollbar-color: #ccc #eee;
}

/* 设置QTreeWidget的树节点样式 */
QTreeWidget::item {
    background-color: #fff;
    padding: 5px;
}

/* 设置QTreeWidget的树节点在悬停状态下的样式 */
QTreeWidget::item:hover {
    background-color: #ccc;
}

/* 设置QTreeWidget的树节点在选中状态下的样式 */
QTreeWidget::item:selected {
    background-color: #aaa;
    color: #fff;
}

/* 设置QTreeWidget的树节点中的文本颜色 */
QTreeWidget::item {
    color: #333;
}

/* 设置QTreeWidget的树节点中的字体样式 */
QTreeWidget::item {
    font-family: Arial;
    font-size: 12px;
}

/* 设置QTreeWidget的树节点的展开和折叠图标样式 */
QTreeWidget::branch:open {
    image: url(:/images/branch_open.png);
}

QTreeWidget::branch:closed {
    image: url(:/images/branch_closed.png);
}

注意：上面的样式可以根据自己的需求进行修改和调整，同时也可以添加其他样式来满足你的需求。

7> QTableWidget

下面是一些常用的QTableWidget的QSS样式：

/* 设置QTableWidget的背景颜色 */
QTableWidget {
    background-color: #eee;
}

/* 设置QTableWidget的边框样式 */
QTableWidget {
    border: 1px solid #ccc;
}

/* 设置QTableWidget的表头样式 */
QTableWidget::header {
    background-color: #ccc;
    color: #fff;
}

/* 设置QTableWidget的行样式 */
QTableWidget::item {
    padding: 5px;
}

/* 设置QTableWidget的单元格在悬停状态下的样式 */
QTableWidget::item:hover {
    background-color: #ccc;
}

/* 设置QTableWidget的单元格在选中状态下的样式 */
QTableWidget::item:selected {
    background-color: #aaa;
    color: #fff;
}

/* 设置QTableWidget的单元格中的文本颜色 */
QTableWidget::item {
    color: #333;
}

/* 设置QTableWidget的单元格中的字体样式 */
QTableWidget::item {
    font-family: Arial;
    font-size: 12px;
}

/* 设置QTableWidget的滚动条样式 */
QTableWidget {
    scrollbar-width: thin;
    scrollbar-color: #ccc #eee;
}

注意：上面的样式可以根据自己的需求进行修改和调整，同时也可以添加其他样式来满足你的需求。

简茧人
关注
  • 7
    点赞
  • 踩
  • 18
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
专栏目录
QT之qss教程-QToolButton
wzs的博客
11-13 6717
QToolButton { border:2px solid #124d92; border-radius:5px; background-color:yellow; min-width:60px; min-height:40px; } QToolButton[pupupMode="1"] { padding-right:20px; } /* 鼠标按下时 */ QToolButto
Qt 自定义QPushButton样式表(实时生成QSS)
11-20
源码可直接编译运行，自定义QPushButton样式，通过选择背景渐变、边框、字体、字号、鼠标移入移出切换、点击态、圆角设置等自动生成样式code，然后调用setStyleSheet()。
【Qt】修改QToolButton图标颜色
最新发布
-凌凌漆-的博客
05-18 464
修改QToolButton的图标颜色，单一颜色，效果类似于Qt Creator左边选项卡。
QToolButton的特殊使用
庄生晓梦
05-12 366
记录QToolButton的特殊使用方法
qt 练习题目QToolButton qss
abc
02-26 184
qt 练习题目QToolButton qss
Qt Qss按钮
zhengtianzuo的博客
10-11 1979
编写Qss文件:QPushButton { border-image: url(:/ButtonNormal.png); } QPushButton:hover { border-image: url(:/ButtonHover.png); } QPushButton:pressed { border-image: url(:/ButtonPressed.png); }设置Q
QT qss按钮三种状态（常态，鼠标覆盖，单击）
06-07
右键单击按钮，选择转到样式表，将附件的qss代码粘贴到按钮样式表中，图片从资源文件中选。
qss样式表之QPushButton
王廷云的博客
07-02 1万+
先来个示例 QPushButton { font-family: "Microsoft YaHei"; font-size: 16px; color: #BDC8E2; background-color: #2E3648; } 效如下效果： 上面的例子是基本的样式设置，下面我们将探讨 QPushButton 各种样式设置： 字体样式 font-family: ...
好用的QT-qss漂亮界面
10-25
QT框架中的QSS（Qt StyleSheet）是用于给Qt应用程序添加样式和皮肤的一种强大工具，它类似于网页设计中的CSS，能够使你的应用界面看起来更加专业和美观。本资源提供了"好用的QT-qss漂亮界面"，包含代码示例和相关的...
Button使用QSS变图片按钮.rar
11-20
2.保证无毒 3.简单,方便,实用 4.实例可以自行改用 5.如有非法,本人无法律责任,由改动代码人负责！ 6.需要更多本人作品,查找标签“朱建强” 7.请下载,杀毒后再使用！
QT-按钮风格实时渲染+QSS实时显示+QPushButton样式
07-21
通过选择不同参数，实时渲染按钮的样式，并且实时生成QSS代码，直接使用即可达到想要的效果，很方便。
【代码工具】Qt 自定义QPushButton样式表(灵活选择)
09-12
【源码可运行】自定义QPushButton样式，通过选择背景渐变、边框、字体、字号、鼠标移入移出切换、点击态等自动生成样式code，然后调用setStyleSheet()。
Qt Qss三套样式文件 qss.zip
10-19
Qt QSS，全称为Qt Style Sheets，是Qt框架提供的一种样式表语言，类似于网页开发中的CSS，用于控制Qt应用程序的用户界面外观。QSS允许开发者通过文本文件定义UI元素的颜色、字体、边框、背景、布局等样式，使得UI...
Qt-样式表qss练习
03-22
在Qt框架中，QSS（Qt Style Sheets）是一种强大的样式表语言，用于定制应用程序的界面外观，类似于网页设计中的CSS。QSS允许开发者通过简单的文本文件或者代码动态地改变控件的颜色、字体、布局以及整体视觉效果，为...
QT粉红色qss样式表
11-08
粉红色QSS样式表的使用方法是在QT程序中加载该样式表文件，然后应用到相应的界面组件上，如窗口、对话框或者控件。 总的来说，"粉红色qss样式表"为QT开发者提供了一种快速改变应用程序界面颜色方案的方式，特别是...
QT自定义风格qss得日历
06-20
在这个项目中，开发者通过利用QT的样式表（QSS）技术，使得日历组件的外观可以根据用户的喜好进行定制，包括颜色、字体、布局等方面，从而提升用户体验。 首先，我们来了解一下QSS（Qt Style Sheets）。QSS类似于...
QSS之QPushButton 详细介绍
热门推荐
wanyongtai的博客
05-06 4万+
官方参考资料 QPushButton { /* 前景色 */ color:red; /* 背景色 */ background-color:rgb(30,75,10); /* 边框风格 */ border-style:outset; /* 边框宽度 */ border-width:2px; ...
Qt实战案例（13）（序）——以QToolButton为例介绍Qt界面外观设计
Wendy的博客
01-13 3169
目录一、项目介绍二、项目基本配置三、UI界面设计四、主程序实现4.1 widget.h头文件4.2 widget.cpp源文件4.3 main.qss五、效果演示 一、项目介绍 以QToolButton为例，详解Qt界面外观（QSS）设计。 二、项目基本配置 新建一个Qt案例，项目名称为“Test”，基类选择“QWidget”，创建UI界面复选框的选中状态，完成项目创建。 三、UI界面设计 UI界面内放置一个ToolButton，如下： 四、主程序实现 4.1 widget.h头文件 声明按钮点击槽函数：
【QT】QSS美化——Buttons篇
俊俊的博客
03-04 7559
Buttons篇QSS美化 QPushButton、QToolButton、QCheckBox、QRadioButton
qt 为组件设置qss
05-18
在 Qt 中，我们可以使用 QSS（Qt Style Sheet）为组件设置样式。以下是一个示例： 假设我们有一个 QPushButton（按钮）组件，并且我们想要设置它的背景颜色为蓝色并将字体颜色设置为白色，我们可以使用以下代码： ```cpp QPushButton { background-color: blue; color: white; } ``` 我们可以将其保存到一个 .qss 文件中，然后使用以下代码将其应用于我们的应用程序： ```cpp QFile file(":/stylesheets/stylesheet.qss"); file.open(QFile::ReadOnly); QString styleSheet = QLatin1String(file.readAll()); qApp->setStyleSheet(styleSheet); ``` 在上面的代码中，我们首先打开样式表文件并读取其内容。然后，我们将样式表作为字符串设置为应用程序的样式表。 请注意，我们在文件路径前面添加了一个冒号，表示该文件是 Qt 资源文件中的资源。您也可以使用绝对文件路径或相对文件路径。 此外，我们还可以使用 setStyleSheet() 函数为单个组件设置样式，如下所示： ```cpp QPushButton* button = new QPushButton("Click me"); button->setStyleSheet("background-color: blue; color: white;"); ``` 在上面的代码中，我们首先创建一个 QPushButton 实例，然后使用 setStyleSheet() 函数将背景颜色和字体颜色设置为蓝色和白色。

“相关推荐”对你有帮助么？

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值