Skip to content
  • Categories
  • Recent
  • Tags
  • Popular
  • Users
  • Groups
  • Search
  • Get Qt Extensions
  • Unsolved
Collapse
Brand Logo
  1. Home
  2. Qt Development
  3. General and Desktop
  4. How to create responsive designs in QT(For desktops)
QtWS25 Last Chance

How to create responsive designs in QT(For desktops)

Scheduled Pinned Locked Moved Solved General and Desktop
10 Posts 5 Posters 5.6k Views
  • Oldest to Newest
  • Newest to Oldest
  • Most Votes
Reply
  • Reply as topic
Log in to reply
This topic has been deleted. Only users with topic management privileges can see it.
  • Thank YouT Offline
    Thank YouT Offline
    Thank You
    wrote on last edited by Thank You
    #1

    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

    Let's make QT free or It will go forever

    TRUE AND FALSE <3

    JonBJ 1 Reply Last reply
    0
    • mrjjM Offline
      mrjjM Offline
      mrjj
      Lifetime Qt Champion
      wrote on last edited by
      #8

      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

      1 Reply Last reply
      1
      • Thank YouT 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

        JonBJ Offline
        JonBJ Offline
        JonB
        wrote on last edited by JonB
        #2

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

        D 1 Reply Last reply
        1
        • JonBJ JonB

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

          D Offline
          D Offline
          DzCode
          wrote on last edited by DzCode
          #3

          @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

          Thank YouT 1 Reply Last reply
          0
          • D Offline
            D Offline
            DzCode
            wrote on last edited by
            #4

            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

            1 Reply Last reply
            0
            • D DzCode

              @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

              Thank YouT Offline
              Thank YouT Offline
              Thank You
              wrote on last edited by
              #5

              @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

              Let's make QT free or It will go forever

              TRUE AND FALSE <3

              1 Reply Last reply
              0
              • Thank YouT Offline
                Thank YouT Offline
                Thank You
                wrote on last edited by
                #6

                image.JPG
                This is picture of it

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

                Let's make QT free or It will go forever

                TRUE AND FALSE <3

                JonBJ 1 Reply Last reply
                0
                • Thank YouT Thank You

                  image.JPG
                  This is picture of it

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

                  JonBJ Offline
                  JonBJ Offline
                  JonB
                  wrote on last edited by
                  #7

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

                  1 Reply Last reply
                  2
                  • mrjjM Offline
                    mrjjM Offline
                    mrjj
                    Lifetime Qt Champion
                    wrote on last edited by
                    #8

                    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

                    1 Reply Last reply
                    1
                    • S Offline
                      S Offline
                      SimonSchroeder
                      wrote on last edited by
                      #9

                      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.

                      1 Reply Last reply
                      0
                      • D Offline
                        D Offline
                        DzCode
                        wrote on last edited by DzCode
                        #10

                        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.

                        1 Reply Last reply
                        1

                        • Login

                        • Login or register to search.
                        • First post
                          Last post
                        0
                        • Categories
                        • Recent
                        • Tags
                        • Popular
                        • Users
                        • Groups
                        • Search
                        • Get Qt Extensions
                        • Unsolved