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

Viewed 2220

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

1 Answers

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:

  1. 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).

  2. 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).

  3. 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.

  4. 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.

Related