devbox
AllinToyou
这个屌丝很懒，什么也没留下！
关注作者
热门标签
热门文章
当前位置:   article > 正文

Qt的qss常用样式总结_qt qss文件

作者：AllinToyou | 2024-05-23 17:31:06

赞

踩

qt qss文件

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

目录

1.设置背景色

2.设置圆角

3.设置滑动条

 4.设置进度条

5.设置滚动条

6.常用样式

7.设置单选框

8.设置QLabel

9.设置表头QHeaderView

10.设置表格QTableWidget、QTableView

11.设置树控件QTreeWidget

12.设置列表控件 QListWidget

13.设置下拉框控件QComboBox

14.设置按钮QPushButton

 15.设置工具按钮QToolButton

16. 设置组控件QGroupBox

17.设置富文本控件 

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

19.设置日历控件QCalendarWidget

20.QDateTimeEdit的样式设置

21.QToolTip样式设置

1.设置背景色

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

2.设置圆角

  1. border-top-right-radius:33px;
  2. border-bottom-right-radius:33px;
  3.  
  4. -------------------------------
  5. //圆形
  6. border-radius:33px;

3.设置滑动条

  1. /*第一种风格*/
  2. /**
  3.     groove表示槽的部分
  4.     handle表示滑块
  5.     add-page表示未滑过的槽部分
  6.     sub-page表示已滑过的槽部分
  7.     在辅助控制器后面可以设置状态，horizontal就是QSS生效的QSlider的状态
  8. **/
  9. //设置线条的圆角
  10. QSlider::groove:horizontal
  11. {
  12.     height:10px;
  13.     border-radius: 5px;
  14.     background-color:rgb(219,219,219);
  15. }
  16. /*
  17. 设置的是滑块的形状：圆形
  18. */
  19. QSlider::handle:horizontal
  20. {
  21.     width: 20px;
  22.     background-color:rgb(255,255,255);
  23.     margin:-6px 0px -6px 0px; //控制对应高度
  24.     border: 1px solid gray;
  25.     border-radius:10px;
  26. }
  27. /*
  28. add-page
  29. sub-page
  30. 滑动时出现的颜色样式
  31. */
  32. QSlider::add-page:horizontal
  33. {
  34.     border-radius: 5px;
  35.     background-color: rgb(219,219,219);
  36. }
  37.  
  38. QSlider::sub-page:horizontal
  39. {
  40.     border-radius: 5px;
  41.     background-color: rgb(80,166,234);
  42. }
  43.  
  44. /*第二种风格*/
  45. QSlider::groove:horizontal {
  46.         height: 6px;
  47.         background: qlineargradient(x1: 0, y1: 0, x2: 0, y2: 1, stop: 0 rgb(124, 124, 124), stop: 1.0 rgb(72, 71, 71));
  48. }
  49. QSlider::handle:horizontal {
  50.         width: 1px;
  51.         background: rgb(0, 160, 230);
  52.         margin: -6px 0px -6px 0px;
  53.         border-radius: 9px;
  54. }
  55.  
  56. /*
  57. qlineargradient
  58. //其中x1,y1表示渐变起始坐标, x2,y2表示渐变终点坐标
  59. //如果只有x相等,则表示垂直线性渐变,如果只有y相等,则表示平行线性渐变,否则就是斜角线性渐变
  60. */
  61.  
  62. QSlider::groove:vertical
  63. {
  64.     height:150px;
  65.     background: qlineargradient(x1: 0, y1: 0, x2: 0, y2: 1, stop: 0 rgb(124, 124, 124), 
  66.                 stop: 1.0 rgb(72, 71, 71));
  67. }
  68. QSlider::handle:vertical
  69. {
  70.     width: 10px;
  71.     background: rgb(0, 160, 230);
  72.     margin: -6px 0px -6px 0px;
  73.     border-radius: 9px;
  74. }
  75.  
  76. QSlider 
  77. {
  78.     background-color: transparent;
  79.     border: none;
  80.     height: 40px;
  81. }
  82. QSlider::groove:horizontal 
  83. {
  84.     background-color: rgb(164, 217, 240);
  85.     height: 24px;
  86. }
  87. QSlider::handle:horizontal 
  88. {
  89.     background-color: rgb(255, 0, 0);
  90.     height: 40px;
  91.     width: 30px;
  92.     border: none;
  93.     border-radius: 4px;
  94.     margin: -20px 0px; /* 上下空白 -20px, 左右空白 0px */
  95. }
  96. QSlider::handle:horizontal:hover
  97.  {
  98.     background-color: rgb(200, 100, 50);
  99. }
  100. QSlider::sub-page:horizontal 
  101. {
  102.     background-color: rgb(0, 223, 0);
  103. }

 4.设置进度条

  1. QProgressBar {
  2.     border: 1px solid;
  3.     border-color: #000000 transparent transparent #000000;
  4.     background-color: #f5f5f5;
  5. }
  6. QProgressBar::chunk {
  7.     border: none;
  8. }
  9. QProgressBar::chunk[state=inRange] {
  10.     background-color:  #00ff00;
  11. }
  12. QProgressBar::chunk[state=outRange] {
  13.     background-color:  #e52f14;
  14. }
  15. QProgressBar::chunk[state=outRangeLittle] {
  16.     background-color:  #ffc000;
  17. }

