How to Add & Remove Qt Widgets Dynamically at Runtime

welcome in this video i'm going to show you how to add widgets to another widget dynamically at runtime so let's get started what we're going to work on is basically what i have here on the screen so i have a form with one button that says click to add widget when i click on this button it just starts to add other widgets underneath i'm using buttons but this works for any other widget and i'll show you and then once you go and click on that set button they start to get deleted so i'll show you how to add and remove widgets so two things i will show you first how to add remove widgets and then the second thing is i'll show you how to add a layout that has multiple widgets in it to another layout that way you know sometimes you want to add multiple widgets that are organized in a layout and how to remove the entire layout with all the buttons or all the widgets it's inside of it just to show you the form real quick uh here we have the button that we're going to click on and then here i have a frame uh you could also use a layout but i'm going to use a frame because i want to show you uh the difference between just adding a widget to another widget and then adding a widget to a layout uh it's it's slightly different so i put a frame but this will also work if you only have a layout and you don't have a frame like you just drag one of these layouts in here instead of the frame uh this works for that as well so i'm doing the frame so that i can show you how you get the layout from the frame where you're going to add all the other widgets and then i have a spacer in there and the spacer is because i want all my buttons just to be aligned at the top and so i will be adding these widgets in between the spacer and the very beginning of this frame uh so yeah it's very simple so let's go look at the code so here's the header file and i've added two functions uh very simple stuff one is an on add widget function which is the function that we're going to call once we click on the add widget button and then we have the on remove widget which is the one we're going to click that step the one where we click the buttons underneath and delete the actual button that we click on right so we're going to code those two functions so in the implementation file just in the constructor i added the connection where when we click on the add widget button we call the on add widget function right nothing nothing crazy we're jus i'm just setting it up so we're going to write code for these two functions on how we add a particular widget so we need to know which layout we're going to insert this widget to right so i have a layout and that layout is inside my frame so i need to go get my frame right so i have ui widgets i call it widgets frame and in there i want the layout right i want the layout that is part of this frame if you are trying to add a widget to a particular layout then you just whatever layout that is you just you know ui dot my layout for example right and here it's a frame so i want the layout of the frame if you're adding a widget to another widget let's say this is not a frame this is an actual widget then you would do the same process it will be ui my widget and then that layout right like you did here it's the same thing frames and q widgets they're very similar okay so notice though that this returns a cue layout and what i want is i want to be able to hold it whatever type of layout that i have so if i have a vertical layout then i want to hold the vertical layout pointer and so in my design this if we look at the layout which if i right click on it i have a let me click on the actual thing i have a well let me let me move this because you can't see it so what i have here is a vertical layout right so right here you see the little stacks so i want a vertical layout if you have a horizontal layout then you use the horizontal version which they're very very likely the same so what you're going to do is going to do v box layout right so v for vertical if you have a horizontal then instead of a v you use an h right and this is no this is going to be layout and of course this is a regular q layout i want a q vertical box layout so in here i'm going to q object pass this to a q b box layout right and then this goes like this so this converts that pointer from a simple q layout to a q vertical box layout right and so after this what we're going to do is we're going to create a button so i want what to show you that we're actually deleting the button that we click on i'm going to put a little different text in it so instead i'm going to say q string button text and this is going to be a button num and then just say number and then whatever number it's going to have once we insert in the widget and it's going to be the layout that we have gotten up here this layout and then this is going to be how many items are in that layout right so when i add one this is going to be the for the zero one and then the first one and the second one so now let's create our actual button and we're gonna be new cube push button and i want it to say the button text and the parent of this button is going to be the frame or whatever widget it's the parent of it if you're adding this to a layout this will be the widget where that layout is so you want to you know maybe this is the form itself the main window whichever you want to whichever it makes more sense to be the parent in my case is going to be the frame so i'm going to say qi the widgets frame right and i want to add this button to my layout so this layer on the top i'm going to add widget and i just put button now the problem with add widget is the add widget always puts it at the end but i have a spacer i don't want it at the end i want it right in between the spacer and the top so instead of doing that i'm going to say insert widget and i'm going to insert it in the zero index so this is like an array or like a list right so in this case we have one item in my layout and that's the spacer i want to insert it at the zero index so i'm gonna squeeze it in between the emptiness of my frame and the spacer right off and then once you have more more widgets then you can actually play where you want to insert that widget and then now what i also want to do is i want to be able to connect when i click on this button i want to remove that particular button that i have added so in here what i'm going to do is i'm going to connect and what i'm going to connect is this button to its clicked signal and i'm going to connect it to this and this is called dynamic dynamic widgets on actually on remove widget right and this will call the bottom function right now to delete it it's actually not too complicated to delete it we want to get that button that we have added and then delete it well it's very simple because the button is the one that is calling uh the slot right from its click signal so in here i can grab the button very easily by simply casting to a cue push button what the sender right so sender is a function that is part of every slot so when i uh this will return me that q object that emitted the signal which in this case is our button right so i capture the button here and then i just delete my button and that's it this by deleting the button you delete that widget and this again could be any other widget it doesn't have to be a button of course for good practices you should check for nulls because you never know so you should check that make sure that this layout is not null and make sure that this button is not null just to be safe with your code i'm not going to do it too to speed this up so we're gonna run this and this this is just very simple once we have this click to add widget here we go button one three four five if i click on three three gets deleted if i click on four and so on so i can clear the whole list start over and start over and delete right so nothing crazy now the last thing is to wrap up this video i'm going to modify this code to show you how we add multiple widgets so instead of having a simple button here we can have a button and a checkbox and whatever else you would like to add right it's not a huge modification but it does well it makes things a little more complicated so let's just go with it so what i'm going to do is i still want my button i still want my layout but instead what i'm going to do is i am going to create another layout and in that layout i will put my button and any other widget that i want so instead here i'm just going to say and this is going to be i'm going to create a horizontal layout so that the items are aligned horizontally so hbox layout and this is going to be new layout you know you can think of a better name and then it's going to be new qh box layout and the parent of this is going to be my frame again whatever parent widget you have that's the parent widget that you want to have so this is going to be widgets frame right and that's it and then i am going to also i i'm no longer going to insert my button to the original layout i want to insert it to the new layout right so i'm going to come here and i'm just going to say new layout and this one i'm going to say add widget i just want to put the button and then whatever i add is going to be the next one there's no spacer here you can put a spacer but i don't want to put a spacer so i don't need to insert it i can just add it right just to show a variation and then the next thing that we want to do is i'm going to add a checkbox because why not so cue checkbox oh that's not it q check box and it's going to be check box again we can think of better names but for this tutorial this is good enough uh check me let's just say check me and then again the parent is going to be the widgets frame and i'm going to add this check box to my new layout uh and that button check box and then i want to add this new layout to the previous layout so i'm going to say layout insert layout again we use insert because i want to squeeze it in between the spacer and the top you're going to be at the very beginning new layout right and so now again when i click delete this is going to be slightly different because i don't want to just delete the button i want to delete everything let's just run it like like it is and let's see what happens uh and you'll see what i mean right so here here you go check me right but when i hit delete you know not nothing just the button got deleted but i want to delete the whole thing right if i if i add five i would like to delete everything not just the checkmate right so let's delete the whole thing so we got to modify the code that we have here now to do that we do need the button but we need also to get the layout and there is no direct way at least that i know of that i looked around there is no direct way for you to get the layout where the widget is inserted you can get the parent widget you can get the layout of the parent widget but in here we have widgets nested within another widget and is there's no really an easy way for you to do that and so uh one way to do that is we have to manage the basically how we connect or how we know how we relate one button with the whole widget so i like to use a hash map for that so i'm going to go to my header and i'm just going to create here a new variable and it's going to be a q hash and this is going to go from my buttons to whatever i want to map it to in this case it's going to be our layout so it's going to be a qh box layout right and it's going to be a button to layout map right oops just one we don't need to and then from here i'm going to add here to that button layout map i am going to insert and it's going to be the key is going to be my button because i have access to my button on the remove function so in here i'm going to have button and this is going to map to the layout where this button was added in this case it's going to be a new layout right pretty simple so over here for me to get that layout that i need it which is a horizontal layout let's just say layout this is going to be what this is going to be the one that i have saved in this map which i get from this button reference so i can simply just grab this value and i want button right so i want what what's wrong oh this is a there's a pointer fellas okay so i want the horizontal box layout that is associated with this button in this map and then what i do from here is i want to delete everything inside of this layout every single item in the layout so to do that i can just go do a while loop while my layout has items in it so while the count is not zero oops uh while it's not zero i'm going to delete every item in the layout so for that i can use a q layout item class which i can get from the layout so in here i would say layout take at zero so give me the first element inside of this layout and it comes back as a cue layout item you can look at the documentation queue layout item can represent several things it can give you different things it can give you layouts it can give you widgets in this case we know that all these things that we have added are widgets so we can just delete the widget itself so from here i'm going to delete the widget that this q layout item is representing or that it's managing there's again there's some wording in the documentation about this but i can delete the widget which in this case it will delete the button followed by delete the checkbox but i also want to delete just to clear everything delete the item itself within the layout and then after that i want to delete what i want to delete the actual layout i don't need no more layouts and that's it right so from this uh i don't need to delete button because the button has already been deleted uh in here as because it's one of the uh items within my layout and the last thing is i want to remove it from my from my button map actually there is we can just use the value take the function takes the function take will give you the layout corresponding to that button and at the same time remove it from the map so that it's not occupying just endless space and that's it once we run this we will have a nice button that adds this layout with buttons in it and when we click on it you know we can delete the one that is corresponding to that and that's all right so you want to add remove widgets you can just use this very similar code again this should work for any other widget that you have even custom made widgets that may have you may have inherited and modified slightly and so also you might be interested in seeing that this this form looks quite interesting like there's a theme i have a video for that if you are interested in changing the theme of your cute widgets application i'll leave a note i'll also leave the link in the description so you can check that video out as well if you are like how do i change the color and the font and all these things so i'll leave that in the description i'll leave a note as well okay if you found this video useful if you learned anything and you don't mind make sure you leave a like if you have a question feel free to leave a comment below if you're new to this channel check out the channel and if you like what you see subscribe be safe and peace out

Channel: Velcode

Views: 9,689

Keywords: Qt Widgets, at runtime, dynamic UI, dynamic elements, how to Qt, QObject, QWidget

Id: fNTnU7mMgK4

Length: 15min 3sec (903 seconds)

Published: Wed Dec 30 2020