初探 QML 系列 -- 规划

前言

对于桌面软件开发，常用的 UI 库包括：MFC、 QT、 wxWidget、FLTK 等。如果项目立项初期选择 Qt 的话，有两个大的方向可供选择：QWidget, QML。 在性能方面，两者基本上没有太大差距。 但对于 C++ 开发人员，两种选择都有不小的挑战。对于桌面 App 涉及到的技术点，博主将其分为两类：布局系统 和 其它 。

预备知识

对比 QWidget 和 QML 的布局方式，以对 QT 开发中不可避免的 UI 开发具有基本认识。

• QWidget: 相对布局和绝对布局
  • 相对布局：Layout相关，Alignment相关，Stretch相关，WindowType相关
  • 绝对布局：一个良好设计的 Qt 桌面应用程序，会有 15% 左右的 UI 及交互会通过绝对定位的方式实现
• QML: 更高层次的抽象。结合相关技术，QML 将庞大的布局系统大致分为：
  • 绝对定位：同 QWidget 中的绝对布局。
  • 坐标绑定：相对于绝对定位，增加了动态绑定的功能（性能成本）
  • 锚定位：在各种渲染引擎的 UI 开发中，这种方式被称为 锚点 或 锚框 。博主有两年的 Unity 引擎开发经验~
  • 定位器：通常用于排列，有：Column，Flow，Grid，Row 等
  • 布局管理器：相对于定位器，它可以进行更细致的控制。包括：ColumnLayout，GridLayout，RowLayout，StackLayout 等

简介

目前，博主负责的项目是使用 QWidget，兼顾整理组内的技术积累：生硬 的布局；东拼西凑 的 UI 还原；

为什么不使用 QML?

答案是：资源组内的同学都没有接触过 QML，更没有接触过 QML 强依赖的 JavaScript 脚本语言。

为什么选择写 QML 系列？

• 个人原因
  • 记录学习过程，保证进度和质量
  • 推进组内进度，争取尽快替换现有的 QWidget 技术栈：QWidget 容易被滥用，博主有时也是有心无力~
• 其它原因
  • 由于业务需求的增长及其它原因，资源组规模越来越大。这么大的资源组，总要有一些新技术的积累。
  • 对于一些 C++ 开发人员来说， 企业级（像素级）的 QWidget 开发比较难, 且不好约束。
  • 相对来说，QML 更能做到前后端分离，更能提高开发效率（如果同时掌握 QWidget 和掌握 QML，QML 开发能节省 50% 以上的开发时间）

系列规划

事实上，博主利用周末和空闲时间已经做了些准备工作，且初具成效。后续会针对现有项目开发过程中遇到的未解问题，使用 QML 逐个攻破。近期安排如下：

像素级还原(重构)系列

当你看到这篇文章时，该系列进度已经完成了 60%。至于详细的技术讲解，会有相应的文章陆续放出~

• 重构 QWidget 组件： ImageSlider
ImageSlider 组件经过先后两次的重构后，仍没有解决已知问题。记得，最近一次重构耗时 2w，但实现不尽如人意。
• 重构 QWidget 组件： TitleDock
TitleDock 组件的布局 生硬 ，导致功能扩展受限。随着需求的增长，它的问题越来越严重。
• 重构 QWidget 组件： Size-Adaptable Area
  博主实现的 Adaptable Area 组件本身没有什么问题。在项目中，这种组件应用十分广泛.
• …

专项攻破系列

• QML 数据处理：Model, Delegate
• Quick 框架设计：MVVM 设计模式
• …