## 1. 为什么你需要关注Flet？ 如果你是一个Python开发者，曾经有过这样的想法：“要是能用Python写个带界面的小工具就好了，不用学那些复杂的前端技术”，那么Flet就是为你量身打造的。我刚开始接触GUI开发的时候，试过Tkinter、PyQt，甚至用Electron套壳，过程那叫一个折腾。要么界面太丑，要么打包体积巨大，要么就得去啃JavaScript。直到遇到Flet，我才发现用Python写一个好看、能跨平台（Windows、macOS、Linux）甚至能直接变成网页的应用，原来可以这么简单。 简单来说，**Flet是一个让你用纯Python代码来构建Flutter风格用户界面的框架**。Flutter是谷歌推出的那个非常火的UI工具包，用它做的应用界面流畅、动画精美。Flet把Flutter的核心能力“翻译”成了Python的API。这意味着，你不需要懂Dart语言，不需要配置复杂的Flutter开发环境，只需要会Python，就能调用那些强大的UI组件。它生成的可不是简单的原生窗口，而是**真正的、硬件加速的Flutter应用**，所以视觉效果和交互体验是原生级别的。 它最适合谁呢？我总结了几类人：首先是**数据分析师或算法工程师**，你想给模型做个演示界面，或者把数据处理流程包装成一个可视化工具；其次是**运维或测试工程师**，需要开发一些内部使用的配置工具或监控面板；还有就是**任何想快速把想法变成可交互软件的Python爱好者**。你不需要是前端专家，甚至不需要有GUI开发经验，Flet的设计哲学就是“隐藏复杂性”，让你专注于业务逻辑。 最让我惊喜的是它的“一次编写，处处运行”。你写的那一套Python代码，可以不加修改地编译成桌面应用（通过内置的Flutter引擎），也可以一键作为Web应用在浏览器中打开，未来还支持直接打包成移动端App。这极大地减少了开发和维护成本。想象一下，你花一下午写了个数据查询工具，同事在Windows上双击exe能用，用Mac的同事也能直接打开dmg安装包，领导想在平板上看看，你改个参数就能生成网页链接发给他——这种体验，在以前需要多个技术栈才能实现。 ## 2. 5分钟创建你的第一个Flet应用 光说不练假把式，咱们直接上手。Flet的入门门槛低到令人发指，我保证，只要你电脑上有Python，接下来5分钟你就能看到一个属于自己的桌面窗口应用。 首先，打开你的终端（命令提示符或PowerShell），用pip安装Flet。这是唯一需要准备的步骤。 ```bash pip install flet ``` 安装完成后，新建一个Python文件，比如就叫 `hello_flet.py`。我们用最经典的“计数器”应用作为起点，但我会加点料，让它比官方基础示例更有趣一点。 ```python import flet as ft def main(page: ft.Page): # 1. 设置窗口属性 page.title = "我的第一个Flet应用" page.theme_mode = ft.ThemeMode.LIGHT # 使用亮色主题 page.padding = 50 # 给页面加点内边距，看起来不拥挤 page.vertical_alignment = ft.MainAxisAlignment.CENTER page.horizontal_alignment = ft.CrossAxisAlignment.CENTER # 2. 创建一些控件 # 一个文本控件，用于显示问候语 greeting = ft.Text("你好，Flet！", size=30, weight=ft.FontWeight.BOLD, color=ft.colors.BLUE_700) # 一个数字显示框 txt_number = ft.TextField( value="0", text_align=ft.TextAlign.CENTER, width=150, height=50, border_color=ft.colors.BLUE_400, read_only=True, # 设置为只读，我们通过按钮来改变它 ) # 3. 定义按钮点击后的逻辑（事件处理函数） def minus_click(e): # 点击减号，数字减1 current_value = int(txt_number.value) if current_value > -10: # 我们加个下限，不让它无限减小 txt_number.value = str(current_value - 1) page.update() # 更新页面，让改变生效 def plus_click(e): # 点击加号，数字加1 current_value = int(txt_number.value) if current_value < 10: # 同样，加个上限 txt_number.value = str(current_value + 1) page.update() def reset_click(e): # 点击重置，数字归零 txt_number.value = "0" page.update() # 4. 创建按钮控件 minus_button = ft.IconButton(ft.icons.REMOVE_CIRCLE_OUTLINED, icon_size=40, on_click=minus_click, tooltip="减一") plus_button = ft.IconButton(ft.icons.ADD_CIRCLE_OUTLINED, icon_size=40, on_click=plus_click, tooltip="加一") reset_button = ft.ElevatedButton("重置", icon=ft.icons.REFRESH, on_click=reset_click) # 5. 把控件“添加”到页面中，并组织布局 # 使用Row进行水平排列，Column进行垂直排列 page.add( greeting, ft.Column([ # 创建一个垂直列 ft.Row([ # 在列里面嵌套一个水平行，放按钮和数字 minus_button, txt_number, plus_button, ], alignment=ft.MainAxisAlignment.CENTER, spacing=20, # 控件之间的间距 ), ft.Container(height=20), # 加一个空容器当间距 reset_button ], alignment=ft.MainAxisAlignment.CENTER, horizontal_alignment=ft.CrossAxisAlignment.CENTER, ) ) # 6. 启动应用 ft.app(target=main) ``` 保存文件，然后在终端运行： ```bash python hello_flet.py ``` 几秒钟后，一个原生的桌面窗口就会弹出来！你会看到一个带有标题的窗口，蓝色的问候语，中间是数字显示框和两个漂亮的圆形加减按钮，下面还有一个重置按钮。点击加减按钮，数字会变化，并且被限制在-10到10之间。整个界面看起来非常现代，完全不像传统Python GUI工具包那种略显陈旧的感觉。 > 注意：`page.update()` 是Flet中一个非常重要的方法。当你改变了某个控件的属性（比如文本框的值`txt_number.value`）后，必须调用它来通知框架：“我改好了，请刷新界面”。忘记调用它，界面上就不会有任何变化。 这个简单的例子包含了Flet应用的核心结构：导入库、定义主函数（接收一个`page`对象）、创建控件、定义事件处理函数、将控件添加到页面布局中、最后启动应用。你已经成功入门了！ ## 3. 深入理解Flet的核心概念 玩转了第一个例子，我们得停下来，好好理解一下Flet的几个核心概念。这能帮你以后自己设计更复杂的界面，而不是只会复制粘贴代码。我把它们比喻成搭积木，理解了这些“积木块”和“搭建规则”，你就能创造任何东西。 **第一个核心：`Page` 对象** 你可以把 `page` 想象成你应用的画布或者舞台。所有东西都放在这上面。在 `main(page)` 函数里，这个 `page` 参数就是Flet框架传给你的舞台控制器。通过它，你可以设置舞台的样式（标题、主题、背景色、内边距），也可以往舞台上添加或移除演员（控件）。我们之前用到的 `page.title`、`page.add()`、`page.update()` 都是它的能力。 **第二个核心：控件（Controls）** 控件就是构成UI的基本元素，比如按钮（`ElevatedButton`, `IconButton`）、文本（`Text`）、输入框（`TextField`）、滑块（`Slider`）、图片（`Image`）等等。Flet提供了极其丰富的控件库，几乎涵盖了所有常见的UI需求。每个控件都有大量的属性（`property`）可以设置，比如颜色、大小、边距、事件回调函数。创建UI的过程，很大程度上就是在创建和配置这些控件对象。 **第三个核心：布局（Layout）** 控件不能胡乱堆在 `page` 上，需要用布局控件来组织。这就像排版，你得决定哪些元素排一行，哪些排一列。最常用的布局控件是 `Row`（水平排列）和 `Column`（垂直排列）。它们可以无限嵌套，一个 `Row` 里面可以放几个 `Column`，一个 `Column` 里又可以包含多个 `Row`，这样就能构建出复杂的网格状界面。布局控件的关键属性是 `alignment`（对齐方式）和 `spacing`（间距），好好利用它们能让你的界面看起来专业又整齐。 **第四个核心：事件（Events）** GUI应用是“事件驱动”的。用户点击按钮、输入文字、移动滑块，都会产生一个“事件”（Event）。我们的代码需要监听这些事件，并做出响应。在Flet里，你只需要在创建控件时，把处理函数赋值给对应的属性即可，比如 `on_click=my_function`。当事件发生时，Flet会自动调用你写的函数，并且会把一个事件对象 `e` 传给你。虽然在这个计数器例子里我们没用到 `e`，但在更复杂的场景，比如要知道是哪个按钮被点了，`e.control` 就能派上用场。 **第五个核心：状态（State）与管理** 计数器例子里的 `txt_number.value` 其实就是一种“状态”——当前显示的数字。Flet应用的状态管理非常直观：**状态就保存在控件自身的属性里**。当事件处理函数修改了这些属性，再调用 `page.update()`，界面就同步更新了。对于小型应用，这种方式简单直接。当然，当应用变得非常庞大，状态错综复杂时，你可能需要考虑更集中的状态管理方案，但Flet也提供了相应的机制（比如 `Ref`），这属于进阶话题，入门阶段我们先用好控件自身状态就足够了。 理解了这五个概念，你再回头看计数器的代码，是不是清晰多了？我们创建了`Text`、`TextField`、`IconButton`等控件，用`Row`和`Column`把它们组织起来，为按钮设置了`on_click`事件处理函数来修改`TextField`的`value`状态，最后通过`page`对象把它们呈现出来。这就是Flet应用的完整逻辑闭环。 ## 4. 从计数器到实用工具：构建一个文件查看器 只会做计数器可不够酷。我们来实战一个更有点用的小工具：一个简单的本地图片查看器。它能让我们选择文件夹，然后以缩略图的形式展示里面的图片，点击还能放大查看。这个例子会用到更多类型的控件和事件。 首先，我们需要一些额外的Python库来处理图片路径和获取缩略图。PIL（Pillow）是个好选择，但为了简化，我们先用Flet自带的`Image`控件显示原图，并假设文件夹里都是图片。在实际项目中，你可能需要处理异常和非图片文件。 ```python import flet as ft import os from pathlib import Path def main(page: ft.Page): page.title = "简易图片查看器" page.theme_mode = ft.ThemeMode.DARK # 这次用暗色主题，看图片更舒服 page.padding = 20 # 用来存放图片缩略图控件的容器，我们用一个可滚动的网格来展示 image_grid = ft.GridView( expand=1, # 让它占据所有可用空间 runs_count=5, # 每行显示5个 max_extent=150, # 每个缩略图的最大尺寸（宽高） spacing=10, # 间距 run_spacing=10, ) # 用来显示大图的对话框 large_image_dialog = ft.AlertDialog( modal=True, # 模态对话框，点击外部不关闭 on_dismiss=lambda e: print("对话框关闭"), ) def open_directory(e: ft.FilePickerResultEvent): """打开文件夹选择器，并加载图片""" if e.path: directory_path = e.path # 清空之前的缩略图 image_grid.controls.clear() # 获取目录下所有文件 try: files = os.listdir(directory_path) image_extensions = {'.jpg', '.jpeg', '.png', '.gif', '.bmp', '.webp'} for file in files: file_path = Path(directory_path) / file if file_path.suffix.lower() in image_extensions: # 为每张图片创建一个“卡片”控件 card = ft.Container( content=ft.Column([ # 缩略图，这里简单使用原图，实际应用应生成缩略图 ft.Image( src=str(file_path), width=140, height=100, fit=ft.ImageFit.COVER, border_radius=ft.border_radius.all(5), ), ft.Text(file, size=12, overflow=ft.TextOverflow.ELLIPSIS), ], tight=True, alignment=ft.MainAxisAlignment.CENTER, horizontal_alignment=ft.CrossAxisAlignment.CENTER, ), padding=5, border_radius=ft.border_radius.all(10), bgcolor=ft.colors.WHITE10, on_click=lambda e, path=file_path: show_large_image(path), # 注意这里！我们通过lambda传递了具体的file_path data=file_path, # 另一种传递数据的方式：控件的data属性 ) image_grid.controls.append(card) page.update() page.snack_bar = ft.SnackBar(ft.Text(f"已加载 {len(image_grid.controls)} 张图片")) page.snack_bar.open = True page.update() except Exception as ex: print(f"读取目录出错: {ex}") def show_large_image(image_path): """在对话框中显示大图""" large_image_dialog.title = ft.Text(Path(image_path).name) large_image_dialog.content = ft.Image( src=str(image_path), fit=ft.ImageFit.CONTAIN, width=600, height=400, ) page.dialog = large_image_dialog large_image_dialog.open = True page.update() # 创建文件选择器控件（它本身不显示，需要“挂载”到page上） file_picker = ft.FilePicker(on_result=open_directory) page.overlay.append(file_picker) # 将文件选择器添加到页面覆盖层 # 创建选择文件夹按钮 select_button = ft.ElevatedButton( "选择图片文件夹", icon=ft.icons.FOLDER_OPEN, on_click=lambda _: file_picker.get_directory_path(dialog_title="选择包含图片的文件夹"), ) # 组装页面 page.add( ft.Row([select_button], alignment=ft.MainAxisAlignment.CENTER), ft.Divider(height=20, color=ft.colors.TRANSPARENT), # 用透明分割线当间距 ft.Text("图片缩略图区域", size=16, weight=ft.FontWeight.BOLD), ft.Container( content=image_grid, border=ft.border.all(1, ft.colors.OUTLINE), border_radius=10, padding=10, expand=True, # 容器会扩展以填充可用空间 ), ) ft.app(target=main) ``` 这个例子比计数器复杂不少，我们引入了几个新东西： 1. **`ft.FilePicker`**： 这是Flet提供的文件选择器控件。它比较特殊，需要先通过 `page.overlay.append()` 添加到页面覆盖层，然后通过调用它的 `get_directory_path()` 方法来触发系统文件夹选择对话框。 2. **`ft.GridView`**： 网格视图控件，非常适合用来展示图片库、商品列表等。通过 `runs_count` 和 `max_extent` 可以轻松控制每行显示多少个以及每个项目的大小。 3. **`ft.AlertDialog`**： 对话框控件，用于弹出模态窗口显示大图。通过设置 `page.dialog` 和 `open=True` 来显示它。 4. **`ft.SnackBar`**： 屏幕底部弹出的轻量级提示，用来反馈操作结果（如加载了多少张图）。 5. **事件传参**： 注意 `on_click=lambda e, path=file_path: show_large_image(path)` 这行。因为我们在循环中创建多个卡片，需要让每个卡片的点击事件知道自己对应哪张图片。这里用 `lambda` 函数和默认参数 `path=file_path` 把当前循环的 `file_path` “冻结”并传递给事件处理函数，这是一个非常实用的技巧。 6. **控件的 `data` 属性**： 每个控件都有一个 `data` 属性，你可以把任何Python对象（比如这里的文件路径）存进去，在事件处理函数中通过 `e.control.data` 取出来。这是另一种传递上下文数据的方法。 运行这个程序，点击“选择图片文件夹”，选择一个存放了图片的目录，你会看到缩略图以网格形式加载出来。点击任意一张缩略图，会弹出一个对话框显示该图片的大图。虽然功能还比较基础（比如没有真正的缩略图生成，加载大量图片可能会卡），但它已经具备了一个实用工具的基本形态。你可以在此基础上，继续添加图片旋转、筛选、幻灯片播放等功能。 ## 5. 打包与分发：让你的应用独立运行 开发好的应用，总不能每次都让用户打开终端输入 `python your_app.py` 吧？我们需要把它打包成一个独立的、可以双击执行的应用程序。Flet在这方面也提供了极其简单的支持。 Flet应用默认运行在一个内嵌的Flutter引擎中，这本身就为打包带来了便利。最直接的方式是使用Flet CLI（命令行工具）进行打包。首先，确保你安装了最新版的Flet，然后打开终端，进入你的项目目录。 **方法一：使用 `flet pack` 命令（推荐）** 这是Flet官方推荐的打包方式，它背后调用的是Flutter的打包工具，能生成非常干净的原生应用包。 ```bash # 假设你的主程序文件是 main.py flet pack main.py ``` 执行这个命令，Flet CLI会自动完成一系列操作：安装必要的Flutter打包环境、收集你的Python代码和依赖、构建应用。这个过程第一次运行可能会花点时间，因为它需要下载Flutter SDK和编译工具。完成后，你会在当前目录下找到一个 `build` 文件夹，里面就有打包好的应用。 对于更精细的控制，你可以使用 `--icon` 参数指定应用图标，用 `--name` 指定应用名称： ```bash flet pack main.py --name "我的酷炫应用" --icon assets/app_icon.png ``` `flet pack` 会根据你的操作系统生成对应的包：在Windows上生成 `.exe` 安装程序或可执行文件，在macOS上生成 `.dmg` 或 `.app`，在Linux上生成 `.deb` 或 `.AppImage`。你可以把这个包直接发给别人安装使用，他们不需要安装Python或任何依赖。 > 提示：在打包之前，建议将项目依赖整理到一个 `requirements.txt` 文件中。在项目根目录运行 `pip freeze > requirements.txt`，Flet在打包时会自动识别并安装这些依赖。 **方法二：作为Web应用部署** 如果你希望用户通过浏览器就能访问你的应用，那更简单。还记得计数器例子最后提到的 `view=ft.AppView.WEB_BROWSER` 参数吗？你可以在开发时就用这个模式运行，或者，Flet应用天生就可以部署为Web应用。 你可以使用Flet的托管服务，或者自己部署。一个快速测试的方法是使用 `flet run` 命令并指定主机和端口： ```bash flet run main.py --web ``` 这会在本地启动一个Web服务器，并打开浏览器。如果你想让局域网内的其他设备也能访问，可以： ```bash flet run main.py --web --host 0.0.0.0 --port 8500 ``` 然后，同一网络下的手机或电脑，就可以通过你的IP地址和端口（如 `http://192.168.1.100:8500`）来访问这个应用了。对于生产环境部署，你可以使用Gunicorn（配合Flask/ASGI适配器）或任何支持ASGI的服务器来部署你的Flet应用，就像部署一个普通的Python Web应用一样。 **打包时可能遇到的“坑”** 我踩过几个坑，分享给你可以省点时间。首先是**静态文件路径问题**。如果你的应用用到了本地图片、字体等资源，在开发时用相对路径（如 `./assets/photo.png`）可能没问题，但打包后应用所在目录会变化，导致找不到文件。**正确的做法是使用 `os.path.join` 或 `pathlib` 来构建基于应用运行目录的绝对路径**，或者将资源文件放在一个特定位置，并在代码中做兼容处理。 其次是**依赖库的兼容性**。有些Python库（特别是包含C扩展的，如NumPy、Pandas）在不同平台（Windows/macOS/Linux）上可能需要单独处理。确保你在目标平台上测试打包，或者使用CI/CD工具进行多平台构建。 最后是**应用体积**。由于打包了Python解释器、Flet框架和Flutter引擎，生成的应用体积会比纯Python脚本大。一个简单的“Hello World”应用可能就有几十MB。这是为了获得原生体验和零依赖部署所付出的代价。对于复杂的工具型应用，这个体积通常是可接受的。 ## 6. 进阶技巧与最佳实践 当你熟悉了Flet的基本操作后，掌握一些进阶技巧和最佳实践，能让你的开发效率更高，应用质量更好。 **1. 使用 `Ref` 管理复杂状态** 在计数器例子中，我们直接通过变量名 `txt_number` 来访问控件。这在简单场景下没问题。但当你的应用有多个函数都需要修改同一个控件，或者控件是在动态创建的时候，直接引用变量可能变得困难或混乱。这时可以使用 `Ref`。 `Ref` 就像一个“遥控器”或者“指针”，它允许你在定义控件之后，再在其他地方获取到它。修改一下计数器的例子： ```python import flet as ft def main(page: ft.Page): page.title = "使用Ref的计数器" txt_number_ref = ft.Ref[ft.TextField]() # 创建一个对TextField的引用 def minus_click(e): # 通过 .current 属性获取被引用的实际控件 current_value = int(txt_number_ref.current.value) txt_number_ref.current.value = str(current_value - 1) page.update() def plus_click(e): current_value = int(txt_number_ref.current.value) txt_number_ref.current.value = str(current_value + 1) page.update() # 创建控件时，通过 `ref` 参数将其赋值给引用对象 txt_number = ft.TextField(value="0", text_align=ft.TextAlign.CENTER, width=100, ref=txt_number_ref) page.add( ft.Row( [ ft.IconButton(ft.icons.REMOVE, on_click=minus_click), txt_number, # 这里仍然添加的是控件本身 ft.IconButton(ft.icons.ADD, on_click=plus_click), ], alignment=ft.MainAxisAlignment.CENTER, ) ) ft.app(target=main) ``` 看起来代码变多了？但在大型应用中，尤其是在事件处理函数和控件创建逻辑分离时，`Ref` 能提供更清晰的状态管理路径，避免在全局到处寻找控件变量。 **2. 利用主题保持界面一致** Flet支持明暗主题，并且可以自定义主题。通过 `page.theme` 和 `page.dark_theme`，你可以统一设置应用的色彩、字体、组件样式。 ```python page.theme = ft.Theme( color_scheme=ft.ColorScheme( primary=ft.colors.BLUE_ACCENT, secondary=ft.colors.PINK_ACCENT, ), text_theme=ft.TextTheme(body_large=ft.TextStyle(font_family="Arial")), ) page.theme_mode = ft.ThemeMode.LIGHT # 或 DARK, SYSTEM ``` 定义好主题后，控件会自动使用主题中定义的主色、副色等，让你的应用拥有统一的视觉风格。 **3. 响应式布局** 你的应用可能会在不同尺寸的屏幕或窗口上运行。Flet控件提供了 `expand`、`width`、`height`、`col`（在 `Row`/`Column` 中定义弹性宽度）等属性来创建响应式布局。例如，设置 `expand=True` 的控件会填充所有可用空间。结合 `ft.Row` 和 `ft.Column` 的 `wrap` 属性，可以实现当空间不足时自动换行，这对于构建适配移动端或调整窗口大小时非常有用。 **4. 异步操作与长时间任务** 如果你的应用需要执行网络请求、读取大文件等耗时操作，千万不要在主UI线程（也就是事件处理函数里）直接做！这会阻塞界面，导致应用“卡死”。Flet完全支持Python的 `asyncio`。你可以使用 `async/await` 来编写异步事件处理函数，或者使用 `threading` 模块在后台线程执行任务，然后通过 `page.update()` 回到主线程更新UI。 ```python import asyncio import flet as ft async def main(page: ft.Page): async def long_running_task_click(e): loading_indicator.visible = True page.update() # 模拟一个耗时操作 await asyncio.sleep(3) result_text.value = "任务完成！" loading_indicator.visible = False page.update() result_text = ft.Text() loading_indicator = ft.ProgressRing(visible=False) page.add( ft.ElevatedButton("运行耗时任务", on_click=long_running_task_click), loading_indicator, result_text ) ft.app(target=main, view=ft.AppView.FLET_APP) # 注意：异步应用需要使用特定的启动方式 ``` **5. 调试与开发工具** 在开发过程中，你可以通过 `flet run --debug` 启动应用，这会在控制台输出更详细的日志。另外，Flet Inspector是一个强大的可视化调试工具，可以查看UI控件树、实时修改控件属性。在运行应用时，按 `Ctrl+Shift+I`（Windows/Linux）或 `Cmd+Shift+I`（macOS）即可打开，对于排查布局问题非常有帮助。 学习Flet的过程，就像是在解锁一个又一个的积木块。从最简单的控件开始，慢慢组合成行和列，再加上事件交互，最后用主题和布局技巧打磨外观。我自己的经验是，多看看官方示例库（Flet GitHub仓库的`examples`目录），里面包含了从简单到复杂的各种案例，遇到想实现的效果但不知道用什么控件时，去那里找找灵感，往往事半功倍。