How to fit all the widgets together using grid Tkinter - python-2.7

I'm trying to fit all widget, I have tree frames:
First frame:
Have a label (that need to have some name with a big letter size)
A custom combobox to change the value of the label if nedded
A button to make the selection of the combobox
Second frame:
Have a treeview with some information that when I make a clic in one row another treeview appears in the 3rd frame. This treeview have occupy all the frame
Third frame:
Have three columns:
The first one have two rows:
Fist row two buttons add and remove, that have occupy all the row.
Second row a treeview that have occupy all it space. This treeview appears when click a row in the first treeview, how can I show the empty treeview and fill in when click the row. The function is OnDoubleClick
The second column:
Have two buttons that have to be in the center of the rows.
The third column:
Same as the first but with other treeview.
Here is an image of what i want to achive:

I'm not going to rewrite your whole program because that's a lot of code, but I'll explain the way I would approach the problem. Tkinter layout is really simple if you are methodical and organized, and try to solve only one problem at a time.
Main layout
First, you seem to have three main sections: a toolbar across the top, a middle section with a treeview, and a bottom section with a whole bunch of stuff. So, first thing I would do is create three frames, one for each section. Then, I would use pack like this:
toolbar.pack(side="top", fill="x")
main.pack(side="top", fill="both", expand=True)
bottom.pack(side="top", fill="both", expand=False)
I don't know if that third section should expand or not. It's not clear what sort of behavior you expect when the user resizes the window.
Toolbar layout
This one is very straight-forward. It's three widgets spread equally. You can use pack or grid, either will work just fine.
Main layout
This just has a treeview, or maybe a treeview with scrollbars? Again, pack or grid works just fine with such a simple layout.
Bottom
This one appears to be made up of three sections: a left section, a middle section, and a right section. Like with the main layout, I would start by creating three frames, all as children of the "bottom" frame created earlier. Then, I would again use pack since it's a simple horizontal layout:
left.pack(side="left", fill="both", expand=True)
middle.pack(side="left", fill="both", expand=False)
right.pack(side="left", fill="both", expand=True)
By setting expand=True to the left and right sides, if the window grows or shrinks, these will grow or shrink too while the middle section stays its natural size.
Bottom-left and Bottom-right
Both of these look identical. It looks like the easiest thing to do would be to create the widgets (ie: no more frames), and then use grid to lay them out. Though, if by "buttons" you mean you could have several, you could create a frame for the buttons so that you can more easily pack all the buttons from left to right.
Bottom-center
You can create buttons that are a child of this frame, and use either grid or pack.

Related

Qt splitter auto resizing

I have a 4 way splitter in qt, i want to be able to expand the splitter when a user moves one of the tabs instead of collapsing the other tabs to make room.
This is the default state of the splitter when the program launches:
This is the state of the splitter after I try to expand the left most tab of the splitter.
See how in the second picture the splitter has just smushed the three tabs on the right together to make room for the tab I expanded? Instead of this happening i would like the entire splitter to grow to preserve the size of the 3 tabs on the right and to accommodate the expanding left tab.
One last thing, this splitter is nested inside a scrollarea to accommodate the expanding splitter widget.
Does anyone know how I would go about accomplishing this?
One idea that I had was to keep track of the sizes of the individual tabs before and after the user resizes a splitter and then adjust the size of the entire splitter to reflect the increase or decrease in the adjusted tab and reset the other tabs to what they were prior to the change. However I am not sure how to get the sizes of all of the tabs before and after a resize.

Qt - QScrollArea - align added widgets to top

I have a 150x450 QScrollArea with a VBoxLayout in it. I have to dynamically (while a video is being played, frame by frame) add an unspecified amount of QLabels, ranging from none to hundreds.
When I start adding, QLabels start appearing exactly in the middle. Then when another appears, they shift so the middle is exactly between them. So on and so on.
How can I make them appear from the very top and just go down? Without shifting positions and wiggling?
Having hundreds of labels in the application and layouting them in your scroll area will cost you much memory and performance. From the other hand Qt has the number of dedicated classes to handle multiple items in a scroll area such as: QTableWidget, QListWidget, QTableView etc. All these classes designed to handle rows of items and have all related functionality. Using them will free you from taking care about layouts, scrolling and so on.

How can I overlap qwidgets while using the grid layout and positioning overlapping widgets a particular distance from the window border?

