跳到主要内容

新版本发布：拖放、绝对定位和可点击容器

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

我们刚刚发布了 Flet 0.1.41，其中包含拖放支持以及其他一些不错的功能，如堆栈中控件的绝对定位和可点击容器！

拖放​

在 Flet 中实现拖放非常愉快——这要归功于 Flutter 中智能的拖放实现！您只需使用 "draggable" 控件将其拖到 "drag target" 上，当拖动项被放置时，会调用 on_accept 事件处理程序。

查看 拖放示例。

探索 Draggable 和 DragTarget 控件，它们的属性和事件。

堆栈中的绝对定位​

现在所有可见控件都有 left、top、right 和 bottom 属性，可以让它们在 Stack 内进行绝对定位，例如：

import flet as ft

def main(page: ft.Page):

    page.horizontal_alignment = ft.CrossAxisAlignment.CENTER
    page.vertical_alignment = ft.MainAxisAlignment.CENTER

    page.add(
        ft.Container(
            ft.Stack(
                [
                    ft.Text("1", color=ft.colors.WHITE),
                    ft.Text("2", color=ft.colors.WHITE, right=0),
                    ft.Text("3", color=ft.colors.WHITE, right=0, bottom=0),
                    ft.Text("4", color=ft.colors.WHITE, left=0, bottom=0),
                    ft.Text("5", color=ft.colors.WHITE, left=40, top=35),
                ]
            ),
            border_radius=8,
            padding=5,
            width=100,
            height=100,
            bgcolor=ft.colors.BROWN_700,
        )
    )

ft.app(target=main)

可点击容器​

Container 控件获得了 on_click 事件，使您可以将任何控件变成按钮，并在 ink 设置为 True 时具有漂亮的材质波纹效果！

查看上述示例的 源代码。

试用 Flet 并 告诉我们 您的想法！

在 Flet 应用中使用自定义字体

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

现在，您可以在 Flet 应用中使用自己的字体了！

支持以下字体格式：

  • .ttc
  • .ttf
  • .otf

使用 page.fonts 属性导入字体。

将 page.fonts 属性设置为一个字典，其中键是字体系列名称，用于引用该字体，值是要导入的字体文件的 URL：

def main(page: ft.Page):
    page.fonts = {
        "Kanit": "https://raw.githubusercontent.com/google/fonts/master/ofl/kanit/Kanit-Bold.ttf",
        "Aleo Bold Italic": "https://raw.githubusercontent.com/google/fonts/master/ofl/aleo/Aleo-BoldItalic.ttf"
    }
    page.update()

    # ...

字体可以通过提供绝对 URL 从外部资源导入，或者通过提供相对 URL 和 assets_dir 从应用程序资源中导入。

在 flet.app() 调用中指定 assets_dir，以设置应该提供给应用程序的资产位置。assets_dir 可以是相对于您的 main.py 目录的路径，也可以是绝对路径。例如，考虑以下程序结构：

/assets
   /fonts
       /OpenSans-Regular.ttf
main.py

代码示例​

以下程序从 GitHub 加载 "Kanit" 字体，并从资源中加载 "Open Sans"字体。 "Kanit" 被设置为默认应用字体，而 "Open Sans" 用于特定的文本控件：

import flet as ft

def main(page: ft.Page):
    page.title = "Custom fonts"

    page.fonts = {
        "Kanit": "https://raw.githubusercontent.com/google/fonts/master/ofl/kanit/Kanit-Bold.ttf",
        "Open Sans": "fonts/OpenSans-Regular.ttf",
    }

    page.theme = Theme(font_family="Kanit")

    page.add(
        ft.Text("This is rendered with Kanit font"),
        ft.Text("This is Open Sans font example", font_family="Open Sans"),
    )

ft.app(target=main, assets_dir="assets")

静态字体与可变字体​

目前仅支持静态字体，即仅包含一种特定宽度/粗细/样式组合的字体，例如 "Open Sans Regular" 或 "Roboto Bold Italic"。

可变字体支持仍在开发中。

但是，如果您需要在应用中使用可变字体，可以使用 fonttools 创建特定权重的静态“实例化”，然后使用这些实例：

fonttools varLib.mutator ./YourVariableFont-VF.ttf wght=140 wdth=85

要探索可用的字体特性（例如 wght 的可能选项），可以使用 Wakamai Fondue 在线工具。

试试 Flet 并告诉我们您的想法！

介绍 Flet

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

今天我们宣布 Flet 的第一个版本发布了！

Flet 是一个用于使用 Python 构建实时网络、桌面和移动应用的框架。

无需使用复杂的 JavaScript 前端、REST API 后端、数据库、缓存等架构。使用 Flet，你只需编写一个 Python 状态单体应用程序，即可获得多用户、实时单页应用程序 (SPA) 或移动应用程序。

要开始使用 Flet 开发，你只需要你喜欢的 IDE 或文本编辑器。无需 SDK，无需数千个依赖项，无需复杂的工具链——Flet 内置了带有资产托管的 Web 服务器和桌面客户端。

Flet UI 使用 Flutter 构建，因此你的应用程序看起来很专业，并且可以交付到任何平台。Flet 通过将较小的“widgets”组合成可立即使用的“controls”并采用命令式编程模型来简化 Flutter 模型。 你可以获得 Flutter 的所有强大功能，而无需学习 Dart！

Flet 应用程序作为常规 Web 应用程序部署，可以立即通过浏览器访问或安装为移动设备上的 PWA。Web 应用程序还公开了一个 API，可以被运行在 iOS 和 Android 上的 Flet 客户端（计划在未来版本中推出）使用，提供原生移动体验。

以下是一些示例：

试试 Flet 并告诉我们你的想法！