[QML][JSON] Json可视化页面----用于Json格式的config的可视化及读写

Json可视化页面----用于Json格式的config的可视化及读写

环境:QtQuick QML

参考资料:https://zhuanlan.zhihu.com/p/72414465

参考工程:https://github.com/cjmdaixi/QuickJSONViewer

具体代码实现如下链接:
https://github.com/Asa-gc/SUTL/tree/main/src/qml/view
Notion文档:
https://developing-jasper-8ae.notion.site/Json-For-config-read-edit-3f6ab64921a14534bd87cf7e09968ece

一构想描述:

用于对json进行可视化展示,尽量做到通用,不对需要展示的项目做假设.

1 需求简述

1.1 value类型支持

• 1.1.1 字符串,数值,布尔值(以数值0,1标识)
• 1.1.2 json对象
• 1.1.3 数组

1.2 功能构想

• 1.2.1 各类型展示view.
• 1.2.2一种value类型可对应多种view
• 1.2.3 设定略过指定key的对象的可视化
• 1.2.4 设定指定key的可视化view
• 1.2.5 直接在view编辑操作json
• 1.2.6 字体大小统一调整
• 1.2.7 滑块
• 1.2.8 折叠
• 1.2.9 在view上完成Node的Key的修改
• 1.2.10 在view上完成Node的增删

2 界面样式简述

一个Node基本界面如下,包含key,value及childNodes列表界面,

1. value和childNodes不会同时显示
2. Object对象和array对象不显示Value.
3. string,number和bool对象不显示ChildNodes
4. Array对象的ChildNodes里的node为string,number和bool对象时不显示Key
   

string,number和bool对象显示如下

Array对象及Object对象显示如下

3 qml下代码设计

3.1 模式设计

采用类似 component的模式进行设计

1. 一个json对象视为一个node,node可以嵌套0~多个node;
2. 值为array及object类型的对象为component node,嵌套至少一个node;
3. 值为string、number及bool类型的对象视为leaf node,直接显示值,不能嵌套node;

3.2 qml下Qt Quick组件设计

设计json在界面中各节点显示布局状况

1. 一个node的组件内包含:
   1. 显示key的Text组件;
   2. 显示":"/"+"的Text组件(提供折叠功能);
   3. 显示及编辑value的TextEdit组件;
   4. 显示子对象的ColumnLayout组件
2. 布局方式描述:
   1. 1.a,1.b,1.c部件使用定位器完成横向排列布局.
   2. ColumnLayout组件使用定位器和Key缩进对齐

二 代码实现

代码全部在qml下实现,可直接复制qml使用;主要有两个组件JsonNode和JsonView.

JsonNode

主要显示节点的key和value,value可以是值也可以是对象或者数组

JsonView

对外接口封装,对JsonNode的创建函数等.使用时直接实例化并通过 setJsonStr(_jsonStr) 传入Json字串既可以了

对Json字符串

{"number":0,"string":"str","bool":0,"object":{"number":0,"string":"str","bool":1},"array":[0,"str",1]}

显示如下:

折叠效果如下:

具体代码实现如下链接:

https://github.com/Asa-gc/SUTL/tree/main/src/qml/view