5.设置滚动条

  1. /**********滚动条-水平**********/
  2. QScrollBar:horizontal 
  3. {
  4.         height: 20px;
  5.         background: transparent;
  6.         margin-top: 3px;
  7.         margin-bottom: 3px;
  8. }
  9. QScrollBar::handle:horizontal 
  10. {
  11.         height: 20px;
  12.         min-width: 30px;
  13.         background: #cdcdcd;
  14.         margin-left: 15px;
  15.         margin-right: 15px;
  16. }
  17. QScrollBar::handle:horizontal:hover 
  18. {
  19.         background: #a6a6a6;
  20. }
  21. QScrollBar::sub-line:horizontal 
  22. {
  23.         width: 15px;
  24.         background: transparent;
  25.         image: url(:/res/left_arrow.png);
  26.         subcontrol-position: left;
  27. }
  28. QScrollBar::add-line:horizontal 
  29. {
  30.         width: 15px;
  31.         background: transparent;
  32.         image: url(:/res/right_arrow.png);
  33.         subcontrol-position: right;
  34. }
  35. QScrollBar::sub-line:horizontal:hover 
  36. {
  37.         background: rgb(170, 200, 230);
  38. }
  39. QScrollBar::add-line:horizontal:hover 
  40. {
  41.         background: rgb(170, 200, 230);
  42. }
  43. QScrollBar::add-page:horizontal,QScrollBar::sub-page:horizontal 
  44. {
  45.         background: transparent;
  46. }
  47.  
  48. /**********滚动条-垂直**********/
  49. QScrollBar:vertical 
  50. {
  51.     width: 20px;
  52.     background: transparent;
  53.     padding-top: 15px;
  54.     padding-bottom: 15px;
  55.     margin-left: 3px;
  56.     margin-right: 3px;
  57. }
  58. QScrollBar::handle:vertical 
  59. {
  60.     width: 20px;
  61.     min-height: 30px;
  62.     background: #cdcdcd;
  63. }
  64. QScrollBar::handle:vertical:hover 
  65. {
  66.     background: #a6a6a6;
  67. }
  68. QScrollBar::sub-line:vertical 
  69. {
  70.     height: 15px;
  71.     background: transparent;
  72.     image: url(:/res/up_arrow.png);
  73.     subcontrol-position: top;
  74. }
  75. QScrollBar::add-line:vertical 
  76. {
  77.         height: 15px;
  78.         background: transparent;
  79.         image: url(:/res/down_arrow.png);
  80.         subcontrol-position: bottom;
  81. }
  82. QScrollBar::sub-line:vertical:hover 
  83. {
  84.         background: rgb(170, 200, 230);
  85. }
  86. QScrollBar::add-line:vertical:hover 
  87. {
  88.         background: rgb(170, 200, 230);
  89. }
  90. QScrollBar::add-page:vertical, QScrollBar::sub-page:vertical 
  91. {
  92.         background: transparent;
  93. }
  94. QScrollBar#verticalScrollBar:vertical 
  95. {
  96.         margin-top: 30px;
  97. }
  98.  
  99. QScrollArea 
  100. {
  101.     background-color: transparent;
  102. }
  103.  
  1. QScrollBar:vertical
  2. {
  3.     background-color: transparent;
  4. }
  5.  
  6. QScrollBar::handle:vertical
  7. {
  8.     padding: 100px 0 100px 0;
  9.     background: rgba(0,0,0,0.3);
  10.     border: none;
  11. }
  12.  
  13. QScrollBar::add-page:vertical,
  14. QScrollBar::sub-page:vertical
  15. {
  16.     background-color: transparent;
  17. }
  18.  
  19. QScrollBar::sub-line:vertical,
  20. QScrollBar::add-line:vertical
  21. {
  22.     height: 0px;
  23.     width:0px;
  24. }

