【Flet教程】使用Flet以Python创建TODO应用程序

Flet是基于Python实现的Flutter图形界面GUI。除了使用Python，具备美观、简洁、易用，还有Flutter本身的跨平台（安卓、iOS、Win、Mac、Web）、高性能、有后盾的特点。下面是0.18版官方TODO APP教程，为了准确，保持了中英双语，请对照食用。

Create To-Do app in Python with Flet

使用Flet在Python中创建待办事项应用程序

In this tutorial we will show you, step-by-step, how to create a ToDo web app in Python using Flet framework and then share it on the internet. The app is a single-file console program of just 180 lines (formatted!) of Python code, yet it is a multi-session, modern single-page application with rich, responsive UI:
在本教程中，我们将逐步向您展示如何使用Flet框架在Python中创建ToDo web应用程序，然后在互联网上共享。该应用程序是一个只有180行（格式化！）Python代码的单文件控制台程序，但它是一个多会话、现代的单页应用程序，具有丰富、响应迅速的UI：

You can see the live demo here.
你可以在这里看到现场演示。

We chose a ToDo app for the tutorial, because it covers all of the basic concepts you would need to create any web app: building a page layout, adding controls, handling events, displaying and editing lists, making reusable UI components, and deployment options.
我们为教程选择了ToDo应用程序，因为它涵盖了创建任何web应用程序所需的所有基本概念：构建页面布局、添加控件、处理事件、显示和编辑列表、制作可重复使用的UI组件以及部署选项。

The tutorial consists of the following steps:
本教程包括以下步骤：

Getting started with Flet Flet入门
Adding page controls and handling events 添加页面控件和处理事件
View, edit and delete list items 查看、编辑和删除列表项
Filtering list items 筛选列表项
Final touches 最后的润色
Deploying the app 部署应用程序
Getting started with Flet Flet入门​
To write a Flet web app you don’t need to know HTML, CSS or JavaScript, but you do need a basic knowledge of Python and object-oriented programming.
要编写Flet web应用程序，您不需要了解HTML、CSS或JavaScript，但您确实需要Python和面向对象编程的基本知识。

Flet requires Python 3.8 or above. To create a web app in Python with Flet, you need to install flet module first:
Flet需要Python 3.8或更高版本。要使用Flet在Python中创建web应用程序，您需要首先安装Flet模块：

pip install flet

To start, let’s create a simple hello-world app.
首先，让我们创建一个简单的helloworld应用程序。

Create hello.py with the following contents:使用以下内容创建hello.py：

import flet as ft

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

ft.app(target=main)

Run this app and you will see a new window with a greeting:
运行此应用程序，您将看到一个带有问候语的新窗口：

Adding page controls and handling events
添加页面控件和处理事件​
Now we’re ready to create a multi-user ToDo app.
现在，我们准备创建一个多用户ToDo应用程序。

To start, we’ll need a TextField for entering a task name, and an “+” FloatingActionButton with an event handler that will display a Checkbox with a new task.
首先，我们需要一个用于输入任务名称的TextField，以及一个带有事件处理程序的“+”FloatingActionButton，该事件处理程序将显示带有新任务的复选框。

Create todo.py with the following contents:创建包含以下内容的todo.py：

import flet as ft

def main(page: ft.Page):
    def add_clicked(e):
        page.add(ft.Checkbox(label=new_task.value))
        new_task.value = ""
        page.update()

    new_task = ft.TextField(hint_text="Whats needs to be done?")

    page.add(new_task, ft.FloatingActionButton(icon=ft.icons.ADD, on_click=add_clicked))

ft.app(target=main)

Run the app and you should see a page like this:
运行应用程序，您应该会看到这样的页面：

Page layout页面布局​
Now let’s make the app look nice! We want the entire app to be at the top center of the page, taking up 600 px width. The TextField and the “+” button should be aligned horizontally, and take up full app width:
现在让我们让应用程序看起来很好看！我们希望整个应用程序位于页面的顶部中心，占据600像素的宽度。TextField和“+”按钮应水平对齐，并占据整个应用程序宽度：

Row is a control that is used to lay its children controls out horizontally on a page. Column is a control that is used to lay its children controls out vertically on a page.
行是一个控件，用于在页面上水平放置其子控件。列是一个控件，用于在页面上垂直放置其子控件。

Replace todo.py contents with the following:将todo.py内容替换为以下内容：

import flet as ft


def main(page: ft.Page):
    def add_clicked(e):
        tasks_view.controls.append(ft.Checkbox(label=new_task.value))
        new_task.value = ""
        view.update()

    new_task = ft.TextField(hint_text="Whats needs to be done?", expand=True)
    tasks_view = ft.Column()
    view=ft.Column(
        width=600,
        controls=[
            ft.Row(
                controls=[
                    new_task,
                    ft.FloatingActionButton(icon=ft.icons.ADD, on_click=add_clicked),
                ],
            ),
            tasks_view,
        ],
    )

    page.horizontal_alignment = ft.CrossAxisAlignment.CENTER
    page.add(view)

ft.app(target=main)

Run the app and you should see a page like this:
运行应用程序，您应该会看到这样的页面：

Reusable UI components可重用的UI组件​
While we could continue writing our app in the main function, the best practice would be to create a reusable UI component. Imagine you are working on an app header, a side menu, or UI that will be a part of a larger project. Even if you can’