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

【QT界面设计】 QTabWidget&QTabBar控件样式设计（QSS）_qtabwidget qss

作者：羊村懒王 | 2024-06-12 10:04:29

赞

踩

qtabwidget qss

很高兴在雪易的CSDN遇见你 ，给你糖糖

欢迎大家加入雪易社区-CSDN社区云 

前言

本文分享QT控件QTabWidget&QTabBar的样式设计，介绍两者可以自定义的内容，以及如何定义，希望对各位小伙伴有所帮助！

感谢各位小伙伴的点赞+关注，小易会继续努力分享，一起进步！

你的点赞就是我的动力(＾Ｕ＾)ノ~ＹＯ

我将收获到的：

        1.QTabWidget可自定义内容

        2.QTabBar可自定义内容

        3.QTabWidget中奇怪的问题？

目录

前言

1. QTabWidget可自定义内容

2. QTabBar可自定义内容

3. 可直接复制的QTableWidget样式

        》雪易样式​编辑

奇怪的问题：

结论：

1. QTabWidget可自定义内容

        》QTabWidget::pane{} 定义tabWidgetFrame

        》QTabWidget::tab-bar{} 定义TabBar的位置

        》QTabWidget::tab{}定义Tab的样式

        》QTabWidget::tab:selected{}定义Tab被选中时的样式

        》QTabWidget::tab:hover{}定义Tab鼠标悬停时的样式

        》QTabWidget::tab:!selected{}定义Tab在非选中时的样式

2. QTabBar可自定义内容

        》QTabBar::tear{}

        》QTabBar::scroller{}

        》QTabBar QToolButton{} 定义QTabBar下的QToolButton的样式

        》QTabBar QToolButton::right-arrow{} /* the arrow mark in the tool buttons */

        》QTabBar QToolButton::left-arrow{}

        》QTabBar::close-button{}

        》QTabBar::close-button:hover{}

