Basic problem with initial positioning of QGraphicsView/QGraphicsScene after show() in Qt5

Question

I write some code for visualization of board and I have problem with initialization. I want generate view filled with board from the start to end (is it is shown on 3rd image). I try use many Qt5 methods but without results (I am beginner in Qt5). View looks perfect after first resize.

I have no idea what I am doing wrong with this initialization.

Just after .show():

After focus lost (I switch to write this question):

After resize it become as should look like/what I want to achieve:

How to fix this code to make it working form initialization - I am level 1 in Qt5 (beginner) and level 7 in programming. Maybe it need very simple change.

Here is working code Python 3.8/Qt5:

import logging
import sys
import typing

from PyQt5 import QtCore, QtGui
from PyQt5.QtCore import QSize, QPoint, Qt, QRect, QMargins
from PyQt5.QtGui import QFont, QPaintEvent, QPainter, QBrush, QColor, QPen
from PyQt5.QtWidgets import QApplication, QWidget, QGridLayout, QSizePolicy, QVBoxLayout, QHBoxLayout, QGraphicsWidget, \
    QGraphicsScene, QGraphicsView, QGraphicsGridLayout, QStyleOptionGraphicsItem, QGraphicsSceneMouseEvent


class Application(QApplication):
    pass


class SquareWidget(QGraphicsWidget):
    def __init__(self, color):
        super().__init__()
        if color:
            self.color = QtCore.Qt.white
        else:
            self.color = QtCore.Qt.black

    def paint(self, painter: QtGui.QPainter, option: QStyleOptionGraphicsItem, widget: typing.Optional[QWidget] = ...) -> None:
        painter.fillRect(option.rect, self.color)


class BoardContainer(QGraphicsWidget):
    def __init__(self):
        super().__init__()
        logging.debug('size is %s for %s.', self.size(), self.__class__.__name__)

        grid = QGraphicsGridLayout()
        grid.setSpacing(0)
        grid.setContentsMargins(0, 0, 0, 0)
        self.setLayout(grid)
        for row in range(8):
            for column in range(8):
                square_widget = SquareWidget((row + column) % 2)
                grid.addItem(square_widget, row, column)


class BoardScene(QGraphicsScene):
    def __init__(self):
        super().__init__()

        self.board_container = board_container = BoardContainer()
        self.addItem(board_container)


class BoardView(QGraphicsView):
    def __init__(self):
        super().__init__()
        logging.debug('size is %s for %s.', self.size(), self.__class__.__name__)

        scene = BoardScene()
        self.setScene(scene)
        # no frame
        self.setFrameShape(0)
        # transparent background
        # self.setStyleSheet('QGraphicsView {background: transparent;}')
        self.setHorizontalScrollBarPolicy(Qt.ScrollBarAlwaysOff)
        self.setVerticalScrollBarPolicy(Qt.ScrollBarAlwaysOff)

    def resizeEvent(self, event: QtGui.QResizeEvent) -> None:
        super().resizeEvent(event)
        self.fitInView(self.scene().board_container, Qt.KeepAspectRatio)


class BoardWidget(QWidget):
    def __init__(self):
        super().__init__()
        logging.debug('size is %s for %s.', self.size(), self.__class__.__name__)

        grid = QGridLayout()

        board_view = BoardView()
        grid.addWidget(board_view, 0, 0)

        self.setLayout(grid)


def main():
    # show exceptions
    def excepthook(cls, exception, traceback):
        sys.__excepthook__(cls, exception, traceback)
    sys.excepthook = excepthook

    logging.basicConfig(level=logging.DEBUG)
    app = Application(sys.argv)
    app.setAttribute(QtCore.Qt.AA_EnableHighDpiScaling, True)

    default_font = QFont()
    default_font.setPointSize(12)
    app.setFont(default_font)

    board_widget = BoardWidget()
    board_widget.setMinimumSize(640, 640)
    board_widget.show()

    sys.exit(app.exec())


if __name__ == '__main__':
    main()

Answer 1

As the grid has no clues on the BoardContainer size, it can not layout items correctly on 0 size. You could explicitly set the size of the BoardContainer to whatever size you want. Here is the fixed part of the code :

class BoardContainer(QGraphicsWidget):
    def __init__(self):
        super().__init__()
        self.resize(100,100)
        logging.debug('size is %s for %s.', self.size(), self.__class__.__name__)
        grid = QGraphicsGridLayout()
        grid.setSpacing(0)
        grid.setContentsMargins(0, 0, 0, 0)
        self.setLayout(grid)
        for row in range(8):
            for column in range(8):
                square_widget = SquareWidget((row + column) % 2)
                grid.addItem(square_widget, row, column)
        grid.activate()  

after all, calling grid.activate() forces to layout based on the size.

To encourage you on using QML, here is a minimal QML example of the same application with a fancy animation to demonstrate how it's easy to use animations on QML. If you remove the added animation from this implementation to become just like the c++ version of your code, it's only 30 lines of code which is fantastic IMHO.

