Unable to draw this kind of tabwidget in .ui?

[mrjj]

Hi and welcome to the forums.

Well you cannot do it directly in Designer, you have to use code.

First, you need to use
https://doc.qt.io//qt-5/qtabbar.html#setTabButton
if you want to add your own tab button so it can show such a little arrow.
QToolButton can show an arrow but not sure you can style it to be just in the corner

Then for the multiple page part.
You could use a QStackedWidget as page instead of the plain Widget.
Then it can have 1 or 2 pages as you wish.

[JoeCFD]

A customized tabbar button is needed here for the layout with text and the little icon.

[aabdn]

@mrjj Thank you so much for your quick response, I am following your instructions.

[aabdn]

@JoeCFD Thank you so much for your quick response, Let me also go with solution you have suggested.

[aabdn]

Now I am able to create it, besides I have a question, I have added 3 pages in QstakedWidget which are being controlled by three push buttons, I want that a button should contain two pages, for example, if i click the button one time it should show page one, if i click the button second time it should show page two and if i click the button again (the third time) it should show page one. It should swipe page one and page two. Please let me know how can i do it. Thanks

[eyllanesc]

@aabdn I have implemented a demo not exactly with your requirement on purpose because I think you should. The demo makes that if the user presses the third tab for what will be the currentab and if he presses the third tab back then he will see that the page will change without changing the tab.

from PyQt5 import QtCore, QtWidgets


class TabWidget(QtWidgets.QTabWidget):
    def __init__(self, parent=None):
        super().__init__(parent)
        self.addTab(
            QtWidgets.QLabel(
                "Page1",
                alignment=QtCore.Qt.AlignCenter,
                styleSheet="background-color: rgb(10, 100, 10)",
            ),
            "Tab1",
        )
        self.addTab(
            QtWidgets.QLabel(
                "Page2",
                alignment=QtCore.Qt.AlignCenter,
                styleSheet="background-color: rgb(100, 100, 10)",
            ),
            "Tab2",
        )

        self.stackedwidget = QtWidgets.QStackedWidget()
        self.page3_1 = QtWidgets.QLabel(
            "Page3_1",
            alignment=QtCore.Qt.AlignCenter,
            styleSheet="background-color: rgb(10, 10, 100)",
        )
        self.page3_2 = QtWidgets.QLabel(
            "Page3_2",
            alignment=QtCore.Qt.AlignCenter,
            styleSheet="background-color: rgb(100, 10, 100)",
        )
        self.stackedwidget.addWidget(self.page3_1)
        self.stackedwidget.addWidget(self.page3_2)
        self.addTab(self.stackedwidget, "Tab3")

        self.addTab(
            QtWidgets.QLabel(
                "Page4",
                alignment=QtCore.Qt.AlignCenter,
                styleSheet="background-color: rgb(100, 100, 100)",
            ),
            "Tab4",
        )

        self.tabBarClicked.connect(self.handle_tabbar_clicked)

    def handle_tabbar_clicked(self, index):
        if index == 2 and self.stackedwidget.isVisible():
            index = (self.stackedwidget.currentIndex() + 1) % self.stackedwidget.count()
            self.stackedwidget.setCurrentIndex(index)


def main():
    import sys

    app = QtWidgets.QApplication(sys.argv)

    w = TabWidget()
    w.resize(640, 480)
    w.show()

    sys.exit(app.exec())


if __name__ == "__main__":
    main()

[aabdn]

@eyllanesc Is is possible if you can share c++ example code, I have created qstakedwidget pages and pushbuttons in mainwindow.ui, It will be a great help.

rightnow, when i press it shows 1st page but i want to set two pages via back and forth clicks (i.e. clicked: page 1, clicked: page 2, clicked: page 1, clicked: page 2,......). can you share an example code which i can write in on_pushButton_clicked()?

[eyllanesc]

@aabdn I'm not going to give you the solution code, I'll only give you hints. bye Bye.

[aabdn]

@eyllanesc Really appreciate for your help, thanks, I was just wondering to see any example related to my case, not exact code.

[eyllanesc]

@aabdn C++ Demo:

#include <QApplication>
#include <QLabel>
#include <QStackedWidget>
#include <QTabWidget>


QLabel *buildLabel(const QString & text, const QColor & color){
    QLabel *label = new QLabel(text);
    label->setAlignment(Qt::AlignCenter);
    label->setStyleSheet(QString("background-color: %1").arg(color.name()));
    return label;
}

class TabWidget: public QTabWidget
{
public:
    TabWidget(QWidget *parent=nullptr):QTabWidget(parent){
        addTab(buildLabel("Page1", QColor(10, 100, 10)), "Tab1");
        addTab(buildLabel("Page2", QColor(10, 100, 10)), "Tab2");

        stackedWidget = new QStackedWidget;
        stackedWidget->addWidget(buildLabel("Page3_1", QColor(10, 10, 10)));
        stackedWidget->addWidget(buildLabel("Page3_2", QColor(100, 10, 100)));
        addTab(stackedWidget, "Tab3");

        addTab(buildLabel("Page4", QColor(100, 100, 100)), "Tab4");

        connect(this, &QTabWidget::tabBarClicked, this, &TabWidget::handleTabbarClicked);
    }
private:
    void handleTabbarClicked(int index){
        if(index == 2 && stackedWidget->isVisible()){
            int new_index = (stackedWidget->currentIndex() + 1) % stackedWidget->count();
            stackedWidget->setCurrentIndex(new_index);
        }
    }
    QStackedWidget *stackedWidget;
};

int main(int argc, char *argv[])
{
    QApplication a(argc, argv);
    TabWidget w;
    w.resize(640, 480);
    w.show();
    return a.exec();
}

In one part you ask for code: can you share an example code which i can write in on_pushButton_clicked() and in the other you say no: any example related to my case, not exact code, that's confusing.

[aabdn]

Thank you for helping me @eyllanesc , solved

[aabdn]

@mrjj @JoeCFD Thank you