NiceGUI如何从函数外部访问并控制网格内的按钮？

问题根源在于：每次点击「START GAME」导航到/game页面时，NiceGUI会重新执行game()函数生成全新的UI元素。你之前用全局变量、外部列表存储的按钮实例，都是上一次页面加载时创建的旧对象，自然和当前页面的按钮不匹配。

下面是几种可行的解决方案：

方案1：在页面函数内部维护按钮引用 #

把按钮列表和禁用逻辑都放在game()函数内部，确保每次页面加载时，操作的都是当前页面的按钮实例：

from nicegui import ui

def game():
    # 存储当前页面的所有按钮
    buttons = []

    def disable_buttons():
        for btn in buttons:
            btn.disable()

    # 创建4x4网格按钮
    for row in range(4):
        with ui.row():
            for col in range(4):
                btn = ui.button(f"卡片 {row}-{col}", on_click=lambda: ...)
                buttons.append(btn)

    # 页面内添加测试用的禁用按钮
    ui.button("禁用所有卡片", on_click=disable_buttons)

@ui.page('/')
def index():
    ui.button("START GAME", on_click=lambda: ui.navigate.to('/game'))

@ui.page('/game')
def game_page():
    game()

ui.run()

方案2：利用页面存储实现跨页面触发禁用 #

如果需要从其他页面（比如首页）触发/game页面的按钮禁用，可以把按钮列表存入当前页面的storage属性，通过页面实例获取并操作：

from nicegui import ui, app

def disable_game_buttons():
    # 获取/game页面的实例
    game_page = app.get_page('/game')
    # 检查页面是否已加载并存储了按钮列表
    if 'buttons' in game_page.storage:
        for btn in game_page.storage['buttons']:
            btn.disable()

@ui.page('/')
def index():
    ui.button("START GAME", on_click=lambda: ui.navigate.to('/game'))
    # 首页添加按钮，远程禁用游戏页面的所有按钮
    ui.button("禁用游戏卡片", on_click=disable_game_buttons)

@ui.page('/game')
def game_page():
    buttons = []
    # 将按钮列表存入当前页面的存储
    ui.page.current.storage['buttons'] = buttons

    for row in range(4):
        with ui.row():
            for col in range(4):
                btn = ui.button(f"卡片 {row}-{col}")
                buttons.append(btn)

ui.run()

注意：只有当/game页面处于活跃状态时，这个方法才会生效——如果页面还没加载，storage里不会有按钮列表。

方案3：用类封装游戏逻辑（适合复杂场景） #

把游戏的按钮、状态、操作都封装到类中，每次进入/game页面时创建一个新的游戏实例，确保所有操作都绑定到当前页面的UI元素：

from nicegui import ui

class PairsGame:
    def __init__(self):
        self.buttons = []

    def create_grid(self):
        # 创建游戏网格
        for row in range(4):
            with ui.row():
                for col in range(4):
                    btn = ui.button(f"卡片 {row}-{col}", on_click=self.handle_card_click)
                    self.buttons.append(btn)

    def disable_buttons(self):
        # 批量禁用按钮
        for btn in self.buttons:
            btn.disable()

    def handle_card_click(self):
        # 处理卡片点击的业务逻辑
        pass

@ui.page('/')
def index():
    ui.button("START GAME", on_click=lambda: ui.navigate.to('/game'))

@ui.page('/game')
def game_page():
    game = PairsGame()
    game.create_grid()
    # 添加禁用按钮
    ui.button("禁用所有卡片", on_click=game.disable_buttons)

ui.run()

关键提醒 #

永远不要用全局变量存储页面级的UI元素——全局变量会保留旧页面的实例，导致你操作的对象和当前页面显示的UI完全不对应。所有页面相关的元素引用，都应该和页面的生命周期绑定（比如放在页面函数内部、页面存储里，或者封装到页面专属的类实例中）。

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