跳到主要内容

将应用打包进行分发

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

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

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

  • 70+ 控件(特别感谢 @ndonkoHenri 对他巨大的贡献)。
  • 在 GitHub 上获得了 7,700+ 的 stars。
  • 在 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 不再依赖 PyInstaller(与 flet pack 相比),而是使用 Flutter SDK 来生成一个快速、离线、完全可定制(自己的图标、关于对话框和元数据)的可执行文件,其中 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或其他Web服务器结合使用,可以取代内置的Flet Web服务器(Fletd),并可可靠地运行生产用途的Flet工作负载。

另一方面,有经验的FastAPI开发人员可以使用Flet轻松将交互式实时仪表板和管理UI添加到现有或新的FastAPI服务中。

一个最小的应用程序示例

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 ,以查看运行的应用程序。

备注

为了使用FastAPI WebSocket处理程序与Flet应用程序配合工作,Flet应用程序必须是异步的

特性和优势

  • 在单个域上运行多个Flet应用程序 - 映射到根目录和/或子路径。
  • 简单的一行映射 或者个别端点配置
  • 轻量级的异步包装器,用于更大的并发性的FastAPI WebSocket连接。
  • 提供Flet静态文件,包括用户资产和应用程序元信息的自定义。
  • 用于FilePicker控件的上传处理程序。
  • 用于身份验证流的OAuth回调处理程序。

请参阅指南 ,以获得关于Flet和FastAPI完整的信息。

用于 Android 的 Flet

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

🤖 现已支持Android平台!

通过使用Flet Android应用,您可以在计算机上运行您的Flet Python应用程序的同时,查看它在Android设备上的外观和行为。

与iOS类似,Flet for Android是一个完全由Python编写的Flutter应用,借助两个开源包serious_pythonflet。由此产生的应用程序包在技术上符合Google Play的要求,因此您可以在纯Python中发布令人惊叹的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。

主要是为了支持Flet CLI在Android上进行了一些更改。如果您注意到了异常情况,请告诉我们。

祝您使用愉快!

用于 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包,用于向任何Flutter应用程序添加Python运行时。

常见问题

何时支持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时,请与我们联系,如果遇到任何问题,请告诉我们。

尽情享受吧!

滚动控件和主题化

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

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

此版本还介绍了主题改进的一些功能:

控制滚动位置

滚动控件(PageViewColumnRowListViewGridView)引入了 scroll_to() 方法,用于将滚动位置更改为绝对 offset、相对 delta 或跳转到指定 key 的控件。

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

移动到指定控件的示例

查看上面示例的源代码

有关控制滚动位置的更多详细信息,请参阅 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

查看无限滚动示例:infinite scroll example

颜色方案自定义

直到今天,控制应用程序的颜色方案的唯一方法是在创建新的 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

嵌套主题

此版本的另一个令人兴奋的功能是嵌套主题!

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

自定义主题

在Flet中,你可以自定义应用程序的主题,包括页面主题、滚动条主题、文本主题和选项卡主题。

页面主题

你可以使用ft.Theme对象来定义页面的主题。主题可以包含颜色方案、字体方案和形状方案等属性。

以下是一个示例,展示如何定义一个页面的主题:

import flet as ft

def main(page: ft.Page):
# 定义主题对象
page.theme = ft.Theme(
color_scheme_seed=ft.colors.BLUE_GREY,
font_scheme=ft.FontScheme(
body=ft.Font(
family="Arial",
size=14,
weight=ft.FontWeight.NORMAL,
italic=False,
),
button=ft.Font(
family="Arial",
size=16,
weight=ft.FontWeight.BOLD,
italic=False,
),
),
shape_scheme=ft.ShapeScheme(
corner_radius=10,
elevation=2,
),
)

# 添加控件
page.add(
ft.Text("Hello, world!"),
ft.Button("Click me"),
)

# 启动应用程序
ft.app(main)

在上面的示例中,我们使用ft.Theme对象定义了一个蓝灰色主题。主题包含了颜色方案、字体方案和形状方案。页面上的文本和按钮控件将根据主题来显示。

滚动条主题

你可以自定义滚动条的外观和填充。Flet中的滚动条主题可以通过page.theme.scrollbar_theme属性进行设置。

下面是一个示例,展示如何设置滚动条的主题:

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

在上述示例中,我们定义了滚动条的主题。滚动条的跟踪条颜色在悬停状态下为琥珀色,在默认状态下为透明。滑块的颜色在悬停状态下为红色,在默认状态下为灰色。

文本主题

你可以自定义文本控件的样式。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)

在上述示例中,我们设置了文本主题,将文本的颜色设置为绿色。

选项卡主题

你可以自定义选项卡控件的外观和样式。

以下是一个示例,展示如何设置选项卡的主题:

page.theme = ft.Theme(
tabs_theme=ft.TabsTheme(
indicator_color=ft.colors.YELLOW,
label_color={
ft.MaterialState.HOVERED: ft.colors.BLUE,
ft.MaterialState.SELECTED: ft.colors.RED,
ft.MaterialState.DEFAULT: ft.colors.GREY_600,
},
label_font=ft.Font(
family="Arial",
size=16,
weight=ft.FontWeight.BOLD,
italic=False,
),
)
)

上述示例中,我们设置了选项卡的主题。指示器的颜色为黄色,标签的颜色在悬停状态下为蓝色,在选中状态下为红色,在默认状态下为灰色。

这些都是自定义主题的一些示例,你可以根据自己的需求进行自定义设置。

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.MaterialState.FOCUSED: ft.colors.with_opacity(0.2, ft.colors.GREEN),
ft.MaterialState.DEFAULT: ft.colors.with_opacity(0.2, ft.colors.PINK),
},
)
)

详情请参阅 TabsTheme

其他变化

Flutter 3.10

此 Flet 发布版基于 Flutter 3.10,带来了新功能、性能和尺寸优化。因此,大多数 Flet 依赖项也升级了其版本。如果您遇到任何问题,请告诉我们。

Web 应用中的彩色表情符号(emoji)

彩色表情符号(emoji)在 Web 应用中已经回归!在 Flutter 3.7 中,"CanvasKit" 渲染器(Flet 中的默认渲染器)禁用了彩色表情符号,原因是其字体大小为 8 MB!在 Flutter 3.10 中,彩色表情符号以可选的形式回归。您可以通过设置 use_color_emoji 参数来在服务器驱动的应用中启用彩色表情符号:

ft.app(main, use_color_emoji=True)

在发布应用程序时,您可以使用 --use-color-emoji 开关来启用彩色表情符号

这就是今天的全部内容!

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