This example will show how to use check boxes and radio buttons on the pages of a Tab Widget. The layout of a tab page may contain any number of controls and the number of pages is unlimited.
class MainWindow : public QWidget
{
public:
MainWindow();
};
The class declaration for MainWindow does not need to declare any data members.
MainWindow::MainWindow()
{
setMinimumSize(600, 350);
QTabWidget *tabWidget = new QTabWidget();
QWidget *tab1 = new QWidget();
tabWidget->addTab(tab1, "Sandwich");
QRadioButton *rb1_t1 = new QRadioButton{"Rye Bread"};
QRadioButton *rb2_t1 = new QRadioButton{"Sourdough"};
QRadioButton *rb3_t1 = new QRadioButton{"Whole Wheat"};
QCheckBox *cb1_t1 = new QCheckBox{"Chicken"};
QCheckBox *cb2_t1 = new QCheckBox{"Mushroom"};
QCheckBox *cb3_t1 = new QCheckBox{"Pastrami"};
QCheckBox *cb4_t1 = new QCheckBox{"Roast Turkey"};
QCheckBox *cb5_t1 = new QCheckBox{"Avocado"};
QCheckBox *cb6_t1 = new QCheckBox{"Grilled Onions"};
QCheckBox *cb7_t1 = new QCheckBox{"Tomatoes"};
QCheckBox *cb8_t1 = new QCheckBox{"Pickles"};
QCheckBox *cb9_t1 = new QCheckBox{"Gouda"};
QCheckBox *cb10_t1 = new QCheckBox{"Provolone"};
QCheckBox *cb11_t1 = new QCheckBox{"Swiss Cheese"};
QGridLayout *layout_t1 = new QGridLayout(tab1);
layout_t1->setContentsMargins(20, 20, 20, 15);
layout_t1->addWidget(rb1_t1, 0, 0);
layout_t1->addWidget(rb2_t1, 1, 0);
layout_t1->addWidget(rb3_t1, 2, 0);
layout_t1->addWidget(cb1_t1, 0, 1);
layout_t1->addWidget(cb2_t1, 1, 1);
layout_t1->addWidget(cb3_t1, 2, 1);
layout_t1->addWidget(cb4_t1, 3, 1);
layout_t1->addWidget(cb5_t1, 0, 2);
layout_t1->addWidget(cb6_t1, 1, 2);
layout_t1->addWidget(cb7_t1, 2, 2);
layout_t1->addWidget(cb8_t1, 3, 2);
layout_t1->addWidget(cb9_t1, 0, 3);
layout_t1->addWidget(cb10_t1, 1, 3);
layout_t1->addWidget(cb11_t1, 2, 3);
layout_t1->addItem(new QSpacerItem(0, 0,
QSizePolicy::Expanding, QSizePolicy::Expanding),
4, 0, 1, 4);
//
QWidget *tab2 = new QWidget();
tabWidget->addTab(tab2, "Salad");
QRadioButton *rb1_t2 = new QRadioButton{"Carrot Salad"};
QRadioButton *rb2_t2 = new QRadioButton{"Mixed Greens"};
QRadioButton *rb3_t2 = new QRadioButton{"Pasta Primavera"};
QRadioButton *rb4_t2 = new QRadioButton{"Potato Salad"};
QRadioButton *rb5_t2 = new QRadioButton{"Tabbouleh"};
QVBoxLayout *layout_t2 = new QVBoxLayout(tab2);
layout_t2->setContentsMargins(20, 20, 20, 15);
layout_t2->addWidget(rb1_t2);
layout_t2->addWidget(rb2_t2);
layout_t2->addWidget(rb3_t2);
layout_t2->addWidget(rb4_t2);
layout_t2->addWidget(rb5_t2);
layout_t2->addStretch();
//
QWidget *tab3 = new QWidget();
tabWidget->addTab(tab3, "Dessert");
QRadioButton *rb1_t3 = new QRadioButton{"Cheesecake"};
QRadioButton *rb2_t3 = new QRadioButton{"Lemon Bar"};
QRadioButton *rb3_t3 = new QRadioButton{"Tiramisu"};
QRadioButton *rb4_t3 = new QRadioButton{"Chocolate Chip"};
QRadioButton *rb5_t3 = new QRadioButton{"Oatmeal Raisin"};
QGroupBox *gb_d1 = new QGroupBox{"Dessert"};
QVBoxLayout *layout_d1 = new QVBoxLayout(gb_d1);
layout_d1->addWidget(rb1_t3);
layout_d1->addWidget(rb2_t3);
layout_d1->addWidget(rb3_t3);
QGroupBox *gb_d2 = new QGroupBox{"Cookie"};
QVBoxLayout *layout_d2 = new QVBoxLayout(gb_d2);
layout_d2->addWidget(rb4_t3);
layout_d2->addWidget(rb5_t3);
layout_d2->addStretch();
QGridLayout *layout_t3 = new QGridLayout(tab3);
layout_t3->setContentsMargins(20, 20, 20, 15);
layout_t3->addWidget(gb_d1, 0, 0);
layout_t3->addWidget(gb_d2, 0, 1);
layout_t3->addItem(new QSpacerItem(0, 0,
QSizePolicy::Expanding, QSizePolicy::Expanding),
1, 0, 1, 2);
//
QPushButton *pb_1 = new QPushButton();
pb_1->setText("Close");
QHBoxLayout *layout = new QHBoxLayout();
layout->addStretch();
layout->addWidget(pb_1);
layout->addStretch();
QVBoxLayout *layoutMain = new QVBoxLayout(this);
layoutMain->setContentsMargins(45, 35, 45, 15);
layoutMain->addWidget(tabWidget);
layoutMain->addSpacing(15);
layoutMain->addLayout(layout);
connect(pb_1, &QPushButton::clicked,
this, &QWidget::close);
}
The QTabWidget class is used to create a new tab widget control. Three pages are created as shown on lines 7, 54, and 74. After creating tab1 then you need to add this page to the tabWidget, this is done by calling the method addTab(). The title for the tab is passed for the second parameter as shown on line 8.
Lines 10 through 26 create radio buttons and check box widgets and then lines 31 through 47 add these controls to the page using a Grid layout. Using the radio buttons allows the user to select only one kind of bread for their sandwich. The check box controls allow the user to select any number of items like chicken and pastrami, avocado, grilled onions and swiss cheese.
Line 49 was added to define how the vertical spacing should be consumed. It makes sense to have the extra space appear after the radio buttons and check boxes and not between them. As an experiment, comment out this line of code and see how the controls are adjusted to consume the vertical space on the tab page.
On Tab 2 users can only select one salad. For tab 3 we have enhanced the code so users can select two desserts. This is pretty interesting since both tabs are using radio buttons and normally only one radio button can be selected on a given window. So how did we set this up so the user can select two different radio buttons at the same time on tab 3?
This is accomplished by placing the desserts in two different QGroupBox controls. Now the user can select a single radio button from each group box. The group boxes are created on lines 83 and 89. The first three radio button objects are added to a new vertical layout created on line 84. The parent of this layout is the key to how all this works. Looking at line 84, the parent of the layout is the group box we just created. These three desserts belong to (are children of) this group box.
The purpose of the call to addStretch() on line 93 is to adjust the vertical spacing in the second group box so the radio buttons align. Try taking this line of code out to see the effect.
Now we repeat the process to put the two cookies in a group box. These two radio controls are added to layout_d2 which has a parent of gb_d2. A new Grid layout is created on line 95 and then both group box controls are added to this outer layout as shown on lines 98 and 99. The Spacer control on line 100 is used to consume the extra vertical spacing so it appears below the group boxes.
Main Function
Since the source code for main() has not changed there is no need to show it again. Refer to example 3 or download the full source for this example.
Running the Example
To build and run this example use the same CMake build file and commands as we showed for the first example. The only suggested modification is on line 2 of the CMakeLists.txt file, change “example_1” to “example_19”.