python - 如何使用 PySide 控制 QML UI？

Question

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

PySide 添加应用程序:

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

添加.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 GUI: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 进行太多交互，但在许多情况下，无论接口(interface)层多么天才，我们都希望信号能够传递到 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()
            }
        }
    }

}