跳到主要内容

将应用打包进行分发

· 阅读需 4 分钟
Feodor Fitsner
Flet 创始人兼开发者

亲爱的朋友们!在今年的最后一篇文章中,我想感谢大家对 Flet 项目的贡献,无论是散发信息,提交拉取请求,加入 Discord 讨论还是发送烦人的错误报告!

在你们的极好支持下,我们在 2023 年取得了很多成就:

  • 70 多个控件(特别感谢 @ndonkoHenri 的巨大贡献)。
  • GitHub 上获得 7,700 颗星。
  • Discord 上有 2,150 名用户和社区版主(感谢你们!)。
  • Flet 与 Pyodide 的集成,用于纯客户端的 Python 应用——没有其他框架能为 Pyodide 提供更好的用户界面!
  • Flet 应用已上线 AppStore 和 Google Play——这是在移动设备上测试的好方法,也是 Flet 应用被接受的实际证明。
  • ……最后……隆重宣布……🥁🥁🥁 flet build 命令来了!🎉🎉🎉

🎄 "新年版" 🎄 的 Flet 0.18.0 刚刚发布,这个版本允许在所有平台上打包您的 Flet 应用进行分发:iOS、Android、Web、macOS、Windows 和 Linux!

一个命令玩转所有!

现在闭环完成了:您可以使用 Flet CLI 创建 (flet create)、运行 (flet run) 和构建 (flet build) 您的 Flet 应用。

Flet CLI 提供了 flet build 命令,该命令允许将 Flet 应用打包成独立的可执行文件或安装包以便分发。

flet build 命令取代了 flet pack(打包成桌面应用)和 flet publish(打包成静态网站)命令,并允许将您的 Flet 应用转换为 Android 或 iOS 包、桌面应用和静态网站。

对于构建桌面应用,flet build 不再依赖于 flet pack 使用的 PyInstaller,而是使用 Flutter SDK 生成一个快速、离线、完全可定制的(带有您自己的图标、关于对话框和元数据)Windows、Linux 和 macOS 的可执行文件,其中嵌入了 Python 运行时并在进程中运行。

flet publish 相比,使用 flet build 构建的静态网站加载速度更快,因为所有 Python 依赖项现在都打包成一个单一的归档文件,而不是在运行时通过 micropip 拉取。flet build web 还会检测内置在 Pyodide 中的原生 Python ,如 bcrypthtml5libnumpy 等,并从 Pyodide 包注册表中安装它们。

查看 打包应用以便分发 指南,获取关于 flet build 命令的完整信息。

请通过加入 Flet Discord 服务器 或在 Flet GitHub 讨论区 创建新话题,让我们知道您的想法。

祝大家新年快乐!节日愉快!

Flet为FastAPI提供支持

· 阅读需 3 分钟
Feodor Fitsner
Flet 创始人和开发者

我们刚刚发布了支持 FastAPI 的 Flet 0.10.0!

FastAPI 配合 Uvicorn、Hypercorn、Gunicorn 或其他网络服务器,可以取代内置的 Flet 网络服务器(Fletd),以可靠地运行生产环境中的 Flet 工作负载。

另一方面,经验丰富的 FastAPI 开发者可以使用 Flet,轻松地为现有或新的 FastAPI 服务添加互动的实时仪表盘和管理 UI。

一个简单的应用示例

import flet as ft
import flet_fastapi

async def main(page: ft.Page):
await page.add_async(
ft.Text("Hello, Flet!")
)

app = flet_fastapi.app(main)

这是一个简单的应用程序,只是在网页上输出“Hello, Flet!”。

要运行该应用程序,请安装 Flet for FastAPI 和 Uvicorn:

pip install flet-fastapi
pip install uvicorn

将上述代码保存为 hello.py,然后启动 Uvicorn:

uvicorn hello:app

打开浏览器并导航到 http://127.0.0.1:8000 查看运行中的应用程序。

警告

