美化QTabWidget

美化QTabWidget

1.效果展示

2.用法展示

MainWindow::MainWindow(QWidget *parent) :
    QMainWindow(parent),
    ui(new Ui::MainWindow)
{
    ui->setupUi(this);
    setupUI();
    ui->tabWidget->addTab2(new QWidget(), tr("this is first tab"));
}

MainWindow::~MainWindow()
{
    delete ui;
}

void MainWindow::setupUI()
{
    connect(ui->tabWidget, SIGNAL(TabInserted(int)), this, SLOT(OnTabInserted(int)));
    connect(ui->tabWidget, SIGNAL(AddBtnClicked()), this, SLOT(OnAddBtnClicked()));
    connect(ui->tabWidget, SIGNAL(TabClosed(int)), this, SLOT(OnCloseTab(int)));
}

void MainWindow::OnTabInserted(int index)
{
    QPushButton *button = new QPushButton();
    button->setFixedSize(this->iconSize());
    button->setStyleSheet("border-image: url(:/images/x-capture-options.png);");
    ui->tabWidget->setTabButton2(index, QTabBar::LeftSide, button);

    button = new QPushButton();
    button->setStyleSheet("QPushButton{border-image: url(:/images/close.png)}"
                          "QPushButton:hover{border-image: url(:/images/close_hover.png)}");
    ui->tabWidget->setTabButton2(index, QTabBar::RightSide, button);
}

void MainWindow::OnTabClosed(int index)
{
    //todo something
}

void MainWindow::OnAddBtnClicked()
{
    ui->tabWidget->addTab2(new QWidget(), tr("this is first tab"));
}

3.原理简介

主要原理就是对paintEvent重写，以及QProxyStyle继承重新实现。我也是翻了很多资料，看了实现的源码才知道的。

• QExtTabBarStyle继承自QProxyStyle

void QExtTabBarStyle::drawPrimitive(PrimitiveElement pe, 
                const QStyleOption *option, 
                QPainter *painter,
                const QWidget *widget) const
{
    if (pe == QStyle::PE_IndicatorArrowLeft) {
        drawArrow(pe, option, painter, widget);
    } else if (pe == QStyle::PE_IndicatorArrowRight) {
        drawArrow(pe, option, painter, widget);
    } else{
        QProxyStyle::drawPrimitive(pe, option, painter, widget);
    }
}

int QExtTabBarStyle::pixelMetric(PixelMetric metric, 
            const QStyleOption *option, 
            const QWidget *widget) const
{
    if (PM_TabBarScrollButtonWidth == metric) {
        return 30;
    } else {
        return QProxyStyle::pixelMetric(metric, option, widget);
    }
}

QRect QExtTabBarStyle::subElementRect(SubElement element, 
                                        const QStyleOption *option, 
                                        const QWidget *widget) const
{
    if (SE_TabBarTabLeftButton == element) {
        return calcIconRect(true, option);
    } else if (SE_TabBarTabRightButton == element) {
        return calcIconRect(false, option);
    } else {
        return QProxyStyle::subElementRect(element, option, widget);
    }
}

QRect QExtTabBarStyle::calcIconRect(bool left, const QStyleOption *option) const
{
    const QStyleOptionTab *tab_option = qstyleoption_cast<const QStyleOptionTab *>(option);
    QSize icon_size = tab_option->iconSize;
    const QRect tab_rect = tab_option->rect;
    QPoint center_pos;
    QRect button_rect;
    const int icon_padding = 8;
    if (left) {
        center_pos = QPoint(icon_padding+icon_size.width()/2+tab_rect.x(), 
                            tab_rect.y()+(tab_rect.height()-icon_size.height())/2+icon_size.height()/2);
    } else {
        center_pos = QPoint(tab_rect.x()+tab_rect.width()-icon_padding-icon_size.width()/2, 
                                tab_rect.y()+(tab_rect.height()-icon_size.height())/2+icon_size.height()/2);
    }
    button_rect = QRect(QPoint(0, 0), icon_size);
    button_rect.moveCenter(center_pos);
    return button_rect;
}