6.常用样式

  1. /*
  2.     font-size 字号
  3.     color 字体颜色
  4.     font-weight 字宽
  5.     font-style 字体样式
  6. */
  7.  
  8. font-size:20px;
  9. color:red;
  10. font-weight:bold;//三种形式：normal，bold，900
  11. fontstyle:italic;
  12. font: bold 18px;
  13.  
  14. /*
  15.     border-style 边框样式 
  16.         dotted：点状
  17.         dashed：虚线
  18.         solid：实线
  19.         double：双线
  20.         groove：凹槽边框
  21.         ridge：垄状边框
  22.         inset：inset 边框
  23.         outset：outset 边框
  24.     border 边框线大小
  25.     border-color:blue red 上下蓝色 左右红色
  26. */
  27.  
  28. border-style: solid;   
  29. border-color: red;
  30. border-left: none;
  31. border-top: none;
  32. border-right: 2px solid #c0c0c0;
  33. border-bottom: 2px solid #c0c0c0;
  34. border:   none;
  35. border:2px solid #ffa500;
  36. border-radius: 5px;

7.设置单选框

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

  1. #大小
  2. QRadioButton::indicator{
  3.     width:20px;
  4.     height:20px;
  5.     border-radius:10px;
  6.     background-color:#DCDCDC;
  7. }
  8. #没有选择时候的图标
  9. QRadioButton::indicator:unchecked
  10. {
  11.     width:20px;
  12.     height:20px;
  13.     border-radius:10px;
  14.     background-color:#DCDCDC;
  15. }
  16. #选择时候的图标
  17. QRadioButton::indicator:checked
  18. {
  19.     width:20px;
  20.     height:20px;
  21.     border-radius:10px;
  22.     background-color:#00FA9A;
  23. }

8.设置QLabel

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

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

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

9.设置表头QHeaderView

  1. /******   表头   ******/
  2. QHeaderView 
  3. {
  4.     background-color: #F0F0F0;
  5.     color: #3C4457;
  6.     font-size: 20px;
  7.     min-height:40px;
  8. }
  9. QHeaderView::section
  10. {
  11.     background-color: #F0F0F0;
  12.     border: 1px solid #A0A0A0;
  13. }
  14. QHeaderView::section:hover
  15. {
  16.     color:#FFD700;
  17.     background:#EBEBC9;
  18. }
  19.  
  20. QHeaderView::section:pressed
  21. {
  22.     background:#645B4A;
  23. }

10.设置表格QTableWidget、QTableView

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

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

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

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

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

