[Practical dry goods] How to start programming with Qt Widgets? (three)

Qt  is currently the most advanced and complete cross-platform C++ development tool. It not only fully realizes one-time writing, but also runs on all platforms indiscriminately, and provides almost all tools needed in the development process. Today, Qt has been used in more than 70 industries, thousands of enterprises, supporting millions of devices and applications.

In this article, we learn the basics of Qt by implementing a simple Notepad application using C++ and the Qt Widgets module, a small text editor that allows you to create text files, save, print or reopen and edit it here, you can also set the font to use.

In the above ( click here to review >> ), we introduced the generation of the main source file and how to start designing the user interface. This article will introduce the specific steps of designing the user interface in detail.

Click to get Qt Widget component download (Q technology exchange: 166830288)

design a user interface

Using Qt Designer (Designer)

The wizard creates an application that uses a QMainWindow with its own layout where you can add a menu bar, dock widget, toolbar and status bar . The central area can be occupied by any type of widget, and the wizard puts the Notepad widget there.

 Add widgets in Qt Designer :

1. In Qt Creator edit mode, double-click Notepad to launch the file in the integrated Qt Designer.
2. Drag and drop the widget text editor ( QTextEdit ) into the form.
3. Press Ctrl+A (or Cmd+A) to select the widget, then click Lay out Vertically (or press Ctrl+L) to apply a vertical layout ( QVBoxLayout ).
4. Press Ctrl+S (or Cmd+S) to save changes.

The UI now looks like the following Qt Designer:

You can view the generated XML file in a code editor:

<?xml version="1.0" encoding="UTF-8"?>
<ui version="4.0">
<class>Notepad</class>
<widget class="QMainWindow" name="Notepad">
<property name="geometry">
<rect>
<x>0</x>
<y>0</y>
<width>800</width>
<height>400</height>
</rect>
</property>
<property name="windowTitle">
<string>Notepad</string>
</property>
<widget class="QWidget" name="centralWidget">
<layout class="QVBoxLayout" name="verticalLayout">
<item>
<widget class="QTextEdit" name="textEdit"/>
</item>
</layout>
</widget>
<widget class="QMenuBar" name="menuBar">
...

The following line contains the XML declaration, which specifies the XML version and character encoding used in the document:

<?xml version="1.0" encoding="UTF-8"?>

The rest of the file specifies a UI element that defines a Notepad widget:

<ui version="4.0">

The UI file is used along with the Notepad class header and source files, we'll look at the rest of the UI file in a later section.

Notepad Header file

The wizard generated a header file for the Notepad class, which contains the necessary #includes, constructors, destructors, and UI objects. The file looks like this:

#include <QMainWindow>

QT_BEGIN_NAMESPACE
namespace Ui {
class Notepad;
}
QT_END_NAMESPACE

class Notepad : public QMainWindow
{
Q_OBJECT

public:
explicit Notepad(QWidget *parent = nullptr);
~Notepad();

private:
Ui::Notepad *ui;
QString currentFile;
};

The following line includes QMainWindow , which provides a main application window:

The following lines declare the Notepad class in the UI namespace, which is the standard namespace for UI classes generated by the uic tool from .ui files:

namespace Ui {
class Notepad;
}

The class declaration contains the Q_OBJECT macro, which must appear first in the class definition, and declares the class as QObject . Of course it must also inherit from QObject, which adds some functionality to an ordinary c++ class. It is worth noting that the class name and slot name can be queried at runtime, and the parameter type of the slot can be queried and called.

class Notepad : public QMainWindow
{
Q_OBJECT

The following lines declare a constructor that has a default argument parent, with a value of 0 indicating that the widget has no parent (it is a top-level widget).

public:
explicit Notepad(QWidget *parent = nullptr);

The following line declares a virtual destructor to release resources acquired by the object during its lifetime. According to C++ naming conventions, the destructor has the same name as its associated class, prefixed with a tilde (~). In QObject, destructors are virtual to ensure that derived class destructors are called correctly when an object is deleted through a pointer to the base class.

~Notepad();

The following lines declare a member variable that is a pointer to the Notepad UI class. Member variables are associated with a particular class and are accessible to all of its methods.

private:
Ui::Notepad *ui;
QString currentFile;
};

Notepad source file

The source file generated by the wizard for the Notepad class looks like this:

#include "notepad.h"
#include "ui_notepad.h"

Notepad::Notepad(QWidget *parent) :
QMainWindow(parent),
ui(new Ui::Notepad)
{
ui->setupUi(this);

}

The following lines include the Notepad class header file generated by the wizard and the UI header file generated by the UI tool:

#include "notepad.h"
#include "ui_notepad.h"

The following line defines the Notepad constructor:

Notepad::Notepad(QWidget *parent) :

The following line calls the QMainWindow constructor, which is the base class of the Notepad class:

QMainWindow(parent),

The following line of code creates an instance of the UI class and assigns it to a UI member:

ui(new Ui::Notepad)

The following line sets up the UI:

{
ui->setupUi(this);

In the destructor, delete the UI:

Notepad::~Notepad()
{
delete ui;
}

project files

The wizard generates the following project file CMakeLists.txt for us:

# Copyright (C) 2022 The Qt Company Ltd.
# SPDX-License-Identifier: BSD-3-Clause

cmake_minimum_required(VERSION 3.16)
project(notepad LANGUAGES CXX)

if(NOT DEFINED INSTALL_EXAMPLESDIR)
set(INSTALL_EXAMPLESDIR "examples")
endif()

set(INSTALL_EXAMPLEDIR "${INSTALL_EXAMPLESDIR}/widgets/tutorials/notepad")

find_package(Qt6
REQUIRED COMPONENTS Core Gui Widgets
OPTIONAL_COMPONENTS PrintSupport
)

qt_standard_project_setup()

qt_add_executable(notepad
main.cpp
notepad.cpp notepad.h notepad.ui
)

set_target_properties(notepad PROPERTIES
WIN32_EXECUTABLE TRUE
MACOSX_BUNDLE TRUE
)

target_link_libraries(notepad PRIVATE
Qt6::Core
Qt6::Gui
Qt6::Widgets
)

if(TARGET Qt6::PrintSupport)
target_link_libraries(notepad PRIVATE Qt6::PrintSupport)
endif()

# Resources:
set(notepad_resource_files
"images/bold.png"
"images/copy.png"
"images/create.png"
"images/cut.png"
"images/edit_redo.png"
"images/edit_undo.png"
"images/exit.png"
"images/font.png"
"images/info.png"
"images/italic.png"
"images/new.png"
"images/open.png"
"images/paste.png"
"images/pencil.png"
"images/print.png"
"images/save.png"
"images/save_as.png"
"images/underline.png"
)

qt_add_resources(notepad "notepad"
PREFIX
"/"
FILES
${notepad_resource_files}
)

install(TARGETS notepad
RUNTIME DESTINATION "${INSTALL_EXAMPLEDIR}"
BUNDLE DESTINATION "${INSTALL_EXAMPLEDIR}"
LIBRARY DESTINATION "${INSTALL_EXAMPLEDIR}"
)

The project file specifies the source files, header files, and UI files included in the project.