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等，使用它们也可以快速的搭建前端界面。越了解就会发现一个应用程序往往是多种语言结合在一起的，把合适的语言用在合适的地方。