Qt4 Widgets

In this part of the Qt4 C++ programming tutorial, we will talk about the Qt4 widgets.

Widgets are basic building blocks of a GUI application. Qt4 library has a rich set of various widgets.

QLabel

The QLabel widget is used to display text and image. No user interaction is available. The following example will display text.

label.h
#ifndef LABEL_H
#define LABEL_H

#include <QWidget>
#include <QApplication>
#include <QLabel>

class Label : public QWidget
{
  public:
    Label(QWidget *parent = 0);

  private:
    QLabel *label;

};

#endif

This is a header file for our code example.

label.cpp
#include "label.h"
#include <QVBoxLayout>
#include <QFont>


Label::Label(QWidget *parent)
    : QWidget(parent)
{

  QString lyrics = "Who doesn't long for someone to hold\n\
Who knows how to love you without being told\n\
Somebody tell me why I'm on my own\n\
If there's a soulmate for everyone\n\
\n\
Here we are again, circles never end\n\
How do I find the perfect fit\n\
There's enough for everyone\n\
But I'm still waiting in line\n\
\n\
Who doesn't long for someone to hold\n\
Who knows how to love you without being told\n\
Somebody tell me why I'm on my own\n\
If there's a soulmate for everyone";

  label = new QLabel(lyrics, this);
  label->setFont(QFont("Purisa", 10));

  QVBoxLayout *vbox = new QVBoxLayout();
  vbox->addWidget(label);
  setLayout(vbox);

}

We use QLabel widget to display lyrics in a window.

 label = new QLabel(lyrics, this);
 label->setFont(QFont("Purisa", 10));

We create a label widget and set a specific font for it.

main.cpp
#include "label.h"
#include <QTextStream>
#include <QDesktopWidget>

void center(QWidget &widget)
{
  int x, y;
  int screenWidth;
  int screenHeight;
  int width, height;
  QSize windowSize;

  QDesktopWidget *desktop = QApplication::desktop();

  width = widget.frameGeometry().width();
  height = widget.frameGeometry().height();

  screenWidth = desktop->width();
  screenHeight = desktop->height();
 
  x = (screenWidth - width) / 2;
  y = (screenHeight - height) / 2;

  widget.move( x, y );

}


int main(int argc, char *argv[])
{
  QApplication app(argc, argv);  

  Label window;

  window.setWindowTitle("QSlider");
  window.show();
  center(window);

  return app.exec();
}

The main file.

QSlider

QSlider is a widget that has a simple handle. This handle can be pulled back and forth. This way we are choosing a value for a specific task.

slider.h
#ifndef SLIDER_H
#define SLIDER_H

#include <QWidget>
#include <QApplication>
#include <QSlider>
#include <QLabel>

class Slider : public QWidget
{
  Q_OBJECT

  public:
    Slider(QWidget *parent = 0);

  private:
    QSlider *slider; 
    QLabel *label;

};

#endif

The header file for the example.

slider.cpp
#include "slider.h"
#include <QDesktopWidget>

void center(QWidget *widget, int w, int h)
{
  int x, y;
  int screenWidth;
  int screenHeight;

  QDesktopWidget *desktop = QApplication::desktop();

  screenWidth = desktop->width();
  screenHeight = desktop->height();
 
  x = (screenWidth - w) / 2;
  y = (screenHeight - h) / 2;

  widget->move( x, y );
}


Slider::Slider(QWidget *parent)
    : QWidget(parent)
{
  int WIDTH = 300;
  int HEIGHT = 140;

  resize(WIDTH, HEIGHT);

  slider = new QSlider(Qt::Horizontal , this);
  slider->setGeometry(50, 50, 130, 30);


  label = new QLabel("0", this);
  label->setGeometry(230, 50, 20, 30);

  connect(slider, SIGNAL(valueChanged(int)), label, SLOT(setNum(int)));

  center(this, WIDTH, HEIGHT);

}

