如何使用 PySide 控制 QML UI？

Posted 2023-02-16

【中文标题】如何使用 PySide 控制 QML UI？

【英文标题】：How to control QML UI with PySide?

【发布时间】：2014-01-07 00:23:18

【问题描述】：

我尝试创建 QML-PYSIDE 计算器。但是我找不到任何这样的例子。我还检查了 pyside wiki，但不明白如何一起运行 QML-PySide。 例如，我想使用 QML-PySİde.(a+b=c) 运行添加应用程序。我可以控制由 QtDesigner 用 Python 创建的附加应用程序 GUI (sumui.ui)（由 PySideTools 转换）。但我无法使用 Python 控制添加应用程序 QML (inputtext, button )。 我是 python-qt 的新手。所以我输入了 pyside-qtdesigner 和 qml GUI 来了解 PySide-QtWidgets 和 PySide-QML UI 之间的关系。 （对不起我的英语不好）

PySide 添加应用：

应用图片：http://postimg.org/image/envp8jgg9/

addition.py:

# addition.py
from PySide import QtCore, QtGui
from sumui import Ui_Form
import sys

def derece(degrees):
    return degrees*((2*pi)/400)
class hesap(QtGui.QWidget):
    def __init__(self):
      QtGui.QWidget.__init__(self)

      self.ui = Ui_Form()
      self.ui.setupUi(self)

      # Validations
      tempValidator = QtGui.QDoubleValidator()
      tempValidator.setNotation(QtGui.QDoubleValidator.StandardNotation)
      self.ui.a.setValidator(tempValidator)
      self.ui.b.setValidator(tempValidator)
      self.setupConnections()

    def topla(self):
        a1 = float(self.ui.a.text())
        b1 = float(self.ui.b.text())
        c1 = a1 + b1
        cc1 = str(c1)
        self.ui.c.setText(str(cc1))



    def setupConnections(self):
        self.connect(self.ui.sum, QtCore.SIGNAL('clicked()'),
          self.topla)
if __name__ == "__main__":

    app = QtGui.QApplication(sys.argv)
    window = hesap()
    window.show()
    sys.exit(app.exec_())

QML 图形用户界面：http://postimg.org/image/pocxfcf19/ 添加.qml：

import QtQuick 1.1
Rectangle 
    id:r
    anchors.centerIn: parent
    width: 200
    height: 200
    Column
        width: r.width*0.8
        height: r.height*0.8
        spacing: 10
        anchors.centerIn: parent
        Row
            id:ro
            spacing:10
            Text 
                anchors.centerIn: ro.parent
                font.bold: true
                text: "a"
            
            TextInput 
                id: a
                width: r.width*3/4
                height: 20
                selectionColor: "#2f8bc5"
                fillColor: "lightgray"
                font.bold: true
            
        
        Row
            spacing:10
        Text 
            text: "b"
            font.bold: true
        
        TextInput 
            id: b
            width: r.width*3/4
            height: 20
            fillColor: "lightgray"
            font.bold: true
        
        
        Rectangle 
            id: calculate
            width: r.width
            height: 30
            color: "#8a0800"
            //x:b.width*0.2
            Text
                anchors.centerIn: calculate
                font.bold: true
                text:"calculate";color:"white"
                gradient: Gradient 
                GradientStop 
                    position: 0
                    color: "#8a0800"
                
                GradientStop 
                    position: 1
                    color: "#330009"
                
            
        

        Row
            spacing:10
        Text 
            text: "c"
            font.bold: true
        
        TextInput 
            id: c
            font.bold: true
            width: r.width*3/4
            height: 20
            fillColor: "lightgray"
            selectionColor: "#2f8bc5"
            font.pixelSize: 12
        
        
    

如何使用 PySide 运行 QML 添加 UI？或者有没有像 PySide-QML 计算器这样的例子？ 谢谢

【参考方案1】：

这是一个界面示例，当您单击按钮时会更新分数。它可能无需与 python 进行太多交互即可设计，但在许多情况下，无论接口层多么天才，我们都希望将信号传递给 Python。

import sys
from PySide import QtCore,QtDeclarative, QtGui

class QtScoreInterface(QtCore.QObject ):

    signaller_score_a = QtCore.Signal(str)
    signaller_score_b = QtCore.Signal(str)


    def __init__(self):
        QtCore.QObject.__init__(self)
        self.score_a = 0
        self.score_b = 0

    @QtCore.Slot()
    def aScored(self):
        print ("A_scored");
        self.score_a += 1
        self.updateScore()


    @QtCore.Slot()
    def bScored(self):
        print ("B_scored");
        self.score_b += 1
        self.updateScore()


    @QtCore.Slot()
    def startMatch(self):
        print ("Game start stopped");


    def updateScore(self):
        self.signaller_score_a.emit(str(self.score_a))
        self.signaller_score_b.emit(str(self.score_b))


class MainView( QtDeclarative.QDeclarativeView ):
    def __init__( self, parent=None):
        super( MainView, self ).__init__( parent )
        self.setWindowTitle( "ScoreKeeper" )
        self.setSource( QtCore.QUrl.fromLocalFile( './main.qml' ) )
        self.setResizeMode( QtDeclarative.QDeclarativeView.SizeRootObjectToView )


