FLET应用中垂直滚动条不显示及组件更新失效问题求助

问题1：垂直滚动条不显示 #

当前代码用Row包裹DataTable并设置scroll='always'，仅能处理横向滚动；同时存放表格的Container没有固定高度，垂直方向无明确边界，导致滚动条无法触发。解决步骤：

• 给表格所在的Container设置固定height，让容器有明确的内容边界。
• 用Column包裹表格的Row，给Column设置scroll='always'处理垂直滚动，保留Row的横向滚动逻辑。

问题2：提交后表格无法更新 #

直接修改普通列表bag_container的元素，Flet控件树无法感知到这种变化，自然不会更新页面。需要通过操作控件的controls属性触发更新：

• 把bag_container替换为实际的Row控件，而非普通列表。
• 在提交函数中直接更新该Row的controls属性，再调用page.update()。

修改后的完整代码 #

import pandas as pd
pd.options.display.max_columns = 100
from services.bag import PCHN
from utils.convertors import dataframe_to_datatable
import flet as ft

def main(page: ft.Page):
    def bag_service(e):
        pc = '9351BP' if postal_code_field.value == '' else postal_code_field.value
        hn = '1' if house_number_field.value == '' else house_number_field.value
        address = PCHN(pc, hn).result
        # 直接更新Row控件的controls属性
        bag_table_row.controls = [dataframe_to_datatable(address)]
        page.update()

    # 定义表单字段
    postal_code_field = ft.TextField(label='Postal code')
    house_number_field = ft.TextField(label='House number')
    submit_button = ft.ElevatedButton(text='Submit', on_click=bag_service)

    # 初始化表格和滚动容器
    address = PCHN('9351BP', '1').result
    bag_table = dataframe_to_datatable(address)
    # 创建Row控件负责横向滚动
    bag_table_row = ft.Row([bag_table], scroll='always')
    # 创建Column控件负责垂直滚动
    bag_table_column = ft.Column([bag_table_row], scroll='always')

    # 页面布局
    page.add(
        ft.Row(
            [
                ft.Column(
                    [postal_code_field, house_number_field, submit_button]
                ),
                ft.Column(
                    [
                        ft.Container(
                            bag_table_column,
                            bgcolor=ft.colors.BLACK,
                            width=800,
                            height=600,  # 设置固定高度触发垂直滚动
                        )
                    ],
                    scroll='always'
                )
            ]
        )
    )

if __name__ == '__main__':
    ft.app(
        target=main,
        view=ft.WEB_BROWSER,
        port=666
    )

关键修改点说明 #

1. 垂直滚动修复：给Container添加height=600，用Column包裹表格的Row并开启垂直滚动，同时保留Row的横向滚动，两种滚动逻辑互不干扰。
2. 表格更新修复：将普通列表替换为ft.Row控件，提交时直接修改其controls属性，Flet能识别到控件树变化并完成页面更新。

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