Qml 快速使用

摘要：该部分主要使用了QQuickWidget用来嵌入 Qml 的显示，并使用 Qt 的信号和槽来进行通信。该部分程序几乎都是Qt官方自带例子的源码，为方便阅读，直接删去了例子中没有用到的部分。

点击上方蓝字可直接关注！方便下次阅读。如果对你有帮助，可以点个在看或点个赞，感谢~

这周简单的了解了下Qt的 qml 。个人对它的定位就是可以方便快速地绘制一些精美的 UI ，对快速开发前端 (UI) 还是有挺大帮助的。所以并没有从整体上了解，而是快速的组合了一个小 Demo ，效果如下。试想下，如果自定义 Widget 需要实现多少东西呢？

Demo总体概述：通过 Widget 上的 Slider 控制 Qml 中的拨码盘刻度指向，实现了 Qml 与 Widget 通信。

程序环境：Windows、 Qt5.9.8(MSVC2015)

一、项目准备

由于使用到了Qml以及 QQuickWidget ，所以 pro 中要添加 quick 和 quickwidgets 模块，不然会报出一些奇葩的问题。qml文件以及用到的图片是通过资源文件形式添加进来的。

QT += quick
QT +=  core gui quickwidgets

二、程序源码

1. Widgwet部分

该部分主要使用了QQuickWidget用来嵌入 Qml 的显示，并使用 Qt 的信号和槽来进行通信。

ui->quickWidget->setSource(
                QUrl(QStringLiteral("qrc:/main.qml")));
    QObject *item = (QObject *)ui->quickWidget->rootObject();
    if(nullptr != item)
    {
        connect(this,SIGNAL(signal_position(int)),
                item,SIGNAL(posSignal(int)));
}

2. Qml部分

该部分程序几乎都是Qt官方自带例子的源码，为方便阅读，直接删去了例子中没有用到的部分。

***\Qt5.9.8\Examples\Qt5.9.8\quick\customitems\dialcontrol\content

所以主要说下信号部分

Rectangle {
    color: "#545454"
    width: 300; height: 300

    signal posSignal(int pos)

    // 信号处理程序（处理从 Qt Widgets 接收到的信号）
    onPosSignal: {
        dial.value = pos
    }
    //官方例子拨码盘调用，删除其他程序
    Dial {
        id: dial
        anchors.centerIn: parent
//        value: slider.x * 100 / (container.width - 32)
        value: 0
    }
}