如何使用 PySide 控制 QML UI？

Question

我尝试创建 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 计算器这样的例子？ 谢谢

Answer 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()
            }
        }
    }

}

Answer 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 中显示该结果。