Jinyizhi2233的博客

⼀个组件是⼀个可以重复使⽤的元素，QML提供⼏种不同的⽅法来创建组 件。但是我们只对其中⼀种⽅法进⾏讲解：⼀个⽂件就是⼀个基础组 件。⼀个以⽂件为基础的组件在⽂件中创建了⼀个QML元素，并且将⽂件以 元素类型来命名（例如Button.qml）。你可以像任何其它的QtQuick模块中使 ⽤元素⼀样来使⽤这个组件。在我们下⾯的例⼦中，你将会使⽤你的代码作 为⼀个Button（按钮）来使⽤。

每⼀个QML⽂件都需要⼀个根元素，就像HTML⼀样。⼀个元素使⽤它的类型声明，然后使⽤{}进⾏包含。元素拥有属性，他们按照name:value的格式来赋值。任何在QML⽂档中的元素都可以使⽤它们的id进⾏访问（id是⼀个任意 的标识符）。元素可以嵌套，这意味着⼀个⽗元素可以拥有多个⼦元素。⼦元素可以 通过访问parent关键字来访问它们的⽗元素。

编译器：msvc-2019-64位平台：window10建议：初学者不要玩骚东西。

提供了地图的json文件，我们需要的就是把这个jion文件中地图信息读取出来。地图部分是怎么制作的，其实跟图表部分类似。首先你要保证你html中能够正常展示。地图的显示使用的是：jquery.js。这样地图就可以显示了。

这个是左边部分的三个图，最上面的那个柱状图是使用qchart，qt自带的图表类来实现的，下面两个都是通过echart来实现。由于当时想试一下qchart的，所以就画了一个qchart的图，总体而言，查看帮助文档，qchart的柱状图所能提供的属性以及函数较少，无法做到echart的那么多动作效果，但是qchart渲染极快，不存在需要很长时间才能显示图表。qt自带的qchart的库，可实现图表的显示，需要以下几个步骤：1、需要导入对应的chart模块，前提是你要下载好对应模块的chart.dll。

Bottom02被分为三部分，分别显示左边三个图，中间一个图，以及右边一个图。我们先完成可视化面板的头部分，也就是Header01.qml部分。在qml中分为写成两个qml文件，方便在main.cpp中调用。文件命名为Showtime.js,并存放在js文件夹内。label用来显示文本"可视化面板"，为可见元素。timer用来显示时间，时间的动作由js完成。时间函数已经准备好，我们再来看整体的划分显示；Image用来显示底图，为可见元素。js的方法用来返回现在的当前时间。至此，头文件可以显示完毕。

学习qml也有一段时间了，一直想做一个小项目检验一下自己的学习成果。给学习qml一点小小的提示。qml跟前端语言很像，但是代码格式风格更加符合c++类的语言风格，开始我也认同qml的写法更加像css，最后学了一段时间之后发现更加符合c++写类的风格，对象树的写法让结构更加清楚。由于qml目前的资料过于少了，本人也是初学者，尽可能展示我写的成果，我的写法不一定对，有问题的部分欢迎提出来探讨。