我应该如何在Pyside6应用程序中使用Material Design? [英] How should I use Material Design in Pyside6 Application?

问题描述

我的 pyside 6 应用程序中有以下代码

I have below code in my pyside 6 app

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，并且不显示主要颜色和重音颜色

I have a button in center of page but effects is appearing in x=0 and y=0,and it don't display color of primary and accent

修改

有关更多信息，可能有助于了解问题所在:

For more infomation may be helps for understanding where is problem:

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

I disabled using material design in my project now after running the application When I hover on button I see below on application output:

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

When I click above link(in application output) It will show code of 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 具有用于推送页面的动画，我认为它将崩溃，因为我的应用存在动画问题

When I click button application will crash.I think it is because of stackview.Push("page.qml") and StackView has animation for pushing page,I think it will crash beacuse my app has problem with animation

还有另一句话要说:我在 Program Files文件夹中安装了Python 3.9.2，但是当我使用 pip install pyside6或... 时，它将在 C:/Users/MyUserName中复制文件/AppData/Roaming/Python/Python39/site-packages 路径

And another thing to say: I installed Python 3.9.2 in Program Files folder but when I use pip install pyside6 or ... It will copy the file in C:/Users/MyUserName/AppData/Roaming/Python/Python39/site-packages path

推荐答案

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

I had the same message error too when I hover on Button.

这里的问题是这一行:

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

更确切地说，因为'duration'属性需要一个整数，并且'parent.transitionDuration'的值是未定义的(这意味着它不存在).经过更多调查，似乎"transitionDuration"是NativeStyle.Button的属性，而"parent"是"NativeStyle.Button"的属性.是QQuickLoader.

And more precisely because 'duration' property needs an integer and the value of 'parent.transitionDuration' is undefined (which means that it doesn't exist). With a little more investigation, it seems that the 'transitionDuration' is a property for NativeStyle.Button, but "parent" is a QQuickLoader.

以下是对我有用的解决方案:

Here is the solution that worked for me:

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

对于有消息错误的人，这是部分答案.

This is a partial answer, for those who have the message error.

这篇关于我应该如何在Pyside6应用程序中使用Material Design?的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！