Chapter IV. Graphical User Interface QT
Chapter IV. Graphical User Interface QT
Hà Nội, 2022 1
Chapter IV. Graphical User Interface
1. What is QT?
2. QT Framework
3. QT in Visual Studio
4. Qt5 C++ GUI Development
2
Chapter IV. Graphical User Interface
1. What is QT?
2. QT Framework
3. QT in Visual Studio
4. Qt5 C++ GUI Development
3
What is QT?
4
Chapter IV. Graphical User Interface
1. What is QT?
2. QT Framework
3. QT in Visual Studio
4. Qt5 C++ GUI Development
5
QT Framework
6
QT Framework
Multithreading support
Network connectivity
Advanced GUI development
7
QT Framework
8
Qt Framework – Application Classes
9
QT Creator – Development tools
10
Widgets
11
Widgets
12
Signals & Slots
Slots
Slots are the functions which are assigned to handle a signal.
Widgets contain a list of predefined slots.
You can subclass a widget and add your own slots
13
Running Supplied Demo Applications
There are over 300 demo and example applications supplied in the SDK.
They come from the QT SDK
Wide variety of applications. The same application from QT Demo.
Use QT Creator to pull in the project and build and run it on the target.
14
Chapter IV. Graphical User Interface
1. What is QT?
2. QT Framework
3. QT in Visual Studio
4. Qt5 C++ GUI Development
15
QT in Visual Studio
16
QT in Visual Studio
17
QT in Visual Studio
18
QT in Visual Studio
19
QT in Visual Studio
20
Chapter IV. Graphical User Interface
1. What is QT?
2. QT Framework
3. QT in Visual Studio
4. Qt5 C++ GUI Development
21
Qt5 C++ GUI Development
22
Qt5 C++ GUI Development
https://codeloop.org/qt5-c-first-gui-application/ 23
Qt5 C++ GUI Development
https://codeloop.org/qt5-c-first-gui-application/ 24
Qt5 C++ GUI Development
https://codeloop.org/qt5-c-first-gui-application/ 25
Qt5 C++ GUI Development
https://codeloop.org/qt5-c-first-gui-application/ 26
Qt5 C++ GUI Development
https://codeloop.org/qt5-c-first-gui-application/ 27
Qt5 C++ GUI Development
https://codeloop.org/qt5-c-first-gui-application/ 28
Qt5 C++ GUI Development
https://codeloop.org/qt5-c-signal-and-slots-introduction/ 29
Qt5 C++ GUI Development
https://codeloop.org/qt5-c-signal-and-slots-introduction/ 30
Qt5 C++ GUI Development
https://codeloop.org/qt5-c-signal-and-slots-introduction/ 31
Qt5 C++ GUI Development
Layout Management
All QWidget subclasses can use layouts to manage their children. The
QWidget::setLayout() function applies a layout to a widget.
When a layout is set on a widget in this way, it takes charge of the following tasks:
Positioning of child widgets
Sensible default sizes for windows
Resize handling
https://codeloop.org/qt5-layout-management-introduction/ 32
Qt5 C++ GUI Development
Layout Management
The built-in layout managers: QHBoxLayout, QVBoxLayout, QGridLayout, and
QFormLayout
QGridLayout
https://codeloop.org/qt5-layout-management-introduction/ 33
Qt5 C++ GUI Development
https://codeloop.org/qt5-style-sheets-introduction-and-example/ 34
Qt5 C++ GUI Development
selector declaration
https://codeloop.org/qt5-style-sheets-introduction-and-example/ 35
Qt5 C++ GUI Development
https://codeloop.org/qt5-style-sheets-introduction-and-example/ 36
Qt5 C++ GUI Development
https://codeloop.org/qt5-style-sheets-introduction-and-example/ 37
Qt5 C++ GUI Development
QPushButton
The most commonly used widget in any graphical user interface
A push button emits the signal clicked() when it is activated by the mouse, the
Spacebar or by a keyboard shortcut.
Push buttons also provide less commonly used signals, for example pressed() and
released().
https://codeloop.org/qt5-qpushbutton-with-signal-and-slots/ 38
Qt5 C++ GUI Development
QPushButton
Example
https://codeloop.org/qt5-qpushbutton-with-signal-and-slots/ 39
Qt5 C++ GUI Development
QPushButton
Example
https://codeloop.org/qt5-qpushbutton-with-signal-and-slots/ 40
Qt5 C++ GUI Development
QPushButton
Example
mainwindow.cpp
https://codeloop.org/qt5-qpushbutton-with-signal-and-slots/ 41
Qt5 C++ GUI Development
QPushButton
Example
https://codeloop.org/qt5-qpushbutton-with-signal-and-slots/ 42
Qt5 C++ GUI Development
QCheckBox
A QCheckBox is an option button that can be switched on (checked) or off (unchecked).
Signal: stateChanged()
Slot: isChecked()
https://codeloop.org/how-to-create-qcheckbox-in-qt5-gui/ 43
Qt5 C++ GUI Development
QCheckBox
Example
mainwindow.ui
https://codeloop.org/how-to-create-qcheckbox-in-qt5-gui/ 44
Qt5 C++ GUI Development
QCheckBox
Example
mainwindow.cpp
https://codeloop.org/how-to-create-qcheckbox-in-qt5-gui/ 45
Qt5 C++ GUI Development
QCheckBox
Example
mainwindow.cpp
https://codeloop.org/how-to-create-qcheckbox-in-qt5-gui/ 46
Qt5 C++ GUI Development
QCheckBox
Example
https://codeloop.org/how-to-create-qcheckbox-in-qt5-gui/ 47
Qt5 C++ GUI Development
QRadioButton
A QRadioButton is an option button that can be switched on (checked) or off
(unchecked).
Radio buttons typically present the user with a “one of many” choice.
Example
https://codeloop.org/qt5-gui-how-to-create-qradiobutton/ 48
Qt5 C++ GUI Development
QRadioButton
Example
https://codeloop.org/qt5-gui-how-to-create-qradiobutton/ 49
Qt5 C++ GUI Development
QRadioButton
Example
https://codeloop.org/qt5-gui-how-to-create-qradiobutton/ 50
Qt5 C++ GUI Development
QRadioButton
Example
https://codeloop.org/qt5-gui-how-to-create-qradiobutton/ 51
Qt5 C++ GUI Development
QComboBox
A combobox is a selection widget that displays the current item, and can pop up a list
of selectable items.
A combobox may be editable, allowing the user to modify each item in the list.
Example
https://codeloop.org/qt5-gui-development-how-to-create-combobox/ 52
Qt5 C++ GUI Development
QComboBox
Example: first way
https://codeloop.org/qt5-gui-development-how-to-create-combobox/ 53
Qt5 C++ GUI Development
QComboBox
Example: first way
https://codeloop.org/qt5-gui-development-how-to-create-combobox/ 54
Qt5 C++ GUI Development
QComboBox
Example: second way
https://codeloop.org/qt5-gui-development-how-to-create-combobox/ 55
Qt5 C++ GUI Development
QComboBox
Example: second way
https://codeloop.org/qt5-gui-development-how-to-create-combobox/ 56
Qt5 C++ GUI Development
QListWidget
QListWidget is a convenience class that provides a list view similar to the one
supplied by QListView, but with a classic item-based interface for adding and
removing items.
Example:
https://codeloop.org/qt5-gui-development-how-to-create-qlistwidget/ 57
Qt5 C++ GUI Development
QListWidget
Example: first way
https://codeloop.org/qt5-gui-development-how-to-create-qlistwidget/ 58
Qt5 C++ GUI Development
QListWidget
Example: second way
https://codeloop.org/qt5-gui-development-how-to-create-qlistwidget/ 59
Qt5 C++ GUI Development
QListWidget
Example: Design UI
https://codeloop.org/qt5-gui-development-how-to-create-qlistwidget/ 60
Qt5 C++ GUI Development
QListWidget
Example: Coding
https://codeloop.org/qt5-gui-development-how-to-create-qlistwidget/ 61
Qt5 C++ GUI Development
QListWidget
Example:
https://codeloop.org/qt5-gui-development-how-to-create-qlistwidget/ 62
Qt5 C++ GUI Development
QMessageBox
QMessageBox supports four predefined message severity levels, or message types,
which really only differ in the predefined icon they each show.
The following rules are guidelines:
https://codeloop.org/how-to-create-qmessagebox-in-qt5-gui/ 63
Qt5 C++ GUI Development
QMessageBox
Example
https://codeloop.org/how-to-create-qmessagebox-in-qt5-gui/ 64
Qt5 C++ GUI Development
QMessageBox
Example
https://codeloop.org/how-to-create-qmessagebox-in-qt5-gui/ 65
Qt5 C++ GUI Development
QMessageBox
Example
https://codeloop.org/how-to-create-qmessagebox-in-qt5-gui/ 66
Qt5 C++ GUI Development
QMessageBox
Example
https://codeloop.org/how-to-create-qmessagebox-in-qt5-gui/ 67
Qt5 C++ GUI Development
https://codeloop.org/qt5-gui-creating-qmenu-and-qtoolbar/ 68
Qt5 C++ GUI Development
https://codeloop.org/qt5-gui-creating-qmenu-and-qtoolbar/ 69
Qt5 C++ GUI Development
https://codeloop.org/qt5-gui-creating-qmenu-and-qtoolbar/ 70
Qt5 C++ GUI Development
QFileDialog
QFileDialog class enables a user to traverse the file system in order to select one or
many files or a directory.
https://codeloop.org/how-to-create-qfiledialog-in-qt5-gui/ 71
Qt5 C++ GUI Development
QFileDialog
Example: right click on your Open menu item in Signals And Slot Editor, after that
choose Go To Slot and from the dialog choose triggered() like this.
https://codeloop.org/how-to-create-qfiledialog-in-qt5-gui/ 72
Qt5 C++ GUI Development
QFileDialog
Example:
mainwindow.h
https://codeloop.org/how-to-create-qfiledialog-in-qt5-gui/ 73
Qt5 C++ GUI Development
QFileDialog
Example:
mainwindow.cpp
https://codeloop.org/how-to-create-qfiledialog-in-qt5-gui/ 74
Qt5 C++ GUI Development
QFileDialog
Example:
https://codeloop.org/how-to-create-qfiledialog-in-qt5-gui/ 75
Qt5 C++ GUI Development
QFileDialog
Example: Opening and saving files
Open Files
https://qt.misfrog.com/posts/%E3%83%A1%E3%83%A2%E3%81%AE%E4%BF%9D%E5%AD%98%E3%81%A8%E3%83%AD%E3%83%BC%
E3%83%89 76
Qt5 C++ GUI Development
QFileDialog
Example: Opening and saving files
Save Files
https://qt.misfrog.com/posts/%E3%83%A1%E3%83%A2%E3%81%AE%E4%BF%9D%E5%AD%98%E3%81%A8%E3%83%AD%E3%83%BC%
E3%83%89 77
Qt5 C++ GUI Development
QFileDialog
Example: Opening, displaying and saving images
create a new Qt Widgets application
add a Graphics View (located under the Display Widgets)
mainwindow.h
http://creative-punch.net/2014/02/opening-displaying-saving-images-qt/ 78
Qt5 C++ GUI Development
QFileDialog
Example: Opening, displaying and saving images
Adding events for the buttons
http://creative-punch.net/2014/02/opening-displaying-saving-images-qt/ 79
Qt5 C++ GUI Development
QFileDialog
Example: Opening, displaying and saving images
Opening an image and displaying it on the QGraphicsView
http://creative-punch.net/2014/02/opening-displaying-saving-images-qt/ 80
Qt5 C++ GUI Development
QFileDialog
Example: Opening, displaying and saving images
Saving the image
http://creative-punch.net/2014/02/opening-displaying-saving-images-qt/ 81
Qt5 C++ GUI Development
QProgressBar
A progress bar is used to give the user an indication of the progress of an operation
and to reassure them that the application is still running.
Example:
https://codeloop.org/how-to-create-qprogressbar-in-qt5-gui/ 82
Qt5 C++ GUI Development
QProgressBar
Example:
https://codeloop.org/how-to-create-qprogressbar-in-qt5-gui/ 83
Qt5 C++ GUI Development
QProgressBar
Example:
https://codeloop.org/how-to-create-qprogressbar-in-qt5-gui/ 84
Qt5 C++ GUI Development
QProgressBar
Example:
https://codeloop.org/how-to-create-qprogressbar-in-qt5-gui/ 85
Qt5 C++ GUI Development
QProgressBar
Example:
https://codeloop.org/how-to-create-qprogressbar-in-qt5-gui/ 86
Qt5 C++ GUI Development
The brush is used to fill strokes generated with the pen. Use the QBrush class to specify fill
styles.
https://codeloop.org/how-to-draw-text-line-in-qt5-with-qpainter/ 88
Qt5 C++ GUI Development
https://codeloop.org/how-to-draw-text-line-in-qt5-with-qpainter/ 89
Qt5 C++ GUI Development
https://codeloop.org/how-to-draw-text-line-in-qt5-with-qpainter/ 90
Qt5 C++ GUI Development
https://codeloop.org/how-to-draw-text-line-in-qt5-with-qpainter/ 91
Qt5 C++ GUI Development
Draw Rectangle
Example
mainwindow.h
https://codeloop.org/qt5-qpainter-how-to-draw-rectangle/ 92
Qt5 C++ GUI Development
Draw Rectangle
Example
mainwindow.cpp
https://codeloop.org/qt5-qpainter-how-to-draw-rectangle/ 93
Qt5 C++ GUI Development
Draw Rectangle
Example
https://codeloop.org/qt5-qpainter-how-to-draw-rectangle/ 94
Qt5 C++ GUI Development
Draw Ellipse
Example
https://codeloop.org/qt5-gui-qpainter-how-to-draw-ellipse/ 95
Qt5 C++ GUI Development
Draw Ellipse
Example
https://codeloop.org/qt5-gui-qpainter-how-to-draw-ellipse/ 96
Qt5 C++ GUI Development
Draw Ellipse
Example
https://codeloop.org/qt5-gui-qpainter-how-to-draw-ellipse/ 97
Qt5 C++ GUI Development
https://codeloop.org/qt5-tutorial-creating-barchart-with-qtchart/ 98
Qt5 C++ GUI Development
https://codeloop.org/qt5-tutorial-creating-barchart-with-qtchart/ 99
Qt5 C++ GUI Development
https://codeloop.org/qt5-tutorial-creating-barchart-with-qtchart/ 100
Qt5 C++ GUI Development
https://codeloop.org/qt5-tutorial-creating-barchart-with-qtchart/ 101
Qt5 C++ GUI Development
https://codeloop.org/qt5-tutorial-creating-linechart-with-qtchart/ 102
Qt5 C++ GUI Development
https://codeloop.org/qt5-tutorial-creating-linechart-with-qtchart/ 103
Qt5 C++ GUI Development
https://codeloop.org/qt5-tutorial-creating-piechart-with-qtchart/ 104
Qt5 C++ GUI Development
https://codeloop.org/qt5-tutorial-creating-piechart-with-qtchart/ 105
Qt5 C++ GUI Development
https://codeloop.org/qt5-tutorial-creating-donutchart-with-qtchart/ 106
Qt5 C++ GUI Development
https://codeloop.org/qt5-tutorial-creating-donutchart-with-qtchart/ 107