Table of individually styled buttons

  • Hello,

    I'm new to the QT world, so if there is a previous post that answers this question please point me at it.

    In the application I'm working on, I want the individual styling that is available for a pushbutton, but the functionality of the Table View i.e. there is a window that can be scrolled forward and backward etc. displaying different rows of buttons , all individually styled. (color, gradient,icon, etc)
    In other words, I want a table of buttons, not cells. I think this is do-able, using the QTableWidget, but I'm not sure, and I'd like a little reassurance that it's achievable before heading off down that road.
    It appears that you can style the active cell in the table, and the selected or highlighted cell, but beyond that all the "inactive cells" are styled the same. Hence, my desire to use buttons.
    I have been through many of the examples but can't quite find one that "fits" what I'm looking for.
    Is there an example of a table of individually styled buttons I can refer to?

    The second question is related to the QStackedWidget.
    Is it possible to manipulate the properties such that one layer of the stack is transparent , so that an underlying layer can still be seen? Further can buttons place on this transparent layer also be transparent, but still be activated the same way as if they were not transparent?

    Thank you for any advice or direction that you can provide.

  • Moderators

    I would use a gridlayout on those styled buttons (set an objectname and use CSS for those) in a scrollarea or something. A tablewidget and the tableviews are meant for tables of text (like a spreadsheet or something), not to lay out widgets.

  • First of all, a moderator remark: Please create a new posting for your second question. It is unrelated to your first question, and I think it will keep the discussion more clear.

    Then, on your first question:
    Perhaps you could tell us a little bit more about what it is you want to achieve exactly. Now on how you think you should best achieve that, but on your actual goal. Perhaps create a quick mockup image to show what you want, and a simple description of what kind of interaction you expect. I can think of several possible solutions to your problem, but would help a lot to have a clearer idea of what you want to advice the right approach.

  • Thank, I'm working on the second posting right away. I'll be back in a few minutes with what I hope to achieve with the buttons.

  • Conceptually this is what I want to do with the table of buttons.

    1. Create all the buttons in a grid of 3 by N where N is at least 5, but could be between 5 -100.
    2. Only 5 Rows of the buttons are visible at any one time. (hence the idea of the table view) i.e. only a certain portion of the buttons are in view.
    3. If there are more than 5 rows of buttons, I need to be able to scroll down through the rows.
      I really don't want scrollbars, but rely on arrow keys or gestures (not sure how to do this in the windows / mac environments) to move up and down through the rows.
    4. I want to use the styling features of the pushbutton of hover selected etc. so that I can give the user tips, highlight the button if it under the mouse etc.
    5. Each button must have it's own unique graphic which in a layered system. I have already done some experiments with the buttons and the css styling and I think I can get what I want. I don't need the graphics to resize etc. I have a fixed size.
    6. Each button would have it's own data associated with it so that I can use it to perform some action with it. The associated data comes from a db. The data from the db is NOT displayed. I also want to be able to switch from the graphic to a text mode. So that one or the other is displayed. The text would also come from the db.

    in simple textual representation.

    Button 01 | Button 02 | Button 03

    Button 04 | Button 05 | Button 06 |
    Button 07 | Button 08 | Button 09 |
    .... | Only 15 buttons would be
    | view at a time. i.e. 3x5
    Button 16 | Button 17 | Button 18 | and would be scrollable
    more buttons....

    I hope this gives a better idea of what I'd like.
    Thank you again for any ideas or advice.

  • But what would be on those buttons exactly? What are they for? Do you really need to style them, or would it be ok just to put an image on them?

  • Hello again,

    I think (5) and (6) answer those questions. The buttons have data associated with them that get pulled from the DB when the table of buttons is built, (i.e. so I don't have to do the lookup on each button push).
    Yes the need to be individually styled, because the experience desired is that there is change for the hover, and a change for the clicked, vs unselected. The graphics are such that the color on the back ground will come through the transparent part of the image. However, it's necessary for those to all be different if necessary(i.e. user chooses).

    I was unable to get the grid to behave the way I wanted because the more buttons I added the smaller in size they got. Further I did not see the ability to set a "view" i.e. 3x5 rows being viewed, on the grid layout.

  • What might work for you, is to put a QGridLayout inside a QScrollArea, and put your buttons in there. That way, your buttons can take the size they need vertically.

Log in to reply

Looks like your connection to Qt Forum was lost, please wait while we try to reconnect.