Blog | flet中文网·flet最全教程·Qt最强平替

Flet版本控制与预发布

2022年11月16日 · 阅读需 3 分钟

费奥多·菲茨纳 (Feodor Fitsner)

Flet 创始人和开发者

Flet是一个快速发展的框架，每隔一天都会提交新功能和错误修复。

每个版本发布一个拉取请求的开发模型对项目来说效果不好，因为用户需要等待数周才能获得新版本，而且从开发角度来看，发布大型的“英勇”版本需要耗费很多精力 🫠。

从现在开始，我们将把发布拆分为多个拉取请求，每个拉取请求一个功能/错误修复。

每个合并到main分支的拉取请求将会发布一个预发布（开发中的版本）包到pypi.org，版本格式为X.Y.Z.devN。

安装预发布版本

要安装Flet的预发布版本，请使用以下命令：

pip install flet --pre

信息

我们建议将预发布版本构建安装到虚拟环境中。

Flet版本控制

Flet将切换到语义化版本，版本号为 主版本.次版本.修订版本：

当有“不兼容的API更改”时，将增加 主版本。现在它是 0，我们预计当Flet API足够稳定时将其设为 1。
当以向后兼容的方式添加新功能时，将增加 次版本。
当进行向后兼容的错误修复时，将增加 修订版本。

根据这个规则，即将发布的Flet版本将是 0.2.0。该版本的错误修复将标记为 0.2.1、0.2.2 等。该版本之后的发布将是 0.3.0，以此类推。

Flet预发布版本的格式将为 主版本.{上一次次版本 + 1}.0.dev{构建}，其中 上一次次版本 是上一个发布的 次版本，{构建} 是由CI设置的构建号。例如，如果上次发布的版本是 0.1.65，预发布版本将具有版本 0.2.0.dev{构建}。发布 0.2.0 之后的预发布版本将标记为 0.3.0.dev{构建}。

ResponsiveRow 和移动端控件

2022年11月13日 · 阅读需 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

底部导航栏，提供了一种固定且方便的方式来在应用程序中切换主要目的地：

NavigationBar 文档, 示例。

一个工具提示控件：

Tooltip 文档, 示例。

HapticFeedback

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

HapticFeedback 文档。

ShakeDetector

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

ShakeDetector 文档。

其他改进

Markdown 代码语法高亮

示例代码。

可变字体支持

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

示例代码。

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

享受！

Matplotlib 和 Plotly 图表

2022年10月24日 · 阅读需 3 分钟

Feodor Fitsner

Flet 创始人和开发者

我们非常高兴地介绍 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 图表控件的文档：

探索 Flet 图表示例。

通过示例学习Python库：

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

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

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

尽情享受！

手势检测器

2022年10月11日 · 阅读需 2 分钟

Feodor Fitsner

Flet 创始人和开发者

我们刚刚发布了支持手势处理的 Flet 0.1.62版本！

我们刚刚发布了Flet 0.1.62，新增了手势处理的支持！

新增了一个控件 - GestureDetector，它允许处理各种手势：单击和双击，包括左（主要）和右（次要）鼠标（指针）按钮，垂直、水平和双向拖动，缩放（捏合和放大）手势以及悬停事件。现在，通过将其包装到 GestureDetector 中，您可以使任何 Flet 控件可“点击”和“拖动”！

以下是一个简单的示例应用，允许您在 Stack 内拖动容器：

import flet as ft

def main(page: ft.Page):
    def on_pan_update(e: ft.DragUpdateEvent):
        e.control.top = max(0, e.control.top + e.delta_y)
        e.control.left = max(0, e.control.left + e.delta_x)
        e.control.update()

    gd = ft.GestureDetector(
        mouse_cursor=ft.MouseCursor.MOVE,
        on_vertical_drag_update=on_pan_update,
        left=100,
        top=100,
        content=ft.Container(bgcolor=ft.Colors.BLUE, width=50, height=50, border_radius=5),
    )

    page.add( ft.Stack([gd], expand=True))

ft.app(target=main)

手势检测器是 Flet 原语集合中的又一个伟大补充，它使您可以构建仅受您想象力限制的应用程序。本月晚些时候将推出2D绘图功能，将完善该组合！

此次发布不仅涉及手势 - 这也是一个“稳定性”发布。我们修复了一些错误，并添加了一些其他小功能，您可以在这里查看。

升级到最新版本的 Flet 模块 (pip install flet --upgrade)，在您的应用程序中集成身份验证，然后告诉我们您的想法！

享受吧！

用户认证

2022年9月27日 · 阅读需 5 分钟

Feodor Fitsner

Flet 创始人和开发者

Flet 现在支持用户认证了！🎉

