Создание красивого интерфейса на Python Tkinter: обучение GUI и пошаговое руководство

0
13

Содержание

Что такое Tkinter?

Tkinter - изображение номер один
Tkinter — изображение номер один

Перед тем как погрузиться в код, давайте разберемся, что же такое Tkinter. Tkinter — это стандартная библиотека Python для создания графических интерфейсов. Она предоставляет мощный набор инструментов для разработки приложений, которые могут взаимодействовать с пользователем. С помощью Tkinter вы можете создавать окна, кнопки, текстовые поля и множество других элементов интерфейса.

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

Установка и начало работы

КАК - изображение номер два
КАК — изображение номер два

Если у вас уже установлен Python, то, скорее всего, Tkinter тоже уже есть. Однако, если вы хотите убедиться в этом, выполните следующую команду в терминале:

Если Tkinter не установлен, вы можете установить его с помощью пакетного менеджера вашей операционной системы. Например, для Ubuntu это будет выглядеть так:

Теперь, когда мы убедились, что Tkinter установлен, давайте создадим наше первое окно приложения!

Первое приложение на Tkinter

Создание красивого - изображение номер три
Создание красивого — изображение номер три

Создание простого окна с помощью Tkinter — это просто. Вот пример кода, который создает базовое окно с заголовком:

В этом коде мы импортируем библиотеку Tkinter, создаем главное окно и устанавливаем его заголовок и размер. Затем запускаем главный цикл, который делает наше окно интерактивным. Попробуйте запустить этот код, и вы увидите простое окно с заголовком!

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

Красивый графический интерфейс на - изображение номер четыре
Красивый графический интерфейс на — изображение номер четыре

Для начала, следует импортировать Tkinter и создать окно, в котором мы зададим его название:

Результат будет выглядеть следующим образом: Прекрасно! Наше приложение работает. Последняя строка вызывает функцию mainloop. Эта функция вызывает бесконечный цикл окна, поэтому окно будет ждать любого взаимодействия с пользователем, пока не будет закрыто.

Как сделать графический интерфейс на - изображение номер пять
Как сделать графический интерфейс на — изображение номер пять

В случае, если вы забудете вызвать функцию mainloop, для пользователя ничего не отобразится.

Создание виджета Label

Simple - изображение номер шесть
Simple — изображение номер шесть

Чтобы добавить текст в наш предыдущий пример, мы создадим lbl, с помощью класса Label, например:

Затем мы установим позицию в окне с помощью функции grid и укажем ее следующим образом:

И вот как будет выглядеть результат: Если функция grid не будет вызвана, текст не будет отображаться.

Label, tkinter and - изображение номер семь
Label, tkinter and — изображение номер семь

Настройка размера и шрифта текста

Python - изображение номер восемь
Python — изображение номер восемь

Вы можете задать шрифт текста и размер. Также можно изменить стиль шрифта. Для этого передайте параметр font таким образом:

Обратите внимание, что параметр font может быть передан любому виджету, для того, чтобы поменять его шрифт, он применяется не только к Label.

Tkinter font not changing on python 3 - изображение номер девять
Tkinter font not changing on python 3 — изображение номер девять

Отлично, но стандартное окно слишком мало. Как насчет настройки размера окна?

Настройка размеров окна приложения

How to - изображение номер десять
How to — изображение номер десять

Мы можем установить размер окна по умолчанию, используя функцию geometry следующим образом:

В приведенной выше строке устанавливается окно шириной до 400 пикселей и высотой до 250 пикселей.

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

Добавление виджета Button

Modern - изображение номер одиннадцать
Modern — изображение номер одиннадцать

Начнем с добавления кнопки в окно. Кнопка создается и добавляется в окно так же, как и метка:

Результат будет следующим: Обратите внимание, что мы помещаем кнопку во второй столбец окна, что равно 1. Если вы забудете и поместите кнопку в том же столбце, который равен 0, он покажет только кнопку.

