Qt的qss常用样式总结

随性随笔

已于 2023-08-20 11:19:59 修改

阅读量4.8k

点赞数 19

分类专栏： C++ Qt学习文章标签： qt ui 开发语言

于 2023-02-08 11:46:14 首次发布

本文链接：https://blog.csdn.net/wangshuping18/article/details/128932269

版权

Qt学习同时被 2 个专栏收录

15 篇文章 3 订阅

订阅专栏

C++

13 篇文章 2 订阅

订阅专栏

Qt的控件支持样式设置，格式与css类似，QSS是Qt程序界面中用来设置控件的背景图片、大小、字体颜色、字体类型、按钮状态变化等属性，用于美化UI界面。实现界面和程序的分离，快速切换皮肤。QSS最大的优点就是简单便捷，我们可以通过它快速实现应用程序的外观界面，在界面中可直接对控件进行样式的设置，可在不编译运行程序的前提下直观预览一些常用样式的设置效果，方便、直观、快捷的完成对界面的样式风格设置。下边列举常用控件的样式设置。

10.设置表格QTableWidget、QTableView

11.设置树控件QTreeWidget

12.设置列表控件 QListWidget

19.设置日历控件QCalendarWidget

20.QDateTimeEdit的样式设置

21.QToolTip样式设置

1.设置背景色

//设置背景透明
this->setAttribute(Qt::WA_TranslucentBackground, true);
//设置透明度  透明度取值范围：0.0（全透明） - 1.0（不透明），默认值为1.0
setWindowOpacity(0.5);  
 
/***************************qss*****************/
//qss中编写
background-color: rgba(194, 194, 194, 50%);
//背景为图片时不重复  background-repeat:no-repeat 不平铺
background: url(:/png/png/resetIcon.png) no-repeat left;
//背景透明
background-color:transparent
//背景渐变
background: qlineargradient(x1: 0, y1: 0, x2: 0, y2: 1, stop: 0 rgb(124, 124, 124), stop: 1.0 rgb(72, 71, 71));

2.设置圆角

border-top-right-radius:33px;
border-bottom-right-radius:33px;
 
-------------------------------
//圆形
border-radius:33px;

3.设置滑动条

/*第一种风格*/
/**
    groove表示槽的部分
    handle表示滑块
    add-page表示未滑过的槽部分
    sub-page表示已滑过的槽部分
    在辅助控制器后面可以设置状态，horizontal就是QSS生效的QSlider的状态
**/
//设置线条的圆角
QSlider::groove:horizontal
{
    height:10px;
    border-radius: 5px;
    background-color:rgb(219,219,219);
}
/*
设置的是滑块的形状：圆形
*/
QSlider::handle:horizontal
{
    width: 20px;
    background-color:rgb(255,255,255);
    margin:-6px 0px -6px 0px; //控制对应高度
    border: 1px solid gray;
    border-radius:10px;
}
/*
add-page
sub-page
滑动时出现的颜色样式
*/
QSlider::add-page:horizontal
{
    border-radius: 5px;
    background-color: rgb(219,219,219);
}
 
QSlider::sub-page:horizontal
{
    border-radius: 5px;
    background-color: rgb(80,166,234);
}

/*第二种风格*/
QSlider::groove:horizontal {
        height: 6px;
        background: qlineargradient(x1: 0, y1: 0, x2: 0, y2: 1, stop: 0 rgb(124, 124, 124), stop: 1.0 rgb(72, 71, 71));
}
QSlider::handle:horizontal {
        width: 1px;
        background: rgb(0, 160, 230);
        margin: -6px 0px -6px 0px;
        border-radius: 9px;
}

/*
qlineargradient
//其中x1,y1表示渐变起始坐标, x2,y2表示渐变终点坐标
//如果只有x相等,则表示垂直线性渐变,如果只有y相等,则表示平行线性渐变,否则就是斜角线性渐变
*/
 
QSlider::groove:vertical
{
    height:150px;
    background: qlineargradient(x1: 0, y1: 0, x2: 0, y2: 1, stop: 0 rgb(124, 124, 124), 
                stop: 1.0 rgb(72, 71, 71));
}
QSlider::handle:vertical
{
    width: 10px;
    background: rgb(0, 160, 230);
    margin: -6px 0px -6px 0px;
    border-radius: 9px;
}