qApplication = QtGui.QApplication( sys.argv )
window = MainView()
window.show();

qcontext = window.rootContext() 
interface = QtScoreInterface()
qcontext.setContextProperty("qScoreInterface",interface)

interface.signaller_score_a.connect(window.rootObject().updateScoreA)
interface.signaller_score_b.connect(window.rootObject().updateScoreB)

sys.exit( qApplication.exec_() )

这是 QML 文件 (main.qml)：

import QtQuick 1.1

Rectangle 
    id: rectangle1
    width: 480
    height: 272



    gradient: Gradient 
        GradientStop 
            id: gradientStop1
            position: 0
            color: "#ffffff"
        

        GradientStop 
            position: 1
            color: "#abc09f"
        
    

    function updateScoreA(string ) 
        score_a.text = string
    

    function updateScoreB(string ) 
        score_b.text = string
    

    Text 
        id: score_a
        x: 45
        y: 8
        width: 131
        height: 48
        text: qsTr("Text")
        verticalAlignment: Text.AlignVCenter
        font.pixelSize: 12
    

    Text 
        id: score_b
        x: 303
        y: 8
        width: 131
        height: 48
        text: qsTr("Text")
        verticalAlignment: Text.AlignVCenter
        horizontalAlignment: Text.AlignRight
        font.pixelSize: 12




    

    Text 
        id: dash
        x: 232
        y: 5
        text: qsTr("-")
        horizontalAlignment: Text.AlignHCenter
        font.pixelSize: 47
    

    MouseArea 
        id: a_scored
        x: 303
        y: 200
    

    Rectangle 
        id: team_a
        x: 45
        y: 218
        width: 127
        height: 46
        color: "#4e3a3a"
        radius: 10

        TextInput 
            id: team_a_txt
            x: 24
            y: 13
            width: 80
            height: 20
            text: qsTr("A")
            horizontalAlignment: TextInput.AlignHCenter
            font.pixelSize: 12
        

        MouseArea 
            id: team_a_score_ma
            x: 0
            y: 0
            width: 126
            height: 46
            onClicked: 
                qScoreInterface.aScored()
            
        
    

    Rectangle 
        id: team_b
        x: 307
        y: 218
        width: 127
        height: 46
        color: "#4e3a3a"
        radius: 10
        TextInput 
            id: team_b_txt
            x: 24
            y: 13
            width: 80
            height: 20
            text: qsTr("B")
            horizontalAlignment: TextInput.AlignHCenter
            font.pixelSize: 12
        

        MouseArea 
            id: team_b_score_ma
            x: 0
            y: 0
            width: 126
            height: 46
            onClicked: 
                qScoreInterface.bScored()
            
        
    

    Rectangle 
        id: startstopgame
        x: 177
        y: 113
        width: 127
        height: 46
        color: "#4e3a3a"
        radius: 10
        TextInput 
            id: startstopgame_txt
            x: 24
            y: 13
            width: 80
            height: 20
            text: qsTr("Start Game")
            horizontalAlignment: TextInput.AlignHCenter
            font.pixelSize: 12
        

        MouseArea 
            id: startstopgame_ma
            x: 1
            y: 0
            width: 126
            height: 46
            onClicked: 
                qScoreInterface.startMatch()
            
        
    

【讨论】：

谢谢。这是通过 Python 理解控制 QML 的一个很好的例子。

有这样的解决方案：postimg.org/image/ipd0c4vuntestqml.qml:pastebin.com/e8faShwLmain.py:pastebin.com/auCpncS2只是问题是它不能用任何按钮计算。它与输入键一起使用。我想使用“QObjectName”控制 QML 对象。因为计算的参数很多。

【参考方案2】：

所以你想在 QML GUI 上显示 pyside 方法的结果？ 现在你有两个 UI：Qt Widget 和 QML。我认为您想从 pyside 应用程序（仅 QML UI）控制 QML gui。 首先，您必须从 pyside (http://qt-project.org/wiki/Hello-World-in-PySide-and-QtQuick) 加载 qml 文件。第二件事是信号和插槽（http://www.qtcentre.org/threads/36782-SOLVED-qml-signal-with-c-slot）。 您的计算按钮应该向 pyside 层发出带有 a 和 b 变量的信号，并且 pyside 层应该有该信号的插槽，并且该插槽将计算这两个变量并将带有结果的信号发送到 qml 插槽，而 qml 插槽将在 qml ui 中显示该结果。

【讨论】：

谢谢。是的，我就是这个意思。我可以用 python 运行单个 QML。但我没有尝试用 python 运行多个 QML 文件。我将尝试运行多 QML。这是研究 c++ -Qt 示例的好主意，我对 c++ 一无所知。但我将研究 c++ 和 PyQt 之间的类似示例。然后我将比较它们以控制信号和插槽。因此，PySide 和 C++ 使用与 Qt 相同的 API。对不起我的英语不好。