Flet 应用程序必须是 异步的 才能与 FastAPI WebSocket 处理程序一起工作。

特性和优势

  • 单域名下的多个 Flet 应用程序 - 映射到根路径和/或子路径。
  • 简单的单行映射单个端点配置
  • 围绕 FastAPI WebSocket 连接的轻量级异步包装器,以提高并发性。
  • 提供包含用户资源和应用程序元信息自定义的 Flet 静态文件。
  • FilePicker 控件的上传处理程序。
  • 处理 OAuth 回调进行身份验证流程。

查看 指南 以获取有关 Flet 与 FastAPI 的完整信息。

通过加入 Flet Discord 服务器 或在 Flet GitHub 讨论 创建新主题,让我们知道您的想法。

用于 Android 的 Flet

· 阅读需 3 分钟
Feodor Fitsner
Flet创始人兼开发者

🤖 现已支持Android平台!

通过 Flet Android 应用,你可以在 Android 设备上查看 Flet Python 应用的外观和行为,而应用本身仍在你的电脑上运行。

与 iOS 类似,Flet for Android 是一个完全用 Python 编写的 Flutter 应用,使用了两个开源软件包:serious_pythonflet。生成的应用包技术上符合 Google Play 的要求,因此你可以用纯 Python 发布优秀的 Android 应用。

按照本指南 开始在 Android 上测试你的 Flet 应用。探索应用、浏览画廊、尝试示例项目和应用设置。

常见问题

如何将我的 Flet 应用打包到 Google Play?

我们将提供一个启动 Flutter 应用的项目模板和指南,介绍如何将 Flutter、serious_python 软件包和你的 Python 应用结合在一起,创建一个独立的 Android 应用并发布到 Google Play。

查看 serious_python 的自述文件,了解如何创建一个 Flutter 启动并将你的 Python 应用打包在其中。使用 flet_example 项目作为起点。

你们会提供 Windows、macOS 和 Linux 的打包吗?

会的!目前,Flet 桌面应用使用 flet pack 命令和 PyInstaller 打包。生成的应用包增加了性能和大小的开销,并且难以定制,因此我们将用原生的 Flutter 打包替代它。

Flet v0.9.0 发行说明

要在 Android 上进行测试,你需要将 Flet 安装升级到 v0.9.0。

为了支持 Android,Flet CLI 进行了一些更改。如果你发现了什么异常情况,请告诉我们。

祝您使用愉快!

用于 iOS 的 Flet

· 阅读需 3 分钟
Feodor Fitsner
Flet 创始人和开发者

🎉 哇哦,Flet 应用现已上架 App Store!🎉

有了 Flet iOS 应用,您可以在 iPhone 或 iPad 上查看 Flet Python 应用的外观和行为,而应用程序本身正在您的计算机上运行。

但这不仅仅是测试手机上的 Flet 应用程序!Flet 移动应用程序本身是用 Python 编写的,其发布到 App Store 是整个 Flet 项目中的一个重要里程碑。这是一个成功的证明,表明您可以仅使用 Python 创建出色的移动应用程序,并将其打包以便在 App Store 中被接受!

按照本指南 开始在 iPhone 或 iPad 上测试您的 Flet 应用程序。探索应用程序、浏览图库、尝试示例项目和应用程序设置。

我要感谢 Kivy 项目 制作了一个 iOS 工具链,我们使用它来编译适用于 iOS 设备的 Python 解释器和依赖项。我们发布了 serious_python 包,用于将 Python 运行时添加到任何 Flutter 应用程序中。

常见问题解答

何时支持 Android?

很快。它现在是我们的首要任务,我们已经开始研究它。

如何将我的 Flet 应用程序打包到 App Store?

我们将提供一个项目模板,用于引导 Flutter 应用程序,并提供指南,说明如何将 Flutter、serious_python 包和您的 Python 应用程序结合在一起,创建一个独立的 iOS 应用程序并将其发布到 App Store。

