Bootstrap

QTabWidget的QTabBar位于左侧且横向

参考这篇文章:

(1条消息) QTabWidget 竖向 QTabBar横向_qtabwidget竖向表头_Harbin Kakashi的博客-CSDN博客

(这里纯纯记录学习一下,建议大家跳转到链接处学习) 

(ps:后来发现可以使用QListWidget和QStackedWidget组合使用来达到类似的效果。)

 先使用 tab->setTabPosition(QTabWidget::West);

调整QTabBar位置到左边

目标效果:                                                                       原始效果:

主要就是使用自定义样式重置QTabBar的样式

tab->tabBar()->setStyle(new CustomTabStyle);

类的继承关系:QStyle--->QCommonStyle--->QProxyStyle--->CustomTabStyle

里面有两个函数:

(1)函数决定控件大小。

QSize sizeFromContents(ContentsType type, const QStyleOption *option, const QSize &contentsSize, const QWidget *widget = Q_NULLPTR) const

1.1:翻转控件的宽和高

    QSize sizeFromContents(ContentsType type, const QStyleOption *option,
        const QSize &size, const QWidget *widget) const
    {
        QSize s = QProxyStyle::sizeFromContents(type, option, size, widget);
        if (type == QStyle::CT_TabBarTab) {
            s.transpose();//transpose:互换位置
        }
        return s;
    }

 1.2自定义控件大小

    QSize sizeFromContents(ContentsType type, const QStyleOption *option,
        const QSize &size, const QWidget *widget) const
    {
        QSize s = QProxyStyle::sizeFromContents(type, option, size, widget);
        if (type == QStyle::CT_TabBarTab) {
//            s.transpose();//transpose:互换位置
            s.rwidth() = 150; // 设置每个tabBar中item的大小
            s.rheight() = 50;
        }
        return s;
    }

 

 (2)自绘控件

void drawControl(ControlElement element, const QStyleOption *option, QPainter *painter, const QWidget *widget = Q_NULLPTR) const

你可以自己使用QPainter绘制出自己的风格。

他依此画出被选中时,悬浮时,平时三种状态下的方框。

    void drawControl(ControlElement element, const QStyleOption *option, QPainter *painter, const QWidget *widget) const
    {
        if (element == CE_TabBarTabLabel) {
            if (const QStyleOptionTab *tab = qstyleoption_cast<const QStyleOptionTab *>(option)) {
                QRect allRect = tab->rect;
                allRect.setWidth(allRect.width() - 5);
                allRect.setHeight(allRect.height() - 2);
                //选中状态
                if (tab->state & QStyle::State_Selected) {
                    //save用以保存坐标,restore用来退出状态
                    painter->save();
                    painter->setBrush(QBrush(0x004ea1));
                    //带有弧线矩形
                    painter->drawRoundedRect(tab->rect, 8, 8);
                    painter->restore();
                }
                //hover状态
                else if(tab->state & QStyle::State_MouseOver){
                    painter->save();
                    painter->setBrush(QBrush(0x004ea1));
                    painter->drawRoundedRect(allRect, 8, 8);
                    painter->restore();
                }
                else{
                    painter->save();
                    painter->setBrush(QBrush(0x78aadc));
                    painter->drawRoundedRect(allRect, 8, 8);
                    painter->restore();
                }
                painter->save();
                QTextOption option;//option:选择
                option.setAlignment(Qt::AlignCenter);
                painter->setFont(QFont("楷体", 18, QFont::Bold));
                painter->setPen(0xffffff);
                painter->drawText(allRect, tab->text, option);
                painter->restore();
                return;
            }
        }
        if (element == CE_TabBarTab) {
            QProxyStyle::drawControl(element, option, painter, widget);
        }
    }

感想:

1.感觉到Qt框架的厉害之处,有很多需要学习的地方。

2.感谢博主的分享。

;