Сетка или же Layout в PyQt5

Всем привет, сегодня разберем, как же позиционировать наши элементы в приложении, урок будет очень простым в освоении, если вы раньше использовали такой метод для размещения интерфейса или чего-то другого.

Создано специально для канала - https://t.me/PythonKarabok

Теория

Можете пропустить, если вы уже знакомы с вертикальным, горизонтальным и сеточным позиционированием. А для тех, кто не знает, читайте внимательно.

В PyQt5, есть 4 типа макетов (Layout - в переводе с английского макет) - это горизонтальный, вертикальный, сетка, и макет для формы.

Макеты нужны для размещения элементов интерфейса в вашем приложении, их можно комбинировать и тем самым создавать огромные вложенности, и добиваться нужных результатов. "В чем отличие ?", спросите вы, а в том, что одна макет располагает элементы горизонтально, а другой вертикально, третий же создает сетку и можно выбрать куда добавить элемент по индексу строки и столбца - это очень похоже на матрицу из высшей математики, хотя сетка таковой и является.

Горизонтальный и вертикальный макет

Начнем с горизонтального, если использовать его, то мы добьемся, того, что наши элементы будут располагаться горизонтально, как бы это странно не звучало.

Исходный код - https://github.com/Karabok-coder/PyQtTG/blob/main/gridPyQt5TG/Hgrid.py

Запустив эту программу, вы увидите, как элементы себя повели в такой ситуации. Они встали горизонтально.

Давайте разберем по строкам, что же там написано.

Для начала нам нужно импортировать все необходимое (там есть классы, которые не используются, не обращайте на них внимание).

QHBoxLayout находится в PyQt5.QtWidgets, там же и остальные макеты.

Вы заметили новый виджет, который мы делаем центральным ? Ранее мы устанавливали центральный виджет и это была метка, но теперь мы создаем просто пустой виджет, и с ним уже работаем.

Создаем класс и добавляем элементы, которые будут отображаться у нас в окне.(QLineEdit будем разбирать в следующих уроках). Не забываем и про наше точку входа программы, она все также не меняется.

И так все подготовленно, и настает самое интересное - это добавление нашего макета и его применение.

Создаем поле Hlayout, которое будет у нас горизонтальным макетом, и добавляем в него наши виджеты с помощью метода addWidget(). Ранее созданный экземпляр класса QWidget имеет в себе метод setLayout().

Код для вертикального макета не меняется за исключением использования другого класса - QVBoxLayout.

Исходный код - https://github.com/Karabok-coder/PyQtTG/blob/main/gridPyQt5TG/Vgrid.py

Прошу обратить внимание на порядок добавления элементов, если вы попробуете его изменить, то и элементы тоже поменяют свое расположение, так что будьте аккуратнее.

Чуть больше о QMainWindow, комбинирование макетов

Ранее мы уже обсуждали метод setCentralWidget() но хочется добавить, что QMainWindow имеет при инициализации, только одну "ячейку хранения", т.е., в любой момент времени центральный виджет, может быть только один, также центральный виджет может уместить в себя только 1 макет, и как раз макеты решают эту проблему давая нам возможность добавить несколько элементов в них, а уже к центральному виджету мы можем добавить наш макет.

И так же мы можем комбинировать макеты, как, я говорил ранее.

Исходный код - https://github.com/Karabok-coder/PyQtTG/blob/main/gridPyQt5TG/VandHgrid.py

Запустив этот код, вы увидите, что я поместил в 3 вертикальных макета по 2 элемента, а потом добавил это все в горизонтальный и у нас получился не плохой результат, попробуйте сами.

Думаю вы уже заметели, что добавление макета в макет сопровождается методом addLayout(), а не addWidget().

Давайте так же разберем данный код, для лучшего понимания.

Вот тут создаются 3 вертикальных макета, далее мы добавляем элементы с помощью addWidget() и далее мы создаем, и добавляем уже три созданных вертикальных макета в один горизонтальный.

И наконец мы добавили макет в центральный виджет, повторю, что мы можем добавить, только один макет в виджет, такова особенность.

Если же вы попытаетесь написать, что то вроде этого:

То "Hlayout" будет заменен на "Hlayout_1" и вы увидите, только то, что добавили в "Hlayout_1".

Подробнее о методах

Хочется рассказать еще о методах, которые мы сегодня использовали - это setLayout(), addWidget() первый принимает макет, который мы хотим добавить в нашу программу - это класс QLayout, родитель всех классов, которые мы тут рассматриваем. Второй принимает виджет, который мы хотим добавить - это класс QWidget, родитель всех вообще всех виджетов.

GridLayout - сетка

Сетку, я оставил под конец, т.к., я считаю, что она самая сложная для понимания из всех предыдущих. Сетка состоит из столбцов и строк, как упоминалось ранее - это матрица.

Для тех, кто не знает, что такое матрица - это квадрат элементов, может быть, как 4 на 5, так и 3 на 3, как на этой картинке, каждый 0 и 1 ассоциируют собой одну ячейку, в которую мы и будем помещать наши виджеты.

Исходный код - https://github.com/Karabok-coder/PyQtTG/blob/main/gridPyQt5TG/gridLayout.py

Давайте разберем его. Все тоже самое, как и в предыдущих примерах, только тут мы используем класс QGridLayout.

Сначала создадим экземпляр класса QGridLayout и добавим виджеты в сетку, особо внимательные заметили, что добавились еще 2 параметра, они были и в горизонтальном и вертикальном макете при добавлении, там мы могли указать очередность добавления элементов цифрами (0, 1, 2...), здесь, как я говорил ранее матрица, т.е. сначала мы указываем строку, в которой будет находится элемент, затем колонку, и получается из этих индексов ячейка, в которой будет располагаться элемент.

Все очень просто, не правда ли ? Если вы хотите разобраться в этой теме, то советую вам попрактиковаться, например расположить кнопки и метки в шахматном порядке используя разные макеты.

Мы еще не разобрали один макет, а именно макет для формы, его суть заключаться в том, что можно расположить элементы в 2 колонки, для большего понимания, посмотрите на код.

Исходный код - https://github.com/Karabok-coder/PyQtTG/blob/main/gridPyQt5TG/FormLayout.py

Если сравнить с прошлым примером, то тут в меньшее количество строк можно сделать туже самую конструкцию.

Давайте разбираться, что к чему.

Здесь мы добавляем сразу 2 виджета в строку и получается, как будто мы добавляем 2 колонки используя QGridLayout, но на самом деле это один элемент. С помощью QFormLayout удобно создавать формы для ввода, как вы уже поняли, но если прибавить фантазию, можно использовать его по разному.

Если в других макетах был метод addWidget(), то в классе QFormLayout есть метод addRow(), у него есть перегрузки, вы можете с ними ознакомится в IDE кликнув на метод  c зажатым Ctrl (на Mac OS Cmd) + ПКМ.

На этом у меня все, спасибо, что дочитали до конца, ждите следующие уроки.