Important: Please read the Qt Code of Conduct - https://forum.qt.io/topic/113070/qt-code-of-conduct

How to create responsive designs in QT(For desktops)



  • 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


  • Lifetime Qt Champion

    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



  • @Thank-You

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

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



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

    @Thank-You

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

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



  • 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



  • @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



  • image.JPG
    This is picture of it

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



  • @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.


  • Lifetime Qt Champion

    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



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



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


Log in to reply