Flet NavigationDrawer 未打开，引发断言错误：必须首先将控件添加到页面

Question

所以，我正在尝试制作一个 Flet 应用程序，为我镇上的人们提供有用的信息，例如新闻、回收、活动……基本上，我将各种类别放在 NavigationDrawer 中，该导航通过汉堡包按钮打开放置在应用栏上。

当我尝试使用 page.open(drawer) 打开它时，它会引发此错误：

AssertionError: Control must be added to the page first.

这个错误通常发生在未设置 page.drawer 的情况下，但事实并非如此。

我尝试调试了一下，结果发现，如果我使用

page.drawer.open = True

，抽屉会成功打开，但不显示。

相反，使用第一种方法（文档中描述），它会引发所述错误。

代码：（我用注释替换了长的部分）

# Handle drawer navigation with page.go(<route corresponding to index>)

  drawer = ft.NavigationDrawer(
      on_change=handle_change,
      controls=[
          ft.Container(height=12),
          ft.NavigationDrawerDestination(
              label="Home",
              icon=ft.icons.HOME,
              selected_icon_content=ft.Icon(ft.icons.HOME_FILLED),
          ),
          ft.Divider(thickness=2),
          ft.NavigationDrawerDestination(
              icon_content=ft.Icon(ft.icons.NEWSPAPER),
              label="Notizie",
              selected_icon=ft.icons.NEWSPAPER_OUTLINED,
          ),
          ft.NavigationDrawerDestination(
              icon_content=ft.Icon(ft.icons.RECYCLING),
              label="Differenziata",
              selected_icon=ft.icons.RECYCLING_OUTLINED,
          )
      ]
  )

  
  def show_drawer(e):
      page.open(drawer)

  hamburger_btn = ft.IconButton(
      icon=ft.icons.MENU,
      on_click=show_drawer
  )

  page.drawer = drawer
  
  # Route change event handler

  def view_pop(view):
      page.views.pop()
      top_view = page.views[-1]
      page.go(top_view.route)

  page.on_route_change = route_change
  page.on_view_pop = view_pop
  # appbar creation with page.appbar
  page.update()
  page.go(page.route)

Answer 1

如果您正在遵循通过路线导航的教程之一，我相信您可能有一些如下所示的代码：

def route_change(e: ft.RouteChangeEvent) -> None:
        page.views.clear() # <-- destroys the view each time it swaps. Navdrawer will not be assigned to the new view.
        page.views.append(
            ft.View(
            route ="/", 
            controls = [
                ft.Text(value="Home", size=30),
                ft.ElevatedButton(text='Chat', on_click=lambda _: page.go('/route1'))
            ]))

        match page.route:               
            case "/route2":
                page.views.append(
                    ft.View(
                        route= "/route2",
                        controls = [ft.Text("route2", size=30)],
                        vertical_alignment= ft.MainAxisAlignment.CENTER,
                        horizontal_alignment= ft.CrossAxisAlignment.CENTER,
                        spacing = 26
                    )
                )
            
            case "/route3":
                page.views.append(
                    ft.View(
                        route= "/route3",
                        controls = [ft.Text("oute3", size=30)],
                        vertical_alignment= ft.MainAxisAlignment.CENTER,
                        horizontal_alignment= ft.CrossAxisAlignment.CENTER,
                        spacing = 26
                    )
                )

        print(page.views)
        page.views[-1].drawer = drawer # <-- Reassigns the drawer to the drawer attribute for the current view being displayed. 
        page.update()

一种快速而肮脏的方法是在路线更改功能的末尾添加

page.views[-1].drawer = nav_bar

，将抽屉重新分配给最后一个视图的抽屉属性。您还可以执行

.end_drawer

将导航抽屉置于右侧。这似乎解决了我的问题。希望有帮助！