Всем привет! 🦝 Это продолжение цикла статей про разработку приложения "Дневник Енотика". Сегодня мы закончим проектирование главной формы приложения и перейдем постепенно к программированию на Python. Все действия выполняются в операционной системе Astra Linux CE.
📰Проектирование формы
Добавленной в предыдущей статье кнопке, давайте зададим имя. Я назвал её selDB. Название элементов на форме, как и название переменных в программе, должны отражать их непосредственно выполняемый функционал. selDB - это сокращение от select Data Base.
Теперь давайте разместим компонент ListView, в котором будут отображаться все записи из базы данных. Этому компоненту, также задаем имя отражающее его выполняемую функцию.
Над списком записей давайте добавим поле для поиска записей. Для этого во фрейм list_tools перетащим из панели виджетов компонент LineEdit. Далее, чтобы текстовое поле заняло все пространство, установим у list_tools компоновку по горизонтали и уберем все отступы.
Теперь займемся областью редактора текста. Давайте добавим непосредственно сам редактор во фрейм textedit. Для этого, из панели виджетов перетаскиваем во фрейм компонент Text Edit.
Отлично! 🎉 Теперь давайте добавим под Text Edit компонент List Widget. Он нам понадобиться для отображения фотографий прикрепленных к записи.
Мы почти у цели🦝, осталось наполнить фрейм textedit_tools и главная форма почти готова. Давайте в этот фрейм добавим кнопку сохранения изменений в записи и кнопку удаления записи. Также нам понадобиться компонент выпадающего списка для выборка категории записи.
Далее, у кнопок я установил ограничение в размере по ширине - максимум 110 пикселей. А у выпадающего списка наоборот поставил ограничение на минимальную ширину в 150 пикселей. Ну что ж, худо-бедно, но форму мы собрали. Остался правда последний штрих - добавить иконки к кнопкам. Где я брал иконки, и как их добавить на форму, я писал в своей предыдущей статье на тему разработки этого дневника.
Иконки добавлены, и что-то похожее на программу уже вырисовывается.
Совсем забыл одну важную деталь 😔 - это кнопка добавления записи. Давайте её добавим над полем поиска записи. Теперь во фрейме list_tools придется поменять компоновку с горизонтальной на вертикальную. Получиться нечто подобное.
Внесем ещё несколько штрихов и форма готова! Давайте в поле поиска добавим текст подсказки - placeholderText. Находим это свойство в редакторе свойств и пишем следующий текст - Поиск...
Отлично! 🎉 Теперь давайте уберем границы у всех фреймов и посмотри на форму в режиме предпросмотра. Чтобы убрать все границы у фреймов можно у каждого искать свойство frameShape, и устанавливать там значение NoFrame. Но можно пойти более простым путем. Давайте изменим описание стиля главной формы. Для этого в Инспекторе объектов находим MainWindow и нажимаем по нему правой кнопкой мыши. В контекстном меню выбираем пункт Изменить styleSheet.
В появившемся редакторе стилей добавляем следующий текст:
QFrame{
border: 0px;
}
Этот текст задает параметры для всех компонентов QFrame и устанавливает для них ширину границ, в ноль пикселей. Далее в редакторе нажимаем Применить и Да. Теперь, чтобы посмотреть форму в режиме предпросмотра нажмите в главном окне Qt5 Дизайнера сочетание клавиш Ctrl+R.
Что ж, вроде получилось не плохо. Теперь переходим к PySide и немного затронем Python.
♻️Конвертирование формы
Для начала давайте создадим виртуальное окружение Python, чтобы установить в него PySide, содержащий нужный нам конвертер. Открываем VSCode, как установить VSCode в Astra Linux CE, я писал в одной из 🔗своих статей.
В VSCode открываем папку где хранятся файлы проекта и запускаем терминал.
В терминале пишем команду для создания виртуального окружения в корне директории проекта.
python3.12 -m venv env
Кстати статью о том, как установить свеженький Python в Astra Linux CE, вы
сможете по 🔗ссылке ниже.
После выполнения этой команды в директории проекта появиться каталог с содержимым виртуального окружения.
📌У меня в проекте настроена система управления версиями Git. И сейчас она записала в изменения в проекте создание каталога виртуального окружения. Фиксировать изменения для него это правила плохого тона. Давайте скажем системе управления версиями, чтобы она не обращала внимания на этот каталог. Для этого откроем файл .gitignore и запишем туда следующую строчку.
/env
После записи обязательно сохраните файл. Теперь система управления версиями не будет фиксировать изменения в каталоге виртуального окружения.
И так, приступаем к установке PyQt5
Для этого в терминале сперва активируем недавно созданное виртуальное окружение. Пишем в терминале следующую команду
source env/bin/activate
Отлично! 🎉 Теперь с помощью установщика PIP установим PyQt5. Пишем в терминале следующие команды
pip install setuptools wheel
pip install pyqt5
После установки всех необходимых компонентов приступаем к конвертированию формы. Для этого снова пишем команду в терминале
pyuic5 main.ui -o main_form.py
После выполнения команды, в директории проекта появится файл main_form.py - это файл на языке программирования Python с описанием главной формы проекта, которую мы делали в Qt Дизайнере.
📌Есть также возможность использовать файлы .ui без необходимости их конвертирования в .py. Но об этих тонкостях поговорим в других статьях.
Стоит обратить внимание ещё на одну деталь - это файл diary.qrc. В этом файле хранятся ссылки на ресурсы (изображения в нашем случае) проекта. Чтобы картинки отображались на форме, этот файл так же необходимо конвертировать
pyrcc5 diary.qrc -o diary_rc.py
После выполнения команды, в директории проекта появится ещё один файл на языке Python - это файл ресурсов приложения. Теперь этот файл необходимо подключить к файлу формы. Для этого в файл формы необходимо добавить привязку модуля.
И так, с конвертированием завершили, теперь давайте попробуем запустить форму.
🥁Запуск приложения
Для запуска приложения, давайте создадим главный файл проекта - main.py. В этот файл помещаем следующий код
📌Напоминаю, что все коды проекта можно найти на GitHub
И теперь если нажать на кнопку запуска в VSCode, то мы увидим нашу форму созданную в Qt Дизайнере.
В последующих статьях мы начнем программировать форму на Python, подключим БД и многое другое.
