Qt Designer

Posted by ocoder | 7 Aug, 2014

 Qt Designer is the drag'n'drop GUI builder for the Qt family, it works with both Qt4 & 5, you pretty much get what it says on the box.

I found these to be good "getting started" tutorials.
http://qt-project.org/doc/qt-4.8/designer-to-know.html
http://qt-project.org/doc/qt-5/designer-quick-start.html

This is obviously the manual.
http://qt-project.org/doc/qt-5/qtdesigner-manual.html

I won't re-invent the wheel, have a play with the above tutorials.
Below is "Part 2" of the tutorial.

Max, Min, Fixed sizing.

Spacers.

Another thing I found missing was asymmetric spacing. It's all well & good to create a 3x3 grid & give every cell equal space, but it's not always useful. You can end up with this, which is just odd.

The secret is "layoutStretch"! 

The default is 0,0...,0 for as many cells as you have.  The notation I find confusing, but it is something like, 0=don't stretch, but all cells are equally, so stretch equally.

In my case, I set the cell I wanted to stretch to 1 & left the other 0.  If both should stretch you can set 1,3 so the left cell will be 1/3 that of the right cell.

 

 Once your window layout looks OK, save it as MyWindow.ui.  Then use the following code to launch the window from python.

# Code +++++++++++++++++++++++++++++++++++++++++++++++++
#! /usr/bin/python3

from PyQt5 import uic # this reads the ui file produced by Qt Designer
from PyQt5.QtWidgets import QApplication

def Main():
   app = QApplication([]) # see below

   MyWindow = uic.loadUi('./MyWindow.ui') # this is the ui file created by Qt Designer
   MyWindow.show()

   app.exec_()

Main()
# /Code +++++++++++++++++++++++++++++++++++++++++++++++++

So most of it is pretty straight forward.
Designer saved your layout as an XML called "MyWindow.ui", this is loaded by "uic" from the PyQt5 module.

Where it gets murky is that "normal" python code runs in your "Main" function & pops out to a function you've written or to a function in a module you've loaded, then back to your Main function.

Not so in a GUI application.
In a GUI app, you create a "GUI Main" by "app = QApplication([])".  Load the GUI layout into the GUI Main with "uic.loadUi".  Tell the GUI Main to "show()" the window you want.  Then launch the GUI Main by "app.exec_()"

Most of the runtime is in GUI Main, away from your code.  When the user clicks something, GUI Main pops back to your code, runs than one function & goes back to GUI Main & watches for the next user action.

I'll cover this popping in & out in another post.

 


Add comment

authimage