Создание графического интерфейса в python

Обзор библиотек для создания графического интерфейса пользователя (GUI).

Игра Тетрис на PyQt5

Игра Тетрис – одна из самых популярных компьютерных игр. Оригинальная игра была разработана и запрограммирована русским программистом Алексеем Пажитновым в 1985 году. С тех пор, Тетрис доступен на почти каждой компьютерной платформе в множестве вариаций.

Создание простой компьютерной игры на PyQt5 – отличный способ повышения навыков программирования.

Создание собственного виджета в PyQt5

PyQt5 имеет богатый набор готовых виджетов. Тем не менее, нет в мире инструментария, способного предоставить все виджеты, в которых программисты могут нуждаться для своих приложений. Библиотеки обычно предоставляют только самые распространенные виджеты, такие как кнопки, текстовые виджеты или ползунки. Если есть необходимость в более специализированных виджетах, мы должны создать их сами.

Рисование в PyQt5

Система рисования PyQt5 способна обрабатывать векторную графику, изображения и шрифты. Рисование необходимо в приложениях, когда мы хотим изменить или улучшить существующий виджет, или мы создаём пользовательский виджет с нуля. Чтобы сделать рисунок, мы используем API рисования, предоставленное инструментарием PyQt5.

Перетаскивание (drag & drop) в PyQt5

В этой части руководства по PyQt5, мы поговорим об операциях drag & drop. В графических интерфейсах, drag & drop – это действие клика на виртуальный объект и перетаскивания его в другое положение или в другой виртуальный объект.

Виджеты в PyQt5 (часть 2)

Мы продолжим знакомство с виджетами PyQt5.

Мы обсудим QPixmap, QLineEdit, QSplitter и QComboBox.

Виджеты в PyQt5

Виджеты – это основные строительные кирпичики приложения. PyQt5 имеет множество разнообразных виджетов, включая кнопки, чекбоксы, ползунки и списки. В этой части руководства, мы опишем несколько полезных виджетов: QCheckBox, ToggleButton, QSlider, QProgressBar и QCalendarWidget.

Диалоговые окна в PyQt5

Диалоговые окна (диалоги) являются неотъемлемой частью большинства современных графических приложений. Диалог в обычной жизни – это беседа между двумя и более людьми. В компьютерном приложении, диалог – это окно, которое используется, чтобы «беседовать» с приложением. Диалоги используются для ввода и изменения данных, изменения настроек приложения, и так далее.

События и сигналы в PyQt5

В этой части учебника PyQt5, мы изучим события и сигналы, встречающиеся в приложениях.

Управление макетом в PyQt5

Значимая сторона в программировании графических приложений – управление макетом, то есть расположение виджетов в окне приложения. Управление макетом можно осуществлять двумя основными способами: с помощью абсолютного позиционирования или специальных классов.

Меню и тулбары в PyQt5

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

  • Переводы, 30 марта 2018 в 9:48
  • Никита Прияцелюк

Эта статья предназначена для тех, кто только начинает своё знакомство с созданием приложений с графическим интерфейсом (GUI) на Python. В ней мы рассмотрим основы использования PyQt в связке с Qt Designer. Шаг за шагом мы создадим простое Python GUI приложение, которое будет отображать содержимое выбранной директории.

Что нам потребуется

Нам понадобятся PyQt и Qt Designer, ну и Python, само собой.

В этой статье используется PyQt5 с Python 3, но особых различий между PyQt и PySide или их версиями для Python 2 нет.

Windows: PyQt можно скачать здесь. В комплекте с ним идёт Qt Designer.

macOS: Вы можете установить PyQt с помощью Homebrew:

$ brew install pyqt5

Скачать пакет с большинством компонентов и инструментов Qt, который содержит Qt Designer, можно по этой ссылке.

Linux: Всё нужное, вероятно, есть в репозиториях вашего дистрибутива. Qt Designer можно установить из Центра Приложений, но PyQt придётся устанавливать через терминал. Установить всё, что нам понадобится, одной командой можно, например, так:

После того как вы закончили с приготовлениями, откройте командную строку/терминал и убедитесь, что вы можете использовать команду pyuic5 . Вы должны увидеть следующее:

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

Читайте также:  Red dead redemption 2 набор выживания бандита

Если вы используете Windows, то, скорее всего, путь C:Python36Scripts (измените 36 на вашу версию Python) не прописан в вашем PATH . Загляните в этот тред на Stack Overflow, чтобы узнать, как решить проблему.

Дизайн

Основы

Теперь, когда у нас всё готово к работе, давайте начнём с простого дизайна.

