NiceGUI后台渲染UI问题：多Tab需点击首个按钮才加载其余Tab

我开发了一个带3个可切换Tab页的NiceGUI应用，每个Tab页里都有个“help”按钮。点击按钮时会弹出帮助窗口，同时页面追加一个可见的label文本，元素显示顺序不能乱。
我用await方法实现了显示效果，但有个问题：必须先点第一个Tab页的按钮，剩下的Tab页才会渲染完成并能点击。我想要所有Tab页同时渲染好，用户能随便点任意Tab页。

原代码如下：

with ui.tab_panels(tabs=tabs, value=cleanup_data).classes('w-full'):
    with ui.tab_panel(cleanup_data):
        ui.label('lorem').set_visibility(False)
        a = ui.button('help?', on_click=test)
        await a.clicked()
        ui.label('lorem').set_visibility(True)
    with ui.tab_panel(change_data):
        ui.label('lorem').set_visibility(False)
        b = ui.button('help?', on_click=test)
        await b.clicked()
        ui.label('lorem').set_visibility(True)
    with ui.tab_panel(move_data):
        ui.label('lorem').set_visibility(False)
        c = ui.button('help?', on_click=test)
        await c.clicked()
        ui.label('lorem').set_visibility(True)

问题原因 #

核心问题出在await a.clicked()这类代码上——await button.clicked()会阻塞当前渲染流程，必须等对应按钮被点击后，后续代码才会执行。第一个Tab页的await没完成时，后面的Tab页根本不会开始渲染，自然没法点击。

解决方案 #

要保证所有Tab页同步渲染，不能用await阻塞流程。把label的显示逻辑直接放到按钮的on_click回调里，既保证元素顺序，又不影响Tab页的并行渲染。

方案1：通过父元素定位目标label

def test(button):
    # 这里添加弹出帮助窗口的逻辑
    # 在当前Tab页中找到隐藏的label并设置可见
    button.parent.query('label').filter(lambda x: not x.visible).first().set_visibility(True)

with ui.tab_panels(tabs=tabs, value=cleanup_data).classes('w-full'):
    with ui.tab_panel(cleanup_data):
        ui.label('lorem').set_visibility(False)
        ui.button('help?', on_click=test)
    with ui.tab_panel(change_data):
        ui.label('lorem').set_visibility(False)
        ui.button('help?', on_click=test)
    with ui.tab_panel(move_data):
        ui.label('lorem').set_visibility(False)
        ui.button('help?', on_click=test)

方案2：直接关联按钮与对应label（更精准）

def show_help_and_label(label):
    # 这里添加弹出帮助窗口的逻辑
    label.set_visibility(True)

with ui.tab_panels(tabs=tabs, value=cleanup_data).classes('w-full'):
    with ui.tab_panel(cleanup_data):
        hidden_label = ui.label('lorem').set_visibility(False)
        ui.button('help?', on_click=lambda: show_help_and_label(hidden_label))
    with ui.tab_panel(change_data):
        hidden_label = ui.label('lorem').set_visibility(False)
        ui.button('help?', on_click=lambda: show_help_and_label(hidden_label))
    with ui.tab_panel(move_data):
        hidden_label = ui.label('lorem').set_visibility(False)
        ui.button('help?', on_click=lambda: show_help_and_label(hidden_label))

修改后，所有Tab页会一次性渲染完成，用户可以自由切换点击任意Tab页的按钮，点击后才会显示对应的label，完全符合元素顺序和交互需求。

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