Flet 跨平台应用开发实战：用 Python 构建 Android iOS Web 应用

为什么是 Flet？

如果你是 Python 开发者，常会遇到这样的痛点：脚本写得很溜，但需要交付一个可视化界面；或者想把数据分析结果做成手机 App 给客户看。传统的 Python GUI 库（Tkinter, Qt）在移动端支持较弱。

Flet 的核心逻辑是： 你负责写 Python（处理数据、逻辑），Flet 负责在后台调用 Flutter 引擎画出漂亮的界面。你不需要懂 CSS 布局，也不需要配置复杂的安卓环境（开发阶段）。

架构原理：Python 怎么指挥 Flutter？

Flet 采用的是 Server-Driven UI (服务端驱动 UI) 模式。你的 Python 代码其实是一个'服务端'，而显示界面的窗口其实是一个'Flutter 客户端'。

工作流示意图：

flowchart LR
    A[Python 端] -->|WebSocket/HTTP| B(Flet Server)
    B -->|更新指令 | C(UI 端 Flutter 引擎)
    C -->|用户点击事件 | D[业务逻辑]
    D -->|page.update| C

这种架构的好处是：极快。Python 修改属性，界面毫秒级刷新，开发体验极佳。

极速上手：写一个计数器 App

安装 Flet：

pip install flet 

新建 main.py。你会发现，它的写法非常像 React，但是是 Python 版本的。

import flet as ft

def main(page: ft.Page):
    # 1. 设置页面基础属性
    page.title = "Flet 计数器"
    page.vertical_alignment = ft.MainAxisAlignment.CENTER
    page.theme_mode = ft.ThemeMode.LIGHT  # 支持深色/浅色模式切换

    # 2. 定义状态变量
    txt_number = ft.TextField(value="0", text_align=ft.TextAlign.RIGHT, width=100)

    # 3. 定义交互逻辑
    def minus_click(e):
        txt_number.value = str(int(txt_number.value) - 1)
        page.update()  # 类似 React 的 setState，通知界面刷新

    def plus_click(e):
        txt_number.value = str(int(txt_number.value) + 1)
        page.update()

    # 4. 组装 UI (搭积木)
    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)