Flet 类中的路由

Question

我正在自定义 Flet 框架网站上的 ToDo 项目。 在代码的一部分中，我希望当用户单击登录按钮时被路由到另一个页面。我查了Flet网站上的路由示例代码，但是我无法在我的项目中使用它（可能是因为我的类写得不好）。 到目前为止，我设法以这样的方式编写程序：当用户单击登录按钮时，“：|”被打印 谁能帮我这个？ 代码：

import flet as ft

class TodoApp(UserControl):
    def build(self):
        # application's root control (i.e. "view") containing all other controls
        return Column(
            # width=1000,
            controls=[
                Row(
                    [
                        ElevatedButton(text="Login/SignUp",
                                       tooltip="login", color='green', on_click=self.route_change),
                        Text(
                            value="ToDo", style=TextThemeStyle.HEADLINE_MEDIUM, color='green')
                    ],
                    alignment=MainAxisAlignment.SPACE_BETWEEN,
                ),
            ],
        )

    async def route_change(self, e):
        print(':|')
async def main(page: Page):
    page.title = "ToDo App"
    page.horizontal_alignment = CrossAxisAlignment.CENTER
    page.scroll = ScrollMode.ADAPTIVE
    # create app control and add it to the page
    await page.add_async(TodoApp())


ft.app(main, view=AppView.WEB_BROWSER)

我尝试将路由代码放入相应的功能中（点击时）但没有成功 我也尝试过 flet-route 但我无法使用它！

Answer 1

为此，您应该在主函数中定义一个路由更改函数以及一个 view_pop 函数，然后您可以创建路由和视图。

您的组件应该始终有一个 init 方法，并且应该以这种方式调用超类构造函数：

def __init__(self):
    super().__init__()

否则构建功能将无法工作。

完整代码如下：

import flet as ft

class TodoApp(ft.UserControl):
    def __init__(self): # IMPORTANT OR THE COMPONENT WILL NOT WORK!
        super().__init__()

def build(self):
    # application's root control (i.e. "view") containing all other controls
    return ft.Column(
        # width=1000,
        controls=[
            ft.Row(
                [
                    ft.ElevatedButton(
                        text="Login/SignUp",
                        tooltip="login", 
                        color='green',
                        on_click=lambda e: self.page.go("/store")), 
# lambda function is REQUIRED as it prevents the call ot the self.page.go 
# method while building the component
                    ft.Text(
                        value="ToDo", style=ft.TextThemeStyle.HEADLINE_MEDIUM, color='green')
                ],
                alignment=ft.MainAxisAlignment.SPACE_BETWEEN,
            ),
        ],
    )


def main(page: ft.Page):
    page.title = "ToDo App"

# here you can build your routes and views
def route_change(route):
    page.views.clear()
    page.views.append(
        ft.View(
            "/",
            [
                ft.AppBar(title=ft.Text("Flet app"), bgcolor=ft.colors.SURFACE_VARIANT),
                TodoApp()
            ],
        )
    )
    if page.route == "/store":
        page.views.append(
            ft.View(
                "/store",
                [
                    ft.AppBar(title=ft.Text("Store"), bgcolor=ft.colors.SURFACE_VARIANT),
                    ft.ElevatedButton("Go Home", on_click=lambda _: page.go("/")),
                ],
            )
        )
    page.update()

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

page.horizontal_alignment = ft.CrossAxisAlignment.CENTER
page.scroll = ft.ScrollMode.ADAPTIVE
page.on_route_change = route_change
page.on_view_pop = view_pop
# create app control and add it to the page
page.go(page.route)


ft.app(main, view=ft.AppView.WEB_BROWSER)

您还可以在单独的文件中管理视图，如下所示：

Views.py:

from flet import *

def views_handler(page):
return {
    '/' : View(
            route = '/',
            controls = [
                Container(
                    height=800,
                    width=350,
                    bgcolor='red',
                    on_click=lambda _: page.go('/login'),
                    content=Text(
                        'Go To Home',
                        size=12,
                        color='black',
                    )       
                )
            ]
        ),
    '/login' : View(
            route = '/login',
            controls = [
                Container(
                    height=800,
                    width=350,
                    bgcolor='blue',
                    on_click=lambda _: page.go('/'),
                    content=Text(
                        'Go To Home',
                        size=12,
                        color='black',
                    )       
                )
            ]
        )
}

然后主函数中的route_change函数将是：

def route_change(route):
    page.views.clear()
    page.views.append(
        views_handler(page)[page.route]
    )

如果您缺少某些零件，请随时询问！ ：D