在QML中使用TableView动态创建

QML是一种现代的UI语言，可用于为各种平台（如PC，移动设备，嵌入式设备）构建漂亮的用户界面。 TableView是QML元素之一，它提供了一个方便的方式来显示和编辑数据表格。 在此教程中，我们将演示如何使用QML TableView元素动态创建表格并填充数据。

创建QML项目并导入Qt Quick Controls 2

首先，我们需要创建QML应用程序。 在QtCreator中，选择“Qt Quick应用程序”向导，并在下一步中选择基于“空白”模板的项目。 在“Kit Selection”步骤中，请确保选择支持Qt Quick摄像机的“桌面Qt 5.14.0 clang 64bit”套件。

完成向导后，我们需要添加Qt Quick Controls 2到我们的应用程序中。 打开我们的main.qml文件，并在我们的窗口元素中添加以下行：

import QtQuick.Controls 2.15

然后，在我们的窗口元素下方添加一个TableView元素作为主界面:

TableView {
  id: table
  anchors.fill: parent
}

此时，我们的应用程序应该看起来像这样：

表格模型

TableView需要一个模型来渲染数据行和列。 在我们的QML文件中，我们需要创建一个JavaScript对象来模拟我们的数据表。

我们可以简单地使用一个数组，其中每个元素包含表格中的一行数据。 对于此演示，我们将模拟一个名为“people”的表，其中包含每个人的姓名，电子邮件和年龄。

property var people: [
  {name: "John Doe", email: "johndoe@example.com", age: 30},
  {name: "Jane Smith", email: "janesmith@example.com", age: 25},
  {name: "Bob Johnson", email: "bobjohnson@example.com", age: 40},
  {name: "Emily Davis", email: "emilydavis@example.com", age: 35}
]

我们还需要定义表格的列标题。 对于此表，我们将列分别命名为“名称”，“电子邮件”和“年龄”。

readonly property var columns: [
  {title: "名称", property: "name"},
  {title: "电子邮件", property: "email"},
  {title: "年龄", property: "age"}
]

TableView模型

我们需要为TableView元素设置一个model，以便它可以绑定我们的数据。 我们将使用一个自定义模型来显示我们的数据。 为此，在QML文件中，我们将创建一个名为“TableModel”的QML组件：

TableModel {
  id: tableModel
  property var data: []
  property var headerData: []

  function columnCount(parent) {
    return headerData.length
  }

  function rowCount(parent) {
    return data.length
  }

  function data(index, role) {
    if (role === Qt.DisplayRole) {
      return data[index.row][headerData[index.column].property]
    }
  }

  function headerData(section, orientation, role) {
    if (orientation === Qt.Horizontal && role === Qt.DisplayRole) {
      return headerData[section].title
    }
  }
}

该组件包含我们的数据，该组件可用于填充TableView对象。 我们使用两个属性，一个用于持有数据，一个用于列标题。

property var data: []
property var headerData: []

我们将在后面的步骤中添加到这些属性。

我们还定义三个函数：

function columnCount(parent) {
  return headerData.length
}

function rowCount(parent) {
  return data.length
}

function data(index, role) {
  if (role === Qt.DisplayRole) {
    return data[index.row][headerData[index.column].property]
  }
}

• columnCount用于返回列数。
• rowCount用于返回数据行数。
• data用于提供数据和文字的数据模型。 它根据列标题显示匹配的数据值。

我们还需要为列标题提供头函数：

function headerData(section, orientation, role) {
  if (orientation === Qt.Horizontal && role === Qt.DisplayRole) {
    return headerData[section].title
  }
}

为了让TableView使用我们的自定义模型，我们将编辑我们的TableView元素并设置model属性：

TableView {
  id: table
  model: tableModel
  anchors.fill: parent
}

现在TableView由TableModel驱动，本身不再存储数据。 因此，我们需要将人们数据和列标题加载到我们的TableModel中并呈现table：

tableModel.data = people
tableModel.headerData = columns

所有这些都将在onCompleted信号下完成，该信号激活在我们的QML组件完成加载并准备渲染时：

onCompleted: {
  tableModel.data = people
  tableModel.headerData = columns
}

运行该应用程序，您将看到以下内容：

＃＃ 总结

在QML中，使用TableView可以方便地创建和显示数据表格。 通过使用自定义模型，您可以更好地控制如何呈现和编辑数据。 在此示例中，我们使用JavaScript对象作为数据源，并使用TableModel作为数据模型。 现在，您可以使用该示例作为基础，开始在QML应用程序中显示您自己的数据表。