Flet 教程！手把手教你打造应用程序登录页面

还在为 Python 界面开发发愁？用 Flet 轻松实现高颜值注册页！本期就带你从 0 到 1 搭建可交互注册界面，零基础也能快速掌握跨平台 UI 开发。无需复杂前端知识，用熟悉的 Python 即可实现响应式表单！Flet 作为新兴框架，兼具 Flutter 的 UI 能力与 Python 的简洁，适合快速开发用户系统、数据录入工具等场景。跟着一步步操作，零基础也能做出专业级注册功能。

一、表单组件全解析

要打造登录页面，表单组件是基础。下面就来详细解析各个表单组件的用法。

1. TextField 组件

TextField 组件可帮我们创建输入框，像用户名和密码输入框都能用它。创建密码输入框时，设置 password=True，输入的内容就会自动隐藏，保护密码安全。

比如创建用户名输入框：

username = ft.TextField(label="用户名",width=300,)

创建密码输入框：

password = ft.TextField(label="密码",password=True,width=300,)

这里 label 设置输入框的标签，width 设置输入框宽度，password=True 就是让密码自动隐藏的关键设置。

2. Checkbox 组件

Checkbox 组件能实现协议勾选功能，让用户勾选是否同意相关协议。

agree = ft.Checkbox(label="我同意相关协议")

label 设置勾选框旁边的文字说明。

3. ElevatedButton 组件

ElevatedButton 组件可打造动态禁用提交按钮，实现未填全时按钮禁用，填完自动激活的效果，提升用户体验。

submit_btn = ft.ElevatedButton(text="提交",on_click=submit,disabled=True  # 初始设置为禁用状态)

text 设置按钮上的文字，on_click 绑定点击事件，disabled 设置按钮是否禁用。

4. 实时验证输入完整性

要实现实时验证输入完整性，需要监听输入框和勾选框的变化，当所有必要信息都填写完整且勾选协议后，激活提交按钮。可以通过绑定 on_change 事件来实现。

def check_input(e):if username.value and password.value and agree.value:submit_btn.disabled = Falseelse:submit_btn.disabled = Truepage.update()username.on_change = check_inputpassword.on_change = check_inputagree.on_change = check_input

当用户名、密码输入框有内容且协议被勾选时，提交按钮就会被激活，否则保持禁用状态。

二、事件处理与页面跳转

1. 自定义验证函数 validate

自定义验证函数 validate 用于实时检查输入状态，确保输入的信息符合要求。比如检查用户名长度、密码强度等。

def validate(e):errors = []if len(username.value) < 3:errors.append("用户名长度不能少于3个字符")if len(password.value) < 6:errors.append("密码长度不能少于6个字符")if errors:page.snack_bar = ft.SnackBar(content=ft.Text("n".join(errors)))page.snack_bar.open = Truereturn Falsereturn True

这个函数会检查用户名和密码的长度，如果不符合要求，会通过 SnackBar 显示错误信息，并返回 False；如果符合要求，返回 True。

2. 提交函数 submit

提交函数 submit 的作用是清除当前页面并跳转欢迎界面，同时实现数据传递。

def submit(e):if not validate(e):return# 传递数据，这里将用户名传递到欢迎页面user_name = username.value# 清除当前页面page.clean()# 跳转欢迎界面page.add(ft.Text(f"欢迎你，{user_name}！"))page.update()

先调用验证函数，如果验证不通过则不进行后续操作；验证通过后，获取用户名，清除当前页面内容，添加欢迎信息实现页面跳转。

3. 数据传递与页面切换逻辑

在上面的 submit 函数中，我们通过获取输入框的 value 值来传递数据。页面切换则是通过清除当前页面内容，再添加新的页面元素来实现。这种方式简单直接，适合基础的页面切换需求。

三、细节优化与配置

1. 固定窗口尺寸、禁用缩放

通过设置页面的 window 属性来固定窗口尺寸和禁用缩放。

page.window_width = 500  # 窗口宽度page.window_height = 400  # 窗口高度page.window_resizable = False  # 禁用窗口缩放

2. 手动设置浅色主题

page.theme_mode = ft.ThemeMode.LIGHT

这样就能将页面设置为浅色主题。

3. 文本左对齐

在相关文本组件中设置 text_align 属性为 ft.TextAlign.LEFT。

ft.Text("登录", text_align=ft.TextAlign.LEFT)

4. 通过类型注解和事件参数提升代码可读性

在函数定义时使用类型注解，明确参数和返回值的类型；在事件处理函数中正确使用事件参数 e，能让代码更清晰易懂。

def check_input(e: ft.ControlEvent) -> None:# 函数体

四、常见问题和错误

1. 组件样式不显示

可能是没有调用 page.update () 方法更新页面。在修改组件属性后，一定要调用 page.update () 才能让样式生效。

2. 事件处理函数不生效

检查事件绑定是否正确，比如 on_click 是否正确绑定了对应的函数。另外，函数的参数是否正确，事件处理函数一般需要接收一个事件参数 e。

3. 页面跳转后内容不显示

可能是在跳转时没有正确添加新的页面元素，或者没有调用 page.update () 方法。确保在清除旧内容后，正确添加新内容并更新页面。

五、面试相关问题及回答

1. 什么是 Flet？它有什么特点？

Flet 是一个新兴的 Python 框架，它兼具 Flutter 的 UI 能力与 Python 的简洁。特点包括：无需复杂的前端知识，用 Python 就能开发跨平台应用；UI 界面美观，具有良好的用户体验；开发效率高，适合快速开发各种应用场景，如用户系统、数据录入工具等。

2. 在 Flet 中，如何实现表单验证？

可以通过自定义验证函数，在函数中检查输入的内容是否符合要求，如用户名长度、密码强度等。然后在提交按钮的点击事件中调用该验证函数，根据验证结果决定是否进行后续操作。同时，还可以通过监听输入框的变化，实时进行验证，并动态控制提交按钮的状态。

3. 如何实现 Flet 页面之间的跳转和数据传递？

页面跳转可以通过清除当前页面的内容，然后添加新的页面元素来实现，也可以使用 Flet 的路由管理功能。数据传递可以通过获取前一个页面中输入组件的 value 值，将其存储在变量中，然后在新的页面中使用该变量。