Сделать анимацию кнопки в QT

Question

Есть код:

   // Button Image
   QImage buttonTexture(":/Theme/button.png");
   auto textureTX = buttonTexture.height()/4;
   QImage defaultTX  = buttonTexture.copy(0, 0 * textureTX, buttonTexture.width(), 1 * textureTX);
   QImage rolloverTX = buttonTexture.copy(0, 1 * textureTX, buttonTexture.width(), 2 * textureTX);
   QImage pressedTX  = buttonTexture.copy(0, 2 * textureTX, buttonTexture.width(), 3 * textureTX);
   QImage lockedTX   = buttonTexture.copy(0, 3 * textureTX, buttonTexture.width(), 4 * textureTX);

И сама текстура кнопки:

Кнопка называется ui->toLogin

Как прикрепить изображения к положениям кнопки?

P.S. Названия положений соответствуют названиям положения кнопки в Java Swing

Answer 1

Для стилизации компонентов можно использовать QSS(Qt Style Sheet)

QSS представляет собой ограниченное подмножество Каскадных таблиц стилей(CSS) и позволяет настраивать внешний вид элементов интерфейса.

Примеры QSS Вы сможете найти в официальной документации

Для вашей задачи нужно будет разделить изображение фона кнопки на отдельные состояния:

Тогда таблицу стиля для кнопки можно будет описать следующим образом

QPushButton {
    background-image: url(:/Theme/button_0.png);
    background-repeat: no-repeat;
}
QPushButton:hover {
    background-image: url(:/Theme/button_1.png);
    background-repeat: no-repeat;
}
QPushButton:pressed {
    background-image: url(:/Theme/button_2.png);
    background-repeat: no-repeat;
}
QPushButton:disabled {
    background-image: url(:/Theme/button_3.png);
    background-repeat: no-repeat;
}

Псевдоселекторы определяют к какому состоянию будет применяться конкретная запись:

:hover - при наведении мыши
:pressed - кнопка нажата
:disabled - кнопка заблокирована

Хранить таблицу стилей можно двумя способами:

в строке(подойдет для малого размера)
в файле(можно прописать в ресурсы)

Рассмотрим второй вариант. Для этого добавим в ресурсы файл :/Theme/button.qss с содержимым указанным выше.

Загрузим этот файл и применим стиль:

QFile style_file(":/Theme/button.qss");
style_file.open(QFile::ReadOnly)

auto style = QString::fromUtf8(style_file.readAll());

ui->someButton->setStyleSheet(style);

Стиль можно так же применить для всего приложения:

qApp->setStyleSheet(style);

Пример на Python 3+PySide2

# -*- coding: utf-8 -*-
import sys
from typing import List

from PySide2.QtWidgets import QPushButton, QApplication, QWidget, QVBoxLayout


def button_style() -> str:
    return """
    QPushButton {
        background-image: url(theme/button_0.png);
        background-repeat: no-repeat;
    }
    QPushButton:hover {
        background-image: url(theme/button_1.png);
        background-repeat: no-repeat;
    }
    QPushButton:pressed {
        background-image: url(theme/button_2.png);
        background-repeat: no-repeat;
    }
    QPushButton:disabled {
        background-image: url(theme/button_3.png);
        background-repeat: no-repeat;
    }
    """


def create_button(text: str, name: str) -> QPushButton:
    b = QPushButton(text)
    b.setObjectName(name)

    b.setFixedWidth(150)
    b.setFixedHeight(47)

    return b


def main(args: List[str]) -> int:
    app = QApplication(args)

    w = QWidget(parent=None)
    w.setWindowTitle("test")
    w.setStyleSheet(button_style())
    box = QVBoxLayout()

    b0 = create_button("btn 0", "btn0")
    b1 = create_button("btn 1", "btn1")
    b2 = create_button("disabled", "btn2")
    b2.setDisabled(True)
    box.addWidget(b0)
    box.addWidget(b1)
    box.addWidget(b2)

    w.setLayout(box)
    w.show()

    return app.exec_()


if __name__ == '__main__':
    sys.exit(main(sys.argv))

БЛОГ НА HUSL

Сделать анимацию кнопки в QT

Ответы (1 шт):