对于这个提议 UI，我应该使用什么 Qt Quick Controls？

Question

我对 QML 和 Qt Quick 比较陌生，我正在寻找有关如何在此处显示 UI 的建议：

此 UI 是使用 QGraphicWidgets 使用 Json 作为模型制作的：

如果你注意到，外面的"Carriage Strength"容器基本上是一个树结构。树视图列表似乎是可行的方法，但我不确定是否可以自定义视图以包含进度条和 html 视图 (QWebEngineView)。我还需要能够在运行时更新特定组件，例如进度条。

任何输入都是有帮助的。如果您有任何示例可以指出，那也很好。提前致谢。

根据下面的要求，这里是 JSON 的样本，将用于构建模型：

{ 
 "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"
                            }
                        ],
                    },

                ],
            }

    }

    ]
}

display name表示名称，progress表示进度条百分比，html表示在WebEngineView中显示的html，status表示状态标签。忽略屏幕截图中但不在 JSON 中的任何计时信息。这个 JSON 和屏幕截图的主要区别是我在 Carriage Strength 容器中添加了一个容器 "Sequence 1 Setup" 以显示容器可以包含容器和项目。

Answer 1

我广泛使用了这样的 GUI 元素，方法总是将树表示为列表的列表，也就是说，根据用例，可以是 ListView 也可以是普通的 Repeater 在 Flickable 中使用行或列容器，然后它只是委托嵌套。

库存 TreeView 如果您不需要微调和自定义视图的访问权限，也可以削减它。

我个人运行对许多库存控件过于僵硬，它们只是不能按照我需要的方式工作，或者完全缺乏所需的功能，除非它真的是什么标准，我更喜欢推出自己的实现，这在 QML 中实际上很容易。

更新：

好的，现在您已经提供了示例数据源，我可以为您做一个基本的模型。顺便说一句，您在 JSON 中缺少一些逗号，即使在我的示例中它是内联定义的，您也可以简单地使用 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
                  }
                }
              }
            }
          }
        }
      }
    }
  }
}

结果：

请注意，您还可以通过将代表分散到不同的来源来划分事物，因为当您设置它们的样式时属性，它们会变得更大。为了示例，我将其放在一个来源中。

对于这个提议 UI，我应该使用什么 Qt Quick Controls？

What Qt Quick Controls should I use for this proposed UI?

qt

user-interface

qml

qtreeview