Qml 快速使用

• 2020 年 4 月 7 日
• 筆記

這周簡單的了解了下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.8ExamplesQt5.9.8quickcustomitemsdialcontrolcontent

所以主要說下訊號部分

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

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

三、 小結

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

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