【易上手快捷开发新框架技术】Flet框架:天生丽质快速高效开发现代时尚pythongui应用的理想选择示例代码IDE运行通过

前言

Flet 框架凭借其简洁的语法、强大的功能和高度灵活性，成为快速构建现代 GUI 应用的热门框架工具和理想选择。

一、核心优势深度解读

以下从技术角度深度解读其核心优势：

---

1.控件体系与属性设计

1.10丰富的内置控件库

Flet 提供了Button,TextField,Row/Column,ListView,DataTable等覆盖基础交互和复杂布局的控件，每个控件都暴露了精细的属性，方便开发者进行定制化开发。

import flet as ft

def main(page: ft.Page):
    # 创建一个按钮控件，设置文本、图标、颜色、背景颜色和点击事件
    submit_btn = ft.ElevatedButton(
        text="提交",
        icon=ft.Icons.CHECK,
        color="white",
        bgcolor="blue",
        on_click=lambda e: print("提交按钮被点击")
    )
    page.add(submit_btn)

ft.app(target=main)

在这个示例中，我们创建了一个ElevatedButton控件，设置了它的文本、图标、颜色、背景颜色，并绑定了一个点击事件。当按钮被点击时，会触发on_click回调函数，打印出"提交按钮被点击"。

1.11 样式属性

Flet 提供了丰富的样式属性，如width,height,padding,border_radius,gradient等，可以实现像素级的样式控制。

import flet as ft

def main(page: ft.Page):
    # 使用 LinearGradient 替代 Gradient
    container = ft.Container(
        content=ft.Text("样式示例"),
        width=200,
        height=100,
        padding=10,
        border_radius=10,
        gradient=ft.LinearGradient(  # 修改这里
            begin=ft.alignment.center_left,   # 渐变起点
            end=ft.alignment.center_right,    # 渐变终点
            colors=["red", "blue"]            # 颜色从红到蓝
        )
    )
    page.add(container)

ft.app(target=main)

这个示例创建了一个Container控件，设置了它的宽度、高度、内边距、圆角和渐变背景。通过这些样式属性，可以实现丰富的视觉效果。

1.12 交互属性

Flet 支持多种交互属性，如on_click,on_change等事件钩子，可以绑定异步回调函数，实现复杂的交互逻辑。

import flet as ft

def main(page: ft.Page):
    # 创建一个文本输入框控件，设置提示文本和改变事件
    text_field = ft.TextField(
        hint_text="输入内容",
        on_change=lambda e: print(f"文本输入框内容改变为: {e.control.value}")
    )
    page.add(text_field)

ft.app(target=main)

在这个示例中，我们创建了一个TextField控件，设置了提示文本，并绑定了一个on_change事件。当文本输入框的内容发生改变时，会触发回调函数，打印出当前的文本内容。

1.2 深度自定义能力

1.20 组合控件

通过嵌套Row/Column/Stack等布局控件，可以快速构建复杂的 UI 界面。

import flet as ft

def main(page: ft.Page):
    # 创建一个组合控件，包含图片和文本框
    stack = ft.Stack(
        [
            ft.Image(
                src=f"https://picsum.photos/300/300",
                width=300,
                height=300,
                fit=ft.ImageFit.CONTAIN,
            ),
            ft.Column(
                [
                    ft.Text("标题", size=20),
                    ft.TextField(hint_text="输入内容")
                ],
                alignment=ft.MainAxisAlignment.CENTER
            )
        ],
        width=300,
        height=300
    )
    page.add(stack)

ft.app(target=main)

这个示例使用Stack控件将一个图片和一个包含文本和文本框的列布局组合在一起，创建了一个具有层次感的界面布局。

1.21 自定义控件

继承ft.ElevatedButton可以创建可复用的独立组件，封装内部状态和逻辑。

import flet as ft

class MyButton(ft.ElevatedButton):
    def __init__(self, text):
        super().__init__()
        self.bgcolor = ft.Colors.ORANGE_300
        self.color = ft.Colors.GREEN_800
        self.text = text

def main(page: ft.Page):
    # 使用自定义控件
    custom_btn1 = MyButton(text="按钮1")
    custom_btn2 = MyButton(text="按钮2")
    page.add(custom_btn1, custom_btn2)

ft.app(target=main)

在这个示例中，我们创建了一个MyButton类，继承自ft.ElevatedButton。在构造函数中定义了按钮的外观和行为，并在主函数中创建并使用了两个自定义按钮。

