Python+Flet：三行代码搞定漂亮界面，新手也能轻松开发APP

最新推荐文章于 2025-03-28 18:46:45 发布

懒大王爱吃狼

最新推荐文章于 2025-03-28 18:46:45 发布

阅读量1.9k

点赞数 31

分类专栏： python 文章标签： python 开发语言 Python基础 flet ui 界面交互 python进阶

本文链接：https://blog.csdn.net/m0_65482549/article/details/146279627

版权

python 专栏收录该内容

90 篇文章

订阅专栏

一、Flet是啥？有啥特点？

简单来说，Flet是一个让Python小白也能快速开发精美界面应用的库。不管是桌面应用、网页应用，还是手机应用，通通一套代码搞定！

它的主要特点：

超低门槛：不需要学HTML、CSS、JavaScript
现代UI：默认Material Design，颜值在线
全平台：一套代码，Windows、Mac、Linux、Web全覆盖
实时热更新：代码改动实时可见，开发超爽
丰富组件：按钮、输入框、图表、列表…应有尽有

在几分钟内从想法到应用程序

为您的团队，周末项目，数据输入表单，kiosk应用程序或高保真原型提供的内部工具或仪表板 - Flet是一个理想的框架，可以快速破解一个美观的交互式应用程序，为一组用户提供服务。

简单的架构

没有更复杂的架构与JavaScript前端，REST API后端，数据库，缓存等。使用Flet，您只需在Python中编写一个整体式有状态应用程序，即可获得多用户实时单页应用程序（SPA）。

包括电池

要开始使用 Flet 进行开发，您只需要自己喜欢的 IDE 或文本编辑器。没有 SDK，没有成千上万的依赖项，没有复杂的工具 - Flet 具有内置的 Web 服务器，其中包含托管资产和桌面客户端。

由Flutter提供动力

Flet UI是用Flutter构建的，所以你的应用程序看起来很专业，可以交付到任何平台。Flet通过将较小的“小部件”组合成具有命令式编程模型的即用型“控件”来简化Flutter模型。

语言无关

Flet 与语言无关，因此团队中的任何人都可以用自己喜欢的语言开发 Flet 应用程序。Python已经得到支持，Go，C#和其他产品紧随其后。

交付到任何设备

将 Flet 应用部署为 Web 应用，并在浏览器中查看它。将其打包为适用于Windows，macOS和Linux的独立桌面应用程序。将其作为PWA安装在移动设备上，或通过适用于iOS和Android的Flet应用程序查看。

安装使用

pip install flet

一个简单的计数示例

import flet
from flet import IconButton, Page, Row, TextField, icons

def main(page: Page):
    page.title = "Flet counter example"
    page.vertical_alignment = "center"

    txt_number = TextField(value="0", text_align="right", width=100)

    def minus_click(e):
        txt_number.value = int(txt_number.value) - 1
        page.update()

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

    page.add(
        Row(
            [
                IconButton(icons.REMOVE, on_click=minus_click),
                txt_number,
                IconButton(icons.ADD, on_click=plus_click),
            ],
            alignment="center",
        )
    )

flet.app(target=main)

运行程序：

python counter.py

如何我们希望它只运行在浏览器端，可以如下配置：

flet.app(target=main, view=flet.WEB_BROWSER)

默认是运行桌面端的，但是在我们启动的时候，会在随机端口启动一个web服务器，也可以在web端进行访问

来个"Hello World"感受一下Flet有多简单：

import flet as ft

def main(page: ft.Page):
    page.title = "我的第一个Flet应用"
    page.add(ft.Text("Hello, 这是用Flet做的界面!"))

ft.app(target=main)

在这里插入图片描述

二、Flet基础概念

在深入学习前，先了解几个关键概念：

Page（页面）：应用的主窗口，所有内容都放在这里
Controls（控件）：界面元素，如按钮、文本框等
布局控件：如Row（行）、Column（列）、Container（容器），用来组织其他控件
更新机制：调用page.update()让修改生效

