Layouts and Spacers

Grid Layout arranges widgets in a grid of rows and columns. Each widget can span multiple cells.

#include <QApplication>
#include <QWidget>
#include <QGridLayout>
#include <QPushButton>

int main(int argc, char *argv[]) {
    QApplication app(argc, argv);
    QWidget window;
    QGridLayout layout;

    QPushButton btn1("Top Menu");
    btn1.setFixedHeight(40);
    btn1.setSizePolicy(QSizePolicy::Expanding, QSizePolicy::Expanding);

    QPushButton btn2("Sidebar");
    btn2.setFixedWidth(150);
    btn2.setSizePolicy(QSizePolicy::Expanding, QSizePolicy::Expanding);

    QPushButton btn3("Bottom Panel");
    btn3.setFixedHeight(150);
    btn3.setSizePolicy(QSizePolicy::Expanding, QSizePolicy::Expanding);

    QPushButton btn4("Main Content");
    btn4.setSizePolicy(QSizePolicy::Expanding, QSizePolicy::Expanding);

    layout.setContentsMargins(0, 0, 0, 0);
    layout.setSpacing(40);
    layout.addWidget(&btn1, 0, 1);
    layout.addWidget(&btn2, 0, 0, 3, 1);
    layout.addWidget(&btn3, 2, 1);
    layout.addWidget(&btn4, 1, 1);

    window.setLayout(&layout);
    window.resize(600, 400);
    window.show();
    return app.exec();
}

Form Layout aligns labels and input fields in two columns.

#include <QApplication>
#include <QWidget>
#include <QFormLayout>
#include <QLineEdit>

int main(int argc, char *argv[]) {
    QApplication app(argc, argv);
    QWidget form;
    form.setFixedSize(250, 200);
    QFormLayout layout(&form);

    QLineEdit schoolEdit, idEdit, nameEdit;
    layout.addRow("School:", &schoolEdit);
    layout.addRow("Student ID:", &idEdit);
    layout.addRow("Name:", &nameEdit);

    layout.setSpacing(8);
    layout.setRowWrapPolicy(QFormLayout::WrapLongRows);
    layout.setLabelAlignment(Qt::AlignLeft);
    form.setWindowTitle("Student Form");
    form.show();
    return app.exec();
}

Button Widgets

Push Button triggers actions when clicked.

#include <QApplication>
#include <QMainWindow>
#include <QPushButton>

class MainWindow : public QMainWindow {
    Q_OBJECT
public:
    MainWindow() {
        setGeometry(300, 150, 500, 300);
        QPushButton *btn1 = new QPushButton("Yellow BG", this);
        QPushButton *btn2 = new QPushButton("Red BG", this);
        btn1->setGeometry(20, 20, 150, 50);
        btn2->setGeometry(20, 90, 150, 50);

        connect(btn1, &QPushButton::clicked, this, [this]() {
            setStyleSheet("background-color: yellow;");
        });
        connect(btn2, &QPushButton::clicked, this, [this]() {
            setStyleSheet("background-color: red;");
        });
    }
};

int main(int argc, char *argv[]) {
    QApplication app(argc, argv);
    MainWindow win;
    win.show();
    return app.exec();
}

Tool Button combines icons and text, commonly used in toolbars.

QToolBar *toolbar = new QToolBar(this);
QToolButton *helpBtn = new QToolButton();
helpBtn->setIcon(style()->standardIcon(QStyle::SP_MessageBoxQuestion));
helpBtn->setText("Help");
helpBtn->setToolButtonStyle(Qt::ToolButtonTextUnderIcon);
toolbar->addWidget(helpBtn);

Radio Button allows selecting one option from a group.

QRadioButton *opt1 = new QRadioButton("Option A", this);
QRadioButton *opt2 = new QRadioButton("Option B", this);
opt1->setGeometry(20, 20, 150, 40);
opt2->setGeometry(20, 80, 150, 40);
opt1->setChecked(true);

Check Box supports binary or tri-state selection.

QCheckBox *cb = new QCheckBox("Enable Feature", this);
cb->setTristate(true);
cb->setCheckState(Qt::PartiallyChecked);
connect(cb, &QCheckBox::stateChanged, [](int state) {
    // Handle Checked, Unchecked, or PartiallyChecked
});

Command Link Button displays descriptive text below the title.

QCommandLinkButton *clb = new QCommandLinkButton(
    "Visit Website", 
    "Open developer portal in browser", 
    this
);
connect(clb, &QCommandLinkButton::clicked, []() {
    QDesktopServices::openUrl(QUrl("https://example.com"));
});

Dialog Button Box standardizes dialog buttons like OK/Cancel.

QDialogButtonBox *box = new QDialogButtonBox(this);
box->addButton(QDialogButtonBox::Ok);
box->addButton(QDialogButtonBox::Cancel);
connect(box, &QDialogButtonBox::clicked, [](QAbstractButton *btn) {
    if (btn == box->button(QDialogButtonBox::Ok)) {
        qDebug() << "OK pressed";
    }
});

Container Widgets

Group Box groups related controls with a titled frame.

QGroupBox *group = new QGroupBox("Settings");
QVBoxLayout *vbox = new QVBoxLayout;
vbox->addWidget(new QRadioButton("High"));
vbox->addWidget(new QRadioButton("Medium"));
vbox->addWidget(new QRadioButton("Low"));
group->setLayout(vbox);
group->setCheckable(true); // Entire group can be enabled/disabled

Scroll Area enables scrolling for oversized content.

QLabel *imageLabel = new QLabel;
imageLabel->setPixmap(QPixmap(":/images/chart.png"));
imageLabel->setScaledContents(true);

