QtDesigner tutorial for Complete Beginners - Overview of PyQt5 QtDesigner + 3 Ways to Load UI Files

Learn how to use PyQt5 Qt Designer or QtDesigner to build drag-and-drop GUIs with Python. PyQt5 Qt Designer is suitable for Python desktop apps. Learn how to convert UI files into Python code in three different ways.
In this video, you will:
- Get started with PyQt5 and QtDesigner
- Learn about PyQt5 QtDesigner editor, widgets, properties, and objects
- Convert Qt Designer UI files into Py files with pyuic
- Load UI from QtDesigner to Python code
- Convert UI files from Qt Designer to Py files with VS Code
For more info:
Install and Setup PyQt5 and Qt Designer: • Install and Setup PyQt...
PyQt5 tutorials playlist: • PyQt5 tutorials
Contact/socials:
My email: [e-mail]
Tiktok: / hala.codes
*Timestamps*
00:00 Introduction & Overview
01:35 QtDesigner Tutorial
08:00 Overview of Ui files
09:18 Method 1 - Convert QtDesigner .UI File to .Py with pyuic
11:29 Limitation of Method 1
16:55 Method 2 - Load UI file into Python using loadUi
21:38 Method 3 - Convert QtDesigner .UI File to .Py with VS Code extension
*************
*Tags*
PyQt5
PyQt5 tutorial
PyQt5 module
PyQt5 Designer
QtDesigner
Qt GUI tutorial
Load QtDesigner in Python code
Convert QtDesigner UI file to Py file

[@wesleygfx5540]

First Tutorial came across explaining in Detail, Thankyou!

[@user-ih7ot7vl8u]

Many thanks for this tutorial, it was pretty helpful. 👏🏻 Please add more tutorials 🌹

[@dipanjanjana9518]

This is what I was looking for. Thanks.

[@EunjonGloksrati]

your explanation is simple and clear. now I understand why most of tutorial using method #2. thanks!

[@jerryscde1]

Thanks very much I have learned a lot from your tutorials

[@majdsaadeh6480]

Helped a lot. Thanks.

[@user-go4kv4ez7f]

Даже без знания английского языка в этом видео я нашел ответ, который не мог найти в русском сегменте интернета. Все интуитивно понятно. Лайк и комментарий в поддержку канала!👍

[@ezadeenalqubati3815]

Thanks alot my problem is solve😊

[@digitalmachine0101]

good information

[@arthurdeka]

you saved me! thank you

[@codefirstwithhala]

Thanks for the comment! You're absolutely welcome :)

[@kokebdese4787]

Helpful, Thanks Hala

[@codefirstwithhala]

You're welcome 😊

[@omarmuhammed4932]

Great qtdesigner content ,If you can speak arabic , arabic content will be great.

[@its_code]

I love 💕 this tool. Very helpful 😍

[@codefirstwithhala]

true, it's such a great tool 😊

[@its_code]

@@codefirstwithhala is there any tool for kivy library like this... Plizzz make a full tutorial on kivy android development...😃

[@codefirstwithhala]

Unfortunately there isn't something similar for Kivy :( However, don't worry, expect some Kivy stuff around mid-June ;)

[@its_code]

@@codefirstwithhala thanks 👍💕

[@againstthegrain5914]

Hi thanks for the video! It helped me! I like method #2! lol Im alittle stuck with the resources file. when coding ' loadUi('main.ui', self) ' It works for me np. But when I try following the instructions in the documentation page, where it says ' loadUi('main.ui', resource_suffix='resource.qrc', self) ' I get a SyntaxError: positional argument follows keyword argument. VSCode doesnt like me using 'self' at the end like that. But If I remove it, with the resource_suffix added, my UI doesnt show up like its suppose too. When I remove it and just keep 'self' and the main.ui string, everything works.. Any suggestions or ideas how to solve that? Thanks again!!

[@josys363]

As someone who has worked with PyQt for a while now, the load UI method is NOT the way to go. The best way to do this is to convert the UI file to a PY file, and then import that into another python file. the load UI method has overhead which when working with a larger application can be noticed, and also you have to have your UI files bundled in your application in order for it to even function. If you just import the generated py file created from the ui file you can put the ui files anywhere you want. This also has some cross platform implications. Also most IDEs are able to parse python files on the fly. If you import the generated py file then your IDE will have access to all the objects you have added to your interface. Autocomplete of text in your IDE should work just like any other variable or object. Again, loading the UI is not the best way to go and i don't even know why they have that ability built in. I'm sure there is a reason, but again I don't recommend it.

[@cjhoffmn]

I’ve been wondering about this exact issue. I find it really useful during my development to use the loadUi so if I have Ui changes I can integrate them using the editor as I find that more intuitive than writing code for Ui changes. However, I worried about the exact issue you point out here. For me I’m likely to use it for dev purposes with loadUI then convert to .py when production ready. Of course I may just get tired of refactoring for the different way of getting the imports etc and may ultimately just code the changes directly. Seems to me they should create an import function from .py so you can use the editor again if you’ve made changes to the .py….

[@josys363]

@@cjhoffmn It literally takes two seconds to convert a ui file to a python file using UIC from a command line. Also you can integrate the commands into the ide you are using. Just do this from the beginning and in no way change the generated python file. There is never a good reason to do so.

[@cjhoffmn]

@@josys363 ahh - so you’re saying - change the UI as needed - re-save it and convert the new one and done. That makes sense of course. It feels more connected to not have to take that extra step - but makes sense that it’s a one line step anyway.

[@cjhoffmn]

@@josys363 thx for the comment and the follow up!

[@josys363]

@@cjhoffmn That’s exactly what I’m saying.

[@avcom11]

I receive this error when I try to convert the .ui file to .py file (first method): pyuic5 : The term 'pyuic5' is not recognized as the name of a cmdlet, function, script file, or operable program. Check the spelling of the name, or if a path was included, v erify that the path is correct and try again.

[@user-qu2ff6rg3i]

If i changed the name of the button from PushButton to another name in the design file, why not take the new name for it in the Python file

[@medregio]

Because in your *.py file you used the original variable PushButton name of the *.ui file rather than the new name you gave in the design file afer having generating the *.ui file. Having this in mind, you should keep your names in design (i.e. wich will be variables for your *.py file) after you have coded them in python. The best way is to change the default names given by Qt designer BEFORE you generate the *.ui file that will be loaded in *.py file. Hope I was clear.

[@hibachabane3147]

J’ai un Error :DLL load failed :le module spécifié est introuvable Aide moi 😢