QtQuick2中TableViewColumn的TableViewColumn替换

Question

在Quick 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

}

如果没有更多的TableViewColumn用于TableView，我们如何在QtQuick2中实现类似的结果？

Answer 1

从QT5.12开始，您可以使用TableView QML类型。但是要想拥有您想要的一切，您需要包含Qt.labs.qmlmodels。所有这些都可以在QT5.15中使用(使用在线安装程序)。

实际的实现很难取决于您的需求，但是下面是一个如何实现的示例。

• 假设您将使用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)：

​

​

请参考这个储存库获得完整的申请。