How to create responsive designs in QT(For desktops)

Thank You

Hi guys,
I want to make responsive designs in my application.
yeah I know you will tell about Layouts I know that (I don't think layouts can be used in this way if so I don't know about that) 😂 😂 😂 😂
If you know CSS I want features like of @media query
showing or shifting things on the basis of Screen size

Suppose I have 10 buttons in horizontal row
If width < 600px
//use 6 buttons in one row
if width < 400px
// use 3 buttons in one row

I like to design things with Qt ui so Please give me solution according to it

mrjj

Hi
You could also use the FlowLayout example
as it does that to some extend.
https://doc.qt.io/qt-5/qtwidgets-layouts-flowlayout-example.html

JonB

@Thank-You

Use Qt layouts. That's what they are for, to avoid having to code to look at screen widths etc.!
As far as I know, the "CSS" used by Qt does not support something like @media queries. So you would have to code what you want, making changes depending on the detected screen size, etc.

I like to design things with Qt ui

If you mean have these things happen in Qt Designer, then no chance.

DzCode

@JonB said in How to create responsive designs in QT(For desktops):

@Thank-You

Use Qt layouts. That's what they are for, to avoid having to code to look at screen widths etc.!

As far as I know, the "CSS" used by Qt does not support something like @media queries. So you would have to code what you want, making changes depending on the detected screen size, etc.

I like to design things with Qt ui

If you mean have these things happen in Qt Designer, then no chance.

Yes, Qt does not have all CSS features, So that, the best way is the use of QT's layout classes. Otherwise, it will be painful via signals & slots of resize events

Hoever, he wants something like below. Maybe he can use GridLayout in a custom QFrame. and he can override the resizeEvent of the QFrame Then, he can emit signal for the width change and handle the orientation of the gridlayout.
Suppose I have 10 buttons in horizontal row
If width < 600px
//use 6 buttons in one row
if width < 400px
// use 3 buttons in one row

DzCode

Also, this link can be helpful. I havent implemented it before, but you can play with this. https://doc.qt.io/qt-5/qtwidgets-layouts-flowlayout-example.html

Thank You

@DzCode
I am using QScrollBar

Inside it I have QGrid layout

Now the thing that I want to do is
disable horizontal scrollbar and make it adjust by its width

Thank You

This is picture of it

I want to disable vertical scroll bar and drop things on the basis of width

JonB

@Thank-You
I don't know what you mean. But if you will want to increase/reduce the number of items/columns shown in each row, and move items down to the next row, then the flowlayout example which @DzCode quoted is the way to go. Rather than changing columns dynamically in a grid layout.

However, that would be contrary to your stated goal of an equivalent to an @media query and adjusting number of elements in a row explicitly.

mrjj

Hi
You could also use the FlowLayout example
as it does that to some extend.
https://doc.qt.io/qt-5/qtwidgets-layouts-flowlayout-example.html

SimonSchroeder

IMHO you should use Qt's layout system to do what you want. There is not existing predefined Qt layout. The flow layout seems to point in the right direction. Either use it directly or implement your own class derived from QLayout. This way you only have to write the responsive design code once and can use it everywhere. However, it will hardly work with the Qt Designer. I believe you can write plugins for the Qt Designer, but this is a whole other story.

DzCode

If you do not want t use FlowLayout, there is another way to do it.

In the resizeEvent of the frame, you will still emit a signal. If the signal is emitted, you will break the layout, then make a new layout with new arrangement of your widgets. For the easiness you can put your widgets to be shown in the grid into a list. Do not use the designer for this job.