我尝试创建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计算器这样的例子吗? 感谢
答案 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中显示该结果。