How to use Qt Layouts

Подписаться 3 тыс.

Просмотров 89 тыс.

50% 1

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

Хобби

Опубликовано:

29 июн 2024

Ссылка:

Скачать:

Готовим ссылку...

Добавить в:

Мой плейлист

Посмотреть позже

Комментарии : 76

@HermannWinter Год назад

Finally, a clean and detailed explanation, Thank you.

@danwe6297 3 года назад

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

@YouGenom 3 года назад

Great explanation from basics to design strategy.

@user-iz4ol7is7y 2 года назад

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

@shubhendudwivedi9426 3 года назад

Perfect Man. Perfect. Absolutely correct recipe for layout

@alihankayhan7841 2 года назад

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

@ali-kadar 3 года назад

Great explanation. Thank you.

@Idk-mk9cg Год назад

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

@dishendra. 3 года назад

Very helpful !! Thanks, man !!

@image_amkerp2872 Год назад

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

@yiwei-cheng 2 года назад

Thank you so much! You help me a lot!

@Voxiiit 3 года назад

Thanks a lot for this video !

@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 2 года назад

Thanks, i love it.

@somethingamongthebytes9228 Год назад

Thank you so much!!! 🔥🔥🔥

@chah1653 2 месяца назад

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?

@joenieakilimali9720 3 года назад

Big thanks !!!!

@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 :)

@leodan52 Год назад

Muchas gracias, you help me a lot

@VelcodeCS Год назад

De nada!

@india2kim777 2 года назад

Thanks!

@morrisabramian2276 4 месяца назад

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 4 месяца назад

😅

@MrGogomanx 2 года назад

great~!

@nravikiran4661 Год назад

Thank you

@Abbas-gz3hp Год назад

thanks alot

@CaptionThisChallenge_ 3 года назад

Thankss

@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..

@younesdeveloper 4 месяца назад

Thanks

@jeprad 3 месяца назад

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

@jason_liam 3 года назад

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 3 года назад

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

@jason_liam 3 года назад

@@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.

@asdasdaa7063 11 месяцев назад

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.

@user-rp7qy4gf4g 3 месяца назад

@bennguyen1313 3 года назад

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 3 года назад

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.

@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 Год назад

@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 11 месяцев назад

Qt has some documentation on what each property does.

@lopo8000 2 года назад

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 2 года назад

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.

@tehalexy 2 года назад

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 2 года назад

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 2 года назад

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

@VelcodeCS 2 года назад

Any time!

@arpitagec9 3 года назад

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

@VelcodeCS 3 года назад

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 3 года назад

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

@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 3 года назад

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 3 года назад

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

@adhamfouad68 3 года назад

great tutorial what about anchors

@VelcodeCS 3 года назад

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 3 года назад

@@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 3 года назад

@@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 3 года назад

@@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 3 года назад

@@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!

@rizwanulhaq4885 3 года назад

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

@VelcodeCS 3 года назад

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

@wedgef5 3 года назад

@@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 3 года назад

@@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 2 года назад

@@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 2 года назад

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 2 года назад

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 2 года назад

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.