Change project .ui file (form) to .qml and .ui.qml file

Question

I have a project in qt with .ui forms.

But now I have to get a better visual result (more modern and userfriendly) so I found that qml is somewhat the thing I need.

So the problem is the whole project is based on .ui forms (frontend) and cpp code (backend). I need to find a way to change my forms with qml files.

I searched a little but I don't know how to really use ui component in qml as easily as in ui forms.

Some help would be gladly welcomed

"I need to find a way to change my forms with qml files" --> Simple. Lots of tedious manual work, translating existing GUI into QML. Sorry, there's no magic tool to do it for you. You just have to roll up your sleeves and convert one after another, by hand. Or, just stick with the existing GUI. — Jesper Juhl
– Jesper Juhl, Commented Jul 1, 2019 at 16:20
Depending how well project is written (probably not) there is a lot of work to do or extremely huge amount of work. QML and widgets are so completely different that it is like starting new project. — Marek R
– Marek R, Commented Jul 1, 2019 at 16:29

hyde · Accepted Answer · 2019-07-01 17:34:53Z

As a foreword, don't underestimate the amount of work needed to re-implement the UI of an app.

Then, I would proceed like this, and have a working software all the time during the transition:

Learn QML. Pay special attention to how to share data between C++ and QML (using Qt meta object system and Qt's model view framework, mostly). Don't write any permanent changes to the current app yet (either do learning/PoC programs from scratch, or make a throw-away branch of current code).
Modify current C++-only code to decouple GUI and business logic more (if needed, but I assume it is), using what you learned above about C++-QML interoperatiblity. Concentrate on making the business logic separate, with minimal GUI code changes (because those are going be thrown away eventually).
Convert some parts of the current GUI to QML in QQuickView widgets. Keep the overall widget based GUI structure for now, but aim for these pieces of QML UI to be as final as you can easily make them. Go as far as you practically can with this conversion, keeping the program fully functional. Also, this step is continuation of step 2 in separating the business logic from UI, but now you got actual QML to work against so you will discover new things you must change.
If it is feasible to make it all be QML, then do a final push and get rid of the widgets entirely. If there are some parts of UI which just won't be feasible to re-write in QML, then just complete step 3 by converting everything you want to convert.

1 Answer 1