今年晚些时候,我们将创建一个 CI 管道以完全自动化该过程。

请查看 serious_python 的自述文件,了解如何创建 Flutter 引导程序并打包您的 Python 应用程序以在其中运行。使用 flet_example 项目作为起点。

Flet v0.8.0 发行说明

要在 iOS 上进行测试,您需要将 Flet 安装升级到 v0.8.0。

在 v0.8.0 中 进行了很多更改,并且有一些重大更改。在您升级到 0.8.0 时请耐心等待,并让我们知道您是否遇到任何问题。

尽情享受吧!

滚动控件和主题化

· 阅读需 7 分钟
Feodor Fitsner
Flet创始人兼开发者

Flet 0.7.1 允许开发人员从 PageViewColumnRowListViewGridView 控件中更改滚动位置接收滚动通知

本次发布还引入了主题改进:

控制滚动位置

可滚动控件 (Page, View, Column, Row, ListViewGridView) 引入了 scroll_to() 方法,以将其滚动位置更改为绝对 offset,相对 delta 或跳转到指定 key 的控件。

通过移动到 key 指定的控件,可以模拟页面书签之间的导航,类似于使用 # 的 HTML href链接:

查看上述示例的源代码

有关控制滚动位置的更多详细信息,请参见 Column.scroll_to

接收滚动通知

所有可滚动的控件现在都提供了 on_scroll 事件处理程序,该处理程序在滚动位置发生变化时触发。通过事件对象的属性,您可以确定滚动操作是否已开始、已结束、改变了方向或滚动位置是否超出了滚动范围(滚动超出)。您还可以获取当前滚动位置的更新以及滚动区域的尺寸,例如:

import flet as ft

def main(page: ft.Page):
def on_column_scroll(e: ft.OnScrollEvent):
print(
f"Type: {e.event_type}, pixels: {e.pixels}, min_scroll_extent: {e.min_scroll_extent}, max_scroll_extent: {e.max_scroll_extent}"
)

cl = ft.Column(
spacing=10,
height=200,
width=200,
scroll=ft.ScrollMode.ALWAYS,
on_scroll=on_column_scroll,
)
for i in range(0, 50):
cl.controls.append(ft.Text(f"Text line {i}", key=str(i)))

page.add(
ft.Container(cl, border=ft.border.all(1)),
)

ft.app(main)

有关滚动通知的更多详细信息,请参见 Column.on_scroll

查看无限滚动示例

颜色方案定制

在此之前,控制应用程序的颜色方案的唯一方法是在创建新的 ft.Theme 对象时指定 color_scheme_seed

本版本允许您根据 Material 设计规范 和 Flet 的各种控件使用的 30 种颜色进行精细调整。

您甚至可以使用 Material Theme Builder 并将导出的颜色调色板应用到您的应用程序,例如:

page.theme = ft.Theme(
color_scheme=ft.ColorScheme(
primary=ft.Colors.GREEN,
primary_container=ft.Colors.GREEN_200
# ...
),
)

有关更多详细信息,请参见 ColorScheme

嵌套主题

此版本的另一个很棒的功能是嵌套主题!

您可以让应用程序的某个部分使用不同的主题,或者为特定控件覆盖一些主题样式。

还记得 page 对象有 themetheme_mode 属性吗?现在 Container 也有 themetheme_mode 属性!

Container.theme 接受与页面相同的 ft.Theme 对象。在容器中指定 theme_mode 意味着您不想继承父主题,而是希望为容器内的所有控件提供一个全新的、独特的方案。但是,如果容器没有设置 theme_mode 属性,那么其 theme 属性中的样式将覆盖父级继承主题中的样式:

import flet as ft

def main(page: ft.Page):
# 系统(默认)模式的黄色页面主题
page.theme = ft.Theme(
color_scheme_seed=ft.Colors.YELLOW,
)

