QTabBar进阶用法:修改标题宽度，使标题宽度自适应窗体宽度,close图标大小设置，close图标修改，文字对齐方式修改

news2024/11/18 11:31:59

这是一个没有处理过的QTabWidget, 在功能上已经满足使用了，但是有时会有一些外观上特殊的需求，需要对它进行修改。

1. 更改标签的长度。

可以用样式表改：

setStyleSheet("QTabBar::tab{height:50;width:200}");"QTabBar::tab{height:50;width:200}");

然后就变成了这样，为了直观先忽略审美...

1.1 动态修改标题长度

上面的改法适合固定长度的标题设置，如果是动态修改呢?比如，我想让两个标题的长度相等，加起来正好等于窗体宽度（也就是各占一半宽度）。

也就是实现上面的效果，

方法1是：

在resizeEvent中添加代码：

void MainWindow::resizeEvent(QResizeEvent *event)
{
    QMainWindow::resizeEvent(event);
    setStyleSheet(QString("QTabBar::tab{height:50;width:%1}").arg(ui->tabWidget->width()/2)); //1
}

在事件过滤器里也要添加，否则程序启动时，初始状态的大小不正确。

bool MainWindow::eventFilter(QObject *obj, QEvent *event)
{
    if (obj == ui->tabWidget)
    {
        if (event->type() == QEvent::Resize)
        {
            setStyleSheet(QString("QTabBar::tab{height:50;width:%1}").arg(ui->tabWidget->width()/2)); //1
        }
    }
    return QMainWindow::eventFilter(obj, event);
}

别忘了用之前添加

ui→tabWidget→installEventFilter(this);

上面的 setStyleSheet(QString("QTabBar::tab{height:50;width:%1}").arg(ui→tabWidget→width()/2));

可以改成

ui->tabWidget->tabBar()->setFixedWidth(ui->tabWidget->width());

也具有相同的效果。

方法2与方法1类似：

重写QTabWidget,在resizeEvent()函数中加入设置宽度

void MyTabWidget::resizeEvent(QResizeEvent *event)
{
    this->tabBar()->setFixedWidth(this->width());
    QTabWidget::resizeEvent(event);
}

方法3

网上看到的方法是重写QTabBar，然后设置tabSizeHint()函数来实现。同时也需要重写QTabWidget,因为设置QTabBar的函数是protected的。

class CustomTabBar: public QTabBar {
public:
    explicit CustomTabBar(QWidget *parent):QTabBar(parent),myParent(parent)
    {
    }
protected:
    virtual QSize tabSizeHint (int index) const override
    {
        QSize s(QTabBar::tabSizeHint(index));
        s.setWidth(myParent->width() / count());
        return(s);
    }
private:
    QWidget *myParent;
};

这种方法对于固定大小的窗体好用，如果动态变化QTabWidget的宽度，变窄时好用，变宽时有时不好用。没有上一种方法简便。

方法4

重写QTabWidget,然后在resizeEvent里设置tabbar的宽度，实际上是第一个方法的变种。

void MyTabWidget::resizeEvent(QResizeEvent *event)
{
    QTabWidget::resizeEvent(event);
    this->tabBar()->setFixedWidth(event->size().width());
}

或
void MyTabWidget::resizeEvent(QResizeEvent *event)
{
    QTabWidget::resizeEvent(event);
    this->tabBar()->setFixedWidth(width());
}

2.关闭图标修改

更改图标，可以直接使用样式表更改（方法a）

setStyleSheet(QString("QTabBar::close-button {image: url(://close.svg);}QTabBar::close-button:hover{image: url(://close.svg);}"));

或者使用setTabButton()函数添加新的QPushButton或者QLabel,在上面设置图标(方法b)。

this->tabBar()->setTabButton(0, QTabBar::RightSide, new QPushButton(QIcon(QPixmap(QString("://close.svg"))), QString("")));

QLabel *closeLabel = new QLabel();
closeLabel->setPixmap(QPixmap(QString("://close.svg")));
this->tabBar()->setTabButton(1, QTabBar::RightSide, closeLabel);

但是这样的缺点是需要自己添加点击处理函数，否则点击关闭图标时，不会发出tabCloseRequested()信号。

3. 调整图标

设置好图像后，发现这个图标的大小不是我想要的，想调整一下，首先想到的办法使用样式表，但是

QTabBar::close-button {image: url(://close.svg);width: 56;height 56;}
无效。

上网搜了许多也搜到结果，自己总结了如下两个方法：
如果是方法a修改的图标，可以这样批量修改图标，也可单独修改。

for (int i=0; i< ui->tabWidget->count(); ++i)
    {
        ui->tabWidget->tabBar()->tabButton(i, QTabBar::RightSide)->setFixedSize(QSize(56,56));
    }

如果是方法b修改的图标，可以在设置时就指定图标的大小，

    QPushButton *closeBtn = new QPushButton();
    closeBtn->setIconSize(QSize(64, 64));
    closeBtn->setFlat(true);
    QPixmap pixmap(QString("://close.svg"));
    closeBtn->setIcon(QIcon(pixmap.scaled(64, 64)));
    this->tabBar()->setTabButton(0, QTabBar::RightSide, closeBtn);
    QLabel *closeLabel = new QLabel();
    closeLabel->setPixmap(QPixmap(QString("://close.svg")));
    closeLabel->setScaledContents(true);
    closeLabel->resize(64, 64);
    this->tabBar()->setTabButton(1, QTabBar::RightSide, closeLabel);

方法a修改tab 2, 方法b修改tab 0, tab1。感觉还是方法a好一点。

4.文字对齐方式

现在图标设置好了，发现标签字的对其方式不是我们想要的。默认是居中显示，我们想要居右显示。
具体方式请参考这篇文章，稍微做一点改动
https://blog.csdn.net/u013015629/article/details/106147045

class CustomTabStyle : public QProxyStyle
{
public:
    CustomTabStyle(QStyle *style = nullptr):QProxyStyle(style)
    {}
    void drawItemText(QPainter* painter, const QRect& rectangle, int alignment,
                                      const QPalette& palette, bool enabled, const QString& text,
                                      QPalette::ColorRole textRole ) const
    {
        alignment = Qt::AlignRight | Qt::AlignVCenter;
        QCommonStyle::drawItemText(painter, rectangle,
                                   alignment,
                                   palette,
                                   enabled,
                                   text,
                                   textRole );
    }
};

CustomTabStyle *myStyle = new CustomTabStyle();
tabBar()->setStyle(myStyle);