寫在開頭

最近公司給了個任務，讓我當輔助，跟一個公司前輩寫上位機，底層都是前輩寫好的，領導想要加儀表到上位機做顯示，之前看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