7 篇博文 含有标签「发布」

亲爱的朋友们！在今年的最后一篇文章中，我想感谢大家对 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 包，例如 bcrypt，html5lib，numpy 和许多其他包，并从 Pyodide 包注册表中安装它们。

请查看将应用打包进行分发指南，以获取有关 flet build 命令的完整信息。

请加入 Flet Discord 服务器 或在 Flet GitHub 讨论区上创建新的讨论帖，告诉我们你的想法。 我们祝你新年快乐！尽情享受你的假期！

释放你内心的艺术家🧑‍🎨，并通过全新的 Canvas 控件在 Flet 0.6.0 中增强你的 Flet 创造力！

Canvas 允许你使用一组基本几何图形（"形状"）（如线条、圆、弧线、路径和文本）绘制任意图形。我敢打赌，你甚至可以使用 Canvas 控件实现你自己的图表！

将 Canvas 和 GestureDetector 结合使用，你就能得到一个自由绘画的应用程序 - Flet Brush 😀！

示例源代码

Canvas 控件位于 flet.canvas 包中。你需要另一个导入语句来使用它：

import flet.canvas as cv

下面是一个简单的程序，使用填充和描边 Paint，使用 Circle 和 Arc 形状绘制一个笑脸：

import math
import flet as ft
import flet.canvas as cv

def main(page: ft.Page):
    stroke_paint = paint = ft.Paint(stroke_width=2, style=ft.PaintingStyle.STROKE)
    fill_paint = paint = ft.Paint(style=ft.PaintingStyle.FILL)
    cp = cv.Canvas(
        [
            cv.Circle(100, 100, 50, stroke_paint),
            cv.Circle(80, 90, 10, stroke_paint),
            cv.Circle(84, 87, 5, fill_paint),
            cv.Circle(120, 90, 10, stroke_paint),
            cv.Circle(124, 87, 5, fill_paint),
            cv.Arc(70, 95, 60, 40, 0, math.pi, paint=stroke_paint),
        ],
        width=float("inf"),
        expand=True,
    )

    page.add(cp)

ft.app(main)

在文档中阅读更多关于 Canvas 的内容，并探索 Canvas 示例！

其他更新​

富文本支持​

在处理 Canvas 上的文字绘制时，作为本次发布的附加功能，我们实现了一个新的 TextSpan 控件，现在可以与 Text.spans 结合使用输出富文本。

查看富文本示例：一、二 和 三。

按钮的 url 属性​

如果你需要通过点击按钮或任何其他带有 on_click 事件的控件打开一个 URL，你可以直接在 url 中提供该 URL，而无需在代码中使用 page.launch_url() 方法。

不再需要这样：

ft.ElevatedButton("前往谷歌", on_click=lambda e: e.page.launch_url("https://www.google.com"))

只需要这样：

ft.ElevatedButton("前往谷歌", url="https://www.google.com")

新的 url 属性还解决了 Safari 上阻止弹窗的问题。

Markdown 中的自动链接跟随​

作为 url 属性的延续，Markdown 控件现在可以启用自动跟随文档中的链接：

import flet as ft

md = """
[前往谷歌](https://www.google.com)
"""

def main(page: ft.Page):
    page.add(
        ft.Markdown(
            md,
            extension_set=ft.MarkdownExtensionSet.GITHUB_WEB,
            auto_follow_links=True,
        )
    )

ft.app(main)

更好的 Web 支持​

在这个版本中，我们还对Web支持进行了一些改进，例如在page.client_id和page.client_user_agent中捕获用户信息，同时修复了与路由相关的严重的#1333和#1289错误。

今天就介绍到这里！

将Flet模块升级到最新版本（pip install flet --upgrade），试用一下画布和富文本，并让我们知道你的想法！

我们刚刚发布了 Flet 0.4.0，新增了一个非常令人兴奋的功能 - 将Flet应用打包成独立的静态网站，可以完全在浏览器中运行！这个应用可以发布到任何支持静态网站的免费主机，比如GitHub Pages或Cloudflare Pages。这得益于 Pyodide - 一个用于WebAssembly的Python移植工具！

您可以快速使用Python构建出色的单页应用程序（SPA），并在任何地方进行托管！无需HTML、CSS或JavaScript！

快速示例：使用Pyodide创建Flet应用​

安装最新的Flet包:

pip install flet --upgrade

创建一个简单的 counter.py 应用:

import flet as ft

