Я широко использую такие элементы GUI, и подход всегда состоит в том, чтобы представлять дерево в виде списков списков, то есть, в зависимости от случая использования, либо ListView, либо обычный Repeater со строкой илиКонтейнер столбца внутри Flickable, а затем это просто вложение делегата.
Запас TreeView может также сократить его, если вам не нужен доступ для тонкой настройки и настройки представления.
Я лично столкнулся со слишком большой жесткостью со многими из средств управления запасами, они просто не работают так, как мне нужно, или совершенно не нужной функциональности, и если это не что-то действительно стандартное, яЯ предпочитаю использовать мои собственные реализации, что на самом деле довольно просто в QML.
Обновление:
Хорошо, теперь, когда вы предоставили пример источника данных, я могу сделать базовый макетдля тебя.Кстати, вам не хватает некоторых запятых в JSON, и даже если в моем примере он определен как in-line, вы можете просто использовать JSON.parse(text), чтобы получить тот же объект из строки.Также обратите внимание, что modelData в каждой вложенной модели относится к разному объекту данных, в основном к соответствующему индексу элемента массива.А поскольку только в одном из ваших массивов имеется более одного элемента, в целях краткости пример пропускает один уровень:
Window {
visible: true
width: 640
height: 480
title: qsTr("Hello World")
property var jsondata: {
"SequenceHistory": [
{
"Definition": {
"ID": "carriage_strength",
"DisplayName": "Carriage Strength",
"TestArray": [
{
"ID": "sequence_one_setup",
"DisplayName": "Sequence 1 Setup",
"TestArray": [
{
"ID": "psm1_carriage_strength",
"DisplayName": "PSM1 Carriage Strength",
"Progress": 100,
"HtmlToDisplay": "<html><body>This is guide instruction</body></html>",
"Status": "Finish Failed"
},
{
"ID": "psm2_carriage_strength",
"DisplayName": "PSM2 Carriage Strength",
"Progress": 43,
"HtmlToDisplay": "<html><body>This is guide instruction</body></html>",
"Status": "In Progress"
},
{
"ID": "psm3_carriage_strength",
"DisplayName": "PSM3 Carriage Strength",
"Progress": 0,
"HtmlToDisplay": "<html><body>This is guide instruction</body></html>",
"Status": "Not Started"
},
{
"ID": "psm4_carriage_strength",
"DisplayName": "PSM4 Carriage Strength",
"Progress": 0,
"HtmlToDisplay": "<html><body>This is guide instruction</body></html>",
"Status": "Not Started"
}
],
},
],
}
}
]
}
ListView {
id: rv
anchors.fill: parent
model: jsondata.SequenceHistory
delegate: Rectangle {
width: rv.width
height: childrenRect.height // fit the expanding part
color: "grey"
Column {
spacing: 2
Row {
spacing: 10
Button {
id: exp
checkable: true
text: checked ? "+" : "-"
implicitWidth: 20
implicitHeight: 20
}
Text {
text: modelData.Definition.DisplayName
anchors.verticalCenter: parent.verticalCenter
}
}
Column {
x: 20
spacing: 2
Repeater {
// if not expanded model is null else skip one level
model: exp.checked ? 0 : modelData.Definition.TestArray[0].TestArray
delegate: Rectangle {
width: rv.width
height: childrenRect.height
color: "lightgrey"
Column {
Row {
spacing: 10
Button {
id: exp2
checkable: true
text: checked ? "+" : "-"
implicitWidth: 20
implicitHeight: 20
}
ProgressBar {
value: modelData.Progress
from: 1
to: 100
anchors.verticalCenter: parent.verticalCenter
}
Text {
text: modelData.DisplayName
anchors.verticalCenter: parent.verticalCenter
}
}
Column {
visible: exp2.checked // hide if not expanded
TextArea {
width: 300
height: 200
text: modelData.HtmlToDisplay
}
}
}
}
}
}
}
}
}
}
И результат:
Обратите внимание, что вы также можете разделять вещи на части, распределяя делегатов по разным источникам, потому что по мере того, как вы определяете их свойства, они будут увеличиваться.Я поместил это в один источник только для примера.