设置表格的滚动条样式

  1. QScrollBar{
  2.     border-image:url(图片路径);/*设置滚动条的背景图片*/
  3.     border:1px solid;/*设置滚动条的边框宽度*/
  4.     border-radius:5px;/*设置滚动条的边框圆角*/
  5.     padding:1px;
  6.     height:34px;/*设置滚动条的高度，如果是水平滚动条*/
  7.     width:34px;/*设置滚动条的宽度，如果是垂直滚动条*/
  8. }
  9.  
  10. /*设置滚动条中间的滚动部分的样式*/
  11. QScrollBar::handle{
  12.     border-radius:3px;/*设置滚动条的边框圆角*/
  13.     image:url(图片路径);/*设置中间滚动部分的图标*/
  14.     min-height:16px;/*设置中间滚动部分的最小高度，如果是水平滚动条*/
  15.     min-width:16px;/*设置中间滚动部分的最小宽度，如果是垂直滚动条*/
  16. }
  17.  
  18. /*设置滚动条中间的滚动部分的鼠标放上去的样式*/
  19. QScrollBar::handle{
  20.     image:url(图片路径);/*设置中间滚动部分的图标*/
  21. }
  22.

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

  1. ui->QTableView->verticalScrollBar()->setStyleSheet("QScrollBar:vertical{"        //垂直滑块整体  
  2.  
  3.                                                           "background:#FFFFFF;"  //背景色  
  4.  
  5.                                                           "padding-top:20px;"    //上预留位置（放置向上箭头）  
  6.  
  7.                                                           "padding-bottom:20px;" //下预留位置（放置向下箭头）  
  8.  
  9.                                                           "padding-left:3px;"    //左预留位置（美观）  
  10.  
  11.                                                           "padding-right:3px;"   //右预留位置（美观）  
  12.  
  13.                                                           "border-left:1px solid #d7d7d7;}"//左分割线  
  14.  
  15.                                                           "QScrollBar::handle:vertical{"//滑块样式  
  16.  
  17.                                                           "background:#dbdbdb;"  //滑块颜色  
  18.  
  19.                                                           "border-radius:6px;"   //边角圆润  
  20.  
  21.                                                           "min-height:80px;}"    //滑块最小高度  
  22.  
  23.                                                           "QScrollBar::handle:vertical:hover{"//鼠标触及滑块样式  
  24.  
  25.                                                           "background:#d0d0d0;}" //滑块颜色  
  26.  
  27.                                                           "QScrollBar::add-line:vertical{"//向下箭头样式  
  28.  
  29.                                                           "background:url(:/images/resource/images/checkout/down.png) center no-repeat;}"  
  30.  
  31.                                                           "QScrollBar::sub-line:vertical{"//向上箭头样式  
  32.  
  33.                                                           "background:url(:/images/resource/images/checkout/up.png) center no-repeat;}");  
  34.  
  35.   
  36.  
  37. ui->QTableView->horizontalScrollBar()->setStyleSheet("QScrollBar:horizontal{"  
  38.  
  39.                                                           "background:#FFFFFF;"  
  40.  
  41.                                                           "padding-top:3px;"  
  42.  
  43.                                                           "padding-bottom:3px;"  
  44.  
  45.                                                           "padding-left:20px;"  
  46.  
  47.                                                           "padding-right:20px;}"  
  48.  
  49.                                                           "QScrollBar::handle:horizontal{"  
  50.  
  51.                                                           "background:#dbdbdb;"  
  52.  
  53.                                                           "border-radius:6px;"  
  54.  
  55.                                                           "min-width:80px;}"  
  56.  
  57.                                                           "QScrollBar::handle:horizontal:hover{"  
  58.  
  59.                                                           "background:#d0d0d0;}"  
  60.  
  61.                                                           "QScrollBar::add-line:horizontal{"  
  62.  
  63.                                                           "background:url(:/images/resource/images/checkout/right.png) center no-repeat;}"  
  64.  
  65.                                                           "QScrollBar::sub-line:horizontal{"  
  66.  
  67.                                                           "background:url(:/images/resource/images/checkout/left.png) center no-repeat;}");

设置QTableView

  1. QTableView {
  2.     background-color: white;
  3.     border-left: 2px solid #808080;
  4.     border-top: 2px solid #808080;
  5. }
  6. QTableView::item {
  7.     color: #3C4457;
  8.     background-color: transparent;
  9.     border: none;
  10.     border-bottom: 1px solid #808080; /*表格只显示横向的分隔线，不显示纵向的*/
  11. }
  12. QTableView::item:selected {
  13.     color: #ffffff;
  14.     background-color: #ffa500;
  15. }