3. 可直接复制的QTableWidget样式

        》雪易样式

  1. /*style-dark*/
  2. QTabWidget::pane { /* The tab widget frame */
  3.     border: 1px solid #00BB9E;
  4. 	border-radius:5px;
  5.     
  6. }
  7.  
  8. QTabWidget::tab-bar {
  9.     alignment: right;
  10. }
  11.  
  12. /* Style the tab using the tab sub-control. Note that
  13.     it reads QTabBar _not_ QTabWidget */
  14. QTabBar::tab {
  15.     background: #D3D3D3;/*qlineargradient(x1: 0, y1: 0, x2: 0, y2: 1,
  16.                                 stop: 0 #E1E1E1, stop: 0.4 #DDDDDD,
  17.                                 stop: 0.5 #D8D8D8, stop: 1.0 #D3D3D3);*/
  18.     border: none;
  19.     border-top-left-radius: 4px;
  20.     border-top-right-radius: 4px;
  21.     min-width: 80px;
  22.     padding: 8px;
  23. 	color:#000000;
  24. }
  25.  
  26. QTabBar::tab:selected, QTabBar::tab:hover {
  27.     background: qlineargradient(x1: 0, y1: 0, x2: 0, y2: 1,
  28.                                 stop: 0 #fafafa, stop: 1.0 #00BB9E);
  29.  
  30. }/**/
  31.  
  32. QTabBar::tab:selected {
  33.     border: 1px solid #00BB9E;
  34.     /*border-bottom-color: #00BB9E;  same as pane color*/ 
  35. }

        》QT提供样式1

  1. QTabWidget::pane { /* The tab widget frame */
  2.     border-top: 2px solid #C2C7CB;
  3. }
  4.  
  5. QTabWidget::tab-bar {
  6.     left: 5px; /* move to the right by 5px */
  7. }
  8.  
  9. /* Style the tab using the tab sub-control. Note that
  10.     it reads QTabBar _not_ QTabWidget */
  11. QTabBar::tab {
  12.     background: qlineargradient(x1: 0, y1: 0, x2: 0, y2: 1,
  13.                                 stop: 0 #E1E1E1, stop: 0.4 #DDDDDD,
  14.                                 stop: 0.5 #D8D8D8, stop: 1.0 #D3D3D3);
  15.     border: 2px solid #C4C4C3;
  16.     border-bottom-color: #C2C7CB; /* same as the pane color */
  17.     border-top-left-radius: 4px;
  18.     border-top-right-radius: 4px;
  19.     min-width: 8ex;
  20.     padding: 2px;
  21. }
  22.  
  23. QTabBar::tab:selected, QTabBar::tab:hover {
  24.     background: qlineargradient(x1: 0, y1: 0, x2: 0, y2: 1,
  25.                                 stop: 0 #fafafa, stop: 0.4 #f4f4f4,
  26.                                 stop: 0.5 #e7e7e7, stop: 1.0 #fafafa);
  27. }
  28.  
  29. QTabBar::tab:selected {
  30.     border-color: #9B9B9B;
  31.     border-bottom-color: #C2C7CB; /* same as pane color */
  32. }
  33.  
  34. QTabBar::tab:!selected {
  35.     margin-top: 2px; /* make non-selected tabs look smaller */
  36. }

        》QT提供样式2

  1. QTabWidget::pane { /* The tab widget frame */
  2.     border-top: 2px solid #C2C7CB;
  3. }
  4.  
  5. QTabWidget::tab-bar {
  6.     left: 5px; /* move to the right by 5px */
  7. }
  8.  
  9. /* Style the tab using the tab sub-control. Note that
  10.     it reads QTabBar _not_ QTabWidget */
  11. QTabBar::tab {
  12.     background: qlineargradient(x1: 0, y1: 0, x2: 0, y2: 1,
  13.                                 stop: 0 #E1E1E1, stop: 0.4 #DDDDDD,
  14.                                 stop: 0.5 #D8D8D8, stop: 1.0 #D3D3D3);
  15.     border: 2px solid #C4C4C3;
  16.     border-bottom-color: #C2C7CB; /* same as the pane color */
  17.     border-top-left-radius: 4px;
  18.     border-top-right-radius: 4px;
  19.     min-width: 8ex;
  20.     padding: 2px;
  21. }
  22.  
  23. QTabBar::tab:selected, QTabBar::tab:hover {
  24.     background: qlineargradient(x1: 0, y1: 0, x2: 0, y2: 1,
  25.                                 stop: 0 #fafafa, stop: 0.4 #f4f4f4,
  26.                                 stop: 0.5 #e7e7e7, stop: 1.0 #fafafa);
  27. }
  28.  
  29. QTabBar::tab:selected {
  30.     border-color: #9B9B9B;
  31.     border-bottom-color: #C2C7CB; /* same as pane color */
  32. }
  33.  
  34. QTabBar::tab:!selected {
  35.     margin-top: 2px; /* make non-selected tabs look smaller */
  36. }
  37.  
  38. /* make use of negative margins for overlapping tabs */
  39. QTabBar::tab:selected {
  40.     /* expand/overlap to the left and right by 4px */
  41.     margin-left: -4px;
  42.     margin-right: -4px;
  43. }
  44.  
  45. QTabBar::tab:first:selected {
  46.     margin-left: 0; /* the first selected tab has nothing to overlap with on the left */
  47. }
  48.  
  49. QTabBar::tab:last:selected {
  50.     margin-right: 0; /* the last selected tab has nothing to overlap with on the right */
  51. }
  52.  
  53. QTabBar::tab:only-one {
  54.     margin: 0; /* if there is only one tab, we don't want overlapping margins */
  55. }

        》QT提供样式3

  1. QTabWidget::pane { /* The tab widget frame */
  2.     border-top: 2px solid #C2C7CB;
  3.     position: absolute;
  4.     top: -0.5em;
  5. }
  6.  
  7. QTabWidget::tab-bar {
  8.     alignment: center;
  9. }
  10.  
  11. /* Style the tab using the tab sub-control. Note that
  12.     it reads QTabBar _not_ QTabWidget */
  13. QTabBar::tab {
  14.     background: qlineargradient(x1: 0, y1: 0, x2: 0, y2: 1,
  15.                                 stop: 0 #E1E1E1, stop: 0.4 #DDDDDD,
  16.                                 stop: 0.5 #D8D8D8, stop: 1.0 #D3D3D3);
  17.     border: 2px solid #C4C4C3;
  18.     border-bottom-color: #C2C7CB; /* same as the pane color */
  19.     border-top-left-radius: 4px;
  20.     border-top-right-radius: 4px;
  21.     min-width: 8ex;
  22.     padding: 2px;
  23. }
  24.  
  25. QTabBar::tab:selected, QTabBar::tab:hover {
  26.     background: qlineargradient(x1: 0, y1: 0, x2: 0, y2: 1,
  27.                                 stop: 0 #fafafa, stop: 0.4 #f4f4f4,
  28.                                 stop: 0.5 #e7e7e7, stop: 1.0 #fafafa);
  29. }
  30.  
  31. QTabBar::tab:selected {
  32.     border-color: #9B9B9B;
  33.     border-bottom-color: #C2C7CB; /* same as pane color */
  34. }

奇怪的问题：

问题描述：

        QTabWidget包含4各tab，每个里都有QLineEdit控件；因此采用如下的设置方式：

  1.     QLineEdit{
  2.     border - style: solid;
  3.     border - width: 0px 0px 1px 0px;
  4.     padding: 4px 4px 2px 4px;
  5.     border - color: #00BB9E;
  6.     background:none;
  7.     }

结果：

        1. 在ui文件中StyleSheet中添加上述代码，生效；每个页面中的QLineEdit控件都执行；

        2. 使用QSS文件进行添加时，QTabWidget的首页和当前页中的QLineEdit控件不生效。

解决方法：

        》在首页之前添加空白页；

        》设置最后一页为当前页；

        》删除添加的首页； 

结论：

        本文介绍了QTabWidget和QTabBar在进行样式设计时可设置的选项，并给出了几个示例，各位小伙伴可以自行选择！

感谢各位小伙伴的点赞+关注，小易会继续努力分享，一起进步！

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

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

  

闽ICP备14008679号