跳到主要内容

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

查看所有标签

画布

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

释放你的内心艺术家 🧑‍🎨,通过刚刚在 Flet 0.6.0 中发布的全新 Canvas 控件来提升你的 Flet 创意!

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

将 Canvas 与 GestureDetector 结合,你可以获得一个自由绘画应用 - Flet Brush 😀!

示例源码

Canvas 控件位于 flet.canvas 包中。你需要另一个导入才能使用它:

import flet.canvas as cv

以下是一个使用填充和描边 Paint 绘制笑脸的简单程序,使用了 CircleArc 形状:

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_idpage.client_user_agent中捕获用户信息,同时修复了与路由相关的严重的#1333#1289错误。

今天就介绍到这里!

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

使用 Pyodide 构建独立的 Flet Web 应用

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

我们刚刚发布了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 应用:

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 应用:

查看指南 了解更多关于将 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.srcAudio.srcPage.fontsContainer.image_src)现在也可以从本地文件加载资源,方法是提供文件系统中的完整路径,以及通过提供相对路径从 assets 目录中加载资源。对于桌面应用程序,src 属性中的路径可以是以下之一:
    • 相对于 assets 目录的路径,带或不带开始的斜杠,例如:/image.pngimage.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-coreflet
  • 用 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) - 继续加油!

ResponsiveRow 和移动端控件

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

我们刚刚发布了 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 可以配置为在特定的"断点"上具有不同的值。断点是命名的维度范围:

断点尺寸
xs<576px
sm≥576px
md≥768px
lg≥992px
xl≥1200px
xxl≥1400px

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

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 文档, 示例

Tooltip

一个工具提示控件:

Tooltip 文档, 示例

HapticFeedback

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

HapticFeedback 文档

ShakeDetector

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

ShakeDetector 文档

其他改进

Markdown 代码语法高亮

示例代码

可变字体支持

Flutter 终于支持了 可变字体,我们也将其引入到了 Flet 中!

示例代码

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

享受!

Matplotlib 和 Plotly 图表

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

我们非常高兴地介绍 Flet 0.1.63 中的 Matplotlib 和 Plotly 图表控件!

MatplotlibPlotly是最受认可的Python图表库,具有丰富的功能。它们与其他科学Python库(如Numpy或Pandas)非常兼容。

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

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

绘制一个简单的条形图

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

或一些多图的等高线图

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

探索 Flet 图表示例

通过示例学习Python库:

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

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

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

尽情享受!