2

Я кастомизирую кнопку, созданную с помощью модуля PyQt5, для этого применяю таблицы стилей:

from PyQt5 import QtWidgets, QtGui

class Design:
    def create_button(self):
        self.choose_directory_button = QtWidgets.QPushButton('Choose Directory')
        font = QtGui.QFont()
        font.setFamily("Cera Pro")
        font.setBold(True)
        font.setPointSize(12)
        self.choose_directory_button.setFont(font)
        self.choose_directory_button.setStyleSheet('''background-color: red;
                                                      border-style: outset;
                                                      border-width: 2px;
                                                      border-radius: 10px;
                                                      border-color: beige;
                                                      min-width: 10em;
                                                      padding: 6px;''')
        return self.choose_directory_button

Решил задать второе состояние для кнопки, чтобы было видно - нажата она или нет. Полез в гугл и нашел следующее:

QPushButton#evilButton {
     background-color: red;
     border-style: outset;
     border-width: 2px;
     border-radius: 10px;
     border-color: beige;
     font: bold 14px;
     min-width: 10em;
     padding: 6px;
 }
 QPushButton#evilButton:pressed {
     background-color: rgb(224, 0, 0);
     border-style: inset;
 }

Это именно то, что мне нужно, но данный код вырван из контекста, и я не понимаю, как его применить. Если что, учебник по PyQt5 я открывал, но о таблицах стилей там ничего не говорилось. Знаю, что вопрос глупый, но я не знаю, что мне делать.

Пожалуйста, подскажите, как применить код выше?
Если есть другой способ, буду рад его здесь увидеть.

3
  • 1
    Про стили: doc.qt.io/qt-5/stylesheet-reference.html#list-of-properties . А чем вам pressed не устраивает? Нужно что-то другое или непонятно что за свойства там и какие еще есть?
    – gil9red
    6 фев 2020 в 15:46
  • Непонятно, как применять, т.е. где вообще должен распологаться блок кода с визуальными характеристиками. Я знаю, звучит очень странно. Сейчас буду читать вашу документацию, спасибо
    – MAXIM045
    6 фев 2020 в 15:52
  • @gil9red, cпасибо большое, разобрался!
    – MAXIM045
    6 фев 2020 в 16:00

1 ответ 1

3

Стили применять очень просто:

  1. создайте строку, содержащею таблицу стилей, например StyleSheet_1 или StyleSheet_2

  2. передайте эту строку в качестве параметра:

    app.setStyleSheet(StyleSheet_2)

  3. все


Обратите внимание, что в ТС StyleSheet_2я добавил QPushButton:hover{...} - сработает при наведении стрелки мышки на кнопку.

У вас видимо не получалось, потому что в примере, который вам подходит написано так QPushButton#evilButton , это означает что данное предписание для кнопки имя объекта которой evilButton, т.е. в вашем случае, чтобы это сработало, надо добавить в метод create_button

self.setObjectName('evilButton')

from PyQt5 import QtWidgets, QtGui

# import Design
class Design:
    def create_button(self):
        self.choose_directory_button = QtWidgets.QPushButton('Choose Directory')
        font = QtGui.QFont()
        font.setFamily("Cera Pro")
        font.setBold(True)
        font.setPointSize(12)
        self.choose_directory_button.setFont(font)

        return self.choose_directory_button


class MyWindow(QtWidgets.QWidget):
    def __init__(self, parent=None):
        QtWidgets.QWidget.__init__(self, parent)

        self.ui = Design()
        self.button1 = self.ui.create_button()

        self.vbox = QtWidgets.QVBoxLayout(self)
        self.vbox.addWidget(self.button1)


StyleSheet_1 = '''
QPushButton {
    background-color: red;
    border-style: outset;
    border-width: 2px;
    border-radius: 10px;
    border-color: beige;
    min-width: 10em;
    padding: 6px;
}
'''

StyleSheet_2 = '''
QPushButton {                                         /* #evilButton */
    background-color: red;
    border-style: outset;
    border-width: 2px;
    border-radius: 10px;
    border-color: beige;
    font: bold 14px;
    min-width: 10em;
    padding: 6px;
}
QPushButton:hover {
    background: #ff6060; 
    color: white;
} 
QPushButton:pressed {                                 /* #evilButton */
    background-color: rgb(224, 0, 0);
    border-style: inset;
    color: yellow;
}
'''

if __name__ == "__main__":
    import sys
    app = QtWidgets.QApplication(sys.argv)

    app.setStyleSheet(StyleSheet_2)                    # <-----

    window = MyWindow()
    window.show()
    sys.exit(app.exec_())

введите сюда описание изображения


Update

Добавил реализацию таблицы стилей для двух кнопок.

Обратите внимание, что QPushButton#evilButton или просто #evilButton распространяется только на кнопку, objectName() которой равен evilButton.

from PyQt5 import QtWidgets, QtGui

# import Design
class Design:
    def create_button(self, text, obj):
        self.choose_directory_button = QtWidgets.QPushButton(
            text, 
            objectName=obj,
            clicked=lambda: print(f'\nВы кликнули {text}')
        )
        font = QtGui.QFont()
        font.setFamily("Cera Pro")
        font.setBold(True)
        font.setPointSize(12)
        self.choose_directory_button.setFont(font)

        return self.choose_directory_button


class MyWindow(QtWidgets.QWidget):
    def __init__(self, parent=None):
        QtWidgets.QWidget.__init__(self, parent)

        _lists = [['QPushButton', 'pushButton'], ['QPushButton#evilButton', 'evilButton']]

        vbox = QtWidgets.QVBoxLayout(self)
        design = Design()

        for text, obj in _lists:
            button = design.create_button(text, obj)
            vbox.addWidget(button)


StyleSheet = '''
QPushButton {
    background-color: red;
    border-style: outset;
    border-width: 2px;
    border-radius: 10px;
    border-color: beige;
    min-width: 10em;
    padding: 6px;
}

/*         #evilButton     -------------- */
QPushButton#evilButton {                                         
    background-color: red;
    border-style: outset;
    border-width: 2px;
    border-radius: 10px;
    border-color: beige;
    font: bold 14px;
    min-width: 10em;
    padding: 6px;
}
QPushButton#evilButton:hover {
    background: #ff6060; 
    color: white;
} 
QPushButton#evilButton:pressed {                                 
    background-color: rgb(224, 0, 0);
    border-style: inset;
    color: yellow;
}
'''

if __name__ == "__main__":
    import sys
    app = QtWidgets.QApplication(sys.argv)

    app.setStyleSheet(StyleSheet)                    # <-----

    window = MyWindow()
    window.show()
    sys.exit(app.exec_())

введите сюда описание изображения

1
  • Спасибо огромное!
    – MAXIM045
    7 фев 2020 в 9:12

Ваш ответ

By clicking “Отправить ответ”, you agree to our terms of service and acknowledge you have read our privacy policy.

Всё ещё ищете ответ? Посмотрите другие вопросы с метками или задайте свой вопрос.