Python Flet框架入门：构建跨平台桌面与Web应用的现代GUI指南

原文链接：https://www.pythonguis.com/tutorials/getting-started-flet/ 作者：Leo Well 译者：倔强青铜三

认识 Flet

Flet 是一个强大的 Python 跨平台 GUI 框架，用于开发交互式应用程序。它的独特之处在于，开发者只需使用 Python 就能构建出既可作为 Windows、macOS 和 Linux 原生桌面应用运行，又可在浏览器中直接访问，甚至能打包为移动应用的程序。这一切都得益于 Flet 底层基于 Flutter 实现，为用户界面提供了现代化的视觉效果和响应式布局能力。

对于开发者而言，这意味着你无需额外学习 Dart、Flutter 或移动开发知识。从业务逻辑到界面布局，所有代码都可以用纯 Python 编写。使用 Flutter 作为基础带来的核心优势是“一次编写，到处部署”，应用程序无需为不同平台修改核心代码。

此外，Flet 框架内置了对线程和异步操作的良好支持，使得处理耗时任务或在后台更新 UI 变得简单，有效避免了界面卡顿的问题。

安装 Flet

Flet 可以通过 pip 包管理器轻松安装。建议在虚拟环境中进行安装，以保持项目依赖的独立性。安装命令如下：

pip install flet

编写你的第一个 Flet GUI 应用

Flet 采用了类似 Flutter 的“控件”（Controls）模型来构建用户界面。你可以将各种预制的 UI 元素（即控件）组合在一起，形成完整的应用。

让我们从一个经典的“Hello World”程序开始。创建一个名为 main.py 的文件，并写入以下代码：

main.py

import flet as ft

def main(page: ft.Page):
    page.title = "Flet 第一个应用"
    page.window.width = 200
    page.window.height = 100
    page.add(ft.Text(value="Hello, world!"))

ft.app(target=main)

保存后，在终端运行这个程序：

python main.py

你将看到一个带有“Hello, world!”文本的窗口弹出，这就是你的第一个 Flet 应用。

它是如何工作的

Flet 应用程序通过调用 ft.app() 函数启动。这个函数负责初始化事件循环并打开应用程序窗口。我们传递给它的 target 参数是一个函数（本例中是 main），在这个函数内部进行 UI 的构建。

该函数接收一个 page 对象作为参数，这个对象是应用的根容器，所有控件都添加在它上面，应用的基础配置也通过它来完成。

• page.title 用于设置窗口标题。
• page.window.width 和 page.window.height 用于设置窗口的初始尺寸。
• page.add() 方法则用于向页面中添加控件。在这里，我们添加了一个简单的 ft.Text 控件来显示文本。

默认情况下，Flet 应用以原生桌面窗口的形式启动。如果你想在浏览器中运行它，可以在 ft.app() 调用中添加 view=ft.WEB_BROWSER 参数，应用就会在默认的网页浏览器中打开。

探索 Flet 控件（小部件）

Flet 提供了丰富多样的预构建控件，足以应对大部分 GUI 开发需求。这些控件被系统性地分为按钮、输入选择、导航、信息显示等多个类别。

让我们通过实例来熟悉其中一些最常用的控件。

按钮

按钮是任何交互式应用的基础。Flet 提供了多种按钮类型，包括文本按钮、悬浮按钮、图标按钮等。

下面是一个创建基础文本按钮的示例：

import flet as ft

def main(page: ft.Page):
    page.title = "Flet 按钮示例"
    page.window.width = 400
    page.window.height = 200

    # 创建一个按钮
    button = ft.TextButton("点击我", on_click=lambda e: print("按钮被点击了！"))

    page.add(button)

ft.app(target=main)

你还可以轻松地创建带有图标的按钮，让界面更加直观：

import flet as ft

def main(page: ft.Page):
    page.title = "Flet 图标按钮示例"
    page.window.width = 400
    page.window.height = 200

    # 创建一个带图标的按钮
    icon_button = ft.IconButton(
        icon=ft.icons.FAVORITE,
        icon_color=ft.colors.PINK,
        icon_size=40,
        on_click=lambda e: print("图标按钮被点击了！"),
    )

    page.add(icon_button)

ft.app(target=main)

输入和选择

构建表单或收集用户输入时，输入和选择控件必不可少。Flet 为此提供了文本框、复选框、开关、下拉菜单等。

创建一个复选框的示例如下：

import flet as ft

def main(page: ft.Page):
    page.title = "Flet 复选框示例"
    page.window.width = 400
    page.window.height = 200

    # 创建一个复选框
    checkbox = ft.Checkbox(
        label="同意条款和条件",
        value=False,
        on_change=lambda e: print(f"复选框状态: {e.control.value}"),
    )

    page.add(checkbox)

ft.app(target=main)

下拉菜单（Dropdown）则适用于从多个选项中选择其一：

import flet as ft

def main(page: ft.Page):
    page.title = "Flet 下拉菜单示例"
    page.window.width = 400
    page.window.height = 200

    # 创建一个下拉菜单
    dropdown = ft.Dropdown(
        width=200,
        options=[
            ft.dropdown.Option("选项 1"),
            ft.dropdown.Option("选项 2"),
            ft.dropdown.Option("选项 3"),
        ],
        on_change=lambda e: print(f"下拉菜单选择: {e.control.value}"),
    )

    page.add(dropdown)

