這周簡(jiǎn)單的了解了下Qt的qml。個(gè)人對(duì)它的定位就是可以方便快速地繪制一些精美的UI，對(duì)快速開(kāi)發(fā)前端(UI)還是有挺大幫助的。所以并沒(méi)有從整體上了解，而是快速的組合了一個(gè)小Demo，效果如下。試想下，如果自定義Widget需要實(shí)現(xiàn)多少東西呢？

Demo總體概述：通過(guò)Widget上的Slider控制Qml中的撥碼盤(pán)刻度指向，實(shí)現(xiàn)了Qml與Widget通信。

程序環(huán)境：Windows、Qt5.9.8(MSVC2015)

一、 項(xiàng)目準(zhǔn)備

由于使用到了Qml以及QQuickWidget，所以pro中要添加quick和quickwidgets

模塊，不然會(huì)報(bào)出一些奇葩的問(wèn)題。qml文件以及用到的圖片是通過(guò)資源文件形式添加

進(jìn)來(lái)的。

QT += quick QT += core gui quickwidgets

二 、 程序源碼

Widgwet部分

該部分主要使用了QQuickWidget用來(lái)嵌入Qml的顯示，并使用Qt的信號(hào)和槽來(lái)

進(jìn)行通信。

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官方自帶例子的源碼，為方便閱讀，直接刪去了例子中沒(méi)

有用到的部分。

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

所以主要說(shuō)下信號(hào)部分

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

藍(lán)色字體部分是Qml中信號(hào)聲明以及實(shí)現(xiàn)的部分，與Widget中信號(hào)槽連接對(duì)應(yīng)起來(lái)看。

三、 小結(jié)

對(duì)于地面站軟件顯示一些參數(shù)的情況下，使用Qml還是很方便的。以后有機(jī)會(huì)使用自定義Widget做一個(gè)類(lèi)似的效果。

如果對(duì)其他前端語(yǔ)言比較熟悉的話(huà)，如h5、js等，使用它們也可以快速的搭建前端界面。越了解就會(huì)發(fā)現(xiàn)一個(gè)應(yīng)用程序往往是多種語(yǔ)言結(jié)合在一起的，把合適的語(yǔ)言用在合適的地方。

需要工程源碼的小伙伴可直接在公眾號(hào)后臺(tái)留言。

Pou光明 后臺(tái)留言。

qml效果視頻https://www.zhihu.com/video/1226989466772332544 與50位技術(shù)專(zhuān)家面對(duì)面20年技術(shù)見(jiàn)證，附贈(zèng)技術(shù)全景圖

總結(jié)

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

如果覺(jué)得生活随笔網(wǎng)站內(nèi)容還不錯(cuò)，歡迎將生活随笔推薦給好友。