Flutter 表格

17 Mar 2025 | 4 分钟阅读

表格允许用户将数据排列成行和列。它用于以结构化格式存储和显示数据,这有助于我们轻松比较相关值对。

Flutter 也允许用户在移动应用程序中创建表格布局。我们可以使用 Table widget 在 Flutter 中创建一个表格,该 widget 使用表格布局算法处理其子项。该 widget 具有多个属性来增强或修改表格布局。这些属性有:边框、子项、列宽、文本方向、文本基线等。

什么时候使用 Table widget?

当我们需要存储具有相同列宽的多行,并且每个列(表格)都包含相同的数据时,可以使用表格 widget。 Flutter 提供了另一种使用 GridView widget 实现相同目的的方法。

要创建表格,我们必须使用以下内容

  1. 首先,我们需要在 body 中添加一个 Table widget
  2. 接下来,我们必须在 table widget 的 子项 中添加 TableRow(s)。由于 table widget 有多行,所以我们使用子项,而不是 child。
  3. 最后,我们需要在 TableRow widget 的子项中添加 TableCell(s)。现在,我们可以在这个位置编写任何 widget,就像我们要使用 Text widget 一样。

在使用这个 widget 时,我们必须知道这些规则

  1. 此 widget 会自动决定列宽,列宽在 TableCells 之间平均分配。如果不相等,我们会收到一个错误,提示表格中的每个 TableRow 必须具有相同数量的子项,以便每个单元格都被填充。否则,表格将包含空洞。
  2. 每行具有相同的高度,该高度将等于 TableCell 的最大高度。
  3. 表格的子项只能包含 TableRow widgets。

让我们通过下面给出的一个例子来理解它,我们试图涵盖与该 widget 相关的每件事

输出

当我们在模拟器或设备中运行该应用程序时,我们将看到下面的屏幕截图

Flutter Table

Flutter DataTable

Flutter 还允许我们使用另一个 widget 在我们的应用程序中创建一个表格,名为 DataTable widget。它是一个 Material Design 数据表,我们可以在其中显示带有 列标签和行 的数据。该 widget 会根据单元格数据自动调整表格的列。使用此 widget 显示数据的成本很高,因为在这里,所有数据都必须测量两次。首先,它测量每个列的尺寸,其次,它实际上布局表格。因此,我们必须确保仅当我们的行数较少时才能使用此 widget。

DataTable widget 使用 列和行属性 存储信息。列属性使用 DataColumn 数组包含数据,行属性使用 DataRow 数组包含信息。 DataRow 具有子属性 cells,它接受一个 DataCell 数组。 DataColumn 具有一个子属性 label,它接受 widget 作为 value。我们还可以在 DataTable 中提供 Text、Image、Icon 或任何其他 widget。

以下是 DataTable 的语法

示例

让我们了解如何在 Flutter 应用程序中使用 DataTable。在这里,我们将定义一个简单的数据表,它有 三个列标签和四行

输出

当我们在模拟器或设备中运行该应用程序时,我们将看到下面的屏幕截图

Flutter Table
下一主题Flutter 日历