赞
踩
在设计一个界面时要用到类似于word纽带风格的部件,想到了TabWidget部件,如图,每个tab页可以和一个widget相连,通过设置样式可以达到很多效果,新建的一个tabwidget的默认样式是这样的:
现在,我想要把Tab1和Tab2放在左边或者右边,可以在属性框里进行设置:
如图,只要把tabPosition的属性改一下就可以了,改到你想要的位置,这时候如果有文字,文字的显示并不是竖排的,可以设置一下tab里的text的文字属性,具体语句可以查看一下帮助文档,也可以贴图,这里我直接通过设置Stylesheet样式表,直接重绘了一下tab标签页的样式,应用在tabBar上统一实现的,最后的效果如下图:
其中的文字,例如“标签页X“是直接在tab属性里输入的,没有贴图;点击之后的按键效果是贴图;背景的边框直接在MainWindow中设置一下背景即可,尺寸最好不要差太多,要不然会发生拉伸或者压缩导致背景不是你预想的效果。
- //绘制一个你自己想要的风格,用法可以查帮助文档,很详细
- class CustomTabStyle : public QProxyStyle
- {
- public:
- //将原来的tab转置,重新绘制,实现到左右旁边,还可以在tabPosition中再次设置
- QSize sizeFromContents(ContentsType type, const QStyleOption *option,
- const QSize &size, const QWidget *widget) const
- {
- QSize t = QProxyStyle::sizeFromContents(type, option, size, widget);
- if (type == QStyle::CT_TabBarTab) {
- t.transpose();
- t.rwidth() = 90; // 设置每个tabBar中item的大小
- t.rheight() = 100;
- }
- return t;
- }
- /*
- 这个函数主要是用painter函数对样式进行绘制,包括颜色画tab框的笔属性setPen()、
- 画背景颜色的;
- setBrush()、设置背景的drawpixmap()以及tab中文本的属性,根据自己的要求设置即可。
- */
- void drawControl(ControlElement element, const QStyleOption *option,\
- QPainter *painter, const QWidget *widget) const
- {...}
- ui->tabWidget->setTabPosition(QTabWidget::East);//设置tabbar位置,这里我设置在右边
- ui->tabWidget->tabBar()->setStyle(new CustomTabStyle);//使用我们自定义的style样式
Copyright © 2003-2013 www.wpsshop.cn 版权所有,并保留所有权利。