qt - Setting up QtCreator for use with KDE Framework and Kirigami

Question

I'm trying to set up QtCreator, especially the QML Designer, to work with KF5 and Kirigami.

I'm at a point where I can compile and run the Kirigami Examples but the QML support doesn't seem to be working at all. The code completion does not show most of the available components and the syntax highlighting shows non-existent errors. The designer does not recognize the new controls an only shows a blank screen.

Sadly i did not find any complete tutorial on how to set it up correctly.

I'm testing using the kirigami template created by KAppTemplate and set up the QML_IMPORT_PATH using this stackoverflow answer.

Using KDevelop does have code completion but doesn't seem to have any qml preview features beside compiling and running the application.

If it is not possible to setup, is there any other way to get a live preview of my qml files?

Answer 1

To answer your main question, it is possible to setup. Go to Projects > Open and locate your project's outermost CMakeLists.txt file, which should be at your project's root, next to the src folder.

QtCreator should then prompt you to configure the project's building kits. A new kit called Imported Kit should appear checked. Press the Configure Project button to make use of the imported kit. This kit is just QtCreator making use of the CMake configuration of your project, which was provided by KAppTemplate.

Now, regarding your intention of getting a live preview of your QML file. I'm afraid this is only possible for QtQuick UI files and Qt Design Forms, a.k.a. files that have .ui in their extension.

While it is possible to make use of these files inside a Kirigami project, Kirigami's boilerplate code, by default, uses regular .qml files. I personally advice against taking manually written QML code and adding it to a .qml.ui file, because it tends to make QtCreator unstable and could corrupt your .ui file.

I wouldn't depend on .qml.ui files because QML on its own is actually very easy to code. To get a better handle on QML, you can watch KDAB's Introduction tutorial to Qt / QML playlist on YouTube. With regards Kirigami and QML, the best resources to understand them are their respective official documentations.