QSlider 
{
    background-color: transparent;
    border: none;
    height: 40px;
}
QSlider::groove:horizontal 
{
    background-color: rgb(164, 217, 240);
    height: 24px;
}
QSlider::handle:horizontal 
{
    background-color: rgb(255, 0, 0);
    height: 40px;
    width: 30px;
    border: none;
    border-radius: 4px;
    margin: -20px 0px; /* 上下空白 -20px, 左右空白 0px */
}
QSlider::handle:horizontal:hover
 {
    background-color: rgb(200, 100, 50);
}
QSlider::sub-page:horizontal 
{
    background-color: rgb(0, 223, 0);
}

4.设置进度条

QProgressBar {
    border: 1px solid;
    border-color: #000000 transparent transparent #000000;
    background-color: #f5f5f5;
}
QProgressBar::chunk {
    border: none;
}
QProgressBar::chunk[state=inRange] {
    background-color:  #00ff00;
}
QProgressBar::chunk[state=outRange] {
    background-color:  #e52f14;
}
QProgressBar::chunk[state=outRangeLittle] {
    background-color:  #ffc000;
}

5.设置滚动条

/**********滚动条-水平**********/
QScrollBar:horizontal 
{
        height: 20px;
        background: transparent;
        margin-top: 3px;
        margin-bottom: 3px;
}
QScrollBar::handle:horizontal 
{
        height: 20px;
        min-width: 30px;
        background: #cdcdcd;
        margin-left: 15px;
        margin-right: 15px;
}
QScrollBar::handle:horizontal:hover 
{
        background: #a6a6a6;
}
QScrollBar::sub-line:horizontal 
{
        width: 15px;
        background: transparent;
        image: url(:/res/left_arrow.png);
        subcontrol-position: left;
}
QScrollBar::add-line:horizontal 
{
        width: 15px;
        background: transparent;
        image: url(:/res/right_arrow.png);
        subcontrol-position: right;
}
QScrollBar::sub-line:horizontal:hover 
{
        background: rgb(170, 200, 230);
}
QScrollBar::add-line:horizontal:hover 
{
        background: rgb(170, 200, 230);
}
QScrollBar::add-page:horizontal,QScrollBar::sub-page:horizontal 
{
        background: transparent;
}
 
/**********滚动条-垂直**********/
QScrollBar:vertical 
{
    width: 20px;
    background: transparent;
    padding-top: 15px;
    padding-bottom: 15px;
    margin-left: 3px;
    margin-right: 3px;
}
QScrollBar::handle:vertical 
{
    width: 20px;
    min-height: 30px;
    background: #cdcdcd;
}
QScrollBar::handle:vertical:hover 
{
    background: #a6a6a6;
}
QScrollBar::sub-line:vertical 
{
    height: 15px;
    background: transparent;
    image: url(:/res/up_arrow.png);
    subcontrol-position: top;
}
QScrollBar::add-line:vertical 
{
        height: 15px;
        background: transparent;
        image: url(:/res/down_arrow.png);
        subcontrol-position: bottom;
}
QScrollBar::sub-line:vertical:hover 
{
        background: rgb(170, 200, 230);
}
QScrollBar::add-line:vertical:hover 
{
        background: rgb(170, 200, 230);
}
QScrollBar::add-page:vertical, QScrollBar::sub-page:vertical 
{
        background: transparent;
}
QScrollBar#verticalScrollBar:vertical 
{
        margin-top: 30px;
}
 
QScrollArea 
{
    background-color: transparent;
}

QScrollBar:vertical
{
    background-color: transparent;
}
 
QScrollBar::handle:vertical
{
    padding: 100px 0 100px 0;
    background: rgba(0,0,0,0.3);
    border: none;
}
 
QScrollBar::add-page:vertical,
QScrollBar::sub-page:vertical
{
    background-color: transparent;
}
 
QScrollBar::sub-line:vertical,
QScrollBar::add-line:vertical
{
    height: 0px;
    width:0px;
}

6.常用样式

/*
    font-size 字号
    color 字体颜色
    font-weight 字宽
    font-style 字体样式
*/
 