«КРОК», Москва, от 100 000 до 250 000 ₽

Откройте Qt Designer, где вы увидите диалог новой формы, выберите Main Window и нажмите Create.

После этого у вас должна появиться форма — шаблон для окна, размер которого можно менять и куда можно вставлять объекты из окна виджетов и т.д. Ознакомьтесь с интерфейсом, он довольно простой.

Теперь давайте немного изменим размер нашего главного окна, т.к. нам не нужно, чтобы оно было таким большим. А ещё давайте уберём автоматически добавленное меню и строку состояния, поскольку в нашем приложении они не пригодятся.

Все элементы формы и их иерархия по умолчанию отображаются в правой части окна Qt Designer под названием Object Inspector. Вы с лёгкостью можете удалять объекты, кликая по ним правой кнопкой мыши в этом окне. Или же вы можете выбрать их в основной форме и нажать клавишу DEL на клавиатуре.

В итоге мы имеем почти пустую форму. Единственный оставшийся объект — centralwidget , но он нам понадобится, поэтому с ним мы ничего не будем делать.

Теперь перетащите куда-нибудь в основную форму List Widget (не List View) и Push Button из Widget Box.

Макеты

Вместо использования фиксированных позиций и размеров элементов в приложении лучше использовать макеты. Фиксированные позиции и размеры у вас будут выглядеть хорошо (пока вы не измените размер окна), но вы никогда не можете быть уверены, что всё будет точно так же на других машинах и/или операционных системах.

Макеты представляют собой контейнеры для виджетов, которые будут удерживать их на определённой позиции относительно других элементов. Поэтому при изменении размера окна размер виджетов тоже будет меняться.

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

Теперь в меню Qt Designer нажмите Form, затем выберите Preview и увидите что-то похожее на скриншот выше. Выглядит хорошо, не так ли? Но вот что случится, когда мы изменим размер окна:

Наши объекты остались на тех же местах и сохранили свои размеры, несмотря на то что размер основного окна изменился и кнопку почти не видно. Вот поэтому в большинстве случаев стоит использовать макеты. Конечно, бывают случаи, когда вам, например, нужна фиксированная или минимальная/максимальная ширина объекта. Но вообще при разработке приложения лучше использовать макеты.

Основное окно уже поддерживает макеты, поэтому нам ничего не нужно добавлять в нашу форму. Просто кликните правой кнопкой мыши по Main Window в Object Inspector и выберите Lay outLay out vertically. Также вы можете кликнуть правой кнопкой по пустой области в форме и выбрать те же опции:

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

Так как мы использовали вертикальное размещение, все элементы, которые мы добавим, будут располагаться вертикально. Можно комбинировать размещения для получения желаемого результата. Например, горизонтальное размещение двух кнопок в вертикальном будет выглядеть так:

Если у вас не получается переместить элемент в главном окне, вы можете сделать это в окне Object Inspector.

Последние штрихи

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

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

Свойства элементов можно изменить в разделе Property Editor.

Подсказка: вы можете менять размер, передвигать или добавлять часто используемые элементы в интерфейс Qt Designer для ускорения рабочего процесса. Вы можете добавлять скрытые/закрытые части интерфейса через пункт меню View.

Нажмите на кнопку, которую вы добавили в форму. Теперь в Property Editor вы должны видеть все свойства этого элемента. В данный момент нас интересуют objectName и text в разделе QAbstractButton . Вы можете сворачивать разделы в Property Editor нажатием по названию раздела.

Измените значение objectName на btnBrowse и text на Выберите папку.

Читайте также:  Blender список горячих клавиш

Должно получиться так:

Именем объекта списка является listWidget , что вполне подходит в данном случае.

Сохраните дизайн как design.ui в папке проекта.

Превращаем дизайн в код

Конечно, можно использовать .ui -файлы напрямую из Python-кода, однако есть и другой путь, который может показаться легче. Можно конвертировать код .ui -файла в Python-файл, который мы потом сможем импортировать и использовать. Для этого мы используем команду pyuic5 из терминала/командной строки.

Чтобы конвертировать .ui -файл в Python-файл с названием design.py , используйте следующую команду:

Пишем код

Теперь у нас есть файл design.py с нужной частью дизайна нашего приложения и мы начинать работу над созданием его логики.

Создайте файл main.py в папке, где находится design.py .

Используем дизайн

Для Python GUI приложения понадобятся следующие модули:

Также нам нужен код дизайна, который мы создали ранее, поэтому его мы тоже импортируем:

Так как файл с дизайном будет полностью перезаписываться каждый раз при изменении дизайна, мы не будем изменять его. Вместо этого мы создадим новый класс ExampleApp , который объединим с кодом дизайна для использования всех его функций:

