Using resources in style sheets
Qt provides us with a platform-independent resource system which allows us to store any type of files in our program's executable for later use. There is no limit to the types of files we can store in our executable—images, audio, video HTML, XML, text files, binary files, and so on, are all permitted. This is useful if your application always needs a certain set of files (icons, translation files, and so on) and you don't want to run the risk of losing the files. To achieve this, we must tell Qt which files we want to add to its resource system in the .qrc file and Qt will handle the rest during the build process.
How to do it
To add a new .qrc file to our project, go to File | New File or Project. Then, select Qt under the Files and Classes category and select Qt Resources File. After that, give it a name (that is, resources) and click the Next button followed by the Finish button. The .qrc file will not be created and automatically opened by Qt Creator.
You don't have to edit the .qrc file directly in the XML format as Qt Creator provides you the user interface to manage your resources. To add images and icons to your project, first you need to make sure that the images and icons are being placed in your project's directory.
While the .qrc file is opened in Qt Creator, click the Add button followed by Add Prefix button. The prefix is used to categorize your resources so that it can be better managed when you have a ton of resources in your project:
- Rename the prefix you just created
/icons. - Then, create another prefix by clicking Add followed by Add Prefix.
- Rename the new prefix
/images. - After that, select the
/iconprefix and click Add followed by Add Files. - A file selection window will appear; use that to select all the icon files. You can select multiple files at a time by holding the Ctrl key on your keyboard while clicking on the files to select them. Click Open once you're done.
- Then, select the
/imagesprefix and click the Add button followed by the Add Files button. The file selection window will pop up again, and this time we will select the background image. - Repeat the preceding steps, but this time we will add the logo image to the
/imagesprefix.Don't forget to save once you're done by pressing Ctrl + S. Your
.qrcfile should now look like this:
- Lastly, we will apply the wallpaper image to the background using a style sheet. Since the background dimension will change according to the window size, we cannot use
pixmapin this case. Instead, we will use theborder-imageproperty in a style sheet to achieve this. Right click the main window and select Change styleSheet to open up the Edit Style Sheet window. We will add a new line under the style sheet of the central widget:#centralWidget { background: rgba(32, 80, 96, 100); border-image: url(:/images/login_bg.png); } - It's really that simple and easy! Your login screen should now look like this:
How it works...
The resource system in Qt stores binary files, such as images, translation files, and so on, in the executable when it gets compiled. It reads the resource collection files (.qrc) in your project to locate the files that need to be stored in the executable and include them into the build process. A .qrc file looks something like this:
<!DOCTYPE RCC><RCC version="1.0">
<qresource>
<file>images/copy.png</file>
<file>images/cut.png</file>
<file>images/new.png</file>
<file>images/open.png</file>
<file>images/paste.png</file>
<file>images/save.png</file>
</qresource>
</RCC>It uses XML format to store the paths of the resource files which are relative to the directory containing it. Do note that the listed resource files must be located in the same directory as the .qrc file, or one of its sub-directories.
Unlimited access to the largest independent learning library in tech of over 8,000 expert-authored tech books and videos.
Innovative learning tools, including AI book assistants, code context explainers, and text-to-speech.
50+ new titles added per month and exclusive early access to books as they are being written.
