I used Qt Designer to create a window in Potopeta. Make a note of what you looked up at that time.

How to set the toolbar

Toolbars can be added with Add Toolbar in the context menu on the window. At first I thought I would place the tool button there by dragging and dropping, but it wasn't.

To place a button on the toolbar, create an action for that button. You can place buttons by dragging and dropping the action onto the toolbar. Actions can be created by pressing the New button in the Action Editor. If you want the button to display an image, set the icon to an image of the resource. If you want to set an image on the button, register the image as a resource and set it.

Toolbar button event handling

If you want PySide to handle the event when a toolbar button is pressed, assign a function to the action event as follows:

For example, I created an action called actionMenu in the action editor and set it on the toolbar. If you want to call a function called onToolbarMenu when that button is pressed, set it in PySide as follows:

 #Read ui file, create and display ui object
 loader = QtUiTools.QUiLoader()
 self.ui = loader.load("XXX.ui")
 self.ui.show()
 #Set event handler for action
 self.ui.actionMenu.triggered.connect(self.onToolbarMenu)

Register the image in the resource

Use the resource editor to register the image. Display the dialog with the Edit Resource button in the resource editor. Create a new resource file and add a prefix to its qrc. Select the prefix, then press the Add File button to select the image. The image is now registered as a resource in the qrc file and can be selected in the widget's image selection.

If centralWidget does not support resizing

If the centralWidget icon placed under the MainWindow in the Object Inspector looks like this, the layout is disabled. Resizing the window in this state does not change the centralWidget. In this state, even if you increase the size horizontally, the size of the widget inside does not change.

In this case, you can resize by selecting the layout type from [Layout] in the context menu of MainWindow. This time, I chose [Align Vertically] to use QVBoxLayout for the layout directly below. If you increase the size horizontally, the widget inside will also increase horizontally.

How to set stretch permission for each element in QVBoxLayout / QHBoxLayout

Add widgets as elements to horizontal and vertical layouts. If you want only a part of it to expand and contract according to the size, Set the layoutStretch property to a comma-separated string of 0s or 1s, such as 1,0,0,1,0,1,1. In this example, only the 1, 4, 6 and 7th elements with 1 specified will stretch. The second, third, and fifth elements with 0 specified do not stretch. Before widening the width After widening the width

QPushButton tooltip settings

This setting is for displaying the explanation when the mouse pointer is hovered over the button. Set the property Tooltip to a string.

Use ui files from PySide

You can use PySide's QtUiTools to create .ui files created in Qt Designer as windows.

 from PySide import QtUiTools
 # XXX_rc.py is XXX.A converted version of qrc. Required when reading ui using qrc.
 import XXX_rc.py
 #Read ui file and create ui object
 loader = QtUiTools.QUiLoader()
 ui = loader.load("XXX.ui")
 ui.show()

Convert .qrc resources to .py for use

Images handled by Qt Designer are registered in qrc. The .qrc file is not available as-is in PySide. Convert to a .py file and import. QUiLoader makes use of this imported .py module when loading a .ui file. The .py file name should be the .qrc file name plus _rc.

To convert XXX.qrc to a .py file for python3, run the following command:

pyside-rcc.exe -py3 XXX.qrc > XXX_rc.py

pyside-rcc.exe is directly under the Python installation folder I think it's in Lib \ site-packages \ PySide.

This will create XXX_rc.py.

Use stylesheets to easily set up your design.

QWidget has a property called styleSheet. Therefore, you can easily change the appearance by writing something like css. In the [Change Style Sheet] dialog, you can use the GUI to set settings such as changing the background color.

Set the style sheet. You can display the dialog with the [...] button.

Toolbar when no stylesheet is specified

Toolbar when stylesheet is set (change background color)

Difference between QTreeView and QTreeWidget

The implementation of Model-View is different.

QTreeView ** does not have a built-in model **, so it is suitable when you want to operate the GUI using your own model. You can feel the meaning of only View from the naming.

QTreeWidget has a built-in ** model unique to the Qt library, so it is suitable for those who want to use the tree GUI easily. Conversely, I can't play with the model as I like.

QTreeWidget is a derived class of QTreeView and can be said to save the user the trouble of creating a model.

How to use Qt Designer