一、Flet 框架简介
Flet 是一个基于 Flutter 的 Python GUI 框架，允许开发者使用纯 Python 代码构建跨平台（桌面、Web、移动）的交互式应用，无需掌握前端技术（如 HTML/CSS/JS）。其核心特点包括：
跨平台运行：一次编写，可在 Windows、macOS、Linux、Web 浏览器及 iOS/Android 设备上运行；
热重载：开发时修改代码实时生效，提升开发效率；
丰富组件库：内置大量 UI 组件（按钮、输入框、表格等），支持自定义样式；
简单易用：API 设计简洁，入门门槛低，适合 Python 开发者快速构建 GUI 应用。
二、Flet 安装与基本工作流程
1.安装：通过 pip 安装
pip install flet[all] -i https://pypi.tuna.tsinghua.edu.cn/simple
2.基本流程：
a.导入flet 模块；
b.定义main 函数（接收page 对象，page 代表应用窗口 / 页面）；
c.在main 中通过page.add() 添加组件，通过page.update() 更新界面；
d.调用flet.app(target=main) 启动应用。
三、10 个核心组件代码实例及效果
1. Text（文本组件）
功能：显示文本，支持自定义颜色、大小、字体等样式。
import flet as ft
def main(page: ft.Page):
page.title = "Text组件示例"
# 添加不同样式的文本
page.add(
ft.Text("默认文本"),
ft.Text("红色粗体文本", color="red", weight=ft.FontWeight.BOLD),
ft.Text("20号蓝色斜体", size=20, color="blue", italic=True),
ft.Text("居中对齐文本", text_align=ft.TextAlign.CENTER, width=300)
)
ft.app(target=main)
|
显示效果：
窗口中依次显示 4 行文本，分别为默认样式、红色粗体、20 号蓝色斜体、300px 宽居中对齐的文本。
2. ElevatedButton（悬浮按钮）
功能：点击触发事件，支持自定义文本、颜色和点击回调。
import flet as ft
def main(page: ft.Page):
page.title = "ElevatedButton示例"
# 点击按钮时更新文本
def on_click(e):
status_text.value = "按钮被点击了！"
page.update() # 更新界面
status_text = ft.Text("等待点击...")
btn = ft.ElevatedButton(
text="点击我",
on_click=on_click,
bgcolor="green", # 按钮背景色
color="white" # 按钮文本色
)
page.add(btn, status_text)
ft.app(target=main)
|
显示效果：
窗口显示一个绿色背景、白色文本的按钮，下方有一行“等待点击...” 的文本；点击按钮后，文本变为 “按钮被点击了！”。
3. TextField（文本输入框）
功能：接收用户输入，支持获取输入值、限制长度、密码模式等。
import flet as ft
def main(page: ft.Page):
page.title = "TextField示例"
def on_submit(e):
# 获取输入框的值并显示
result.value = f"你输入了：{input_field.value}"
page.update()
input_field = ft.TextField(
label="请输入内容", # 提示文本
hint_text="最多输入10个字符",
max_length=10, # 最大长度
password=False, # 是否密码模式（True则显示圆点）
on_submit=on_submit # 按下回车时触发
)
result = ft.Text()
page.add(input_field, result)
ft.app(target=main)
|
显示效果：
窗口显示一个带提示文本的输入框，下方为空白文本；在输入框中输入内容并按回车，下方文本会显示输入的内容（超过 10 字符会被截断）。
4. Checkbox（复选框）
功能：支持勾选 / 取消勾选，常用于多选场景。
import flet as ft
def main(page: ft.Page):
page.title = "Checkbox示例"
def on_checkbox_change(e):
# 收集所有勾选的选项
selected = [cb.label for cb in checkboxes if cb.value]
result.value = f"选中：{', '.join(selected)}"
page.update()
# 创建3个复选框
checkboxes = [
ft.Checkbox(label="选项1", on_change=on_checkbox_change),
ft.Checkbox(label="选项2", on_change=on_checkbox_change),
ft.Checkbox(label="选项3", on_change=on_checkbox_change)
]
result = ft.Text()
page.add(*checkboxes, result)
ft.app(target=main)
|
显示效果：
窗口显示 3 个带标签的复选框，下方为空白文本；勾选 / 取消勾选时，下方文本实时显示当前选中的选项（如 “选中：选项 1, 选项 3”）。
5. RadioGroup（单选组）
功能：从多个选项中选择一个，支持互斥选择。
import flet as ft
def main(page: ft.Page):
page.title = "RadioGroup示例"
def on_radio_change(e):
result.value = f"选中：{radio_group.value}"
page.update()
# 定义单选选项（value为选项值，label为显示文本）
radio_group = ft.RadioGroup(
content=ft.Column([
ft.Radio(value="A", label="选项A"),
ft.Radio(value="B", label="选项B"),
ft.Radio(value="C", label="选项C")
]),
on_change=on_radio_change
)
result = ft.Text()
page.add(radio_group, result)
ft.app(target=main)
|
显示效果：
窗口显示 3 个单选按钮（选项 A、B、C），下方为空白文本；选择某一选项后，下方文本显示选中的选项值（如 “选中：B”）。
6. Dropdown（下拉选择框）
功能：从下拉列表中选择一个选项，节省界面空间。
import flet as ft
def main(page: ft.Page):
page.title = "Dropdown示例"
def on_change(e):
result.value = f"选择了：{dropdown.value}"
page.update()
# 定义下拉选项（key为值，value为显示文本）
dropdown = ft.Dropdown(
label="选择城市",
options=[
ft.dropdown.Option(key="bj", text="北京"),
ft.dropdown.Option(key="sh", text="上海"),
ft.dropdown.Option(key="gz", text="广州")
],
on_change=on_change
)
result = ft.Text()
page.add(dropdown, result)
ft.app(target=main)
|
显示效果：
窗口显示一个带“选择城市” 提示的下拉框，点击后展开选项列表（北京、上海、广州）；选择后，下方文本显示选中的城市（如 “选择了：上海”）。
7. Image（图片组件）
功能：加载并显示本地或网络图片。
import flet as ft
def main(page: ft.Page):
page.title = "Image示例"
# 网络图片（需联网）
network_img = ft.Image(
src="https://picsum.photos/200/200", # 示例图片URL
width=200,
height=200,
fit=ft.ImageFit.COVER # 图片填充方式（COVER为裁剪填充）
)
# 本地图片（替换为你的本地路径）
# local_img = ft.Image(src="local_image.jpg", width=200, height=200)
page.add(ft.Text("网络图片示例："), network_img)
ft.app(target=main)
|
显示效果：
窗口显示一行“网络图片示例：” 文本，下方为一张 200x200 像素的网络图片（若联网正常，显示随机示例图）。
8. ListView（列表视图）
功能：展示可滚动的列表，支持大量数据。
import flet as ft
def main(page: ft.Page):
page.title = "ListView示例"
page.scroll = ft.ScrollMode.AUTO # 允许页面滚动
# 创建包含20个文本项的列表
items = [ft.Text(f"列表项 {i}") for i in range(1, 21)]
# 列表视图（垂直排列，支持滚动）
list_view = ft.ListView(
controls=items, # 列表项
spacing=10, # 项间距
padding=20, # 内边距
height=300 # 列表高度（超出则滚动）
)
page.add(ft.Text("可滚动列表："), list_view)
ft.app(target=main)
|
显示效果：
窗口显示“可滚动列表：” 文本，下方为一个 300px 高的列表，包含 20 行 “列表项 X” 文本；列表超出高度部分可通过鼠标滚轮或拖动滚动条查看。
9. DataTable（数据表格）
功能：展示结构化数据，支持表头、多行数据。
import flet as ft
def main(page: ft.Page):
page.title = "DataTable示例"
# 定义表格数据
data_table = ft.DataTable(
columns=[
ft.DataColumn(ft.Text("ID")),
ft.DataColumn(ft.Text("名称")),
ft.DataColumn(ft.Text("价格"))
],
rows=[
ft.DataRow(cells=[ft.DataCell(ft.Text("1")), ft.DataCell(ft.Text("苹果")), ft.DataCell(ft.Text("5.99"))]),
ft.DataRow(cells=[ft.DataCell(ft.Text("2")), ft.DataCell(ft.Text("香蕉")), ft.DataCell(ft.Text("3.50"))]),
ft.DataRow(cells=[ft.DataCell(ft.Text("3")), ft.DataCell(ft.Text("橙子")), ft.DataCell(ft.Text("4.99"))])
]
)
page.add(ft.Text("商品列表："), data_table)
ft.app(target=main)
|
显示效果：
10. Slider（滑块组件）
功能：通过拖动滑块选择数值，支持范围限制。
import flet as ft
def main(page: ft.Page):
page.title = "Slider示例"
def on_slider_change(e):
value_text.value = f"当前值：{slider.value:.1f}" # 保留1位小数
page.update()
slider = ft.Slider(
min=0, # 最小值
max=100, # 最大值
value=50, # 初始值
divisions=10, # 分成10份（每步10）
on_change=on_slider_change
)
value_text = ft.Text(f"当前值：{slider.value:.1f}")
page.add(slider, value_text)
ft.app(target=main)
|
显示效果：
窗口显示一个横向滑块（范围 0-100，初始在 50），下方文本显示 “当前值：50.0”；拖动滑块时，文本实时更新为当前滑块位置的数值（如 “当前值：70.0”）。
四、总结
Flet 凭借跨平台特性和简洁的 API，成为 Python 开发者构建 GUI 应用的高效选择。上述 10 个组件覆盖了文本显示、用户输入、数据展示等常见场景，通过组合这些组件，可快速开发功能丰富的交互式应用。