В этом классе мы будем взаимодействовать с элементами интерфейса, добавлять соединения и всё остальное, что нам потребуется. Но для начала нам нужно инициализировать класс при запуске кода. С этим мы разберёмся в функции main() :

И чтобы выполнить эту функцию, мы воспользуемся привычной конструкцией:

В итоге main.py выглядит таким образом:

Если запустить этот код: $ python3 main.py , то наше приложение запустится!

Но нажатие на кнопку ничего не даёт, поэтому нам придётся с этим разобраться.

Добавляем функциональность в наше Python GUI приложение

Примечание Весь дальнейший код пишется внутри класса ExampleApp .

Начнём с кнопки Выберите папку. Привязать к функции событие вроде нажатия на кнопку можно следующим образом:

Добавьте эту строку в метод __init__ класса ExampleApp , чтобы выполнить привязку при запуске приложения. А теперь взглянем на неё поближе:

  • self.btnBrowse : здесь btnBrowse — имя объекта, который мы определили в Qt Designer. self говорит само за себя и означает принадлежность к текущему классу;
  • clicked — событие, которое мы хотим привязать. У разных элементов разные события, например, у виджетов списка есть itemSelectionChanged и т.д.;
  • connect() — метод, который привязывает событие к вызову переданной функции;
  • self.browse_folder — просто функция (метод), которую мы описали в классе ExampleApp .

Для открытия диалога выбора папки мы можем использовать встроенный метод QtWidgets.QFileDialog.getExistingDirectory :

Если пользователь выберет директорию, переменной directory присвоится абсолютный путь к выбранной директории, в противном случае она будет равна None . Чтобы не выполнять код дальше, если пользователь закроет диалог, мы используем команду if directory: .

Для отображения содержимого директории нам нужно импортировать os :

И получить список содержимого следующим образом:

Для добавления элементов в listWidget мы используем метод addItem() , а для удаления всех элементов у нас есть self.listWidget.clear() .

В итоге функция browse_folder должна выглядеть так:

Теперь, если запустить приложение, нажать на кнопку и выбрать директорию, мы увидим:

Так выглядит весь код нашего Python GUI приложения:

Это были основы использования Qt Designer и PyQt для разработки Python GUI приложения. Теперь вы можете спокойно изменять дизайн приложения и использовать команду pyuic5 без страха потерять написанный код.

Пользовательский графический интерфейс с Tkinter в Python Питон.

В этом уроке мы разберём создание простого графического пользовательского интерфейса (GUI) в Python Питон.
GUI расшифровывается как Graphical User Interface. На русском это означает пользовательский графический интерфейс. GUI используется во всех современных программах, он позволяет значительно облегчить работу с этими программами.
Для создания GUI в Python используется модуль tkinter. Импортируем этот модуль в нашу программу.
import tkinter as tk
Для создания GUI в Питоне нужно создать окно для него. Чтобы создать окно win, используйте команду tk.Tk()
win = tk.Tk()
В конце любой программы на tkinter в Питон нужно писать команду win.mainloop(), win это название окна для интерфейса. Команда mainloop() не позволяет окну закрываться сразу же при исполнении программы. Если не поместить эту команду в конец программы на Python, то окно для интерфейса закроется сразу же после запуска программы.
win.mainloop()
Изменим название окна для интерфейса Питон с помощью команды win.title(“”). В кавычках пишется текст, который будет отображаться в названии окна.
win.title("itrobo.ru")
Зададим окно размером 350×200 пикселей. Для этого в Python используется команда win.geometry(AxB), где A это ширина окна, B это высота окна. A и B пишутся в кавычках и разделяются символом “x”.
win.geometry("350×200")
Элементы в tkinter в Питоне создаются с помощью команды
элемент = tk.название_элемента(параметры_элемента)

Элемент метка label в Python

Метка в Python создаётся с помощью команды
txt = tk.Label(win, text = "Комментарий")
txt это название элемента-метки, Label это название метки, win это окно, в котором отображается метка, text это параметр, отвечающий за текст в метке, “Комментарий” это текст который будет отображаться в метке. Все параметры приведены в этом уроке. (ссылка на урок с метками, все 3 урока надо выложить вместе)
Элементы в tkinter в Питоне располагаются по сетке. Чтобы поставить элемент в определённое место сетки, используйте команду txt.gr >, где txt это название элемента, который нужно расположить, row и column это параметры, отвечающие за строку и столбец с элементом, m и n это номера строки и столбца.
txt.gr >

