12

I want to overlay two widgets in QtDesigner: There is the big QTextBrowser, and below in the down right corner should be a non-interactiv label that I am going to use as a drag-grip to resize the window (the main widget is frameless so I need to implement it). Usually this label will sit below the QTextBrowser, which leaves on the left of the grip-label a lot of unused space. So I want to put the grip-label above the QTextBrowser. I want to achieve this in QtDesigner. But the code would look like:

QHBoxLayout *layout = new QHBoxLayout(videoWidget);
QLabel *overlayWidget = new QLabel();
overlay->setAlignment(Qt::AlignCenter);
overlay->setText("Overlaid Text");
layout->addWidget(overlay);

Or as I already did in python: self.textedit = QTextBrowser(self); ... gripImage=QLabel(self.textedit);

There the part between the brackets is the parent widget.

That's how it looks right now, but this is not what I want:

enter image description here

user2366975
  • 4,350
  • 9
  • 47
  • 87

2 Answers2

14

This is usually simplest to achieve by using QGridLayout. It allows widgets to occupy the same grid cells. For this particular problem, a 1x1 grid is enough.

Steps to try it out with designer:

  1. Create new form, plain Widget for simplicity
  2. Add a text edit to it (drag and drop from Widget Box), and from Object Inspector you should see it becomes child of the root widget
  3. Add a label to it (drag and drop from Widget Box), and from Object Inspector you should see it becomes child of the root widget
  4. Right click on the root widget (easiest in the Object Inspector), and from the bottom of context menu, select Lay out > - Lay out in Grid
  5. Right click on the label, and from Layout alignment > set it aligned to the corner you want

Done. Here's what it looks like in my Designer:

enter image description here

Now adapt above to your real form.

Ok, it appears achieving above with Designer is hard, and perhaps a bit a matter of luck of doing things just right... Designer just doesn't support doing what you want, it seems.

For clarity this is a complete source code:

QGridLayout *layout = new QGridLayout(widget);
QTextBrowser *textBrowser = new QTextBrowser();
QLabel *label = new QLabel();
label->setText("Overlaid Text");

//label gets positioned above textBrowser and is an overlay
layout->addWidget(textBrowser, 0, 0, Qt::AlignLeft | Qt::AlignTop);
layout->addWidget(label, 0, 0, Qt::AlignRight | Qt::AlignBottom);
Toby Speight
  • 27,591
  • 48
  • 66
  • 103
hyde
  • 60,639
  • 21
  • 115
  • 176
  • The label widget is still next to the text edit, not above it in its corner. I would expect that it would become a child of textedit in the object explorer if I had success – user2366975 Feb 13 '14 at 21:37
  • @user2366975 Added a screenshot to the answer. – hyde Feb 13 '14 at 21:47
  • I also added a screenshot. Somehow I can't achieve what you did, it just keeps moving around next to the textedit – user2366975 Feb 13 '14 at 22:00
  • 1
    @user2366975 Your screenshot looks like the handle label is in different `QGridLayout` cell, than the textedit. – hyde Feb 13 '14 at 22:03
  • 1
    @user2366975 Yeah, after playing around a bit, getting what you see in the screenshot of this answer is really hard to achieve with Designer. So better add a bit of code. – hyde Feb 13 '14 at 22:17
  • Okay, so you say it is possible to change a widget's parent afterwards per code? – user2366975 Feb 13 '14 at 22:20
  • @user2366975 Yes, Qt's layouts are completely dynamic. Of course better do it before widget is shown (like in constructor), so user does not see a layout changing after window is shown. – hyde Feb 13 '14 at 22:24
  • 1
    @user2366975 in order to properly select the row and column of the widget that stays underneath, I had to use `indexOf(Widget*)` and `getItemPosition(...)` – gibertoni Oct 02 '15 at 18:41
  • 1
    The problem is that when you add the item in Designer mode, they are added to different columns of the Grid. However when you add them using source code, you are adding both items to the same column. – kato2 Feb 07 '19 at 03:10
  • In case someone wants to use this solution with a `QGraphicsView` and got the problem that it won't use all available space: Do not add any alignment to the `addWidget` for the graphics view. – user136036 Feb 02 '20 at 13:50
  • For the coding approach using `QGridLayout`: is there a way to add margins to the overlay, basically allowing it to put it whereever you want relative to the widget below? – mapf Feb 18 '21 at 14:52
1

I had the same problem but I did not manage to add Overlapping widgets in QtDesigner. Instead, I had to create the overlapping one dynamically after initializing my MainWindow.

I've got two widgets:

  • dataset_tableWidget (tableWidget)
  • spinner_dataset_tableWidget (QtWaitingSpinner)

and I wanted to make spinner_dataset_tableWidget spin over the dataset_tableWidget.

After initializing the MainWindow you can do:

#Crating QtWaitingSpinners dinamically and positioning it over the tableWidgets
dataset_tableWidget = QtWaitingSpinner(dataset_tableWidget)
dataset_tableWidget.setSizePolicy(dataset_tableWidget.sizePolicy())
Matheus Torquato
  • 1,293
  • 18
  • 25