How to use .ui.qml files from Qt creator version 6

Question

I've been some reading/watching some tutorials here and there about qt quick and qml from last few days. But the user interface of qt creator, the boilerplate that it produces on a new qt quick project in each of the tutorial had been different. there's so much confusion.

I want to make a simple Hello World Qt Quick project, I followed this book from packt . (It has changed from the last time I saw it, but still doesn't work)

I added some a UI file, which added *.ui.qml and *form.qml files. Now if I edit.ui.qml in design, No change is reflected on any other file, but if I open some other file in design, it prompts me to use the.ui.qml file instead. The examples give an error "No Cmake config found". I'm using Qt6.2 on Arch/wayland, downloaded via installer.

How is it supposed to work? I have read this answer, and few others but I'm still confused. Could you link to a proper tutorial, or a simple example?

Answer 1

The best way to think about it is that *.ui.qml should be used for UI elements and their settings. They should be about the structure, layout and styling of your UI. Doing that also happens to make the files presentable and editable in Creator's Design Mode since it simplifies the structure of the QML to the point where it can reliable present it and modify it.

*.qml files on the other shouldn't have UI elements and should instead primarily contain functions, properties and signal handers.

This pattern is sometimes referred to as "code behind". It sort of follows the same philosophy with HTML and CSS. Modern HTML documents primarily represent the structure of a page while CSS is placed in separate files to govern how they should be styled.

In this case *.ui.qml files contain the structure and styling while *.qml files containing the behavior. Creator will create a pair of them while adding a QML UI resource to your project where the.qml file inherits from the.ui.qml file.

Other than this inheritance and to encourage the code behind pattern, there's no real difference between a.qml and.ui.qml file. Creator will also try to steer you to the.ui.qml version of the pair when you go into designer to help encourage this pattern.

I will note that Qt violates this pattern a bunch all over their documentation and examples....