The pack layout method in tkinter

in this video we are going to cover the pack layout method in tkinter the project we are going to make by the end of this video is going to look something like this it's nothing too complicated but definitely enough to understand the basics of this layout method let's talk about it in the most basic sense Pac works by stacking widgets in a certain order by default we are stacking widgets from the top to the bottom which means the first widget is all the way on the top and then with widgets always below that you can already tell here we have a couple of ways to customize this for example we can tell the widget to take up all of the horizontal space or all of the vertical space like so to create these kind of effects you have three different arguments that you have to understand the most important one is the site this one determines which side the widget is added to the options here are fairly straightforward we have left we have right we have top and we have bottom with top being the default argument besides that we have expand that is true or false this one determines the vertical or horizontal space in which it can occupy can here is the key word because expand only determines how much space a widget potentially has it doesn't tell you how much space it is actually going to use fundamentally what you have to understand is that in t Kinder we have a disconnect between the space in which it can occupy for example this widget for here could theoretically occupy this entire space but the widget itself might only occupy this area here we have to specifically tell the widget to actually occupy all of this additional space here it doesn't do it automatically for that we have one more argument and that is called fill this one determines how much space to which it is actually going to occupy the arguments we can use here are X Y both and none none being the default argument this one tells the widget to be as small as it possibly can however if we specified X in here we would tell the widget to take up all of the horizontal space which would make the widget look something like this if you understand these three arguments you can use Pac really well although there are two more arguments that you do need to understand both of those are for the padding those two are incredibly easy and I'll cover them at the end don't worry too much about them so let's go into a bit more detail for the site again we have left right top and bottom and this determines the direction of the widgets or rather how we are stacking these different widgets the four options we have are top bottom left and right I don't think I have to explain all of this too much it should be fairly straightforward let's get started by playing around with this argument here I have some basic tkin Tech code I am importing tkinter I have a basic window with a title and a geometry and I'm running the main Loop that way if I run the entire thing you can see a basic window on top of that I have created a couple of widgets most of them are labeled with some basic text and a background that way it's easy to see what's going on finally I have a button that doesn't do anything you cannot see any of these widgets because I am not placing them on the main window but this I want to do by adding another section that I'm going to call layout for this one I want to place all of the labels using the pack method I have label one label two label three and the button if I run this now you can see we have the basic pack order we start all the way from the top and we're going downwards with each widget taking up the minimum amount of space in this packing order we can customize let me select all four of them and in here I want to specify a side by default we have top if I run this one we cannot see any difference however if I change this to let's say left now the widgets are being placed from the left and we're going further to the right with the first widget being placed all the way on the left the next widget is to the right of it and then so on the same is going to work with right and finally we also have bottom there we go this should be quite straightforward you can also combine different sides meaning not all of those have to have the same side for example the first label could have decide right and if I do that we get some slightly weird outcome I'll talk about this later for now just ignore it with that we have the basics of the site next up we have the expand method this can be either true or false this one determines how much space a widget can occupy again can is the really important word here also the widget only expands in One Direction let's talk about this one once again we have a window and we are placing One widget and then we are placing the second widget this is the one we have seen already what you might assume here is that expand expands this widget all the way left and right but that is not the case because the width of a widget is not set by expand if the site is top or bottom instead we would only set the height of the fourth widget or in other words height is set by expand but only vertically in this example and I'm pretty sure this is kind of confusing and for that I have made a couple more slides the most important thing you have to understand in t Kinder about layouts is that there are two kinds of space this space in which it can occupy and the space at which it will occupy by default in which it will only be as big as the content it needs to cover for example if we have a label the label widget is only as big as the text that needs to display but that being said even by default the widget can occupy much more space than that for example here we have another window and we have a couple of widgets inside all of these widgets will only occupy the space that they need to display the content for example if all of these are labeled we would have a space to cover the space of some text this is the space the widget is going to occupy this is actually what we have already seen if we return to the app and let me change the bottom here to Top Again like so when we place all of these widgets by default they are only taking up a tiny amount of space you can see this via the background the widget essentially is always only as big as the text the exception here is the button this one is a tiny bit wider but not that much so by default this is the size we get for every single widget however all of these widgets can occupy more space the amount of space that can occupy determines on the side right now our site is top which means we are placing the widgets in a downward Direction so top is our current site with that the witches could occupy the entire width of the container which in this case right now is the window the same is going to be the case for the bottom side in either case widgets are going to occupy the entire width of the container and expanse is going to tell them to take up all of the available space in that direction for example if we add one of widget here and set expand to true for this one then it's going to take up the entire rest of the available space but only in the current direction that we are working in which is this downward Direction meaning the widget is going to take all of the remaining vertical space and on top of that it is also capable of occupying the entire horizontal space and just for completion's sake here when the site is top or bottom widgets can be as wide as the entire container and the expand method determines the height of the widget if the site is left or right then the widget can be as high as the container and expand determines the width I hope all of that makes sense this is definitely something we have to play around with here we are back in the code and I want to add the expand method to label one by default expand is simply false if I run it like this we're not going to see any difference however if I said expand to true then the first label is going to occupy basically the entire vertical space we are starting all the way on the top here and we're going all the way to the bottom decenter here is fairly intelligent it knows if there are other widgets and those need to occupy their space as well but other than that we are occupying the entire height of the window we are telling the first label to occupy as much space as possible and the other widgets take up the minimum amount of space which is exactly the space they need to display the text although that being said as you can see in here all of these widgets still are very small all we are telling them now for example for the first label that this widget can take up all of this space but we are not telling it to actually fill this entire space which means we have a ton of space around the first table but we're not filling that we're going to cover that in just a bit on top of that we can also set multiple widgets to expand being true and tick inter separates the space here intelligently although right now this is kind of hard to see I think a better way to illustrate this is if I set the first and the last widget with expand being true now you can see we have the first widget covering the entire almost the first half and the bottom also gets the same amount of space like so in between we have the other two widgets only covering the minimum amount of space and this is also going to work with the other directions for example if I change top to left then we can see if I expand this a tiny bit we now have the same issue again the two middle widgets only occupied the minimum amount of space whereas the first table takes up as much space as I can same with the button like so this however doesn't feel particularly satisfying because we need one more argument to make all of this work properly for that we have the film method this one can be X Y both or none and this determines if it widget will occupy the available space by default this is going to be none which is telling the widget to only be as large as it needs to be to cover the content if we set this to X we are telling the widget to cover the entire horizontal space if we set this to Y we are covering the entire vertical space and when we set this to both we are covering the entire space that is available let's have a look at this one once again we are in the code I want to set this back to top so it's a tiny bit easier to see what's going on for the first widget now I want to specify a film method the one you probably want to use most of the time is called both and if I specify this one now my first label covers the entire space it can potentially take up I could set this to X only then we are covering the entire width and if I set this to Y then we are covering only the entire height for this one I want to keep it at both the same we can do for the button let's say for this one I want to fill this thing in the y direction there we go we have a button that covers the entire available height and now I can also demonstrate that widgets by default cover the entire width even if we don't use expand for example for Label 2 if I said fill to both we can see that the label didn't grow in the vertical Direction but now covers the entire width of the window which means if I only set this to Y we're not going to see any difference because the widget doesn't have any available space it could take up although if I set this to X we can see the entire width is being occupied so these are the three major arguments you have to understand site expand and fill and I don't think they are particularly difficult although since this is really important I want to add an exercise in here and I want you guys to recreate this kind of layout pause the video now and see if you can copy this I guess let me move it a bit to the side so we can see what we have already there we go now pause the video and try this one yourself what we can see here is that the first label and the button at the end only occupied the minimum amount of space meaning those don't have expand whereas Label 2 and the last of the labels are occupying as much space as they can which means those two get expand finally Label 2 doesn't have any fill because the widget itself is very small whereas all of the other widgets do fill up the available space shouldn't be too hard to replicate the site remains identical for all of them although for label 1 pack should not be true so I'm just going to remove it although fill is going to be both if I run this again now we have the first label all the way in the top and this is already a good starting point so first label is done Label 2 however is going to need quite a bit of work this one is not supposed to be filled but I do want to expand the entire thing I'm going to set it to true and there we go now we have Label 2 with a ton of white space around it if I compare it to the goal this is looking pretty good next up we have to work with label three this one I also want to expand so expand is going to be true and I want to fill this one as well both let me run this again now and we are almost there this is starting to come together quite well the issue we have right now is that the button is way too tall that happens because expand is true for the button let's remove it let's try this again and we are nearly done the last thing we have is that the button doesn't fill the entire width like we have done in the goal the reason for that is that right now the button only fills the vertical space but I want it to fill the horizontal space and now we can try this and there we go we have replicated the entire window of the exercise if you could figure this thing out yourself you are understanding about 90 of the pack method the rest is going to be fairly simple the last two arguments inside of pack are two kinds of padding the first argument is either pad X or pad y or both I guess this one creates space around this widget which means we are essentially creating a larger box around this widget and filling the box with empty white space it is not going to be visible besides that we have iPad X or iPad y this one creates padding inside of the widget which means that we are expanding the widget itself or in practice we're not filling the entire space with white space instead we are expanding the widget let's play around with this one as well in the code I think that's going to explain all of this much better for label one I want to add pad y if I set this to let's say 50 pixels now we have something that's very hard to see to make this a bit more visible for Peg 2 I want to set fail to both that way we can see where label 1 ends and level 2 begins let me run this again there we can see what this pet y has done is it created padding around the top and the bottom of the widget that way we have a bit of space and the larger number gets the more white space we have the same thing you could also do for pad X if I set this let's say to a hundred now we also have a ton of white space on the left and on the right of the widget all of this is padding I think this one is fairly straightforward besides that we also have iPad Y and iPad X although for now I only want to cover iPad y because conceptually this can be a tiny bit complicated to understand let me run the code again now we can see that the widget is quite a bit larger we are covering this bit of extra space this happens even though label 1 doesn't have any expand method the reason why it occupies more vertical space is because of this iPad y we are essentially pushing the widget to be a bit larger by the amount of padding we specify this is in contrast to pad X this one creates white space around it I hope you get a difference here most of the time you are only really going to use pad X because iPad y you don't really need that much if you understand expand and fail they basically fulfill the same task that is going to leave us only with one more thing to cover and that is that you can combine different sides inside of the pack method although if you're doing that the order of the pack holds really really matters on top of that usually you don't want to combine different sides I'm going to cover this in the next video but using frames to organize a layout is much much cleaner first of all to make this as easy as possible to see I want to remove the padding and instead set expand to true for all of them and also fill both for all of them this I also want to do for the button like so now if I run this we have four identically sized widgets but let me change the top for the site for the first widget to left if I run this now we can see that the first label takes up a huge amount of space and why is that let me put the widget to the side here the main thing you have to understand is that the first time you're calling Peg with a certain kind of site this side is going to get priority which means right now the first label is going to try to occupy as much horizontal space as it possibly can then it sees these other widgets here but all of them are set to top which means the horizontal space is going to be ignored as a consequence they only get as much space as they need to display their text you can see here the largest label is this one the last of the labels this one occupies the most amount of space and this one determines the width of all of these widgets that is the reason why this label gets this much horizontal space and since there's no other widget in the vertical axis it occupies the entire height of the window after that the other widgets only get this remaining amount of space and they will divide the space between the three of them once again you can be really fancy with this kind of system but most of the time you want to use frames to organize out of this and that's going to be much cleaner again I'm going to cover this in the next video although this is something that you want to practice which means we can do another exercise here is one window that is a tiny bit more complex try to create this one yourself and see how far you get you probably have to experiment quite a bit but it's certainly doable if you could follow along so far first of all I want to set top to all of the sides if I run this again now all of the widgets occupy the same amount of space next up for Label 2 I have set the site to left what this one is doing is let me move this window a tiny bit to the side TK enter sees that we have three widgets that occupy the top Direction and since the first side that we are looking at is top it starts with that this means taken that tries to get the entire height of the window and separate it into three different areas we have one we have two and we have three they can already see this determines the height of our widgets besides that teak enter sees that we have one widget that has left however this one comes after the top which means tkinter tries to push this first label as far as it can but I can only push it up to this first line here because we have two other widgets with the top side this constrains the height of the first label this also determines the height of label 2. this is the entire height finally for the width like so taking the knows that there's no other widgets inside of our sites that occupies any horizontal space so Label 2 tries to take up as much space as it can the only constraint is last of the labels this one needs to have the minimum amount of space to occupy last of the labels the bit of text here which sets the maximum width of Label 2 to this point here and with that we have the basic layout the last thing we have to do if I show it again we had some padding around the first label this is quite easily done I want to have pad X for 10 and Pad y I've set this one to 10 as well if I run this again now here's what I created in the exercise and once again this kind of setup can work but most of the time it is much easier to use frames to make out of this much easier and that's going to be the next video I'll see you there

Channel: Atlas

Views: 12,922

Keywords:

Id: rbW1iJO1psk

Length: 23min 49sec (1429 seconds)

Published: Wed Dec 14 2022