QTabWidget添加自定义样式

一、参考文章:http://bbs.csdn.net/topics/390632657?page=1



setStyleSheet("QTabWidget::pane{border-width:1px;border-color:rgb(48, 104, 151);\
                                    border-style: outset;background-color: rgb(132, 171, 208);\
                                    background: transparent;} \
QTabWidget::tab-bar{border-width:0px;}\
QTabBar::tab{border-bottom-color: #C2C7CB;\
             border-top-left-radius: 0px;\
             border-top-right-radius: 0px;\
             max-width: 75px; min-width:75px; min-height:25px;\
             font:14px Times New Roman;\
                 padding: 0px;\
                 }\
QTabBar::scroller {\
                   width:25;\
                       border:0;\
                           padding: 0px;\
                           }\
QTabBar QToolButton::right-arrow {\
                                  background-color:rgb(132, 171, 208);\
                                  border-width: 0;\
                                  background-image: url(:/images/tab/rightbtn.png);\
                              }\
QTabBar QToolButton::right-arrow:hover {\
                                        background-color:rgb(132, 171, 208);\
                                        border-width: 0;\
                                        background-image: url(:/images/tab/hoverrightbtn.png);\
                                    }\
QTabBar QToolButton::right-arrow:disabled {\
                                        background-color:rgb(132, 171, 208);\
                                        border-width: 0;\
                                        background-image: url(:/images/tab/grayrightbtn.png);\
                                    }\
QTabBar QToolButton::left-arrow {\
                                 background-color:rgb(132, 171, 208);\
                                 border-width: 0;\
                                 background-image: url(:/images/tab/leftbtn.png);\
                             }\
QTabBar QToolButton::left-arrow:hover {\
                                       background-color:rgb(132, 171, 208);\
                                       border-width: 0;\
                                       background-image: url(:/images/tab/hoverleftbtn.png);\
                                   }\
QTabBar QToolButton::left-arrow:disabled {\
                                       background-color:rgb(132, 171, 208);\
                                       border-width: 0;\
                                       background-image: url(:/images/tab/grayleftbtn.png);\
                                   }\
QTabBar::tab:first:selected {\
                             margin-left: 30; margin-right: 0;\
                             color: white;\
                                 border-image: url(:/images/tab/sel3.png);\
                             }\
QTabBar::tab:first:!selected {\
                              color: black;\
                                  margin-left: 30; margin-right: 0;\
                                  border-image: url(:/images/tab/normal3.png);\
                              }\
QTabBar::tab:first:hover:!selected {\
                                    color: black;\
                                        margin-left: 30; margin-right: 0;\
                                        border-image: url(:/images/tab/hover3.png);\
                                    }\
QTabBar::tab:middle:selected {\
                              margin-top: 0; margin-left: -15; margin-right: 8;\
                              color: white;\
                                  border-image: url(:/images/tab/sel3.png);\
                              }\
QTabBar::tab:middle:!selected {\
                               color: black;\
                                   margin-top: 0; margin-left: -15; margin-right: 8;\
                                   border-image: url(:/images/tab/normal3.png);\
                               }\
QTabBar::tab:middle:hover:!selected {\
                                     color: black;\
                                         margin-top: 0; margin-left: -15; margin-right: 8;\
                                         border-image: url(:/images/tab/hover3.png);\
                                     }\
QTabBar::tab:last:selected {\
                            margin-top: 0px; margin-left: 0; margin-right: 0;\
                            color: white;\
                                border-image: url();\
                            }\
QTabBar::tab:last:!selected {\
                             color: black;\
                                 margin-top: 0; margin-left: 0; margin-right: 0;\
                                 border-image: url();\
                             }\
QTabBar::tab:last:hover:!selected {\
                                   color: black;\
                                       margin-top: 0; margin-left: 0; margin-right: 0;\
                                       border-image: url();\
                                   }\
QTabBar::tab:only-one {\
                       margin: 0;\
                       }");
tab标签的长度,也需要重载QTabBar来动态计算。

二、设置QTabwidget的TabBar的样式1

QString tabBarStyle = "QTabBar::tab {min-width:100px;color: white;background-color:qlineargradient(x1:0, y1:0, x2:0, y2:1, stop: 0 #eeeeee, stop: 1 gray);border: 2px solid;border-top-left-radius: 10px;border-top-right-radius: 10px;padding:5px;}\
QTabBar::tab:!selected {margin-top: 5px;} \
QTabBar::tab:selected {color: blue;}";
m_TabWidget->setStyleSheet(tabBarStyle);

