I want to make a GUI with QT Creator 4.9.1 ,my aim is to split my mainwindow into 5 areas(no multiple window), my question is how can i realize that, or better what is the best Layout solution for that?
I have allready tried to set a datagrid and add inside that grid 5 frames, the problem is that the first frame has the size of my whole datagrid and i can't resize it.
My next try was to add 5 different datagrid on my GUI but i can't set the size of the datagrid's in QT like wpf or forms.
My last try and my current solution is without any layout, i add 5 fame's inside my mainwindow but that isn't a good solution.
Inside visual studio i realize that with datagrids i create for every menu one grid and change the visibility when the user need a other (area 2).
friendly wishes sniffi
The suggestion to using dock windows may be a good one to investigate, particularly if you need to allow the user to resize or move things around. However, to get the layout you want with just layouts, the trick is to use multiple layouts.
Create a vertical layout for the left-hand side and add the four widgets to it. Create a horizontal layout and add the vertical layout in the first column and your tall, fifth widget to the second column. Apply the layout to your main windows, and that should give you roughly what you're looking for.
You'll almost certainly need to play with the row stretches on the vertical layout to get the proportions you want, and with the column stretches on the horizontal layout.
The alternate would be to create a grid layout where the widget on the right side spans four rows, but I think you'll be happier with the mix of the two layouts.
Related
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.
I am trying to make a basic wireframe design before I add colours, etc. As seen in the two pictures below, the sizing of the layouts is very different in designer and when the program is run. I have tried changing the layout stretch but it has no effect.
Designer:
Running program:
You need to decide what should happen when the window is resized larger than the size shown in Qt Designer. Presumably, you don't want the "Logo" and "Date" rows to expand to take up the extra vertical space, and you don't want the "Modules" row to expand either. So the extra space will have to go at the bottom.
The simplest way to achieve that is to put an expanding spacer immediately below the "Modules" row, but inside the outer layout. This will push everything up against the top of the window, and only allow space to grow at the bottom.
I am trying to create a grid layout of images kind of like how google images does it.
I want to add fixed sized images left to right, top to bottom but I am having trouble is figuring out when adding another image to a row would make it not fit and then decide that that images should be placed in a new row.
Also when the window resizes it should move images into/from rows based on how many it can fit in.
Ive got a scroll area with a grid layout in it which is fine if I know what can fit, but I can't figure out how to make it move items if say the window width is shrunk, and say an item needs to be moved down 1 row which moves other etc.
Assuming you are using QWidgets I'd suggest you to use QListView which does the layouting for free, if you want more control on how items are displayed use a QItemDelegate. For QListView the view mode should be set to QListView::IconMode so that you have a grid of items and not a list.
But if you are using QtQuick things are much easier, a GridView with Image delegates would do what you want really quickly and using GPU power to build you UI.
I use grid layout (horizontal and vertical too). I like the fact that when resizing the window fills the entire window contents. but this extension is poorly managed. I often want to change the size of only one column in grid layout without changing the size of the window. such as in Windows Explorer. there are two columns - the left list of directories and their contents to the left to the right. and i can always press mouse button therebetween and pulling change the mutual sizes of columns in relation to each other.
how can I do this in Qt?
You need to use a QSplitter rather than a QGridLayout in this specific case (where you just want 2 widgets shown together). QSplitters are draggable.
You are looking for QSplitter
(The following is the procedure in the Qt Designer)
Group your widgets, and click Lay Out Horizontally/Vertically in Splitter
Put this group into another layout (QGridLayout, for example) to automatically expand it.
Congrats! Your Layout is now draggable(from step1) and expandable(from step2).
I am using qt designer and python. I want to make a layout where a user can drag widgets to control the size while at the same time scaling properly with the window. Basically all 3d modeling programs have this function, usually it has a top left right and perspective view. The user can drag the edges to resize each view and it will maintain that aspect ratio when the main window is resized. My question is similar to this: active resizing of widgets inside mainwindow but I would like to do it in qt designer.
So what I have found is the layout horizontal/vertical splitter. However I am only able to layout two widgets horizontally, and another two widgets horizontally, then grid layout. This makes it look similar to what I want except I want the top and bottom horizontal layouts to also be re-size able.
Thanks
Edit:
I have been able to do this with putting both horizontal split views in a group box and then splitting the two group boxes, however that makes each widget independent and does not let the user grab the middle axis to control all 4 views.
You are essentially asking for a splitter than works across two axes - no such standard widget exists. So you will have to create your own.