0

I'm trying to play around with the GUI layouts and see what I could do with it. Here's what I wish to achieve: there is a title frame on the top half of the widget, and it should look like this:

*****************************
*        [LOGO]     [button]*
*****************************

The logo should be in the center of the frame and there is nothing to the left of it. There will also be a button on the right of the LOGO. LOGO has a fixed size.

I could set the LOGO in the center without the button, but as soon as I add it, the position of the LOGO is changed.

So my current solution is to add a test label with no text to the left of the LOGO, this way the frame becomes symmetric with the LOGO in the middle.

But I'm still curious about the correct way of doing this layout, can anyone help? Thanks very much

user2178705
  • 15
  • 4

1 Answers1

0

You might consider using a QGridLayout and calling QGridLayout::setColumnStrech to assign precedence to the appropriate columns. You could also use a QSpacerItem to add space in between your widgets.

Here is some example code:

QGridLayout *gridLayout = new QGridLayout;
// Set the minimum widths for all three columns of the grid
gridLayout->setColumnMinimumWidth(0, 100);
gridLayout->setColumnMinimumWidth(1, 300);
gridLayout->setColumnMinimumWidth(2, 100);

// use width 100 to fill the first column
QSpacerItem *spacer = new QSpacerItem(100, 0);
QLabel *logo = new QLabel;
QButton *button = new QButton;

gridLayout->addWidget(spacer, 0, 0);
gridLayout->addWidget(logo, 0, 1);
gridLayout->addWidget(button, 0, 2);

Also, see the answer to this question for more information: QGridLayout, 3 panes, not expanding properly

Community
  • 1
  • 1
Cameron Tinker
  • 9,634
  • 10
  • 46
  • 85
  • Thanks for the reply! I have tried both methods but they don't work quite as I expect. I could have a grid layout with 3 horizontal grids, but if I don't put anything inside the leftmost grid, the widget in the qt designer would look correct but when I run the app the LOGO is at a different place. Using the spacer to the left and right of the LOGO would cause the LOGO to be slightly to the left of the center, because of the button on the right. – user2178705 Nov 22 '13 at 20:15
  • You'd need to make sure that column one and three are the same width. Then your second column would be centered. – Cameron Tinker Nov 22 '13 at 20:17
  • Is there a way for me to set the width of the column? It seems to me that the width of the columns are set automatically based on the widget size inside that column. I tried to adjust it inside the designer but failed. – user2178705 Nov 22 '13 at 20:35
  • I have added some example code to my answer to demonstrate how to size the QSpacerItem and add items to the layout. – Cameron Tinker Nov 22 '13 at 21:34