使用qtquick创建着色仪表盘，qtquick与其他widget交互

mainwindow.cpp：

#include "mainwindow.h"
#include "ui_mainwindow.h"

MainWindow::MainWindow(QWidget *parent)
    : QMainWindow(parent)
    , ui(new Ui::MainWindow)
{
    ui->setupUi(this);

    QUrl soucre("text.qml");
    ui->quickWidget->setResizeMode(QQuickWidget::SizeRootObjectToView);
    ui->quickWidget->rootContext()->setContextProperty("testData", this);
    ui->quickWidget->setSource(soucre);
    ui->quickWidget->setClearColor(QColor(Qt::transparent));

    dashboard = new Dashboard(this);


    // 创建并启动线程
    dataFetcherThread = new DataFetcherThread(this);
    dataFetcherThread->start();

}

MainWindow::~MainWindow()
{
    delete ui;
}


QString MainWindow::sendData()
{
    QString str = "blue";
    return str;
}

DashBoard.cpp:

#include "dashboard.h"
#include "ui_dashboard.h"
#include <QQuickWidget>
#include <QQuickItem>
#include <QQmlApplicationEngine>
#include <QQuickView>
#include <QQmlContext>
#include <QDebug>

Dashboard::Dashboard(QWidget *parent) :
    QWidget(parent),
    ui(new Ui::Dashboard)
{
    ui->setupUi(this);
    QUrl soucre("qml.qml");
    ui->quickWidget->setResizeMode(QQuickWidget::SizeRootObjectToView);
    ui->quickWidget->setSource(soucre);
    ui->quickWidget->setAttribute(Qt::WA_AlwaysStackOnTop);
    ui->quickWidget->setClearColor(QColor(Qt::transparent));

}

Dashboard::~Dashboard()
{
    delete ui;
}

void Dashboard::getValue(QString value)
{
    // 向qml传递数据
    ui->quickWidget->rootContext()->setContextProperty("str_value", value);

}

text.qml:

import QtQuick 2.0
import QtQuick.Controls 1.4

Rectangle{
    id:root;
    height:200;
    width:200;
    color: "red"
    Text {
        anchors.centerIn: parent
        text: qsTr("hello")
    }
    MouseArea{
        anchors.fill: parent;
        onClicked: {
            root.color = testData.sendData()
        }
    }
}

qml.qml:

import QtQuick 2.5
import QtQuick.Controls 2.12
import QtQuick.Window 2.10

Rectangle{
    id:control;
    color: Qt.rgba(0,0,0,0);
    property real radius: control.width > control.height ? control.height/2-10 : control.width/2-10;
    property real currenValue: str_value
    onCurrenValueChanged: {
        canvas.requestPaint()
    }

    Canvas{
        id:canvas
        antialiasing: true
        anchors.fill: parent
        width: parent.width
        height: parent.height
        onPaint: {
            var ctx = getContext("2d")
            ctx.reset();
            ctx.lineWidth = 3;
            ctx.strokeStyle = "white";
            ctx.fillStyle = "white";
            ctx.font = "20px 黑体";
            ctx.lineCap = "round"
            ctx.translate(width/2, height/2);

            // 绘制外圆
            ctx.save();
            ctx.beginPath();
            ctx.arc(0,0,control.radius,0,Math.PI*2,true)
            ctx.closePath();
            ctx.fill();
            ctx.stroke();
            ctx.restore();

            // 绘制故障区域
            ctx.save();
            ctx.strokeStyle = "#FF0000";
            ctx.fillStyle = "#FF0000";
            ctx.beginPath();
            ctx.moveTo(0,0);
            ctx.arc(0,0,control.radius,-60*Math.PI/180,-240*Math.PI/180,true);
            ctx.closePath();
            ctx.fill();
            ctx.stroke();

            // 绘制临界区域
            ctx.save();
            ctx.strokeStyle = "#FFA500";
            ctx.fillStyle = "#FFA500";
            ctx.beginPath();
            ctx.moveTo(0,0);
            ctx.arc(0,0,control.radius,0*Math.PI/180,-60*Math.PI/180,true);
            ctx.closePath();
            ctx.fill();
            ctx.stroke();

             // 绘制警告区域
            ctx.save();
            ctx.strokeStyle = "#FFFF00";
            ctx.fillStyle = "#FFFF00";
            ctx.beginPath();
            ctx.moveTo(0,0);
            ctx.arc(0,0,control.radius,30*Math.PI/180,360*Math.PI/180,true);
            ctx.closePath();
            ctx.fill();
            ctx.stroke();

            // 绘制正常区域
            ctx.save();
            ctx.strokeStyle = "#66FF33";
            ctx.fillStyle = "#66FF33";
            ctx.beginPath();
            ctx.moveTo(0,0);
            ctx.arc(0,0,control.radius,60*Math.PI/180,30*Math.PI/180,true);
            ctx.closePath();
            ctx.fill();
            ctx.stroke();

            // 绘制覆盖区域
            ctx.save();
            ctx.strokeStyle = "#03123E";
            ctx.fillStyle = "#03123E";
            ctx.beginPath();
            ctx.moveTo(0,0);
            ctx.arc(0,0,control.radius -40,-60*Math.PI/180,300*Math.PI/180,true);
            ctx.closePath();
            ctx.fill();
            ctx.stroke();
            ctx.restore()


            // 绘制刻度
            ctx.save();
            ctx.lineWidth = 2
            ctx.strokeStyle = "blue";
            ctx.fillStyle = "blue";
            ctx.rotate(Math.PI/6);
            ctx.beginPath()
            for(var i = 0; i <= 100/2;i++){
                if(i%5 == 0){
                    ctx.moveTo(0, control.radius)
                    ctx.lineTo(0, control.radius-15)
                    ctx.save()
                    ctx.translate(0, control.radius -25)
                    ctx.fillText(String(i*2),0,0)
                    ctx.restore()
                }
                else{
                    ctx.moveTo(0,control.radius)
                    ctx.lineTo(0, control.radius-5)

                }
                ctx.rotate((Math.PI*2-Math.PI/3)/100*2)
            }
            ctx.stroke()
            ctx.restore()

            // 绘制内圆
            ctx.save();
            ctx.strokeStyle = "grey";
            ctx.fillStyle = "grey";
            ctx.beginPath()
            ctx.arc(0,0,15,0,Math.PI*2,true)
            ctx.fill();
            ctx.stroke();
            ctx.restore();


            // 绘制指针
            ctx.save()
            ctx.strokeStyle = "purple"
            ctx.fillStyle = "purple"
            ctx.rotate(Math.PI/6)
            ctx.rotate(((Math.PI*2 - Math.PI/3)/100*2) * (control.currenValue/2));
            ctx.beginPath()
            ctx.lineTo(0,0)
            ctx.lineTo(8,20)
            ctx.lineTo(0, control.radius-35)
            ctx.lineTo(-8,20)
            ctx.closePath()
            ctx.fill()
            ctx.stroke()
            ctx.restore()

            ctx.save()
            ctx.strokeStyle = "transparent"
            ctx.fillStyle = "white"
            ctx.font = "18px 黑体"
            ctx.fillText("评估得分:"+ String(currenValue),-50,control.radius/2)
            ctx.stroke()
            ctx.restore()
        }
    }
}

运行结果：