最基本的Flet程序结构：

import flet as ft

def main(page: ft.Page):
    # 1. 配置页面属性
    page.title = "应用标题"
    
    # 2. 定义控件
    my_text = ft.Text("这是一段文本")
    
    # 3. 添加控件到页面
    page.add(my_text)
    
    # 4. 修改控件（如需要）
    my_text.value = "文本已修改"
    page.update()  # 更新UI显示

# 启动应用
ft.app(target=main)

在这里插入图片描述

三、简单控件

1. 文本控件

import flet as ft

def main(page: ft.Page):
    page.title = "文本控件演示"
    
    # 基本文本
    page.add(ft.Text("普通文本"))
    
    # 自定义样式文本
    page.add(
        ft.Text(
            "大号红色粗体文本", 
            size=30,  # 文字大小
            color="red",  # 文字颜色
            weight=ft.FontWeight.BOLD,  # 粗体
            italic=True,  # 斜体
        )
    )
    
    # 带阴影效果
    page.add(
        ft.Text(
            "带阴影的文本",
            size=20,
            shadow=ft.BoxShadow(
                spread_radius=1,
                blur_radius=10,
                color=ft.colors.BLUE_GREY_300,
                offset=ft.Offset(2, 2),
            )
        )
    )

ft.app(target=main)

在这里插入图片描述
2. 按钮控件

import flet as ft

def main(page: ft.Page):
    page.title = "按钮控件演示"
    
    # 计数器变量
    counter = 0
    
    # 显示计数的文本
    text_counter = ft.Text(f"计数: {counter}")
    
    # 按钮点击事件处理
    def button_clicked(e):
        nonlocal counter
        counter += 1
        text_counter.value = f"计数: {counter}"
        page.update()
    
    # 普通按钮
    btn1 = ft.ElevatedButton("点我计数", on_click=button_clicked)
    
    # 带图标的按钮
    btn2 = ft.ElevatedButton(
        "带图标的按钮",
        icon=ft.icons.ADD_CIRCLE,
        on_click=button_clicked
    )
    
    # 图标按钮
    btn3 = ft.IconButton(
        icon=ft.icons.REMOVE_CIRCLE,
        icon_color="red",
        tooltip="图标按钮",
        on_click=button_clicked
    )
    
    # 将所有控件添加到页面
    page.add(
        text_counter,
        ft.Row([btn1, btn2, btn3])  # 使用Row排成一行
    )

ft.app(target=main)

在这里插入图片描述
3.输入控件

import flet as ft

def main(page: ft.Page):
    page.title = "输入控件演示"
    
    # 显示输入内容的文本
    result_text = ft.Text("在下方输入内容后，点击按钮查看效果")
    
    # 文本输入框
    text_input = ft.TextField(
        label="请输入文字",
        hint_text="这里是提示文字",
        prefix_icon=ft.icons.FORMAT_SIZE,
        suffix_text="文本",
    )
    
    # 密码输入框
    password_input = ft.TextField(
        label="请输入密码",
        password=True,  # 显示为密码形式
        can_reveal_password=True,  # 允许显示密码
    )
    
    # 多行文本框
    multiline_input = ft.TextField(
        label="多行文本",
        multiline=True,
        min_lines=2,
        max_lines=5,
    )
    
    # 按钮点击事件处理
    def submit_clicked(e):
        result_text.value = f"""
        文本框内容: {text_input.value}
        密码框内容: {password_input.value}
        多行文本框内容: {multiline_input.value}
        """
        page.update()
    
    # 提交按钮
    submit_button = ft.ElevatedButton("提交", on_click=submit_clicked)
    
    # 将所有控件添加到页面
    page.add(
        result_text,
        text_input,
        password_input,
        multiline_input,
        submit_button,
    )

ft.app(target=main)