ЧИТАТЬ ТАКЖЕ:  Что делает метод strip в Python: удаление пробелов и символов

tkinter button click with python - изображение номер двенадцать
tkinter button click with python — изображение номер двенадцать

Изменение цвета текста и фона у Button

Как изменить цвет фона по нажатию кнопки tkinter - изображение номер тринадцать
Как изменить цвет фона по нажатию кнопки tkinter — изображение номер тринадцать

Вы можете поменять цвет текста кнопки или любого другого виджета, используя свойство fg. Кроме того, вы можете поменять цвет фона любого виджета, используя свойство bg.

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

Exploring - изображение номер четырнадцать
Exploring — изображение номер четырнадцать

Кнопка Click

03 - изображение номер пятнадцать
03 — изображение номер пятнадцать

Для начала, мы запишем функцию, которую нужно выполнить при нажатии кнопки:

Обратите внимание: мы пишем clicked, а не clicked()с круглыми скобками. Теперь полный код будет выглядеть так:

При нажатии на кнопку, результат, как и ожидалось, будет выглядеть следующим образом: Круто!

СОВРЕМЕННЫЙ - изображение номер шестнадцать
СОВРЕМЕННЫЙ — изображение номер шестнадцать

Получение ввода с использованием класса Entry (текстовое поле Tkinter)

python tkinter поле для ввода урок 2 - изображение номер семнадцать
python tkinter поле для ввода урок 2 — изображение номер семнадцать

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

Затем вы можете добавить его в окно, используя функцию grid. Наше окно будет выглядеть так:

Полученный результат будет выглядеть так: Теперь, если вы нажмете кнопку, она покажет то же самое старое сообщение, но что же будет с отображением введенного текста в виджет Entry?

PYTHON 3 - изображение номер восемнадцать
PYTHON 3 — изображение номер восемнадцать

Во-первых, вы можете получить текст ввода, используя функцию get. Мы можем записать код для выбранной функции таким образом:

Если вы нажмете на кнопку — появится текст «Привет» вместе с введенным текстом в виджете записи. Вот полный код:

Запустите вышеуказанный код и проверьте результат: Прекрасно!

How to create an - изображение номер девятнадцать
How to create an — изображение номер девятнадцать

Каждый раз, когда мы запускаем код, нам нужно нажать на виджет ввода, чтобы настроить фокус на ввод текста, но как насчет автоматической настройки фокуса?

Установка фокуса виджета ввода

Библиотека tkinter в - изображение номер двадцать
Библиотека tkinter в — изображение номер двадцать

Здесь все очень просто, ведь все, что нам нужно сделать, — это вызвать функцию focus:

Когда вы запустите свой код, вы заметите, что виджет ввода в фокусе, который дает возможность сразу написать текст.

Добавление виджета Combobox

Файл - изображение номер двадцать один
Файл — изображение номер двадцать один

Как видите с примера, мы добавляем элементы combobox, используя значения tuple. Чтобы установить выбранный элемент, вы можете передать индекс нужного элемента текущей функции. Чтобы получить элемент select, вы можете использовать функцию get вот таким образом:

Combobox in tkinter - изображение номер двадцать два
Combobox in tkinter — изображение номер двадцать два

Установка состояния Checkbutton

A - изображение номер двадцать три
A — изображение номер двадцать три

Здесь мы создаем переменную типа BooleanVar, которая не является стандартной переменной Python, это переменная Tkinter, затем передаем ее классу Checkbutton, чтобы установить состояние чекбокса как True в приведенном выше примере.

Вы можете установить для BooleanVar значение false, что бы чекбокс не был отмечен. Так же, используйте IntVar вместо BooleanVar и установите значения 0 и 1.

Добавление виджетов Radio Button

Create - изображение номер двадцать четыре
Create — изображение номер двадцать четыре

Обратите внимание, что вы должны установить value для каждой radio кнопки с уникальным значением, иначе они не будут работать.

