Flet中page.update()无法更新bag_table表格的问题求助

问题说明 #

在Flet项目中尝试更新右侧列容器内的bag_table表格：

• 初始加载时表格显示正常
• 点击提交按钮后，后端逻辑执行正常，bag_table变量已更新，但GUI中的表格未同步刷新
• 调试时添加page.add(bag_table)，会在页面底部新增一个更新后的表格，说明数据确实更新，但page.update()无法实现原地替换

问题原因 #

1. 回调函数bag_service中重新定义了局部变量bag_table，和全局的表格变量不是同一个对象，无法影响界面上已渲染的表格
2. 原始表格被嵌套在Container和Row组件中，没有保留对这个Row的引用，无法直接替换其中的表格内容

解决步骤 #

1. 单独提取包裹表格的Row组件为全局变量，方便后续修改其内容
2. 在回调函数中生成新表格后，替换该Row组件内的旧表格
3. 调用page.update()触发界面刷新

修改后的完整代码 #

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):
    # 定义存放表格的Row，后续用来更新内容
    table_row = None
    
    def bag_service(e):
        nonlocal table_row
        pc = '9722LA' if postal_code_field.value == '' else postal_code_field.value
        hn = '29' if house_number_field.value == '' else house_number_field.value
        address = PCHN(pc, hn).result
        new_bag_table = dataframe_to_datatable(address)
        # 清空原有表格，添加新表格
        table_row.controls.clear()
        table_row.controls.append(new_bag_table)
        # 刷新页面
        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('9722GN', '5').result
    initial_bag_table = dataframe_to_datatable(address)
    table_row = ft.Row([initial_bag_table], scroll='always')
    
    # 布局构建
    page.add(
        ft.Row(
            [
                ft.Column(
                    [postal_code_field, house_number_field, submit_button]
                ),
                ft.Column(
                    [
                        ft.Container(
                            table_row,
                            bgcolor=ft.colors.BLACK,
                            width=800
                        )
                    ]
                )
            ]
        )
    )

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

关键修改点 #

• 新增table_row变量，存储包裹表格的Row组件，确保能在回调中访问并修改
• 在bag_service中使用nonlocal声明，让函数能访问外部的table_row变量
• 替换表格时，通过table_row.controls.clear()和append()来更新内容，而不是新增组件
• 移除了调试用的page.add(bag_table)，改为原地替换

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