We display two widgets. A slider and a label. The slider will control the number displayed in the label.

 connect(slider, SIGNAL(valueChanged(int)), label, SLOT(setNum(int)));

In this example, we connect the valueChanged() signal to the predefined setNum() slot.

main.cpp
#include "slider.h"

int main(int argc, char *argv[])
{
  QApplication app(argc, argv);  

  Slider window;

  window.setWindowTitle("QSlider");
  window.show();

  return app.exec();
}

Main file.

QSpinBox

QSpinbox is a widget that is used to handle integers and discrete sets of values.

In our code example, we will have one spinbox widget. We can choose numbers 0..99. The currently chosen value is displayed on the titlebar of the window.

spinbox.h
#ifndef SPINBOX_H
#define SPINBOX_H

#include <QWidget>
#include <QApplication>
#include <QSpinBox>

class SpinBox : public QWidget
{
  Q_OBJECT

  public:
    SpinBox(QWidget *parent = 0);

  private slots:
    void setTitle(int);

  private:
    QSpinBox *spinbox;

};

#endif

The header file for the spinbox example.

spinbox.cpp
#include "spinbox.h"

SpinBox::SpinBox(QWidget *parent)
    : QWidget(parent)
{
  spinbox = new QSpinBox(this);
  spinbox->setGeometry(50, 50, 60, 30);

  connect(spinbox, SIGNAL(valueChanged(int)), 
      this, SLOT(setTitle(int)));

}

void SpinBox::setTitle(int val) 
{
  setWindowTitle(QString::number(val));
}

We place a spinbox on the window. And connect the valueChanged() signal to the setTitle() method.

void SpinBox::setTitle(int val) 
{
  setWindowTitle(QString::number(val));
}

The method will set a window title to the current number, chosen with the spinbox.

main.cpp
#include "spinbox.h"
#include <QDesktopWidget>

void center(QWidget &widget)
{
  int x, y;
  int screenWidth;
  int screenHeight;

  int WIDTH = 250;
  int HEIGHT = 170;
  

  QDesktopWidget *desktop = QApplication::desktop();

  screenWidth = desktop->width();
  screenHeight = desktop->height();
 
  x = (screenWidth - WIDTH) / 2;
  y = (screenHeight - HEIGHT) / 2;

  widget.setGeometry(x, y, WIDTH, HEIGHT);

}


int main(int argc, char *argv[])
{
  QApplication app(argc, argv);

  SpinBox window;

  window.setWindowTitle("0");
  window.show();
  center(window);

  return app.exec();
}

Main file.

QLineEdit

QLineEdit is a widget that allows to enter and edit a single line of plain text. There are undo/redo, cut/paste and drag & drop functions available for QLineEdit widget.

In our example, we show three labels and three line edits.

ledit.h
#ifndef LEDIT_H
#define LEDIT_H

#include <QWidget>

class Ledit : public QWidget
{
  public:
    Ledit(QWidget *parent = 0);

};

#endif

The header file for the example.

ledit.cpp
#include "ledit.h"
#include <QGridLayout>
#include <QLabel>
#include <QLineEdit>

Ledit::Ledit(QWidget *parent)
    : QWidget(parent)
{

  QLabel *name = new QLabel("Name:", this);
  QLabel *age = new QLabel("Age:", this);
  QLabel *occupation = new QLabel("Occupation:", this);

  QLineEdit *le1 = new QLineEdit(this);
  QLineEdit *le2 = new QLineEdit(this);
  QLineEdit *le3 = new QLineEdit(this);

  QGridLayout *grid = new QGridLayout(); 

  grid->addWidget(name, 0, 0);
  grid->addWidget(le1, 0, 1);
  grid->addWidget(age, 1, 0);
  grid->addWidget(le2, 1, 1);
  grid->addWidget(occupation, 2, 0);
  grid->addWidget(le3, 2, 1);

  setLayout(grid);
}

