本文详细介绍了在 flet 应用中实现基于类的路由和视图管理的最佳实践。通过正确配置 `usercontrol` 组件的 `__init__` 方法、利用 `lambda` 表达式处理导航事件，并合理定义 `page.on_route_change` 和 `page.on_view_pop` 函数，可以构建出结构清晰、可维护的单页应用路由系统。文章还提供了将视图逻辑模块化的方法，以增强代码的可读性和扩展性。
在 Flet 框架中构建交互式应用时，路由和视图管理是实现多页面导航的关键。尤其当项目采用类（UserControl）来封装 UI 组件时，正确地集成路由机制显得尤为重要。本教程将深入探讨如何在基于类的 Flet 应用中实现高效且健壮的路由系统。
Flet 的路由机制主要依赖于 page.on_route_change 和 page.on_view_pop 事件处理器，以及 page.views 列表来管理应用视图栈。
在使用 ft.UserControl 创建自定义组件时，有几个关键点需要注意，尤其是在集成路由功能时。
所有继承自 ft.UserControl 的类都必须包含一个 __init__ 方法，并在其中调用 super().__init__()。这是 Flet 框架正确初始化组件并确保其 build 方法正常工作的必要步骤。
import flet as ft
class TodoApp(ft.UserControl):
def __init__(self):
super().__init__() # 必须调用父类的构造函数
def build(self):
# 组件的 UI 结构
return ft.Column(
controls=[
ft.Row(
[
ft.ElevatedButton(
text="Login/SignUp",
tooltip="login",
color='green',
on_click=lambda e: self.page.go("/store") # 导航事件处理
),
ft.Text(
value="ToDo", style=ft.TextThemeStyle.HEADLINE_MEDIUM, color='green')
],
alignment=ft.MainAxisAlignment.SPACE_BETWEEN,
),
],
)当在 UserControl 内部的控件（如 ft.ElevatedButton）中触发导航时，应使用 lambda 函数来包裹 self.page.go() 方法。这是因为 on_click 期望一个可调用对象，如果直接写 on_click=self.page.go("/store")，self.page.go("/store") 会在组件构建时立即执行，而不是在点击事件发生时执行。
# 错误的写法（会在组件构建时立即执行）
# on_click=self.page.go("/store")
# 正确的写法（点击时执行）
on_click=lambda e: self.page.go("/store")核心的路由逻辑通常定义在 main 函数中，因为它需要访问 page 对象。
这个函数是 Flet 路由系统的核心。它负责根据当前路由 (page.route) 构建或更新 page.views 栈。
def main(page: ft.Page):
page.title = "ToDo App"
page.horizontal_alignment = ft.CrossAxisAlignment.CENTER
page.scroll = ft.ScrollMode.ADAPTIVE
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() # 更新页面以显示新视图
# ... 其他代码 ...关键点：
当用户执行后退操作时，此函数将从 page.views 栈中移除最顶部的视图，并导航到栈中剩余的顶部视图。
媒体包提供了可管理各种媒体类型的类。这些类可提供用于执行音频和视频操作。除了基本操作之外，还可提供铃声管理、脸部识别以及音频路由控制。本文说明了音频和视频操作。 本文旨在针对希望简单了解Android编程的初学者而设计。本文将指导你逐步开发使用媒体（音频和视频）的应用程序。本文假定你已安装了可开发应用程序的Android和必要的工具，同时还假定你已熟悉Java或掌握面向对象的编程概念。感兴趣的朋友可以过来看看
0
def view_pop(view):
page.views.pop() # 弹出当前视图
top_view = page.views[-1] # 获取新的顶部视图
page.go(top_view.route) # 导航到新的顶部视图的路由
# ... 其他代码 ...在 main 函数的末尾，需要将 route_change 和 view_pop 函数注册到 page 对象上，并调用 page.go(page.route) 来初始化首次加载时的视图。
# ... route_change 和 view_pop 定义 ...
page.on_route_change = route_change
page.on_view_pop = view_pop
page.go(page.route) # 初始化页面，触发首次路由变更
ft.app(target=main, view=ft.AppView.WEB_BROWSER)结合上述所有部分，一个完整的 Flet 应用路由示例如下：
import flet as ft
class TodoApp(ft.UserControl):
def __init__(self):
super().__init__()
def build(self):
return ft.Column(
controls=[
ft.Row(
[
ft.ElevatedButton(
text="Login/SignUp",
tooltip="login",
color='green',
on_click=lambda e: self.page.go("/store")
),
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"
page.horizontal_alignment = ft.CrossAxisAlignment.CENTER
page.scroll = ft.ScrollMode.ADAPTIVE
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.on_route_change = route_change
page.on_view_pop = view_pop
page.go(page.route) # 确保初始视图被正确加载
ft.app(target=main, view=ft.AppView.WEB_BROWSER)对于更复杂的应用，将视图定义逻辑从 route_change 函数中分离出来，可以提高代码的可读性和可维护性。可以创建一个单独的函数或模块来管理视图的创建。
例如，创建一个 views_handler 函数：
# views.py 文件 (或者直接定义在 main 函数内部)
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 Login',
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='white',
)
)
]
)
}
# main 函数中的 route_change 示例
def main(page: ft.Page):
# ... 其他初始化代码 ...
def route_change(route):
page.views.clear()
# 直接从 views_handler 获取当前路由对应的视图
page.views.append(
views_handler(page)[page.route]
)
page.update()
# ... view_pop 和注册代码 ...这种方法允许您将所有视图的定义集中管理，使得 route_change 函数更加简洁，只负责根据当前路由选择并添加视图。
通过本教程，您应该已经掌握了在 Flet 应用中实现基于类的路由和视图管理的核心方法。关键在于：
遵循这些实践，您将能够构建出结构清晰、易于维护的 Flet 多页面应用。
以上就是Flet 应用中基于类的路由与视图管理指南的详细内容，更多请关注php中文网其它相关文章！
广告
收藏
收藏
Copyright 2014-2025 https://www.php.cn/ All Rights Reserved | php.cn | 湘ICP备2023035733号
302
