如何在NiceGUI中获取更新后的值？确认面板不显示最新值

核心原因是你使用了普通Python变量存储用户输入，而NiceGUI的UI组件不会自动监听普通变量的变化，导致第三步确认面板无法同步更新最新值。下面是具体解决方案：

1. 改用NiceGUI响应式变量存储数据 #

NiceGUI基于Vue.js，需要使用它提供的响应式机制来管理数据，确保变量变化时自动触发UI更新。可以用两种方式实现：

• 使用全局的ui.state对象
• 使用reactive创建响应式字典/对象

2. 修改数据更新逻辑 #

在Step1和Step2的参数更新方法中，直接修改响应式变量，而非普通变量。

3. 确认面板引用响应式变量 #

第三步的_ask_confirm方法中，直接引用响应式变量展示内容，而非初始的普通变量。

代码示例（类封装版） #

from nicegui import ui, reactive

class ThreeStepApp:
    def __init__(self):
        # 初始化响应式数据，替代普通的None变量
        self.form_data = reactive({
            'file_content': None,
            'num_param': None
        })
        self._build_interface()

    def _build_interface(self):
        # Step1: 文件上传
        ui.label("Step 1: 上传文件")
        ui.upload(on_upload=lambda e: self._update_file_content(e.content))

        # Step2: 数字参数输入
        ui.label("Step 2: 设置数字参数")
        ui.number(label="输入参数", on_change=lambda e: self._update_num_param(e.value))

        # 进入确认步骤按钮
        ui.button("确认参数", on_click=self._ask_confirm)

    def _update_file_content(self, file):
        # 修改响应式变量，自动触发UI更新
        self.form_data['file_content'] = file.read().decode()
        print(f"最新文件内容：{self.form_data['file_content']}")

    def _update_num_param(self, value):
        # 修改响应式变量，自动触发UI更新
        self.form_data['num_param'] = value
        print(f"最新参数值：{self.form_data['num_param']}")

    def _ask_confirm(self):
        # 直接引用响应式变量，展示最新数据
        with ui.dialog() as dialog:
            with ui.card():
                ui.label("请确认以下信息：")
                ui.label(f"上传文件内容：{self.form_data['file_content']}")
                ui.label(f"数字参数：{self.form_data['num_param']}")
                ui.button("确认提交", on_click=dialog.close)
                ui.button("返回修改", on_click=dialog.close)
        dialog.open()

ThreeStepApp()
ui.run()

关键说明 #

• 响应式变量（reactive或ui.state）的修改会被NiceGUI自动监听，关联的UI组件会实时更新内容
• 普通Python变量的变化无法触发Vue的响应式更新，所以之前确认面板只会显示初始的None值

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