如何实现Flet中DataTable的横向与纵向双向滚动

问题原因 #

当你直接将DataTable放入设置了horizontal=True的ListView时，该容器只会处理横向滚动事件，纵向的滚动逻辑会被拦截，因此无法同时实现双向滚动；而仅用普通纵向ListView时，又无法处理横向溢出的列内容。

解决方案：嵌套滚动容器 #

通过嵌套两个不同滚动方向的SingleChildScrollView（专门用于单个子组件的滚动容器），分别处理横向和纵向的滚动需求，这是最简洁且直观的实现方式：

import flet as ft

def main(page: ft.Page):
    # 构造测试用DataTable
    dt = ft.DataTable(
        columns=[
            ft.DataColumn(ft.Text("First name")),
            ft.DataColumn(ft.Text("Last name")),
            ft.DataColumn(ft.Text("Age"), numeric=True),
            ft.DataColumn(ft.Text("First name")),
            ft.DataColumn(ft.Text("Last name")),
            ft.DataColumn(ft.Text("Age"), numeric=True),
            ft.DataColumn(ft.Text("First name")),
            ft.DataColumn(ft.Text("Last name")),
        ],
        rows=[
            ft.DataRow(
                cells=[
                    ft.DataCell(ft.Text("John")),
                    ft.DataCell(ft.Text("Smith")),
                    ft.DataCell(ft.Text("43")),
                    ft.DataCell(ft.Text("John")),
                    ft.DataCell(ft.Text("Smith")),
                    ft.DataCell(ft.Text("43")),
                    ft.DataCell(ft.Text("John")),
                    ft.DataCell(ft.Text("Smith")),
                ],
            ),
            ft.DataRow(
                cells=[
                    ft.DataCell(ft.Text("Jane")),
                    ft.DataCell(ft.Text("Doe")),
                    ft.DataCell(ft.Text("28")),
                    ft.DataCell(ft.Text("Jane")),
                    ft.DataCell(ft.Text("Doe")),
                    ft.DataCell(ft.Text("28")),
                    ft.DataCell(ft.Text("Jane")),
                    ft.DataCell(ft.Text("Doe")),
                ],
            ),
            # 添加多行测试纵向滚动
            ft.DataRow(cells=[ft.DataCell(ft.Text(f"Row {i+1}")) for i in range(8)]),
            ft.DataRow(cells=[ft.DataCell(ft.Text(f"Row {i+1}")) for i in range(8)]),
            ft.DataRow(cells=[ft.DataCell(ft.Text(f"Row {i+1}")) for i in range(8)]),
            ft.DataRow(cells=[ft.DataCell(ft.Text(f"Row {i+1}")) for i in range(8)]),
        ],
    )

    # 内层横向滚动容器：处理列溢出的横向滚动
    horizontal_scroll = ft.SingleChildScrollView(
        scroll_direction=ft.ScrollDirection.HORIZONTAL,
        child=dt
    )

    # 外层纵向滚动容器：处理行溢出的纵向滚动，设置expand=1占满页面空间
    vertical_scroll = ft.SingleChildScrollView(
        expand=1,
        scroll_direction=ft.ScrollDirection.VERTICAL,
        child=horizontal_scroll
    )

    page.add(vertical_scroll)

ft.app(target=main)

替代方案：嵌套ListView #

如果你更习惯使用ListView，也可以用嵌套的方式实现，逻辑和上面一致：

# 内层横向ListView
horizontal_list = ft.ListView(
    horizontal=True,
    spacing=0,
    padding=0,
    controls=[dt]
)

# 外层纵向ListView
vertical_list = ft.ListView(
    expand=1,
    padding=20,
    spacing=10,
    controls=[horizontal_list]
)

page.add(vertical_list)

关键说明 #

• 外层滚动容器需要设置expand=1，确保它能占满可用页面空间，触发滚动条件。
• 内层横向滚动容器不要设置expand，避免它强制占满高度，影响纵向滚动的触发。

内容的提问来源于stack exchange，提问作者Ahmed Adel