设置QTableWidget

  1. /*QTableWidget*/
  2. QTableWidget
  3. {
  4.     color:green;    /*前景色：文字颜色*/
  5.     /*gridline-color:red;   */     /*表格中的网格线条颜色*/
  6.     background:white;
  7.     /*设置交替颜色，需要在函数属性中设置:tableWidget->setAlternatingRowColors(true)*/
  8.     /*alternate-background-color:red;   */
  9.     selection-color:red;    /*鼠标选中时前景色：文字颜色*/
  10.     selection-background-color:lightgray;   /*鼠标选中时背景色*/
  11.     border:1px solid gray;  /*边框线的宽度、颜色*/
  12.     /*border:none;*/    /*去除边界线*/
  13.     /*border-radius:5px;*/
  14.     /*padding:10px 10px;*/  /*表格与边框的间距*/
  15. }
  16.  
  17. /*设置表头属性*/
  18. QTableWidget QHeaderView::section
  19. {
  20.     background-color:#F0F0F0;  /*lightgray*/
  21.     /*color:black;*/
  22.     /*padding-left:4px;*/
  23.     /*border:3px solid red;*/   /*表头边框线的宽度、颜色*/
  24.     /*border:1px solid gray;*/
  25. }
  26.  
  27. /*设置QTableWidget的item鼠标悬停的样式*/
  28. QTableWidget::item:hover
  29. {
  30.     show-decoration-selected:5;
  31.     background:skyblue;
  32. }
  33. /*设置QTableWidget的item选中的样式*/ 
  34. QTableWidget::item:selected
  35. {
  36.     /*border:0px;*/
  37.     background:lightgray;
  38.     padding:0px;
  39.     margin:0px;
  40.     color:red;
  41. }
  42.  
  43. /*设置QTableWidget的item上次选择后保留的状态，鼠标离开后显示悬停的样式*/
  44. QTableWidget::item:selected:!active
  45. {
  46.     border-width:0px;
  47.     background:lightgreen;
  48. }

11.设置树控件QTreeWidget

  1. QTreeWidget 
  2. {
  3.     background-color: white;
  4.     border: 1px solid #C8D5EA;
  5.     font: bold 16px;
  6. }
  7. QTreeWidget::item 
  8. {
  9.     background-color: transparent;
  10.     color: #000000;
  11.     border: 0px;
  12.     height: 40px;
  13. }
  14. QTreeWidget::item:selected 
  15. {
  16.     color: #ffffff;
  17.     background-color: #FFA500;
  18. }

设置树控件的勾选框样式

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

ui->treeView->setIndentation(50);

  1. "QTreeView{background-color:transparent;outline:0px;}"
  2.  
  3. //设置箭头图标打开和关闭样式
  4. "QTreeView::branch:closed:has-children:!has-siblings,QTreeView::branch:closed:has-children:has-siblings {border-image: none;image:url(:/image/1.png);}"
  5. "QTreeView::branch:open:has-children:!has-siblings,QTreeView::branch:open:has-children:has-siblings  {border-image: none;image: url(:/image/1.png);}"
  6.  
  7. //设置选项样式
  8. "QTreeView::item {background-color: transparent;}"
  9. "QTreeView::item:hover{background-color:red;}"
  10. "QTreeView::item:selected{background-color:red;}"
  11. "QTreeView::item:selected:active{background-color:red;}"
  12. "QTreeView::item:selected:!active {background-color:red;}"
  13.  
  14. //设置复选框样式
  15. "QTreeView::indicator {width: 33px;height: 33px;}"
  16. "QTreeView::indicator:enabled:unchecked {image: url(:/image/1.png);}"
  17. "QTreeView::indicator:enabled:checked {image: url(:/image/1.png);}"
  18. "QTreeView::indicator:enabled:indeterminate {image: url(:/image/1.png);}"

