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

🥰 情人节快乐，亲爱的朋友们！🥰

我们刚刚发布了 Flet 0.20.0，重点如下：

1. 自适应 UI。
2. 使用第三方 Flutter 包扩展 Flet 应用。
3. 新控件：Video（耶！）、AudioRecorder 和一系列 Cupertino 风格控件。Flet 现在包含 97 个内置控件！

sudo apt install libmpv-dev mpv

自适应 UI​

自适应控件允许编写具有单个代码库的应用程序，这些应用程序在运行的平台不同时具有不同的外观和行为。

截至目前，Flet 提供了 [11 个自适应控件]。要使控件自适应，可以将其 adaptive 属性设置为 True。

在 Flet 0.20.0 中，我们为所有类似容器的控件引入了 adaptive 属性。 在容器上设置 adaptive=True 会将此属性传播到所有子自适应控件。

Page 添加了 design 属性，使您可以对控件的设计语言进行细粒度控制，其值可以为：ft.PageDesign.ADAPTIVE、ft.PageDesign.MATERIAL 或 ft.PageDesign.CUPERTINO。

只需设置 page.design = ft.PageDesign.ADAPTIVE，即可使您的应用在 iOS 和 Android 设备上看起来都很棒：

iPhone

Android

集成现有的 Flutter 包​

目前 Flet 提供了近 100 个控件，但如您所想，并不是每个 Flutter 库/小部件都可以添加到核心 Flet 库中，Flet 团队也无法在可接受的时间范围内独自完成。

同时，我们也不希望让选择 Flet 来构建其下一个商业或企业应用的早期采用者处于他们的进展依赖于 Flet 团队是否有时间和愿意实现他们所需的 Flutter 控件的情况。

在 Flet 0.20.0 中，我们重新构建了 Flutter 核心包，并确定了可供第三方开发者使用的 API 来添加他们自己的用 Dart 编写的 Flet 控件。

我们目前正在编写 API 文档，但您现在可以通过查看 Video 和 Audio 控件的 Dart 源代码来了解如何实现自定义 Flutter 包。

简而言之，您需要创建一个新的 Flutter 包，其中包含并导出两个方法：

void ensureInitialized();
Widget createControl(CreateControlArgs args);

参见 ensureInitialized() 和 createControl() 的 Video 控件实现。

在 Python 方面，您需要创建一个从 Control（非可视或叠加控件）或 ConstrainedControl 继承的新类。

参见 Python 中 Video 类的实现。

要在构建 Flet 应用时集成自定义 Flutter 包，使用 flet build 命令，您可以使用 --include-packages 选项或在 Flet 应用根目录下的 pubspec.yaml 文件中列出额外的包。

Video 控件​

Video 控件在一个单独的 Flutter 包中实现。

要构建包含 Video 控件的 Flet 应用，请在 flet build 命令中添加 --include-packages flet_video，例如：

flet build apk --include-packages flet_video

Flet 0.20.0 是一个相对较大的 版本，可能会破坏一些东西。

升级到 Flet 0.20.0，测试您的应用，并通过加入 Flet Discord 服务器 或在 Flet GitHub 讨论 中创建新线程来告诉我们您的想法。

祝您愉快！

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

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

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

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

释放你的内心艺术家 🧑‍🎨，通过刚刚在 Flet 0.6.0 中发布的全新 Canvas 控件来提升你的 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("Go to Google", on_click=lambda e: e.page.launch_url("https://google.com"))

只需要这样：

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

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

Markdown 中的自动跟随链接​

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

import flet as ft

md = """
[Go to Google](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 应用：

待办事项

图标浏览器

计算器

纸牌

Trolli

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

Python 中的内置 Fletd 服务器​

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

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

1. 运行 Flet 应用只需要两个系统进程：Python 解释器和 Flutter 客户端。
2. 更少的通信开销（减少了 Python 和 Fletd 之间的两次网络跳跃）和更低的延迟（桩代码在 Windows 上使用 TCP，在 macOS/Linux 上使用 Unix 域套接字）。
3. 默认情况下，桩代码绑定到 Windows 上的 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("页面错误：", e.data) 以查看失败的图像。
• flet Python 包分为两个包：flet-core 和 flet。
• 用 Poetry 替换 PDM。
• beartype 已全面移除。

💥 重大更改​

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

异步支持​

Flet 应用现在可以编写为异步应用，并与其他 Python 异步库一起使用 asyncio。在 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 web 框架中的网格布局思想。

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

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

import flet as ft

ft.ResponsiveRow([
    ft.Column(col=6, controls=ft.Text("第一列")),
    ft.Column(col=6, controls=ft.Text("第二列"))
])

ResponsiveRow 是"响应式"的，因为它可以根据屏幕（页面、窗口）大小的变化调整其子项的大小。上面示例中的 col 属性是一个常数，这意味着子项将在任何屏幕大小下跨越 6 列。

如果 ResponsiveRow 的子项未指定 col 属性，则该子项将跨越最大数量的列。

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

例如，以下示例在移动设备上将内容折叠为单列，并在较大屏幕上占据两列：

import flet as ft

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

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

import flet as ft

def main(page: ft.Page):
    def page_resize(e):
        pw.value = f"{page.width} 像素"
        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("第一列"),
                    padding=5,
                    bgcolor=ft.Colors.YELLOW,
                    col={"sm": 6, "md": 4, "xl": 2},
                ),
                ft.Container(
                    ft.Text("第二列"),
                    padding=5,
                    bgcolor=ft.Colors.GREEN,
                    col={"sm": 6, "md": 4, "xl": 2},
                ),
                ft.Container(
                    ft.Text("第三列"),
                    padding=5,
                    bgcolor=ft.Colors.BLUE,
                    col={"sm": 6, "md": 4, "xl": 2},
                ),
                ft.Container(
                    ft.Text("第四列"),
                    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），并告诉我们你的想法！

享受！