跳到主要内容

自定义Web应用程序

当您在浏览器中打开Flet应用程序时,它的index.html、Flutter引擎、favicon、图像和其他Web应用程序资源是由Flet服务器(也称为"Flet守护进程"或fletd)提供的。这些资源与flet Python包捆绑在一起。然而,有些情况下您需要修改某些文件的内容以自定义应用程序的外观或行为,例如:

  • 网站图标(favicon)。
  • 应用程序加载动画。
  • 包含PWA详细信息的manifest.json
  • 包含应用程序描述和触摸图标的index.html

您可以在flet.app()调用中指定assets_dir来设置应用程序可用的资源的位置。assets_dir可以是相对于您的main.py目录的路径,也可以是绝对路径。例如,考虑以下程序结构:

/assets
/images/my-image.png
main.py

您可以在应用程序中如下访问您的图像:

import flet as ft

def main(page: ft.Page):
page.add(ft.Image(src=f"/images/my-image.png"))

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

网站图标(favicon)

要使用自己的网站图标覆盖默认图标,请将favicon.png文件放置在资源目录的根目录中。它应该是一个至少32x32像素大小的PNG图像。

加载动画

要使用自己的应用程序标志覆盖Flet动画图像,请将带有您自己应用程序标志的icons/loading-animation.png图像放置在资源目录的根目录中。

如果您希望完全自定义Flutter应用程序的初始化逻辑,您可以修改Flet的原始index.html,按照Flutter文档中的说明进行操作。自定义的index.html必须放置在资源目录的根目录中。