Qt QML应用框架

灰太狼 2023-01-01 05:47 601阅读 0赞

### Qt QML应用框架 ###

*  1 介绍
 *   *  1.1 QML开发人员少分析
     *  1.2 QML带来前后端概念，与安卓web开发框架看齐
 *  2 网上一些架构思路
 *   *  2.1 多层架构
     *   *  2.1.1 来源
         *  2.1.2 多层架构的介绍
         *  2.1.3 多层架构调整为Qt APP架构
     *  2.2 Qt跨平台开发
     *  2.3 withFlux
 *  3 自己思考
 *  参考

# 1 介绍 #

## 1.1 QML开发人员少分析 ##

Qt开发更多的是跨平台，嵌入式，整体来说，这方向人不多，在此基础上，用QML的着实少。Qt是一套框架，Qt开发本质也是C++开发。搞QML开发少，博主觉得一方面是C++开发看不上QML开发，一方面是怕搞QML开发弱化自己的C++能力。就如博主目前手头开发的项目，总代码量在5万行多，自己独立写的，C++部分比QML代码多，其中C++部分不与HMI直接交互的都是Unix C++，与HMI交互的才用Qt的C++类，界面使用QML。一方面是采用Flux架构把核心业务逻辑部分能分离出来，不依赖Qt，后续可单独维护。另一方面怕自己的Unix C++开发能力弱化。

## 1.2 QML带来前后端概念，与安卓web开发框架看齐 ##

Qt开发初期，只有UI部分使用QWidget技术。该阶段，极少提出前后端、全栈概念。QML引入后，使得Qt开发有了前后端的概念。然后网上就有将Qt的C++逻辑开发称为后端开发，QML界面部分开发称为前端开发。  
传统的前后端开发的框架，也就引入了Qt开发中。如Facebook的Flux架构、Twitter的Bootstrap框架。

*  Flux工作流程图  
    ![在这里插入图片描述][watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3FxXzM4ODgwMzgw_size_16_color_FFFFFF_t_70]
 *  Bootstrap框架图  
    ![在这里插入图片描述][watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3FxXzM4ODgwMzgw_size_16_color_FFFFFF_t_70 1]

# 2 网上一些架构思路 #

## 2.1 多层架构 ##

### 2.1.1 来源 ###

[A Multilayered Architecture for Qt Quick][]

### 2.1.2 多层架构的介绍 ###

多层架构，各层职责明确，利于高内聚低耦合。  
经典层如下：

*  表示层：可见的用户界面
 *  服务层：进程间通信，前端/后端桥等。
 *  业务逻辑层：领域知识，业务规则等
 *  数据访问层：数据库，网络，文件等

### 2.1.3 多层架构调整为Qt APP架构 ###

借鉴上述经典层，进行稍加修改。便可作为Qt app框架用：  
![在这里插入图片描述][20210101194122272.png]  
该架构可轻松分离UI，便于UI切换（如切换为进程内Qt，远程进程Qt，远程HTML）。

## 2.2 Qt跨平台开发 ##

程序原型简单，用户界面响应越快  
文件挂载网关上，从网关上加载

## 2.3 withFlux ##

QML Application Architecture Guide with Flux

# 3 自己思考 #

归纳出相同重复的，然后设计。

# 参考 #

1、[A Multilayered Architecture for Qt Quick][]  
2、[Qt qml的软件架构设计][Qt qml]  
3、[Ben Lau–QML Application Architecture Guide with Flux][Ben Lau_QML Application Architecture Guide with Flux]  
4、[Ben Lau–Revised QML Application Architecture Guide with Flux][Ben Lau_Revised QML Application Architecture Guide with Flux]  
5、[Ben Lau–Using Action-Dispatcher in QML][Ben Lau_Using Action-Dispatcher in QML]  
6、[How to Avoid C++ Models in Qt and Why You Should Care][How to Avoid C_ Models in Qt and Why You Should Care]  
7、[benlau/quickflux][benlau_quickflux]  
8、[Bootstrap框架图][Bootstrap]  
9、[架构进化论][Link 1]  
10、[架构设计的本质][Link 2]

[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3FxXzM4ODgwMzgw_size_16_color_FFFFFF_t_70]: /images/20221120/3afcb5baf20d4c6381c72c0c726ae74c.png
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3FxXzM4ODgwMzgw_size_16_color_FFFFFF_t_70 1]: /images/20221120/63b66a441f3347d49d1b9896c4c29612.png
[A Multilayered Architecture for Qt Quick]: https://www.ics.com/blog/multilayered-architecture-qt-quick
[20210101194122272.png]: /images/20221120/bdf2348c71d94317a7f535c6263e1e27.png
[Qt qml]: https://blog.csdn.net/qq_35865125/article/details/83042954
[Ben Lau_QML Application Architecture Guide with Flux]: https://medium.com/@benlaud/qml-application-architecture-guide-with-flux-b4e970374635
[Ben Lau_Revised QML Application Architecture Guide with Flux]: https://medium.com/e-fever/revised-qml-application-architecture-guide-with-flux-a1de143fe13e
[Ben Lau_Using Action-Dispatcher in QML]: https://medium.com/@benlaud/action-dispatcher-design-pattern-for-qml-c350b1d2a7e7
[How to Avoid C_ Models in Qt and Why You Should Care]: https://blog.felgo.com/cross-platform-app-development/avoid-cpp-models-qt
[benlau_quickflux]: https://github.com/benlau/quickflux
[Bootstrap]: https://www.processon.com/view/5a7ea327e4b024b99bf88688
[Link 1]: https://www.cnblogs.com/binyue/p/14142528.html
[Link 2]: https://gitchat.csdn.net/activity/5f86639f6effc633014b4b69