ft.app(target=main)

信息显示与导航

对于需要调整数值或显示进度的场景，滑块（Slider）和进度条（ProgressBar）非常有用。

创建滑块的代码：

import flet as ft

def main(page: ft.Page):
    page.title = "Flet 滑块示例"
    page.window.width = 400
    page.window.height = 200

    # 创建一个滑块
    slider = ft.Slider(
        min=0,
        max=100,
        value=50,
        on_change=lambda e: print(f"滑块值: {e.control.value}"),
    )

    page.add(slider)

ft.app(target=main)

创建进度条则更简单：

import flet as ft

def main(page: ft.Page):
    page.title = "Flet 进度条示例"
    page.window.width = 400
    page.window.height = 200

    # 创建一个进度条
    progress_bar = ft.ProgressBar(width=400)

    page.add(progress_bar)

ft.app(target=main)

在需要组织多内容视图时，标签页（Tabs）是常见的选择：

import flet as ft

def main(page: ft.Page):
    page.title = "Flet 标签页示例"
    page.window.width = 400
    page.window.height = 200

    # 创建标签页
    tabs = ft.Tabs(
        selected_index=0,
        tabs=[
            ft.Tab(text="标签页 1", content=ft.Text("这是标签页 1 的内容")),
            ft.Tab(text="标签页 2", content=ft.Text("这是标签页 2 的内容")),
        ],
    )

    page.add(tabs)

ft.app(target=main)

使用 Flet 布局 GUI

仅仅有控件还不够，如何将它们有序地排列在界面上同样关键。Flet 提供了多种布局控件，其中最核心的是用于垂直排列的 Column（列）和用于水平排列的 Row（行）。

通过组合使用 Column 和 Row，你可以构建出复杂的界面布局。下面是一个模拟简单注册表单的示例：

import flet as ft

def main(page: ft.Page):
    page.title = "Flet 布局示例"
    page.window.width = 400
    page.window.height = 400

    # 创建一个列布局，其中包含多个行
    column = ft.Column(
        [
            ft.Row(
                [
                    ft.Text("姓名："),
                    ft.TextField(width=200),
                ]
            ),
            ft.Row(
                [
                    ft.Text("电子邮件："),
                    ft.TextField(width=200),
                ]
            ),
            ft.Row(
                [
                    ft.Text("密码："),
                    ft.TextField(width=200, password=True, can_reveal_password=True),
                ]
            ),
            ft.Row(
                [
                    ft.ElevatedButton("提交", on_click=lambda e: print("提交按钮被点击了！")),
                    ft.ElevatedButton("取消", on_click=lambda e: print("取消按钮被点击了！")),
                ]
            ),
        ]
    )

    page.add(column)

ft.app(target=main)

在这个例子中，最外层的 Column 垂直堆叠了四个 Row。每个 Row 内部又水平放置了一个标签和一个输入框（或按钮），从而形成了一个结构清晰、排列整齐的表单界面。

使用回调处理事件

没有交互的界面是静态的。Flet 通过回调函数机制来处理用户触发的事件，例如按钮点击、输入变更等。

回调函数可以在创建控件时指定。下面是一个经典的例子：点击按钮，改变屏幕上显示的文本。

import flet as ft

def main(page: ft.Page):
    page.title = "Flet 事件处理示例"
    page.window.width = 400
    page.window.height = 200

    # 创建一个文本控件用于显示消息
    text = ft.Text("按钮未被点击")

    # 定义回调函数
    def text_change(e):
        text.value = "按钮被点击了！"
        page.update()

    # 创建一个按钮并绑定回调函数
    button = ft.ElevatedButton(
        "点击我",
        on_click=lambda e: text_change(e),
    )

    # 将控件添加到页面
    page.add(text)
    page.add(button)

ft.app(target=main)

这段代码的逻辑是：

1. 定义了一个 text_change 函数作为回调。当事件发生时，它会将 text 控件的值更新为新的字符串。
2. 在创建 ElevatedButton 时，通过 on_click 参数将这个回调函数绑定到按钮的点击事件上。
3. 回调函数执行后，必须调用 page.update() 来通知框架刷新用户界面，否则视觉上的更改不会生效。

结论

Flet 作为一个建立在 Flutter 强大生态之上的 Python GUI 框架，为开发者提供了构建现代、美观且真正跨平台应用程序的高效工具。它通过丰富的预制控件、灵活的布局系统和直观的事件处理机制，显著降低了 GUI 开发的门槛。

本指南带你初步了解了 Flet 的安装、第一个应用的创建、常用控件的使用、布局的组合以及事件的响应。这些是使用 Flet 进行开发的基石。

要深入探索 Flet 的更多高级特性，如主题定制、动画、路由导航以及部署到移动端等，强烈建议查阅其详尽且不断更新的官方文档：https://flet.dev/docs/

祝你使用 Flet 顺利构建出令人印象深刻的应用！