Qt Style Sheets Examples整理

原文地址：https://doc.qt.io/qt-6/stylesheet-examples.html

我使用的qt5.14.2测试的

样式表用法

1.全局使用

qApp->setStyleSheet(“QLineEdit { background-color: yellow }”);

2.子类及子类以下使用

myDialog->setStyleSheet(“QLineEdit { background-color: yellow }”);

3.某一个特定的控件

使用QObject::setObjectName()设定一个ID

通过id选择器

myDialog->setStyleSheet(“QLineEdit#nameEdit { background-color: yellow }”);

4.直接在控件上使用

nameEdit->setStyleSheet(“background-color: yellow”);

使用动态属性自定义

为一个控件设置一个属性值，然后根据属性值更改样式表

QLineEdit *nameEdit = new QLineEdit(this);
nameEdit->setProperty(“mandatoryField”, true);

*[mandatoryField=“true”] { background-color: yellow }

效果图：

使用Box模型自定义QPushButton

效果图：

按钮按下效果：

自定义QPushButton的菜单指示子控件

默认情况下，菜单指示器位于填充矩形的右下角。我们可以通过指定subcontrol-position和subcontrol-origin来改变这一点，以不同的方式锚定指示器。我们也可以使用top和left来移动指示器几个像素。

效果：

复杂选择器

后面设置的QLineEdit没有起作用

效果图：

完整代码：

allwidgetshow.cpp

#include "allwidgetshow.h"#include <QVBoxLayout>
#include <QLineEdit>
#include <QPushButton>
#include <QMenu>
#include <QAction>
#include <QUrl>AllWidgetShow::AllWidgetShow(QWidget *parent) : QWidget(parent)
{QVBoxLayout* mainLayOut = new QVBoxLayout();QLineEdit* nameEdit = new QLineEdit();nameEdit->setProperty("mandatoryField", true);QLineEdit* emailEdit = new QLineEdit();mainLayOut->addWidget(nameEdit);mainLayOut->addWidget(emailEdit);QPushButton* pushBtn1 = new QPushButton("Format C:");pushBtn1->setObjectName("evilButton");QPushButton* pushBtn2 = new QPushButton("Menu Btn");QMenu* pMenu = new QMenu();pushBtn2->setMenu(pMenu);QAction* pAction = new QAction();pAction->setText(tr("save"));pMenu->addAction(pAction);mainLayOut->addWidget(pushBtn1);mainLayOut->addWidget(pushBtn2);QString pushBtn1Style = "QPushButton#evilButton { background-color: red;""border-style: outset;border-width: 2px;""border-color: blue;border-radius: 10px; ""font: bold 14px;min-width: 10em;padding: 6px;}""QPushButton#evilButton:pressed {""background-color: rgb(0, 244, 0);""border-style: inset;}";QString pushBtn2Style = "QPushButton::menu-indicator{""image: url(:/icon/dndCopy.png);""subcontrol-position: right center;""subcontrol-origin: padding;""left: -2px;}";QLineEdit* lineedit1 = new QLineEdit();QLineEdit* lineedit2 = new QLineEdit();lineedit2->setProperty("readOnly", true);QLineEdit* lineedit3 = new QLineEdit();lineedit3->setObjectName("registrationDialog");lineedit1->setText("广阔天地");lineedit2->setText("大有作为");lineedit3->setText("毛主席万岁");mainLayOut->addWidget(lineedit1);mainLayOut->addWidget(lineedit2);mainLayOut->addWidget(lineedit3);QString complexStyle = "QLineEdit { color: red }""QLineEdit[readOnly=\\"true\\"] { color: gray }""QLineEdit#registrationDialog { color: brown }""QDialog QLineEdit { color: yellow }";//后面设置的QLineEdit没有起作用this->setStyleSheet("*[mandatoryField=\\"true\\"] { background-color: yellow }"+pushBtn1Style+pushBtn2Style+complexStyle);this->setLayout(mainLayOut);
}

allwidgetshow.h

#ifndef ALLWIDGETSHOW_H
#define ALLWIDGETSHOW_H#include <QObject>
#include <QWidget>class AllWidgetShow : public QWidget
{Q_OBJECT
public:explicit AllWidgetShow(QWidget *parent = nullptr);signals:};#endif // ALLWIDGETSHOW_H

特定部件样式表

QAbstractScrollArea

任何QAbstractScrollArea (Item视图，qtexttedit和QTextBrowser)的背景都可以使用背景属性进行设置。

效果图：

QCheckBox

QCheckBox的样式与QRadioButton的样式几乎相同。主要区别在于三状态QCheckBox具有不确定状态。
效果图：

QComboBox

QComboBox的弹出窗口是一个QAbstractItemView，并使用后代选择器进行样式设置。
当弹出窗口打开时，QComboBox获得“打开”状态。

QDockWidget

效果图：

QFrame + QProgressBar + QPushButton + QSlider

在对QPushButton进行样式设计时，通常希望使用图像作为按钮图形。通常可以尝试使用background-image属性，但这有一些缺点:例如，背景通常会隐藏在按钮装饰后面，因为它不被视为背景。此外，如果按钮被调整大小，整个背景将被拉伸或平铺，这并不总是看起来很好。

最好使用border-image属性，因为它将始终显示图像，而不考虑背景(如果它具有alpha值，则可以将其与背景组合)，并且它具有处理按钮大小调整的特殊设置。

url后面的数字分别给出了顶部、右侧、底部和左侧的像素数。这些数字对应于边框，当尺寸改变时不应该拉伸。当您调整按钮的大小时，图像的中间部分将向两个方向拉伸，而样式表中指定的像素则不会。这使得按钮的边界看起来更自然。

完整代码：

地址：https://download.csdn.net/download/yuxing55555/87705339

关键代码：

#include "allwidgetshow.h"#include <QVBoxLayout>
#include <QLineEdit>
#include <QPushButton>
#include <QMenu>
#include <QAction>
#include <QUrl>
#include <QTextEdit>
#include <QCheckBox>
#include <QComboBox>
#include <QDockWidget>
#include <QLabel>
#include <QProgressBar>AllWidgetShow::AllWidgetShow(QWidget *parent) : QWidget(parent)
{m_mainLayOut = new QVBoxLayout();QString textEditStyle = "";//addQTextEdit();QString checkBoxStyle = addQCheckBox();QString comboxBoxStyle = addQComboBox();QString dockWidgetStyle = "";//addQDockWidget();QString frameStyle = addQFrameWidget();QString progressBarStyle = addQProgressBar();QString pushBtnStyle = addQPushButton();QString sliderStyle = addQSlider();this->setStyleSheet(textEditStyle+checkBoxStyle+comboxBoxStyle+dockWidgetStyle+frameStyle+progressBarStyle+pushBtnStyle+sliderStyle);this->setLayout(m_mainLayOut);
}QString AllWidgetShow::addQTextEdit()
{QTextEdit* textEdit1 = new QTextEdit();QTextEdit* textEdit2 = new QTextEdit();textEdit2->setObjectName("scrollImage");m_mainLayOut->addWidget(textEdit1);m_mainLayOut->addWidget(textEdit2);QString textEditStyle = "QTextEdit{""background-color: blue;""background-image: url(:/icon/unknow.png);""background-attachment: fixed;}""QTextEdit#scrollImage{""background-color: red;""background-image: url(:/icon/lena.png);""background-attachment: scroll;}";return textEditStyle;
}QString AllWidgetShow::addQCheckBox()
{QCheckBox* checkBox = new QCheckBox();checkBox->setCheckState(Qt::PartiallyChecked);m_mainLayOut->addWidget(checkBox);QString checkBoxStyle = "QCheckBox {spacing: 5px;}""QCheckBox::indicator {width: 45px;height: 30px;}""QCheckBox::indicator:unchecked {image: url(:/images/checkbox_unchecked.png);}""QCheckBox::indicator:unchecked:hover {image: url(:/images/checkbox_unchecked_hover.png);}""QCheckBox::indicator:unchecked:pressed {image: url(:/images/checkbox_unchecked_pressed.png);}""QCheckBox::indicator:checked {image: url(:/images/checkbox_checked.png);}""QCheckBox::indicator:checked:hover {image: url(:/images/checkbox_checked_hover.png);}""QCheckBox::indicator:checked:pressed {image: url(:/images/checkbox_checked_pressed.png);}""QCheckBox::indicator:indeterminate:hover {image: url(:/images/homeHover.png);}""QCheckBox::indicator:indeterminate:pressed {image: url(:/images/homePress.png);}";return checkBoxStyle;
}QString AllWidgetShow::addQComboBox()
{QComboBox* comboBox = new QComboBox();comboBox->addItem("C++");comboBox->addItem("Python");m_mainLayOut->addWidget(comboBox);QString comboxBoxStyle = "QComboBox {border: 2px solid red;""border-radius: 5px;""padding: 1px 18px 1px 3px;""min-width: 12em;}""QComboBox:editable {background: yellow;}""QComboBox:!editable, QComboBox::drop-down:editable {""background: qlineargradient(x1: 0, y1: 0, x2: 0, y2: 1,""stop: 0.0 #FFFFFF, stop: 1.0 #440000);}""QComboBox:!editable:on, QComboBox::drop-down:editable:on {""background: qlineargradient(x1: 0, y1: 0, x2: 0, y2: 1,""stop: 0.0 #FFFFFF, stop: 1.0 #000044);}""QComboBox:on{ padding-top: 2px;padding-left: 20px;}""QComboBox::drop-down {""subcontrol-origin: padding;""subcontrol-position: top right;""width: 25px;""border-left-width: 5px;""border-left-color: blue;""border-left-style: solid; ""border-top-right-radius: 3px; ""border-bottom-right-radius: 3px;}""QComboBox::down-arrow {""image: url(:/icon/dndCopy.png);}""QComboBox::down-arrow:on {top: 1px;left: 10px;}""QComboBox QAbstractItemView {""border: 2px solid darkgray;""selection-background-color: blue;}";return comboxBoxStyle;
}QString AllWidgetShow::addQDockWidget()
{//注意:要自定义QDockWidget的分隔符(调整句柄大小)，请使用QMainWindow::separator。//添加停靠窗体QDockWidget *dock=new QDockWidget(tr("Dock Widget"),this);//设置停靠窗体可移动--DockWidgetClosable可关闭DockWidgetFloatable可浮动AllDockWidgetFeatures全部特性dock->setFeatures(QDockWidget::AllDockWidgetFeatures);dock->setAllowedAreas(Qt::LeftDockWidgetArea|Qt::RightDockWidgetArea);//设置停靠窗体可停靠的位置QLabel *text =new QLabel();text->setText(tr("widget in dock.."));dock->setWidget(text);//在停靠窗体中添加widgetm_mainLayOut->addWidget(dock);QString dockWidgetStyle = "QDockWidget {""border: 1px solid lightgray;min-height: 25em;""titlebar-close-icon: url(:/icon/right.png);""titlebar-normal-icon: url(:/icon/dndCopy.png);}""QDockWidget::title {""text-align: left;""background: lightgray;""padding-left: 45px;height:20px}""QDockWidget::close-button, QDockWidget::float-button {""border: 1px solid transparent;""background: darkgray;padding: 0px;icon-size: 28px;}""QDockWidget::close-button:hover, QDockWidget::float-button:hover {""background: gray;}""QDockWidget::close-button:pressed, QDockWidget::float-button:pressed {""padding: 1px -1px -1px 1px;}""QDockWidget::close-button {"   //如果希望将dock小部件按钮向左移动，可以使用以下样式表"subcontrol-position: top left;""subcontrol-origin: margin;""position: absolute;""top: 0px; left: 0px; bottom: 0px;""width: 14px;}""QDockWidget::float-button {""subcontrol-position: top left;""subcontrol-origin: margin;"" position: absolute;""top: 0px; left: 16px; bottom: 0px;""width: 14px;}";return dockWidgetStyle;
}QString AllWidgetShow::addQFrameWidget()
{QFrame* frame = new QFrame();frame->setObjectName("frameObj");m_mainLayOut->addWidget(frame);QString frameStyle = "QFrame#frameObj {""border: 2px solid green;""border-radius: 4px;""padding: 2px;min-height:20px;""background-image: url(:/icon/lena.png);}";return frameStyle;
}QString AllWidgetShow::addQProgressBar()
{QProgressBar* progressBar = new QProgressBar();progressBar->setRange(0,100);progressBar->setValue(50);m_mainLayOut->addWidget(progressBar);QString progressBarStyle = "QProgressBar {border: 2px solid grey;border-radius: 5px;text-align: center;}""QProgressBar::chunk {background-color: #05B8CC;width: 20px;margin: 0.5px;}";return progressBarStyle;
}QString AllWidgetShow::addQPushButton()
{QPushButton* pushBtn = new QPushButton("pushBtn");QMenu* pMenu = new QMenu();pushBtn->setMenu(pMenu);QAction* pAction = new QAction();pAction->setText(tr("save"));pMenu->addAction(pAction);m_mainLayOut->addWidget(pushBtn);QString pushBtnStyle = "QPushButton {border: 2px solid #8f8f91;""border-radius: 6px;""background-color: qlineargradient(x1: 0, y1: 0, x2: 0, y2: 1,stop: 0 #f6f7fa, stop: 1 #dadbde);""min-width: 80px;min-height: 30px;}""QPushButton:pressed {""background-color: qlineargradient(x1: 0, y1: 0, x2: 0, y2: 1,stop: 0 #dadbde, stop: 1 #f6f7fa);}""QPushButton:flat {""border: none; }""QPushButton:default {""border-color: navy; }""QPushButton:open {""background-color: qlineargradient(x1: 0, y1: 0, x2: 0, y2: 1,stop: 0 #dadbde, stop: 1 #f6f7fa);}""QPushButton::menu-indicator {""image: url(:/icon/dndCopy.png);""subcontrol-origin: padding;""subcontrol-position: bottom right;}""QPushButton::menu-indicator:pressed, QPushButton::menu-indicator:open {""position: relative;top: 2px; left: 2px; }""QPushButton#borderImage{""color: grey;""border-image: url(:/icon/btn.png) 3 10 3 10;""border-top: 3px transparent;""border-bottom: 3px transparent;""border-right: 10px transparent;""border-left: 10px transparent;}";QPushButton* pushBtn2 = new QPushButton("pushBtn");pushBtn2->setObjectName("borderImage");m_mainLayOut->addWidget(pushBtn2);return pushBtnStyle;
}QString AllWidgetShow::addQSlider()
{QSlider* slider = new QSlider();slider->setValue(50);slider->setRange(0,100);slider->setOrientation(Qt::Horizontal);m_mainLayOut->addWidget(slider);QString sliderStyle = "QSlider::groove:horizontal {""border: 1px solid #999999;""height: 8px;position: absolute; left: 4px; right: 4px;""background: qlineargradient(x1:0, y1:0, x2:0, y2:1, stop:0 #B1B1B1, stop:1 #c4c4c4);""margin: 2px 0;}""QSlider::handle:horizontal {""background: qlineargradient(x1:0, y1:0, x2:1, y2:1, stop:0 #b4b4b4, stop:1 #8f8f8f);""border: 1px solid #5c5c5c;""width: 18px;height: 10px;""margin: -2px 0; border-radius: 3px;}""QSlider::add-page:horizontal {""background: white; }""QSlider::sub-page:horizontal {""background: pink; }";return sliderStyle;
}