PyQt5+QML实现仪表组件

写在开头

最近公司给了个任务，让我当辅助，跟一个公司前辈写上位机，底层都是前辈写好的，领导想要加仪表到上位机做显示，之前看QT的例子程序里面的油表，我个人挺喜欢黑背景的东西，所以想直接把这个搬过来用，原来没有学过python（因为前辈的底层都是用python写的），没有学过QML，所以都要从语言学起，不过这对于我这刚毕业的还是很有好处的，之前在知乎上看到一篇文章，多学几门编程语言你就会慢慢发现各个语言的优缺点，在做项目的时候可选择性也更高。
好了，进入主题。学习pyqt的时候，有看到过怎样与QML交互的，但是大多数都是QML写个界面，然后PyQt建一个应用程序，加载QML文件，显示，就没了，我想要的效果是QML文件当作一个UI界面的控件来使用。

正题

我先理一下思路。。。。该从哪里开始写。。。。
我想写这篇文章的重点就是总结一下QML的使用，还有就是QML与pyqt的交互，那就先总结QML吧。有关QML的中文资料可以参考QMLBookInChinese。

用QML写个界面

之前都用习惯了图形化界面（qtdesigner）来设计界面，真的不习惯这种纯代码的方式来建界面，我直接贴一个界面代码慢慢讲

import QtQuick 2.0
import QtQuick.Window 2.0

Window {
    id:root
    visible: true
    width: 640
    height: 480
    //color: "blue"
    title: qsTr("Hello World")

    Rectangle{           //创建一个矩形框
        id:add
        x:0;y:0;
        width: 50
        height: 20
        radius: 20       //圆角半径
        color:"steelblue"
        property real speed_value: 0
        Text{
            anchors.centerIn: parent  //锚定到父类的中心
            text:"+10"
        }

        MouseArea{
            anchors.fill: parent      //填充整个父类
            onClicked:                //槽函数
                add.speed_value+=10
        }
    }

    Rectangle{
        id:minus
        x:50;y:0;
        width: 50
        height: 20
        radius: 20
        color:"gray"
        property real speed_value: 0
        Text{
            anchors.centerIn: parent
            text:"-10"
        }

        MouseArea{
            anchors.fill: parent
            onClicked:
                add.speed_value-=10
        }
    }

    Meter{                         //仪表组件
        anchors.centerIn: parent   //锚定到窗口中心
        width: Math.min(root.width,root.height)/2
        height: Math.min(root.width,root.height)/2
        meterMaxValue: 500
        meterMinValue: -500
        underMeterText: "V"
        meter_value: add.speed_value
    }
}

好像…这个高亮很奇怪啊，不支持QML的语法吗？
好了好了，又跑偏了，有关QML的语法我就不讲了，我也讲不清楚，要看懂还是挺容易的。
首先！window，顾名思义，创建一个窗口，这个窗口是可见的visible: true,然后设置窗口的长宽width: 640;height: 480,顺便提一下，QML是支持分号的。设置窗口的标题title: qsTr("Hello World")。
Rectangle创建一个矩形区域，每个组件都可以设置一个id:，这个id在一个QML文件中应该是唯一的。然后设置长宽，不设置长宽是看不到矩形的，而且基于该矩形区域的其他组件也无效。radius: 20设置矩形的圆角半角，这样就可以生成一个圆角矩形，不再是方方正正的了，color:steelblue设置矩形框的颜色。Text在矩形区域中显示文本，anchors.centerIn: parent锚定到父类的中心，有关锚定的概念自己看书。
MouseArea在矩形区域中创建一个鼠标区域，anchors.fill: parent填充整个父类，意思就是整个矩形区域都是鼠标的可操作区域。咦，忘了讲这个了property real speed_value: 0定义个real类型的变量，property关键字的意思就是外部可以访问这个变量。
Meter是我自己封装好的仪表组件，里面的变量看名字都很好理解，我就就不一一解释了。
至此我们可以用QTCreator的工具qmlsence看看效果，工具->外部->Qt Quick 2 preview。