---

2.极简构建与高效开发

2.1 声明式语法

Flet 采用声明式语法，通过纯 Python 代码声明 UI，无需分离布局文件，大大减少了代码量。

import flet as ft

def main(page: ft.Page):
    # 声明式创建 UI
    page.add(
        ft.Text("Hello, Flet!", size=30),
        ft.ElevatedButton("点击我", on_click=lambda e: print("按钮被点击"))
    )

ft.app(target=main)

这个示例中，我们直接在main函数中使用page.add方法添加了文本和按钮控件，代码简洁明了，无需额外的布局文件。

2.2 热重载与多平台部署

Flet 支持热重载，开发时修改代码后界面会实时刷新。同时，它支持一键打包为桌面应用（Windows/macOS/Linux）、Web 应用（WASM）以及移动端应用（iOS/Android）。

import flet as ft

def main(page: ft.Page):
    # 创建一个简单的 UI
    page.add(ft.Text("热重载示例"))
    page.add(ft.ElevatedButton("点击我", on_click=lambda e: print("按钮被点击")))

ft.app(target=main)

在开发过程中，只需保存代码修改，Flet 会自动热重载界面，无需手动刷新。当需要部署时，可以使用 Flet 提供的命令或 API 将应用打包为不同平台的可执行文件。

---

3.界面美观与交互流畅

3.1 Material&Cupertino 原生支持

Flet 默认集成了 Material Design 和 iOS 风格的 Cupertino 组件，如NavigationBar,FloatingActionButton，并且能够自动适配平台外观。这两种风格的组件天生丽质，轻盈灵动、妖娆迷人。

import flet as ft

def main(page: ft.Page):
    # 创建一个具有 Material Design 风格的导航栏
    page.add(
        ft.AppBar(
            title=ft.Text("Demo"),
            bgcolor=ft.Colors.PURPLE_800,
            actions=[
                ft.IconButton(ft.Icons.MENU),
                ft.IconButton(ft.Icons.SEARCH)
            ]
        )
    )
    # 创建一个浮动操作按钮
    page.add(
        ft.FloatingActionButton(
            icon=ft.Icons.ADD,
            on_click=lambda e: print("浮动按钮被点击")
        )
    )

ft.app(target=main)

这个示例中，我们添加了一个 Material Design 风格的导航栏和一个浮动操作按钮。导航栏设置了标题、背景颜色和操作按钮，浮动按钮绑定了点击事件。

3.2 动画与过渡效果

Flet 内置了AnimatedContainer,SlideTransition等动画控件，通过属性插值可以实现平滑的过渡效果。

import flet as ft

def main(page: ft.Page):
    # 创建一个可动画的容器
    container = ft.Container(
        width=100,
        height=100,
        bgcolor="red",
        animate=ft.animation.Animation(duration=500, curve=ft.animation.AnimationCurve.EASE_IN_OUT)
    )

    def animate(e):
        # 切换容器的宽度
        container.width = 200 if container.width == 100 else 100
        page.update()

    # 创建一个按钮，点击触发动画
    page.add(
        container,
        ft.ElevatedButton("开始动画", on_click=animate)
    )

ft.app(target=main)

在这个示例中，我们创建了一个Container控件，并设置了动画属性。点击按钮时，容器的宽度会在 100 和 200 之间切换，并以平滑的动画效果过渡。

---

4.自由布局与响应式设计

4.1 弹性布局系统

使用Row/Column的expand,alignment,spacing等属性可以实现自适应布局，结合ScrollMode.ADAPTIVE可以自动处理溢出。

import flet as ft

def main(page: ft.Page):
    # 创建一个弹性布局
    row = ft.Row(
        controls=[
            ft.Container(
                content=ft.Text("项目1"),
                bgcolor="red",
                expand=True
            ),
            ft.Container(
                content=ft.Text("项目2"),
                bgcolor="green",
                expand=True
            ),
            ft.Container(
                content=ft.Text("项目3"),
                bgcolor="blue",
                expand=True
            )
        ],
        spacing=10,
        vertical_alignment=ft.CrossAxisAlignment.CENTER
    )
    page.add(row)

ft.app(target=main)

这个示例中，我们创建了一个Row布局，包含三个可扩展的Container控件。通过设置expand属性，每个项目会根据可用空间自动调整大小，spacing属性设置了项目之间的间距，vertical_alignment属性设置了垂直对齐方式。

4.2 媒体查询与自适应

