Question

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

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

如果您注意到，外部的“运输强度”容器基本上是树形结构。树视图列表似乎是一种解决方法，但是我不确定是否可以自定义视图以包含进度条和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"
                            }
                        ],
                    },

                ],
            }

    }

    ]
}

显示名称表示名称，进度表示进度条百分比，html表示要在WebEngineView中显示的html，状态表示状态标签。忽略屏幕快照中的任何计时信息，但不忽略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快速控件？

1 个答案: