這周簡單的了解了下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

二 、 程序源碼

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)));}

Qml部分

該部分程序幾乎都是Qt官方自帶例子的源碼，為方便閱讀，直接刪去了例子中沒

有用到的部分。

目錄是***Qt5.9.8ExamplesQt-5.9.8quickcustomitemsdialcontrolcontent

所以主要說下信號部分

Rectangle {color: "#545454"width: 300; height: 300signal posSignal(int pos)// 信號處理程序（處理從 Qt Widgets 接收到的信號）onPosSignal: {dial.value = pos}//官方例子撥碼盤調用，刪除其他程序Dial {id: dialanchors.centerIn: parent // value: slider.x * 100 / (container.width - 32)value: 0}}

藍色字體部分是Qml中信號聲明以及實現的部分，與Widget中信號槽連接對應起來看。

三、 小結

對于地面站軟件顯示一些參數的情況下，使用Qml還是很方便的。以后有機會使用自定義Widget做一個類似的效果。

如果對其他前端語言比較熟悉的話，如h5、js等，使用它們也可以快速的搭建前端界面。越了解就會發現一個應用程序往往是多種語言結合在一起的，把合適的語言用在合適的地方。

需要工程源碼的小伙伴可直接在公眾號后臺留言。

Pou光明 后臺留言。

qml效果視頻https://www.zhihu.com/video/1226989466772332544 與50位技術專家面對面20年技術見證，附贈技術全景圖

總結

以上是生活随笔為你收集整理的qml mousearea 点击其他地方_Qml 快速使用的全部內容，希望文章能夠幫你解決所遇到的問題。

如果覺得生活随笔網站內容還不錯，歡迎將生活随笔推薦給好友。