[提问]如何实现自定义样式的teb bar [复制链接]

举个例子就是类似酷狗这样的

图片:未命名.jpg

还有很多其他的tab样式 比如每个tab之前是有空间的
而不是QTabWidget那样紧紧挨着


请问怎么实现这么个效果呢？

因为很多地方需要tab widget 但是QTabWidget实在是不能满足要求
确实相当的单调  即使是配合 stylesheet 也改变不了外形的总体样式

希望高人指点

你图片显示的样式我还不清楚怎么弄 但tab之间的空间可以通过stylesheet来实现 参考这个min-width

http://www.qtcn.org/bbs/apps.php?q=diary&a=detail&did=341&uid=108698
这个帖子可能有帮助。

恩，，我试了下
大概的意思就是这样的  具体的调节的话 估计还得设置一些样式

图片:未命名.jpg

谢谢

谢谢，，调节了这个  但是貌似它只能设置宽度  但是总是紧紧挨着的

不过 我想 其实我发的那个图的效果也是紧紧挨着的  只不过多了弧度

但是这种的

图片:未命名.jpg

可能是自己实现的吧

你这样尝试下 我昨天试过 是能调节选项卡之间的距离的
#tabWidget QTabBar::tab{
    ......
    min-width: 5em;
    ......
}

修改下margin应该可以实现

QTabBar::tab {
color: rgb(84,2,119);
border: 2px solid rgb(68,66,64);
border-top-left-radius: 20px;
border-top-right-radius: 20px;
max-height: 40px;
min-width: 5em;
padding: 2px;
}

QTabWidget::tab-bar {
alignment: left;
}
QTabBar::tab:!selected {
margin-top: 2px;
}
QTabBar::tab:selected {
color: rgb(255,0,128);
}

确实不行  我不知道我是不是少设置东西了

恩，，谢谢  设置了 margin  确实可以了
QTabBar::tab:!selected {
margin-top: 8px;
margin-left: 8px;
margin-right: 8px;
}

图片:未命名.jpg

http://doc.qt.nokia.com/stable/stylesheet-examples.html

完整的效果

QTabBar::tab {
color: rgb(84,2,119);
border: 1px solid rgb(68,66,64);
border-top-left-radius: 4px;
border-top-right-radius: 4px;
max-height: 40px;
min-width: 30ex;
padding: 2px;
}

QTabWidget::tab-bar {
alignment: left;
}
QTabBar::tab:!selected {
margin-top: 4px;
margin-left: 4px;
margin-right: 4px;
}
QTabBar::tab:selected {
color: rgb(255,0,128);
}