font-size:20px;
color:red;
font-weight:bold;//三种形式：normal，bold，900
fontstyle:italic;
font: bold 18px;
 
/*
    border-style 边框样式 
        dotted：点状
        dashed：虚线
        solid：实线
        double：双线
        groove：凹槽边框
        ridge：垄状边框
        inset：inset 边框
        outset：outset 边框
    border 边框线大小
    border-color:blue red 上下蓝色 左右红色
*/
 
border-style: solid;   
border-color: red;
border-left: none;
border-top: none;
border-right: 2px solid #c0c0c0;
border-bottom: 2px solid #c0c0c0;
border:   none;
border:2px solid #ffa500;
border-radius: 5px;

7.设置单选框

当文本显示不全的时候，可使用： padding:4px;

#大小
QRadioButton::indicator{
    width:20px;
    height:20px;
    border-radius:10px;
    background-color:#DCDCDC;
}
#没有选择时候的图标
QRadioButton::indicator:unchecked
{
    width:20px;
    height:20px;
    border-radius:10px;
    background-color:#DCDCDC;
}
#选择时候的图标
QRadioButton::indicator:checked
{
    width:20px;
    height:20px;
    border-radius:10px;
    background-color:#00FA9A;
}

8.设置QLabel

font-size:20px;
color:red;
font-weight:bold;
font-style:italic;
/*设置文本对齐方式，不支持text-align*/
qproperty-alignment:'AlignVcenter|AlignRight';/*设置文本垂直方向居中对齐，水平方向右对齐*/

QLabel也可以设置背景图片，直接显示自己需要显示的图片作为背景

border-image:url(图标路径);
background-color:transparent;/*将背景色设置为透明，防止图片覆盖不到的区域有背景底色*/
color:#212129;/*设置显示文字的颜色*/
font:72pt "Arial";/*设置字体和大小*/

9.设置表头QHeaderView

/******   表头   ******/
QHeaderView 
{
    background-color: #F0F0F0;
    color: #3C4457;
    font-size: 20px;
    min-height:40px;
}
QHeaderView::section
{
    background-color: #F0F0F0;
    border: 1px solid #A0A0A0;
}
QHeaderView::section:hover
{
    color:#FFD700;
    background:#EBEBC9;
}
 
QHeaderView::section:pressed
{
    background:#645B4A;
}

10.设置表格QTableWidget、QTableView

设置表格的每行的高度可使用下边的代码进行设置

ui->tablewidget->verticalHeader()->setDefaultSectionSize(60);

设置表头的高度可使用下边的代码

ui->tablewidget->horizontalHeader()->setFixedHeight(60);

设置QTableWidget和QTableView时如果需要设置滚动条的样式，也可直接采用上边的滚动条样式设置方式设置表格的滚动条样式，如下

设置表格的滚动条样式

QScrollBar{
    border-image:url(图片路径);/*设置滚动条的背景图片*/
    border:1px solid;/*设置滚动条的边框宽度*/
    border-radius:5px;/*设置滚动条的边框圆角*/
    padding:1px;
    height:34px;/*设置滚动条的高度，如果是水平滚动条*/
    width:34px;/*设置滚动条的宽度，如果是垂直滚动条*/
}

/*设置滚动条中间的滚动部分的样式*/
QScrollBar::handle{
    border-radius:3px;/*设置滚动条的边框圆角*/
    image:url(图片路径);/*设置中间滚动部分的图标*/
    min-height:16px;/*设置中间滚动部分的最小高度，如果是水平滚动条*/
    min-width:16px;/*设置中间滚动部分的最小宽度，如果是垂直滚动条*/
}

/*设置滚动条中间的滚动部分的鼠标放上去的样式*/
QScrollBar::handle{
    image:url(图片路径);/*设置中间滚动部分的图标*/
}

另一种设置方式，可设置垂直和水平的滚动条样式，参考文章链接QT的QTableWidget滚动条设置--非常全_ACE2008888的博客-CSDN博客_qt 设置滚动条最右边