现在，您可以在 Flet 应用中使用第三方身份提供商（如 GitHub、Google、Azure、Auth0、LinkedIn 等）实现用户认证（“使用 X 登录”按钮）：

这个发布版本不仅仅是关于认证，还新增了很多相关功能和小的改进：

认证

Flet 认证功能：

适用于 Flet 桌面、Web 和移动应用。
在一个应用中使用多个认证提供商。
内置 OAuth 提供商，自动获取用户详细信息：
- GitHub
- Azure
- Google
- Auth0
可选的群组获取。
自动刷新令牌。
使用已保存的令牌登录（“记住我”）。
自定义 OAuth 提供商。

一个简单示例，展示如何在 Flet 应用中添加“使用 GitHub 登录”按钮：

import os

import flet as ft
from flet.auth.providers.github_oauth_provider import GitHubOAuthProvider

def main(page: ft.Page):

    provider = GitHubOAuthProvider(
        client_id=os.getenv("GITHUB_CLIENT_ID"),
        client_secret=os.getenv("GITHUB_CLIENT_SECRET"),
        redirect_url="http://localhost:8550/api/oauth/redirect",
    )

    def login_click(e):
        page.login(provider)

    def on_login(e):
        print("访问令牌:", page.auth.token.access_token)
        print("用户 ID:", page.auth.user.id)

    page.on_login = on_login
    page.add(ft.ElevatedButton("使用 GitHub 登录", on_click=login_click))

ft.app(target=main, port=8550, view=ft.AppView.WEB_BROWSER)

备注

在运行应用之前，请在命令行中设置密钥环境变量：

$ export GITHUB_CLIENT_ID="<client_id>"
$ export GITHUB_CLIENT_SECRET="<client_secret>"

阅读认证指南获取更多信息和示例。

客户端存储

Flet 的客户端存储 API 允许在客户端的持久存储中存储键值数据。Flet 实现使用了 shared_preferences Flutter 包。

将数据写入存储：

page.client_storage.set("key", "value")

读取数据：

value = page.client_storage.get("key")

阅读客户端存储指南获取更多信息和示例。

会话存储

Flet 引入了在服务器端用户会话中存储键值数据的 API。

将数据写入会话：

page.session.set("key", "value")

读取数据：

value = page.session.get("key")

阅读会话存储指南获取更多信息和示例

加密 API

在此版本中，Flet 引入了使用对称算法（使用相同密钥进行加密和解密）加密和解密敏感文本数据的实用方法。它使用 cryptography 包中的 Fernet 实现，Fernet 是 AES 128 的增强版本，加上 PBKDF2 从用户密码短语派生加密密钥。

加密数据：

from flet.security import encrypt, decrypt
secret_key = "S3CreT!"
plain_text = "这是一条秘密消息！"
encrypted_data = encrypt(plain_text, secret_key)

解密数据：

from flet.security import encrypt, decrypt
secret_key = "S3CreT!"
plain_text = decrypt(encrypted_data, secret_key)
print(plain_text)

继续阅读获取更多信息和示例。

其他改进

SVG 图片支持（示例）和新的图片属性：
on_animation_end 回调链接动画。
Container.clip_behavior 属性。
page.window_bgcolor 用于制作酷炫的透明应用窗口：

import flet as ft
def main(page: ft.Page):
    page.window_bgcolor = ft.Colors.TRANSPARENT
    page.bgcolor=ft.Colors.TRANSPARENT
    page.window_title_bar_hidden = True
    page.window_frameless = True
    page.window_left = 400
    page.window_top = 400
    page.add(ft.ElevatedButton("我是一颗浮动的按钮！"))
ft.app(target=main)

page.get_clipboard()
page.launch_url() - 通过额外参数更好地控制：
- web_window_name - 打开 URL 的窗口选项卡/名称：_self - 当前选项卡，_blank - 新选项卡，或 <your name> - 指定名称的选项卡。
- web_popup_window - 设置为 True 在浏览器弹出窗口中显示 URL。默认值为 False。
- window_width - 可选，弹出窗口宽度。
- window_height - 可选，弹出窗口高度。
page.window_to_front()
page.close_in_app_web_view()

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

享受吧！

安装预发布版本​

Flet版本控制​

ResponsiveRow 控件​

其他新控件​

BottomSheet​

NavigationBar​

Tooltip​

HapticFeedback​

ShakeDetector​

其他改进​

Markdown 代码语法高亮​

可变字体支持​

认证​

客户端存储​

会话存储​

加密 API​

其他改进​

安装预发布版本

Flet版本控制

`ResponsiveRow` 控件

其他新控件

BottomSheet

NavigationBar

Tooltip

HapticFeedback

ShakeDetector

其他改进

Markdown 代码语法高亮

可变字体支持

认证

客户端存储

会话存储

加密 API

其他改进