How to use Qt Layouts

A tutorial on what Qt layouts are and their functionalities. Towards the end of the video, we go through a quick example of how to go from a GUI design to creating a responsive form.
__ Social Media __
Instagram: / velazcojd
Podcast: / @unqualifiedgurus
__ Equipment __
Microphone: amzn.to/3leXZR4
Touch Input: amzn.to/30Z1Mex
Main Monitor: amzn.to/3rfwfiQ
Second Monitor: amzn.to/3Gw8NTv
Video Editing: amzn.to/3lgb8Jv
Video Camera: amzn.to/3nrwFjq
Main Lighting: amzn.to/3GLE9FX
Secondary Lighting: amzn.to/3npEsi0
Headphones: amzn.to/3A0GjP7
USB Drive: amzn.to/3Gvm9PD

[@HermannWinter]

Finally, a clean and detailed explanation, Thank you.

[@YouGenom]

Great explanation from basics to design strategy.

[@danwe6297]

Thank you! You have saved me a lot of worries about nesting layouts and placing elements inside them...

[@user-iz4ol7is7y]

It's the best layout tutorial, what I have seen!

[@shubhendudwivedi9426]

Perfect Man. Perfect. Absolutely correct recipe for layout

[@alihankayhan7841]

Thank you! It was a clean explanation. Great video.

[@ali-kadar]

Great explanation. Thank you.

[@Idk-mk9cg]

God, that's something I was looking for like for a day, thanks!

[@dishendra.]

Very helpful !! Thanks, man !!

[@image_amkerp2872]

Thank you! It's amazing explanation, keep on, please.

[@yiwei-cheng]

Thank you so much! You help me a lot!

[@Voxiiit]

Thanks a lot for this video !

[@chah1653]

Is it necessary to use a Frame to contain everything? How do I make sure the most outer layout is filling the size of the window?

[@Rayer24]

Nice fundamental explanation. I remade the windows calculator and it looks nice actually. Now I'm off to hopefully create a half decent design for my application lol. It's already looking 20 years more modern than what I had a few hours ago

[@VelcodeCS]

Glad it helped! There's another video in the channel for setting themes. Maybe that makes it even more modern! 😉

[@davidakbrzadeh2652]

Thanks, i love it.

[@somethingamongthebytes9228]

Thank you so much!!! 🔥🔥🔥

[@joenieakilimali9720]

Big thanks !!!!

[@leodan52]

Muchas gracias, you help me a lot

[@VelcodeCS]

De nada!

[@demonfury9796]

hi thanks for a great video i have like created a layout but it still not resize when the main window resize anything you can help me with

[@VelcodeCS]

In the video, I showed all the different widgets and layouts inside one layout (the outermost one) to demonstrate the resizing in the editor. To get the same behavior in the output window, simply set the window's main widget's layout (as if it was the outermost layout). By default that layout is none, so it doesn't resize. I suppose I should have added that in the video, One of my first videos :)

[@india2kim777]

Thanks!

[@jeprad]

Nice but how do you get the text on the buttons to resize as well?

[@nravikiran4661]

Thank you

[@bennguyen1313]

To programmatically add widgets to an existing GUI (opened via loadUi()), is using Layouts the only/preferred way? And if your .ui doesn't already have a layout, it's just a Main Window with a QtWidget, can a layout itself be added to it after loadUi()?

[@VelcodeCS]

I'm not exactly sure what you mean by "loadUI()". You don't have to use layouts. However, if you want the Qt objects to be responsive when resizing the window. Layouts ensure that happens. With that being said, you can add layouts at run time like I showed on the video.

[@younesdeveloper]

Thanks

[@morrisabramian2276]

even tho it does not look like the calculator but i've learned what I wanted and that's all that matters :D , thanks !

[@VelcodeCS]

😅

[@ZerqTM]

very good video but what i wanna know is how i for a layout to take up the whole window and follow the strech that bit still seam unclear to me... I hope i dont have to do that bit via code that would be annoying..

[@CaptionThisChallenge_]

Thankss

[@Abbas-gz3hp]

thanks alot

[@asdasdaa7063]

Please bro can you show how to take a design from qt design studio and use it inside of qt creator? I can't seem to figure it out.

[@jason_liam]

Great video. Can you show us how to design the UI for a desktop app. I mean just the UI part. For example, you can get some desktop ui template online and then show us how to create that in QT. Meaning how to arrange different widgets and layouts and make an exact replica of the ui downloaded from web.Just like you did in this video but of a more complicated UI than the calculator with colors and text and everything.

[@VelcodeCS]

Not a bad idea. Do you have some UI in mind?

[@jason_liam]

@@VelcodeCS Yes this is the one i think is pretty do-able in Qt: dribbble.com/shots/10578307-Saas-Dashboard By the way you can find many more on the same website. I choose this one because this will also include how to create lists. You can choose whichever you like.

[@MrGogomanx]

great~!

[@chaitanyakolluru2256]

Are there some good resources on understanding the sizing options for these widgets? I want to know what Preferred, Minimum, Fixed etc. actually mean.

[@VelcodeCS]

Qt has some documentation on what each property does.

[@lopo8000]

When u use Qt within Visual Studio 2019 the go to slot... option in qt designer is missing u what is the best way to configure buttons within VS?

[@VelcodeCS]