import QtQml 2.12
import QtQuick 2.12
import QtQuick.Window 2.12
import QtQuick.Controls 2.12
import QtQuick.Layouts 1.12

ApplicationWindow {

    id:mywin
    visible: true
    width: 640
    height: 640
    minimumWidth: 640
    minimumHeight: 480
    title: qsTr("Fancy Board")

    Item {
        anchors.centerIn: parent
        width: Math.min(parent.width,parent.height);
        height: width

        GridLayout{
            id : grid
            anchors.fill: parent
            rows: 8
            columns: 8
            rowSpacing: 0
            columnSpacing: 0
            Repeater{
                model: 64
                Rectangle{
                    Layout.fillWidth: true
                    Layout.fillHeight: true
                    color: ((index%8) - (index/8 | 0)) %2 === 0 ? 'black' : 'white'

                    Rectangle{
                        anchors.fill: parent
                        opacity: mouseArea.containsMouse ? 0.5 : 0
                        scale: mouseArea.containsMouse? 1 : 0
                        color: 'red'
                        Behavior on opacity{
                            NumberAnimation{ duration: 300 }
                        }
                        Behavior on scale {
                            NumberAnimation{ duration: 300; easing.type: Easing.OutCubic}
                        }
                    }
                    MouseArea{
                        id: mouseArea
                        anchors.fill: parent
                        hoverEnabled: true
                    }
                }
            }
        }
    }
}

You can also copy and paste this code into a main.qml file, zip it, and upload it to https://qt-webassembly.io/designviewer/ to run it on your browser to see that it can run under your browser as well.

Answer 2

Try it:

import logging
import sys
import typing

from PyQt5 import QtCore, QtGui
from PyQt5.QtCore import QSize, QPoint, Qt, QRect, QMargins
from PyQt5.QtGui import QFont, QPaintEvent, QPainter, QBrush, QColor, QPen
from PyQt5.QtWidgets import QApplication, QWidget, QGridLayout, QSizePolicy, QVBoxLayout, QHBoxLayout, QGraphicsWidget, \
    QGraphicsScene, QGraphicsView, QGraphicsGridLayout, QStyleOptionGraphicsItem, QGraphicsSceneMouseEvent


class Application(QApplication):
    pass


class SquareWidget(QGraphicsWidget):
    def __init__(self, color):
        super().__init__()

        self.resize(640, 640)                                    # +++        

        if color:
            self.color = QtCore.Qt.white
        else:
            self.color = QtCore.Qt.black

    def paint(self, painter: QtGui.QPainter, option: QStyleOptionGraphicsItem, widget: typing.Optional[QWidget] = ...) -> None:
        painter.fillRect(option.rect, self.color)


class BoardContainer(QGraphicsWidget):
    def __init__(self):
        super().__init__()
        logging.debug('size is %s for %s.', self.size(), self.__class__.__name__)

        self.resize(640, 640)                                     # +++
        self.setMinimumSize(80, 80)                               # +++       


        grid = QGraphicsGridLayout()
        grid.setSpacing(0)
        grid.setContentsMargins(0, 0, 0, 0)
        self.setLayout(grid)
        for row in range(8):
            for column in range(8):
                square_widget = SquareWidget((row + column) % 2)
                grid.addItem(square_widget, row, column)


class BoardScene(QGraphicsScene):
    def __init__(self):
        super().__init__()

        self.board_container = board_container = BoardContainer()
        self.addItem(board_container)


class BoardView(QGraphicsView):
    def __init__(self):
        super().__init__()
        logging.debug('size is %s for %s.', self.size(), self.__class__.__name__)

        scene = BoardScene()
        self.setScene(scene)
        # no frame
        self.setFrameShape(0)
        # transparent background
        # self.setStyleSheet('QGraphicsView {background: transparent;}')
        self.setHorizontalScrollBarPolicy(Qt.ScrollBarAlwaysOff)
        self.setVerticalScrollBarPolicy(Qt.ScrollBarAlwaysOff)

    def resizeEvent(self, event: QtGui.QResizeEvent) -> None:
        super().resizeEvent(event)
        self.fitInView(self.scene().board_container, Qt.KeepAspectRatio)


class BoardWidget(QWidget):
    def __init__(self):
        super().__init__()
        logging.debug('size is %s for %s.', self.size(), self.__class__.__name__)

        grid = QGridLayout()

        board_view = BoardView()
        grid.addWidget(board_view, 0, 0)

        self.setLayout(grid)


def main():
    # show exceptions
    def excepthook(cls, exception, traceback):
        sys.__excepthook__(cls, exception, traceback)
    sys.excepthook = excepthook

    logging.basicConfig(level=logging.DEBUG)
    app = Application(sys.argv)
    app.setAttribute(QtCore.Qt.AA_EnableHighDpiScaling, True)

    default_font = QFont()
    default_font.setPointSize(12)
    app.setFont(default_font)

    board_widget = BoardWidget()
    board_widget.setMinimumSize(640, 640)
    board_widget.show()

    sys.exit(app.exec())


if __name__ == '__main__':
    main()