Графические виджеты
Уроки Открыть IDE
На главную
Виджеты • Урок 0

Первое графическое приложение

Создаём окно, добавляем кнопки и знакомимся с координатами

Подключение библиотеки gui

Для работы с графическим интерфейсом необходимо подключить библиотеку gui:

Библиотека gui предоставляет все виджеты: окна, кнопки, текстовые метки, поля ввода и многое другое.

Создание окна

Создать окно так же просто, как создать переменную int:

🪟 Пустое окно (без виджетов)
💡 Программа создала окно и показала его. Пока внутри ничего нет.

Разберём код:

  • gui.Window — это тип данных «окно». Аналогично int или string.
  • win — это имя переменной. Вы можете назвать окно как угодно: mainWindow, root, w.
  • win.show() — команда, которая показывает окно на экране. Без неё окно будет создано, но пользователь его не увидит.

Настройка окна: размеры и заголовок

У окна можно менять свойства — ширину, высоту и текст в заголовке:

Свойства width и height задаются в пикселях. Свойство title — строка, которая отображается в заголовке окна.

Добавляем кнопку

Кнопка создаётся так же, как окно — через объявление переменной типа gui.Button:

(кнопка неактивна — это только демонстрация)
💡 Кнопка появилась в левом верхнем углу, потому что мы не задали координаты.

Ключевой момент — win.add_child(btn). Без этой команды кнопка будет создана, но не появится на окне. Метод add_child() добавляет виджет внутрь окна.

Координаты виджетов

Каждый виджет имеет координаты x и y, которые определяют его положение внутри окна. Начало координат (0, 0) — левый верхний угол окна.

Разные X, одинаковый Y

📍 x=20 и x=200 — кнопки на разном расстоянии от левого края, но на одной высоте (y=50).

Одинаковый X, разные Y

📍 y=30 и y=100 — кнопки на разной высоте, но на одинаковом расстоянии от левого края (x=50).

Начало координат — левый верхний угол

📍 Координаты (0, 0) — виджет прижат к левому верхнему углу окна.

Другие виджеты

В библиотеке gui есть много готовых виджетов. Вот несколько примеров:

Это текстовая метка
(интерактивно — можно покрутить SpinBox и выбрать пункт в ComboBox)
🎮 Label — текстовая метка, SpinBox — поле для ввода чисел, ComboBox — выпадающий список.

Попробуйте покрутить значение в SpinBox и выбрать другой пункт в ComboBox — виджеты интерактивны!

Что дальше?

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