Читайте также:  Как отключить лаунчер на самсунге

Пример программы на Python графический интерфейс метка

import tkinter as tk
win = tk.Tk()
win.title("itrobo.ru")
win.geometry("300×300")
res = tk.Label(win, text = "Привет")
res.gr > win.mainloop()

Для изменения надписи на метке используется команда имя метки.configure(text="новый текст метки")
Например
res.configure(text="мою надпись поменяли")

Элемент Button кнопка в Python

Чтобы задать кнопку в графическом интерфейсе python необходимо использовать команду
название объекта кнопка = tk.Button(win, text = “надпись на кнопке”, сomand = имя функции при нажатии)
Например
button=tk.Button(win, text = “нажми меня”, comand =onclick)
создаст нкнопку с именем button надпись на кнопке Нажми меня, при нажатии будет вызываться процедура onclik
для вывода кнопки на экран мы используем разметку и команду
имя кнопки.gr >
например
button.gr >
Приведем пример программы графический интерфейс на Python с кнопкой и меткой, при нажатии на кнпоку название метки меняется на Меня нажали
import tkinter as tk
win = tk.Tk()
win.title("itrobo.ru")
win.geometry("300×300")
res = tk.Label(win, text = "-")
res.gr > def onclick():
res.configure(text = "меня нажали")
button = tk.Button(win, text = "нажми меня", command = onclick)
button.gr > win.mainloop()

Элемент текстовое поле в графическом интерфейсе python

Для задания тектового поля в графическом пользовательском интерфейсе Python используется команда
имя текстового поля=tk.Entry(имя окна)
например команда
text1=tk.Entry(win)
cоздаст объект текстовое поле с именем text1 в окне win
для отображения в окне интерфейса python используется команда
имя элемента.gr >
Например
text1.gr >
Чтобы получить данные из текстового поля в Python используется команда
имя поля.get()
Например
znach=float(text1.get())
записывает в переменную znach числовое значение поля text1

Пример программы с графическим пользовательским интерфейсом в Python простейший калькулятор

Сделаем программу калькулятор на Python. В двух текстовых полях пользователь вводит два числа. При нажатии на кнопку в метке будет показываться сумма этих чисел.
Введём два текстовых поля и метку. Первое поле назовём num1, второе num2, метку назовём res. Зададим кнопку button. Поля для ввода текста задаются с помощью команды tk.Entry(win)
num1 = tk.Entry(win)
num1.gr > num2 = tk.Entry(win)
num2.gr > res = tk.Label(win, text = "-")
res.gr >
Зададим кнопку button с помощью команды
button = tk.Button(win, text = “Сумма”)
button это название кнопки, win это окно, где отображается кнопка, text = “Сумма” это параметр, определяющий текст на кнопке.
Если вы просто зададите кнопку, запустите программу на Питоне и нажмёте на кнопку, ничего не произойдёт. Чтобы задать действие по нажатию кнопки, нужно использовать параметр кнопки command. Разберём процедуру нахождения суммы и нажатия кнопки.
При нажатии на кнопку в Python мы должны получить значения двух чисел в текстовых полях, сложить эти числа и вывести сумму в метку. Создадим для этого отдельную процедуру summation(). Подробно о процедурах в Python
Чтобы получить числа из текстовых полей в Питоне, используем команду num1.get() Обратите внимание, что текстовые поля всегда возвращают данные в виде строк, поэтому переведём их числа, используя команду float()
one = float(num1.get())
two = float(num2.get())
Теперь создадим переменную result, в которой будет храниться сумма полученных чисел.
result = one + two
После того, как мы задали метку res с результатом в Питон, нужно изменить текст в ней с “-” на результат. Это можно сделать с помощью команды res.configure(text) и форматированного вывода.
res.configure(text = "= %s" % result)
После того, как мы создали процедуру для вывода чисел в Python, назначим нажатие кнопки на неё. Это можно сделать, присвоив параметр command созданной процедуре.
button = tk.Button(win, text = "Сумма", command = summation)
button.gr >
Полный код программы на python с графическим пользовательским интерфейсом простейший калькулятор.
import tkinter as tk
win = tk.Tk()
win.title("itrobo.ru")
win.geometry("400×400")
num1 = tk.Entry(win)
num1.gr > num2 = tk.Entry(win)
num2.gr > res = tk.Label(win, text = "-")
res.gr > def summation():
one = float(num1.get())
two = float(num2.get())
result = one + two
res.configure(text = "= %s" % result)
button = tk.Button(win, text = "Сумма", command = summation)
button.gr > win.mainloop()

Вернуться к содержанию Следующая тема Словари в Питон