Flet-基于Flutter的Python跨平台开发框架

什么是Flet

Flet是一个框架,允许用你喜欢的语言构建交互式多用户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端进行访问

这是官方给的简单示例,我们来写一个稍微复杂一点的:计算器。
在这里插入图片描述

页面代码比较多,但是挺简单的,就不贴了,可以看到即使用原生的控件拼出来页面效果也还不错,比其他的Python桌面开发库要好看的多。虽然它没有QT那种界面设计器,通过拖拖拽拽就能生成页面,但是它的布局方式与前端一样,因此对于会前端的开发人员来说非常熟悉,使用起来也很方便。

总结

目前这个项目还只是一个BETA版的,官方文档也不够完善,但是用来开发一些基础的软件还是没问题的。尤其是基于Flutter,不需要像Electron一样打包chromium内核进去。等后期接入多种语言后,将会给很多很多程序员提供一个优秀的跨平台开发方式,不用像Electron和Flutter一样需要特定的开发语言才能上手,期待它更加完善。

<think>好的,我需要帮助用户了解如何使用Flet框架创建电子看板。首先,我应该回顾用户提供的引用内容,确保回答符合引用中的信息。根据引用[1],Flet是一个用Python构建跨平台应用的框架,而Flet-Samples仓库提供了示例应用作为起点。引用[3]提到Flet UI基于Flutter,因此界面会显得专业,并且可以跨平台部署。引用[4]提到了控件的tooltip属性,可能在设计界面时用到。 接下来,我需要构建一个简单的电子看板示例。电子看板通常需要显示实时更新的信息,比如时间、通知或数据图表。根据Flet的特性,可以使用纯Python代码来布局UI元素,如Text控件显示时间,Row或Column来组织布局,以及可能的事件处理来更新内容。 首先,用户需要安装Flet,根据引用[1],安装命令是pip install flet。然后,创建一个基本的应用结构,包括页面布局和控件。例如,使用ft.Page作为主容器,添加标题和内容区域。时间显示可以用ft.Text控件,并通过异步函数定期更新时间。 在代码示例中,可能需要用到Timer或async/await来实现定时刷新。同时,引用[3]指出Flet使用Flutter的控件,因此布局方式可能与Flutter类似,比如使用Row和Column来排列元素。例如,将时间显示放在顶部,通知区域放在中间,统计卡片放在底部。 此外,根据引用[4],可以为控件添加tooltip属性,提升用户体验。比如,在统计卡片上添加提示信息说明数据来源或更新时间。 最后,需要确保代码符合用户的要求:使用$...$和$$...$$格式的数学表达式,但在这个案例中可能用不到数学公式,所以需要检查是否有必要插入相关内容。不过,用户的问题是关于电子看板的开发,可能不涉及数学表达式,所以可能不需要添加。但根据系统级指令,必须使用正确的LaTeX格式,如果回答中有数学相关内容,比如计算公式,则要正确应用格式。但在这个场景下,可能不需要,所以可以忽略。 然后,生成相关问题,需要考虑用户可能进一步询问的内容,比如如何添加交互功能、如何部署到Web或移动端、如何处理实时数据等,这些问题都基于示例教程的延伸。 现在需要组织回答结构,确保步骤清晰,代码示例正确,并且引用相关引用内容。例如,在说明Flet的优势时引用[3],在提到示例仓库时引用[1],在提到控件属性时引用[4]。 检查所有引用是否恰当,代码是否可运行,语法是否正确。例如,确保使用ft.App而不是flet.App,因为根据引用[2],Flet的模块导入可能使用import flet as ft。代码中的异步函数和事件循环需要正确配置,比如使用async def main和await page.update_async()。 最后,生成相关问题,可能涉及优化UI、添加更多功能、数据绑定等,确保问题与用户的初始请求相关,并引导深入学习。</think>### 使用Flet框架开发电子看板示例教程 #### 1. 环境准备 首先安装Flet框架: ```bash pip install flet # 根据引用[1] ``` #### 2. 基础框架搭建 以下代码实现一个包含实时时间、通知栏和统计卡片的看板: ```python import flet as ft import datetime import asyncio async def main(page: ft.Page): # 配置页面属性 page.title = "电子看板示例" page.vertical_alignment = ft.CrossAxisAlignment.CENTER page.horizontal_alignment = ft.MainAxisAlignment.CENTER page.padding = 20 # 时间显示控件 time_display = ft.Text(size=40, color=ft.colors.BLUE_800) # 通知栏控件 notification = ft.Column( controls=[ft.Text("最新通知:", weight="bold")], spacing=10, scroll=ft.ScrollMode.AUTO ) # 统计卡片 stats_row = ft.Row(alignment=ft.MainAxisAlignment.SPACE_EVENLY) for i in range(3): stats_row.controls.append( ft.Container( content=ft.Column([ ft.Icon(ft.icons.INSERT_CHART, size=40), ft.Text("0", size=30) ]), padding=20, bgcolor=ft.colors.GREY_200, border_radius=10, tooltip="统计数据卡片" # 根据引用[4] ) ) # 组合布局 page.add( ft.Column([ time_display, ft.Divider(), ft.Container(notification, height=200), ft.Divider(), stats_row ]) ) # 实时更新函数 async def update_time(): while True: time_display.value = datetime.datetime.now().strftime("%Y-%m-%d %H:%M:%S") await page.update_async() await asyncio.sleep(1) # 启动异步任务 asyncio.create_task(update_time()) # 启动应用 ft.app(target=main) ``` #### 3. 关键功能说明 1. **实时时间更新**:通过`asyncio`实现每秒更新时间显示 2. **通知滚动区域**:使用`Column`控件配合`scroll=ft.ScrollMode.AUTO`实现自动滚动 3. **统计卡片**:采用`Container`嵌套`Column`的结构化设计,支持扩展更多指标 4. **响应式布局**:通过`Row`和`Column`的组合实现自适应布局[^3] #### 4. 扩展建议 - 添加数据库连接实时显示业务数据 - 集成WebSocket实现实时数据推送 - 使用`ft.chart`模块添加可视化图表 - 通过`ft.NavigationRail`添加侧边导航栏
评论 1
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值