In this article by Symeon Huang, author of the book Qt 5 Blueprints, explains typical and basic GUI components in Qt 5
(For more resources related to this topic, see here.)
Design UI in Qt Creator
Qt Creator is the official IDE for Qt application development and we’re going to use it to design application’s UI. At first, let’s create a new project:
- Open Qt Creator.
- Navigate to File | New File or Project.
- Choose Qt Widgets Application.
- Enter the project’s name and location. In this case, the project’s name is layout_demo.
You may wish to follow the wizard and keep the default values. After this creating process, Qt Creator will generate the skeleton of the project based on your choices. UI files are under Forms directory. And when you double-click on a UI file, Qt Creator will redirect you to integrated Designer, the mode selector should have Design highlighted and the main window should contains several sub-windows to let you design the user interface. Here we can design the UI by dragging and dropping.
Qt Widgets
Drag three push buttons from the widget box (widget palette) into the frame of MainWindow in the center. The default text displayed on these buttons is PushButtonbut you can change text if you want, by double-clicking on the button. In this case, I changed them to Hello, Hola, and Bonjouraccordingly. Note that this operation won’t affect the objectName property and in order to keep it neat and easy-to-find, we need to change the objectName! The right-hand side of the UI contains two windows. The upper right section includes Object Inspector and the lower-right includes the Property Editor. Just select a push button, we can easily change objectName in the Property Editor. For the sake of convenience, I changed these buttons’ objectName properties to helloButton, holaButton, and bonjourButton respectively.
Save changes and click on Run on the left-hand side panel, it will build the project automatically then run it as shown in the following screenshot:
In addition to the push button, Qt provides lots of commonly used widgets for us. Buttons such as tool button, radio button, and checkbox. Advanced views such as list, tree, and table. Of course there are input widgets, line edit, spin box, font combo box, date and time edit, and so on. Other useful widgets such as progress bar, scroll bar, and slider are also in the list. Besides, you can always subclass QWidget and write your own one.
Layouts
A quick way to delete a widget is to select it and press the Delete button. Meanwhile, some widgets, such as the menu bar, status bar, and toolbar can’t be selected, so we have to right-click on them in Object Inspector and delete them. Since they are useless in this example, it’s safe to remove them and we can do this for good.
Okay, let’s understand what needs to be done after the removal. You may want to keep all these push buttons on the same horizontal axis. To do this, perform the following steps:
- Select all the push buttons either by clicking on them one by one while keeping the Ctrl key pressed or just drawing an enclosing rectangle containing all the buttons.
- Right-click and select Layout | LayOut Horizontally. The keyboard shortcut for this is Ctrl + H.
- Resize the horizontal layout and adjust its layoutSpacing by selecting it and dragging any of the points around the selection box until it fits best.
Hmm…! You may have noticed that the text of the Bonjour button is longer than the other two buttons, and it should be wider than the others. How do you do this? You can change the property of the horizontal layout object’s layoutStretch property in Property Editor. This value indicates the stretch factors of the widgets inside the horizontal layout. They would be laid out in proportion. Change it to 3,3,4, and there you are. The stretched size definitely won’t be smaller than the minimum size hint. This is how the zero factor works when there is a nonzero natural number, which means that you need to keep the minimum size instead of getting an error with a zero divisor.
Now, drag Plain Text Edit just below, and not inside, the horizontal layout. Obviously, it would be neater if we could extend the plain text edit’s width. However, we don’t have to do this manually. In fact, we could change the layout of the parent, MainWindow. That’s it! Right-click on MainWindow, and then navigate to Lay out | Lay Out Vertically. Wow! All the children widgets are automatically extended to the inner boundary of MainWindow; they are kept in a vertical order. You’ll also find Layout settings in the centralWidget property, which is exactly the same thing as the previous horizontal layout.
The last thing to make this application halfway decent is to change the title of the window. MainWindow is not the title you want, right? Click on MainWindow in the object tree. Then, scroll down its properties to find windowTitle. Name it whatever you want. In this example, I changed it to Greeting. Now, run the application again and you will see it looks like what is shown in the following screenshot:
Qt Quick Components
Since Qt 5, Qt Quick has evolved to version 2.0 which delivers a dynamic and rich experience. The language it used is so-called QML, which is basically an extended version of JavaScript using a JSON-like format.
To create a simple Qt Quick application based on Qt Quick Controls 1.2, please follow following procedures:
- Create a new project named HelloQML.
- Select Qt Quick Application instead of Qt Widgets Application that we chose previously.
- Select Qt Quick Controls 1.2 when the wizard navigates you to Select Qt Quick Components Set.
Edit the file main.qml under the root of Resources file, qml.qrc, that Qt Creator has generated for our new Qt Quick project. Let’s see how the code should be.
import QtQuick 2.3
import QtQuick.Controls 1.2
ApplicationWindow {
visible: true
width: 640
height: 480
title: qsTr("Hello QML")
menuBar: MenuBar {
Menu {
title: qsTr("File")
MenuItem {
text: qsTr("Exit")
shortcut: "Ctrl+Q"
onTriggered: Qt.quit()
}
}
}
Text {
id: hw
text: qsTr("Hello World")
font.capitalization: Font.AllUppercase
anchors.centerIn: parent
}
Label {
anchors { bottom: hw.top; bottomMargin: 5; horizontalCenter: hw.horizontalCenter }
text: qsTr("Hello Qt Quick")
}
}
If you ever touched Java or Python, then the first two lines won’t be too unfamiliar for you. It simply imports the Qt Quick and Qt Quick Controls. And the number behind is the version of the library.
The body of this QML source file is really in JSON style, which enables you understand the hierarchy of the user interface through the code. Here, the root item is ApplicationWindow, which is basically the same thing as QMainWindow in Qt/C++.
When you run this application in Windows, you can barely find the difference between the Text item and Label item. But on some platforms, or when you change system font and/or its colour, you’ll find that Label follows the font and colour scheme of the system while Text doesn’t.
Run this application, you’ll see there is a menu bar, a text, and a label in the application window. Exactly what we wrote in the QML file:
You may miss the Design mode for traditional Qt/C++ development. Well, you can still design Qt Quick application in Design mode! Click on Design in mode selector when you edit main.qml file. Qt Creator will redirect you into Design mode where you can use mouse drag-and-drop UI components:
Almost all widgets you use in Qt Widget application can be found here in a Qt Quick application. Moreover, you can use other modern widgets such as busy indicator in Qt Quick while there’s no counterpart in Qt Widget application.
However, QML is a declarative language whose performance is obviously poor than C++. Therefore, more and more developers choose to write UI with Qt Quick in order to deliver a better visual style, while keep core functions in Qt/C++.
Summary
In this article, we had a brief contact with various GUI components of Qt 5 and focus on the Design mode in Qt Creator. Two small examples used as a Qt-like “Hello World” demonstrations.
Resources for Article:
Further resources on this subject:
- Code interlude – signals and slots [article]
- Program structure, execution flow, and runtime objects [article]
- Configuring Your Operating System [article]