12.设置列表控件 QListWidget

  1. QListWidget 
  2. {
  3.     background-color: white;
  4.     border: 1px solid #C8D5EA;
  5.     font: bold 16px;
  6. }
  7. QListWidget::item 
  8. {
  9.     background-color: transparent;
  10.     color: #000000;
  11.     border: 0px;
  12.     padding-left: 20px;
  13.     height: 40px;
  14. }
  15. QListWidget::item:selected 
  16. {
  17.     color: #ffffff;
  18.     background-color: #FFA500;
  19. }

13.设置下拉框控件QComboBox

  1. QComboBox
  2. {
  3.     border: 1px solid gray;
  4.     border-radius: 3px;
  5.     padding: 1px 2px 1px 3px;
  6.     background:#FFFFFF;
  7.     min-width: 200px;
  8.     min-height: 40px;
  9.     max-width: 200px;
  10.     max-height: 40px;
  11. }
  12.  
  13. QComboBox:disabled 
  14. {
  15.     background-color: #F0F0F0;
  16. }
  17.  
  18. QComboBox::drop-down
  19. {
  20.     border: 0px solid red;
  21.     subcontrol-origin: padding;
  22.     subcontrol-position: top right;
  23. }
  24.  
  25. QComboBox:on
  26. {
  27.     min-height:20px;
  28.     padding-top: 3px;
  29.     padding-left: 4px;
  30. }
  31.  
  32. QComboBox::down-arrow
  33. {
  34.     image: url(":/png/png/combox-arrow-down.png");
  35.     width: 16px;
  36.     height: 16px;
  37. }
  38.  
  39. QComboBox QAbstractItemView
  40. {
  41.     border: 1px solid #ecf5ff;
  42.     selection-background-color: #053553;
  43.     selection-color: #33ff66;
  44.     color: #3C4457;
  45.     font-size: 16px;
  46.     border: 0px solid red;
  47.     outline: 0px;  /*去掉item虚线*/
  48. }
  49.  
  50. QComboBox QAbstractItemView::item
  51. {
  52.     min-height: 40px;
  53.     border-style: solid;
  54.     border: 1px solid #00253f;
  55. }
  56. QComboBox QAbstractItemView::item:selected 
  57. {
  58.     background-color: #4876FF;
  59. }

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

  1. /* 属性设置为可编辑（setEditable(true)）editable时，文字编辑区域的样式 */
  2. QComboBox:editable {
  3.     background: green;
  4. }
  5.  
  6. /* 属性设置为非editable时，QComboBox文字区的样式 */
  7. QComboBox:!editable {
  8.     background: #ffffff;
  9. }
  10.  
  11. /* 属性设置为editable时，展开QComboBox下拉框文字区的样式 */
  12. QComboBox:editable:on {
  13.     background: green;
  14. }
  15.  
  16. /* 设置为!editable时，展开QComboBox下拉框文字区的样式 */
  17. QComboBox:!editable:on {
  18.     color:white;
  19.     background: green;   
  20. }
  21.  
  22. /* 属性设置为editable时，下拉框箭头的样式 */
  23. QComboBox::drop-down:editable {
  24.     background: lightblue;
  25. }
  26. /* 属性设置为非editable时，下拉框箭头的样式 */
  27. QComboBox::drop-down:!editable {
  28.     background: green;
  29. }
  30.  
  31. /* 属性设置为editable时，下拉框展开箭头的样式 */
  32. QComboBox::drop-down:editable:on {
  33.     background: rgb(238, 182, 144);
  34. }
  35.  
  36. /* 属性设置为非editable时，下拉框展开箭头的样式 */
  37. QComboBox::drop-down:!editable:on {
  38.     background: red;
  39. }