ui->QTableView->verticalScrollBar()->setStyleSheet("QScrollBar:vertical{"        //垂直滑块整体  

                                                          "background:#FFFFFF;"  //背景色  

                                                          "padding-top:20px;"    //上预留位置（放置向上箭头）  

                                                          "padding-bottom:20px;" //下预留位置（放置向下箭头）  

                                                          "padding-left:3px;"    //左预留位置（美观）  

                                                          "padding-right:3px;"   //右预留位置（美观）  

                                                          "border-left:1px solid #d7d7d7;}"//左分割线  

                                                          "QScrollBar::handle:vertical{"//滑块样式  

                                                          "background:#dbdbdb;"  //滑块颜色  

                                                          "border-radius:6px;"   //边角圆润  

                                                          "min-height:80px;}"    //滑块最小高度  

                                                          "QScrollBar::handle:vertical:hover{"//鼠标触及滑块样式  

                                                          "background:#d0d0d0;}" //滑块颜色  

                                                          "QScrollBar::add-line:vertical{"//向下箭头样式  

                                                          "background:url(:/images/resource/images/checkout/down.png) center no-repeat;}"  

                                                          "QScrollBar::sub-line:vertical{"//向上箭头样式  

                                                          "background:url(:/images/resource/images/checkout/up.png) center no-repeat;}");  

  

ui->QTableView->horizontalScrollBar()->setStyleSheet("QScrollBar:horizontal{"  

                                                          "background:#FFFFFF;"  

                                                          "padding-top:3px;"  

                                                          "padding-bottom:3px;"  

                                                          "padding-left:20px;"  

                                                          "padding-right:20px;}"  

                                                          "QScrollBar::handle:horizontal{"  

                                                          "background:#dbdbdb;"  

                                                          "border-radius:6px;"  

                                                          "min-width:80px;}"  

                                                          "QScrollBar::handle:horizontal:hover{"  

                                                          "background:#d0d0d0;}"  

                                                          "QScrollBar::add-line:horizontal{"  

                                                          "background:url(:/images/resource/images/checkout/right.png) center no-repeat;}"  

                                                          "QScrollBar::sub-line:horizontal{"  

                                                          "background:url(:/images/resource/images/checkout/left.png) center no-repeat;}");

设置QTableView

QTableView {
    background-color: white;
    border-left: 2px solid #808080;
    border-top: 2px solid #808080;
}
QTableView::item {
    color: #3C4457;
    background-color: transparent;
    border: none;
    border-bottom: 1px solid #808080; /*表格只显示横向的分隔线，不显示纵向的*/
}
QTableView::item:selected {
    color: #ffffff;
    background-color: #ffa500;
}

设置QTableWidget

/*QTableWidget*/
QTableWidget
{
    color:green;    /*前景色：文字颜色*/
    /*gridline-color:red;   */     /*表格中的网格线条颜色*/
    background:white;
    /*设置交替颜色，需要在函数属性中设置:tableWidget->setAlternatingRowColors(true)*/
    /*alternate-background-color:red;   */
    selection-color:red;    /*鼠标选中时前景色：文字颜色*/
    selection-background-color:lightgray;   /*鼠标选中时背景色*/
    border:1px solid gray;  /*边框线的宽度、颜色*/
    /*border:none;*/    /*去除边界线*/
    /*border-radius:5px;*/
    /*padding:10px 10px;*/  /*表格与边框的间距*/
}
 
/*设置表头属性*/
QTableWidget QHeaderView::section
{
    background-color:#F0F0F0;  /*lightgray*/
    /*color:black;*/
    /*padding-left:4px;*/
    /*border:3px solid red;*/   /*表头边框线的宽度、颜色*/
    /*border:1px solid gray;*/
}

/*设置QTableWidget的item鼠标悬停的样式*/
QTableWidget::item:hover
{
    show-decoration-selected:5;
    background:skyblue;
}
/*设置QTableWidget的item选中的样式*/ 
QTableWidget::item:selected
{
    /*border:0px;*/
    background:lightgray;
    padding:0px;
    margin:0px;
    color:red;
}
 
/*设置QTableWidget的item上次选择后保留的状态，鼠标离开后显示悬停的样式*/
QTableWidget::item:selected:!active
{
    border-width:0px;
    background:lightgreen;
}

11.设置树控件QTreeWidget

QTreeWidget 
{
    background-color: white;
    border: 1px solid #C8D5EA;
    font: bold 16px;
}
QTreeWidget::item 
{
    background-color: transparent;
    color: #000000;
    border: 0px;
    height: 40px;
}
QTreeWidget::item:selected 
{
    color: #ffffff;
    background-color: #FFA500;
}

