1

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

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

Подскажите на примере как мне это сделать. Спасибо.

4
  • Опубликуйте пожалуйста ваш пример и расскажите лучше что и как вы хотите оформить. Приложите изображение того что вы хотите получить.
    – S. Nick
    8 мая 2020 в 8:53
  • Пример не особо играет роль, мне важно понять, как это должно работать. Я нашел примеры рабочих программ, которые импортируют qml файлы, и с ними работают. Но по коду я не совсем понимаю как с ними работать. Суть в том, просто пример кода на PySide, где те же слайдеры, кнопки, меню работает, в стиле Material Design. imgur.com/a/4y07Eyz (Вот как маленький пример. Так же видел, выпадающее красивое меню, которое по стандарту нету в Qt.
    – Wyles
    8 мая 2020 в 9:02
  • Странно, с одной стороны вы пишите: Пример не особо играет роль, с другой, Подскажите на примере как мне это сделать. У меня вопрос, на каком примере показать вам как это сделать? Я рекомендую вам ознакомиться с doc.qt.io/qt-5/stylesheet.html
    – S. Nick
    8 мая 2020 в 9:32
  • Хорошо, возможно вы и правы. Тогда возьму для примера обычный шаблон из Qt designer, где есть кнопки и слайдеры. pastebin.com/KXWnwmFL
    – Wyles
    8 мая 2020 в 9:45

1 ответ 1

2

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

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

Я, к сожалению, не знаком с 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_())

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

3
  • Спасибо, достаточно понятный ответ. Единственное что меня всё еще интересует, так как я не супер хорошо знаком с css, можно ли как либо реализовать, допустим анимацию кнопок? Или же выпадающее меню? Спасибо.
    – Wyles
    10 мая 2020 в 13:48
  • @Wyles все можно, полистайте посты ru.stackoverflow.com/search?q=user%3A217323+QPropertyAnimation, потом попробуйте создать что-нибудь свое. Если что-то не будет получаться как вы хотите - задавайте вопрос.
    – S. Nick
    10 мая 2020 в 14:11
  • @Wyles с анимациями и материалом рекомендую поработать с QML интерфейсом.
    – eri
    5 ноя 2020 в 2:44

Ваш ответ

Нажимая на кнопку «Отправить ответ», вы соглашаетесь с нашими пользовательским соглашением, политикой конфиденциальности и политикой о куки

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