Getting the tops of side-by-side widgets to align using PySide

Question

In the code below, the top of the QTextEdit and QGraphicsView widgets are not aligned when using QHBoxLayout. However, if you comment out QTextEdit and uncomment the other QGraphicsView setup, the top of the widgets align perfectly. Here are my questions:

1. What causes this alignment issue to occur and how can it be fixed?

2. Are issues like this best avoided by using Qt Creator?

3. Is the whole QGraphicsView() --> QGraphicsScene() --> QWidget() necessary to place graphics next to other widgets?

import sys
from PySide.QtCore import *
from PySide.QtGui import *


class Widget(QWidget):
    def __init__(self, parent=None):
        super(Widget, self).__init__()

        # Create Widget1
        widget1 = QTextEdit()
        #widget1 = QWidget()
        #view1 = QGraphicsView()
        #scene1 = QGraphicsScene(0,0,200,500)
        #view1.setScene(scene1)
        #layout = QHBoxLayout()
        #layout.addWidget(view1)
        #widget1.setLayout(layout)


        # Create Widget2
        widget2 = QWidget()
        view2 = QGraphicsView()
        scene2 = QGraphicsScene(0,0,200,500)
        view2.setScene(scene2)
        layout = QHBoxLayout()
        layout.addWidget(view2)
        widget2.setLayout(layout)


        # Layout of Side by Side windows
        container = QWidget()
        layout = QHBoxLayout()
        layout.addWidget(widget1)
        layout.addWidget(widget2)
        container.setLayout(layout)

        # Scroll Area Properties
        scroll = QScrollArea()
        scroll.setVerticalScrollBarPolicy(Qt.ScrollBarAlwaysOn)
        scroll.setHorizontalScrollBarPolicy(Qt.ScrollBarAlwaysOff)
        scroll.setWidgetResizable(False)
        scroll.setWidget(container)

        # Scroll Area Layer add
        vLayout = QVBoxLayout(self)
        vLayout.addWidget(scroll)
        self.setLayout(vLayout)


if __name__ == '__main__':
    app = QApplication(sys.argv)
    dialog = Widget()
    dialog.show()
    app.exec_()

Answer 1

The layouts have a default margin. So if one widget is in a layout, and its neighbour is not, they will not be aligned. To remove the default margin, you can do this:

    layout = QHBoxLayout()
    layout.setContentsMargins(0, 0, 0, 0)

However, in your example, the container widget and layout for the QGraphicsView aren't doing anything useful. So you could remove those, and along with some other simplifications, arrive at this:

class Widget(QWidget):
    def __init__(self, parent=None):
        super(Widget, self).__init__()

        widget1 = QTextEdit()
        widget2 = QGraphicsView()
        widget2.setScene(QGraphicsScene(0, 0, 200, 500, widget2))

        container = QWidget()
        layout = QHBoxLayout(container)
        layout.addWidget(widget1)
        layout.addWidget(widget2)

        scroll = QScrollArea()
        scroll.setVerticalScrollBarPolicy(Qt.ScrollBarAlwaysOn)
        scroll.setHorizontalScrollBarPolicy(Qt.ScrollBarAlwaysOff)
        scroll.setWidgetResizable(False)
        scroll.setWidget(container)

        vLayout = QVBoxLayout(self)
        vLayout.addWidget(scroll)

Using Qt Designer is certainly very useful when experimenting with the layouts of a complex application. However, the code it generates is usually quite verbose compared with what you can achieve when coding by hand. For long-term maintainability, though, using Qt Designer seems the best option.