Archived:Adding icon to QComboBox
This article shows how to use QComboBox in your Qt mobile app. Its aim is to complement the documentation about QComboxBox by citing a typical use case where user add a list of items to the combobox, how to response to the selected item, and how to add icon or image to the QComboBox by using QIcon.
You should be familiar with Qt as well as some experience with Qt C++. Full documentation about QComboBox is available at the QComboBox Class Reference. This article is based on Qt version 4.7.0 and Qt 4.7 for Symbian^3 Developer Edition, and has been developed on a desktop. You are able to run the code on a Symbian^3 device such as N8.
The QComboBox widget is a combined button and popup list. It provides a means of presenting a list of options to the user in a way that takes up the minimum amount of screen space.
There are various applications that benefit from the ability to let user choose items from a combo box. In the example shown above, the combo box can consists of just plain text, plain text with image icon, or plain text with colour filled icon. The sample application is a BMI calculator and uses QTabView and its use case explanation is beyond the scope of this article. However, the code used is straightforward and should be usable for the reader to find out use case of other UI controls such as how to use tab view for the application. In the example, the QTabView is used to provide three different tab to the application.
Populating the QComboBox
In this article, three combo box have been created by using Qt Designer. They are named comboBoxBreakfast, comboBoxLunch and comboBoxDinner respectively. The first action needed after that is to populate the combo box with data (known as item in the documentation). The fastest way to populate it with just plain text items is by using the QStringList. The code snippet below shows how to do it.
breakfastlist << "Porridge" << "Full English" << "Noodle" << "Roti Canai";
Adding Colour Filled Icon
We will use QPixmap and QIcon to add a simple color filled icon to the 3rd combo box in the example, which is list of dinner item We first define QPixmap object for red, green and blue color. Subsequently, we add one item at each time to the combo box, by creating a QIcon object with the QPixmap object, as shown by the code snippet below
QPixmap red( 40, 40 );
QPixmap green( 40, 40 );
QPixmap blue( 40, 40 );
red.fill( Qt::red );
green.fill( Qt::green );
blue.fill( Qt::blue );
Adding Image Icon
Finally, here is how to add your own image as icon to the QComboBox. In fact this is the original objective of writing this article. I couldn't find a code example that actually shows how to use our own image as icon in a QComboBox easily and i actually spent quite some time to look for the information and make it work.
Firstly, we create some image icons by loading image into QIcon. Take note of the semicolon needed in front of the file path If one only put the file path, the image is simply not loaded into QIcon
After we created all the QIcon icons, we simply use them one by addItem() method
We can also change the icon of an existing item by using the setItemIcon() method. For example, we use the code snippet below to change the icon of item 3 from a green color fill to a burger
Responding to Selected Item
How do we know when user make a selection on the combo box? In Qt, such event handling is known as Signals and Slots. We can manually write the signal and slot pair to do it but there are easier way. Here the easier way is used. In the designer, we select the QComboBox that we want want to handle the signal, right click and select Go To Slot. From there we select the signal that we want to assign a slot.
In this example, we choose the currentIndexChanged signal and a slot is automatically created in mainwindow.cpp you can then handle the signal the way you want. Here i simply call the calculateCalories() method
In calculateCalories(), processing is done based on the selection to calculate calories consumed by the selected food as an illustration. The point to take note here is how we know which item gets selected, in this case, we use the currentIndex in a switch statement to process them
//Sandwich" << "Pasta" << "Economy Rice" << "None
s.sprintf("Calories: %.2f", calories);
As you've hopefully seen from this tutorial, you can quickly start using QComboBox with some added flavors (i.e the fancy image icon). For more advanced usage, you can always refer to the QComboBox documentation at the QComboBox Class Reference
The source code File:BmiCalculator.zip is included here for you to play with. It has been tested only on Windows 7 64 bit, running the Symbian^3 simulator, as well as running on N8 (a Symbian^3 device), although it should work on other development systems. The screenshot is from a Symbian^3 simulator in 640x360, i.e. the same resolution as most Nokia mobile devices.