以下是一个基于Flet的媒体查询与自适应响应式设计典型示例，该示例展示了如何根据屏幕宽度动态调整布局：

以下是一个使用Flet框架ResponsiveRow实现响应式布局的示例，适配桌面、平板和手机尺寸：

import flet as ft

def main(page: ft.Page):
    page.title = "ResponsiveRow示例"
    page.horizontal_alignment = ft.CrossAxisAlignment.CENTER
    page.padding = 20
    
    # 定义不同设备的断点（单位：像素）
    # xs: <600 (手机)
    # sm: 600-992 (平板)
    # md: >992 (桌面)
    
    # 创建响应式行
    responsive_row = ft.ResponsiveRow(
        columns=12,  # 总列数（方便计算比例）
        spacing=10,  # 列间距
        run_spacing=20,  # 行间距
        controls=[
            ft.Container(
                content=ft.Text(f"内容区块 {i}", color="white", size=20),
                bgcolor=ft.Colors.AMBER_600,
                padding=15,
                border_radius=10,
                expand=True,
                col={"xs": 12, "sm": 6, "md": 4},  # 响应式列设置
                height=150,
            )
            for i in range(1, 7)  # 创建6个区块
        ]
    )
    
    page.add(
        ft.Text("响应式布局示例", size=24, weight="bold"),
        ft.Divider(height=20),
        responsive_row
    )

ft.app(target=main)

关键特性说明：

1. 断点设置：

   • xs (<600px)：手机布局
   • sm (600-992px)：平板布局
   • md (>992px)：桌面布局

2. 布局规则：

   • 桌面（>992px）：每行显示3列（每个区块占4/12）
   • 平板（600-992px）：每行显示2列（每个区块占6/12）
   • 手机（<600px）：每行显示1列（每个区块占12/12）

3. 布局参数：

   • spacing=10：列间距10像素
   • run_spacing=20：行间距20像素
   • expand=True：容器自动填充可用宽度

4. 视觉效果：

   • 使用不同颜色的区块方便区分
   • 圆角边框和文字样式增强可读性
   • 固定高度保持区块一致性

测试方法：

1. 在桌面浏览器中运行并调整窗口大小
2. 使用浏览器开发者工具切换设备模拟模式
3. 在真实移动设备上访问

扩展建议：

• 添加更复杂的内容（如图片、按钮）
• 使用visible属性控制特定元素的显示/隐藏
• 结合MediaQuery获取更精确的尺寸信息
• 通过主题系统统一管理颜色和间距

这个示例展示了如何通过简单的配置创建响应不同屏幕尺寸的布局，实际项目中可以根据具体需求调整断点值和布局比例。

这个示例展示了Flet框架在实现响应式设计时的核心方法，开发者可以根据实际需求扩展更多断点和交互功能。

5.状态管理与数据绑定

5.1 响应式状态更新

修改控件属性后调用page.update()可以局部刷新界面，避免全局重绘。

import flet as ft

def main(page: ft.Page):
    # 创建一个计数器文本
    counter = ft.Text("0")

    def increment(e):
        # 更新计数器值
        counter.value = str(int(counter.value) + 1)
        page.update()  # 仅更新变化部分

    # 创建一个按钮，点击增加计数器
    page.add(
        counter,
        ft.ElevatedButton("增加", on_click=increment)
    )

ft.app(target=main)

这个示例中，我们创建了一个计数器文本和一个按钮。点击按钮时，计数器的值会增加，并通过page.update()刷新界面，只更新发生变化的部分，提高性能。

5.2 与后端深度集成

Flet 支持在控件事件中直接调用数据库、API 等异步操作，适合构建全栈应用。

import flet as ft
import asyncio

async def get_api_data():
    await asyncio.sleep(1)
    return {"data": "API 数据"}

async def fetch_data(e):
    data = await get_api_data()
    show_data(e.page, data)  # 传递page实例

def show_data(page: ft.Page, data):
    page.add(ft.Text(f"获取到数据: {data['data']}"))  # 这里会自动触发更新

def main(page: ft.Page):
    page.add(
        ft.ElevatedButton("获取数据", on_click=fetch_data)
    )

ft.app(target=main)

在这个示例中，我们定义了一个异步函数get_api_data模拟获取 API 数据。点击按钮时，调用fetch_data函数，异步获取数据并显示在界面上，最后通过page.update_async()刷新界面。

---

6.扩展性与生态

6.1 插件体系