void QExtTabBarStyle::drawArrow(PrimitiveElement pe, const QStyleOption *option, 
                                QPainter *painter,
                                const QWidget *widget) const
{
    const QToolButton *tool_btn = static_cast<const QToolButton *>(widget);
    if (nullptr != tool_btn && !tool_btn->isVisible()) 
        return;
    painter->save();
    const QStyleOptionTab *tab_option = qstyleoption_cast<const QStyleOptionTab *>(option);
    QBrush rect_brush;
    if (!tool_btn->isEnabled()) {
        rect_brush = Qt::transparent;
    } else if (tool_btn->underMouse()) {
        rect_brush = QColor(214, 214, 214);
    } else {
        rect_brush = Qt::transparent;
    }
    QRect draw_rect = QRect(0, 0, 16, 16);
    draw_rect.moveCenter(option->rect.center());
    RoundShadowHelper round_helper;
    round_helper.FillRoundShadow(painter, option->rect,rect_brush.color(), 4);
    painter->restore();
    QProxyStyle::drawPrimitive(pe, option, painter, widget);
}

• QTabBar中的paintEvent重写

void QtExtTabBar::paintEvent(QPaintEvent *event)
{
    QPainter painter(this);
    drawTab(&painter);
    if (tab_add_button_.draw_plus_btn_)
        drawPlusBtn(&painter);
}

void QtExtTabBar::drawTab(QPainter *painter)
{
    RoundShadowHelper helper(6,4);
    int border = helper.GetShadowWidth()/2.0;
    painter->save();
    int tab_count = tab_add_button_.draw_plus_btn_ ? count()-1 : count();
    QStyleOptionTabV3 option;
    for (int index = 0; index < tab_count; index++) {
        QRect rect = tabRect(index);
        initStyleOption(&option, index);
        // draw background 
        QRect draw_rect = QRect(QPoint(rect.x()+border, rect.y() + border), QSize(rect.width()-border*2, rect.height()-border*2));
        drawTabBg(painter, helper, option, draw_rect, rect);
        drawTabText(painter, draw_rect, option);
    }
    painter->restore();
}

void QtExtTabBar::drawTabText(QPainter *painter, const QRect &draw_rect, const QStyleOptionTabV3 &option)
{
    // draw text
    QColor text_color = tb_text_color_.Normal_;
    QRect text_rect = draw_rect.marginsAdded(margins_);
    if (QStyle::State_Selected & option.state) {
        text_color = tb_text_color_.Selected_;
    } else if (QStyle::State_MouseOver & option.state) {
        text_color = tb_text_color_.Hover_;
    }
    painter->setPen(text_color);
    QString text = fontMetrics().elidedText(option.text, Qt::ElideRight, text_rect.width(), 0); 
    painter->drawText(text_rect, Qt::AlignLeft | Qt::AlignVCenter, text);
}

void QtExtTabBar::drawTabBg(QPainter *painter, RoundShadowHelper &helper, 
                            const QStyleOptionTabV3 &option, QRect draw_rect, QRect real_rect)
{
    painter->setPen(Qt::NoPen);
    if(QStyle::State_Selected & option.state) {
        helper.RoundShadow(painter, real_rect);
        helper.FillRoundShadow(painter, draw_rect, tb_bg_color_.Selected_, helper.GetRadius());
    } else if(QStyle::State_MouseOver & option.state) {
        helper.FillRoundShadow(painter, draw_rect, tb_bg_color_.Hover_, helper.GetRadius());
    }
}

void QtExtTabBar::drawPlusBtn(QPainter *painter)
{
    painter->save();
    int last_index = count()-1;
    QStyleOptionTabV3 option;
    initStyleOption(&option, last_index);
    QRect draw_rect = QRect(QPoint(0, 0), tab_add_button_.tab_add_btn_size_);
    draw_rect.moveCenter(tabRect(last_index).center());
    DrawCircle::Draw(painter, draw_rect, tab_btn_add_color_);
    DrawCharacter::DrawPlus(painter, draw_rect);
    painter->restore();
}

4.属性设置

• 可以自定义tab中的左右button。

• 可以自定义tab中文字的颜色。

• 可以设置是否需要绘制“+”按钮。

其他的都可以在代码中找到

5.todo list

• 不支持tab拖拽
• 不支持tab, tab button 贴图。

关注微信公众号，获取源码。