Are you referring to the slot connections? You can open the .ui form with QtDesigner and edit it there. I don't use that feature, so I've never looked into it. I generally set my connections in code.

[@jerryvelders4457]

That all works great while you're in the designer .. but how do you attach that layout to a dialog or window so that it works when the dialog or window is resized by the user in real time?

[@VelcodeCS]

In the video, I showed all the different widgets and layouts inside one layout (the outermost one) to demonstrate the resizing in the editor. To get the same behavior in the output window, simply set the window's main widget's layout (as if it was the outermost layout). By default that layout is none, so it doesn't resize. I suppose I should have added that in the video, One of my first videos :)

[@user-rp7qy4gf4g]

[@tehalexy]

For me, you skipped the most important part. How do i fix layout to the main window, so if the window gets rezised by the user the layout resizes, too? If i resize window, everything stays where it was :/

[@VelcodeCS]

Yeah, I can see the video would have benefited from that, but it was getting long as is. Anyways, the window itself by default has a layout. You simply have to set the type of layout it should have. You can see the layout on the right in the hierarchy. Simply right click and select the layout you want. It will follow the same behavior as the outer layout I was manipulating in the video.

[@tehalexy]

@@VelcodeCS THANKS ... was googling for hours .... :D

[@VelcodeCS]

Any time!

[@arpitagec9]

Could you please cover MVC architecture 🙂🙏? There is not much info about it in KZbin ☹️

[@VelcodeCS]

That's a pretty good idea. I'm a little loaded with work (hence no videos in a while), but I'll put in the to do list. Not sure when I can attend to it though :\

[@arpitagec9]

@@VelcodeCS Thanks! Will be waiting 🤞😊 Hopefully, you will do it soon☺️

[@adhamfouad68]

great tutorial what about anchors

[@VelcodeCS]

Thanks! Anchors serve to, in a way, set relationships between one UI element and another. However, I don't think this can be done through the Qt Creator UI design. I believe the anchor method can only be done programmatically.

[@adhamfouad68]

@@VelcodeCS oh man which it was there I am used to use Visual Studio and making the UI is so easy but you know it is just for windows and I need to make cross platform apps

[@adhamfouad68]

@@VelcodeCS Would be really helpful if you can make an interactive beautiful login screen using qt cause i searched everywhere and couldn't find one and UI matters so much nowadays. You earned a new sub bro, thank you! Keep the good work coming

[@VelcodeCS]

@@adhamfouad68 I have used forms designed the way I did here on this video in cross platform applications. I believe for the most part Qt tries to keep it always cross platform.

[@VelcodeCS]

@@adhamfouad68 I do plan to add a video (perhaps I post it next week) on how to change the UI theme of the GUI application. Not necessarily a login screen, but at least how one can adjust the visual properties of the GUI elements. Glad to have you on board!

[@herbirsey3174]

Hello, thank you for this work. I'm wondering this. Why didn't you try to create them by writing code?

[@VelcodeCS]

The idea here was to teach how to use the visual tool 🙂 You certainly can take the same logic shown here and code it as well!

[@herbirsey3174]

@@VelcodeCS thanks

[@laserbuddha]

One thing the PyQt documentation forgot to mention is that everytime someone says the word "layout" you have to take a drink. I think that specific feature is related to its C++ origins, but I'm not sure.

[@VelcodeCS]

🤔 I'm not sure. I haven't delved into PyQt yet. But the drink feature would be nice in c++!

[@rizwanulhaq4885]

and how can i stretch this whole calculator on the window length, so that it resizes as the user chagnes the gui size??

[@VelcodeCS]

What do you mean? Isn't that what it supposed to be doing?

[@wedgef5]

@@VelcodeCS To me, it appeared that you were resizing the main vertical layout, rather than the window. How do you make a layout fill the available space in the window? Maybe this is what the question refers to? I'm trying to switch from PyGObject (GTK3) to Qt, so this video was really helpful!

[@VelcodeCS]

@@wedgef5 Resizing the layout applies the same responsive behavior as resizing the window. I was just simply showing it did adjust the elements sizes accordingly. If that layout was the overall window's layout, then that behavior would have come into effect when the window itself was adjusted. In other words, instead of putting everything into a layout. Simply set a layout to the overall widget. I just wanted the space of the widget to play with.

[@schwarzarne]

@@VelcodeCS Usually one wants to occupy the whole window, which you totally failed to show. The user does not grab an resize the layout, only the window. And your layout does not resize with it.

[@VelcodeCS]

That's correct (and not). In the video, I simply resize the layout to demonstrate the responsive behavior. Making the window's layout as the outer layout (the one I was resizing) gives you that behavior. It's how you can view it without having to touch the window while you are designing it.

[@NickEnchev]

Where's the rest of the video? You didn't even run it, which would have made it obvious that your window resize events don't affect your layouts, as you said your design would 12:25.

[@VelcodeCS]

The video was getting too long, so I cut it there. The outermost layout I mentioned on the video has to be set on the overall widget, which would show the resize (I simulated it by resizing the layout, which has the exact same effect). I get the video would have been better if I showed it, but the important details on how layouts work is there.

[@olisakweifeanyi4996]

Great video. But I'm having error viewing my designer

[@VelcodeCS]

What kind of error are you getting?

[@hfe1833]

I can barely hear u

[@VelcodeCS]

It was one of my first videos. I was still learning. The only thing I can suggest is to raise the volume up 🙃