Qml Console - 技术栈

动机：qmlconsole类似于chrome浏览器的devtool。用于运行时调试qml代码。用javascript控制台，执行指令。包括本软件提供的内置函数。

本项目整合到KTL项目上。但是KTL使用的QT版本为5.14。而qt6兼容的qt5，是特指5.15。5.15是专门兼容6.3的。所以KTL工具不支持。但是qmlconsole在基于>5.15的平台下使用，可以支持。

内置函数。封装在一个QtCpp类 。提供exec ，同步执行的函数，让qml 去执行c++ 代码。exec函数使用sendMessage函数原型。所有新函数通过message来扩展。无须moc。exec函数位于最外层组件，所以提供一个expr函数，可以指定一个对象，在内层组件去执行表达式。

内置消息有几大类。

"object."，对应QObject，相关的c++调用。

"context."，对应QQmlContext相关的c++调用。

"engine."，对应QQmlEngine相关的c++调用。

"whatis"，一个指令查看一个QObject对象的继承关系，

"parents"，一个指令查看一个对象的所有parent。

"context"，查看一个QQuickItem相关的QQmlContext。

"contexts"，查看一个QQuickItem相关的QQmlContext，并且所有父级的QQmlContext。

控制台函数。

pprint()，将一个数组或对象的属性，按行打印。

findId()，可以对一个内层组件通过id查找对象，并且可以通过类名获取singleton对象。

hire()，查看Item的组织结构。

hire(a) ，第一层，hire(a, 0, 0, 0) ，相当于 a $0$ $0$ $0$ 。结尾参数为-1，返回Item，而不是打印children。当结尾参数为-2时，另外还会对返回的Item，显示区域mask。

baseUrls()，可以查看一个Item所在的qml文件。

deepChildren()，这是一个帮助在c++层，查看children。因为在qml，并非所有对象都有children属性。而且有些框架的实现，视图树结构不根于RootItem。

deepItemChildren()，是将deepChildren()过滤掉非QQuickItem，只留QQuickItem。

maskItem()，将一个Item，用一个mask层显示出来。如果新建了一个窗口，需要将overlayMask.parent指向这个窗口的RootItem。

loadQml()，加载一个qml文件进行调试，效果同"加载..."按钮。加载后在qmlLoader.item。通过qmlContainer.setPreferredWidth()调整加载区的宽度。

控制台输入。

提供两种方式，单行命令，多行文本输入。

单行命令，支持自动完成提示。只可以执行javascript。

多行文本输入，既支持javascript执行，也支持创建Item。可以利用创建Item，潜入内层组件从而再执行javascript。

下面介绍调试，TaoQuick, Industrial，MaterialUI，FluentUI组件库。

这几个组件库的例子都需要编译程序。下面的例子是直接去调试qml源文件，在缺少必要exe设置的环境的情况下，如何用qmlconsole将环境设置弄好。例如qmlconsole提供UrlInterpreter，将qrc资源路径直接拦截重定向到本地源文件。经过一番努力后，终于将FluentUI在5.14的环境下编译完成。

如果要调试组件库的例子，请在控制台的加载按钮：

TaoQuick，请加载samples/TaoQuickShow/Qml/main.qml

复制代码

 1 import QtQuick 2.14
 2 import TaoQuick 1.0
 3 
 4 Item{
 5 id:trans
 6 property string transString: ""
 7     Component.onCompleted: {
 8         var _ = expr(qmlLoader.item, 'Qt.resolvedUrl(".")');
 9 
10         exec('context.setProperty', context, 
11         {trans:trans, 
12         imgPath:_ + '../Image/', 
13         contentsPath:_ + '../Contents/',
14         hasShape:1})
15     }
16    
17     CusButton {
18       Component.onCompleted: {
19          var innerObj = hire(this, 2); // BasicText
20          CusConfig.imagePathPrefix = exec('context.resolvedUrl', innerObj, '.') + '../../Images/'
21       }
22     }
23 }

并且执行

Industrial，请加载samples/Industrial/Main.qml

复制代码

 1 import QtQuick 2.14
 2  import Industrial.Controls 1.0
 3 Button {
 4     Component.onCompleted: {
 5       var _ = exec('context.resolvedUrl', hire(this, 0, -1), '.');
 6       var ret = exec('engine.addUrlInterceptor', this, ['qrc:/icons/', _ + '../icons/']);
 7       console.log(_ + '../icons/');
 8       console.log(ret);
 9     }
10 }

并且执行

FluentUI，请加载samples/FluentUI/qml/winodw/MainWinodw.qml

复制代码

 QtObject {
    Component.onCompleted: {
        var a = qmlLoader.item.contentItem;
        var c = exec('contexts', hire(a, 0, -1))
        var _ = exec('context.resolvedUrl', c[1], '.');
        var ret = exec('engine.addUrlInterceptor', this, ['qrc:/example/', _ + '../../']);
        console.log(_ + '../../');
        console.log(ret);
    }
 }

并且执行

如果使用的组件库的话：

import TaoQuick 1.0

import Industrial 1.0

import FluentUI 1.0

用qmlconsole分析组织结构

用findElementByType，找出目标。hire查看组织结构，并mask显示目标。使用traceCursor，追踪鼠标点击的Item。用baseUrls查看，目标Item的源文件路径。等。

鼠标追踪traceCursor的使用。跟踪鼠标点击事件，当anime属性为1时，有动画效果。当配合ctrl点击时，测试target属性的满足点击位置的子Item，并打印在控制台。

动态创建Item

动态创建3D shader。

整合在KTL工具

https://github.com/bbqz007/KTL/releases。需要下载 KTL-v0.9.3 以及 patch.qml.7z。