Nominate our 2022 Qt Champions!

Overlapping effect between widgets

  • Hi,

    I have a window with fixed height and width which contains several widgets. These widgets have all fixed width but only a few of them have fixed height.

    Not all the widgets will be displayed at the same time so I want to hide/show them using an "overlapping" effect (meaning that a widget will fully cover another one, there will be no transparency).

    This is an example:

    1. The window has 3 visible widgets (the background of the window is black). The grey one and the red one has a fixed vertical policy, the blue one is expanding.
      alt text
    2. I want to display the yellow widget between the grey and the red one, sliding down the red one like if it was overlapping the yellow one. When the red one is moved down, the blue one is shrinked.
      alt text
    3. This is the final layout after the yellow widget is full displayed (its vertical policy is preferred)
      alt text

    I could display one more widget between the red one and the blue one. Before displaying this widget, the yellow one will be hidden moving up the red one. After that, the blue one will be shrinked bit by bit until the new one is full displayed. The vertical policy of this new widget is maximum and the size will depend on the number of elements it contains.

    I have tried with QPropertyAnimation modifying the maximumHeight property but instead of achieving an "overlapping effect" the widget looks squeezed and when its height grows, the content is expanded. This is not the effect what I want.

    My second try was moving the red one covering the yellow one but the blue one is not expanded. This is how it would look:
    alt text

    Any idea how can I achieve this?


Log in to reply