page.add(
# 页面主题
ft.Container(
content=ft.ElevatedButton("Page theme button"),
bgcolor=ft.Colors.SURFACE_VARIANT,
padding=20,
width=300,
),

# 继承的主题,覆盖了主要颜色
ft.Container(
theme=ft.Theme(color_scheme=ft.ColorScheme(primary=ft.Colors.PINK)),
content=ft.ElevatedButton("Inherited theme button"),
bgcolor=ft.Colors.SURFACE_VARIANT,
padding=20,
width=300,
),

# 独特的总是深色主题
ft.Container(
theme=ft.Theme(color_scheme_seed=ft.Colors.INDIGO),
theme_mode=ft.ThemeMode.DARK,
content=ft.ElevatedButton("Unique theme button"),
bgcolor=ft.Colors.SURFACE_VARIANT,
padding=20,
width=300,
),
)

ft.app(main)

滚动条主题

现在您可以自定义应用程序中滚动条的外观和填充(或使用嵌套主题的特定滚动条)。

可以通过 page.theme.scrollbar_theme 属性来完成,例如:

page.theme = ft.Theme(
scrollbar_theme=ft.ScrollbarTheme(
track_color={
ft.ControlState.HOVERED: ft.Colors.AMBER,
ft.ControlState.DEFAULT: ft.Colors.TRANSPARENT,
},
track_visibility=True,
track_border_color=ft.Colors.BLUE,
thumb_visibility=True,
thumb_color={
ft.ControlState.HOVERED: ft.Colors.RED,
ft.ControlState.DEFAULT: ft.Colors.GREY_300,
},
thickness=30,
radius=15,
main_axis_margin=5,
cross_axis_margin=10,
)
)

文本主题

Material 3 设计定义了5 组文本样式,每组有 3 种大小:"Display"、"Headline"、"Title"、"Label" 和 "Body",这些样式用于 Flet 控件。现在您可以使用 page.theme.text_theme 自定义每种样式,例如:

import flet as ft

def main(page: ft.Page):
page.theme = ft.Theme(
text_theme=ft.TextTheme(body_medium=ft.TextStyle(color=ft.Colors.GREEN))
)

page.add(ft.Text("Hello, green world!"))

ft.app(main)

显然,Body MediumText 控件使用的默认样式。

有关更多详细信息,请参见 TextTheme

标签主题

现在,您可以控制 Tabs 控件的外观和感觉。在此版本中,Tabs 增加了许多新属性,并且有一个新的 page.theme.tabs_theme 属性来设置应用程序中所有标签的样式:

page.theme = ft.Theme(
tabs_theme=ft.TabsTheme(
divider_color=ft.Colors.BLUE,
indicator_color=ft.Colors.RED,
indicator_tab_size=True,
label_color=ft.Colors.GREEN,
unselected_label_color=ft.Colors.AMBER,
overlay_color={
ft.ControlState.FOCUSED: ft.Colors.with_opacity(0.2, ft.Colors.GREEN),
ft.ControlState.DEFAULT: ft.Colors.with_opacity(0.2, ft.Colors.PINK),
},
)
)

有关更多详细信息,请参见 TabsTheme

其他变化

Flutter 3.10

此 Flet 版本基于 Flutter 3.10,带来了新功能、性能和大小优化。因此,大多数 Flet 依赖项也提升了它们的版本,因此如果您发现任何问题,请告诉我们。

Web 应用中的彩色表情符号

Web 应用中的彩色表情符号支持回来了!在 Flutter 3.7 中,由于其字体大小(8 MB!),"CanvasKit" 渲染器(Flet 中的默认渲染器)中禁用了彩色表情符号,并在 Flutter 3.10 中以可选方式返回。您可以在 server-driven 应用程序中通过 use_color_emoji 参数启用彩色表情符号:

ft.app(main, use_color_emoji=True)

并且在将应用程序发布为静态网站时使用 --use-color-emoji 开关

今天就这些!

升级到最新版本的 Flet 模块(pip install flet --upgrade)并告诉我们您的想法!