Flet 社区提供了flet-charts,flet-map等扩展控件，可以通过pip快速集成。

import flet as ft
from flet import LineChart, LineChartData, LineChartDataPoint

def main(page: ft.Page):
    # 创建数据点
    data_points = [
        LineChartDataPoint(x, y) 
        for x, y in zip(range(1, 10, 2), [1, 3, 5, 7, 9])
    ]
    
    # 创建折线图数据系列
    chart_data = [
        LineChartData(
            data_points=data_points,
            stroke_width=2,
            color=ft.Colors.BLUE
        )
    ]

    # 创建折线图
    chart = LineChart(
        data_series=chart_data,
        border=ft.border.all(1, ft.Colors.GREY),
        left_axis=ft.ChartAxis(labels_size=40),
        bottom_axis=ft.ChartAxis(labels_size=40),
        tooltip_bgcolor=ft.Colors.with_opacity(0.8, ft.Colors.WHITE),
        expand=True
    )
    
    page.add(chart)

ft.app(target=main)

这个示例中，我们安装并导入了flet-charts扩展，创建了一个折线图控件，并将其添加到页面中。

6.2 与 Python 生态无缝衔接

Flet 可以与pandas处理数据、matplotlib生成图表、FastAPI构建后端等 Python 生态中的库无缝结合，轻松实现复杂应用。

import flet as ft
import pandas as pd
import matplotlib.pyplot as plt
from io import BytesIO
import base64  # 添加缺失的导入

# 使用 pandas 处理数据
data = {
    "Name": ["Alice", "Bob", "Charlie"],
    "Age": [25, 30, 35],
    "City": ["New York", "London", "Paris"]
}
df = pd.DataFrame(data)

# 使用 matplotlib 生成图表
plt.figure(figsize=(6, 4))
plt.bar(df["Name"], df["Age"])
plt.xlabel("Name")
plt.ylabel("Age")
plt.title("Age Distribution")
buffer = BytesIO()
plt.savefig(buffer, format="png")
buffer.seek(0)

def main(page: ft.Page):
    # 创建一个数据表格
    table = ft.DataTable(
        columns=[
            ft.DataColumn(ft.Text("Name")),
            ft.DataColumn(ft.Text("Age")),
            ft.DataColumn(ft.Text("City"))
        ],
        rows=[
            ft.DataRow(
                cells=[
                    ft.DataCell(ft.Text(row["Name"])),
                    ft.DataCell(ft.Text(str(row["Age"]))),
                    ft.DataCell(ft.Text(row["City"]))
                ]
            ) for _, row in df.iterrows()
        ]
    )
    page.add(table)

    # 创建一个图片控件，显示 matplotlib 图表
    img = ft.Image(src_base64=base64.b64encode(buffer.getvalue()).decode())  # 现在base64已定义
    page.add(img)

ft.app(target=main)

在这个示例中，我们使用pandas处理数据并创建了一个数据表格，使用matplotlib生成了一个柱状图，并将其转换为图片显示在界面上。

---

6.3 示例：5 分钟构建一个待办应用

import flet as ft

def main(page: ft.Page):
    page.title = "Todo App"
    
    # 初始化任务列表和输入框
    new_task = ft.TextField(hint_text="输入任务", expand=True)
    tasks_column = ft.Column()

    def add_task(e):
        if new_task.value:
            tasks_column.controls.append(ft.Checkbox(label=new_task.value))
            new_task.value = ""
            page.update()

    # 创建页面布局
    page.add(
        ft.Column(
            [
                ft.Row(
                    [
                        new_task,
                        ft.ElevatedButton("添加", on_click=add_task)
                    ],
                    alignment="center"
                ),
                tasks_column
            ]
        )
    )

ft.app(target=main)

这个示例创建了一个简单的待办应用，用户可以在输入框中输入任务，点击"添加"按钮将任务添加到列表中。每个任务以复选框的形式显示，方便用户标记已完成的任务。

---

二、归纳总结

Flet 凭借其极简的 API 设计、跨平台的原生渲染以及与 Python 生态的深度整合，成为快速开发现代 GUI 应用的理想选择。它在开发效率与界面表现力之间取得了良好的平衡，特别适合全栈开发者、数据工程师以及需要快速交付原型的小型团队。通过丰富的控件体系、灵活的布局方式、强大的状态管理和便捷的扩展性，Flet 能够满足各种应用场景的需求，助力开发者高效构建美观、交互流畅的应用程序。