如何用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 GUI：http://postimg.org/image/pocxfcf19/ addition.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 
     } 
     } 
    } 
} 

How to ru用QSide添加QML的用戶界面？或者有沒有像PySide-QML計算器的例子？ 謝謝

Answer 1

所以你想在QML GUI上顯示pyside方法的結果嗎？ 現在你有兩個UI：Qt Widget和QML。我想你想從pyside應用程序控制QML GUI（只有QML UI）。 首先，您必須從pyside加載qml文件（http://qt-project.org/wiki/Hello-World-in-PySide-and-QtQuick）。第二件事是信號和時隙（http://www.qtcentre.org/threads/36782-SOLVED-qml-signal-with-c-slot）。 你的計算按鈕應該發送帶有a和b變量的信號到pyside層，並且pyside層應該有該信號的時隙，並且該時隙將計算這兩個變量併發出信號並將結果發送到qml時隙，並且qml時隙將顯示qml ui中的結果。

Answer 2

這裏是一個界面的例子，當你點擊一個按鈕時更新分數。它可能被設計成與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() 
      } 
     } 
    } 

}