在垂直选项卡问题上设置选项卡关闭按钮位置答案

【问题标题】：Set tab close button position on vertical tabs issue在垂直选项卡问题上设置选项卡关闭按钮位置
【发布时间】：2021-08-04 11:21:33
【问题描述】：

我想更改默认选项卡小部件关闭按钮并设置我的图标。问题是它在文本上绘制图标。我想把 X 画到右边。

代码：

void AppTabBar::paintEvent(QPaintEvent *event)
{
    QStylePainter painter(this);
    QStyleOptionTab opt;

    for (int i = 0; i < this->count(); i++) {
        initStyleOption(&opt, i);
        opt.text = painter.fontMetrics().elidedText(opt.text, Qt::ElideRight, 70);
        painter.drawControl(QStyle::CE_TabBarTabShape, opt);
        painter.save();
        QSize s = opt.rect.size();

        if (tabPos != AppTabPosition::Top && tabPos != AppTabPosition::Bottom) {
            s.transpose();
        }

        QRect r(QPoint(), s);
        r.moveCenter(opt.rect.center());
        opt.rect = r;

        QPoint c = tabRect(i).center();
        painter.translate(c);

        if (tabPos == AppTabPosition::Left) {
            painter.rotate(90);
        } else if (tabPos == AppTabPosition::Right) {
            painter.rotate(270); //90 - left pos, 270 - right pos
        }

        painter.translate(-c);
        painter.drawControl(QStyle::CE_TabBarTabLabel, opt);
        painter.restore();
    }

    QWidget::paintEvent(event);
}


void AppTabStyle::drawPrimitive(QStyle::PrimitiveElement element, const QStyleOption *option, QPainter *painter, const QWidget *widget) const
{
    if (element == PE_IndicatorTabClose) {
        int size = proxy()->pixelMetric(QStyle::PM_SmallIconSize);
        QIcon::Mode mode = option->state & State_Enabled ? (option->state & State_Raised ? QIcon::Active : QIcon::Normal) : QIcon::Disabled;

        if (!(option->state & State_Raised) && !(option->state & State_Sunken) && !(option->state & QStyle::State_Selected)) {
            mode = QIcon::Disabled;
        }

        QIcon::State state = option->state & State_Sunken ? QIcon::On : QIcon::Off;
        QPixmap pixmap = QIcon(":/Icons/cross_icon.png").pixmap(size, mode, state);
        proxy()->drawItemPixmap(painter, option->rect, Qt::AlignRight, pixmap);
    } else {
        QProxyStyle::drawPrimitive(element, option, painter, widget);
    }
}

截图：

此问题仅出现在垂直选项卡上（AppTabPosition::Left 或 AppTabPosition::Right）。任何想法如何将其绘制到右侧？

已编辑 (15.05.2021)： 我设置了setTabsClosable(false);，然后创建了TabBarLabel 类并将其设置为setTabButton 方法。它关闭了选项卡，但重叠选项卡文本的问题仍然存在：

截图：

代码很多，所以我创建并上传到Mega 测试示例来说明这个问题。这是我的测试示例：TabExample.zip (6kb)

任何想法如何改变标签栏关闭按钮的位置？谢谢。

谢谢。

【问题讨论】：

标签： c++ windows qt

【解决方案1】：

终于！我已经解决了垂直标签关闭按钮位置的问题。

代码：

if (tabPos != AppTabPosition::Top && tabPos != AppTabPosition::Bottom) {
    s.transpose();

    if (this->tabsClosable()) { // check if tab is closable
        QRect optRect = opt.rect;
        optRect.setX(90); // set X pos of close button
        optRect.setY(optRect.y() + 8); // calcs the Y pos of close button
        optRect.setSize(QSize(12, 12));
        this->tabButton(i, QTabBar::RightSide)->setGeometry(optRect);
   }
}

这里我没有更改默认的opt.rect，而是将其复制到新的QRect。然后我改变optRect 的大小和位置，最后将几何设置为tabButtton。

截图：

问题已解决。

【讨论】：