QScrollArea *scroll = new QScrollArea;
scroll->setWidget(imageLabel);
scroll->setWidgetResizable(true);

Tab Widget organizes content into tabs.

QTabWidget *tabs = new QTabWidget;
QWidget *tab1 = new QWidget;
// Add widgets to tab1...
tabs->addTab(tab1, "General");
tabs->addTab(new QWidget, "Advanced");

Frame provides visual borders around content.

QFrame *frame = new QFrame;
frame->setFrameShape(QFrame::Box);
frame->setFrameShadow(QFrame::Sunken);
frame->setLineWidth(2);

Dock Widget creates detachable panels in main windows.

QDockWidget *dock = new QDockWidget("Tools", this);
QComboBox *combo = new QComboBox;
combo->addItems({"Draft", "Final", "Archive"});
dock->setWidget(combo);
addDockWidget(Qt::RightDockWidgetArea, dock);

Item Views (Model/View Architecture)

List View displays data from a model (e.g., QStringListModel).

QStringList items = {"Item 1", "Item 2", "Item 3"};
QStringListModel *model = new QStringListModel(items);
QListView *view = new QListView;
view->setModel(model);

Tree View shows hierarchical data using QStandardItemModel.

QStandardItemModel *model = new QStandardItemModel;
QStandardItem *root = new QStandardItem("Root");
root->appendRow(new QStandardItem("Child"));
model->appendRow(root);
ui->treeView->setModel(model);

Table View presents tabular data with sorting support.

QStandardItemModel *model = new QStandardItemModel(2, 3);
model->setHorizontalHeaderLabels({"ID", "Name", "Score"});
model->setItem(0, 0, new QStandardItem("101"));
// ... populate data
ui->tableView->setModel(model);
ui->tableView->setEditTriggers(QAbstractItemView::NoEditTriggers);

Item Widgets (Convenience Classes)

List Widget simplifies list management without models.

ui->listWidget->addItem("First Item");
ui->listWidget->addItems({"Second", "Third"});

Tree Widget builds trees directly via QTreeWidgetItem.

QTreeWidgetItem *root = new QTreeWidgetItem(ui->treeWidget);
root->setText(0, "Department");
QTreeWidgetItem *child = new QTreeWidgetItem(root);
child->setText(0, "Team Alpha");

Table Widget handles tables with built-in item management.

ui->tableWidget->setRowCount(3);
ui->tableWidget->setColumnCount(2);
ui->tableWidget->setHorizontalHeaderLabels({"Code", "Value"});
ui->tableWidget->setItem(0, 0, new QTableWidgetItem("A1"));

Input Widgets

Combo Box offers dropdown selection lists.

QComboBox *combo = new QComboBox;
combo->addItems({"Jan", "Feb", "Mar"});
connect(combo, &QComboBox::currentTextChanged, [](const QString &text) {
    qDebug() << "Selected:" << text;
});

Font Combo Box lists available system fonts.

QFontComboBox *fontCombo = new QFontComboBox;
connect(fontCombo, &QFontComboBox::currentFontChanged, 
        label, &QLabel::setFont);

Line Edit captures single-line text input.

QLineEdit *edit = new QLineEdit;
QPushButton *btn = new QPushButton("Submit");
connect(btn, &QPushButton::clicked, [=]() {
    qDebug() << "Input:" << edit->text();
    edit->clear();
});

Plain Text Edit handles multi-line plain text.

QPlainTextEdit *editor = new QPlainTextEdit;
editor->setPlainText("Initial content...");
editor->setReadOnly(true); // Controlled by a checkbox

Spin Box retsricts numeric input to a range.

QSpinBox *spin = new QSpinBox;
spin->setRange(0, 100);
spin->setSuffix("%");
connect(spin, &QSpinBox::valueChanged, 
        window, &QWidget::setWindowOpacity);

Date/Time Editors provide specialized input for temporal values.

QDateTimeEdit *dtEdit = new QDateTimeEdit(QDateTime::currentDateTime());
QDateEdit *dEdit = new QDateEdit(QDate::currentDate());
QTimeEdit *tEdit = new QTimeEdit(QTime::currentTime());

Scroll Bar offers manual control over scrolling ranges.

QScrollBar *hbar = new QScrollBar(Qt::Horizontal);
QScrollBar *vbar = new QScrollBar(Qt::Vertical);

Key Sequence Edit captures keyboard shortcuts.

QKeySequenceEdit *keyEdit = new QKeySequenceEdit;
connect(keyEdit, &QKeySequenceEdit::keySequenceChanged, [](const QKeySequence &seq) {
    if (seq == QKeySequence("Ctrl+Q")) QApplication::quit();
});

Display Widgets

Label shows text, images, or rich content.

QLabel *label = new QLabel;
label->setPixmap(QPixmap("logo.png"));
label->setScaledContents(true);

Text Browser renders rich text or loads HTML files.

QTextBrowser *browser = new QTextBrowser;
browser->setSource(QUrl("file:///help.html"));

Progress Bar visualizes task completion.

QProgressBar *progress = new QProgressBar;
progress->setRange(0, 1000);
// Simulate work
for (int i = 0; i <= 1000; ++i) {
    progress->setValue(i);
    qApp->processEvents(); // Keep UI responsive
}

LCD Number displays numbers in a digital style.

QLCDNumber *lcd = new QLCDNumber;
QTimer *timer = new QTimer;
int counter = 0;
connect(timer, &QTimer::timeout, [&]() {
    lcd->display(++counter);
});
timer->start(1000);