设置树控件的勾选框样式

树控件的展开和折叠按钮的大小可调用下边的方法进行设置

ui->treeView->setIndentation(50);

"QTreeView{background-color:transparent;outline:0px;}"
 
//设置箭头图标打开和关闭样式
"QTreeView::branch:closed:has-children:!has-siblings,QTreeView::branch:closed:has-children:has-siblings {border-image: none;image:url(:/image/1.png);}"
"QTreeView::branch:open:has-children:!has-siblings,QTreeView::branch:open:has-children:has-siblings  {border-image: none;image: url(:/image/1.png);}"
 
//设置选项样式
"QTreeView::item {background-color: transparent;}"
"QTreeView::item:hover{background-color:red;}"
"QTreeView::item:selected{background-color:red;}"
"QTreeView::item:selected:active{background-color:red;}"
"QTreeView::item:selected:!active {background-color:red;}"
 
//设置复选框样式
"QTreeView::indicator {width: 33px;height: 33px;}"
"QTreeView::indicator:enabled:unchecked {image: url(:/image/1.png);}"
"QTreeView::indicator:enabled:checked {image: url(:/image/1.png);}"
"QTreeView::indicator:enabled:indeterminate {image: url(:/image/1.png);}"

12.设置列表控件 QListWidget

QListWidget 
{
    background-color: white;
    border: 1px solid #C8D5EA;
    font: bold 16px;
}
QListWidget::item 
{
    background-color: transparent;
    color: #000000;
    border: 0px;
    padding-left: 20px;
    height: 40px;
}
QListWidget::item:selected 
{
    color: #ffffff;
    background-color: #FFA500;
}

13.设置下拉框控件QComboBox

QComboBox
{
    border: 1px solid gray;
    border-radius: 3px;
    padding: 1px 2px 1px 3px;
    background:#FFFFFF;
    min-width: 200px;
    min-height: 40px;
    max-width: 200px;
    max-height: 40px;
}
 
QComboBox:disabled 
{
    background-color: #F0F0F0;
}
 
QComboBox::drop-down
{
    border: 0px solid red;
    subcontrol-origin: padding;
    subcontrol-position: top right;
}
 
QComboBox:on
{
    min-height:20px;
    padding-top: 3px;
    padding-left: 4px;
}
 
QComboBox::down-arrow
{
    image: url(":/png/png/combox-arrow-down.png");
    width: 16px;
    height: 16px;
}
 
QComboBox QAbstractItemView
{
    border: 1px solid #ecf5ff;
    selection-background-color: #053553;
    selection-color: #33ff66;
    color: #3C4457;
    font-size: 16px;
    border: 0px solid red;
    outline: 0px;  /*去掉item虚线*/
}
 
QComboBox QAbstractItemView::item
{
    min-height: 40px;
    border-style: solid;
    border: 1px solid #00253f;
}
QComboBox QAbstractItemView::item:selected 
{
    background-color: #4876FF;
}

设置下拉列表可编辑和不可编辑时的样式

/* 属性设置为可编辑（setEditable(true)）editable时，文字编辑区域的样式 */
QComboBox:editable {
    background: green;
}

/* 属性设置为非editable时，QComboBox文字区的样式 */
QComboBox:!editable {
    background: #ffffff;
}

/* 属性设置为editable时，展开QComboBox下拉框文字区的样式 */
QComboBox:editable:on {
    background: green;
}

/* 设置为!editable时，展开QComboBox下拉框文字区的样式 */
QComboBox:!editable:on {
    color:white;
    background: green;   
}

/* 属性设置为editable时，下拉框箭头的样式 */
QComboBox::drop-down:editable {
    background: lightblue;
}
/* 属性设置为非editable时，下拉框箭头的样式 */
QComboBox::drop-down:!editable {
    background: green;
}

/* 属性设置为editable时，下拉框展开箭头的样式 */
QComboBox::drop-down:editable:on {
    background: rgb(238, 182, 144);
}

/* 属性设置为非editable时，下拉框展开箭头的样式 */
QComboBox::drop-down:!editable:on {
    background: red;
}