def main(page: ft.Page):
    page.title = "Flet计数器示例"
    page.vertical_alignment = ft.MainAxisAlignment.CENTER

    txt_number = ft.TextField(value="0", text_align=ft.TextAlign.RIGHT, width=100)

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

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

    page.add(
        ft.Row(
            [
                ft.IconButton(ft.icons.REMOVE, on_click=minus_click),
                txt_number,
                ft.IconButton(ft.icons.ADD, on_click=plus_click),
            ],
            alignment=ft.MainAxisAlignment.CENTER,
        )
    )

ft.app(main)

运行全新的 flet publish 命令将Flet应用发布为静态网站:

flet publish counter.py

网站将发布到与 counter.py 同级的 dist 目录中。 使用内置的Python Web服务器进行测试:

python -m http.server --directory dist

在浏览器中打开 http://localhost:8000 来查看发布的应用。

以下是一些托管在Cloudflare Pages上的实例 Flet 应用：

To-Do

Icons browser

Calc

Solitaire

Trolli

了解更多关于将Flet应用发布为独立网站的详细信息，请查看我们的指南。

Python中的内置Fletd服务器​

Flet 0.4.0 还实现了 新的Flet桌面架构。

它用一个轻量级的Python代码替换了Go编写的Fletd服务器，带来了如下优点：

1. 运行Flet应用只需要2个系统进程：Python解释器和Flutter客户端。
2. 通信开销更小（去掉了Python和Fletd之间的两次网络跳转），延迟更低（Windows上使用TCP，macOS/Linux上使用Unix域套接字）。
3. 默认情况下，在Windows上，Shim绑定到127.0.0.1，这更安全。
4. 由flet pack生成的独立应用程序包的大小减小了约8 MB。

此外，该实现还需要支持Pyodide（我们无法在浏览器中运行Go Web服务器，对吧？）并为iOS和Android支持铺平了道路。

其他变化​

• 所有从Web URL加载资源的控件（Image.src，Audio.src，Page.fonts，Container.image_src）现在也能够从本地文件中加载资源，只需在文件系统中提供完整路径，或者在assets目录中提供相对路径。对于桌面应用程序，src属性中的路径可以是以下之一：
  • 相对于assets目录的路径，带或不带斜杠，例如：/image.png或image.png。不应包含构件目录的名称。
  • 计算机文件系统中的绝对路径，例如：C:\projects\app\assets\image.png或/Users/john/images/picture.png。
  • 完整的URL，例如：https://mysite.com/images/pic.png。
  • 添加page.on_error = lambda e: print("Page error:", e.data)以查看加载失败的图像。
• flet Python包已分为两个包：flet-core和flet。
• 用Poetry替换了PDM。
• 所有地方都移除了beartype。

💥 破坏性变更​

• 默认路由方案从“hash”改为“path”（在应用程序URL末尾没有/#/）。使用ft.app(main, route_url_strategy="hash")以获得原始行为。
• 独立桌面Flet应用程序不再支持OAuth身份验证。

异步支持​

Flet应用程序现在可以编写为异步应用程序，并且可以使用asyncio和其他Python异步库。在Flet中，调用协程是自然支持的，因此您无需包装它们以进行同步运行。

要从异步Flet应用程序开始，应将main()方法设置为async：

import flet as ft

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

ft.app(main)

阅读指南了解有关编写异步Flet应用程序的更多信息。

结论​

Flet 0.4.0 带来了以下令人激动的功能：

• 在浏览器中运行Pyodide的独立Web应用程序，并在廉价托管服务上托管。
• 更快、更安全的体系结构，内置Fletd服务器。
• 对异步应用程序的支持。

将Flet模块升级到最新版本（pip install flet --upgrade），尝试使用flet publish命令，并告诉我们您的想法！

顺便说一下，Flet项目已经获得了⭐️ 4.2K颗星星 ⭐️（仅一个月内增加了1K） - 继续加油！

我们刚刚发布了 Flet 0.1.65，它增加了一些移动端优化的控件，修复了一些错误，并引入了一个新的布局控件 - ResponsiveRow。

ResponsiveRow 控件​

ResponsiveRow 借鉴了 Bootstrap 网页框架的网格布局思想。

ResponsiveRow 允许将子控件对齐到虚拟列上。默认情况下，虚拟网格有12列，但可以通过 ResponsiveRow.columns 属性进行自定义。

类似于 expand 属性，现在每个控件都有一个 col 属性，用于指定控件应跨越的列数。例如，要创建一个由两列组成的布局，每一列都跨越6个虚拟列：

import flet as ft

ft.ResponsiveRow([
    ft.Column(col=6, controls=ft.Text("列 1")),
    ft.Column(col=6, controls=ft.Text("列 2"))
])

ResponsiveRow 是 "响应式" 的，因为它可以根据屏幕（页面、窗口）大小的变化自适应其子控件的大小。上面示例中的 col 属性是一个恒定的数值，这意味着子控件在任何屏幕大小下都会跨越6列。