We display three labels and three line edits. These widgets are organized with the QGridLayout manager.

main.cpp
#include "ledit.h"
#include <QDesktopWidget>
#include <QApplication>

void center(QWidget &widget)
{
  int x, y;
  int screenWidth;
  int screenHeight;

  int WIDTH = 250;
  int HEIGHT = 170;
  

  QDesktopWidget *desktop = QApplication::desktop();

  screenWidth = desktop->width();
  screenHeight = desktop->height();
 
  x = (screenWidth - WIDTH) / 2;
  y = (screenHeight - HEIGHT) / 2;

  widget.setGeometry(x, y, WIDTH, HEIGHT);

}


int main(int argc, char *argv[])
{
  QApplication app(argc, argv);  

  Ledit window;

  window.setWindowTitle("QLineEdit");
  window.show();
  center(window);

  return app.exec();
}

Main file.

Statusbar

A statusbar is a panel, that is used to display status information about the application.

In our example, we have two buttons and a statusbar. Each of the buttons shows a message, if we click on them. The statusbar widget is part of the QMainWindow widget.

statusbar.h
#ifndef STATUSBAR_H
#define STATUSBAR_H

#include <QMainWindow>
#include <QPushButton>

class Statusbar : public QMainWindow
{
  Q_OBJECT  

  public:
    Statusbar(QWidget *parent = 0);

  private slots:
    void OnOkPressed();
    void OnApplyPressed();

  private:
    QPushButton *ok;
    QPushButton *apply;

};

#endif

The header file for the example.

statusbar.cpp
#include "statusbar.h"
#include <QGridLayout>
#include <QLabel>
#include <QFrame>
#include <QStatusBar>

Statusbar::Statusbar(QWidget *parent)
    : QMainWindow(parent)
{

  QFrame *frame = new QFrame(this);
  setCentralWidget(frame);

  ok = new QPushButton("OK", frame);
  ok->move(20, 50);

  apply = new QPushButton("Apply", frame);
  apply->move(120, 50);

  statusBar();

  connect(ok, SIGNAL(clicked()), this, SLOT(OnOkPressed()));
  connect(apply, SIGNAL(clicked()), this, SLOT(OnApplyPressed()));
}

void Statusbar::OnOkPressed()
{
  statusBar()->showMessage("OK button pressed", 2000);
}

void Statusbar::OnApplyPressed()
{
 statusBar()->showMessage("Apply button pressed", 2000);
}

 QFrame *frame = new QFrame(this);
 setCentralWidget(frame);

The QFrame widget is put into the center area of the QMainWindow widget.

 ok = new QPushButton("OK", frame);
 ok->move(20, 50);

 apply = new QPushButton("Apply", frame);
 apply->move(120, 50);

We create and position two button widgets.

 statusBar();

To display a statusbar widget, we call the statusBar() method of the QMainWindow widget.

void Statusbar::OnOkPressed()
{
  statusBar()->showMessage("OK button pressed", 2000);
}

The showMessage() method shows the message on the statusbar.

main.cpp
#include "statusbar.h"
#include <QDesktopWidget>
#include <QApplication>

void center(QWidget &widget)
{
  int x, y;
  int screenWidth;
  int screenHeight;

  int WIDTH = 250;
  int HEIGHT = 170;
  

  QDesktopWidget *desktop = QApplication::desktop();

  screenWidth = desktop->width();
  screenHeight = desktop->height();
 
  x = (screenWidth - WIDTH) / 2;
  y = (screenHeight - HEIGHT) / 2;

  widget.setGeometry(x, y, WIDTH, HEIGHT);

}


int main(int argc, char *argv[])
{
  QApplication app(argc, argv);  

  Statusbar window;

  window.setWindowTitle("QStatusBar");
  window.show();
  center(window);

  return app.exec();
}

Main file.

Home ‡ Contents ‡ Top of Page