QBoxLayout Formatting

Contents

• Introduction
• Useful Formatting Options for QBoxLayout
• Source Code
  • CPP
  • Python

Introduction

Qt can be a useful framework, well or an extension of the C++ programming language - depending on our personal perspective, that allows somewhat quick design of GUIs. When it comes to building e.g. full screen GUIs for AI related products, even for internal debug tools, then it is a) common to use fixed sizes and b) common to use QHBoxLayout or QVBoxLayout - at least that happens when machine learning engineers are trying to build a GUI following some tutorials. While these box layouts can be pretty nice, they have one big advantage and that is spreading out elements through out the full window. So, let’s see what we can do about that.

Useful Formatting Options for QBoxLayout

We create a main window of size 800x600 (red color) with two widgets of sizes 250x600 (blue) and 320x600 (green) and we’re going to arrange them using QHBoxLayout.

Simply adding these two widgets to the layout class yields this:

Both items are somewhat spread out and have decent margins around them. However, they are also aligned in a centered way. To change the alignment we can align it to the left (setAlignment(Qt::AlignLeft)). This makes things at least a bit better:

The “empty space” is mainly on one side now but there is still some margin around the layout and some spacing between the two widgets. The margin can be removed using setMargin(0).

To get rid of the spacing between elements, we can use setSpacing(0) and we end up with a nicer layout.

Source Code

CPP

// main.cc

#include "mainwindow.h"

#include <QApplication>

int main(int argc, char *argv[])
{
    QApplication a(argc, argv);
    MainWindow w;
    w.show();
    return a.exec();
}

// mainwindow.h

#ifndef MAINWINDOW_H
#define MAINWINDOW_H

#include <QMainWindow>
#include <QLayout>
#include <QWidget>

class MainWindow : public QMainWindow
{
    Q_OBJECT

public:
    MainWindow(QMainWindow *parent = nullptr);
    ~MainWindow();

    QWidget *main_widget = new QWidget();
    QHBoxLayout *layout = new QHBoxLayout();
    QWidget *left_widget = new QWidget();
    QWidget *right_widget = new QWidget();

};
#endif // MAINWINDOW_H

// mainwindow.cc

#include "mainwindow.h"

MainWindow::MainWindow(QMainWindow *parent)
    : QMainWindow(parent)

{
    // set window size
    this->setFixedSize(QSize(800,600));

    // red colored main widget
    this->main_widget->setStyleSheet("background-color: #ff0000");

    // blue colored upper widget
    this->left_widget->setFixedSize(QSize(250,600));
    this->left_widget->setStyleSheet("background-color: #0000ff");

    // green colored lower widget
    this->right_widget->setFixedSize(QSize(320,600));
    this->right_widget->setStyleSheet("background-color: #00ff00");

    // set QHBoxLayout
    this->layout->setMargin(0);
    this->layout->setSpacing(0);
    this->layout->setAlignment(Qt::AlignLeft);
    this->layout->addWidget(this->left_widget);
    this->layout->addWidget(this->right_widget);

    // set layout to main widget
    this->main_widget->setLayout(this->layout);

    // set central widget
    this->setCentralWidget(this->main_widget);
}

MainWindow::~MainWindow()
{
}

Python

import sys

from PySide2.QtWidgets import *
from PySide2.QtCore import *


class MainWindow(QMainWindow):
    def __init__(self):
        super().__init__()
        self.centralWidget = QWidget(self)
        self.setCentralWidget(self.centralWidget)

        self.setFixedSize(QSize(800,600))
        self.setStyleSheet('background-color: #ff0000;')

        self.left = QWidget()
        self.left.setFixedSize(QSize(250,600))
        self.left.setStyleSheet('background-color: #0000ff;')

        self.right = QWidget()
        self.right.setFixedSize(QSize(320,600))
        self.right.setStyleSheet('background-color: #00ff00;')


        self.layout = QHBoxLayout()
        self.layout.setMargin(0)
        self.layout.setSpacing(0)
        self.layout.setAlignment(Qt.AlignLeft)

        self.layout.addWidget(self.left)
        self.layout.addWidget(self.right)

        self.centralWidget.setLayout(self.layout)


def main():
    app = QApplication(sys.argv)
    window = MainWindow()
    window.show()
    sys.exit(app.exec_())

if __name__ == '__main__':
    main()