Qt GUI Widgets

COS2614 - Programming: Contemporary Concepts · Higher-Level Programming

Qt GUI Widgets

Qt GUI widgets are essential components for building graphical user interfaces (GUIs) in applications. They provide a way for users to interact with programs through visual elements. Understanding how to use these widgets is crucial for creating effective and user-friendly applications.

Key idea: After studying this topic, you should be able to:

  • Identify different types of Qt GUI widgets.
  • Use signals and slots to connect widget actions.
  • Create a simple application using multiple widgets.

Introduction to Qt GUI Widgets

Qt provides a wide variety of widgets that you can use to build your application. Common widgets include buttons, sliders, labels, text boxes, and more. Each widget serves a specific purpose and can be customized to fit your application’s needs.

Common Widgets

  • QPushButton: A clickable button that can trigger actions.
  • QSlider: A slider that allows users to select a value from a range.
  • QLabel: A widget used to display text or images.
  • QTextEdit: A multi-line text box for user input.

Creating a Basic Application

To create a simple application with Qt, you need to set up a main window and add widgets to it. Here is a basic example:

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

int main(int argc, char *argv[]) {
    QApplication app(argc, argv);
    QWidget window;
    QPushButton button("Click Me", &window);
    window.setWindowTitle("My First Qt Application");
    window.resize(300, 200);
    button.resize(100, 30);
    window.show();
    return app.exec();
}

This code creates a basic window with a button. When you run the application, you will see a window with the title "My First Qt Application" and a button labeled "Click Me".

Connecting Signals and Slots

In Qt, you can connect signals and slots to handle events. A signal is emitted when a specific event occurs, such as a button click. A slot is a function that is called in response to a signal. Here is how you can connect a button click signal to a slot:

QObject::connect(&button, &QPushButton::clicked, [&]() {
    qDebug() << "Button was clicked!";
});

In this example, when the button is clicked, a message will be printed to the debug output.

Using QSlider and QLCDNumber

Here is an example of using a QSlider and a QLCDNumber to display a value:

#include <QApplication>
#include <QSlider>
#include <QLCDNumber>
#include <QVBoxLayout>
#include <QWidget>

int main(int argc, char *argv[]) {
    QApplication app(argc, argv);
    QWidget window;
    QVBoxLayout layout(&window);
    QSlider slider(Qt::Horizontal);
    QLCDNumber lcd;
    layout.addWidget(&slider);
    layout.addWidget(&lcd);

    QObject::connect(&slider, &QSlider::valueChanged, &lcd, &QLCDNumber::display);

    window.setWindowTitle("Slider Example");
    window.resize(300, 200);
    window.show();
    return app.exec();
}

This code creates a window with a horizontal slider and an LCD display. As you move the slider, the value displayed in the LCD updates accordingly.

Watch out: Ensure that you connect signals and slots correctly. If you forget to connect them, your application will not respond to user actions.

Customizing Widgets

You can also customize the appearance of widgets. For example, you can change the colour of a QPushButton or the orientation of a QSlider. Here is how to set a vertical orientation for a QSlider:

QSlider slider(Qt::Vertical);
slider.setStyleSheet("background-color: lightblue;");

This sets the slider to be vertical and changes its background colour to light blue.

Creating a More Complex Application

To create a more complex application, you can combine multiple widgets and functionalities. For example, you can create an application with buttons that display random advice or weather information in a QTextEdit when clicked. Here is a brief outline of how this can be done:

  1. Create a main window with four buttons: Advice, Weather, Next Meeting, and Quit.
  2. Connect each button's click signal to the appropriate slot that handles the action.
  3. Use random text generation for the Advice and Weather buttons.
  4. Display a message dialog for the Next Meeting button.
  5. Terminate the application when the Quit button is clicked.

Summary

  • Qt provides a variety of GUI widgets for building applications.
  • Widgets can be connected using signals and slots.
  • You can customize the appearance and behaviour of widgets.

Check your understanding

  • What is the purpose of the QSlider widget?
  • How do you connect a button click to a function in Qt?
  • What happens if you do not connect a signal to a slot?
  • How can you change the colour of a QPushButton?