Qt Quick 2 中 TableViewColumn 的 TableView 替换

Posted 2023-02-16

【中文标题】Qt Quick 2 中 TableViewColumn 的 TableView 替换

【英文标题】：TableView replacement for TableViewColumn in Qt Quick 2

【发布时间】：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 中获得类似的结果？

【参考方案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 正是我想要的。