如何使用PySide控制QML UI?

时间:2014-01-07 00:23:19

标签: python qml pyside

我尝试创建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添加应用程序:

app的图片: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
        }
        }
    }
}

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

2 个答案:

答案 0 :(得分: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()
            }
        }
    }

}

答案 1 :(得分:0)

那么你想在QML GUI上显示pyside方法的结果吗? 现在你有两个UI:Qt Widget和QML。我想你想从pyside app(只有QML UI)控制QML gui。 首先你必须从pyside(http://qt-project.org/wiki/Hello-World-in-PySide-and-QtQuick)加载qml文件。第二件事是SIGNALS和SLOTS(http://www.qtcentre.org/threads/36782-SOLVED-qml-signal-with-c-slot)。 你的计算按钮应该发出带有a和b变量到pyside层的信号,pyside层应该有该信号的插槽,并且该槽将计算两个变量并发出信号,结果为qml槽,qml槽将在qml ui中显示该结果。