Qt Quick 2 中 TableViewColumn 的 TableView 替换答案

【问题标题】：TableView replacement for TableViewColumn in Qt Quick 2Qt Quick 2 中 TableViewColumn 的 TableView 替换
【发布时间】：2020-10-17 13:56:47
【问题描述】：

在 Qt Quick Controls 1 中，我们可以使用 TableViewColumn 设置模型中不同列的样式：

TableView {

    anchors.fill: parent

    TableViewColumn {title: "1"; role: "one"; width: 70 }
    TableViewColumn {title: "2"; role: "two"; width: 70   }
    TableViewColumn {title: "3"; role: "three"; width: 70 }

    model: theModel

}

如果TableView 没有更多的TableViewColumn，我们如何在 Qt Quick 2 中获得类似的结果？

【问题讨论】：

标签： qt qml qtquick2 qtquickcontrols2 qtquickcontrols

【解决方案1】：

从 Qt 5.12 开始，您可以使用 TableView QML 类型。但是要拥有您想要的一切，您需要包含Qt.labs.qmlmodels。这一切都在 Qt 5.15 中可用（使用online installer）。

实际实施几乎不取决于您的要求，但这里有一个如何完成的示例。

假设您将使用TableView 以 JSON 格式显示您拥有的一些数据。在这种情况下，TableModel 将是一个完美的选择，因为它设计用于处理 JavaScript/JSON 数据，其中每一行都是一个简单的密钥对对象，而无需在 C++ 中创建自定义的 QAbstractTableModel 子类。
您需要使用TableModelColumn 声明模型中需要包含哪些列，例如：TableModelColumn { display: "checked" }。
要将真实数据加载到模型中，请使用其rows 属性；数据应该是行数组的形式，例如：

rows: [
        // Each property is one cell/column.
        {
          checked: false,
          amount: 1,
          type: "Apple",
          price: 1.50
        },
        {
          checked: true,
          amount: 4,
          type: "Orange",
          price: 2.50
        },
        ...
      ]

这里最有趣的部分是委托的应用——这里是DelegateChooser，因为它允许视图对模型中不同类型的项目使用不同的委托。所以在这里你几乎可以做任何事情来调整你的细胞。例如：您可以使用ProgressBar 组件作为单元格的代表：

DelegateChoice {
  column: 1
  delegate: ProgressBar {
    enabled: false
    width: 100
    from: 0.0
    to: 10.0
    value: model.display
  }
}

因此，您可以轻松地完全在 QML 中获取此应用程序（需要使用 C++ 和/或旧的 QtQuick.Controls）：

请参考this repository获取完整申请。

【讨论】：

感谢您的出色回答。我发现DelegateChooser 正是我想要的。