文章目录
原文地址：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);//在停靠窗体中添加widget
m_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;
}
922
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
