Qt Quick 2 中 TableViewColumn 的 TableView 替换

Question

在 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 中实现类似的结果？

Answer 1

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

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

假设您要使用 TableView 来显示一些 JSON 格式的数据。在这种情况下，TableModel 将是一个完美的选择，因为它设计用于处理 JavaScript/JSON 数据，其中每一行都是一个简单的 key-pair 对象无需在 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, since it allows a view to use different delegates for different types of items in the model. So here you can do almost everything to tweak your cells. E.g.: you can use ProgressBar 组件作为单元格的委托：

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

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

请参阅this repository以获得完整的应用程序。

Qt Quick 2 中 TableViewColumn 的 TableView 替换

TableView replacement for TableViewColumn in Qt Quick 2

qt

qml

qtquick2

qtquickcontrols

qtquickcontrols2