0

Установив свойство icon для QPushButton,
заметил, что иконка игнорирует border, прописанный в StyleSheet.

Иконка должна закруглиться по краям.

Как это можно исправить?

StyleSheet:

QPushButton:checked {
    background-color: rgb(120, 144, 156);
}
QPushButton {
    background-color: rgb(69, 90, 100);
    border-style: solid;
    border-width: 0px;
    border-radius: 10px;
}
5
  • Можно пример того style sheet? И как иконка должна повести?
    – gil9red
    13 авг 2018 в 12:39
  • @gil9red добавил
    – Evilenzo
    13 авг 2018 в 12:41
  • А у кнопки только setIcon вызывали?
    – gil9red
    13 авг 2018 в 12:49
  • @gil9red я устанавливал параметр icon в QtDesigner
    – Evilenzo
    14 авг 2018 в 7:37
  • @gil9red также иконка одинаковым размером с кнопкой.
    – Evilenzo
    14 авг 2018 в 7:40

1 ответ 1

1

Не совсем понял вашу проблему и если ответ вам не поможет, то опубликуйте весь ваш код. StyleSheet для некоторых вариантов кнопок см. в примере:

import sys
from PyQt5.QtWidgets import QWidget, QHBoxLayout, QPushButton, QApplication
from PyQt5.QtGui     import QIcon
from PyQt5.QtCore    import pyqtSlot, QSize

StyleSheet = '''
/* Вот общая настройка, все кнопки действительны, но следующее может изменить это */
QPushButton {
    border: none;              /* Удалить границу   */
}
/* QPushButton#xxx , задаются установкой objectName */
QPushButton#RedButton {
    background-color: #f44336; /* Цвет фона         */
}
#RedButton:hover {
    background-color: #e57373; /* Цвет фона при наведении */
    color: #fff;
}
/* Внимание! `при нажатии` должны быть размещены на задней панели, 
   в противном случае никакого эффекта */
#RedButton:pressed {
    background-color: #ffcdd2; /* Цвет фона при нажатии мыши*/
}
#GreenButton {
    background-color: #4caf50;
    border-radius: 5px;       /* закругленный  */
}
#GreenButton:hover {
    background-color: #81c784;
    color: #fff;              /*   */
}
#GreenButton:pressed {
    background-color: #c8e6c9;
}
#BlueButton {
    background-color: #2196f3;
    /* Ограничьте минимальный размер       */
    min-width:  96px;
    max-width:  96px;
    min-height: 96px;
    max-height: 96px;
    border-radius: 48px;        /* круглый */
}
#BlueButton:hover {
    background-color: #64b5f6;
}
#BlueButton:pressed {
    background-color: #bbdefb;
}
#OrangeButton {
    max-height: 48px;
    border-top-right-radius:   20px;   /* Верхний правый угол */
    border-bottom-left-radius: 20px;   /* Нижний левый угол   */
    background-color: #ff9800;
}
#OrangeButton:hover {
    background-color: #ffb74d;
}
#OrangeButton:pressed {
    background-color: #ffe0b2;
}
/*В соответствии с текстовым контентом, чтобы отличить кнопку, 
  та же причина может также основываться на других атрибутах, чтобы различать */
QPushButton[text="purple button"] {
    color: white;                    /* Цвет текста */
    background-color: #9c27b0;
}
'''

class Window(QWidget):

    def __init__(self, *args, **kwargs):
        super(Window, self).__init__(*args, **kwargs)

        self.setGeometry(800, 65, 500, 200)

        layout = QHBoxLayout(self)
        layout.addWidget(QPushButton("red button", self,
                                     objectName="RedButton", minimumHeight=48))
        # ----------------------------------------------------------------------
        button = QPushButton('  \n   PyQt5\n   button\n  ', self, 
                                     objectName="GreenButton", minimumHeight=48)
        button.setIcon(QIcon("E:/_Qt/img/qt-logo.png"))
        button.setIconSize(QSize(48, 48))                                     
        layout.addWidget(button) 
        # ----------------------------------------------------------------------

        layout.addWidget(QPushButton("blue button", self,
                                     objectName="BlueButton", minimumHeight=48))
        layout.addWidget(QPushButton("orange button", self,
                                     objectName="OrangeButton", minimumHeight=48))
        layout.addWidget(QPushButton("purple button", self,
                                     objectName="PurpleButton", minimumHeight=48))