Результатом вышеприведенного кода будет следующий: Кроме того, вы можете задать command любой из этих кнопок для определенной функции. Если пользователь нажимает на такую кнопку, она запустит код функции. Вот пример:

ส อ น - изображение номер двадцать пять
ส อ น — изображение номер двадцать пять

Получение значения Radio Button (Избранная Radio Button)

how to create a radio button in python - изображение номер двадцать шесть
how to create a radio button in python — изображение номер двадцать шесть

Чтобы получить текущую выбранную radio кнопку или ее значение, вы можете передать параметр переменной и получить его значение.

Radiobutton in tkinter // methods and attributes // tkinter tutorial in hindi // - изображение номер двадцать семь
Radiobutton in tkinter // methods and attributes // tkinter tutorial in hindi // — изображение номер двадцать семь

Показ сообщений о предупреждениях и ошибках

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

Показ диалоговых окон с выбором варианта

Современные графические приложения на - изображение номер двадцать девять
Современные графические приложения на — изображение номер двадцать девять

Чтобы показать пользователю сообщение “да/нет”, вы можете использовать одну из следующих функций messagebox:

Вы можете выбрать соответствующий стиль сообщения согласно вашим потребностям. Просто замените строку функции showinfo на одну из предыдущих и запустите скрипт. Кроме того, можно проверить, какая кнопка нажата, используя переменную результата.

Если вы кликнете OK, yes или retry, значение станет True, а если выберете no или cancel, значение будет False. Единственной функцией, которая возвращает одно из трех значений, является функция askyesnocancel; она возвращает True/False/None.

Добавление SpinBox (Виджет спинбокс)

Spinbox in tkinter - изображение номер тридцать
Spinbox in tkinter — изображение номер тридцать

Таким образом, мы создаем виджет Spinbox, и передаем параметры from и to, чтобы указать диапазон номеров. Кроме того, вы можете указать ширину виджета с помощью параметра width:

ЧИТАТЬ ТАКЖЕ:  Правила именования переменных в Python: как выбрать допустимое имя и нотацию

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

Виджет - изображение номер тридцать один
Виджет — изображение номер тридцать один

Добавление виджета Progressbar

Multi - изображение номер тридцать два
Multi — изображение номер тридцать два

Вы можете установить это значение на основе любого процесса или при выполнении задачи.

Изменение цвета Progressbar

Custom - изображение номер тридцать три
Custom — изображение номер тридцать три

Изменение цвета Progressbar немного сложно. Сначала нужно создать стиль и задать цвет фона, а затем настроить созданный стиль на Progressbar. Посмотрите следующий пример:

T_44 - изображение номер тридцать четыре
T_44 — изображение номер тридцать четыре

Добавление поля загрузки файла

Четыре способа написать - изображение номер тридцать пять
Четыре способа написать — изображение номер тридцать пять

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

В этом уроке мы увидели много примеров GUI Python с использованием библиотеки Tkinter. Так же рассмотрели основные аспекты разработки графического интерфейса Python. Не стоит на этом останавливаться. Нет учебника или книги, которая может охватывать все детали. Надеюсь, эти примеры были полезными для вас.

Указание типа файлов (расширение фильтра файлов)

все виды расширений файлов - изображение номер тридцать шесть
все виды расширений файлов — изображение номер тридцать шесть

Возможность указания типа файлов доступна при использовании параметра filetypes, однако при этом важно указать расширение в tuples.

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

Добавление панели меню

Пример меню, подменю, высплывающее меню в - изображение номер тридцать семь
Пример меню, подменю, высплывающее меню в — изображение номер тридцать семь

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

Create a - изображение номер тридцать восемь
Create a — изображение номер тридцать восемь

Теперь мы добавляем еще один пункт меню “Изменить” с разделителем меню. Вы можете заметить пунктирную линию в начале, если вы нажмете на эту строку, она отобразит пункты меню в небольшом отдельном окне.

Создание пользовательского меню, панели инструментов и ленты в nano - изображение номер тридцать девять
Создание пользовательского меню, панели инструментов и ленты в nano — изображение номер тридцать девять

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

