Как мне использовать Material Design в приложении Pyside6?

Question

У меня есть код ниже в моем приложении pyside 6

      import sys,os
from PySide6.QtGui import QGuiApplication
from PySide6.QtQml import QQmlApplicationEngine, qmlRegisterType
from PySide6.QtCore import QObject, Slot, Signal, QTimer, QUrl
import PySide6

if __name__ == "__main__":
    #for error -> Failed to create vertex shader(It is displaying empty window)
    os.environ['QT_QUICK_BACKEND'] = "software"

    os.environ['QT_QUICK_CONTROLS_STYLE'] = "Material"
    os.environ['QT_QUICK_CONTROLS_MATERIAL_THEME'] = "Dark"
    os.environ['QT_QUICK_CONTROLS_MATERIAL_VARIANT'] = "Dense"
    os.environ['QT_QUICK_CONTROLS_MATERIAL_ACCENT'] = "Teal"
    os.environ['QT_QUICK_CONTROLS_MATERIAL_PRIMARY'] = "BlueGrey"
#    os.environ['QT_QUICK_CONTROLS_MATERIAL_FOREGROUND'] = "Brown"
#    os.environ['QT_QUICK_CONTROLS_MATERIAL_BACKGROUND'] = "Grey"
    #==================================================
    sys.argv += ['--style', 'Material']
    #==================================================
    app = QGuiApplication(sys.argv)
    engine = QQmlApplicationEngine()
    engine.load(os.path.join(os.path.dirname(__file__), "qml/main.qml"))
    if not engine.rootObjects():
        sys.exit(-1)
    sys.exit(app.exec_())

main.qml

      import QtQuick.Window 2.15
import QtQuick.Controls 2.15
import QtQuick.Controls.Material 2.15

ApplicationWindow {
    id:mainWindow
    flags: Qt.Window//|Qt.FramelessWindowHint
    width: 1000
    height: 580
    visible: true
//    Material.theme:Material.Light
//    Material.primary: Material.color("#d81b60",Material.Shade600)
//    Material.accent: Material.color(Material.Pink,Material.Shade800)
    Material.elevation:2
    Button{
        anchors.centerIn: parent
        Material.accent: Material.Orange
        text: "Open"
        width: 150
        height: 45
        onClicked: {
             mainWindow.Material.theme===Material.Light? mainWindow.Material.theme=Material.Dark: mainWindow.Material.theme=Material.Light
        }
    }
}

У меня есть кнопка в центре страницы, но эффекты появляются в x = 0 и y = 0, и она не отображает цвет основного и акцентного

Редактировать

Дополнительная информация может помочь понять, в чем проблема:

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

      file:///C:/Users/MyUserName/AppData/Roaming/Python/Python39/site-packages/PySide6/qml/QtQuick/Controls/Windows/Button.qml:77:49:
 Unable to assign [undefined] to int

Когда я нажимаю ссылку выше (в выводе приложения), отображается код Button.qml

      NativeStyle.Button {
        control: control
        x: background.x
        y: background.y
        width: background.width
        height: background.height
        useNinePatchImage: false
        overrideState: NativeStyle.StyleItem.AlwaysHovered
        opacity: control.hovered ? 1 : 0
//*********** It will jump in below by clicking on that
        Behavior on opacity { NumberAnimation { duration: parent.transitionDuration } }
    }

Когда я нажимаю кнопку, приложение вылетает. Я думаю, это из-за stackview.Push("page.qml") и StackView есть анимация для нажатия страницы, я думаю, она выйдет из строя, потому что в моем приложении проблемы с анимацией

И еще одно: я установил Python 3.9.2 в Program Files folder но когда я использую pip install pyside6 or ... Он скопирует файл в C:/Users/MyUserName/AppData/Roaming/Python/Python39/site-packages дорожка

Answer 1

У меня была такая же ошибка сообщения, когда я наводил курсор на кнопку.

Проблема здесь в этой строке:

      Behavior on opacity { NumberAnimation { duration: parent.transitionDuration } }

А точнее потому, что для свойства duration требуется целое число, а значение parent.transitionDuration не определено (что означает, что оно не существует). При небольшом дополнительном исследовании кажется, что 'transitionDuration' является свойством для NativeStyle.Button, но «parent» - это QQuickLoader.

Вот решение, которое сработало для меня:

      NativeStyle.Button {
        id: nsButton // <-------- add an id
        control: control
        x: background.x
        y: background.y
        width: background.width
        height: background.height
        useNinePatchImage: false
        overrideState: NativeStyle.StyleItem.AlwaysHovered
        opacity: control.hovered ? 1 : 0

        // by doing this you will be able to change the 'parent' for the id
        Behavior on opacity { NumberAnimation { duration: nsButton.transitionDuration } }
    }

РЕДАКТИРОВАТЬ: это частичный ответ для тех, у кого есть ошибка сообщения.