create a responsive ui like telegram using Qt Quick and qml

[Aliakbar.R]

I want to create a qml UI like the telegram that has responsive design. in telegram when you have enough space chat area show in right and if not enough space chat area and other detail show as stack view.

I have on listview and a form to add a contact to the database. I want if the window is large enough listview show in right of the form

or if not available space listview and the form is shown as stack view

just like telegram app

how to do this?

i have an example code that want to change as above description
Github Sample to Fix

[sierdzio]

Check out code of KDE's System Settings app, they have recently switched to a similar responsive ui.

Regarding the problem itself, my first thought is to use QML states to define 2 sets of UI layouts and then switch between them based on available screen/window size. Or just keep the right hand side hidden and only show it when enough screen real estate is available.