14.设置按钮QPushButton

  1. QPushButton 
  2. {
  3.     background-color: transparent;
  4. }
  5. QPushButton:hover 
  6. {
  7.     background-color: gray;
  8. }
  9. QPushButton:pressed 
  10. {
  11.     padding-top: 2px;
  12.     padding-left: 1px;
  13. }
  14. QPushButton:disabled 
  15. {
  16.     color: gray;
  17. }

 15.设置工具按钮QToolButton

  1. QToolButton 
  2. {
  3.     background-color: #42C734;
  4.     color: white;
  5.     font-size: 18px;
  6.     min-height: 48px;
  7.     min-width: 160px;
  8.     max-height: 48px;
  9.     max-width: 160px;
  10.     
  11. }
  12. QToolButton:hover 
  13. {
  14.     color: #f8e71c;
  15. }
  16. QToolButton:pressed 
  17. {
  18.     padding-top: 2px;
  19.     padding-left: 1px;
  20. }
  21. QToolButton:disabled 
  22. {
  23.     color: gray;
  24. }

16. 设置组控件QGroupBox

  1. QGroupBox
  2. {
  3.     border: 1px solid grey;
  4.     border-radius: 0px;
  5.     margin-top: 15px; /*在标题顶部留出空格*/
  6. }
  7. QGroupBox::title 
  8. {
  9.     subcontrol-origin: margin;
  10.     position: relative;
  11.     left: 12px;
  12.     padding: -2 2px;
  13. }
  14.  
  15. /*标题栏特殊样式，40px高度的标题栏*/
  16. QGroupBox{
  17. 	background-color:#212129;
  18. 	margin-top:40px;
  19. 	border:1px solid #4c4e5c;
  20. }
  21.  
  22. QGroupBox::title {
  23. 	background-color:#4c4e5c;
  24.     subcontrol-origin: margin;
  25. 	subcontrol-position: top center;
  26. 	min-height:40px;
  27. 	min-width:3000px;
  28. }
  29.  
  30. /*图标设置*/
  31. /*未勾选时的图标设置*/
  32. QGroupBox::indicator:unchecked{    
  33.     image: url(图标路径);
  34. }
  35. /*勾选时的图标设置*/
  36. QGroupBox::indicator:checked {
  37.     image: url(图标路径);
  38. }

17.设置富文本控件 

  1. QTextEdit 
  2. {
  3.     border: 1px solid #C8D5EA;
  4.     background-color: white;
  5.     color: #3C4457;
  6. }

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

  1. QDoubleSpinBox,
  2. QSpinBox {
  3.     border: 1px solid #C8D5EA;
  4.     background-color: white;
  5.     color: #3C4457;
  6.     font-size: 16px;
  7.     min-width: 80px;
  8.     min-height: 40px;
  9.     max-height: 40px;
  10. }
  11. QDoubleSpinBox:disabled,
  12. QSpinBox:disabled {
  13.     background-color: #F0F0F0;
  14. }
  15. QDoubleSpinBox::up-button,
  16. QSpinBox::up-button {
  17.     image: url(:/res/qwe.png);
  18. }
  19. QDoubleSpinBox::up-button:pressed,
  20. QSpinBox::up-button:pressed {
  21.     padding-top: 1px;
  22.     padding-left: 1px;
  23. }
  24. QDoubleSpinBox::down-button,
  25. QSpinBox::down-button {
  26.     image: url(:/res/qws.png);
  27. }
  28. QDoubleSpinBox::down-button:pressed,
  29. QSpinBox::down-button:pressed {
  30.     padding-top: 1px;
  31.     padding-left: 1px;
  32. }

