Solved Unable to draw this kind of tabwidget in .ui?

[aabdn]

Hello guys,
I have a question to ask, I want to show two pages on single tab, if i press a button to choose a tab, it should show first page and if i press the same tab one more time, it should show other page (I mean two pages on one Qtab), let me share a photo of what i want to create. Please help me in this. thank you.

The small option in the red circle, i dont know how to create tab like this, this tab contains two pages, for one time press show first page, for second time press shows other. I am creating user interface in Qt creator using from.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