14.设置按钮QPushButton

QPushButton 
{
    background-color: transparent;
}
QPushButton:hover 
{
    background-color: gray;
}
QPushButton:pressed 
{
    padding-top: 2px;
    padding-left: 1px;
}
QPushButton:disabled 
{
    color: gray;
}

15.设置工具按钮QToolButton

QToolButton 
{
    background-color: #42C734;
    color: white;
    font-size: 18px;
    min-height: 48px;
    min-width: 160px;
    max-height: 48px;
    max-width: 160px;
    
}
QToolButton:hover 
{
    color: #f8e71c;
}
QToolButton:pressed 
{
    padding-top: 2px;
    padding-left: 1px;
}
QToolButton:disabled 
{
    color: gray;
}

16. 设置组控件QGroupBox

QGroupBox
{
    border: 1px solid grey;
    border-radius: 0px;
    margin-top: 15px; /*在标题顶部留出空格*/
}
QGroupBox::title 
{
    subcontrol-origin: margin;
    position: relative;
    left: 12px;
    padding: -2 2px;
}

/*标题栏特殊样式，40px高度的标题栏*/
QGroupBox{
	background-color:#212129;
	margin-top:40px;
	border:1px solid #4c4e5c;
}

QGroupBox::title {
	background-color:#4c4e5c;
    subcontrol-origin: margin;
	subcontrol-position: top center;
	min-height:40px;
	min-width:3000px;
}

/*图标设置*/
/*未勾选时的图标设置*/
QGroupBox::indicator:unchecked{    
    image: url(图标路径);
}
/*勾选时的图标设置*/
QGroupBox::indicator:checked {
    image: url(图标路径);
}

17.设置富文本控件

QTextEdit 
{
    border: 1px solid #C8D5EA;
    background-color: white;
    color: #3C4457;
}

18.设置增加减少按钮控件

QDoubleSpinBox,
QSpinBox {
    border: 1px solid #C8D5EA;
    background-color: white;
    color: #3C4457;
    font-size: 16px;
    min-width: 80px;
    min-height: 40px;
    max-height: 40px;
}
QDoubleSpinBox:disabled,
QSpinBox:disabled {
    background-color: #F0F0F0;
}
QDoubleSpinBox::up-button,
QSpinBox::up-button {
    image: url(:/res/qwe.png);
}
QDoubleSpinBox::up-button:pressed,
QSpinBox::up-button:pressed {
    padding-top: 1px;
    padding-left: 1px;
}
QDoubleSpinBox::down-button,
QSpinBox::down-button {
    image: url(:/res/qws.png);
}
QDoubleSpinBox::down-button:pressed,
QSpinBox::down-button:pressed {
    padding-top: 1px;
    padding-left: 1px;
}

19.设置日历控件QCalendarWidget

QCalendarWidget 是一个比较复杂的 widget，由几个 QToolButton, QSpinBox, QMenu, QTableView 等组成，Qt 的帮助文档里没有其 QSS 的相关文档，当要修改其样式的时候应该怎么办呢？

我们这里采用的方法是分析组成 QCalendarWidget 的 widget 的 className 和 objectName，然后 QSS 每个 widget，最终达到修改 QCalendarWidget 样式的目的。日历控件的树形组成结构如下

