超详细的QSS样式表入门Demo

已于 2022-12-06 12:51:59 修改
阅读量8.2k 收藏 402
点赞数 51
分类专栏： QT # QSS 文章标签： Qt QSS QT样式 Qt控件 自定义控件
于 2022-07-08 14:36:26 首次发布
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/qq_43627907/article/details/125677496
版权
QT 同时被 2 个专栏收录
114 篇文章 127 订阅
订阅专栏
QSS
3 篇文章 10 订阅
订阅专栏

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

文章目录

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

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
      🎹🎹🎹🎹🎹🎹🎹🎹🎹🎹🎹
mahuifa
关注
  • 51
    点赞
  • 踩
  • 402
    收藏
    觉得还不错? 一键收藏
  • 打赏
    打赏
  • 14
    评论
专栏目录
Qt QSS基本属性样式表半通关
m0_45463480的博客
10-13 2454
文中一律使用 Qss 代替 Qt style sheet 介绍qss常用语法
Qt之QSS（暗橙色）
weixin_33852020的博客
01-22 1283
简述 我觉得一个好看的 UI 可以潜意识地激励我们，不仅可以让我们工作的更高效、更有乐趣，而且可以让应用程序变得更漂亮、更直观。 我比较喜欢风格一致的产品，让所有的东西看起来像是一个大家庭，给人一种专业的视觉享受。当做出很专业的产品时，你甚至可以很自豪地称自己为一个艺术家。 简述 故事情节 QSS 样式 更多参考 ...
qss常用的样式表
最新发布
weixin_42408637的博客
05-08 269
一些常用控件样式表，留作备份。
QT QSS简单使用
haoyu12123的博客
08-16 3008
之前完成的QT程序完成逻辑控制后，界面全都使用图片填充的方式来做美化，但是使用到的组件看上去很丑，因此上网简单学习之后做总结如下：（之前也未学习过CSS等知识属于纯小白，如有错误，不吝赐教）。...
QSS语法及常用样式
QtCompany的博客
05-11 1038
Qt样式表（以下统称QSS）的术语和语法规则几乎和CSS相同。如果你熟悉CSS，可以快速浏览以下内容。不熟悉的话可以先去W3School - CSS或者本人的CSS博客随笔简单了解一下。在讲解样式表语法前，我们先看一个例子： 上面例子是实现按钮三态效果的样式表。注：程序设置的样式表比ui文件里设置的优先级更高。QSS包含了一个样式规则，一个样式规则由一个选择器和声明组成，选择器指定哪些部件由规则影响，声明指定哪些属性应该在部件上进行设置。例如： 上面的例子中QPushButton是选择器，{ col
QSS样式表入门练习Demo.pdf
07-08
超详细的Qss入门练习Demo，包含了效果图和实现样式表； [可看博客](https://blog.csdn.net/qq_43627907/article/details/125677496)
QSS样式Demo.zip
08-22
资源中包含了QSS的暗黑扁平化风格的demo例子，原帖地址[http://www.qtcn.org/bbs/read-htm-tid-63012.html]
Qss样式表美化demo
12-28
qss样式表美化UIdemo
QSS样式表demo.zip
03-18
QSS样式表之PS黑色风格+白色风格+淡蓝色风格
QSS样式表文件,QSS_Demo,QSS程序纯QSS样式表地图导航QSS
05-05
QSS_Demo,QSS程序.zip,纯QSS样式表.rar地图导航QSS.rar
Qss语法实例及demo
05-23
Qss的基本概念，语法基础，Qss的方箱模型，可自适应样式，定位及使用说明，常用控件样式定制样例及样例资源文件
qss应用在Demo.zip
07-26
Description : 黑色炫酷
QSS样式表之PS黑色风格+白色风格+淡蓝色风格
05-06
QSS样式表之高仿PS黑色风格+白色风格+淡蓝色风格，个人最喜爱的淡蓝色风格，相当精美！
Qt样式表使用大全(中文整理资料)
09-12
主要介绍Qt样式表QSS的使用，语法规则介绍。 这是网络上整理的比较“难得的中文使用手册”，非常适合新手学习样式表使用。
学习Qss--字体、文本属性
热门推荐
贝勒里恩的博客
06-23 1万+
文章目录字体属性fontfont-stylefont-weightfont-sizefont-family连写格式文本属性text-aligntext-decoration 字体属性font font-style 作用：设置字体风格 取值： 取值 效果 normal 正常 italic 斜体 oblique 倾斜的字体 关于italic和oblique的区别： 他们呢都是向右倾斜的文字，大多数情况下看不出任何区别，但是原理却不一样。要高清楚这个问题，首先要明白字体是怎么回事。一
qss语法
weixin_45551020的博客
08-25 207
qss基础语法总结
QSS-Qt样式表一
枫影竹韵的博客
05-26 1079
QSS即Qt StyleSheet(Qt样式表)的简称，是一种用来自定义控件外观的强大机制,QSS可以让我们的程序界面更加漂亮 每条QSS样式都由两部分组成：1. 选择器，该部分指定要美化的控件 2. 声明，该部分指定要在控件上使用的属性 声明： label->setStyleSheet('QLabel{border-style:solid;border-width:16;border-color: red yellow blue green;}') #设置样式 ...
QT之qss教程-QDockWidget
wzs的博客
11-07 6052
QDockWidget { border: 1px solid red; titlebar-close-icon: url(:/images/111.bmp); titlebar-normal-icon: url(:/images/close.png); } /* 标题设置 */ QDockWidget::title { text-align: right;
超详细的qss样式表入门demo
06-06
QSS是Qt样式表，可以用来设置Qt应用程序的外观和感觉，并且使得Qt应用程序可以根据不同的操作系统自动适应。在这篇教程中，我们将通过详细的入门示例了解如何使用QSS。 首先，在Qt Creator中创建一个新的Qt Widgets应用程序项目。这将为您提供一个简单的窗口，您可以在其中编辑代码。 示例1：基础样式 首先，让我们尝试应用简单的样式表： ```css QWidget { background-color: blue; color: white; } ``` 这将在应用程序中的所有QWidget中应用蓝色背景和白色前景色。不同于原生样式下的灰色背景色。 示例2：更改按钮样式 我们可以用上述方法来更改按钮的颜色： ```css QPushButton { background-color: red; border: 2px solid darkred; border-radius: 10px; color: white; } ``` 这将为所有按钮设置红色背景色，深红色的2像素宽边框，以及10像素圆角。我们还将设置文字颜色为白色。 示例3：更改鼠标悬停样式 我们可以在原有样式的基础上增加鼠标滑过时的效果： ```css QPushButton:hover { background-color: darkred; } ``` 这将使鼠标滑过按钮时的背景色从红色变为深红色。 示例4：更改被选中的样式 我们还可以改变按下按钮后的效果： ```css QPushButton:pressed { background-color: darkblue; border: 2px solid blue; } ``` 这将在按下按钮时更改按钮的背景颜色以及边框颜色。 示例5：更改组件的尺寸和位置 我们可以通过设置width，height，position和top,left等属性来控制组件的尺寸和位置： ```css QPushButton { width: 100px; height: 50px; position: absolute; top: 100px; left: 100px; } ``` 这将在应用程序中的所有QPushButton中设置宽为100像素，高为50像素，并将其位置设置为100像素顶部和左侧。 示例6：更改QLineEdit中的文本输入 我们还可以改变QLineEdit中的字体和背景颜色。默认情况下，QLineEdit使用应用程序的原声窗口背景色（白色），但可以使用QPalette使其与其他颜色匹配。 ```css QLineEdit { background-color: darkgray; border: 2px solid lightgray; border-radius: 10px; color: white; font-size: 16px; } ``` 这将为所有QLineEdit设置深灰色背景和浅灰色的2像素宽边框，并将其边角设置为10像素圆角。我们还将设为文本颜色为白色和字体大小为16像素。 总结： 以上是一个简单又不失详细的QSS样式表入门demo。当然，还可以做得更丰富和复杂，完全可以通过自行探索进一步地优化自己的应用程序样式！

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

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

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包

打赏作者

mahuifa

你的鼓励将是我创作的最大动力

¥1 ¥2 ¥4 ¥6 ¥10 ¥20
扫码支付：¥1
获取中
扫码支付

您的余额不足，请更换扫码支付或充值

打赏作者

实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

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

余额充值