超详细的QSS样式表入门Demo 原创

超详细的QSS样式表入门Demo📄

文章目录

超详细的QSS样式表入门Demo📄
@[toc]
1、说明🔑
2、Qt控件样式💡
2.1 QAbstractScrollArea
2.2 QCheckBox
2.3 QRadioButton
2.4 QPushButton
2.5 QToolButton
2.6 QComboBox
2.7 QDockWidget
2.8 QFrame、QLabel、QToolTip
2.9 QGroupBox
2.10 QLineEdit
2.11 QMainWindow
2.12 QMenu
2.13 QMenuBar
2.14 QProgressBar
2.15 QScrollBar
2.16 QSizeGrip
2.17 QSlider
2.18 QAbstractSpinBox
2.19 QSplitter
2.20 QStatusBar
2.21 QTabWidget
2.22 QListView
2.23 QHeaderView、QTableView、QTableWidget
2.24 QToolBar
2.25 QToolBox
2.26 QToolTip
2.27 QDial
2.28 QCalendarWidget
2.29 QTreeView、QTreeWidget

3、源代码📌

更多精彩内容
👉个人内容分类汇总 👈

pdf版本下载📝

1、说明🔑

十分详细的Qss样式表练习Demo，为了效果明显有些样式进行了夸张，所以不一定好看;
包含了常用控件的Qss样式；

2、Qt控件样式💡

2.1 QAbstractScrollArea

QAbstractScrollArea作为父类，他的样式表适用于QListView、QTextEdit、QPlainTextEdit、QTextBrowser、QTreeWidget、 QGraphicsView、QMdiArea、QScrollArea等控件。
效果

关键代码

ui->mdiArea->setBackground(Qt::NoBrush);           // 如果不设置则QMdiArea的qss样式不会生效

关键Qss样式表

/********************QAbstractScrollArea样式**********************/
QAbstractScrollArea{
/*    background-color: rgba(255, 0, 0, 150);*/     /* 设置背景色*/
    background-image: url(:/image/bg.PNG);          /* 设置背景图片*/
    background-repeat:no-repeat;                    /* 设置背景图像是否及如何重复*/
    background-position:center;                     /* 设置背景图像的起始位置*/
    background-attachment: scroll;                  /* 背景图像是否固定或者随着页面的其余部分滚动 */
    color: rgb(0, 255, 0);
}

/*由于QScrollArea里还有一层QWidget，所以需要将这一层QWidget设置透明才可以通过QAbstractScrollArea设置背景*/
QScrollArea #scrollAreaWidgetContents
{
    background-color: rgba(255, 255, 255, 0);
}

2.2 QCheckBox

效果

关键代码

ui->checkBox->setTristate(true);                   // 开启QCheckBox不确定态(开启三态复选框)

关键Qss样式表

/********************复选框样式**********************/
QCheckBox{
    spacing:15px;          /*设置标签和矩形框的间距*/
}

QCheckBox::indicator{
    width: 15px;           /*设置复选框矩形部分大小*/
    height: 15px;
}


QCheckBox::indicator:unchecked {
   image: url(:/image/正方形-未选中.png);    /* 设置未选中状态矩形部分图片*/
}

QCheckBox::indicator::checked {
    image: url(:/image/复选框-选中.png);     /*设置选中状态*/
}

QCheckBox::indicator::indeterminate{
    image: url(:/image/复选框-未全选.png);    /*设置不确定状态*/
}

QCheckBox::indicator:unchecked:hover,
QCheckBox::indicator::checked:hover,
QCheckBox::indicator::indeterminate:hover{
    width: 16px;
    height: 16px;                           /*设置矩形部分鼠标悬停状态*/
}

QCheckBox::indicator:unchecked:pressed,
QCheckBox::indicator::checked:pressed,
QCheckBox::indicator::indeterminate:pressed{
    background-color: rgb(8, 202, 255);     /*设置矩形部分鼠标按下背景色*/
}

2.3 QRadioButton

效果

关键Qss样式表

/********************单选框样式**********************/

QRadioButton::indicator{
    width:15px;
    height:15px;
}

QRadioButton::indicator:unchecked {
    image: url(:/image/单选框-未选中.png);
}

QRadioButton::indicator:checked{
image: url(:/image/单选框-选中.png);
}

QRadioButton::indicator:unchecked:hover,
QRadioButton::indicator:checked:hover{
    width: 16px;
    height: 16px;
}

QRadioButton::indicator:unchecked:pressed,
QRadioButton::indicator:checked:pressed{
    background-color: rgb(8, 202, 255);
}

2.4 QPushButton

效果

关键代码

ui->pushButton_3->setAutoDefault(true);            // 设置默认按键(对应QPushButton:default样式)
ui->pushButton_4->setFlat(true);                   // 设置后按钮跟背景色融为一体（对应QPushButton:flat）
ui->but_icon->setIcon(this->style()->standardIcon(QStyle::SP_TitleBarMenuButton)); // 按键添加图标

关键Qss样式表

/********************QPushButton样式**********************/
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: 25px;
}

