Flet 快速入门！10 分钟上手第一个交互式应用

还在羡慕 Flutter 的高颜值界面？用 Python 也能轻松实现啦！Flet 框架能让你用熟悉的 Python 语言打造跨平台应用，今天就手把手教你搭建第一个项目 —— 可交互计数器，从安装到运行全流程演示，零基础也能跟着敲出第一个交互式程序！

一、极简环境搭建

还在为搭建开发环境头疼吗？Flet 可太贴心了，安装起来那叫一个简单。

你只需要打开命令行（Windows 系统可以用 Win + R 调出运行窗口，输入 cmd 回车；Mac 或 Linux 系统打开终端），敲上 “pip install flet” 这一行命令，然后等着它自己安装就行。

不用搞那些复杂的配置，不管你是刚学 Python 的小白，还是有一定经验的开发者，都能轻松搞定。安装完成后，你就可以开始使用 Flet 框架了，是不是超方便？

二、组件快速上手

咱们先来做个可交互计数器，通过这个小例子来看看 Flet 的组件是怎么用的。

1. 整体代码

先给大家看一下完整的代码，后面再一步步讲解：

import flet as ftdef main(page: ft.Page):# 设置页面标题page.title = "我的第一个Flet应用"# 定义计数器变量count = ft.Text(value="0", size=30)# 定义加1函数def add_click(e):count.value = str(int(count.value) + 1)page.update()# 定义减1函数def subtract_click(e):count.value = str(int(count.value) - 1)page.update()# 添加组件到页面page.add(ft.Text("计数器", size=20),count,ft.Row([ft.IconButton(ft.icons.ADD, on_click=add_click),ft.IconButton(ft.icons.REMOVE, on_click=subtract_click)])ft.app(target=main)

2. 组件讲解

文本框（TextField）：在这个例子里，我们用ft.Text来显示数值（虽然不是严格意义上的 TextField，但作用类似，都是显示文本），它的value属性就是要显示的内容，size是字体大小。我们通过改变count.value的值，就能让它实时显示计数器的数值。
加减按钮（IconButton）：这两个按钮是IconButton组件，ft.icons.ADD和ft.icons.REMOVE是按钮上的图标。on_click属性用来绑定事件处理函数，当点击加按钮时，就会调用add_click函数，让数值增加 1；点击减按钮时，调用subtract_click函数，让数值减少 1。
事件处理：在add_click和subtract_click函数里，我们先修改count.value的值，然后调用page.update()，这样页面才能更新显示新的数值。

三、页面个性化设置

1. 自定义窗口标题

在上面的代码中，page.title = "我的第一个Flet应用"这句话就是用来设置窗口标题的，你可以把引号里的内容改成你喜欢的标题。

2. 内容居中对齐

如果想让页面上的内容居中显示，可以这样修改代码，在添加组件的时候用ft.Column并设置alignment属性：

