QWizardPage designed in Qt Creater can not set geometry correctly when title is set

Question

I am trying to design QWizardPage using Qt Creater.

Everything goes fine if I don't set the title of the wizardpage.

However, when I set the title, the wizard I got is strange. The title takes a large space and the wizard page can not be shown completely.

What I got in Qt Creator is:

But what I got using the generated python code is, the widget I added can not be show completely:

It seems that the size of the wizardpage widget is set to the same as canvas in the Qt Creator, and doesn't spare some space for the title. In other words, designing QWizardPage in Qt Creator doesn't take the space that the title occupies in consideration, and got a wrong geometry setting. How can I use Qt Creator to design a QWizardPage.

The following is how to reproduce my problem:

I use File->New File or Project, and choose Qt->Qt Designer Form, then in the "choose a form template", I choose QWizardPage. Then after I finish designing in the Qt creater, I convert the ui file to PyQt code by using pyuic5 wizard.ui -o wizard.py. I follow this link to generate python code.

The following is my ui file, which is quite simple

<?xml version="1.0" encoding="UTF-8"?>
<ui version="4.0">
 <class>WizardPage</class>
 <widget class="QWizardPage" name="WizardPage">
  <property name="geometry">
   <rect>
    <x>0</x>
    <y>0</y>
    <width>400</width>
    <height>300</height>
   </rect>
  </property>
  <property name="windowTitle">
   <string>WizardPage</string>
  </property>
  <property name="title">
   <string>This is the tile</string>
  </property>
  <widget class="QGraphicsView" name="graphicsView">
   <property name="geometry">
    <rect>
     <x>20</x>
     <y>20</y>
     <width>351</width>
     <height>261</height>
    </rect>
   </property>
  </widget>
 </widget>
 <resources/>
 <connections/>
</ui>

My generated python file is:

# -*- coding: utf-8 -*-

# Form implementation generated from reading ui file 'qtcchess\wizardpage.ui'
#
# Created by: PyQt5 UI code generator 5.15.6
#
# WARNING: Any manual changes made to this file will be lost when pyuic5 is
# run again.  Do not edit this file unless you know what you are doing.


from PyQt5 import QtCore, QtGui, QtWidgets


class Ui_WizardPage(object):
    def setupUi(self, WizardPage):
        WizardPage.setObjectName("WizardPage")
        WizardPage.resize(400, 300)
        self.graphicsView = QtWidgets.QGraphicsView(WizardPage)
        self.graphicsView.setGeometry(QtCore.QRect(20, 20, 351, 261))
        self.graphicsView.setObjectName("graphicsView")

        self.retranslateUi(WizardPage)
        QtCore.QMetaObject.connectSlotsByName(WizardPage)

    def retranslateUi(self, WizardPage):
        _translate = QtCore.QCoreApplication.translate
        WizardPage.setWindowTitle(_translate("WizardPage", "WizardPage"))
        WizardPage.setTitle(_translate("WizardPage", "This is the tile"))

And my main file for testing is:

from PyQt5 import QtCore, QtGui, QtWidgets
from wizardpage import *
from PyQt5.Qt import *
from PyQt5.QtCore import *
import sys


class test_wizard_page(QtWidgets.QWizardPage, Ui_WizardPage):
    def __init__(self, parent):
        super().__init__(parent)
        self.setupUi(self)


class MyWizard(QtWidgets.QWizard):
    def __init__(self):
        super().__init__()

        self.test_wizard_page = test_wizard_page(self)
        self.addPage(self.test_wizard_page)


if __name__ == "__main__":
    app = QApplication(sys.argv)
    wizard = MyWizard()
    wizard.show()
    sys.exit(app.exec_())

Answer 1

You must use layout managers. Right click on an empty area of the wizard page, and select a vertical or horizontal layout from the "Lay out" submenu.