qml实例-交通信号配时软件

本创作为信号配时软件2.0版本，可视化相位相序及时长的改变，最终效果如下图所示：

##主要功能如下，以双环为例：

1. 初始化显示
2. 屏障增删
3. 相位增删
4. 时长改变（支持拖动和手动两种）
5. 相序的改变
6. 弹窗提示
7. 灯色的改变

##主要技术点如下，

1. createComponent
   两层嵌套的动态加载，绘制基本双环八相位。

2. Drag and Droparea
   拖拽item对象到droparea实现item的移动和相位颜色的改变。

3. anchor
   巧用布局，改变相关元素的变量，实现牵一发动全身的效果。

4. canvas
   绘制屏障的边界线，也用于国标导向箭头的绘制。

5. MessageDialog
   利用弹窗改变相位时长或起提示作用。

6. xxx.js
   将中间过程的函数放于.js文件，使程序整洁。

7. splice
   用于增加和删除数组中的元素。

   … …

##需要注意的细节问题：

• 不同qml之间的传参
• 完全应用布局时rec长度不能改变
• Rectangle里面的x变量为相对位置
• qml程序各个组件的执行顺序很重要
• 标记各个item（被拖拽对象）的位置
• 三维数组初始化或赋值的规则
• 标记每个相位块的位置（屏障编号、行编号、列编号）
• 动态加载的时候，加载结束之前，被加载对象是不能改变的，可以把先加载的单独存起来，以备加载结束前被其他对象调用。

除此以外，本创作中还涉及一些qml的编程技巧，比如两个qml文件之间传递参数，各个控制的使用（Rectangle、Item、Menu、Button、Text等），onXXXChanged的妙用，鼠标点击相关（hoverEnabled、onDoubleClicked、onPressed、onReleased、onPositionChanged）及鼠标形状，矢量图的加载等。

##剖析和整理：

（待续）

##弯路：

上述为整个软件开发过程中的关键技术和流程，这期间还走了两个弯路：

• 相位块拖拽改变大小一开始采用滑块的形式，已作出基本初始化的形态，后期发现其他操作困难，故而转变为用Rectangle，这在ui界面的构建中是个神奇的存在，解决的大多数想要实现的功能。
• 版本1.0，是一个相位一个相位来绘制，即一个相位编写一段Rectangle 的代码，重复率几大，并且牵一发而动全身，后期还要加上增删和手动输入，依靠逻辑来编写实在复杂，拓展性极差，不易维护，而且耗时很大，一不小心就出现bug，因此，选择动态加载开发了版本2.0，用技术来改变复杂的逻辑（当然，每个想要实现的功能无论用哪种实现方式都有其逻辑，只是复不复杂罢了，能不能优化罢了）

走弯路就像是旅行一样，目的地是一样的，弯路虽然耗费了更多的时间和精力，但是也收获了不一样的风景，拓展了知识面。