跳到主要内容

数据表 DataTable

一个 Material Design 数据表。

示例​

实时例子

一个简单的 DataTable​

import flet as ft

def main(page: ft.Page):
    page.add(
        ft.DataTable(
            columns=[
                ft.DataColumn(ft.Text("姓氏")),
                ft.DataColumn(ft.Text("名字")),
                ft.DataColumn(ft.Text("年龄"), numeric=True),
            ],
            rows=[
                ft.DataRow(
                    cells=[
                        ft.DataCell(ft.Text("John")),
                        ft.DataCell(ft.Text("Smith")),
                        ft.DataCell(ft.Text("43")),
                    ],
                ),
                ft.DataRow(
                    cells=[
                        ft.DataCell(ft.Text("Jack")),
                        ft.DataCell(ft.Text("Brown")),
                        ft.DataCell(ft.Text("19")),
                    ],
                ),
                ft.DataRow(
                    cells=[
                        ft.DataCell(ft.Text("Alice")),
                        ft.DataCell(ft.Text("Wong")),
                        ft.DataCell(ft.Text("25")),
                    ],
                ),
            ],
        ),
    )

ft.app(target=main)

一个带样式的 DataTable​

import flet as ft

def main(page: ft.Page):
    page.add(
        ft.DataTable(
            width=700,
            bgcolor="yellow",
            border=ft.border.all(2, "red"),
            border_radius=10,
            vertical_lines=ft.border.BorderSide(3, "blue"),
            horizontal_lines=ft.border.BorderSide(1, "green"),
            sort_column_index=0,
            sort_ascending=True,
            heading_row_color=ft.colors.BLACK12,
            heading_row_height=100,
            data_row_color={"hovered": "0x30FF0000"},
            show_checkbox_column=True,
            divider_thickness=0,
            column_spacing=200,
            columns=[
                ft.DataColumn(
                    ft.Text("Column 1"),
                    on_sort=lambda e: print(f"{e.column_index}, {e.ascending}"),
                ),
                ft.DataColumn(
                    ft.Text("Column 2"),
                    tooltip="This is a second column",
                    numeric=True,
                    on_sort=lambda e: print(f"{e.column_index}, {e.ascending}"),
                ),
            ],
            rows=[
                ft.DataRow(
                    [ft.DataCell(ft.Text("A")), ft.DataCell(ft.Text("1"))],
                    selected=True,
                    on_select_changed=lambda e: print(f"row select changed: {e.data}"),
                ),
                ft.DataRow([ft.DataCell(ft.Text("B")), ft.DataCell(ft.Text("2"))]),
            ],
        ),
    )

ft.app(target=main)

DataTable 属性​

bgcolor​

表格的背景色。

border​

表格的边框。一个 ft.Border 类的实例。

有关更多信息和示例，请参见 Container.border 属性。

border_radius​

边角的圆角大小。

有关更多信息和示例，请参见 Container.border 属性。

checkbox_horizontal_margin​

显示复选框时，复选框的水平边距。

column_spacing​

每个数据列之间的水平边距。

columns​

描述表格列的 DataColumn 控件的列表。

data_row_color​

数据行的背景色。

背景色可以基于 MaterialState 状态进行设置，例如选择的行、按下的行、悬停的行、聚焦的行、禁用的行或启用的行。颜色会作为一层覆盖在行上。为确保行的 InkWell 可见（当按下、悬停和聚焦时），建议使用半透明的背景色。

有关更多信息，请参见 Checkbox.fill_color 属性。

data_row_min_height​

每行的最小高度（不包括包含列标题的行）。

data_row_max_height​

每行的最大高度（不包括包含列标题的行）。

data_text_style​

数据行的文本样式。ft.TextStyle 类的一个实例。

divider_thickness​

divider_thickness属性用于设置TableRow之间的分隔线的宽度。

该值必须大于或等于零，默认值为1.0。

gradient​

gradient属性用于设置表格的背景渐变效果。

详细信息和示例请参阅Container.gradient属性。

heading_row_color​

heading_row_color属性用于设置表头行的背景颜色。

可以根据MaterialState状态来确定有效的背景颜色，例如当行被按下、悬停、聚焦或排序时。颜色将作为覆盖层绘制在行上。为了确保行的InkWell在被按下、悬停和聚焦时可见，建议使用半透明的颜色。

详细信息和示例请参阅Checkbox.fill_color属性。

heading_row_height​

heading_row_height属性用于设置表头行的高度。

heading_text_style​

heading_text_style属性用于设置表头行的文本样式，是ft.TextStyle类的实例。

horizontal_lines​

horizontal_lines属性用于设置行之间的水平线的颜色和宽度，是ft.BorderSide类的实例。

horizontal_margin​

horizontal_margin属性用于设置表格边缘与每行第一个和最后一个单元格内容之间的水平边距。

当显示复选框时，它也是复选框与第一列数据内容之间的边距。

rows​

rows属性是一个包含DataRow控件的列表，用于定义表格的行。

show_bottom_border​

show_bottom_border属性用于控制是否显示表格底部的边框。

默认情况下，不显示底部边框，以便允许使用装饰定义的表格周围的边框。

show_checkbox_column​

show_checkbox_column属性用于控制是否在可选择的行上显示复选框。

如果设置为True，则在每个可选择的行的开头将放置一个复选框。但是，如果没有为任何行设置DataRow.on_select_changed，即使该值为True，也不会放置复选框。

如果设置为False，所有行都不会显示复选框。

sort_ascending​

sort_ascending属性用于设置是否按升序对sort_column_index指定的列进行排序。

如果为True，则按升序排序（即当前排序列的最小值的行首显示）。

如果为False，则按降序排序（即当前排序列的最大值的行首显示）。