"QCalendarWidget : calendarWidget"
"    QVBoxLayout : "
"    QCalendarModel : "
"    QCalendarView : qt_calendar_calendarview"
"        QWidget : qt_scrollarea_viewport"
"        QWidget : qt_scrollarea_hcontainer"
"            QScrollBar : "
"            QBoxLayout : "
"        QWidget : qt_scrollarea_vcontainer"
"            QScrollBar : "
"            QBoxLayout : "
"        QStyledItemDelegate : "
"        QHeaderView : "
"            QWidget : qt_scrollarea_viewport"
"            QWidget : qt_scrollarea_hcontainer"
"                QScrollBar : "
"                QBoxLayout : "
"            QWidget : qt_scrollarea_vcontainer"
"                QScrollBar : "
"                QBoxLayout : "
"            QItemSelectionModel : "
"        QHeaderView : "
"            QWidget : qt_scrollarea_viewport"
"            QWidget : qt_scrollarea_hcontainer"
"                QScrollBar : "
"                QBoxLayout : "
"            QWidget : qt_scrollarea_vcontainer"
"                QScrollBar : "
"                QBoxLayout : "
"            QItemSelectionModel : "
"        QTableCornerButton : "
"        QItemSelectionModel : "
"    QWidget : qt_calendar_navigationbar"
"        QPrevNextCalButton : qt_calendar_prevmonth"
"        QPrevNextCalButton : qt_calendar_nextmonth"
"        QToolButton : qt_calendar_monthbutton"
"            QMenu : "
"                QAction : "
"                QAction : "
"                QAction : "
"                QAction : "
"                QAction : "
"                QAction : "
"                QAction : "
"                QAction : "
"                QAction : "
"                QAction : "
"                QAction : "
"                QAction : "
"                QAction : "
"        QToolButton : qt_calendar_yearbutton"
"        QSpinBox : qt_calendar_yearedit"
"            QLineEdit : qt_spinbox_lineedit"
"                QWidgetLineControl : "
"            QValidator : qt_spinboxvalidator"
"        QHBoxLayout : "
"    QCalendarDelegate : "
"    QCalendarTextNavigator : "

分析上面输出的 objectName，不难得出它们对应的 widget 如下图所示：

知道了每个 widget 后，就可以像下面这样用 QSS 修改 QCalendarWidget 的样式了。

#qt_calendar_calendarview {
    background: white;
}

#qt_calendar_navigationbar {
    background: rgba(215, 215, 215, 255);
}

QToolButton {
    icon-size: 30px, 30px;
    width: 80px;
    height: 30px;
}

QToolButton#qt_calendar_prevmonth {
    background: green;
    width: 40px;
    qproperty-icon: url(:/resources/tabset-left.png);
}

QToolButton#qt_calendar_nextmonth {
    background: blue;
    width: 40px;
    qproperty-icon: url(:/resources/tabset-right.png);
}

QToolButton#qt_calendar_monthbutton {
    background: yellow;
    padding-right: 20px;
}

QToolButton#qt_calendar_yearbutton {
    background: magenta;
}

QToolButton#qt_calendar_monthbutton::menu-indicator{
    subcontrol-origin: padding;
    subcontrol-position: center right;
    right: 3px;
    width: 10px;
}

QAbstractItemView {
    color: black;
    selection-color: white;
    selection-background-color: rgb(255, 174, 0);
    font: 15px;
}

对日历控件的详细描述参考https://qtdebug.com/qtbook-qss-calendar/

20.QDateTimeEdit的样式设置

如果下边的样式在界面的样式中设置无效，可放在代码里边设置看是否有效

"QDateTimeEdit{background-color:#212129;border:none;}"
/*当设置为日历控件弹出时设置下拉按钮的图标*/
"QDateTimeEdit::drop-down{width:54px;border:none;border-image:url(图片路径);}"
/*当设置为日历控件弹出时设置鼠标悬停在下拉时按钮下拉按钮的图标*/
"QDateTimeEdit::drop-down:hover{border-image:url(图片路径);}"

21.QToolTip样式设置

方式一：

使用样式设置QToolTip

//QLabel中的QToolTip样式设置
ui.label->setStyleSheet("QToolTip{border:1px solid rgb(118, 118, 118); background-color: #ffffff; color:#484848; font-size:12px;}"); //设置边框, 边框色, 背景色, 字体色, 字号
ui.label->setToolTip("Hello, world!");

方式二：

使用调色板设置样式

//设置QToolTip颜色
QPalette palette = QToolTip::palette();
palette.setColor(QPalette::Inactive,QPalette::ToolTipBase,Qt::white);   //设置ToolTip背景色
palette.setColor(QPalette::Inactive,QPalette::ToolTipText,QColor(102, 102, 102, 255)); 	//设置ToolTip字体色
QToolTip::setPalette(palette);
QFont font("Segoe UI", -1, 50);
font.setPixelSize(12);
QToolTip::setFont(font);  //设置ToolTip字体

问题：

如果出现QToolTip通过样式设置了字体出现第一次显示不全的问题，则可以在代码中设置QToolTip的字体，其他背景色和字体颜色还是可以通过样式设置，样式设置参考方式一，字体设置参考方式二的字体设置部分即可