Всем привет! 🦝 Это продолжение цикла статей про разработку приложения "Дневник Енотика". Сегодня мы создадим главную форму приложения и запрограммируем её. Предыдущую статью из цикла можно найти по ссылке ниже. Все действия выполняются в операционной системе Astra Linux CE.
📰Компоновка фрэймов
Для начала я удалил с формы menubar и statusbar, если в будущем понадобятся - их всегда можно добавить.
Теперь давайте расставим фрэймы, тем самым создадим каркас для главной формы приложения. Расстановка этих самых фрэймов весьма кропотливый процесс, тут важно набраться терпения.
Убираем всё лишнее с формы, включая надпись Дневник Енотика, если вы её добавляли. Далее выносим на форму два компонента Frame.
Далее в Инспекторе объектов выделяем centralwidget и выбираем у него скомпоновать по вертикали.
Получится, что два недавно добавленных на форму фрэйма, будут занимать равную часть доступной области формы - поделят её пополам.
Далее, давайте переименуем эти фрэймы, чтобы среди них было проще ориентироваться. Верхний фрэйм я назвал header - это будет заголовочный фрэйм, в котором будут размещаться различные элементы управления. Нижний фрэйм я назвал body - это будет основной фрэйм содержащий в себе список записей дневника, поле для редактирования текста и т.д.
Теперь давайте у header ограничим максимальную высоту. Я задал высоту в 65 пикселей. Как можно заметить, фрэйм body занял освободившееся место. Это возможно благодаря политике размера preferred. Опция "preferred" (предпочтительный) относится к размеру виджета или элемента управления, который автоматически адаптируется к содержимому.
Далее в фрэйм header я поместил ещё два фрэйма, скомпоновав их по горизонтали. В левом, он называется logo, исходя из названия будет располагаться логотип приложения и название. В правом, его название tools, будут располагаться элементы управления приложением.
После компоновки у фрэйма logo я задал максимальную ширину в 300 пикселей, думаю этого будет достаточно. Далее я убрал отступы (свойство margin) у фрэйма header, чтобы у фрэймов logo и tools было больше места.
Теперь приступим к компоновке фрэймов внутри фрэйма body. В него я также добавил два фрэйма list и textedit скомпонованных по горизонтали. В list будет список записей с панель управления списком записей. В textedit исходя из названия будет располагаться редактор текста. У фрэйма list, как и у logo в header я задал максимальную ширину 300 пикселей. И также как и у фрэйма header, у body я убрал все отступы. Получилось нечто подобное.
Уже что-то вырисовывается, но это только начало. Дальше давайте добавим панели инструментов в фрэймы list и textedit. Для этого добавим в list фрейм list_tools и скомпонуем элементы внутри list по горизонтали. Далее для list_tools выбираем выравнивание компоновщика по верхнему краю.
Фрейм сильно сожмется, чтобы он не был таким маленьким, давайте воспользуемся свойством размера под названием minimumSize. И в графе высота зададим 35 пикселей, как мне этого вполне достаточно. Также у фрейма list я убрал отступы справа и слева. Тот же самый трюк с добавлением уже textedit_tools я провернул и для фрейма textedit. Получилось нечто подобное.
С компоновкой фрэймами можно сказать закончили🎉, возможно в будущем ещё добавим парочку, но в целом, основные есть. Теперь давайте добавим основные компоненты, с которыми будет взаимодействовать пользователь.
📦Добавление компонентов
Начнем с логотипа приложения, а именно с фрэйма logo. Я добавил в фрэйм два скомпонованных по горизонтали QLabel: image и name. В одном будет располагаться логотип моего канала в другом название приложения. Фрэйм image я ограничил по максимальной ширине в 45 пикселей, а всё остальное место достанется фрэйму name. Давайте теперь добавим логотип в QLabel image. Но сперва, нужно создать файл ресурсов, в котором будут храниться медиафайлы используемые формой. Для этого в Обозревателе ресурсов нажимаем на кнопку Изменить ресурсы (1). Далее в открывшемся окошке Правка ресурсов нажимаем на кнопку Новый файл ресурсов (2). В появившемся диалоговом окне вводим желаемое имя файла (3) и сохраняем файл в рядом с файлом формы (4).
Теперь у нас есть файл ресурсов проекта. Давайте добавим в него первый медиафайл, я буду добавлять лого своего канала.
В редакторе файла ресурсов я создал приставку images (1) и добавил в неё файл картинки с логотипом своего канала (2). Далее нажимаем кнопку Да в редакторе ресурсов. И теперь мы наконец-то сможем добавить картинку в QLabel image. Для этого находим у QLabel image свойство pixmap и нажимаем Выбрать ресурс.
И далее в окошке выбора ресурсов, выбираем недавно добавленную картинку.
После подтверждения выбора, картинка будет некорректно выглядеть внутри QLabel. Для того, чтобы это исправить необходимо свойство scaledContents у QLabel поставить в значение True, или же в редакторе - просто поставить галочку.
Отлично!🎉 Часть формы готова. Давайте доделаем оставшуюся. В фрэйм tools, который находится в header, давайте добавим кнопку (QPushButton) для выбора БД. В самом фрэйме tools установим компоновку по горизонтали, а выравнивание кнопки сделаем по левому краю. Должно получиться нечто подобное.
Теперь к кнопе хорошо было бы добавить иконку. Я беру иконки с сайта icons8, 🔗ссылка ниже.
Находим на сайте понравившуюся вам иконку на тематику базы данных и скачиваем. После скачанную картинку необходимо добавить в файл ресурсов по аналогии с добавлением иконки канала. Далее в свойстве icon у QPushButton, выбираем добавленную в файл ресурсов иконку.
Далее у кнопки можно поменять размер иконки, так как я скачал иконку размером 25 на 25 пикселей, то размер в иконки в Qt Designer я всегда ставлю на один пиксель меньше (привычка у меня такая 🦝). И изменил подпись у кнопки в свойстве text.
Ну а на сегодня всё 🦝 В следующей статье, мы закончим компоновку формы и начнем ее программировать. Все изменения проекта можно отследить на его GitHub