QPushButton:pressed{                   /* 设置按键按下样式 */
    background-color: qlineargradient(x1: 0, y1: 0, x2: 0, y2: 1,
                                      stop: 0 #dadbde, stop: 1 #f6f7fa);
}

QPushButton:flat {
    border: none; /* no border for a flat push button */
}

QPushButton:default {                 /* 设置默认按键样式 */
    border-color: rgb(85, 170, 255);
}

QPushButton:open {                    /* 设置菜单打开时button样式*/
    background - color:qlineargradient(x1: 0 , y1: 0 , x2: 0 , y2: 1 ,
                                  stop: 0 #dadbde, stop: 1 #f6f7fa);
}

QPushButton::menu-indicator {          /* 设置下拉箭头 */
    subcontrol-origin: content;        /* 父控件内子控件的原点矩形。是QSS独有的属性。值为父控件的盒子模式的区域 */
    subcontrol-position: center right; /* 设置下拉箭头显示位置为水平方向上靠右，垂直方向居中*/
}

QPushButton::menu-indicator:pressed,
QPushButton::menu-indicator:open {
    position: relative;                /* 指定了元素的定位类型*/
    top: 1px; left: 2px;               /* 设置在点击按键、打开菜单时偏移下拉箭头*/
}

2.5 QToolButton

效果
说明：
- QToolButton::menu-button：右侧绿色部分；
- QToolButton::menu-arrow：右侧红色部分。

关键Qss样式表

/********************QToolButton样式**********************/
QToolButton {                   /* 这里使用#tab_2限定样式的作用范围，防止影响其它tab中的控件样式*/
    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: 25px;
}

QToolButton[popupMode="1"] {          /* setPopupMode设置了MenuButtonPopup后的样式*/
    padding-right: 20px;              /* 设置元素右内边距*/
}

QToolButton:pressed {                 /* 鼠标按下样式 */
    background-color: qlineargradient(x1: 0, y1: 0, x2: 0, y2: 1,
                                  stop: 0 #dadbde, stop: 1 #f6f7fa);
}

QToolButton::menu-button {           /* setPopupMode设置了MenuButtonPopup后包含下拉箭头button的样式*/
    border: 2px solid #8f8f91;
    border-top-right-radius: 6px;
    border-bottom-right-radius: 6px; /* 需要设置圆角和QToolButton一致*/
    width: 16px;                     /* 设置下拉箭头button宽度 */
}

QToolButton::menu-arrow {           /* 设置下拉箭头样式 */
    image: url(:/image/下.png);
}

QToolButton::menu-arrow:open {     /* 打开菜单时偏移下拉箭头 */
    top: 1px;
    left: 1px;
}

2.6 QComboBox

效果
说明：
- QComboBox::drop-down：绿色部分；
- QComboBox::down-arrow：红色部分。

关键Qss样式表

/********************QComboBox样式**********************/
QComboBox {
    border: 1px solid gray;
    border-radius: 3px;
    padding: 1px 18px 1px 3px;         /* 设置元素边框与元素内容之间的上右下左的内边距 */
    min-width: 6em;
}

QComboBox:editable {                   /* 设置可编辑的样式*/
    background-color: white;
}

QComboBox:!editable,                   /* QComboBox不可编辑状态*/
QComboBox::drop-down:editable {        /* 下拉箭头按键区域可编辑状态*/
     background: qlineargradient(x1: 0, y1: 0, x2: 0, y2: 1,
                                 stop: 0 #E1E1E1, stop: 0.4 #DDDDDD,
                                 stop: 0.5 #D8D8D8, stop: 1.0 #D3D3D3);
}

QComboBox:!editable:on, QComboBox::drop-down:editable:on {      /* 当弹出窗口打开时，QComboBox获取“打开”状态(打开下拉框状态)*/
    background: qlineargradient(x1: 0, y1: 0, x2: 0, y2: 1,
                                stop: 0 #D3D3D3, stop: 0.4 #D8D8D8,
                                stop: 0.5 #DDDDDD, stop: 1.0 #E1E1E1);
}

QComboBox:on {       /* 弹出下拉框窗口时移动文本*/
    padding-top: 3px;
    padding-left: 6px;
}

QComboBox::drop-down {                   /* 设置下拉按键*/
    subcontrol-origin: padding;          /* 设置按键在QComboBox盒子模型中的参考位置margin border padding content*/
    subcontrol-position: top right;      /* 设置按键位置靠上靠右*/
    background-color: rgb(245, 245, 245);
    width: 20px;

    border-left-width: 2px;              /* 设置下拉按键左边框宽度*/
    border-left-color: rgb(0, 255, 0);   /* 左边框颜色*/
    border-left-style: solid;
    border-top-right-radius: 3px;        /* 设置边框圆角*/
    border-bottom-right-radius: 3px;
}

QComboBox::down-arrow {                  /* 设置下拉箭头*/
    image: url(:/image/下.png);
}

QComboBox::down-arrow:on {               /* 打开下拉框时移动下拉箭头*/
    top: 1px;
    left: 1px;
}

QComboBox QAbstractItemView {
    border: 2px solid rgb(0, 255, 0);      /* 设置下拉列表边框*/
    selection-background-color: lightgray; /* 设置下拉列表选择项的背景色*/
}

2.7 QDockWidget

效果

关键Qss样式表

/********************QDockWidget样式**********************/
QDockWidget {
    border: 2px solid rgb(0, 255, 0);
    titlebar-close-icon: url(:/image/close.png);         /* 设置关闭按键图标*/
    titlebar-normal-icon: url(:/image/undock.png);       /* 设置弹出窗口按键图标*/
}

QDockWidget::title {
    text-align: right;                      /* 标题文本右对齐*/
    background-color: rgb(0, 255, 0);       /* 设置标题栏背景色*/
    padding-right: 15px;                    /* 标题元素的右内边距*/
}

QDockWidget::close-button,                  /* 设置关闭、浮动窗口按键样式*/
QDockWidget::float-button {
    border: 1px solid transparent;          /* 设置边框*/
    background: transparent;                /* 设置背景色*/
}
QDockWidget::close-button:hover,
QDockWidget::float-button:hover {
    background: rgba(161, 161, 161, 70);   /* 设置标题栏按键鼠标进入的样式*/
}

QDockWidget::close-button:pressed,
QDockWidget::float-button:pressed {
    padding: 1px -1px -1px 1px;            /* 设置标题栏按键鼠标按下的样式*/
}

/*  设置标题栏关闭按键、浮动窗口按键靠左
QDockWidget::close-button {
    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;
}
*/

2.8 QFrame、QLabel、QToolTip

由于QLabel、QToolTip都是基于QFrame实现的，所以设置样式的方法都差不多；
效果

关键Qss样式表

/********************QFrame、QLabel、QToolTip样式**********************/
QFrame,
QLabel,
QToolTip {
    border: 2px solid rgb(0, 255, 0);
    border-radius: 4px;                  /* 设置边框圆角*/
    padding: 2px;
}

2.9 QGroupBox

效果

关键Qss样式表

/********************QGroupBox样式**********************/
QGroupBox {
    background-color:  qlineargradient(x1: 0, y1: 0, x2: 0, y2: 1,
                        stop: 0 #E0E0E0, stop: 1 #FFFFFF);
    border: 2px solid gray;              /* 设置边框*/
    border-radius: 5px;                  /* 边框圆角*/
    margin-top: 1ex;
}

QGroupBox::title {
    subcontrol-origin: margin;             /* 设置GroupBox标题在盒子模型中的参考位置margin border padding content*/
    subcontrol-position: top center;       /* 标题位于顶部中心位置*/
    padding: 0 15px;                        /* 设置上下填充为0，左右填充为15*/
    background-color: qlineargradient(x1: 0, y1: 0, x2: 0, y2: 1,
                                      stop: 0 #FF0ECE, stop: 1 #FFFFFF);  /* 设置标题背景色*/
}

/*QGroupBox复选框和QCheckBox样式一样*/
QGroupBox::indicator{
    width: 15px;           /*设置复选框矩形部分大小*/
    height: 15px;
}

QGroupBox::indicator:unchecked {
   image: url(:/image/正方形-未选中.png);    /* 设置未选中状态矩形部分图片*/
}

2.10 QLineEdit

效果

关键Qss样式表

/********************QLineEdit样式，也适用于Item（如QListView、QTableView）**********************/
QLineEdit {
    border: 2px solid  rgb(0, 255, 0);     /* 设置边框*/
    border-radius: 10px;                   /* 设置边框圆角*/
    padding: 0 8px;                        /* 设置上下填充0，左右填充8*/
    selection-background-color: darkgray;  /* 设置选中文本的背景色*/
}

/* 当echoMode设置为密文时的样式*/
QLineEdit[echoMode="2"] {
    /*lineedit-password-character: 9679;*/     /*9679为Unicode的实心圆*/
    lineedit-password-character: 42;     /*42为Unicode的星*/
}

/* 只读样式*/
QLineEdit:read-only {
    color: rgb(200, 200, 200);
}

2.11 QMainWindow

QMainWindow需要设置的样式就是和QDockWidget之间的分割条（图中黄色、红色竖线）；
效果

关键Qss样式表

/********************QMainWindow样式**********************/
QMainWindow::separator {          /* 窗口分割条样式， 例如QMainWindow和QDockWidget分割*/
    background: yellow;
    width: 10px;
    height: 10px;
}

QMainWindow::separator:hover {    /* 鼠标进入*/
    background: red;
}

2.12 QMenu

效果

关键代码

// 设置菜单栏
QMenu* menuFile = ui->menubar->addMenu("文件");
QAction* open = menuFile->addAction("打开");
open->setCheckable(true);                        // 设置菜单项可选
menuFile->addSeparator();                        // 添加分割栏(对应QMenu::separator样式)
QAction* save = menuFile->addAction("保存");
save->setCheckable(true);                        // 设置菜单项可选
save->setIcon(this->style()->standardIcon(QStyle::SP_DialogSaveButton));  // 设置菜单图标
ui->menubar->addMenu("编辑");
ui->menubar->addMenu("构建");

关键Qss样式表

/********************QMenu菜单样式**********************/
QMenu {
    background-color: #55aaff;     /* 设置菜单的背景，如果设置了QMenu::item无效*/
    border: 2px solid #55ff7f;     /* 设置菜单边框*/
}

QMenu::item {
    background-color: transparent;  /* 设置菜单项背景透明*/
}

QMenu::item:selected {            /* 当用户使用鼠标或键盘选择项目时*/
    background-color: rgba(85, 170, 255, 100);
}

QMenu::separator {               /* 设置菜单栏分割线样式*/
    height: 2px;
    background: red;
    margin-left: 15px;          /* 设置左外边距*/
    margin-right: 5px;
}

2.13 QMenuBar

效果

关键Qss样式表

/********************QMenuBar菜单栏样式**********************/
QMenuBar {
    background-color: qlineargradient(spread:pad, x1:0.494318, y1:0.011, x2:0.517045, y2:1,
                      stop:0.488636 rgba(85, 170, 255, 255), stop:0.914773 rgba(255, 255, 255, 255));
    spacing: 30px;    /* 菜单栏项目之间的间距*/
}

QMenuBar::item {
    padding: 10px 4px;  /* 定义菜单项元素边框与元素内容之间的距离，上下距离10px，左右距离4px*/
}

QMenuBar::item:selected {  /* 选中的菜单项的样式*/
    background: #FFFF00;
}

QMenuBar::item:pressed {   /* 鼠标在菜单项按下的样式*/
    background: #FF00FF;
}

2.14 QProgressBar

效果
说明：
- QProgressBar::chunk：横向的进度块，蓝色的小块；
- QProgressBar::chunk:vertical：竖向的进度块；

关键Qss样式表

/********************QProgressBar进度条样式**********************/
/* 设置进度条边框、圆角，这里有一个bug，QProgressBar默认alignment的设置在使用qss后会将文本显示到左上角,
可以重新设置alignment也可以使用text-align指定文本显示位置*/
QProgressBar {
    border: 2px solid grey;
    border-radius: 5px;
    text-align: center;
}

QProgressBar:vertical {            /* 竖向进度条样式*/
    border: 2px solid grey;
    border-radius: 5px;
    text-align: center;
}

/* 通过设置进度快宽度和边距可以得到一个条纹状的进度快*/
QProgressBar::chunk {
    background-color: #05B8CC; /* 设置进度块样式*/
    width: 10px;               /* 设置进度块宽度*/
    margin: 0.5px;             /* 设置进度块外边距*/
}

QProgressBar::chunk:vertical {
    background-color: #05B8CC; /* 设置进度块样式*/
    height: 10px;               /* 设置进度块高度*/
    margin: 0.5px;             /* 设置进度块外边距*/
}

2.15 QScrollBar

效果

关键Qss样式表

/********************QScrollBar横向滚动条样式**********************/
QScrollBar:horizontal {         /* 设置横滚动条样式*/
    border: 2px solid grey;
    background: #32CC99;
    height: 20px;
    margin: 0px 20px 0px 20px;  /* 设置滚动条上,右,下,左边距*/
}

QScrollBar::handle:horizontal { /* 设置 滑动条中滑块的样式*/
    background: #05B8CC;
    border: 1px solid white;
    min-width: 20px;
}

QScrollBar::add-line:horizontal {    /* 设置右按键*/
    border: 2px solid grey;
    background: rgb(255, 0, 0);
    width: 20px;
    subcontrol-position: right;     /* 按键位于右侧位置*/
    subcontrol-origin: margin;      /* 设置按键在盒子模型中的参考位置margin border padding content*/
}

QScrollBar::sub-line:horizontal {    /* 设置左按键*/
    border: 2px solid grey;
    background: rgb(0, 255, 0);
    width: 20px;
    subcontrol-position: left;
    subcontrol-origin: margin;
}

QScrollBar::left-arrow:horizontal { /* 左按键中的箭头区域样式*/
/*    border: 2px solid grey;
    width: 15px;
    height: 15px;*/
    image: url(:/image/左.png);
}

QScrollBar::right-arrow:horizontal { /* 右按键中的箭头 区域*/
    image: url(:/image/右.png);
}

QScrollBar::sub-page:horizontal {   /* 设置滑动条左侧区域样式*/
    background: rgb(255, 0, 0);
}

QScrollBar::add-page:horizontal {   /* 设置滑动条右侧区域样式*/
    background: none;
}

/********************QScrollBar竖向滚动条样式**********************/
QScrollBar:vertical {
    border: 2px solid grey;
    background: #32CC99;
    width: 20px;
    margin: 20px 0px 20px 0px;  /* 设置滚动条上,右,下,左边距*/
}

QScrollBar::handle:vertical { /* 设置 滑动条中滑块的样式*/
    background: #05B8CC;
    border: 1px solid white;
    min-height: 20px;
}

QScrollBar::add-line:vertical {    /* 设置下按键*/
    border: 2px solid grey;
    background: rgb(255, 0, 0);
    height: 20px;
    subcontrol-position: bottom;     /* 按键位于底部位置*/
    subcontrol-origin: margin;      /* 设置按键在盒子模型中的参考位置margin border padding content*/
}

QScrollBar::sub-line:vertical {    /* 设置上按键*/
    border: 2px solid grey;
    background: rgb(0, 255, 0);
    height: 20px;
    subcontrol-position: top;
    subcontrol-origin: margin;
}

QScrollBar::up-arrow:vertical { /* 上按键中的箭头区域样式*/
/*    border: 2px solid grey;
    width: 15px;
    height: 15px;*/
    image: url(:/image/上.png);
}

QScrollBar::down-arrow:vertical { /* 下按键中的箭头 区域*/
    image: url(:/image/下d.png);
}

QScrollBar::sub-page:vertical {   /* 设置滑动条上侧区域样式*/
    background: rgb(255, 0, 0);
}

QScrollBar::add-page:vertical {   /* 设置滑动条下侧区域样式*/
    background: none;
}

2.16 QSizeGrip

效果

关键Qss样式表

/********************QSizeGrip样式**********************/
/* 位于窗口右下角，用于调整窗口大小*/
QSizeGrip {
    background-color: qconicalgradient(cx:0, cy:0, angle:135,
                    stop:0 rgba(0, 207, 255, 255),
                    stop:0.301136 rgba(0, 250, 255, 69),
                    stop:0.423533 rgba(0, 121, 255, 145),
                    stop:0.45 rgba(0, 218, 255, 208),
                    stop:0.477273 rgba(71, 255, 244, 130),
                    stop:0.517045 rgba(71, 205, 255, 130),
                    stop:0.55 rgba(0, 111, 255, 255),
                    stop:0.57754 rgba(0, 255, 218, 130),
                    stop:0.625 rgba(0, 175, 255, 69),
                    stop:0.982955 rgba(7, 0, 255, 69));
    width: 20px;
    height: 20px;
}

2.17 QSlider

效果
说明：
- QSlider::groove：整个滑动槽（图2灰色部分，包含了sub-page、add-page）;

关键Qss样式表

/********************QSlider横向滑动条样式**********************/
QSlider {
    background-color: rgba(170, 255, 255, 100);  /* 设置滑动条主体*/
}

QSlider::groove:horizontal {
    border: 1px solid #999999;
    height: 8px;                     /* 默认情况下，凹槽会扩展到滑块的大小。通过给它一个高度，它有一个固定的大小*/
    background-color: qlineargradient(spread:reflect, x1:0.500364, y1:0.0561364, x2:0.5, y2:0.517045,
                      stop:0 rgba(168, 164, 168, 250), stop:1 rgba(232, 232, 232, 255));
    border-radius: 4px;             /* 设置滑动槽圆角*/
}

QSlider::handle:horizontal {
    background-color: qradialgradient(spread:pad, cx:0.5, cy:0.5, radius:0.5, fx:0.50565, fy:0.500409,
                      stop:0 rgba(0, 0, 0, 255), stop:0.361582 rgba(0, 146, 146, 255),
                      stop:0.649718 rgba(255, 255, 255, 255), stop:1 rgba(0, 177, 181, 255));
    border: 1px solid #5c5c5c;
    width: 14px;
    margin: -4px 0px;         /* 使用负的边距可以让滑块高度超过滑动槽高度*/
    border-radius: 8px;       /* 通过设置圆角边框得到圆形的滑块 */
}


QSlider::sub-page:horizontal {    /* 设置滑块滑过区域样式（左侧）*/
    border: 1px solid #999999;
    border-radius: 4px;
    background-color:qlineargradient(spread:pad, x1:0, y1:0, x2:1, y2:0,
                     stop:0 rgba(231,80,229, 255),
                     stop:1 rgba(7,208,255, 255));
}
QSlider::add-page:horizontal {    /* 设置滑块未滑过区域样式（右侧）*/
    border: 1px solid #999999;
    border-radius: 4px;
    background-color:qlineargradient(spread:pad, x1:0, y1:0, x2:1, y2:0,
                     stop:0 rgba(231,80,229, 255),
                     stop:1 rgba(7,208,255, 255));
}


/********************QSlider竖向滑动条样式**********************/
QSlider::groove:vertical {
    background-color: qlineargradient(spread:reflect, x1:0, y1:0.510682, x2:0.5, y2:0.517045,
                      stop:0 rgba(168, 164, 168, 250), stop:1 rgba(232, 232, 232, 255));
    position: absolute;      /* 设置定位：绝对位置距离小部件的左侧和右侧 4px。在小部件上设置边距也应该工作......*/
    /*left: 4px;*/           /* 元素左外边距边界与其包含块左边界之间的偏移*/
    /*right: 4px;*/
    width: 8px;
    border-radius: 4px;      /* 设置滑动槽圆角*/
}

QSlider::handle:vertical {    /* 设置滑块样式*/
    border: 1px solid #999999;
    background-color: qradialgradient(spread:pad, cx:0.5, cy:0.5, radius:0.5, fx:0.50565, fy:0.500409,
                      stop:0 rgba(0, 0, 0, 255), stop:0.361582 rgba(0, 146, 146, 255),
                      stop:0.649718 rgba(255, 255, 255, 255), stop:1 rgba(0, 177, 181, 255));
    height: 14px;
    margin: 0px -4px;
    border-radius: 7px;
}

/* 设置了add-page、sub-page样式后，groove样式就失效了*/
QSlider::add-page:vertical {    /* 设置滑块滑过区域样式（下侧）*/
    background-color: rgb(0, 170, 255);
    border-radius: 4px;
}

QSlider::sub-page:vertical {      /* 设置滑块未滑过区域样式（上侧）*/
    background-color: rgb(0, 0, 0);
    border-radius: 4px;
}

2.18 QAbstractSpinBox

效果
说明：
- QAbstractSpinBox::up-button：绿色部分控件；
- QAbstractSpinBox::up-arrow：红色实心矩形部分。

关键Qss样式表

/********************QAbstractSpinBox样式，适用于QDateTimeEdit、QTimeEdit、QDateEdit、QDoubleSpinBox、QSpinBox**********************/
QAbstractSpinBox {
    text-align:right;                      /* 标题文本右对齐*/
    height: 30px;            /* 统一设置高度*/
    /*padding-right: 15px; */    /* 设置元素的右内边距，为箭头腾出空间*/
    border: 2px solid red;   /* 设置了边框后才会显示【加减图标】*/
    background-color: qlineargradient(spread:pad, x1:0, y1:0.482591, x2:1, y2:0.477273,
                      stop:0.0113636 rgba(85, 170, 255, 255),
                      stop:1 rgba(255, 255, 255, 255));
    selection-color: #000000;               /* 设置鼠标选择文本的颜色*/
    selection-background-color: #55ff7f;    /* 设置鼠标选择文本的背景色*/
}

/* 增加按键样式*/
QAbstractSpinBox::up-button {
    subcontrol-origin: border;       /* 设置按键在盒子模型中的参考位置margin border padding content*/
    subcontrol-position: top right;  /* 设置按键停靠位置右上角*/
    border: 1px solid grey;          /* 设置按键边框，用于区分*/
}

QAbstractSpinBox::up-arrow {
    border-image: url(:/image/上.png);  /* 设置增加按键图标*/
}

/* 减少按键样式*/
QAbstractSpinBox::down-button {
    subcontrol-origin: border;
    subcontrol-position: bottom right;
    border: 1px solid grey;
}

QAbstractSpinBox::down-arrow {
    border-image: url(:/image/下d.png);   /* 设置减少按键图标*/
}

/* 设置鼠标进入按键的样式*/
QAbstractSpinBox::up-button:hover,
QAbstractSpinBox::down-button:hover {
    background-color: rgba(0, 170, 255, 100);
}

/* 设置鼠标点击按键的样式*/
QAbstractSpinBox::up-button:pressed,
QAbstractSpinBox::down-button:pressed{
    background-color: rgba(0, 170, 255, 200);
}

QAbstractSpinBox::up-arrow:disabled,        /* 禁用状态*/
QAbstractSpinBox::down-arrow:disabled,
QAbstractSpinBox::up-arrow:off,             /* 值为最大值时处于关闭状态*/
QAbstractSpinBox::down-arrow:off {
    background-color: rgb(210, 210, 210);
}

/* 设置使用加减图标的样式*/
QAbstractSpinBox[buttonSymbols="1"]::up-button {
    subcontrol-origin: border;
    subcontrol-position: right;
    border: 1px solid grey;
}
QAbstractSpinBox[buttonSymbols="1"]::up-arrow {
    border-image: url(:/image/加.png);
}

QAbstractSpinBox[buttonSymbols="1"]::down-button {
    subcontrol-origin: border;
    subcontrol-position: left;
    border: 1px solid grey;
}
QAbstractSpinBox[buttonSymbols="1"]::down-arrow {
    border-image: url(:/image/减.png);
}

2.19 QSplitter

效果

关键Qss样式表

/********************QSplitter样式**********************/
#groupBox_13 QWidget {                /* 为widget设置边框，方便观看边界*/
    border: 1px solid red;
}

QSplitter::handle {
    height: 12px;                   /* 设置分割滑块高度*/
}

/* 设置水平分离布局滑块样式*/
QSplitter::handle:horizontal {
    background-color: qlineargradient(spread:reflect, x1:0, y1:0.510682, x2:0.5, y2:0.517045,
                      stop:0 rgba(0, 204, 213, 250),
                      stop:1 rgba(232, 232, 232, 255));
}

/* 设置竖直分离布局滑块样式*/
QSplitter::handle:vertical {
    background-color: qlineargradient(spread:reflect, x1:0.494, y1:0.0106818, x2:0.5, y2:0.517045,
                      stop:0 rgba(0, 204, 213, 250),
                      stop:1 rgba(232, 232, 232, 255));
}

/* 设置水平分离布局滑块按下样式*/
QSplitter::handle:horizontal:pressed {
    background-color: qlineargradient(spread:reflect, x1:0, y1:0.527727, x2:0.5, y2:0.517045,
                      stop:0 rgba(255, 0, 0, 250),
                      stop:1 rgba(232, 232, 232, 255));
}
/* 设置竖直分离布局滑块按下样式*/
QSplitter::handle:vertical:pressed {
    background-color: qlineargradient(spread:reflect, x1:0.494, y1:0.0106818, x2:0.5, y2:0.517045,
                      stop:0 rgba(255, 0, 0, 250),
                      stop:1 rgba(232, 232, 232, 255));
}

2.20 QStatusBar

效果

关键Qss样式表


/********************QStatusBar状态栏样式**********************/
QStatusBar {
    background: brown;         /* 设置状态栏背景色*/
    color: white;              /* 设置状态栏文本颜色*/
}

QStatusBar QWidget{            /* 设置状态栏中包含的部件的样式*/
    color: white;
}

QStatusBar::item {            /* 设置状态栏中插入项的样式*/
    border: 2px solid white;
    border-radius: 3px;
}

2.21 QTabWidget

效果

关键Qss样式表

/********************QTabWidget样式**********************/
QTabWidget::pane {                 /* tabwidget窗格样式*/
    border: 2px solid #C2C7CB;
    position: absolute;            /* 指定了元素的定位类型static、relative、fixed、absolute、sticky*/
    top: -1em;                     /* 上边距向上 偏移1em*/
}

/* tabBar标签栏在顶部时，tabBar栏向左边距15*/
QTabWidget::tab-bar:top {
/*    left: 15px;*/              /* 标签栏向右偏移15*/
    alignment: center;           /* 标签栏居中对齐*/
}

QTabBar::tab {
    background: qlineargradient(x1: 0, y1: 0, x2: 0, y2: 1,
                                stop: 0 #E1E1E1, stop: 0.4 #DDDDDD,
                                stop: 0.5 #D8D8D8, stop: 1.0 #D3D3D3);
    border: 2px solid #C4C4C3;
    padding: 2px;                /* 设置内边距填充*/
}

/* tab选中或者鼠标进入的样式*/
QTabBar::tab:selected,
QTabBar::tab:hover {
    background: qlineargradient(x1: 0, y1: 0, x2: 0, y2: 1,
                stop: 0 #fafafa, stop: 0.4 #f4f4f4,
                stop: 0.5 #e7e7e7, stop: 1.0 #fafafa);
}

/* tabBar为横向选中的样式，在顶部*/
QTabBar::tab:top:selected{
    border-color: red;
    border-bottom-color: #C2C7CB;    /* 底部边框颜色与pane边框颜色相同*/
}
/* tabBar为横向未选中的样式，在顶部*/
QTabBar::tab:top:!selected {
    margin-top: 2px;                 /* 设置元素的上部边距，设置在选中里不生效*/
}

/* tabBar为横向选中的样式，在底部*/
QTabBar::tab:bottom:selected{
    border-color: red;
    border-top-color: #C2C7CB;
    margin-top: 2px;                 /* 设置元素的下边距，设置在未选中里不生效（我也不知道为啥）*/
}

/* tabBar为横向的样式，在顶部或者底部*/
QTabBar::tab:top,
QTabBar::tab:bottom
{
    min-width: 80px;
    height: 20px;
    border-top-left-radius: 22px;     /* 通过设置左上角，右下角圆角得到特殊图形*/
    border-bottom-right-radius: 22px;
}


/* tabBar为竖向的样式，在左侧或者右侧*/
QTabBar::tab:right,
QTabBar::tab:left {
    min-height: 80px;
    width: 20px;
}

/* tabBar为竖向选中的样式，在左侧*/
QTabBar::tab:left:selected{
    border-color: red;
    border-right-color: #C2C7CB;    /* 右侧边框颜色与pane边框颜色相同*/
}

/* tabBar为竖向未选中的样式，在左侧*/
QTabBar::tab:left:!selected {
    margin-left: 2px;                 /* 设置元素的左边距*/
}

/* tabBar为竖向选中的样式，在右部*/
QTabBar::tab:right:selected {
    border-color: red;
    border-left-color: #C2C7CB;
    margin-left: 2px;                 /* 设置元素的左边距*/
}

/* 设置第一个tab选项卡未选中样式*/
QTabBar::tab:first:!selected {
    border-left-color: #00FF00;
    border-left-width: 3px;
}

/* 设置中间所有的tab选项卡未选中样式*/
QTabBar::tab:middle:!selected {
    border-bottom-color: #00FF00;
    border-bottom-width: 3px;
}

/* 设置最后一个tab选项卡未选中样式*/
QTabBar::tab:last:!selected {
    border-right-color: #00FF00;
    border-right-width: 3px;
}

/* 如果只有一个tab选项卡时的样式*/
QTabBar::tab:only-one {
    background: #00FFFF;
}

/*QTabBar的撕裂指示器，当tab标签过多时前面的tab标签显示不下时出现*/
QTabBar::tear {
    background-color: qlineargradient(spread:pad, x1:0, y1:0.482591, x2:1, y2:0.477273,
                      stop:0.0113636 rgba(85, 170, 255, 255),
                      stop:1 rgba(255, 255, 255, 255));
    width: 20px;
}

/* QTabBar的滚动条，当tab标签过多时出现，包含两个调节but*/
QTabBar::scroller {
    width: 50px;       /* 设置两个but容器的宽度来调整but大小*/
}

/* 滚动按钮是工具按钮*/
QTabBar QToolButton {
    border: 2px solid #00FFFF;
    min-width: 0px;             /* 因为在前面全局QToolButton最小宽度设置为80，这里需要还原*/
    min-height: 0px;
    margin-right: 2px;
}

/* 设置QTabWidget右上角右but样式*/
QTabBar QToolButton::right-arrow {
    image: url(:/image/右.png);
}

/* 设置QTabWidget右上角左but样式*/
QTabBar QToolButton::left-arrow {
    image: url(:/image/左.png);
}

/* 设置tab标签右侧关闭but样式*/
QTabBar::close-button {
    image: url(:/image/close.png);
    subcontrol-position: right;       /* 这里有一个bug，只能设置right，否则but就会实现（不知道是不是我使用的问题还是就有这个bug）*/
    border: 1px solid red;
}

/* 鼠标进入样式*/
QTabBar::close-button:hover {
    background-color: rgba(85, 170, 255, 150);
}

/* 鼠标按下样式*/
QTabBar::close-button:pressed {
    background-color: rgba(255, 0, 0, 150);
}

2.22 QListView

效果
设置说明
- void setFlow(QListView::Flow flow)：设置横向排列还是竖向排列；
- void setViewMode(QListView::ViewMode mode)：设置ListView视图模式，只有设置了iconMode后才会显示矩形；
- QAbstractItemView::alternatingRowColors ()：是否使用交替颜色绘制背景。

关键Qss样式表

/********************QListView样式，用于QListView、QListWidget、QUndoView**********************/
QListView {
    alternate-background-color:  rgba(0, 170, 255, 50);   /* 交替背景色, 使用的前提是开启了隔行变色设置 setAlternatingRowColors(true);*/
    background-color: rgb(240, 240, 240);
    show-decoration-selected: 0;                          /* 0：选择文本 1：选择行*/
}

/* 当QAbstractItemView::alternatingRowColors () 设置为 true时，为绘制QAbstractItemView的行时的每个备用行设置此状态。
   如果设置背景色则效果和alternate-background-color相同*/
QListView::item:alternate {
    border-bottom: 2px solid #00FFFF;       /* 设置交替行的下边框样式*/
}

QListView::item:selected {
    border: 2px solid red;                  /* 设置选中行的边框*/
}

QListView::item:selected:!active {          /* 设置选中行失去焦点后的样式*/
background: qlineargradient(x1: 0, y1: 0, x2: 0, y2: 1,
                            stop: 0 #ABAFE5, stop: 1 #8588B2);
}

QListView::item:selected:active {           /* 控件获得焦点时选中行的样式*/
    background: qlineargradient(x1: 0, y1: 0, x2: 0, y2: 1,
                                stop: 0 #6a6ea9, stop: 1 #888dd9);
}

QListView::item:hover {                    /* 鼠标进入行的样式*/
    background: qlineargradient(x1: 0, y1: 0, x2: 0, y2: 1,
                            stop: 0 #FFABFE, stop: 1 #DCDEF1);
}

/* 设置属性ViewMode为IconMode，属性Flow为LeftToRight时的样式*/
QListView[flow="0"][viewMode="1"]::item {
    height: 50px;
    width: 50px;
}

2.23 QHeaderView、QTableView、QTableWidget

效果
编号说明
1. QTableView QTableCornerButton::section
2. QHeaderView::down-arrow、QHeaderView::up-arrow
3. QTableView::indicator

关键Qss样式表

/********************QHeaderView标题行样式**********************/
QHeaderView::section {   /*标题行样式*/
    background-color: qlineargradient(x1: 0, y1: 0, x2: 0, y2: 1,
                        stop: 0 #FFABFE, stop: 1 #DCDEF1);
    color: white;         /* 设置标题行字体颜色*/
    padding-left: 10px;   /* 设置元素左内边距*/
    border: 1px solid #6c6c6c;
}

QHeaderView::section:checked {            /* 选中的单元格的标题样式，在QTableView有效*/
    background-color: red;
}

/* 标题栏排序指示器样式，需要设置setSortIndicatorShown(true)才生效*/
QHeaderView::down-arrow {
border-image: url(:/image/下d.png);   /* 设置向下按键图标*/
    width: 15px;                      /* 默认图标很小，需要设置大一点才好观察*/
    height: 15px;
}

QHeaderView::up-arrow {
border-image: url(:/image/上.png);    /* 设置向上按键图标*/
    width: 15px;
    height: 15px;
}

/********************QTableView、QTableWidget样式**********************/
QTableView {
    background-color: #f0fffc;
    selection-background-color: qlineargradient(x1: 0, y1: 0, x2: 0.5, y2: 0.5,
                                stop: 0 #00aaff, stop: 1 white);  /* 选中单元格的背景*/

}

/* 表格左上角的按键样式*/
QTableView QTableCornerButton::section {
    background: #ffff7f;
    border: 2px outset red;
}

/* 单元格中复选框未选中的样式*/
QTableView::indicator:unchecked {
    background-color: #ff55ff;
}

2.24 QToolBar

QToolBar中显示QAction使用的是QToolButton，所以设置QAction的长宽可以使用qss设置QToolButton，QToolBar中也有和QToolButton一样的函数。
效果

关键Qss样式表

/********************QToolBar样式**********************/
QToolBar {
    background-color: qlineargradient(spread:pad, x1:0, y1:0.54, x2:0.994318, y2:0.517045,
                                      stop:0.0113636 #1f4037, stop:0.642045 #99f2c8);
    spacing: 20px;    /* 工具栏中插入项之间的间距*/
}

/* 工具栏可用于鼠标移动的句柄样式*/
QToolBar::handle {
    background: red;
}

2.25 QToolBox

效果

关键Qss样式表

/********************QToolBox样式**********************/
QToolBox {
    background: red;         /* 设置QToolBox底层背景*/
}

/* 由于QToolBox底层背景上还有一层QWidget，所以直接设置背景色没有效果，需要再设置QWidget背景*/
QToolBox QWidget {
    background-color: rgb(0, 225, 165);
}

QToolBox::tab {
    background: qlineargradient(x1: 0, y1: 0, x2: 0, y2: 1,
                            stop: 0 #E1E1E1, stop: 0.4 #DDDDDD,
                            stop: 0.5 #D8D8D8, stop: 1.0 #D3D3D3);
    border-radius: 5px;
    color: black;
}

QToolBox::tab:selected {
    font: italic;
}

2.26 QToolTip

效果

关键Qss样式表

/********************QToolTip样式**********************/
QToolTip {
    border: 2px solid darkgray; /* 设置边框*/
    padding: 5px;               /* 设置上下左右内填充*/
    border-radius: 3px;         /* 圆角*/
    opacity: 150;               /* 不透明度，范围[0-255]，只支持QToolTip*/
}

2.27 QDial

效果

关键Qss样式表

/********************QDial样式，很多样式都无效**********************/
QDial {
    background-color: rgb(85, 255, 255);     /* 不支持渐变*/
}

QDial:!enabled{
    background-color: rgb(0, 0, 0);          /* 不可用*/
}

2.28 QCalendarWidget

效果
编号说明
1. #qt_calendar_prevmonth：日历中左箭头按键样式
2. #qt_calendar_navigationbar：日历控件头部导航栏样式
3. #qt_calendar_monthbutton：月份按键样式
4. #qt_calendar_yearbutton：年按键样式
5. #qt_calendar_nextmonth：日历中右箭头按键样式
6. #qt_calendar_calendarview：显示日期部分是一个表格控件(QTableView)，包含7、8

关键Qss样式表

/********************qcalendarwidget样式**********************/
/* 日历控件头部导航栏样式*/
#qt_calendar_navigationbar {
    background-color: qlineargradient(spread:pad, x1:0.489, y1:0.0456818, x2:0.477, y2:1, 
                                     stop:0.0113636 rgba(0, 0, 0, 255), 
                                     stop:0.954545 rgba(168, 168, 170, 255));
    height: 50px;
}

QCalendarWidget QToolButton {
    border: 2px solid #00ffff;     /* 画出日历中所有QToolButton的边框*/
}

/* 日历中左箭头按键样式*/
QCalendarWidget #qt_calendar_prevmonth {
    background: #d6d6a0;
}
/* 日历中右箭头按键样式*/
QCalendarWidget #qt_calendar_nextmonth {
    background: #aa55ff;
}

/* 月份按键样式*/
QCalendarWidget #qt_calendar_monthbutton {
    background: #aaff00;
}

/* 年按键样式*/
QCalendarWidget #qt_calendar_yearbutton {
    background: #55aa7f;
}

/* 显示日期部分是一个表格控件(QTableView)*/
#qt_calendar_calendarview {
    background: black;
    color: white;
    selection-color: red;                             /* 选择日期单元格字体颜色*/
    alternate-background-color: rgb(128, 128, 128);   /* 表头样式（表头部分不是QHeaderView，所以使用QHeaderView来设置样式是无效的*/
    selection-background-color: qradialgradient(spread:pad, cx:0.5, cy:0.5, radius:0.5, fx:0.50565, fy:0.500409, /* 选中日期单元格背景颜色*/
                                                stop:0 rgba(0, 0, 0, 255), stop:0.361582 rgba(0, 146, 146, 255),
                                                stop:0.649718 rgba(255, 255, 255, 255), stop:1 rgba(0, 177, 181, 255));
}

2.29 QTreeView、QTreeWidget

效果
编号说明：
1. QTreeView::item:selected:active：鼠标选中行有焦点的样式
2. QTreeView::item:selected:!active：鼠标选中行失去焦点的样式
3. QTreeView::branch:has-siblings:!adjoins-item：有同级，与item不相邻
4. QTreeView::branch:open:has-children:has-siblings：有同级、有子项、打开的节点
5. QTreeView::branch:closed:has-children:has-siblings：有同级、有子项，并且关闭的节点
6. QTreeView::branch:has-siblings:adjoins-item：有同级，与item相邻
7. QTreeView::branch:!has-children:!has-siblings:adjoins-item：没有同级、没有子项、与item相邻
8. QTreeView::branch:has-children:!has-siblings:closed：有子项、没有同级、并且关闭的节点
9. QTreeView::branch:open:has-children:!has-siblings：没有同级、有子项、打开的节点
10. QTreeView::branch：最底层空白位置

关键Qss样式表

/********************QTreeView样式**********************/
QTreeView {
    background-color: rgba(85, 255, 127, 100);   /* 整体背景色*/
    alternate-background-color: rgba(255, 255, 0, 100);          /* 交替行背景色，需要当QAbstractItemView::alternatingRowColors () 设置为 true才生效*/
}

QTreeView::item {
    border: 1px solid red;
    border-top-color: transparent;            /* 设置上边框透明*/
    border-bottom-color: transparent;
}

/* 鼠标进入样式*/
QTreeView::item:hover {
    background: qlineargradient(x1: 0, y1: 0, x2: 0, y2: 1, stop: 0 #e7effd, stop: 1 #cbdaf1);
    border: 1px solid #bfcde4;
}

/* 鼠标选中某行后的样式*/
QTreeView::item:selected {
    border: 2px solid #FF7dbc;
}

/* 鼠标选中行有焦点的样式*/
QTreeView::item:selected:active{
    background: qlineargradient(x1: 0, y1: 0, x2: 0, y2: 1, stop: 0 #6ea1f1, stop: 1 #567dbc);
}

/* 鼠标选中行失去焦点的样式*/
QTreeView::item:selected:!active {
    background: #aaffff;
}

/*分支指示器样式（左侧小箭头部分）*/
QTreeView::branch {
    background: palette(base);
}

/*
has-siblings：QTreeView中具有同级的项（当前节点下方同级）
has-children：QTreeView中具有子项的项
adjoins-item：当QTreeView的::branch与某个item相邻时，将设置此状态
*/
/* 有同级，与item不相邻*/
QTreeView::branch:has-siblings:!adjoins-item {
    background: cyan;
}
/* 有同级，与item相邻*/
QTreeView::branch:has-siblings:adjoins-item {
    background: red;
}

/*没有同级、没有子项、与item相邻*/
QTreeView::branch:!has-children:!has-siblings:adjoins-item {
    background: blue;
}
/*有同级、有子项，并且关闭的节点*/
QTreeView::branch:closed:has-children:has-siblings {
    background: pink;
}
/*有子项、没有同级、并且关闭的节点*/
QTreeView::branch:has-children:!has-siblings:closed {
    background: gray;
}
/* 有同级、有子项、打开的节点*/
QTreeView::branch:open:has-children:has-siblings {
    background: magenta;
}
/* 没有同级、有子项、打开的节点*/
QTreeView::branch:open:has-children:!has-siblings {
    background: green;
}

3、源代码📌

gitee
github
🎹🎹🎹🎹🎹🎹🎹🎹🎹🎹🎹

posted @ 2022-07-08 14:36 mahuifa 阅读(0) 评论(0) 编辑收藏举报来源

刷新页面返回顶部

mahuifa

超详细的QSS样式表入门Demo 原创

超详细的QSS样式表入门Demo📄

文章目录

1、说明🔑

2、Qt控件样式💡

2.1 QAbstractScrollArea

2.2 QCheckBox

2.3 QRadioButton

2.4 QPushButton

2.5 QToolButton

2.6 QComboBox

2.7 QDockWidget

2.8 QFrame、QLabel、QToolTip

2.9 QGroupBox

2.10 QLineEdit

2.11 QMainWindow

2.12 QMenu

2.13 QMenuBar

2.14 QProgressBar

2.15 QScrollBar

2.16 QSizeGrip

2.17 QSlider

2.18 QAbstractSpinBox

2.19 QSplitter

2.20 QStatusBar

2.21 QTabWidget

2.22 QListView

2.23 QHeaderView、QTableView、QTableWidget

2.24 QToolBar

2.25 QToolBox

2.26 QToolTip

2.27 QDial

2.28 QCalendarWidget

2.29 QTreeView、QTreeWidget

3、源代码📌

公告