python3+qml实战 （上）

qml开发非常迅速简洁，python灵活多样兼容性极强，开发简洁，但是网上资料太少，这里写一篇博客，即是安利，也是总结。

水平有限，情真意切，如果错误 ，欢迎指正。

目标：给验证码识别软件 写一个GUI界面。识别软件用python3写的。

环境：windows8.1，python3.6,，qt5.8

时间：2017年5月16日0:18:19

什么简单先写什么，难的部分慢慢啃。

打开Qtquick4.2（qt5.8自带），按照上节所讲（http://blog.csdn.net/eric6_17/article/details/72084825）在设计栏内勾画出页面蓝图：

点击编辑：

贴代码：

import QtQuick 2.6

import QtQuick.Window 2.2

import QtQuick.Controls 1.4

Rectangle {

    width: 640

    height: 480   //这里一定要加个大小 不然打开的窗口太小什么都看不到 很不方便

    Label {

        id: label

        x: 204

        y: 74

        width: 232

        height: 39

        text: qsTr("验证码识别")

        font.pointSize: 26

        textFormat: Text.AutoText

        verticalAlignment: Text.AlignVCenter

        horizontalAlignment: Text.AlignHCenter

    }

    Image {

        id: image

        x: 220

        y: 143

        width: 200

        height: 100

        //source: "qrc:/qtquickplugin/images/template_image.png"

    }

    Button {

        id: button

        x: 165

        y: 352

        text: qsTr("开始")

    }

    Button {

        id: button1

        x: 399

        y: 352

        text: qsTr("关闭")

    }

    TextField {

        id: textField

        x: 204

        y: 267

        width: 232

        height: 20

        placeholderText: qsTr("Text Field")

    }

    Label {

        id: label1

        x: 132

        y: 271

        width: 51

        height: 10

        text: qsTr("结果")

        verticalAlignment: Text.AlignVCenter

        horizontalAlignment: Text.AlignHCenter

    }

    }

OK，界面文件框架搞定，完成30%，接下来写qml调用python函数部分的实现。

打开python3.6idle，或者你喜欢的编译软件，写入下面的代码：

from PyQt5.QtCore import QUrl, QObject, pyqtSlot
from PyQt5.QtGui import QGuiApplication
from PyQt5.QtQuick import QQuickView

class MyClass(QObject):
    @pyqtSlot(str)    # 输入参数为str类型
    def outputString(self, string):  #定义qml调用的函数
        print(string)

if __name__ == '__main__':
    path = 'test.qml'   # 加载的QML文件
    app = QGuiApplication([])  #实例化  
    view = QQuickView()        # 创建窗口 
    con = MyClass()            # 实例化 
    context = view.rootContext() 
    context.setContextProperty("con", con)  # 文档里是setContextProperty(QStringLiteral("initialUrl"),BUILD_DIR); 前一个con
                                            #是qml里的调用接口函数，后一个con是指Myclass，可以理解成构建一个通道
    view.engine().quit.connect(app.quit)    # 退出函数 
    view.setSource(QUrl(path))              # 导入qml

    view.show()                             # 显示qml

    app.exec_()                             # 退出

然后根据自己的需求进行修改。

贴代码：

from PyQt5.QtCore import QUrl, QObject, pyqtSlot
from PyQt5.QtGui import QGuiApplication
from PyQt5.QtQuick import QQuickView

class MyClass(QObject):
    @pyqtSlot(str)    # 输入参数为str类型
    def outputString(self, string):  #定义qml调用的函数
        print(string)

if __name__ == '__main__':
    path = 'yanzhengmashibie.qml'   # 加载的QML文件
    app = QGuiApplication([])
    view = QQuickView()
    con = MyClass()
    context = view.rootContext()
    context.setContextProperty("con", con)
    view.engine().quit.connect(app.quit)
    view.setSource(QUrl(path))
    view.show()
    app.exec_()

OK 完成50%了，接下来搞定各个按钮与功能函数的链接。