我应该如何在 Pyside6 应用程序中使用 Material Design？

编程问答 2022-05-22

问题描述

我的 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_())

ma​​in.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 处，并且不显示主要和重音的颜色

enter image description here

编辑

有关更多信息可能有助于了解问题出在哪里：

我现在在运行应用程序后禁用了在我的项目中使用材料设计当我将鼠标悬停在按钮上时，我会在应用程序输出中看到以下内容：

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有推送页面的动画，我认为它会崩溃是因为我的应用程序有动画问题

还有一件事要说： 我在 Program Files folder 中安装了 Python 3.9.2，但是当我使用 pip install pyside6 or ... 时，它会将文件复制到 C:/Users/MyUserName/AppData/Roaming/Python/python39/site-packages 路径

解决方法

当我将鼠标悬停在 Button 上时，我也遇到了同样的消息错误。

这里的问题是这一行：

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 } }
    }

编辑： 这是一个部分答案，对于那些有消息错误的人。