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/CSS vs JavaScript. Modern HTML documents and CSS files primarily represent the structure and styling of a page while JavaScript is placed in separate files to govern how they should behave.

In this case *.ui.qml files contain the structure and styling while *.qml files contain 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. Why? I would say it is because after awhile, the limitations of the GUI QML editor (creates unnecessarily complicated QML, reformatting the file every time it saves it, and can be caused to crash when encountering valid QML that violates its "simplified" assumptions) cause you to eventually give up on the GUI editor and just edit, compile and run to see your changes in action.

That said, I still think the code behind pattern has merit for the same reasons it does in the web world. QML gets really complicated, spaghetti-like, and difficult to maintain when both disciplines are mixed in the same file.

One trick in this regard: even though Creator default behavior doesn't encourage it, you can set it up with the .ui.qml file in source code view in one pane and in GUI editor mode in another. You can edit the .ui.qml file and then just wait to see the preview update in the GUI editor.