I am new to QT. I'm trying to understand the layout mechanism by trying to implement this small window seen below. It has the following elements under the QWidget that's the main window:
One big QWidget that stretches on all the client area.
Two QWidget containers on the top of the window. Both should have the same height, but the right one stretches horizontally, as the window grows/shrinks.
one button container widget on the top right, with fixed height and width
Large QWidget container filling the rest of the client area, that should resize as the window resizes.
The parent window itself is resizeable.
I'm looking for hints as to what layout I should use. How do I achieve this programatically? define what stretches automatically, what stays with a fix size? and how the proportions are kept where they need to be kept.
I'd appreciate any pointer you may have.
The easiest, and IMHO best, way to accomplish this is via the QHBoxLayout and QVBoxLayouts. You can do this via the designer in QtCreator, but I find it doesn't work perfectly if you need to adapt things over time. If it's a static set of widgets, I do suggest designing it using the QtCreator designer as it'll greatly simplify your life.
If you're going to do it programatically, the main window should be set to use a QVBoxLayout and then two sub-QVBoxLayout's after that, where the bottom one is configured to take any space it can get. Then in the top QVBoxLayout, add a QHBoxLayout with your two upper components.
to set a widget to fixed size in code you call setFixedSize( int h, int w ) on the widget. To do it in Designer click on the widget and look in the property editor in the QWidget section. open the sizePolicy thingy and set horizontal and/or vertical to fixed. Then open Geometry and set the width and Height.
To make them stretch at different ratios in code you use a separate argument when using a box layout. eg layout->addWidget( button1, 1 ); layout->addWidget (button2, 2); this would cause button2 to expand at twice the rate of button1. To do this in designer, open the sizePolicy property of the widgets and set the HorizontalStrech and/or VerticalSretch. Note that the size policy needs to not be Fixed in this case for the direction you want to set the stretch on. Also it will never let a widget shrink below its minimum size (it would rather mess up the ratio than shrink something too small).
Related
I'm trying to follow the example at the below link to have a picture (in a qlabel) shown in a scrollable area.
https://doc.qt.io/qt-5/qtwidgets-widgets-imageviewer-example.html
I'm using Qt Designer to make the ui instead of hardcoding everything. So I have a QLabel, in a QWidget (with a grid layout assigned to it), in a QScrollArea.
From the tutorial, they state the following for the sizepolicy of the QLabel:
We set imageLabel's [QLabel] size policy to ignored, making the users able to scale the image to whatever size they want when the Fit to Window option is turned on. Otherwise, the default size policy (preferred) will make scroll bars appear when the scroll area becomes smaller than the label's minimum size hint.
Setting it to ignored fits to the window, as expected and as stated. Setting it to preferred provides scroll bars when the image is larger than the scroll area, also as expected and as stated. My issue is that when the sizepolicy is set to preferred, the resize function of the QLabel doesn't work. It always stays at the default size of the loaded image. The only way that I'm able to get the resize function to work is when I don't assign a layout/break the layout to the widget in the QScrollArea, but then no scrollbars will appear when the image is larger than the QScrollArea.
Does anyone have any ideas of how to make the resize function and scrollbars work at the same time?
Thanks in advance for any help. I'm trying to learn qt5 still and this seems like it'd be a simple thing to do, but it's slowly driving me crazy.
Background: I need Command Link-like controls. Normally, I would use Qt's builtin QCommandLinkButton, but in this case I need to also support Right-to-Left layouts. Regrettably, QCommandLinkButton doesn't seem to respect Qt::RightToLeft when set explicitly via setLayoutDirection. There also doesn't seem to be a way to override the layout direction via style sheets.
I tried to work around this issue by using QPushButton: I instantiated QPushButton and replaced its contents with a custom layout containing two labels stacked vertically. This did not work because QPushButton refused to expand horizontally.
Failing to make QPushButton instances work, I decided to try sub-classing it. No matter what I tried (overriding sizeHint, setting vertical sizePolicy to expanding, resizeing explicitly, etc) the button refuses to grow more than 30 pixels high.
If I change QPushButton to QWidget, the new widget grows normally.
The question: How can I force a QPushButton to grow vertically and fit its inner widgets? If this is not possible, what are my options for a button-like widget that is both visually and behaviorally consistent with QPushButton and other "native" controls?
I managed to get the button to grow normally by setting the maximum height to 16777214 (instead of the default 16777215), and then setting the content margins of the button to 10.
Perplexingly, the default maximum height of a QPushButton should be plenty, but for some reason it refuses to grow past 30 pixels unless the maximum height is explicitly set to something else.
Place the button inside a layout and set its vertical size policy to Maximum.
When I run my program it will display all content properly, and when I resizing the main window, the layout along with all associated widgets remain fixed, rather than resizing with the main window. I used to increase my all widget and listWidget respect to window computer resolution size but still this not one work properly.
I used this one code finding the system height and width.
QWidget widget;
widget.resize(widget.width(), widget.minimumHeight());
QRect rec = QApplication::desktop()->screenGeometry();
int h = rec.height();
int w = rec.width();
// Increasing the listwidget size
ui->listWidget->setFixedHeight(h);
ui->listWidget->setFixedWidth(w);
//increasing the button size
ui->pushButton->setFixedHeight(h0.2);
ui->pushButton->setFixedWidth(w0.2);
At this link you will find two screenshots that illustrate my problem.
Please resolve to solve my problem. Thanks very much in advance.
When defining the layout of your windows and forms in Qt Designer you have to define each element of your form in advance, in order to have a working layout.
This solution is based on the screenshots provided in the comments to the question. Follow these steps:
Add an empty widget to the central area of your form, if there is nothing there. It will be used as a placeholder for the controls you will add later, and of course you can replace it with whatever widget you want. But you need it there to define a proper layout.
In the property panel, set the horizontal QSizePolicy of this widget to MinimumExpanding.
Add an horizontal spacer to the left side of your progress bar.
Define a minimum/maximum width for the white widget on the left (I guess it's a text area). As an example set the maximum width to 200
pixels.
Make the same for the QTabWidget on the right.
Give a minimum height to the Groupbox on top.
Then give the grid layout to the MainWindow.
You should get something similar in the designer view (I use a dark theme, yours will have different colors of course):
If you complete all steps you should have a nicely resizing window.
For the future: remember to integrally define your layouts, also using placeholder widgets when needed, read carefully the documentation about the widgets size policies (there are several, you need to play with them to fully understand each one) and keep in mind that Qt uses a container based approach which is different, as an example from those used by the .Net framework that relies on the concept of anchors.
EDIT : to answer questions in the comments
You will need to add a layout to any widget that contains other widgets, e.g. adding controls to your groupbox will require to give it a grid, horizontal or vertical layout in order to scale nicely on resize. Again use spacers and size policies to make it look the way you want. If you need to add or remove controls, or change their positions, you may need to brake the layout, rearrange and then set it again.
You can also select groups of widgets and give them a layout e.g. vertical, than another group and set them horizontal and so on... then give a grid layout to the container widget to build a compound layout.
There are endless possibilities, you just need to practice and go through trial and error as for everything else...
You can also do it all programmatically, check the Qt widgets documentation for this. But for complex layouts I would not go that way: it's a lot of code... and you have to compile and run to test every modification.
Using the QtCreator, within the designer you can simply right-click on the parent-widget and add a Grid-Layout.
This one resizes it's children to it's dimensions.
When I maximize my window, I want to restrict a vertical layout (and the entire row below it also) so that it has a specific size (lets say a width of 200). How can I achieve this? Below is what I get now. The buttons are stretched too far. I want them to keep a width of 200.
To stop the buttons stretching, use the following steps in Qt Designer:
click on scrollArea in the Object Inspector
click on Break Layout on the toolbar
click on scrollArea in the Object Inspector
click on Lay Out in a Grid on the toolbar
click on scrollAreaWidgetContents in the Object Inspector
scroll down to the bottom of the Property Editor
change layoutColumnStretch to 0,1
These steps should remove an empty column from the scroll-area grid-layout, and make the second column stretch to take up the available space when the window is resized.
You just need to restrict the maximum width of all widgets (in this case the buttons) within the layouts of this grid column to the expected size, else they'll just keep expanding. You may also have to fiddle the horizontal size policy; I seem to remember that buttons were a bit tricky in this regard (or was that the height?), but can't test it right now.
The layout size contraint you tried only applies to the layout's direct parent widget, if it has one, which isn't the case for the vertical layouts here.
I am working on a project where I have to display a pretty large (vertically) main Widget.
In the initial Version of my GUI it was just added as the central Widget of a QMainWindow, which caused the Problem that on small screen resolutions the controls on the Bottom of the Widget are unreachable.
To solve this i wrapped a QScrollArea around the main Widget, but now the main window is always relatively small even if it doesn't have to.
What do i need to change so the Main Windows (vertical) size is large enough to show all the contents unless it would be too large for the screen resolution? Also I don't want it to be stretched, so simply always using the whole vertical screen resolution is not an option. Ideally the size should be fixed to the size needed by the contents (w/o the scroll area) and only smaller where needed.
Overriding the sizeHint method did only resulted in a small enlargement of the Window and setting the minimal height brings me back to the beginning where some of the controls are not assessable on small resolutions.
Since i am new to QT I am actually out of ideas how to google the solution because most Solutions I can find are about sizing components inside a Window and not the Window itself.
By default a QScrollArea will not attempt to expand to fit its contents. In order to do this you will need to re-implement QScrollArea's sizeHint() to return the size of QScrollArea's child widgets.
In your question it sounds like you were trying to re-implement MainWindow's sizeHint? re-implementing sizeHint on the top-level window will have no effect as sizeHint designed for use with widgets inside layouts.