教程:用 Python 构建和打包一个多平台桌面应用程序

Mangs

1314人浏览 · 2022-08-15 08:49:25

Mangs · 2022-08-15 08:49:25 发布

在本教程中,我们将逐步向您展示如何使用 Flet 框架在 Python 中创建计算器应用程序,并将其打包为适用于 Windows、macOS 和 Linux 的独立可执行文件,或将其部署为 Web 应用程序。该应用程序是一个一个简单的控制台程序,但它是一个多平台应用程序,具有类似于 iPhone 计算器应用程序 UI:

[ 图像描述 ](https://res.cloudinary.com/practicaldev/image/fetch/s--U-5UE_ev--/c_limit%2Cf_auto%2Cfl_progressive%2Cq_66%2Cw_880/https://dev- to-uploads.s3.amazonaws.com/uploads/articles/batr7kpmgohympf9y9hy.gif)

您可以在此处找到现场演示。

在本教程中,我们将介绍创建多平台桌面应用程序的所有基本概念:构建页面布局、添加控件、处理事件和打包/部署选项。

本教程包括以下步骤:

第 1 步:开始使用 Flet
第二步:添加页面控件
第三步:构建页面布局
第四步:处理事件
第 5 步:打包为桌面应用程序
步骤 6:部署 Web 应用程序
摘要

第 1 步:开始使用 Flet

要编写 Flet Web 应用程序,您不需要了解 HTML、CSS 或 JavaScript,但您需要 Python 和面向对象编程的基本知识。

Flet 需要 Python 3.7 或更高版本。要使用 Flet 在 Python 中创建 Web 应用程序,您需要先安装flet模块:

pip install flet

进入全屏模式退出全屏模式

首先,让我们创建一个简单的 hello-world 应用程序。

使用以下内容创建hello.py:

import flet
from flet import Page, Text

def main(page: Page):
    page.add(Text(value="Hello, world!"))

flet.app(target=main)

进入全屏模式退出全屏模式

运行此应用程序,您将看到一个带有问候语的新窗口:

[ 图像描述 ](https://res.cloudinary.com/practicaldev/image/fetch/s--ZAj88THF--/c_limit%2Cf_auto%2Cfl_progressive%2Cq_auto%2Cw_880/https://dev-to- uploads.s3.amazonaws.com/uploads/articles/v0558ag8z2h4lz14aruz.png)

第二步:添加页面控件

现在您已准备好创建一个计算器应用程序。

首先,您需要一个Text控件来显示计算结果,以及一些ElevatedButtons及其所有数字和操作。

使用以下内容创建calc.py:

import flet
from flet import ElevatedButton, Page, Text

def main(page: Page):
    page.title = "Calc App"
    result = Text(value="0")
    page.add(
        result,
        ElevatedButton(text="AC"),
        ElevatedButton(text="+/-"),
        ElevatedButton(text="%"),
        ElevatedButton(text="/"),
        ElevatedButton(text="7"),
        ElevatedButton(text="8"),
        ElevatedButton(text="9"),
        ElevatedButton(text="*"),
        ElevatedButton(text="4"),
        ElevatedButton(text="5"),
        ElevatedButton(text="6"),
        ElevatedButton(text="-"),
        ElevatedButton(text="1"),
        ElevatedButton(text="2"),
        ElevatedButton(text="3"),
        ElevatedButton(text="+"),
        ElevatedButton(text="0"),
        ElevatedButton(text="."),
        ElevatedButton(text="="),
    )

flet.app(target=main)

进入全屏模式退出全屏模式

运行应用程序,您应该会看到如下页面:

[ 图像描述 ](https://res.cloudinary.com/practicaldev/image/fetch/s--s0pjFDL6--/c_limit%2Cf_auto%2Cfl_progressive%2Cq_auto%2Cw_880/https://dev-to- uploads.s3.amazonaws.com/uploads/articles/z94ffzhyqlamx7l4ltmy.png)

第三步:构建页面布局

现在让我们将文本和按钮排列成 6 个水平行。

将calc.py内容替换为以下内容:

import flet
from flet import ElevatedButton, Page, Row, Text

def main(page: Page):
    page.title = "Calc App"
    result = Text(value="0")
    page.add(
        Row(controls=[result]),
        Row(
            controls=[
                ElevatedButton(text="AC"),
                ElevatedButton(text="+/-"),
                ElevatedButton(text="%"),
                ElevatedButton(text="/"),
            ]
        ),
        Row(
            controls=[
                ElevatedButton(text="7"),
                ElevatedButton(text="8"),
                ElevatedButton(text="9"),
                ElevatedButton(text="*"),
            ]
        ),
        Row(
            controls=[
                ElevatedButton(text="4"),
                ElevatedButton(text="5"),
                ElevatedButton(text="6"),
                ElevatedButton(text="-"),
            ]
        ),
        Row(
            controls=[
                ElevatedButton(text="1"),
                ElevatedButton(text="2"),
                ElevatedButton(text="3"),
                ElevatedButton(text="+"),
            ]
        ),
        Row(
            controls=[
                ElevatedButton(text="0"),
                ElevatedButton(text="."),
                ElevatedButton(text="="),
            ]
        ),
    )

flet.app(target=main)

进入全屏模式退出全屏模式

运行应用程序,您应该会看到如下页面:

[ 图像描述 ](https://res.cloudinary.com/practicaldev/image/fetch/s--SVI94SlK--/c_limit%2Cf_auto%2Cfl_progressive%2Cq_auto%2Cw_880/https://dev-to- uploads.s3.amazonaws.com/uploads/articles/8q5eig87yo00pcg8tiyg.png)

使用容器进行装饰

要在计算器周围添加带有圆形边框的黑色背景,我们将使用Container控件。容器可能只装饰一个控件,因此我们需要将所有 6 行包装成一个垂直列将用作容器的content:

[ 图像描述 ](https://res.cloudinary.com/practicaldev/image/fetch/s--vWV_HtaS--/c_limit%2Cf_auto%2Cfl_progressive%2Cq_auto%2Cw_880/https://dev-to- uploads.s3.amazonaws.com/uploads/articles/pnfqk9xjtvxumq2fi15j.png)

要完成程序的 UI 部分,请更新 Text 的color和size属性,以及按钮的color和bgcolor属性。为了使行内的按钮均匀对齐,我们将使用expand属性,如上图所示。

将calc.py内容替换为以下内容:

import flet
from flet import (
    Column,
    Container,
    ElevatedButton,
    Page,
    Row,
    Text,
    border_radius,
    colors,
)

def main(page: Page):
    page.title = "Calc App"
    result = Text(value="0", color=colors.WHITE, size=20)
    page.add(
        Container(
            width=300,
            bgcolor=colors.BLACK,
            border_radius=border_radius.all(20),
            padding=20,
            content=Column(
                controls=[
                    Row(controls=[result], alignment="end"),
                    Row(
                        controls=[
                            ElevatedButton(
                                text="AC",
                                bgcolor=colors.BLUE_GREY_100,
                                color=colors.BLACK,
                                expand=1,
                            ),
                            ElevatedButton(
                                text="+/-",
                                bgcolor=colors.BLUE_GREY_100,
                                color=colors.BLACK,
                                expand=1,
                            ),
                            ElevatedButton(
                                text="%",
                                bgcolor=colors.BLUE_GREY_100,
                                color=colors.BLACK,
                                expand=1,
                            ),
                            ElevatedButton(
                                text="/",
                                bgcolor=colors.ORANGE,
                                color=colors.WHITE,
                                expand=1,
                            ),
                        ]
                    ),
                    Row(
                        controls=[
                            ElevatedButton(
                                text="7",
                                bgcolor=colors.WHITE24,
                                color=colors.WHITE,
                                expand=1,
                            ),
                            ElevatedButton(
                                text="8",
                                bgcolor=colors.WHITE24,
                                color=colors.WHITE,
                                expand=1,
                            ),
                            ElevatedButton(
                                text="9",
                                bgcolor=colors.WHITE24,
                                color=colors.WHITE,
                                expand=1,
                            ),
                            ElevatedButton(
                                text="*",
                                bgcolor=colors.ORANGE,
                                color=colors.WHITE,
                                expand=1,
                            ),
                        ]
                    ),
                    Row(
                        controls=[
                            ElevatedButton(
                                text="4",
                                bgcolor=colors.WHITE24,
                                color=colors.WHITE,
                                expand=1,
                            ),
                            ElevatedButton(
                                text="5",
                                bgcolor=colors.WHITE24,
                                color=colors.WHITE,
                                expand=1,
                            ),
                            ElevatedButton(
                                text="6",
                                bgcolor=colors.WHITE24,
                                color=colors.WHITE,
                                expand=1,
                            ),
                            ElevatedButton(
                                text="-",
                                bgcolor=colors.ORANGE,
                                color=colors.WHITE,
                                expand=1,
                            ),
                        ]
                    ),
                    Row(
                        controls=[
                            ElevatedButton(
                                text="1",
                                bgcolor=colors.WHITE24,
                                color=colors.WHITE,
                                expand=1,
                            ),
                            ElevatedButton(
                                text="2",
                                bgcolor=colors.WHITE24,
                                color=colors.WHITE,
                                expand=1,
                            ),
                            ElevatedButton(
                                text="3",
                                bgcolor=colors.WHITE24,
                                color=colors.WHITE,
                                expand=1,
                            ),
                            ElevatedButton(
                                text="+",
                                bgcolor=colors.ORANGE,
                                color=colors.WHITE,
                                expand=1,
                            ),
                        ]
                    ),
                    Row(
                        controls=[
                            ElevatedButton(
                                text="0",
                                bgcolor=colors.WHITE24,
                                color=colors.WHITE,
                                expand=2,
                            ),
                            ElevatedButton(
                                text=".",
                                bgcolor=colors.WHITE24,
                                color=colors.WHITE,
                                expand=1,
                            ),
                            ElevatedButton(
                                text="=",
                                bgcolor=colors.ORANGE,
                                color=colors.WHITE,
                                expand=1,
                            ),
                        ]
                    ),
                ]
            ),
        )
    )

flet.app(target=main)

进入全屏模式退出全屏模式

运行应用程序,您应该会看到如下页面:

[ 图像描述 ](https://res.cloudinary.com/practicaldev/image/fetch/s--gPGRrt7U--/c_limit%2Cf_auto%2Cfl_progressive%2Cq_auto%2Cw_880/https://dev-to- uploads.s3.amazonaws.com/uploads/articles/rocbvsbz1qffgtqq92js.png)

正是我们想要的!

可重用的 UI 组件

虽然您可以继续在main函数中编写应用程序,但最佳做法是创建一个可重用的 UI 组件。

想象一下,您正在处理将成为较大项目一部分的应用程序标题、侧边菜单或 UI(例如,在 Flet,我们将在一个更大的“图库”应用程序中使用此计算器应用程序,该应用程序将显示所有示例对于 Flet 框架)。

即使您现在想不出这样的用途,我们仍然建议您在创建所有 Web 应用时考虑到可组合性和可重用性。

为了制作一个可重用的 Calc 应用程序组件,我们将把它的状态和表示逻辑封装在一个单独的CalculatorApp类中。

将calc.py内容替换为以下内容:

import flet
from flet import (
    Column,
    Container,
    ElevatedButton,
    Page,
    Row,
    Text,
    UserControl,
    border_radius,
    colors,
)

class CalculatorApp(UserControl):
    def build(self):
        result = Text(value="0", color=colors.WHITE, size=20)

        # application's root control (i.e. "view") containing all other controls
        return Container(
            width=300,
            bgcolor=colors.BLACK,
            border_radius=border_radius.all(20),
            padding=20,
            content=Column(
                controls=[
                    Row(controls=[result], alignment="end"),
                    Row(
                        controls=[
                            ElevatedButton(
                                text="AC",
                                bgcolor=colors.BLUE_GREY_100,
                                color=colors.BLACK,
                                expand=1,
                            ),
                            ElevatedButton(
                                text="+/-",
                                bgcolor=colors.BLUE_GREY_100,
                                color=colors.BLACK,
                                expand=1,
                            ),
                            ElevatedButton(
                                text="%",
                                bgcolor=colors.BLUE_GREY_100,
                                color=colors.BLACK,
                                expand=1,
                            ),
                            ElevatedButton(
                                text="/",
                                bgcolor=colors.ORANGE,
                                color=colors.WHITE,
                                expand=1,
                            ),
                        ]
                    ),
                    Row(
                        controls=[
                            ElevatedButton(
                                text="7",
                                bgcolor=colors.WHITE24,
                                color=colors.WHITE,
                                expand=1,
                            ),
                            ElevatedButton(
                                text="8",
                                bgcolor=colors.WHITE24,
                                color=colors.WHITE,
                                expand=1,
                            ),
                            ElevatedButton(
                                text="9",
                                bgcolor=colors.WHITE24,
                                color=colors.WHITE,
                                expand=1,
                            ),
                            ElevatedButton(
                                text="*",
                                bgcolor=colors.ORANGE,
                                color=colors.WHITE,
                                expand=1,
                            ),
                        ]
                    ),
                    Row(
                        controls=[
                            ElevatedButton(
                                text="4",
                                bgcolor=colors.WHITE24,
                                color=colors.WHITE,
                                expand=1,
                            ),
                            ElevatedButton(
                                text="5",
                                bgcolor=colors.WHITE24,
                                color=colors.WHITE,
                                expand=1,
                            ),
                            ElevatedButton(
                                text="6",
                                bgcolor=colors.WHITE24,
                                color=colors.WHITE,
                                expand=1,
                            ),
                            ElevatedButton(
                                text="-",
                                bgcolor=colors.ORANGE,
                                color=colors.WHITE,
                                expand=1,
                            ),
                        ]
                    ),
                    Row(
                        controls=[
                            ElevatedButton(
                                text="1",
                                bgcolor=colors.WHITE24,
                                color=colors.WHITE,
                                expand=1,
                            ),
                            ElevatedButton(
                                text="2",
                                bgcolor=colors.WHITE24,
                                color=colors.WHITE,
                                expand=1,
                            ),
                            ElevatedButton(
                                text="3",
                                bgcolor=colors.WHITE24,
                                color=colors.WHITE,
                                expand=1,
                            ),
                            ElevatedButton(
                                text="+",
                                bgcolor=colors.ORANGE,
                                color=colors.WHITE,
                                expand=1,
                            ),
                        ]
                    ),
                    Row(
                        controls=[
                            ElevatedButton(
                                text="0",
                                bgcolor=colors.WHITE24,
                                color=colors.WHITE,
                                expand=2,
                            ),
                            ElevatedButton(
                                text=".",
                                bgcolor=colors.WHITE24,
                                color=colors.WHITE,
                                expand=1,
                            ),
                            ElevatedButton(
                                text="=",
                                bgcolor=colors.ORANGE,
                                color=colors.WHITE,
                                expand=1,
                            ),
                        ]
                    ),
                ]
            ),
        )

def main(page: Page):
    page.title = "Calc App"
    # create application instance
    calc = CalculatorApp()

    # add application's root control to the page
    page.add(calc)

flet.app(target=main)

进入全屏模式退出全屏模式

阅读更多关于创建用户控件。

试试看

尝试在页面中添加两个CalculatorApp组件:

# create application instance
calc1 = CalculatorApp()
calc2 = CalculatorApp()

# add application's root control to the page
page.add(calc1, calc2)

进入全屏模式退出全屏模式

第四步:处理事件

现在让我们让计算器完成它的工作。我们将为所有按钮使用相同的事件处理程序,并使用data属性根据单击的按钮来区分操作。对于每个 ElevatedButton 控件,指定on_click=self.button_clicked事件并将data属性设置为等于按钮的文本,例如:

ElevatedButton(
    text="AC",
    bgcolor=colors.BLUE_GREY_100,
    color=colors.BLACK,
    expand=1,
    on_click=self.button_clicked,
    data="AC",
)

进入全屏模式退出全屏模式

下面是on_click事件处理程序,它将在单击“AC”按钮时重置 Text 值:

def button_clicked(self, e):
    if e.data == "AC":
        self.result.value = "0"

进入全屏模式退出全屏模式

使用类似的方法,为每个按钮指定on_click事件和data属性,并根据e.data值将预期操作添加到button_clicked事件处理程序。从此处的复制此步骤的整个代码。

运行应用程序并在操作中查看它:

[ 图像描述 ](https://res.cloudinary.com/practicaldev/image/fetch/s--OGn-XhWI--/c_limit%2Cf_auto%2Cfl_progressive%2Cq_66%2Cw_880/https://dev- to-uploads.s3.amazonaws.com/uploads/articles/r7gklknmt89sjbkjnajp.gif)

第 5 步:打包为桌面应用程序

恭喜!您已经使用 Flet 创建了您的计算器应用程序,它看起来很棒!现在是时候与全世界分享您的应用了!

Flet Python 应用程序及其所有依赖项都可以打包成可执行文件,用户可以在他们的计算机上运行它,而无需安装 Python 解释器或任何模块。

PyInstaller用于将 Flet Python 应用程序及其所有依赖项打包到适用于 Windows、macOS 和 Linux 的单个包中。要创建 Windows 包,PyInstaller 必须在 Windows 上运行;要构建 Linux 应用程序,它必须在 Linux 上运行;并在 macOS 上构建 macOS 应用程序。

从安装 PyInstaller 开始:

pip install pyinstaller

进入全屏模式退出全屏模式

导航到.py文件所在的目录并使用以下命令构建您的应用程序:

pyinstaller your_program.py

进入全屏模式退出全屏模式

您捆绑的 Flet 应用程序现在应该在dist/your_program文件夹中可用。尝试运行该程序,看看它是否有效。

在 macOS/Linux 上:

./dist/your_program/your_program

进入全屏模式退出全屏模式

在 Windows 上:

dist\your_program\your_program.exe

进入全屏模式退出全屏模式

现在您可以压缩dist/your_program文件夹的内容并分发给您的用户!他们不需要安装 Python 或 Flet 来运行您的打包程序 - 这是 Electron 的绝佳替代品!

您会注意到,当您从 macOS Finder 或 Windows 资源管理器运行打包程序时,会打开一个新的控制台窗口,然后会打开一个顶部带有应用程序 UI 的窗口。

您可以通过使用--noconsole开关重建包来隐藏该控制台窗口:

pyinstaller your_program.py --noconsole --noconfirm

进入全屏模式退出全屏模式

捆绑到一个文件

dist/your_program目录的内容是一个应用程序可执行文件和支持资源:Python 运行时、模块、库。

您可以使用--onefile开关将所有这些打包在一个可执行文件中:

pyinstaller your_program.py --noconsole --noconfirm --onefile

进入全屏模式退出全屏模式

您将在dist文件夹中获得更大的可执行文件。该可执行文件是一个自运行存档,其中包含您的程序和运行时资源,在运行时会被解压缩到临时目录中 - 这就是启动“onefile”包需要更长时间的原因。

注意:

对于 macOS,您可以分发dist/your_program或dist/your_program.app,这是一个应用程序包。

自定义包图标

默认捆绑应用程序图标是软盘,这可能会让年轻的开发人员感到困惑,他们错过了那些使用软盘来存储计算机数据的远古时代。

您可以通过添加--icon参数将图标替换为您自己的图标:

pyinstaller your_program.py --noconsole --noconfirm --onefile --icon <your-image.png>

进入全屏模式退出全屏模式

PyInstaller 会将提供的 PNG 转换为特定于平台的格式(Windows 为.ico,macOS 为.icns),但您需要为此安装Pillow模块:

pip install pillow

进入全屏模式退出全屏模式

包装资产

您的 Flet 应用程序可以包含个资产。如果应用资产位于your_program.py旁边的assets文件夹中,则可以在 macOS/Linux 上将它们添加到具有--add-data参数的应用程序包中:

pyinstaller your_program.py --noconsole --noconfirm --onefile --add-data "assets:assets"

进入全屏模式退出全屏模式

在 Windows 上assets;assets必须用;分隔:

pyinstaller your_program.py --noconsole --noconfirm --onefile --add-data "assets;assets"

进入全屏模式退出全屏模式

注意:

你可以在这里找到所有 PyInstaller 命令行选项

使用CI进行多平台打包

要使用 PyInstaller 为特定操作系统创建应用程序包,它必须在该操作系统上运行。

如果您无法访问 Mac 或 PC,您可以将您的应用程序与AppVeyor- 适用于 Windows、Linux 和 macOS 的持续集成服务捆绑在所有三个平台上。简而言之,持续集成 (CI) 是在每次推送到存储库时构建、测试和部署(持续交付 - CD)应用程序的自动化过程。

AppVeyor 对于托管在 GitHub、GitLab 和 Bitbucket 上的开源项目是免费的。要使用 AppVeyor,请将您的应用程序推送到其中一个源代码控制提供程序中的存储库。

要开始使用 AppVeyor,请注册一个免费帐户。

单击“新建项目”按钮,授权 AppVeyor 访问您的 GitHub、GitLab 或 Bitbucket 帐户,选择您的程序的存储库并创建一个新项目。

现在,要为 Windows、Linux 和 macOS 配置应用程序的打包,请将具有的文件添加以下内容到存储库appveyor.yml的根目录中。appveyor.yml是构建配置文件或 CI 工作流程,描述构建、测试、打包和部署必须在每次提交时运行的命令。

注意:

您可以只 forkflet-dev/python-ci-example存储库并根据您的需要对其进行自定义。

当您将任何更改推送到 GitHub 存储库时,AppVeyor 将自动启动新的构建:

[ 图像描述 ](https://res.cloudinary.com/practicaldev/image/fetch/s--iaLPTxAl--/c_limit%2Cf_auto%2Cfl_progressive%2Cq_auto%2Cw_880/https://dev-to- uploads.s3.amazonaws.com/uploads/articles/7o5dh6ggt9rq7ebfpnuy.png)

CI 工作流在每次推送到存储库时执行的操作:

将存储库克隆到干净的虚拟机。
使用pip安装应用程序依赖项。
运行pyinstaller将 Python 应用程序打包到 Windows、macOS 和 Ubuntu 的“onefile”包中。
Zip/Tar 打包并上传到"Artifacts"。
将包上传到GitHub 发布推送新标签时。只需推送一个新标签即可发布!

GITHUB_TOKEN

appveyor.yml中的GITHUB_TOKEN是 GitHub 个人访问令牌 (PAT),AppVeyor 使用它来将创建的包发布到存储库“Releases”。您需要生成自己的令牌并将其替换为appveyor.yml。登录到您的 GitHub 帐户并导航到个人访问令牌页面。单击“生成新令牌”并分别为公共或私有存储库选择“public_repo”或“repo”范围。将生成的令牌复制到剪贴板并返回 AppVeyor Portal。导航到加密配置数据页面并将令牌粘贴到“要加密的值”字段,单击“加密”按钮。将加密值放在GITHUB_TOKEN下的appveyor.yml中。

为您的 Python 项目配置 AppVeyor,将新标签推送到存储库并“自动”获取 GitHub 版本中所有三个平台的桌面包! 🎉

[ 图像描述 ](https://res.cloudinary.com/practicaldev/image/fetch/s--iBE95prp--/c_limit%2Cf_auto%2Cfl_progressive%2Cq_auto%2Cw_880/https://dev-to- uploads.s3.amazonaws.com/uploads/articles/22axhkidepk2lvpiu728.png)

除了GitHub Releases之外,您还可以配置将工件发布到Amazon S3 存储桶或Azure Blob 存储。

第 6 步:部署 Web 应用程序

Flet 应用程序可以部署为“独立”Web 应用程序,这意味着您的 Python 应用程序和 Flet Web 服务器作为一个捆绑包一起部署。

Flet 应用程序使用 WebSockets 对其 UI 进行实时部分更新并将事件发送回您的程序。

在为您的 Flet 应用程序选择托管服务提供商时,您应该注意他们对 WebSockets 的支持。有时 WebSocket 不被允许或作为更昂贵产品的一部分出现,有时有一个代理会定期通过超时中断 WebSocket 连接(Flet 实现了重新连接逻辑,但无论如何这对您的应用程序的用户来说可能是不愉快的行为)。

为 Flet 应用程序选择托管服务提供商时的另一个重要因素是延迟。 UI 上的每个用户操作都会向 Flet 应用程序发送一条消息,然后该应用程序会将更新的 UI 发送回用户。确保您的托管服务提供商拥有多个数据中心,以便您可以在离大多数用户更近的地方运行您的应用程序。

注意:

在本节中,我们不隶属于托管服务提供商 - 我们只是使用他们的服务并喜欢它。

Fly.io

Fly.io具有强大的 WebSocket 支持,可以将您的应用部署到靠近用户的数据中心。他们的价格非常有吸引力,慷慨的免费套餐允许您免费托管多达 3 个应用程序。

要开始使用 Fly installflyctl然后进行身份验证:

flyctl auth login

进入全屏模式退出全屏模式

要使用flyctl部署应用程序,您必须将以下 3 个文件添加到 Python 应用程序所在的文件夹中。

使用应用程序依赖项列表创建requirements.txt。至少它应该包含flet模块:

flet>=0.1.33

进入全屏模式退出全屏模式

创建fly.toml描述 Fly 应用程序:

app = "<your-app-name>"

kill_signal = "SIGINT"
kill_timeout = 5
processes = []

[env]
  FLET_SERVER_PORT = "8080"

[experimental]
  allowed_public_ports = []
  auto_rollback = true

[[services]]
  http_checks = []
  internal_port = 8080
  processes = ["app"]
  protocol = "tcp"
  script_checks = []

  [services.concurrency]
    hard_limit = 25
    soft_limit = 20
    type = "connections"

  [[services.ports]]
    force_https = true
    handlers = ["http"]
    port = 80

  [[services.ports]]
    handlers = ["tls", "http"]
    port = 443

  [[services.tcp_checks]]
    grace_period = "1s"
    interval = "15s"
    restart_limit = 0
    timeout = "2s"

进入全屏模式退出全屏模式

将<your-app-name>替换为所需的应用程序名称,该名称也将用于应用程序 URL,例如https://<your-app-name>.fly.dev。

请注意,我们将FLET_SERVER_PORT环境变量的值设置为8080,这是 Flet Web 应用程序将在其上运行的内部 TCP 端口。

创建Dockerfile包含构建应用程序容器的命令:

FROM python:3-alpine

WORKDIR /app

COPY requirements.txt ./
RUN pip install --no-cache-dir -r requirements.txt

COPY . .

EXPOSE 8080

CMD ["python", "./main.py"]

进入全屏模式退出全屏模式

main.py是您的 Python 程序的文件。

注意:

Fly.io 将每个应用程序部署为 Docker 容器,但 Fly 的一大优点是它提供了一个免费的远程 Docker 构建器,因此您不需要在您的机器上安装 Docker。

接下来,将命令行切换到您的应用所在的文件夹,然后运行以下命令来创建和初始化一个新的 Fly 应用:

flyctl apps create --name <your-app-name>

进入全屏模式退出全屏模式

通过运行部署应用程序:

flyctl deploy

进入全屏模式退出全屏模式

而已!通过运行在浏览器中打开您的应用程序:

flyctl apps open

进入全屏模式退出全屏模式

重装

Replit是一个在线 IDE 和托管平台,适用于以任何语言编写的 Web 应用程序。他们的免费套餐允许运行任意数量的应用程序,但有一些性能限制。

要在 Replit 上运行您的应用程序:

在 Repli 上注册。
点击“新建repl”按钮。
从列表中选择“Python”语言并提供 repl 名称,例如my-app。
点击“Packages”标签,搜索fletpackage;选择其最新版本。
单击“秘密”选项卡并添加值为5000的FLET_SERVER_PORT变量。
切换回“文件”选项卡并将您的应用程序复制粘贴到main.py。
运行应用程序。享受。

总结

在本教程中,您学习了如何:

创建一个简单的 Flet 应用程序;
使用可重用的 UI 组件;
使用Column、Row和Container控件设计 UI 布局;
处理事件;
将您的 Flet 应用程序打包成可执行文件;
将您的 Flet 应用程序部署到网络;

如需进一步阅读,您可以探索控件和示例存储库。

我们很乐意倾听您的反馈!请给我们发送电子邮件,加入讨论Discord,关注Twitter。

Python

Python社区为您提供最前沿的新闻资讯和知识内容

更多推荐

求助！为什么用InsCode部署会出现无限重定向？

Python

如何重塑熊猫。系列

问题:如何重塑熊猫。系列在我看来,它就像 pandas.Series 中的一个错误。 a = pd.Series([1,2,3,4]) b = a.reshape(2,2) b b 有类型 Series 但无法显示,最后一条语句给出异常,非常冗长,最后一行是“TypeError: %d format: a number is required, not numpy.ndarray”。 b.sha

Python

在哪里可以找到有关 Keras 中默认权重初始化器的文档? [复制]

问题:在哪里可以找到有关 Keras 中默认权重初始化器的文档? [复制] 我刚刚在这里](https://keras.io/initializers/)中阅读了有关[中的 Keras 权重初始化器的信息。在文档中,只介绍了不同的初始化程序。如: model.add(Dense(64, kernel_initializer='random_normal')) 当我没有指定kernel_initia