如果 ResponsiveRow 的子控件没有指定 col 属性，则它会跨越最大数量的列。

col 可以配置为在特定的 "断点" 上具有不同的值。断点是具有命名的尺寸范围：

例如，下面的示例会在移动设备上将内容折叠成一列，并在更大的屏幕上占据两列：

import flet as ft

ft.ResponsiveRow([
    ft.Column(col={"sm": 6}, controls=ft.Text("列 1")),
    ft.Column(col={"sm": 6}, controls=ft.Text("列 2"))
])

下面是一个更复杂的响应式布局示例：

import flet as ft

def main(page: ft.Page):
    def page_resize(e):
        pw.value = f"{page.width} px"
        pw.update()

    page.on_resize = page_resize

    pw = ft.Text(bottom=50, right=50, style="displaySmall")
    page.overlay.append(pw)
    page.add(
        ft.ResponsiveRow(
            [
                ft.Container(
                    ft.Text("列 1"),
                    padding=5,
                    bgcolor=ft.colors.YELLOW,
                    col={"sm": 6, "md": 4, "xl": 2},
                ),
                ft.Container(
                    ft.Text("列 2"),
                    padding=5,
                    bgcolor=ft.colors.GREEN,
                    col={"sm": 6, "md": 4, "xl": 2},
                ),
                ft.Container(
                    ft.Text("列 3"),
                    padding=5,
                    bgcolor=ft.colors.BLUE,
                    col={"sm": 6, "md": 4, "xl": 2},
                ),
                ft.Container(
                    ft.Text("列 4"),
                    padding=5,
                    bgcolor=ft.colors.PINK_300,
                    col={"sm": 6, "md": 4, "xl": 2},
                ),
            ],
        ),
        ft.ResponsiveRow(
            [
                ft.TextField(label="文本框 1", col={"md": 4}),
                ft.TextField(label="文本框 2", col={"md": 4}),
                ft.TextField(label="文本框 3", col={"md": 4}),
            ],
            run_spacing={"xs": 10},
        ),
    )
    page_resize(None)

ft.app(target=main)

ResponsiveRow 文档, 示例。

其他新增的控件​

此版本新增了Flet社区需求的新的可视化和非可视化控件，也是构建即将推出的Flet Studio的用户界面所必需的。

BottomSheet​

显示一个模态的Material Design底部工作表：

BottomSheet 文档, 示例。

NavigationBar​

底部导航栏，提供了一种持久且方便的方式在应用程序的主要目标之间进行切换：

NavigationBar 文档, 示例。

Tooltip​

一个工具提示控件：

Tooltip 文档, 示例。

HapticFeedback​

允许访问设备上的触觉反馈（点击和振动）接口。

HapticFeedback 文档。

ShakeDetector​

用于检测手机晃动的控件。基于shake小部件。

ShakeDetector 文档。

其他改进​

Markdown代码语法高亮​

示例代码。

可变字体支持​

Flutter终于支持了可变字体，我们也将其带到了Flet中！

示例代码。

将Flet模块升级到最新版本（pip install flet --upgrade），并告诉我们你的想法吧！

我们非常高兴在Flet 0.1.63中引入了Matplotlib和Plotly图表控件！

Matplotlib和Plotly是最受认可的Python图表库，具有丰富的功能。它们与其他科学Python库（如Numpy或Pandas）非常兼容。

毫无疑问，要想将它们的功能作为纯粹的Flutter小部件复制是几乎不可能的。幸运的是，Matplotlib和Plotly都可以将图表导出为各种格式，例如SVG。而Flet可以显示SVG图像，这给出了一个完美的组合 - Flet用于Matplotlib和Plotly的图表控件！

这个解决方案的效果非常好，几乎可以显示Matplotlib和Plotly示例库中的任何示例 - 只有您的想象力是限制！

绘制一个简单的条形图：

一个漂亮的带图例的散点图：

或一些多图的等高线图：

请查看Matplotlib和Plotly图表控件的文档：

• MatplotlibChart
• PlotlyChart

探索Flet图表示例。

通过示例学习Python库：

• Matplotlib图库
• Plotly图库

在将来的版本中，我们可能会通过实现自定义的后端为Matplotlib图表添加一个交互式的“工具栏”。或者也许这是Flet用户的一个很好的练习题？😉

此外，当Flet支持其他语言时，我们需要重新审视图表功能，使其与语言无关，因为当前的图表实现依赖于Python库。

将Flet模块升级到最新版本（pip install flet --upgrade），将认证集成到您的应用程序中，并告诉我们您的想法！