双十一的正确姿势 · qml和QT的交互初学

这一次主要是给大家介绍QML和C++的交互知识，然后我们把上一篇文章的点云精简器加上一个"油门"。
网盘链接如下：
链接：https://pan.baidu.com/s/1i5MRSbF 密码：ku8f

下载完发现不会用的孩纸请联系我：QQ 498771026         本人25小时在线。

为毛要用QML呢？因为QML可以进行华丽UI界面的快速搭建，而C++用来负责复杂的逻辑和算法。
没有C++和QML交互基础的童鞋请猛戳这篇文章：
 https://www.cnblogs.com/findumars/p/6090850.html
以及 这篇： https://pan.baidu.com/s/1i5MRSbF

首先我们实现这个油门，借鉴了QTCreator的例子，粘贴核心代码：

首先是Dial.qml：
import QtQuick 2.0
Item {
    id: root
    property real value : 0

    width: 210; height: 210

    //source:"qrc:/logo/logo/sacula.png";
    Image { source: "qrc:/qmlResource/qmlResource/background.png" }

//! [needle_shadow]
    Image {
        x: 96
        y: 35
        source: "qrc:/qmlResource/qmlResource/needle_shadow.png"
        transform: Rotation {
            origin.x: 9; origin.y: 67
            angle: needleRotation.angle
        }
    }
//! [needle_shadow]
//! [needle]
    Image {
        id: needle
        x: 98; y: 33
        antialiasing: true
        source: "qrc:/qmlResource/qmlResource/needle.png"
        transform: Rotation {
            id: needleRotation
            origin.x: 5; origin.y: 65
            //! [needle angle]
            angle: Math.min(Math.max(-130, root.value*2.6 - 130), 133)
            Behavior on angle {
                SpringAnimation {
                    spring: 1.4
                    damping: .15
                }
            }
            //! [needle angle]
        }
    }

    Image { x: 21; y: 18; source: "qrc:/qmlResource/qmlResource/overlay.png" }
}

上述代码实现的是表盘，一定要注意资源存放的位置以及写法。rc:/qmlResource/qmlResource/自己的资源.png
别的写法基本都是宣告失败的。 
然后是dialcontrol.qml，代码有点长，加油了。同学们也可以直接看QTCreator中的例子，叫做UI Components：Dial Control Example我简直是爱死这个例子了。

 import QtQuick 2.4
import QtQuick.Controls 1.3
import QtQuick.Window 2.2
import QtQuick.Dialogs 1.2
Rectangle {
    color: "#545454"
    width: 300; height: 300

    property real sliderval : slider.x * 100 / (container.width - 32); 

    signal qmlSignal_valChanged(int val);
    //onQmlSignal_valChanged:console.log("qml signal val is changed:", val);

    signal qmlSignal_Apply(int val);
    //onQmlSignal_Apply:console.log("qml Apply:",val);

    onSlidervalChanged:
    {
        qmlSignal_valChanged(sliderval);
        //console.log("onSlidervalChanged",sliderval);
    }

    Dial
    {
        id: dial
        objectName: "obj_dial"
        anchors.centerIn: parent
        value: slider.x * 100 / (container.width - 32)
        onValueChanged:
        {
            slider.x = dial.value*(container.width - 32)/100;
        }
    }

    Text
    {
        id:sliderStat;
        objectName: "obj_sliderStat"
        color: "blue";
        text:"current: " + sliderval;
    }

    Rectangle
    {
        id: container
        objectName: "obj_container"
        property int oldWidth: 0
        anchors { bottom: parent.bottom; left: parent.left
            right: parent.right; leftMargin: 20; rightMargin: 20
            bottomMargin: 10
        }
        height: 16

        radius: 8
        opacity: 0.7
        antialiasing: true
        gradient: Gradient {
            GradientStop { position: 0.0; color: "gray" }
            GradientStop { position: 1.0; color: "white" }
        }

        onWidthChanged: {
            if (oldWidth === 0) {
                oldWidth = width;
                return
            }

            var desiredPercent = slider.x * 100 / (oldWidth - 32)
            slider.x = desiredPercent * (width - 32) / 100
            oldWidth = width

        }

        Rectangle
        {
            id: slider
            objectName: "obj_slider"
            x: 1; y: 1; width: 30; height: 14
            radius: 6
            antialiasing: true
            gradient: Gradient {
                GradientStop { position: 0.0; color: "#424242" }
                GradientStop { position: 1.0; color: "black" }
            }

            MouseArea {
                anchors.fill: parent
                anchors.margins: -16 // Increase mouse area a lot outside the slider
                drag.target: parent;
                drag.axis: Drag.XAxis
                drag.minimumX: 2;
                drag.maximumX: container.width - 32
            }
        }
    }

    QuitButton
    {
        id: quitBT;
        anchors.right: parent.right
        anchors.top: parent.top
        anchors.margins: 10
        MouseArea {
            anchors.fill: parent
            anchors.margins: -10
            onClicked:
            {
                console.log("QuitBTClicked:",sliderval);
            }
        }
    } 
}

好嘞，坚持住。下面才是关键，我们要把这个东西show出来并且放到我的窗体里面去
核心代码如下：
void qScarlet_CloudSimplifyFrm::CreateUpperPartWidget()
{
    m_Method_Label = new QLabel("Method");
    m_MethodSelector_Combobox =new QComboBox();
    m_DialPartWidget=new QWidget();
    view = new QQuickView();
    view->setSource(QUrl(QStringLiteral("qrc:/qml/dialcontrol.qml")));
    view->setResizeMode(QQuickView::SizeRootObjectToView);
    QQuickItem* root = view->rootObject();
    connect(root, SIGNAL(qmlSignal_valChanged(int)),this, SLOT(slot_qmlSliderValChange(int)));

    m_DialPartWidget = QWidget::createWindowContainer(view);
    m_DialPartWidget->setFixedHeight(300);
    m_DialPartWidget->setFixedWidth(300);

    QGridLayout *UpperPart_GridLayout = new QGridLayout();
    UpperPart_GridLayout->addWidget(m_Method_Label, 0, 0,1,1);
    UpperPart_GridLayout->addWidget(m_MethodSelector_Combobox, 0, 1,1,3);
    UpperPart_GridLayout->addWidget(m_DialPartWidget, 1, 1,1,2);

    //UpperPart_GridLayout->setHorizontalSpacing(200);
    m_UppterPartWidget =new QWidget();
    m_UppterPartWidget->setLayout(UpperPart_GridLayout);
}
 没错，我们使用QQuickView 进行变量的访问与设置值。QQuickItem基本已经可以满足我的要求了。
具体写法与程序体验还请大家到网盘里下载一波体验吧。