375 KiB
Практическая работа 4.
Создание пользовательского интерфейса с помощью QtDesigner
Цель работы – ознакомиться с интерфейсом QtDesigner и создать простое приложение с использованием графического интерфейса пользователя, научиться создавать элементы управления и настраивать их свойства.
ОБЩИЕ СВЕДЕНИЯ
QtDesigner — это графический редактор, входящий в состав фреймворка Qt, который позволяет создавать пользовательские интерфейсы для приложений. QtDesigner позволяет создавать элементы управления, располагать их на форме и настраивать их свойства. Это инструмент, позволяющий разработчикам создавать профессионально выглядящие пользовательские интерфейсы с минимальными усилиями.
При открытии программы открывается окно, представленное на рисунке 1.
Рисунок 4.1 – Окно программы
На рисунке 4.1 представлено главное окно с различными вкладками, которые можно использовать. Для создания нового проекта необходимо выбрать один из доступных шаблонов: диалоговое окно с кнопкой, диалоговое окно без кнопки, виджет или оконное приложение.
На рисунке 4.2 показана рабочая область Qt Designer. Она включает следующие элементы: основное окно приложения (1), objectinspector (2) для просмотра и редактирования свойств и атрибутов объектов, окно виджетов (3), окно свойств (4), signalsloteditor (5), который используется для создания и редактирования связей между сигналами и слотами в интерфейсе пользователя, а также редактор для быстрого доступа к функциям, таким как изменение компоновок, редактирование свойств виджетов и сигналов и слотов (6).
Рисунок 4.2 – Рабочая область
Чтобы добавить элементы в приложение необходимо соответствующий виджет перенести на рабочее поле. Справа задаются свойства нового объекта.
Все элементы расположены слева в Widgetbox.
В Widgetbox можно найти группы элементов, включающие в себя Layouts (компоновщики) для автоматического размещения элементов на форме, Spacers для создания пустого пространства между элементами в Layout, "Buttons" (кнопки) разных типов, Itemview для просмотра и редактирования данных, представленных в виде таблиц, списков, деревьев и т.д., Itemwidget для показа данных более подробно или обеспечения дополнительного функционала, Inputwidgets для ввода информации пользователем и "Display Widgets" (виджеты отображения) для отображения информации, таких как таблицы, диаграммы, графики и т.д
1. ИЗУЧЕНИЕ СВОЙСТВ ВИДЖЕТОВ
Первый пункт лабораторной работы нацелен на исследование особенностей элементов, расположенных на рабочей области.
1) Создайте окно фиксированного размера (задайте самостоятельно), расположите на нем 2 кнопки и текстовое поле приветствия (рисунок 4.3). Размеры окна задаются в окне свойств во вкладке geometry. После этого необходимо сделать так, чтобы при запуске программы, пользователь не мог изменить размер окна. Кроме того, необходимо выровнять кнопки с помощью QHBoxLayout или QVBoxLayout.
Рисунок 3 – Установка размера приложения и добавление кнопок
2) Измените иконку приложения, предварительно скачав нужное изображение.
3) Измените название приложения.
4) Измените цвета кнопок, фона приложения, текста. Для этого используйте свойство «styleSheet». Вызывается путем нажатия правой кнопкой мыши на соответствующий виджет.
5) Сделайте так, чтобы размер окна можно менять. Попробуйте поменять. Как Вы заметите, при изменении окна приложения, кнопки внутри остаются неподвижны. Исправьте это.
6) Сделайте так, чтобы между кнопками и текстом было одинаковое расстояние. Используйте вертикальные и горизонтальные отступы.
2. РАБОТА С СИГНАЛАМИ И СЛОТАМИ
Событийно-ориентированные приложения в PyQt5 работают на основе модели событий. События могут быть вызваны пользователем, а также другими средствами, например, подключением к Интернету или таймером. После вызова метода exec_() приложение входит в главный цикл, который получает события и отправляет их объектам.
В модели событий выделяют три участника:
1. Источник события
2. Объект события
3. Цель события
Источник события — это объект, состояние которого меняется и который вызывает событие. Событие инкапсулирует изменение состояния в источнике события.
Цель события — это объект, которому требуется уведомление. Объект источника события делегирует задачу обработки события цели события.
Для работы с событиями PyQt5 использует механизм сигналов и слотов. Сигналы и слоты используются для связи между объектами. Они позволяют объектам реагировать на события других объектов, например, на нажатие кнопки или изменение значения в поле ввода.
Сигналы — это методы объекта, которые генерируют события. Например, метод clicked() кнопки QPushButton генерирует сигнал clicked(), когда кнопка нажата. Сигналы могут принимать аргументы, которые передаются слотам.
Слоты — это методы объекта, которые вызываются при срабатывании сигнала. Слоты могут быть подключены к сигналам и вызываться автоматически, когда сигнал срабатывает. Например, слот можно использовать для обновления значения в поле ввода при изменении значения в другом поле.
Сигналы и слоты можно связывать в программе QtDesigner двумя способами: либо выбирая отправителя и сигнал (рисунок 4.4), либо напрямую рисуя связи, выбрав пункт меню Edit/EditSignals/Slots (указание виджетов, между сигналом и слотом которых устанавливается связь, выполняется визуально: щелкаем левой клавишей мышки по виджету кнопки и, не отпуская левой клавиши, переносим указатель мышки на свободное место окна, рисунок 4.5).
Рисунок 4.4 – Связывание сигналов и слотов. Вариант 1
Рисунок 4.5 - Связывание сигналов и слотов. Вариант 2
1) Создайте окно с выпадающим списком и текстовым полем. При выборе элемента из списка в текстовое поле должен быть выведен соответствующий текст. Свяжите список и текстовое поле между собой таким образом, чтобы изменения в списке автоматически отображались в текстовом поле.
2) Создать приложение, которое будет отображать текущее время и дату в двух разных виджетах. Связать эти два виджета таким образом, чтобы изменения в одном виджете автоматически отображались в другом
3) Создать приложение с двумя кнопками и одним текстовым полем. При нажатии на первую кнопку в текстовом поле должен появиться текст "Кнопка 1 нажата". При нажатии на вторую кнопку в текстовом поле должен появиться текст "Кнопка 2 нажата". Связать обе кнопки с одним слотом, который будет изменять текст в текстовом поле в зависимости от нажатой кнопки.
4) Создать приложение с горизонтальным слайдером и текстовым полем. При перемещении слайдера значение в текстовом поле должно изменяться. Связать слайдер и текстовое поле между собой таким образом, чтобы изменения в одном виджете автоматически отображались в другом.
5) Создайте окно с двумя ползунками. При изменении значения первого ползунка значение второго ползунка должно автоматически изменяться и наоборот.
6) Создайте окно с изображением и кнопкой. При нажатии на кнопку изображение должно изменяться. Свяжите кнопку и изображение между собой таким образом, чтобы изменения в кнопке автоматически отображались в изображении.
7) Создайте таблицу с тремя столбцами и тремя строками. Заполните ее произвольными данными. Создайте соответствующие сигналы и слоты, чтобы при щелчке на ячейке таблицы, в которой находится число, в метке отображалось это число.
8) Создайте форму с полем для ввода текста и кнопкой "Очистить". Создайте соответствующие сигналы и слоты, чтобы при нажатии на кнопку "Очистить" содержимое поля для ввода текста удалялось.
3. СОЗДАНИЕ ИНТЕРФЕЙСА ДЛЯ УПРАВЛЕНИЯ МАКЕТОМ
1) Создайте интерфейс для работы с макетом. Продумайте кнопки для отправки и получения данных, используйте текстовые поля, картинки и т.д. Обязательно запишите все названия ваших виджетов.
Контрольные вопросы:
1. Как создать окно в QtDesigner и задать ему определенный размер?
2. Как добавить кнопку в окно и привязать к ней событие?
3. Чем отличается виджет от MainWindow?
4. Что такое layout в PyQt5 и для чего он используется?
5. Что такое spacer в PyQt5 и как его использовать?