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