Добавление виджета Notebook (Управление вкладкой)

Настройка инструментов разработчика - изображение номер сорок
Настройка инструментов разработчика — изображение номер сорок

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

Добавление виджета в конструкторе - изображение номер сорок один
Добавление виджета в конструкторе — изображение номер сорок один

Добавление виджетов на вкладку

Как добавить несколько виджетов на сайт - изображение номер сорок два
Как добавить несколько виджетов на сайт — изображение номер сорок два

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

Элементы интерфейса (примеры) - изображение номер сорок три
Элементы интерфейса (примеры) — изображение номер сорок три

Элементы интерфейса

Пользовательский интерфейс операционной системы - изображение номер сорок четыре
Пользовательский интерфейс операционной системы — изображение номер сорок четыре

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

  • Label — для отображения текста или изображений.
  • Button — для создания кнопок, на которые можно нажимать.
  • Entry — для ввода текста пользователем.
  • Text — для многострочного ввода текста.
  • Frame — для группировки других виджетов.

Добавление элементов в наше приложение

Python, tkinter, canvas 3: text - изображение номер сорок пять
Python, tkinter, canvas 3: text — изображение номер сорок пять

Давайте добавим несколько элементов в наше окно. Вот пример, который создает кнопку и текстовое поле:

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

Организация элементов с помощью Frame

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

В этом коде мы используем метод bind, чтобы связать событие нажатия клавиши с функцией on_key_press. Теперь, когда пользователь нажимает клавишу, текст в метке обновляется, чтобы отобразить нажатую клавишу. Это позволяет вашему приложению реагировать на действия пользователя в реальном времени!

Часто задаваемые вопросы по созданию красивого интерфейса в Tkinter

Вопрос: Как сделать окно Tkinter красивым?
Ответ: Используйте современные темы (ttk), настраивайте шрифты, цвета и отступы, а также применяйте менеджеры геометрии (grid/pack) для аккуратного расположения виджетов.

Вопрос: Как изменить цвет фона окна в Tkinter?
Ответ: Используйте метод config(bg='цвет') для окна или виджета, например root.config(bg='#f0f0f0').

Вопрос: Как сделать кнопку с закругленными углами в Tkinter?
Ответ: Стандартный Tkinter не поддерживает закругленные углы. Используйте библиотеку tkinter.ttk с темой или создайте кастомный виджет на Canvas.

Вопрос: Как добавить иконку в приложение Tkinter?
Ответ: Используйте метод root.iconbitmap('путь_к_файлу.ico') для Windows или root.iconphoto(True, PhotoImage(file='icon.png')) для других ОС.

Вопрос: Как сделать интерфейс адаптивным при изменении размера окна?
Ответ: Используйте менеджер геометрии grid с параметрами sticky='nsew' и настройте веса строк/столбцов через grid_rowconfigure и grid_columnconfigure.

Вопрос: Как убрать стандартный заголовок окна и создать свой?
Ответ: Используйте root.overrideredirect(True), чтобы убрать заголовок, и создайте свою панель заголовка с помощью Frame и кнопок.

Вопрос: Как сделать прозрачное окно в Tkinter?
Ответ: Используйте атрибут root.attributes('-alpha', 0.5), где 0.5 — уровень прозрачности (от 0 до 1).

Вопрос: Как добавить тени или градиент в Tkinter?
Ответ: Tkinter не поддерживает тени и градиенты напрямую. Их можно имитировать с помощью Canvas, рисуя фигуры с разными цветами.

Вопрос: Как изменить шрифт для всех виджетов сразу?
Ответ: Создайте объект шрифта font.nametofont('TkDefaultFont') и измените его параметры, например font.configure(size=12, family='Arial').

Вопрос: Как сделать красивый интерфейс, похожий на современные приложения?
Ответ: Используйте библиотеки-надстройки, такие как CustomTkinter или PySimpleGUI, которые предоставляют современные виджеты с округлыми углами и темами.