PySide2 || PyQt5 Material Design

Question

Не так давно начал изучать Python, параллельно заинтересовался PySide2. Написав небольшую программку, которая помогает мне в повседневной жизни, я захотел её немного оформить.

Покопавшись в вопросе, узнал про Material Design. И захотел оформить программу таком же стиле. По сути нашел информацию как это сделать. Но не могу до конца понять где взять мне сами виджеты, как их правильно импортировать, и как с ними работать. Подскажите на примере как мне это сделать. Спасибо.

Answer 1

Пример опубликуйте пожалуйста в тексте поста, а не ссылкой.

Вы не показали, что вы хотите получить, поэтому я набросал что попало, чтобы показать что все можно изменить.

Я, к сожалению, не знаком с Material Design, но я знаю точно, что CSS, он и в Африке CSS.

from PyQt5 import QtCore, QtGui, QtWidgets


class Ui_MainWindow(object):
    def setupUi(self, MainWindow):
        MainWindow.setObjectName("MainWindow")
        MainWindow.resize(800, 600)
        self.centralwidget = QtWidgets.QWidget(MainWindow)
        self.centralwidget.setObjectName("centralwidget")
        self.pushButton = QtWidgets.QPushButton(self.centralwidget)
        self.pushButton.setGeometry(QtCore.QRect(273, 94, 144, 44))
        self.pushButton.setObjectName("pushButton")
        self.radioButton = QtWidgets.QRadioButton(self.centralwidget)
        self.radioButton.setGeometry(QtCore.QRect(295, 185, 142, 29))     
        self.radioButton.setObjectName("radioButton")
        self.radioButton_2 = QtWidgets.QRadioButton(self.centralwidget)
        self.radioButton_2.setGeometry(QtCore.QRect(295, 214, 142, 29))
        self.radioButton_2.setObjectName("radioButton_2")
        self.horizontalSlider = QtWidgets.QSlider(self.centralwidget)
        self.horizontalSlider.setGeometry(QtCore.QRect(273, 367, 180, 22))   
        self.horizontalSlider.setOrientation(QtCore.Qt.Horizontal)
        self.horizontalSlider.setObjectName("horizontalSlider")
        MainWindow.setCentralWidget(self.centralwidget)
        self.menubar = QtWidgets.QMenuBar(MainWindow)
        self.menubar.setGeometry(QtCore.QRect(0, 0, 800, 37))
        self.menubar.setObjectName("menubar")
        MainWindow.setMenuBar(self.menubar)
        self.statusbar = QtWidgets.QStatusBar(MainWindow)
        self.statusbar.setObjectName("statusbar")
        MainWindow.setStatusBar(self.statusbar)

        self.retranslateUi(MainWindow)
        QtCore.QMetaObject.connectSlotsByName(MainWindow)

    def retranslateUi(self, MainWindow):
        _translate = QtCore.QCoreApplication.translate
        MainWindow.setWindowTitle(_translate("MainWindow", "MainWindow"))
        self.pushButton.setText(_translate("MainWindow", "PushButton"))
        self.radioButton.setText(_translate("MainWindow", "RadioButton"))
        self.radioButton_2.setText(_translate("MainWindow", "RadioButton"))


class ExampleApp(QtWidgets.QMainWindow, Ui_MainWindow):
    def __init__(self):
        super().__init__()
        self.setupUi(self)  


QSS = """

QPushButton {
    border: none;
    font-weight: bold;
    font-size: 16px;
    border-radius: 18px;
    min-width: 180px;
    min-height: 40px;
    background-color: blue; /*white;*/

    border: 3px solid gray;
}
QPushButton:hover {
    background-color: #64b5f6;
}
QPushButton:pressed {
    background-color: #bbdefb;    
}

/* QRadioButton ----------------------------------------------------------- */
QRadioButton {
    background-color: #232629;
    color: #EFF0F1;
    spacing: 0;
    padding: 0;
    border: none;
    outline: none;
}
QRadioButton:focus {
    border: none;
}
QRadioButton:disabled {
    background-color: #232629;
    color: #4D545B;
    border: none;
    outline: none;
}
QRadioButton QWidget {
    background-color: #232629;
    color: #EFF0F1;
    spacing: 0px;
    padding: 0px;
    outline: none;
    border: none;
}
QRadioButton::indicator {
    border: none;
    outline: none;
    margin-bottom: 2px;
    width: 25px;
    height: 25px;
}
QRadioButton::indicator:unchecked {
    image: url(icons/radio_unchecked.png);
}

QRadioButton::indicator:unchecked:hover,
QRadioButton::indicator:unchecked:focus,
QRadioButton::indicator:unchecked:pressed {
    border: none;
    outline: none;
    image: url(icons/radio_unchecked_focus.png);
}
QRadioButton::indicator:checked {
    border: none;
    outline: none;
    image: url(icons/radio_checked.png);
}
QRadioButton::indicator:checked:hover,
QRadioButton::indicator:checked:focus,
QRadioButton::indicator:checked:pressed {
    border: none;
    outline: none;
    image: url(icons/radio_checked_focus.png);
}
QRadioButton::indicator:checked:disabled {
    outline: none;
    image: url(icons/radio_checked_disabled.png);
}
QRadioButton::indicator:unchecked:disabled {
    image: url(icons/radio_unchecked_disabled.png);
}

/* QSlider --------------------------------------  */
QSlider::groove:horizontal {
    border: 0px solid;
    height: 2px;
    margin: 1px O;
    border-radius: 3px;
}
QSlider::handle:horizontal {
    background: #ececec;
    border: 1px solid #1abc9c;
    width: 3px;
    /*height: 8px;*/
    margin: -8px 0; /* expand outside the groove */
    border-radius: 1px;
}
QSlider::add-page:horizontal {
    background: #1abc9c;
}
QSlider::sub-page:horizontal {
    background: darkgray;
}
"""


if __name__ == "__main__":
    import sys
    app = QtWidgets.QApplication(sys.argv)
    app.setStyleSheet(QSS)                         # +
    MainWindow = ExampleApp()
    MainWindow.show()
    sys.exit(app.exec_())

БЛОГ НА HUSL

PySide2 || PyQt5 Material Design

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