Чуть-чуть организационных моментов.
Это наша с вами первая статья, точка отправления в увлекательное путешествие в загадочный, с первого взгляда, мир IT!
Сперва я бы хотел конкретнее рассказать о том, что вас ждёт.
- Я не буду грузить вас синтаксисом языков программирования (только если вам это будет нужно).
- Вскоре мы с вами выберем специальность, на которую я буду обучаться, подберём хороший роадмап (подробный список того, что мне нужно будет изучить).
- Тут вы найдёте только интересный, полезный и самое главное уникальный и оригинальный контент.
Ну а теперь перейдём к сути статьи!
Введение в PyQt.
PyQt - это набор библиотек для написания графических интерфейсов пользователя.
Я буду использовать PyQt5.
В этой статье мы с вами создадим простенький графический интерфейс для калькулятора. В дальнейшем будем создавать что-нибудь посложнее.
Начнём с того, что сам графический интерфейс можно написать полностью в формате кода, но это долго, нудно и сложно. Мы с вами будем использовать специальное приложение - Qt designer. (Если будете повторять за действиями в статье, то вот ссылка на скачивание - клац (кликабельно))
После того, как вы скачали программу, перед вами скорее всего откроется вот такая картина:
Тут ничего сложного, для наших задач понадобится создать - "MainWindow", нажимаем создать.
После этого нужно будет удалить кое-какие штучки:
Теперь нам нужно отредактировать размеры окна под наши нужды. Параметры размера окна мы может найти во вкладке geometry (там, где всё жёлтое).
Выставляем нужные нам параметры, у меня это будет 1200/675.
Я буду делать наш интерфейс на базе какой-то красивой картинки. Чтобы импортировать в наш проект картинку, ниже приложу инструкцию как это можно сделать:
ТУТ БУДЕТ ССЫЛКА
После того как импортировали картинку, можем приступать к созданию самого интерфейса. Мы будем создавать самый простой дизайн, под самый простой калькулятор (в плане исполнения в коде).
В Qt designer нам придется использовать язык стилей CSS. Скорее всего по поводу этого языка выйдет отдельная статья, язык лёгкий и интуитивно понятный, влезет в рамки одной статьи.
Первым делом создадим простенький лейбл (просто текст внутри нашего приложения).
Теперь перед нами открывается уродливая надпись:
Давайте побыстрее скроем этот ужас с глаз долой и постараемся оформить покрасивее.
Чтобы получить доступ к оформлению любого виджета или элемента в Qt designer, нужно выбрать этот виджет и в жёлтом меню справа тыкнув на styleSheet, нажать на три точки. В появившееся окошко мы сможем вписать код CSS.
Код из этого лейбла:
QLabel {
font-size: 20px; - тут мы указываем размер текста.
color: white; - тут указываем цвет текста.
}
По желанию вы можете добавить туда вообще всё что хотите, если это позволяет CSS, но мы обойдёмся двумя строчками кода, потому что больше тут и не надо, как по мне.
Теперь наш лейбл выглядит чуть менее уродливо, чем раньше😉
Ну что ж, сейчас будем создавать основу нашего какулятора.
Нам нужно добавить в наш интерфейс 3 поля ввода и 1 кнопичку:
Сейчас скорее всего у вас в голове появится закономерный вопрос: "А зачем в калькуляторе 3 поля для ввода?". Ну, тут всё просто, это самый простой вид калькуляторов и для демонстрации азов PyQt этого хватит.
- Первое поле отвечает за вид математических операций (туда будем вводить что-то из этого: +, -, *, /).
- Второе поле служит для ввода первого числа.
- Ну и третье поле соответственно для ввода второго.
А на кнопку мы будем жмякать, когда надо будет что-то посчитать.
Чтобы добавить поле ввода, нужно перетащить виджет "Line Edit" в нашу рабочую зону. Он находится в Input Widgets.
Чтобы добавить кнопку, нужно перетащить виджет "Push Button" в нашу рабочую зону. Он находится в Buttons.
Теперь нам нужно оформить всё, добавленное выше. Чтобы изменить все 3 поля сразу, нужно объединить их в одну группку. Для этого надо выбрать все три поля (можно через ctrl), после этого нужно в панели инструментов выбрать "LayOutVertically". Теперь надо нажать на появившийся квадрат ПКМом и выбрать 'Morph Into", а потом QFrame.
После всех этих действий, когда мы выбираем нашу группку с полями, справа появляется уже знакомое нам жёлтое меню и styleSheet.
Мда, получилось конечно не очень, но я и не дизайнер.
Код полей ввода:
QLineEdit {
height: 20px; - задаёт высоту прямоугольнику поля.
background-color: rgba(255, 255, 255, 0.5); - это отвечает за цвет заднего фона поля, последнее значение означает прозрачность фона.
font-size: 20px; - размер текста.
}
Код кнопочки:
QPushButton {
border: 3px solid black; - создаёт чёрную рамку для кнопки.
border-radius: 20%; - скругляет рамку для кнопки.
font-size: 20px; - размер текста.
}
Строка ниже означает, что код в фигурных скобках будет выполнятся только тогда, когда мы наводим курсор на кнопку:
QPushButton:hover {
background-color: yellow; - цвет, при наведении курсора, становится жёлтым.
}
Итоги:
- В этой статье мы с вами создали простейший графический интерфейс с помощью Qt designer.
- Научились создавать лейблы, кнопки и поля ввода.
- Чуть-чуть поработали с CSS.
Что будет в следующей статье:
В следующей статье мы с вами создадим простую логику для этого приложения, протестируем и добавим ещё несколько функций в нашу программу.
Спасибо всем, кто читал эту статью, надеюсь я не намудрил с оформлением. Жду ваших идей и предложений!