page.add(ft.Column([ft.Text("计数器", size=20),count,ft.Row([ft.IconButton(ft.icons.ADD, on_click=add_click),ft.IconButton(ft.icons.REMOVE, on_click=subtract_click)],alignment=ft.MainAxisAlignment.CENTER  # 让按钮在水平方向居中)],alignment=ft.MainAxisAlignment.CENTER,  # 让整个内容在垂直方向居中horizontal_alignment=ft.CrossAxisAlignment.CENTER  # 让整个内容在水平方向居中))

3. 手动切换明暗主题

要实现手动切换明暗主题，可以添加一个切换按钮，代码如下：

import flet as ftdef main(page: ft.Page):page.title = "我的第一个Flet应用"count = ft.Text(value="0", size=30)def add_click(e):count.value = str(int(count.value) + 1)page.update()def subtract_click(e):count.value = str(int(count.value) - 1)page.update()# 切换主题函数def toggle_theme(e):page.theme_mode = ft.ThemeMode.DARK if page.theme_mode == ft.ThemeMode.LIGHT else ft.ThemeMode.LIGHTtoggle_btn.text = "切换到亮色模式" if page.theme_mode == ft.ThemeMode.DARK else "切换到暗色模式"page.update()toggle_btn = ft.ElevatedButton("切换到暗色模式", on_click=toggle_theme)page.add(ft.Column([ft.Text("计数器", size=20),count,ft.Row([ft.IconButton(ft.icons.ADD, on_click=add_click),ft.IconButton(ft.icons.REMOVE, on_click=subtract_click)],alignment=ft.MainAxisAlignment.CENTER),toggle_btn],alignment=ft.MainAxisAlignment.CENTER,horizontal_alignment=ft.CrossAxisAlignment.CENTER))ft.app(target=main)

4. 响应式设计

Flet 支持响应式设计，窗口大小自由调整时，组件会根据窗口大小自动调整布局。上面的代码中使用ft.Column和ft.Row来布局，它们本身就具有一定的响应式特性，会根据父容器的大小来调整自身的布局。

四、跨平台运行

Flet 支持跨平台运行，一键切换 Web 模式非常简单，只需修改一行代码。

原来的运行代码是ft.app(target=main)，要切换到 Web 模式，只需要改成ft.app(target=main, view=ft.AppView.WEB_BROWSER)。

修改后运行代码，应用就会在浏览器中打开，兼顾桌面与网页端体验。

五、全流程演示

打开命令行，输入pip install flet安装 Flet。
新建一个 Python 文件，比如counter.py。
把上面带有主题切换功能的代码复制到counter.py中。
在命令行中进入到counter.py所在的目录，输入python ``counter.py运行程序。
你会看到一个带有计数器和主题切换按钮的窗口，点击加减按钮可以改变数值，点击主题切换按钮可以切换明暗主题。
如果想在浏览器中运行，把代码中的ft.app(target=main)改成ft.app(target=main, view=ft.AppView.WEB_BROWSER)，再运行程序，就会在浏览器中打开应用。

六、常见的问题和错误

问题 / 错误	解决方法
安装 Flet 时提示 “pip 不是内部或外部命令”	检查 Python 是否正确安装，以及是否把 Python 添加到了环境变量中。如果没有，重新安装 Python 并勾选 “Add Python to PATH”。
运行代码时提示 “ModuleNotFoundError: No module named 'flet'”	说明 Flet 没有安装成功，重新在命令行中输入`pip install flet`进行安装。
点击按钮后数值没有更新	检查是否在事件处理函数的最后调用了`page.update()`，只有调用这个方法，页面才会更新显示。
切换到 Web 模式后无法在浏览器中打开	可能是端口被占用，可以尝试修改端口，比如`ft.app(target=main, view=ft.AppView.WEB_BROWSER, port=8000)`，把 8000 换成其他未被占用的端口。

七、面试的时候一般会问到的问题及回答

什么是 Flet？它有什么优势？

答：Flet 是一个可以用 Python 语言开发跨平台应用的框架。它的优势在于让 Python 开发者能够轻松实现高颜值界面，无需学习新的语言，安装简单，零门槛入门，支持跨平台运行，兼具 Flutter 的高性能与 Python 的简洁，适合快速原型开发、数据可视化等场景。
Flet 和其他 Python GUI 框架（如 Tkinter、PyQt）相比，有什么区别？

答：和 Tkinter 相比，Flet 做出的界面更美观，更现代化；和 PyQt 相比，Flet 学习成本更低，使用更简单，不需要编写复杂的布局代码。而且 Flet 支持跨平台运行在网页端，这是一些传统 Python GUI 框架不具备的优势。
如何在 Flet 中实现组件之间的交互？

答：在 Flet 中，可以通过给组件绑定事件处理函数来实现交互。比如给按钮的on_click属性绑定一个函数，当点击按钮时，就会执行这个函数，在函数中可以修改其他组件的属性，然后调用page.update()更新页面，从而实现组件之间的交互。
Flet 如何实现跨平台运行？

答：Flet 基于 Flutter 构建，Flutter 本身就支持跨平台，所以 Flet 也继承了这一特性。通过简单修改代码中的参数，比如设置view=ft.AppView.WEB_BROWSER，就可以让应用在浏览器中运行，无需进行大量的修改就能实现跨平台运行。