if __name__ == "__main__":
    app = QApplication(sys.argv)
    app.setStyleSheet(StyleSheet)
    w = Window()
    w.show()
    sys.exit(app.exec_())

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

Чтобы иконку закруглиться по краям - ее надо обрезать. Для обрезки изображения применяют способ, который использует метод setClipPath QPainter в сочетании с QPainterPath

Пример добавил ниже, пробуйте. Дополнительную информацию можете посмотреть: https://stackoverflow.com/questions/50819033/qlabel-with-image-in-round-shape/50821539#50821539 и здесь QLabel обработчик клика мышкой

import sys
from PyQt5.QtCore    import Qt, QSize, pyqtSignal
from PyQt5.QtGui     import QPixmap, QPainter, QPainterPath, QIcon
from PyQt5.QtWidgets import QLabel, QWidget, QHBoxLayout, QApplication, QPushButton

class Label(QLabel):
    clicked = pyqtSignal()

    def __init__(self, *args, antialiasing=True, **kwargs):
        super(Label, self).__init__(*args, **kwargs)
        self.Antialiasing = antialiasing
        self.setMaximumSize(65, 50)
        self.setMinimumSize(65, 50)
        self.radius = 10  

        self.target = QPixmap(self.size())  
        self.target.fill(Qt.transparent)   

        p = QPixmap("E:/_Qt/img/cat.jpg").scaled(         
            65, 50, Qt.KeepAspectRatioByExpanding, Qt.SmoothTransformation)

        painter = QPainter(self.target)
        if self.Antialiasing:
            painter.setRenderHint(QPainter.Antialiasing, True)
            painter.setRenderHint(QPainter.HighQualityAntialiasing, True)
            painter.setRenderHint(QPainter.SmoothPixmapTransform, True)

        path = QPainterPath()
        path.addRoundedRect(
            0, 0, self.width(), self.height(), self.radius, self.radius)

        painter.setClipPath(path)
        painter.drawPixmap(0, 0, p)
        self.setPixmap(self.target)

    def mouseReleaseEvent(self, e):
        super().mouseReleaseEvent(e)
        self.clicked.emit()        

class Window(QWidget):
    def __init__(self, *args, **kwargs):
        super(Window, self).__init__(*args, **kwargs)
        layout = QHBoxLayout(self)

        lbl = Label(self, objectName="catButton")
        lbl.clicked.connect(self.onClick)
        layout.addWidget(lbl) 

        button = QPushButton(self, objectName="GreenButton", minimumHeight=50)
        button.clicked.connect(self.onClick)
        button.setIcon(QIcon("E:/_Qt/img/cat.jpg"))
        button.setIconSize(QSize(65, 50)) 
        button.setFlat(True)
        layout.addWidget(button)

        self.setStyleSheet("background: blue;")           

    def onClick(self):
        print(self.sender().objectName())


if __name__ == "__main__":
    app = QApplication(sys.argv)
    w = Window()
    w.show()
    sys.exit(app.exec_())

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

4
  • Нет, проблема немного не в этом. Иконка размером с кнопку, а у кнопки установлен border-radius, поэтому углы иконки вылезают за углы кнопки. Как можно тот же border-radius применить к иконке?
    – Evilenzo
    14 авг 2018 в 8:02
  • @Evilenzo я добавил код, пробуйте.
    – S. Nick
    14 авг 2018 в 12:00
  • Да, способ достаточно конкретный. Но меня больше интересует, что после этого делать со StyleSheet? Ведь иконка его полностью игнорирует. Она не реагирует ни на hover, ни на checked. Я имею ввиду, как можно сделать так, чтобы иконка затемнялась при наведении или клике? С простой кнопкой это реализуется достаточно просто, а тут такие проблемы
    – Evilenzo
    14 авг 2018 в 12:11
  • @Evilenzo Попробуйте добавить после строки lbl.clicked.connect(self.onClick) строку lbl.setStyleSheet(""" QLabel:hover { border: 2px solid darkkhaki; border-radius: 5px; } """)
    – S. Nick
    14 авг 2018 в 16:22

Ваш ответ

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

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