Перейти к содержимому

PySide6: Создание раскрывающегося бокового меню — Qt Designer, QStackedWidget, сигналы/слоты, ико...

Emmanuel’s Design Lab

0:00 / 0:00

PySide6: Создание раскрывающегося бокового меню — Qt Designer, QStackedWidget, сигналы/слоты, ико...

21 189 просмотров · 1 г. назад
Emmanuel’s Design Lab
1,52 тыс. подписчиков
21 189 просмотров · 1 г. назад
Создайте современное расширяемое/сворачиваемое боковое меню в PySide6 с помощью Qt Designer — с режимами только с иконками и в развернутом виде, стилизацией состояния флажка и переключением страниц через QStackedWidget. Вы настроите чистый пользовательский интерфейс, загрузите иконки через resources.qrc, настроите сигналы/слоты для переключения и направите кнопки на страницы с помощью аккуратного класса Python. Что вы будете создавать: Боковая панель только с иконками ↔ расширенная с кнопкой переключения вверху Два зеркальных столбца кнопок (только иконки против иконок + текст), которые остаются синхронизированными Автоматически выключающиеся, проверяемые QPushButtons с стилизацией активного состояния (закругленные углы) Страницы QStackedWidget: Панель управления, Профиль, Сообщения, Уведомления, Настройки Конвейер ресурсов: resources.qrc → resources_rc.py Преобразование .ui в .py с исправлениями кодировки pyside6-uic и UTF-8 Технологии, которые будут рассмотрены: PySide6 / Qt для Python, Qt Designer, QSS (таблицы стилей), сигналы/слоты, QMainWindow, QPushButton, QLabel, QLineEdit, QStackedWidget, QSpacerItem, QMessageBox, QIcon, resources.qrc. ⏱️ Временные метки / Разделы 00:00 Демонстрация — расширяемая боковая панель (только иконка ↔ расширяемая) 00:39 Начало работы в Qt Designer: новый QMainWindow, чистые строки меню/состояния 01:10 Сохранение UI → sidebar.ui; обзор папок проекта и /images icons 01:54 Добавление трех базовых виджетов: icon_only_widget, icon_name_widget, main_menu 02:58 Добавление виджета заголовка (поиск, профиль), разделителей и базового макета 04:59 Добавление QStackedWidget под заголовком; переименование в header_widget 05:38 Создание resources.qrc и импорт всех иконок (пары белый/синий) 06:16 Установка пиксельных карт для меток профиля; ограничение 40×40; масштабирование содержимого 07:59 Внешний вид боковой панели с помощью QSS (фон, цвет текста) 09:09 Метки кнопок: Панель управления, Профиль, Сообщения, Уведомления, Настройки, Выход 10:18 Назначение значков (по умолчанию белые) обеим боковым панелям 11:00 Глобальный QSS для QPushButton: цвет, выравнивание, высота, border:none, отступы 12:24 Настройка макета: интервалы, поля, вертикальные стеки 17:12 Сделать кнопки проверяемыми + автоэксклюзивными 18:00 Горизонтальное расположение заголовка макета; установить белый фон QStackedWidget 18:51 Редактор сигналов/слотов: переключение только на значки ↔ расширенная видимость 20:01 Сетка макета; обнуление полей; Предварительный просмотр переключателя 21:05 Перекрестные ссылки состояний проверки (группы кнопок зеркально отображают друг друга) 22:16 QSS в состоянии проверки: фон #F5FFFE, текст #1F95EF, жирный шрифт, радиус слева 24:46 Назначение синих значков для состояния «Обычный включен» (активный) 26:12 Финальная доработка: текст белый, границы удалены там, где это необходимо 27:03 Создание пяти страниц; добавление меток на каждую страницу; проверка переключения 29:27 Добавление переключателей «Выход» в сворачиваемое меню; обеспечение возможности установки флажка 30:29 Переименование всех кнопок (dashboard_1/_2 … settings_1/_2) 31:36 Переход в VS Code; преобразование пользовательского интерфейса и ресурсов; исправление кодировки UTF-8 34:05 Создание MySidebar(QMainWindow, Ui_MainWindow); setupUi(self); заголовок окна 34:20 Написание переключателей страниц; Привязать кнопки к индексу QStackedWidget справа 36:01 Шаблон main.py; показать окно 36:50 Скрыть icon_name_widget по умолчанию; переключить для развертывания; протестировать все 37:22 Финальный запуск — меню разворачивается/сворачивается; страницы переключаются корректно; подведение итогов ⚙️ Используемые команды pyside6-uic sidebar.ui -o sidebar.py pyside6-rcc resources.qrc -o resources_rc.py