#qml | #qt - How to customize a Button on Qml | Glass Button | background | gradient | animation

How to customize a Button on Qml | Glass Button | background | gradient | animation Код проекта: https://gitflic.ru/project/lashko_ag/qml_glass_button_dark_light_mode - qml_glass_button_blue_violet 00:00 - Начало "How to customize a Button on Qml" - Демонстрация эффекта "Glass Button" on QML 00:27 - Алексей Лашко. Инженер-программист | Qt | Qml | C++ | Arduino Robotics, обучаю программированию и робототехнике. Telegram: https://t.me/qt_cpp_linux YouTube: https://www.youtube.com/@qt_cpp_linux Rutube: https://rutube.ru/channel/41238173/ VK: https://vk.com/la6ko 00:32 - Создание проекта QML по умолчанию. 01:35 - Create Gradient background for App. Linear gradient 03:06 - RadialGradient. Декоративный радиальный блик на фоне 04:34 - Создание компонента Button по умолчанию. 05:28 - Button background. Меняем фон кнопки. Добавляем Linear gradient 07:57 - Смотрим промежуточный результат. 08:47 - Верхний блик (имитация света сверху). Top flare (imitation of light from above) 11:20 - Изменяем border 12:20 - States: hover / pressed (change GradientStop colors by id) 12:48 - State -﹥ используем when: 13:05 - PropertyChanges example 17:15 - transitions: Transition | ColorAnimation 19:03 - contentItem: Item | Содержимое: текст по центру. Content: text centered 19:34 - Label Настройки шрифта: font.pixelSize: | font.family font.weight: Font.Light; Font.Bold horizontalAlignment: Text.AlignHCenter - расположения текста внутри компонента Text verticalAlignment: Text.AlignVCenter - расположения текста внутри компонента Text Объяснение что значит - в этом видео: #Qt | #Qml | Animation | Timer | Typewriter effect | Cpp | #lashko https://rutube.ru/video/4cf006904dc2271e6ad61c10e0743ce2/ 21:55 - edit Label -﹥ Контур для читаемости style: Text.Raised | styleColor: "#22000000" 22:20 - edit Label -﹥ background: Rectangle | Полупрозрачная подложка под текстом 23:20 - Смотрим результат 23:26 - layer.effect: DropShadow | horizontalOffset: | verticalOffset: | samples: 24:25 - Анимация нажатия. Click animation. 25:03 - Behavior on scale | NumberAnimation 26:00 - Смотрим результат 26:38 - Label. Подсказка внизу. Hint below 27:45 - Итоговый результат проекта. 28:48 - Мои соц сети для связи. ============================================================= Короткие видео по анимациям Create Gradient background for App. Linear gradient https://rutube.ru/shorts/f14ab716f4920502b49c2e41ad86fbcb/ SequentialAnimation https://rutube.ru/shorts/b259bdf03fe85fe003551ac1cbd4ab29/ https://rutube.ru/shorts/209df07af9bfbeb6c72616510e9c6efd/ Behavior + Timer https://rutube.ru/shorts/28f5f048dab69eb3560ff842614e2e07/ State and Transition https://rutube.ru/shorts/297b171286ae350dab91b026963fee6e/ ParallelAnimation | States | Transitions | PropertyChanges https://rutube.ru/shorts/802469bfca58723a6473b0bbafb472b7/ #Qt | #Qml | Animation | Timer | Typewriter effect | Cpp | #lashko https://rutube.ru/video/4cf006904dc2271e6ad61c10e0743ce2/ ============================================================= #qt #qml #glass #button #custom #animation #gradient #radialgradient #state #Transition #ColorAnimation #contentItem #background # behavior #lashko