sort_column_index​

sort_column_index属性用于指定当前主排序键的列。

如果指定了该属性，则表示按照指定的列对数据进行排序。该数字必须对应于columns中相关列的索引。

设置该属性将导致显示相关列的排序指示器。

当该属性为None时，表示表格的排序顺序与任何列都不对应。

vertical_lines​

vertical_lines属性用于设置列之间的垂直线的颜色和宽度，是ft.BorderSide类的实例。

DataTable事件​

on_select_all​

当用户在表头行中使用复选框选择或取消选择所有行时调用。

如果该属性为None，则会适当地调用表格中每行的DataRow.on_select_changed回调函数。

要控制特定行是否可选择，请参阅DataRow.on_select_changed。只有在任何行可选择时，此回调函数才有效。

DataColumn​

DataTable的列配置。

对于要在表格中显示的每一列，都必须提供一个列配置。

label​

列的标题。

通常情况下，这将是一个Text控件。也可以是一个Icon（通常使用大小为18的图标），或者是一个包含图标和文本的Row。

numeric​

该列是否表示数值数据。

包含数值数据的列的单元格内容将右对齐显示。

tooltip​

列标题的工具提示。

这是列标题的详细描述，用于在列宽需要保持合理大小的情况下进行缩写。

DataColumn事件​

on_sort​

当用户要求使用该列对表格进行排序时调用。

如果未设置，该列将不可排序。

DataRow​

DataTable的行配置和单元格数据。

对于要在表格中显示的每一行，都必须提供一个行配置。

该行的数据在DataRow对象的cells属性中提供。

cells​

该行的数据 - 一个包含DataCell控件的列表。

列表中的单元格数量必须与表格中的列数完全相同。

color​

该行的颜色。

默认情况下，颜色是透明的，除非被选中。被选中的行具有灰色的半透明颜色。

有效的颜色可以根据MaterialState状态来确定，例如行是否被选中、按下、悬停、聚焦、禁用或启用。颜色将作为覆盖层绘制在行上。为了确保行的InkWell在被按下、悬停和聚焦时可见，建议使用半透明的颜色。

详细信息和示例请参阅Checkbox.fill_color属性。

selected​

该行是否被选中。

如果任何行的on_select_changed回调函数不为null，则在每行的开头显示一个复选框。如果行被选中（True），复选框将被选中并且行将被突出显示。

否则，如果存在复选框，复选框将不被选中。

DataRow事件​

on_long_press​

如果长按了该行，则调用此回调函数。

如果行中的DataCell定义了DataCell.on_tap、DataCell.on_double_tap、DataCell.on_long_press、DataCell.on_tap_cancel或DataCell.on_tap_down回调函数，那么该回调函数将覆盖该行的手势行为。

on_select_changed​

当用户选择或取消选择可选择的行时调用。

如果此属性不为null，则行是可选择的。行的当前选择状态由selected属性确定。

如果有任何可选择的行，则表格的标题行将有一个复选框，可以选中所有可选择的行（如果所有行都被选中，则复选框将被选中），每个后续行都将有一个复选框以切换该行的选择状态。

如果行的on_select_changed回调为null，则不考虑该行以确定“全部”复选框的状态，并且其复选框将被禁用。

如果行中的DataCell具有定义了DataCell.on_tap回调的情况，那么该回调行为将覆盖该行的手势行为，仅对该特定单元格有效。

DataCell​

DataTable中单元格的数据。

对于DataTable中的每个DataRow，必须提供一个DataCell对象列表。

content​

单元格的数据。

通常是一个Text控件或一个Dropdown控件。

如果单元格没有数据，则应提供一个带有占位文本的Text小部件，并将placeholder设置为True。

此控件只能有一个子控件。要布局多个子控件，请将此控件的子控件设置为诸如Row、Column或Stack之类的小部件，这些小部件具有controls属性，然后将子控件提供给该小部件。

placeholder​

子控件是否为占位符。

如果为True，则单元格的默认文本样式将更改为适用于占位符文本的样式。

show_edit_icon​

是否在单元格末尾显示编辑图标。

这不会使单元格实际可编辑；如果需要，调用方必须实现编辑行为（从on_tap回调开始）。

如果设置了此属性，还应设置on_tap，否则点击图标将没有效果。

DataCell事件​

on_double_tap​

当双击单元格时调用。

如果非空，则点击单元格将调用此回调函数。如果为空（包括on_tap、on_long_press、on_tap_cancel和on_tap_down），则点击单元格将尝试选择行（如果提供了DataRow.on_select_changed）。

on_long_press​

如果长按单元格，则调用此回调函数。

如果非空，则点击单元格将调用此回调函数。如果为空（包括on_double_tap、on_tap、on_tap_cancel和on_tap_down），则点击单元格将尝试选择行（如果提供了DataRow.on_select_changed）。

on_tap​

如果点击单元格，则调用此回调函数。

如果非空，则点击单元格将调用此回调函数。如果为空（包括on_double_tap、on_long_press、on_tap_cancel和on_tap_down），则点击单元格将尝试选择行（如果提供了DataRow.on_select_changed）。

on_tap_cancel​

如果用户取消了在单元格上开始的点击操作，则调用此回调函数。

如果非空，则取消点击手势将调用此回调函数。如果为空（包括on_tap、on_double_tap、on_long_press），则点击单元格将尝试选择行（如果提供了DataRow.on_select_changed）。

on_tap_down​

如果按下单元格，则调用此回调函数。

如果非空，则点击单元格将调用此回调函数。如果为空（包括on_tap、on_double_tap、on_long_press和on_tap_cancel），则点击单元格将尝试选择行（如果提供了DataRow.on_select_changed）。