Круговое изображение как кнопка PyQt5

Я пытаюсь создать круглую кнопку с изображением. До сих пор мне удавалось создать круглую кнопку и кнопку с фоновым изображением, но я не смог их объединить.

Вот мой текущий код:

import sys
import PyQt5.QtWidgets


class Window(PyQt5.QtWidgets.QMainWindow):
    def __init__(self):
        super().__init__()

        # setting title
        self.setWindowTitle("Python ")

        # setting geometry
        self.setGeometry(100, 100, 600, 400)

        # calling method
        self.UiComponents()

        # showing all the widgets
        self.show()

    # method for widgets
    def UiComponents(self):
        button = PyQt5.QtWidgets.QPushButton("CLICK", self)
        button.setGeometry(200, 150, 100, 100)

        # Background img and circular
        button.setStyleSheet('''border-radius : 5;
        border : 2px solid black
        background-image : url(image.png);
        ''')

        # adding action to a button
        button.clicked.connect(self.clickme)

    # action method
    def clickme(self):
        print("pressed")



App = PyQt5.QtWidgets.QApplication(sys.argv)
window = Window()
sys.exit(App.exec())

python pyqt5 qpushbutton
person Kim    schedule 05.10.2020    source источник
comment
Обратите внимание, что приведенный выше код не будет работать, так как вам не хватает ; в конце второй строки таблицы стилей.   -  person musicamante    schedule 05.10.2020

Ответы (1)


arrow_upward
1
arrow_downward

В документации Qt есть раздел точно об этой теме:

При стилизации QPushButton часто желательно использовать изображение в качестве графического элемента кнопки. Обычно используют свойство background-image, но оно имеет ряд недостатков: например, фон часто будет казаться скрытым за оформлением кнопки, потому что он не считается фоном. Кроме того, при изменении размера кнопки весь фон будет растянутым или мозаичным, что не всегда хорошо выглядит.

Лучше использовать свойство border-image, так как оно всегда будет отображать изображение, независимо от фона (вы можете комбинировать его с фоном, если в нем есть альфа-значения), и у него есть специальные настройки для изменения размера кнопки. .

Таким образом, вы должны убедиться, что используете квадратное (не прямоугольное) изображение с круговыми полями прямо по краям, и использовать border-image вместо background-image (что разбивает изображение, если оно меньше размера кнопки); обратите внимание, что вы не должны не устанавливать границы в таблице стилей.


    button.setStyleSheet('''
        border-image: url(image.png);
        ''')

Очевидно, вам нужно всегда использовать одно и то же значение как для высоты, так и для ширины кнопки, возможно, используя setFixedSize(), иначе, если вы добавите кнопку в макет, она больше не будет круглой.

person musicamante    schedule 05.10.2020