三、设置QTabwidget的TabBar的样式2

QTabWidget::pane{
	border:none;
}
QTabWidget::tab-bar{
        alignment:left;
}
QTabBar::tab{
	background:transparent;
	color:white;
	min-width:30ex;
	min-height:10ex;
}
QTabBar::tab:hover{
	background:rgb(255, 255, 255, 100);
}
QTabBar::tab:selected{
	border-color: white;
	background:white;
	color:green;
}

### 回答1: 可能是因为您的自定义样式没有正确应用到TabWidget上。请确保您已经正确地设置了TabWidget样式,可以参考以下代码: ``` QTabWidget::tab-bar { alignment: center; } QTabBar::tab { height: 30px; width: 150px; background-color: #F0F0F0; border: 2px solid #CFCFCF; border-top-left-radius: 4px; border-top-right-radius: 4px; } QTabBar::tab:selected { background-color: #FFFFFF; border-bottom-color: #FFFFFF; } QTabBar::tab:!selected { margin-top: 2px; } ``` 请注意,这只是一个示例样式,您需要根据您的实际需求进行修改。如果您仍然无法解决问题,请提供更多细节,例如代码片段或截图,以便更好地帮助您解决问题。 ### 回答2: 在Qt的TabWidget添加自定义样式时,有几个可能的原因导致样式不显示。 首先,可能是因为样式表的语法错误。请确保您的样式表中没有拼写错误、语法错误或其他错误。可以通过在样式表中添加最基本的样式来验证,然后逐步添加更多样式以确定是否出现错误。 其次,可能是因为样式表的优先级不正确。确保您的自定义样式表是在TabWidget中最后设置的,这样它的优先级会最高,确保样式能够应用到TabWidget上。 另外,还可能是因为样式被其他样式或属性覆盖了。请检查您的样式表中是否存在其他设置了相同属性的样式。如果有,可以使用!important关键字来覆盖。 最后,有可能是Qt的默认样式被重新设置或者覆盖了。在某些情况下,可能需要通过设置Qt的默认样式来确保自定义样式能够正确显示。可以通过设置setStyle()函数来重新设置Qt样式,可以尝试不同的样式来查看是否能解决问题。 总之,要解决TabWidget自定义样式不显示的问题,需要仔细检查样式表的语法、优先级和可能的覆盖情况。如果问题仍然存在,可能需要尝试不同的解决方案或者搜索相关的Qt文档和社区帖子以获取更多的帮助。 ### 回答3: 在Qt的TabWidget添加自定义样式时,有几个常见的原因会导致样式不显示。 1. 样式表语法错误:在编写样式表时,可能会因为语法错误而导致样式无法显示。请确保样式表的写法正确,包括选择器、属性和值的书写方式。 2. 样式被其他样式覆盖:如果在TabWidget中同时应用了多个样式表,可能会导致样式冲突,使得自定义样式不生效。可以尝试通过调整样式表的加载顺序,或者使用更具体的选择器来解决样式冲突的问题。 3. 样式属性不适用于TabWidget:有些样式属性只适用于特定的控件,可能不适用于TabWidget。请查阅Qt的官方文档,确保所使用的样式属性在TabWidget中是可用的。 如果以上几点排查后仍然无法解决问题,可以尝试以下几种方法: 1. 使用QTabBar设置样式QTabWidget内部使用了QTabBar来管理选项卡,可以尝试通过设置QTabBar的样式来达到类似的效果。 2. 重新编译Qt源码:有些样式属性可能需要在Qt的源码中手动设置,如果遇到特殊的样式需求,可以尝试重新编译Qt源码,并在其中添加相应的样式。 3. 使用QSS代替样式表:有时候,使用Qt Style Sheet(QSS)比样式表更加方便和灵活。QSS是一种专门用于Qt应用程序的样式定义语言,可以通过给控件设置objectName,然后在QSS中使用选择器来定制样式。 综上所述,如果在Qt的TabWidget添加自定义样式不显示,首先要检查样式表语法是否正确,是否存在样式冲突,并确保所使用的样式属性适用于TabWidget。如果问题仍然存在,可以尝试使用QTabBar设置样式,重新编译Qt源码或者使用QSS代替样式表。
评论 5
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

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

余额充值