How can I organize files under the qml.qrc folder in Qt Creator?

Question

If I have a bunch of resources (images, fonts, etc.) in different folders under my qml.qrc file, is there a way to organize this within Qt Creator?

For example, if I have the following in my qml.qrc file:

<RCC>
    <qresource prefix="/">
        <file>main.qml</file>
        <file>pages/MainPage.qml</file>
        <file>pages/NewContactPage.qml</file>
        <file>images/plus.png</file>
        <file>images/minus.png</file>
        <file>images/exit.png</file>
    </qresource>
</RCC>

It will show up as a long list in Qt Creator, like this:

Resources
    qml.qrc
        /
          main.qml
          pages/MainPage.qml
          pages/NewContactPage.qml
          images/plus.png
          images/minus.png
          images/exit.png

Since this list can get really long over the duration of the project, it would be nice if these were organized better and split into folders like they are in my directory. Any ideas?

Solution 1

From the Qt documentation: The Qt Resource System

By default, resources are accessible in the application under the same file name as they have in the source tree, with a :/ prefix, or by a URL with a qrc scheme.

It is also possible to specify a path prefix for all files in the .qrc file using the qresource tag's prefix attribute:

this example show how to do it:

<RCC>
   <qresource prefix="/pages">
      <file >pages/MainPage.qml</file>
   </qresource>
   <qresource prefix="/images">
      <file >images/plus.png</file>
   </qresource>
</RCC>

Solution 2

Actually, I'd highly recommend that non .qml assets to be put in a different resource file altogether, because large files will gut application build times. What happens is even a tiny change to a qml source will result in recompilation of the entire resource file. If assets are in a different resource file they are not continuously recompiled.

This will also effectively achieve organization in addition to significantly improving build times.

Solution 3

I just discovered an awesome way to do it. What's weird is that nobody else suggested it, when it's so completely trivial. Perhaps it didn't work in old versions of Qt/Qt Creator but now it does.

Here it is:

<RCC>
    <qresource prefix="/">
        <file>main.qml</file>
        <file>test/test.txt</file>
    </qresource>
</RCC>

The test dir needs to exist and needs to contain test.txt.

No need for creating separate <qresource> tags with different prefixes. No need for alias attributes.

The files are cleanly organized in the filesystem and in the project explorer and you can access them from code with clean paths like :/test/test.txt.

(this screenshot is of a project that has some extra files as well - ignore those)

Bonus: You can rightclick on the "test" folder in the project explorer in Qt Creator and choose "Add new...", this does put the newly created file in the right place in the filesystem. Unfortunately it doesn't appear in the qrc subtree in the project explorer, only in a separate "Other files" subtree. You need to rightclick "qrc.qml" in the project explorer and choose "Add existing files" to make the file appear in the qrc subtree like it should. So it's a bit buggy/messy but when you learn how to use it, it's workable.

Bonus 2: You can import (add) an existing file/dir (which reside in any (sub-)sub-dir of the qrc file) and the right XML syntax will be generated, resulting in the right tree structure in the project explorer.

What I think doesn't work well:

• Creating a file from Qt Creator from File -> New file or project (or Ctrl-N). This doesn't let you put the file in an arbitrary dir in the filesystem, only in the root project dir.
• Files that you've put in subdirs aren't included in Qt Creator's project-wide search (Ctrl+Shift+F).

Edit: I just noticed the OP is doing exactly what I suggest. In that case, he probably is using an older Qt Creator version. Mine is 4.1.0.

Solution 4

If you want to use qrc files but don't like paths like "images/icons/images/icons/icon.png/" use alias as described here

<qresource prefix="/images">
    <file alias="cut.png">images/cut.png</file>
</qresource>

With alias you can use your file by neatly writing /images/cut-img.png instead of /images/images/cut.png

Solution 5

Another nice way to view your project files / folders as they appear on your File System is to do this:

• Open your project
• Click on the drop down menu which is above your project name, as demonstrated in the image below:
  

• Done, now you can see your files and folders as they appear on your FS

View more solutions

Comments

[Mercury]

This is nice for 1 level of folder organization, BUT - What if i want my QT project to show me a folder within a folder within a folder, how to do that ? searched it on google / qt official site, couldn't find any mentioning! annoying.

[Zmey]

@ali-mofrad, wouldn't this produce paths like /pages/pages/MainPage.qml and /images/images/plus.png ?

[Ali Mofrad]

@Zmey: yes. you are right. if you want to remove one layer, simply add all files to one folder and use multiple prefix to separate them.

[Stefan Monov]

This has at least 2 problems. 1) You can't view several open projects in the same tree. 2) to add, remove or rename a file in the qrc, you need to switch to "Projects" view again.

[Stefan Monov]

This technique in this answer works but: 1) It's nicer when combined with the alias technique like here, rather than when putting all files in one filesystem folder as suggested in the last comment. 2) When creating e.g. the prefixes "/a" and "/a/b" using this technique, they are shown as siblings rather than a parent-and-child in the project explorer tree, and the name of the latter is shown as "/a/b" rather than just "b".

[sunny moon]

:/something won't work for me in Qt 5.7, only qrc:/something would (otherwise, I'm getting ":/something": no such directory error)

[Rich von Lehe]

It appears that using the qtquickcompiler to process the qrc produces better results: it breaks out qml from non-qml. This is the approach I'm talking about: doc.qt.io/QtQuickCompiler/…