如何自定义 QTabWidget 选项卡？

Question

The problem is:

Customer panel is derived from QTabWidget and has some tabs with some widget's

in which operator (person) can edit data. When data is changed in any widget

I check it, and i set bold font in QLabel that is "buddy" for this widget. I'm doing this by setting:

QFont fontBold; fontBold.setBold(true); 
widget->setFont(fontBold)

So far so good.

Next I wanted to have tabs in which there is modified and unsaved data to be also marked with bold font. Even when user switches to other tab, and he leaves unsaved data this tab should remain marked with bold font until he comes back and save the data.

That's the problem.

If I set setFont for widget, or QTabBar - all text, or all tabs are marked bold.

In my class that is derived from QTabWidget I have:

QTabBar *tabBar() const { return QTabWidget::tabBar(); }

So I can access the tabBar and for example use setTabTextColor - to mark this tab with different color - that's some kind of solution, but other "buddy"labels are marked with bold font, so tabText should be bold to.

If I use setStyleSheet I can make bold font, but there is also a problem:

this->tabBar()->setStyleSheet("QTabBar::tab { font:bold }");

This sets all tabs with bold text, if I use Pseudo-States like active, selected, etc. - it changes when user switch to other tab, and I need to keep this tab bold until data is saved.

I could use setProperty and then make styleSheet for widget with particular property, but the real problem is, that I can't, or don't know how to access one tab in QTabBar (for example by knowing it's index number)

I have seen, that in QT3 there was QTab* QTabBar::tab(int) which gives access to particular tab, but this is no longer available. I read http://qt.nokia.com/doc/4.5/stylesheet-examples.html and http://qt.nokia.com/doc/4.5/stylesheet-reference.html and I didn't find solution.

How to access particular tab in QTabBar (by its index number) or how to set font:bold with styleSheet for particular tab which preserve bold font when user switches to other tabs?

Thanks in advance.

Answer 1

To perform this task, we must overwrite the paintEvent() method to create a class that inherits QTabBar .

class TabBar: public QTabBar{
    QVector<int> mUnSaved;
public:
    void setUnsaved(int index){
        if(index >= count() || index < 0)
            return;
        mUnSaved << index;
        update();
    }
    void setSaved(int index){
        if(!mUnSaved.contains(index))
            return;
        mUnSaved.remove(mUnSaved.indexOf(index));
        update();
    }
protected:
    void paintEvent(QPaintEvent */*event*/){

        QStylePainter painter(this);
        QStyleOptionTab opt;

        for(int i = 0;i < count();i++)
        {
            initStyleOption(&opt,i);
            painter.save();
            if(mUnSaved.contains(i)){
                painter.setFont(QFont("Times", 10, QFont::Bold));
            }
            painter.drawControl(QStyle::CE_TabBarTabShape, opt);
            painter.drawControl(QStyle::CE_TabBarTabLabel,opt);
            painter.restore();
        }
    }
};

Then we use it in the following example

class TabWidget : public QTabWidget
{
    TabBar *mTabBar;
public:
    TabWidget(QWidget *parent=0):QTabWidget(parent){
        mTabBar = new TabBar;
        setTabBar(mTabBar);
        for(int i=0; i < 5; i++){
            QString text = QString("Tab %1").arg(i);
            addTab(new QLabel(text, this), text);
        }
        mTabBar->setUnsaved(1);
        mTabBar->setUnsaved(3);
        mTabBar->setUnsaved(4);
        mTabBar->setSaved(3);
        mTabBar->setSaved(10);
    }
};

int main(int argc, char *argv[])
{
    QApplication a(argc, argv);
    a.setStyle("fusion");
    TabWidget w;
    w.show();
    return a.exec();
}

Output:

The complete example can be found in the following link