全面易懂的QSS样式表初学者指南Demo

最编程 2024-02-23 08:36:34

...

超详细的QSS样式表入门Demo_mahuifa的博客-****博客_qss样式

超详细的QSS样式表入门Demo

mahuifa

已于 2022-08-02 22:52:28 修改

2717

分类专栏： QT QSS 文章标签： Qt QSS QT样式 Qt控件自定义控件

于 2022-07-08 14:36:26 首次发布

本文链接：https://blog.****.net/qq_43627907/article/details/125677496

版权

QT 同时被 2 个专栏收录

80 篇文章 28 订阅

订阅专栏

QSS

1 篇文章 0 订阅

订阅专栏

超详细的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

效果

上一篇：如何用QCustomPlot实现实时动态曲线图：代码详解

下一篇：异步调用解耦合