I am programming a game and I have a tab widget which takes up the majority of the window. I want to use the extra space in the tab bar for buttons. I have the tab widget in a grid layout. To accomplish this, I use the code below in order to remove and add back the button widgets to the desired areas (the solution to someone else's question).
ui->centralLayout->removeWidget(ui->exitButton);
ui->centralLayout->removeWidget(ui->ResizeButton);
ui->centralLayout->addWidget(ui->ResizeButton,0,4, Qt::AlignTop|Qt::AlignRight);
ui->centralLayout->addWidget(ui->exitButton,0,4, Qt::AlignTop|Qt::AlignRight);
This does not work for me; however, because I would like the second widget-- the resize button-- to be just to the left of the exit button. What is occurring is that it instead overlaps the exit button. I simply need to move it 21 pixels to the left and have no idea how!
I tried putting both buttons in a frame and then removing and adding the frame the way I did the buttons. Unfortunately the same functions I used do not exist for the qt frame object.
Here are some pictures of my window.
https://docs.google.com/document/d/17w5USWQcCtb6OdcRShdcYcRjXTcdVpmdrG5TWLX71y8/edit?usp=sharing
you are using void QGridLayout::addWidget(QWidget * widget, int row, int column, Qt::Alignment alignment = 0) overload.
2-nd and 3-rd parameters are row and column of a grid. And you put 2 widgets in the same cell so they are overlaping each other.
I solved my problem. Earlier when I was trying to add them to a frame and reposition it I could not but using a widget as the container for my buttons let me place them the way I was earlier attempting to individually place the buttons.

Roku-Create Selectable List

I am in the process of making a Roku channel. The idea is to have a full screen player going, if the user presses a particular button on remote, a small pop up menu will display in a corner of the screen with a list of available channels. I have all working with the following exception: I can't figure out how to populate the area where the menu displays. Currently I have a transparent roImageCanvas on layer 1, the menu box is drawn on layer 2. The problem is that roImageCanvas allows for a text element but only one Item. So if I have a list of 10 channels, I would have to create 10 items on the canvas. The roImageCanvas does not accept arrays. So there is no way to create the pop menu on the fly if the number of channels changes. The number of items on the canvas has to be hard coded as far as I can tell. Ideally the roListScreen is what I would like to pop up but from what I understand all screens are full screen all the time. Does anybody know of a way to populate the targetbox on the canvas or create a screen that is resizable? Thanks for any suggestions
A roImageCanvas layer is an array. There is no technical limitation to you adding >1 elements to a layer and so you can add as many separate text items as you want (not hard-coded!). It seems to me best to have 1 text element per 1 menu item, so you can use their bounding rectangles (or text color) to highlight the choice

Change resize behavior in Qt layouts

I want my custom widgets to gain extra space when the dialog is resized. This was working when I only had a handful of widgets, but after adding several more columns of these same widgets and putting them in a QGridLayout, the extra space merely goes in as padding between the widgets.
I've had trouble with this in the past and here are some of the things I've found:
First make sure all the widgets you want to expand have sizePolicy set to "Expanding".
Make sure the widgets that make up your custom widgets are in a layout that allows for expanding. You can check this by just adding one of your custom widgets to the window and seeing that it expands as expected.
Make sure any widgets on the form that you do not want to expand have a fixed (minimum=maximum) size in the dimension you want them to stay static.
Sometimes the grid layout causes some weird spacing issues because rows are resized based on the largest widget in the entire row and similarly for columns. For some layouts, it is better to use a vertical layout that contains horizontal layouts or vica versa to create a grid-like effect. Only this way, each sub-layout is spaced independently of the other rows or columns.
Controlling grid expansion programatically
I've found that you can easily control which columns/rows expand and which columns/rows stay fixed in width by using QGridLayout::setColumnStretch() and QGridLayout::setRowStretch(). You'll need to provide weights to the specific columns (0 for no stretch).
For example, if you want column 0 to not take up any room and column 1 to take the rest of the window's room, do this:
QGridLayout* layout ;
// Set up the layout
layout->setColumnStretch( 0, 0 ) ; // Give column 0 no stretch ability
layout->setColumnStretch( 1, 1 ) ; // Give column 1 stretch ability of ratio 1
Controlling grid expansion using Qt Designer
You can do what I described above if you're using Designer. Just look for the widget properties layoutRowStretch and layoutColumnStretch. It'll contain a comma-separated list of integers.
Another option is inside of QT Creator, to specify in the top level layout widget of the section you want fixed size a layoutSizeConstraint of "SetFixedSize". You must also remove all spacers from beneath that widget. In my case, I had a dialog with a TreeWidget, a Table, and some color selection stuff. I wanted the color selection controls to remain the same size horizontally, so they were in a VerticalLayout. I imagine you can do the same with a HorizontalLayout too if you want things to stay the same height. IF you really need spacers inside the layout, you can probably use blank labels with fixed size.