19.设置日历控件QCalendarWidget

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

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

  1. "QCalendarWidget : calendarWidget"
  2. "    QVBoxLayout : "
  3. "    QCalendarModel : "
  4. "    QCalendarView : qt_calendar_calendarview"
  5. "        QWidget : qt_scrollarea_viewport"
  6. "        QWidget : qt_scrollarea_hcontainer"
  7. "            QScrollBar : "
  8. "            QBoxLayout : "
  9. "        QWidget : qt_scrollarea_vcontainer"
  10. "            QScrollBar : "
  11. "            QBoxLayout : "
  12. "        QStyledItemDelegate : "
  13. "        QHeaderView : "
  14. "            QWidget : qt_scrollarea_viewport"
  15. "            QWidget : qt_scrollarea_hcontainer"
  16. "                QScrollBar : "
  17. "                QBoxLayout : "
  18. "            QWidget : qt_scrollarea_vcontainer"
  19. "                QScrollBar : "
  20. "                QBoxLayout : "
  21. "            QItemSelectionModel : "
  22. "        QHeaderView : "
  23. "            QWidget : qt_scrollarea_viewport"
  24. "            QWidget : qt_scrollarea_hcontainer"
  25. "                QScrollBar : "
  26. "                QBoxLayout : "
  27. "            QWidget : qt_scrollarea_vcontainer"
  28. "                QScrollBar : "
  29. "                QBoxLayout : "
  30. "            QItemSelectionModel : "
  31. "        QTableCornerButton : "
  32. "        QItemSelectionModel : "
  33. "    QWidget : qt_calendar_navigationbar"
  34. "        QPrevNextCalButton : qt_calendar_prevmonth"
  35. "        QPrevNextCalButton : qt_calendar_nextmonth"
  36. "        QToolButton : qt_calendar_monthbutton"
  37. "            QMenu : "
  38. "                QAction : "
  39. "                QAction : "
  40. "                QAction : "
  41. "                QAction : "
  42. "                QAction : "
  43. "                QAction : "
  44. "                QAction : "
  45. "                QAction : "
  46. "                QAction : "
  47. "                QAction : "
  48. "                QAction : "
  49. "                QAction : "
  50. "                QAction : "
  51. "        QToolButton : qt_calendar_yearbutton"
  52. "        QSpinBox : qt_calendar_yearedit"
  53. "            QLineEdit : qt_spinbox_lineedit"
  54. "                QWidgetLineControl : "
  55. "            QValidator : qt_spinboxvalidator"
  56. "        QHBoxLayout : "
  57. "    QCalendarDelegate : "
  58. "    QCalendarTextNavigator : "

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

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

  1. #qt_calendar_calendarview {
  2.     background: white;
  3. }
  4.  
  5. #qt_calendar_navigationbar {
  6.     background: rgba(215, 215, 215, 255);
  7. }
  8.  
  9. QToolButton {
  10.     icon-size: 30px, 30px;
  11.     width: 80px;
  12.     height: 30px;
  13. }
  14.  
  15. QToolButton#qt_calendar_prevmonth {
  16.     background: green;
  17.     width: 40px;
  18.     qproperty-icon: url(:/resources/tabset-left.png);
  19. }
  20.  
  21. QToolButton#qt_calendar_nextmonth {
  22.     background: blue;
  23.     width: 40px;
  24.     qproperty-icon: url(:/resources/tabset-right.png);
  25. }
  26.  
  27. QToolButton#qt_calendar_monthbutton {
  28.     background: yellow;
  29.     padding-right: 20px;
  30. }
  31.  
  32. QToolButton#qt_calendar_yearbutton {
  33.     background: magenta;
  34. }
  35.  
  36. QToolButton#qt_calendar_monthbutton::menu-indicator{
  37.     subcontrol-origin: padding;
  38.     subcontrol-position: center right;
  39.     right: 3px;
  40.     width: 10px;
  41. }
  42.  
  43. QAbstractItemView {
  44.     color: black;
  45.     selection-color: white;
  46.     selection-background-color: rgb(255, 174, 0);
  47.     font: 15px;
  48. }

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

20.QDateTimeEdit的样式设置

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

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

21.QToolTip样式设置

方式一：

使用样式设置QToolTip

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

方式二：

使用调色板设置样式

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

 问题：

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

样式设置相关参考 

  参考qt -- 常用的qss样式总结_cc_rong的博客-CSDN博客_qt中按钮qproperty-icon

声明：本文内容由网友自发贡献，不代表【wpsshop博客】立场，版权归原作者所有，本站不承担相应法律责任。如您发现有侵权的内容，请联系我们。转载请注明出处：https://www.wpsshop.cn/w/AllinToyou/article/detail/613791
推荐阅读
相关标签

Copyright © 2003-2013 www.wpsshop.cn 版权所有，并保留所有权利。

  

闽ICP备14008679号